/* Additive local study. Existing type, palette and product rules stay in place. */
.nc-brand-intro {
  display: grid;
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto;
  background: var(--paper);
  padding: clamp(48px, 6vw, 88px) var(--gutter);
  align-items: center;
}
.nc-brand-intro .atwork { padding: 0; overflow: visible; }
.nc-mobile-story-slot:empty { display: none; }
.nc-brand-intro #am-ofen, .nc-brand-intro #fakten {
  scroll-margin-top: calc(var(--header-h, 80px) + var(--statsbar-h, 32px) + 32px);
}
.nc-brand-intro .atwork-story { width: auto; padding: 0; }
.nc-brand-intro .atwork-text {
  padding: clamp(24px, 3vw, 40px);
  border: 2px solid var(--green);
  outline: 1px solid var(--green);
  outline-offset: -8px;
  background: var(--paper);
  rotate: -1deg;
  opacity: 1;
  transform: none;
}
.nc-brand-intro .atwork-text .headline {
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  line-height: 1.2;
}
.nc-brand-intro .atwork-say { margin-top: 24px; }
.nc-brand-intro .atwork-say p { font-size: 1rem; line-height: 1.65; }
.nc-brand-intro .atwork-say .glasses { margin-block: 20px; }
.nc-brand-intro .atwork-text > .nc-story-detail { display: none; }
.nc-story-signature {
  display: grid;
  grid-template-columns: 1fr 48px;
  align-items: center;
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgb(var(--green-rgb) / .3);
  color: var(--green);
}
.nc-story-signature strong { font: italic 500 2rem/1.1 var(--font-accent); }
.nc-story-signature span { grid-column: 1; font-size: .8rem; margin-top: 5px; }
.nc-story-signature svg { grid-column: 2; grid-row: 1 / 3; width: 48px; fill: currentColor; }
.nc-brand-intro .fakten-stage { width: auto; padding: 0; }
.nc-brand-intro .fakten-head { padding: 0; }
.nc-brand-intro .fakten-zickzack { margin-top: 24px; }
.nc-brand-intro .fakten-linie, .nc-brand-intro .fakt-zeichen { display: none; }
.nc-brand-intro .fakten-track { display: grid; grid-template-columns: 1fr; gap: 20px; }
.nc-brand-intro .fakt-zelle:nth-child(n) {
  grid-column: auto;
  grid-row: auto;
  margin: 0;
  opacity: 1;
  transform: none;
}
.nc-brand-intro .fakt {
  height: 100%;
  padding: 24px;
  gap: 12px;
  border-width: 1px;
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--green);
  transform: none;
  rotate: 1deg;
}
.nc-brand-intro .fakt-zelle:nth-child(even) .fakt { transform: none; rotate: -1.5deg; }
.nc-brand-intro .fakt > * { margin: 0; }
.nc-brand-intro .fakt-kopf { font-size: 1rem; line-height: 1.35; }
.nc-brand-intro .fakt-text { font-size: .875rem; line-height: 1.6; }
.nc-brand-intro .fakt-links { margin-top: auto; font-size: .8rem; line-height: 1.5; }
.nc-brand-intro .fakt-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* A large pizza, plate and circular lettering. The copy stays still. */
.nc-pizza-scene {
  position: relative;
  isolation: isolate;
  max-width: 1300px;
  margin: 0 auto;
  padding: 32px var(--gutter) 40px;
}
.nc-pizza-stage { width: 100%; aspect-ratio: 1; }
/* Die drehende Dekoration darf benachbarte Pfeile und Links nicht abfangen. */
.nc-pizza-turner { position: relative; width: 100%; height: 100%; transform: rotate(var(--nc-turn, 0deg)); pointer-events: none; }
.nc-pizza-plate, .nc-pizza-lettering { position: absolute; inset: 0; width: 100%; height: 100%; }
.nc-pizza-plate { color: var(--green); }
.nc-pizza-photo {
  position: absolute;
  inset: 14%;
  width: 72%;
  height: 72%;
  object-fit: contain;
}
.nc-pizza-lettering { color: var(--green); fill: currentColor; font: 400 36px var(--font-display); letter-spacing: 1px; }
.nc-pizza-scene .pizza-look {
  z-index: 1;
  margin: -40px auto 0;
  max-width: 440px;
  padding: 28px;
  color: var(--green);
  background: var(--paper);
  border: 2px solid var(--green);
  outline: 1px solid var(--green);
  outline-offset: -8px;
  rotate: -2deg;
}
.nc-pizza-scene .pizza-look-inner { max-width: none; width: auto; padding: 0; }
.nc-pizza-scene .pizza-look-title { font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.15; }
.nc-pizza-scene .pizza-look-copy { font-size: .9375rem; line-height: 1.6; margin-top: 20px; }
.nc-pizza-scene .pizza-look-nonna { width: 58px; margin-top: 20px; }
.nc-pizza-scene .pizza-look-outro { font-size: 1.15rem; margin-top: 12px; }
.nc-pizza-cta { display: inline-flex; justify-content: center; align-items: center; width: 100%; min-height: 48px; margin-top: 24px; padding: 12px 16px; color: var(--cream); background: var(--green); border: 1px solid var(--green); font: 600 .875rem/1.4 var(--font-body); text-decoration: none; }
.nc-pizza-cta:hover { color: var(--green); background: var(--paper); }
.nc-pizza-cta:focus-visible, .nc-ribbon-link:focus-visible { outline: 3px solid var(--green); outline-offset: 6px; }

/* Keep the existing four expandable steps, give them paper surfaces. */
.flow.nc-brand-flow .flow-track { display: grid; gap: 18px; border: 0; margin-bottom: 0; }
.nc-brand-flow .flow-disclosure { padding: 0 20px; background: var(--paper); border: 1px solid var(--green); rotate: -.5deg; }
.nc-brand-flow .flow-disclosure:nth-child(even) { rotate: .7deg; }
.nc-brand-flow .flow-disclosure summary { min-height: 80px; grid-template-columns: 28px minmax(0, 1fr) 24px; gap: 12px; }
.nc-brand-flow .flow-disclosure h3 { font-size: clamp(.9rem, 1.8vw, 1.15rem); line-height: 1.35; }
.nc-brand-flow .flow-answer { padding: 0 8px 24px 44px; }
.nc-brand-flow .flow-answer p { font-size: .9375rem; }
.nc-flow-finale { position: relative; height: 200px; overflow: clip; pointer-events: none; margin-top: 16px; }
.nc-flow-pizza { position: absolute; top: 24px; left: 50%; width: min(500px, 100%); aspect-ratio: 1; translate: -50% 0; }
.nc-brand-flow .flow-stage { padding-bottom: 0; }
.nc-brand-ribbons { position: relative; z-index: 2; padding: 0 0 44px; margin-top: -18px; overflow: clip; }
.nc-ribbon-link { display: block; color: var(--green); text-decoration: none; margin: 0 -16px; padding: 6px 0; }
.nc-ribbon-face {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  padding: 18px 24px;
  border-block: 2px solid currentColor;
  background: var(--paper);
  font: 400 clamp(.875rem, 2.8vw, 2.1rem)/1.35 var(--font-display);
  text-align: center;
  text-wrap: balance;
  rotate: -1.5deg;
}
.nc-ribbon-link:nth-child(2) .nc-ribbon-face { background: var(--green); color: var(--cream); rotate: 1deg; }
.nc-ribbon-link:nth-child(3) .nc-ribbon-face { background: #d5ddc6; rotate: -1deg; }
.nc-ribbon-link:hover .nc-ribbon-face { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

@media (min-width: 600px) {
  .nc-brand-intro .fakten-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow.nc-brand-flow .flow-track { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .nc-flow-finale { height: 240px; }
}
@media (min-width: 1000px) {
  .nc-brand-intro { grid-template-columns: 1fr 1.1fr; gap: 48px; }
  .nc-brand-intro .fakt { padding: 22px; }
  .nc-brand-intro .fakt-links { font-size: .75rem; }
  .nc-brand-intro .fakt-kopf { font-size: .95rem; }
  .nc-pizza-scene { height: 900px; padding-block: 0; }
  .nc-pizza-stage { position: absolute; width: 900px; right: -20px; top: -10px; }
  .nc-pizza-scene .pizza-look { position: relative; top: 200px; margin: 0; width: 370px; padding: 32px; }
  .nc-brand-flow .flow-track { gap: 24px; }
}
@media (max-width: 599px) {
  .nc-brand-intro { gap: 36px; padding-inline: 24px; }
  .nc-brand-intro .fakten-track { gap: 16px; }
  .nc-brand-intro .fakt { padding: 24px; }
  .nc-pizza-scene { padding-inline: 16px; padding-top: 20px; }
  .nc-brand-flow .flow-disclosure { padding-inline: 14px; }
  .nc-brand-flow .flow-answer { padding-left: 40px; }
  .nc-brand-ribbons { padding-bottom: 24px; }
  .nc-ribbon-face { min-height: 68px; padding-inline: 32px; }
}
@media (max-width: 699px) {
  .nc-pizza-scene .pizza-look { margin-top: 24px; rotate: 0deg; }
}
@media (prefers-reduced-motion: reduce) {
  .nc-pizza-turner { transform: none; }
  .nc-brand-intro .fakt, .nc-ribbon-face { animation: none; }
}
