/* SERIFA – Layout und Typografie der Website. */
@font-face{font-family:"SERIFA Monument Grotesk";src:url("fonts/SERIFAMonumentGrotesk-Regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"SERIFA Monument Grotesk";src:url("fonts/SERIFAMonumentGrotesk-RegularItalic.woff2") format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"SERIFA Monument Grotesk";src:url("fonts/SERIFAMonumentGrotesk-Bold.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"SERIFA Monument Grotesk";src:url("fonts/SERIFAMonumentGrotesk-BoldItalic.woff2") format("woff2");font-style:italic;font-weight:700;font-display:swap}

/* Grundgröße: 1,44 % der kürzeren Fensterseite. Der exakte Wert (inkl. Hochformat) wird im <head>
   per Skript gesetzt; die Regeln hier sind die Rückfallebene ohne JavaScript. */
html{font-size:1.44vmin;-webkit-text-size-adjust:100%;text-size-adjust:100%;--viewport-height:100vh}
@supports (height:100svh){html{--viewport-height:100svh}}
@media (max-width:767px){html{font-size:3.136vw}}
body{margin:0;background:#fff;color:#1e1e1e;font-family:"SERIFA Monument Grotesk",Helvetica,Arial,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a:active{opacity:.7}
b,strong{font-weight:700}
hr{background:rgba(0,0,0,.85);border:0;height:1px;display:block}
figure{margin:0}
/* nur für Screenreader und Suchmaschinen sichtbar (Seitenüberschrift) */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Tastaturbedienung: deutlicher Fokusrahmen, nur bei Bedienung per Tastatur */
:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.slideshow:focus-visible{outline-offset:-4px;outline-color:#fff}
.overlay:focus{outline:none}

/* Scrollsperre bei offenem Overlay. Der wegfallende Rollbalken wird ausgeglichen (--sbw), damit Seite
   und fixiertes Menü exakt ihre Breite behalten und deckungsgleich unter dem Overlay liegen. */
html.ov-open{overflow:hidden}
html.ov-open body{padding-right:var(--sbw,0px);box-sizing:border-box}
html.ov-open .page.pinned{width:calc(100% - var(--sbw,0px))}

/* Seite: ein Abschnitt mit 1,5 rem Rand; .copy trägt die Grundschrift (Versalien, fett) */
.page{position:relative;display:flex;align-items:flex-start;width:100%;padding:1.5rem;box-sizing:border-box}
.page.full{min-height:var(--viewport-height)}
.page.center{align-items:center}
.page.white{background:#fff}
.page.bleed{padding:0}
.copy{flex:1 1 auto;width:100%;min-width:0;font-size:1.2rem;text-transform:uppercase;font-weight:700;color:#1e1e1e;line-height:1.2;letter-spacing:.01em}
.copy a{color:rgba(0,0,0,.85);text-decoration:none}
.copy a:hover{color:rgba(0,0,0,.75)}

/* Textstile */
.text{font-size:1.2rem;text-transform:none;font-weight:400;color:#1e1e1e;line-height:1.2;letter-spacing:.01em;display:block}
.text a{color:rgba(0,0,0,.85);text-decoration:none}
.text a:hover{color:rgba(0,0,0,.75)}
.menu{text-transform:uppercase;font-size:1.2rem;font-weight:700;color:rgba(0,0,0,.85);line-height:1.2;letter-spacing:.01em;display:inline-block}
.caps{font-size:1.2rem;text-transform:uppercase;font-weight:700;line-height:1.2;letter-spacing:.01em}
.right{text-align:right}
.left{text-align:left}
@media (max-width:767px){.text{font-size:.8rem}}

/* Logo-Ligatur [SERIFA]: eigener Textabschnitt, damit die rlig-Ligatur immer greift */
.lig{display:inline-block}

/* Spalten im 12er-Raster: Breite = (Gesamt − Zwischenräume) × Anteil/12 */
.cols{display:flex;flex-flow:row nowrap;align-items:stretch;gap:1rem;width:100%}
.cols.gap-2{gap:2rem}
.col{flex:1 1 0;min-width:0;word-wrap:break-word;position:relative}
.col-1{flex-grow:1}.col-2{flex-grow:2}.col-3{flex-grow:3}.col-4{flex-grow:4}.col-5{flex-grow:5}.col-6{flex-grow:6}
/* Press-Liste: dreispaltige Zeilen (6/2/4) auf dasselbe Raster wie die vierspaltigen (1/5/2/4) legen,
   damit Liste und geöffnetes Interview exakt übereinander stehen */
.p-press-1 main .cols>.col-6:first-child:nth-last-child(3){flex-basis:1rem}
.col-7{flex-grow:7}.col-8{flex-grow:8}.col-9{flex-grow:9}.col-10{flex-grow:10}.col-11{flex-grow:11}.col-12{flex-grow:12}
@media (max-width:767px){
  .cols.stack{display:block}
  .cols.stack>.col:empty{display:none}
  .cols.stack>.col+.col{margin-top:1.2rem}
}

/* Datei-Symbol in der Dokumentenliste */
.icon-file{display:inline-block;width:.72em;height:.92em;vertical-align:-.1em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 23'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' d='M1 1h10.5L17 6.5V22H1z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' d='M11.5 1v5.5H17'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 23'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' d='M1 1h10.5L17 6.5V22H1z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' d='M11.5 1v5.5H17'/%3E%3C/svg%3E") center/contain no-repeat}

/* Fixiertes Menü oben */
.page.pinned{position:fixed;top:0;left:0;z-index:499;pointer-events:none}
.page.pinned a{pointer-events:auto}

/* Menü-Overlay: Hauptpunkte links, Instagram/Newsletter rechts */
.menu-row{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;flex-wrap:wrap}
.menu-end{margin-left:auto;text-align:right}

/* Overlays (Menü, Interviews, Rechtstexte)
   Das Milchglas (Weiß 50 % + Weichzeichner) liegt direkt auf dem Overlay. So blenden Unschärfe und
   Deckkraft gemeinsam ein, statt dass die Unschärfe am Ende der Blende plötzlich dazukommt. */
.overlay{position:fixed;inset:0;z-index:999;overflow-y:auto;scrollbar-gutter:stable;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);
  opacity:0;visibility:hidden;pointer-events:none;will-change:opacity;
  transition:opacity .26s cubic-bezier(.4,0,.2,1),visibility 0s linear .26s}
.overlay.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .5s cubic-bezier(.22,.61,.36,1)}
.overlay .page{min-height:var(--viewport-height)}
/* Text folgt dem Hintergrund mit kleinem Versatz */
.overlay .copy{opacity:0;transform:translate3d(0,.5rem,0);transition:opacity .18s ease,transform .18s ease}
.overlay.open .copy{opacity:1;transform:none;transition:opacity .55s cubic-bezier(.22,.61,.36,1) .1s,transform .8s cubic-bezier(.16,1,.3,1) .1s}
@media (prefers-reduced-motion:reduce){.overlay,.overlay.open,.overlay .copy,.overlay.open .copy{transition:none;transform:none}}

/* Titelfarbe: weiß auf dunklen, schwarz (.tone-dark) auf hellen Bildern – gesetzt von gen.py nach gemessener Helligkeit */
/* Vollbild-Slideshow. Breite = Inhaltsbreite (nicht 100vw), damit der Titel exakt so weit vom Rand
   sitzt wie CONTACT; Titel in derselben Schrift und Größe wie das Menü. */
.slideshow{position:relative;width:100%;height:var(--viewport-height);overflow:hidden;contain:layout;cursor:grab;touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;user-select:none}
.slideshow.grabbing{cursor:grabbing}
.slideshow .slide{display:none}
.ss-stage{position:absolute;inset:0;overflow:hidden}
.ss-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;transform:scale(1.06);visibility:hidden;-webkit-user-drag:none;pointer-events:none;-webkit-touch-callout:none}
.ss-stage .on{visibility:visible}
.slideshow>figcaption{position:absolute;right:1.5rem;bottom:1.5rem;margin:0;max-width:45vw;z-index:5;pointer-events:none;
  display:block;white-space:nowrap;overflow:hidden;text-align:right;
  font-size:1.2rem;font-weight:700;line-height:1.2;letter-spacing:.01em;text-transform:uppercase;color:#fff}
.slideshow>figcaption.tone-dark{color:#1e1e1e}
.slideshow>figcaption a{pointer-events:auto;color:inherit}
.home-mobile .ss-stage{background:#000}
.home-mobile .ss-stage img{object-position:center center;transform:scale(1.02)}
.home-mobile .slideshow>figcaption{max-width:none;color:#fff}
.home-mobile .slideshow>figcaption.tone-dark{color:#1e1e1e}

/* Startseite: Desktop- und Mobil-Variante */
.home-mobile{display:none}
@media (max-width:767px){.home-desktop{display:none}.home-mobile{display:block}}
.clock{font-variant-numeric:tabular-nums}

/* Menüzeile der Startseite: MENU wird durch die Menüpunkte ersetzt. Sie liegen über der
   Nachbarspalte (z-index), damit auch PRESS und LEGAL klickbar sind. */
.menu-inline{position:relative;display:inline-block;z-index:2}
.menu-inline summary{list-style:none;cursor:pointer;transition:opacity .15s ease}
.menu-inline summary::-webkit-details-marker{display:none}
.menu-inline[open] summary{opacity:0;pointer-events:none}
.menu-items{position:absolute;left:0;top:0;z-index:2;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease}
.menu-inline[open] .menu-items{opacity:1;pointer-events:auto}
.menu-items a{text-decoration:none}

/* Externer Link SHOP: beim Überfahren erscheint rechts oben ein dezenter Pfeil (U+2197, aus der
   SERIFA Monument Grotesk) – klein, im Regular-Schnitt und hochgestellt wie ein Index.
   Er schiebt die folgenden Menüpunkte weich ein kleines Stück nach rechts. */
.copy a[href^="https://shop.serifa.com"]::after{content:"\2197";display:inline-block;font-size:.62em;font-weight:400;line-height:0;white-space:nowrap;
  position:relative;top:-.66em;width:0;margin-left:0;opacity:0;transition:width .28s cubic-bezier(.22,.61,.36,1),margin-left .28s cubic-bezier(.22,.61,.36,1),opacity .18s ease}
@media (hover:hover){
  .copy a[href^="https://shop.serifa.com"]:hover::after,
  .copy a[href^="https://shop.serifa.com"]:focus-visible::after{width:.68em;margin-left:.12em;opacity:1;
    transition:width .28s cubic-bezier(.22,.61,.36,1),margin-left .28s cubic-bezier(.22,.61,.36,1),opacity .3s ease .06s}
}
@media (prefers-reduced-motion:reduce){.copy a[href^="https://shop.serifa.com"]::after{transition:none}}

/* ============================================================
   Handy (bis 767 px Breite)
   ============================================================ */
.menu-close{display:none}
@media (max-width:767px){
  /* Kopfzeile: MENU / CONTACT auf den Unterseiten, als Milchglas-Streifen wie die Overlays */
  .page.pinned{pointer-events:auto;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}
  .page.pinned a{padding:1.5rem;margin:-1.5rem}
  main{padding-top:2.94rem}
  .p-index main{padding-top:0}
  .page.full{min-height:calc(var(--viewport-height) - 2.94rem)}
  .overlay .page{min-height:var(--viewport-height)}

  /* Lesetext: größer und luftiger; saubere Zeilenenden, deutsche Texte mit Silbentrennung */
  .copy{text-wrap:balance}
  .text{font-size:1.1rem;line-height:1.32;text-wrap:pretty}
  [lang="de"] .text{-webkit-hyphens:auto;hyphens:auto}
  .col{overflow-wrap:break-word;word-wrap:normal}

  /* Gestapelte Spalten: Überschrift linksbündig über dem Text */
  .cols.stack .right{text-align:left}

  /* Press-Liste: "Interview" bekommt die breitere Spalte, damit das Wort nicht getrennt wird */
  .p-press-1 main .cols>.col-2{flex-grow:4}
  .p-press-1 main .cols>.col-4{flex-grow:2;text-align:right}

  /* Größere Tippflächen, ohne das Schriftbild zu ändern */
  main .cols a{padding-block:.8rem}
  main .menu{line-height:2.4}

  /* Menü: Punkte untereinander, darüber CLOSE an der Stelle von MENU */
  .menu-close{display:inline-block;padding:1.5rem;margin:-1.5rem}
  .menu-row{display:block;margin-top:2.94rem}
  .menu-row>div{font-size:0}
  .menu-row a{display:block;font-size:1.2rem;padding:.8rem 0}
  .menu-end{margin:1.5rem 0 0;text-align:left}

  /* Startseite: das Menü steht unter der Slideshow (wie am Desktop), deshalb dort keine Kopfzeile */
  .home-menu{min-height:var(--viewport-height)}
  .home-menu .menu-row{margin-top:0}
  .home-menu .menu-row>div:first-child a:first-child{padding-top:0}
}