/* =============================================================
   RESPONSIVE — the Golden Master DESKTOP artboard (1440).

   Every grid definition below is the Golden Master's own
   grid-template-columns, transcribed. The leading 64px gutter column
   is why grid sections start their content at x = 88 (64 + 24 gap),
   while directly padded sections start at x = 64.

   Above 1440 the artboard is frozen and centred by .fkn-shell /
   .fkn-gm, so the approved endpoint renders 1:1.
   ============================================================= */

/* -----------------------------------------------------------------
   ≥ 900 · the five navigation items plus the CTA fit on one line
   ----------------------------------------------------------------- */
@media (min-width: 900px) {
  .fkn-nav {
    display: block;
  }

  .fkn-header .fkn-header__cta {
    display: inline-flex;
  }

  .fkn-burger {
    display: none;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .fkn-nav__list {
    --fkn-nav-gap: 22px;
  }
}

/* -----------------------------------------------------------------
   ≥ 1024 · the Golden Master desktop composition
   ----------------------------------------------------------------- */
@media (min-width: 1024px) {

  /* ---- Production notes: GM desktop padding 20px 24px ---- */
  :root {
    --fkn-note-pad-y: 20px;
    --fkn-note-pad-x: 24px;
    --fkn-note-head-gap: 16px;
    --fkn-note-rule-gap: 14px;
    --fkn-note-rule-gap-top: 12px;
    --fkn-note-gap: 18px;
    --fkn-note-row-gap: 8px;
    --fkn-note-dash-gap: 14px;
    --fkn-partner-h: 92px;
    --fkn-partner-pad: 14px;
    --fkn-partner-logo-h: 52px;
    --fkn-partner-logo-h-isswat: 40px;
    --fkn-centre-size: 200px;
  }

  .fkn-stamp {
    padding: 5px 12px;
  }

  /* Endpoint-specific Golden Master strings swap over here. */
  .fkn-note__label--wide,
  .fkn-note__when--wide { display: inline; }
  .fkn-note__label--narrow,
  .fkn-note__when--narrow { display: none; }
  .fkn-wide-only { display: inline; }
  .fkn-note__body li.fkn-wide-only { display: flex; }
  .fkn-narrow-only { display: none; }
  .s-dimming__break { display: none; }

  /* GM desktop sets the partner caption at a single weight. */
  .s-network__partner p strong { font-weight: inherit; }

  /* ================= 01 HERO =================
     GM: grid-template-columns: 64px repeat(12,1fr); column-gap: 24px
         text  grid-column 2/9, padding 88px 24px 56px 0
         media grid-column 9/14 (runs to the artboard edge) */
  .s-hero__inner {
    max-width: var(--fkn-artboard);
    margin-inline: auto;
    padding: 0;
    display: grid;
    grid-template-columns: var(--fkn-gutter) repeat(12, minmax(0, 1fr));
    /* The image spans both rows, so with two auto rows its height would be
       shared out and push the coordinate line below where the artboard sets
       it. Pinning the first row to its content keeps that line exactly 64px
       under the calls to action, as on the artboard. */
    grid-template-rows: min-content 1fr;
    column-gap: var(--fkn-gap);
    align-items: start;
  }

  .s-hero__text {
    grid-column: 2 / 9;
    grid-row: 1;
    padding: 88px 24px 0 0;
    min-width: 0;
  }

  .s-hero__title {
    margin-top: 34px;
    white-space: nowrap;
  }

  /* Two explicit lines, each with its own clip line, second +80 ms. */
  .s-hero__title {
    clip-path: none;
    animation: none;
  }

  .s-hero__line {
    display: block;
    clip-path: inset(-0.06em -0.6em 100% -0.6em);
  }

  .s-hero__line > span {
    display: block;
  }

  .js .s-hero__line {
    animation: fkn-reveal-clip var(--fkn-duration-reveal) var(--fkn-ease) forwards;
  }

  .js .s-hero__line > span {
    animation: fkn-reveal-rise var(--fkn-duration-reveal) var(--fkn-ease) forwards;
  }

  .js .s-hero__line:nth-child(2),
  .js .s-hero__line:nth-child(2) > span {
    animation-delay: 80ms;
  }

  .s-hero__lead {
    margin-top: 30px;
    max-width: 560px;
  }

  .s-hero__thread {
    margin-top: 34px;
    gap: 18px;
  }

  .s-hero__thread .fkn-thread {
    width: 280px;
  }

  .s-hero__actions {
    margin-top: 42px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px;
  }

  .s-hero__actions .fkn-cta {
    height: 52px;
  }

  .s-hero__media {
    grid-column: 9 / 14;
    grid-row: 1 / span 2;
    position: relative;
    margin-top: 0;
    margin-inline: 0;
    min-width: 0;
  }

  .s-hero__figure .fkn-photo__frame {
    border-right: 0;
    border-left: var(--fkn-rule) solid var(--fkn-border-strong);
  }

  /* GM: left -30px, vertical-rl rotated 180°, 10px mono, 0.16em */
  .s-hero__stamp {
    display: block;
    position: absolute;
    left: -30px;
    top: 2px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    letter-spacing: 0.16em;
  }

  /* GM keeps the coordinate line inside the text column, 64px below. */
  .s-hero__coords {
    grid-column: 2 / 9;
    grid-row: 2;
    margin-top: 64px;
    padding: 0 0 56px;
  }

  /* ================= 02 VERSPRECHEN =================
     GM: padding 112px 64px 104px · inner max-width 980, margin-left 104
         pass mark at left 64, top 48 */
  .s-promise .fkn-shell {
    position: relative;
  }

  .s-promise__inner {
    max-width: 980px;
    margin-left: 104px;
  }

  .s-promise__passmark {
    top: 48px;
  }

  .s-promise__break {
    display: inline;
  }

  .s-promise__circled {
    padding: 2px 22px 8px;
  }

  .s-promise__circled svg {
    left: -8px;
    top: -4px;
    width: calc(100% + 16px);
    height: calc(100% + 10px);
  }

  .s-promise__circled path {
    stroke-width: 2.6;
  }

  .s-promise__pair {
    margin-top: 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    max-width: 820px;
  }

  .s-promise__item {
    border-left: 0;
    border-top: var(--fkn-rule) solid var(--fkn-border-strong);
    padding-left: 0;
    padding-top: 16px;
  }

  .s-promise__item dt {
    margin-bottom: 10px;
  }

  /* ================= 03 ABLAUFPLAN =================
     GM head grid:     64px repeat(12,1fr) 0   · content 2/9
     GM schedule grid: 64px 150px repeat(10,1fr) 0
                       time 2 · body 3/10 · bar 10/13 · pass 10/14
     GM foot grid:     64px repeat(12,1fr)     · content 3/12 */
  .s-runofshow .s-runofshow__head {
    max-width: var(--fkn-artboard);
    margin-inline: auto;
    padding: 0;
    display: grid;
    grid-template-columns: var(--fkn-gutter) repeat(12, minmax(0, 1fr)) 0;
    column-gap: var(--fkn-gap);
  }

  .s-runofshow__head > * {
    grid-column: 2 / 9;
    min-width: 0;
  }

  .s-runofshow__title {
    margin-top: 20px;
  }

  .s-runofshow__intro {
    margin-top: 18px;
    max-width: 600px;
  }

  .s-runofshow__schedule {
    max-width: var(--fkn-artboard);
    margin-inline: auto;
    padding: 0;
    margin-top: 56px;
  }

  .s-runofshow__list {
    display: grid;
    grid-template-columns: var(--fkn-gutter) 150px repeat(10, minmax(0, 1fr)) 0;
    column-gap: var(--fkn-gap);
  }

  /* The entries dissolve into the one schedule grid, exactly as the
     Golden Master lays them out; rows stay explicit so the two side
     images cannot float up into an earlier row. */
  .s-runofshow__entry {
    display: contents;
  }

  .s-runofshow__entry:nth-of-type(1) > * { grid-row: 1; }
  .s-runofshow__entry:nth-of-type(2) > * { grid-row: 2; }
  .s-runofshow__entry:nth-of-type(3) > * { grid-row: 3; }
  .s-runofshow__entry:nth-of-type(4) > * { grid-row: 4; }
  .s-runofshow__entry:nth-of-type(5) > * { grid-row: 5; }

  .s-runofshow__axis {
    left: calc(var(--fkn-gutter) + var(--fkn-gap) + 6px);
    top: 14px;
  }

  .s-runofshow__timecol {
    grid-column: 2;
    padding-left: 32px;
    padding-top: 0;
  }

  .s-runofshow__body {
    grid-column: 3 / 10;
    min-width: 0;
    padding: 0 0 44px;
    margin-bottom: 44px;
    border-bottom: var(--fkn-rule) solid var(--fkn-border);
  }

  .s-runofshow__entry:nth-of-type(5) .s-runofshow__body {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }

  .s-runofshow__dot {
    top: 12px;
    left: 2.5px;
  }

  /* The extra breath around the 20:00 entry belongs to the narrow artboard
     only; at 1440 the Golden Master sets that row like every other one. */
  .s-runofshow__entry--after-break {
    padding: 0;
  }

  .s-runofshow__entry--after-break .fkn-time,
  .s-runofshow__entry--after-break .s-runofshow__body {
    padding-top: 0;
  }

  .s-runofshow__entry--after-break .s-runofshow__dot {
    top: 12px;
  }

  /* GM keeps the time an inline span so its box hugs the numerals. */
  .fkn-time {
    display: inline;
    padding-left: 0;
    padding-top: 0;
  }

  .s-runofshow__stationline {
    display: flex;
    align-items: baseline;
    gap: 18px;
    flex-wrap: wrap;
  }

  .fkn-note {
    max-width: 600px;
  }

  .s-network__break {
    display: none;
  }

  .s-network__specialists span {
    display: inline;
  }

  .s-hero__coords {
    /* GM nests this inside the text column, whose 24px right inset the
       coordinate line therefore inherits as part of its own box. */
    margin-left: 0;
    margin-right: 24px;
  }

  /* GM desktop column order: brand · navigation · contact · legal. */
  .fkn-footer__block--nav { order: 1; }
  .fkn-footer__block--contact { order: 2; }
  .fkn-footer__block--legal { order: 3; }

  .s-runofshow__entry p {
    margin-top: 10px;
    max-width: 560px;
  }

  .s-runofshow__stationline .fkn-hand {
    display: inline;
  }

  .s-runofshow__figure {
    grid-column: 10 / 13;
    align-self: start;
    margin: 0;
  }

  .s-runofshow__figure .fkn-photo__frame {
    --fkn-photo-h: var(--fkn-h-ros-bar);
    border-right: var(--fkn-rule) solid var(--fkn-border-strong);
  }

  .s-runofshow__figure figcaption {
    margin-top: 8px;
  }

  .s-runofshow__figure--pass {
    display: block;
    grid-column: 10 / 14;
  }

  .s-runofshow__figure--pass .fkn-photo__frame {
    --fkn-photo-h: var(--fkn-h-ros-pass);
    border-right: 0;
  }

  /* GM foot sits in columns 3–11 of the 64px+12 grid: 14.074% in from
     the left of the artboard, 15.926% in from the right. */
  .s-runofshow__foot {
    max-width: var(--fkn-artboard);
    margin: 56px auto 0;
    padding: 20px 15.926% 0 14.074%;
    border-top: var(--fkn-rule) solid var(--fkn-border-strong);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
  }

  /* ================= 04 NETZWERK ================= */
  .s-network__diagram {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 48px;
    gap: 0;
  }

  .s-network__centre {
    order: 3;
    gap: 8px;
  }

  .s-network__connector {
    flex: 1 0 56px;
    flex-direction: row;
    align-items: center;
  }

  .s-network__connector i {
    flex: 1;
    width: auto;
    height: var(--fkn-rule-thread);
  }

  .s-network__connector--a { order: 2; }

  .s-network__connector--b {
    display: flex;
    order: 4;
    flex-direction: row-reverse;
  }

  .s-network__partner {
    display: block;
    flex: 0 1 220px;
    min-width: 150px;
    width: auto;
    margin: 0;
    padding-top: 0;
    border-top: 0;
  }

  .s-network__partner--cocktailchef { order: 1; margin-top: 0; }
  .s-network__partner--isswat { order: 5; }

  .s-network__partner p {
    margin-top: 10px;
    color: var(--fkn-stone-deep);
  }

  .s-network__specialists {
    order: 6;
    flex: 1 0 100%;
    display: flex;
    justify-content: center;
    margin-top: 36px;
    padding-top: 0;
    border-top: 0;
  }

  /* ================= 05 ANLÄSSE ================= */
  .s-occasions__werk {
    right: -40px;
    top: 36px;
  }

  .s-occasions__inner {
    max-width: 1080px;
  }

  /* GM sets one flowing sentence with gold middots. The list items are
     written without whitespace between them so inline flow reproduces
     the Golden Master's wrapping exactly. */
  .s-occasions__list {
    display: block;
    margin-top: 36px;
    max-width: 980px;
  }

  .s-occasions__list li:nth-child(n) {
    display: inline;
    padding-left: 0;
    font-weight: 700;
    font-style: normal;
    color: var(--fkn-ink);
  }

  .s-occasions__list li:not(:last-child)::after {
    content: " · ";
    color: var(--fkn-gold);
  }

  .s-occasions__own svg {
    bottom: -10px;
    height: 12px;
  }

  .s-occasions__own path {
    stroke-width: 2.2;
  }

  .s-occasions__turn {
    margin-top: 88px;
    margin-left: 44%;
    max-width: 480px;
  }

  /* ================= 06 ÜBERGANG =================
     GM: 760px band · inner left/right 64 · top 56% · max-width 760 */
  .s-dimming__inner {
    left: 0;
    right: 0;
    top: 56%;
    padding-inline: var(--fkn-pad-x);
    max-width: var(--fkn-artboard);
    margin-inline: auto;
  }

  .s-dimming__body {
    max-width: 760px;
    margin: 0 auto;
  }

  .s-dimming__mark {
    gap: 20px;
  }

  .s-dimming__mark i { width: 56px; }
  .s-dimming__mark b { width: 5px; height: 5px; }

  .s-dimming__marker { margin-top: 22px; }
  .s-dimming__note { margin-top: 14px; max-width: 520px; }

  /* ================= 07 MOMENTE =================
     GM grids: 64px repeat(12,1fr) 0 · head 2/13 · portrait 2/7
               voice 8/13 · gesture 2/7 · detail 8/15 (edge crop) */
  .s-moments__head,
  .s-moments__chapter {
    max-width: var(--fkn-artboard);
    margin-inline: auto;
    padding: 0;
    display: grid;
    grid-template-columns: var(--fkn-gutter) repeat(12, minmax(0, 1fr)) 0;
    column-gap: var(--fkn-gap);
  }

  /* GM opens section 08 with a 20px step from the chapter mark to the
     title; the narrow artboard uses 16. */
  .s-process__title {
    margin-top: 20px;
  }

  .s-moments__head {
    margin-top: 26px;
    padding-top: 0;
  }

  /* GM sets the chapter mark and the place stamp as one baseline-aligned
     row, not two stacked lines. */
  .s-moments__head > * {
    grid-column: 2 / 13;
    grid-row: 1;
  }

  .s-moments__head {
    align-items: baseline;
  }

  .s-moments__head .fkn-eyebrow { justify-self: start; }

  .s-moments__place {
    grid-column: 2 / 13;
    margin-top: 0;
    justify-self: end;
    text-align: right;
  }

  .s-moments__chapter {
    margin-top: 96px;
  }

  .s-moments__portrait {
    grid-column: 2 / 7;
    width: auto;
    margin-right: 0;
    min-width: 0;
  }

  .s-moments__portrait .fkn-photo__frame {
    border-left: var(--fkn-rule) solid var(--fkn-border-dark);
  }

  .s-moments__voice {
    grid-column: 8 / 13;
    align-self: center;
    padding: 0;
    min-width: 0;
  }

  .s-moments__tick { gap: 16px; }
  .s-moments__tick i { width: 40px; }

  .s-moments__quote { margin-top: 26px; }
  .s-moments__voice-flag { margin-top: 18px; }

  /* Both sit in the same row of the chapter grid. The narrow artboard
     stacks slot then line, so the slot comes first in the markup and the
     row has to be stated — auto-placement would push the line below it. */
  .s-moments__gesture {
    grid-column: 2 / 7;
    grid-row: 1;
    align-self: end;
    /* The artboard rests the line 8px above the row's baseline edge. */
    padding: 0 0 8px;
    max-width: 420px;
    min-width: 0;
  }

  .s-moments__detail {
    grid-column: 8 / 15;
    grid-row: 1;
    width: auto;
    margin-left: 0;
    min-width: 0;
  }

  /* ================= 08 · WAS SIE ERWARTEN KÖNNEN =================
     Two by two, not one row of four. A single row reads left to right as
     steps; a block of four reads as a set — which is the whole point of
     separating this section from the run of show. */
  .s-process__steps {
    margin-top: 64px;
  }

  .s-process__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 96px;
    row-gap: 56px;
    max-width: 1120px;
  }

  .s-process__step {
    padding: 18px 0 0;
  }

  .s-process__step:last-child {
    padding-bottom: 0;
  }

  .s-process__step h3,
  .s-process__step p {
    margin-top: 8px;
  }

  .s-process__step p {
    max-width: 46ch;
  }

  /* The coordinates that used to sit opposite this line are gone, so the
     row is a single line again rather than a two-sided one. */
  .s-process__region {
    margin-top: 72px;
    padding-top: 24px;
  }

  .s-process__region p {
    max-width: 720px;
  }

  .s-moments__head {
    padding: 0;
  }

  /* ================= 09 EINLADUNG =================
     GM grid: 64px repeat(12,1fr) 64px · body 2/9 · signature 10/13 */
  .s-invitation__inner {
    max-width: var(--fkn-artboard);
    margin-inline: auto;
    padding: 0;
    display: grid;
    grid-template-columns: var(--fkn-gutter) repeat(12, minmax(0, 1fr)) var(--fkn-gutter);
    column-gap: var(--fkn-gap);
  }

  .s-invitation__body {
    grid-column: 2 / 9;
    min-width: 0;
  }

  .s-invitation__lead {
    margin-top: 22px;
    max-width: 520px;
  }

  .s-invitation__actions {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px;
  }

  /* Desktop drops the boxed treatment for the two direct contacts — the
     Golden Master carries them as underlined text beside the primary CTA. */
  .s-invitation .fkn-cta--outline {
    height: auto;
    padding: 0 0 3px;
    border: 0;
    border-bottom: var(--fkn-rule-underline) solid var(--fkn-gold-light);
  }

  .s-invitation__column {
    grid-column: 10 / 13;
    grid-row: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding-bottom: 6px;
    min-width: 0;
  }

  .s-invitation__thread {
    left: 24px;
    top: -104px;
    bottom: 96px;
    height: auto;
    background: linear-gradient(
      180deg,
      var(--fkn-gold-light-0) 0%,
      var(--fkn-gold-light) 30%,
      var(--fkn-gold-light) 100%
    );
  }

  .s-invitation__signature {
    margin-top: 0;
    justify-content: flex-start;
  }

  .s-invitation__signature > span {
    margin-left: 2px;
  }

  .s-invitation__rule--wide {
    display: block;
  }

  .s-invitation__rule--narrow {
    display: none;
  }

  /* ================= FOOTER ================= */
  .fkn-footer__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    /* Columns only. In the Golden Master the bottom bar is a sibling of the
       column grid, so no row gap precedes it — its 44px margin is the whole
       distance. */
    column-gap: 48px;
    row-gap: 0;
  }

  .fkn-brand--footer {
    padding: 8px 12px;
  }

  .fkn-footer__brandline {
    margin-top: 16px;
  }

  .fkn-footer__block,
  .fkn-footer__block + .fkn-footer__block {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .fkn-footer__title {
    margin-bottom: 14px;
  }

  /* The desktop artboard does show the RECHTLICHES title. */
  .fkn-footer__block--legal .fkn-footer__title {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 14px;
    overflow: visible;
    clip-path: none;
  }

  .fkn-footer__list {
    gap: 9px;
  }

  /* GM drops the link's top padding at this endpoint; the 3px optical
     descent under the rule stays. */
  .fkn-link {
    padding-top: 0;
  }

  .fkn-footer__list--nav a,
  .fkn-footer__list--items a,
  .fkn-footer__list--items span {
    padding: 0;
  }

  .fkn-footer__meta {
    grid-column: 1 / -1;
    margin-top: 44px;
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
  }

  /* ================= Contact page ================= */
  .s-inquiry__layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 96px;
  }

  .s-inquiry__row--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-inquiry__thread {
    width: 280px;
  }

  /* Sticky header collapses only where it started at 96px;
     mobile stays a constant 64px (freeze, interaction inventory). */
  .fkn-header[data-scrolled] {
    --fkn-header-h: 64px;
    --fkn-logo-h: 32px;
  }
}

/* -----------------------------------------------------------------
   768–1023 · the inquiry form gains its two-column rows early
   ----------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .s-inquiry__row--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =============================================================
   REDUCED MOTION — binding. Non-essential movement is removed and
   the Dimming Moment becomes a direct register change.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .s-hero__title,
  .s-hero__line {
    clip-path: none;
  }

  .s-hero__line > span {
    transform: none;
  }

  .fkn-draw {
    transform: none;
  }

  .fkn-signature__stroke {
    stroke-dashoffset: 0;
  }

  .fkn-drift .fkn-photo__frame img {
    top: 0;
    height: 100%;
    transform: none;
    will-change: auto;
  }

  .s-dimming {
    background: var(--fkn-night);
  }

  .s-dimming__veil {
    display: none;
  }
}

/* =============================================================
   BELOW THE APPROVED MOBILE ENDPOINT (< 390)

   The Golden Master's mobile artboard is 390 wide and its values are
   literal AT that width. Nothing here changes 390 or 1440 — these
   rules only take effect narrower than the approved endpoint, where
   the brief still requires the page to work down to 320 without
   horizontal scrolling.
   ============================================================= */
@media (max-width: 389.98px) {
  /* Continues the type ramp below 390 instead of flooring at 40px:
     33px at 320, 40px at 390 — so "Ansprechpartner." still fits. */
  :root {
    --fkn-fs-display: clamp(28px, 1px + 10vw, 40px);
  }

  /* The PARTNER crate label drops below the headline rather than
     forcing the row wider than the viewport. */
  .s-network__head {
    flex-wrap: wrap;
  }

  /* The production note header wraps rather than pushing the paper
     wider than its column. */
  .fkn-note > summary {
    flex-wrap: wrap;
  }
}