/* ============================================================================
   Literaturbüros NRW  (Version 2)
   ----------------------------------------------------------------------------
   Gegenüber V1 geändert: das mobile Layout (Abschnitt 7) folgt jetzt den
   Artboards „…-Mobile-V2" — eine Spalte, sechs Zeilen über die volle Breite —
   und unter dem Raster steht die Förderzeile (Abschnitt 8). Der Desktop ist
   unverändert.
   ----------------------------------------------------------------------------
   Everything visual is controlled by the custom properties in the :root block
   below. Colours of the tiles live in assets/js/config.js (one object per büro),
   because they belong to the content; type, spacing and rhythm live here.
   ========================================================================== */

/* --- 1. Fonts ---------------------------------------------------------------
   Headline-Schrift der Literaturbüro-Kacheln: einfach ablegen, fertig.

   Die Schriftdatei kommt nach  assets/fonts/headline/  und heißt
   headline.woff2  (oder .woff / .otf / .ttf). Der Browser probiert die vier
   Endungen der Reihe nach und nimmt die erste, die es gibt. Liegt keine
   Datei dort, fällt die Überschrift still auf --font-display zurück — die
   Seite sieht dann aus wie bisher. Ein Browser kann keinen Ordner auslesen,
   deshalb ist der Dateiname fest.

   Einzige Nebenwirkung, solange der Ordner leer ist: die Entwicklertools
   zeigen bis zu vier 404-Meldungen für diese Dateien. Das ist harmlos.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'LB Headline';
  src: url('../fonts/headline/headline.woff2') format('woff2'),
       url('../fonts/headline/headline.woff')  format('woff'),
       url('../fonts/headline/headline.otf')   format('opentype'),
       url('../fonts/headline/headline.ttf')   format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Keroine PRO und Söhne aus dem Entwurf sind lizenzpflichtig und nicht
   eingebunden — die Seite läuft sonst auf den Fallbacks aus
   --font-display / --font-body. */

/*
@font-face {
  font-family: 'Keroine PRO';
  src: url('../fonts/KeroinePRO-DouxExtreme.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Soehne';
  src: url('../fonts/Soehne-Buch.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/

/* --- 2. Design tokens ----------------------------------------------------- */

:root {
  /* Typefaces — swap these two lines to change the typography site-wide. */
  --font-display: 'Keroine PRO', 'Iowan Old Style', 'Palatino Linotype',
                  Palatino, Georgia, 'Times New Roman', serif;
  --font-body:    'Soehne', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
                  Helvetica, Arial, sans-serif;

  /* Überschriften der fünf Literaturbüros. Nimmt die Datei aus
     assets/fonts/headline/ (siehe Abschnitt 1), sonst --font-display. */
  --font-headline: 'LB Headline', var(--font-display);

  /* Soll auch die Überschrift im weißen Startfeld die neue Schrift bekommen,
     hier  var(--font-display)  durch  var(--font-headline)  ersetzen. */
  --font-start-title: var(--font-display);

  /* Type sizes. The vw values reproduce the Figma layout 1:1 at 2048 px wide;
     the clamp bounds keep it readable on smaller and very large screens.
     55 / 2048 = 2.686vw   |   18 / 2048 = 0.879vw                            */
  --fs-title: clamp(22px, 2.686vw, 64px);
  --fs-body:  clamp(13px, 0.879vw, 21px);
  --fs-meta:  clamp(11px, 0.635vw, 15px);   /* footer line, 13 / 2048        */

  /* Die Förderzeile. Eigenes Token, weil sie im Entwurf nicht vorkommt und
     ihre Größe damit frei wählbar ist — hier auf der Höhe der übrigen
     Kleinschrift. Das ist die Stellschraube, wenn sie größer stehen soll. */
  --fs-funding: var(--fs-meta);

  --lh-title: 1.1;
  --lh-body:  1.25;

  /* Höhe, die eine einzeilige Überschrift samt Abstand darunter belegt.
     Im mobilen V2-Layout steht der Infotext unter der Überschrift statt an
     ihrer Stelle — dieser Wert schiebt ihn auf die im Entwurf gezeichnete
     Höhe (Überschrift bei y=10, Fließtext bei y=34 im 402er Artboard). */
  --title-block: calc(var(--fs-title) * 1.28);

  /* Colours */
  --c-ink:    #000000;
  --c-paper:  #ffffff;

  /* Spacing. --pad-home is the inset of the white start panel (20 / 2048),
     --inset-text the side margin of an info text inside a tile (82 / 1024). */
  --pad-home:   clamp(16px, 0.977vw, 30px);
  /* Seitlicher Einzug. Auf Desktop identisch mit --pad-home, mobil weiter
     (15 statt 10 px im 402er Artboard) — deshalb ein eigenes Token. */
  --pad-home-x: var(--pad-home);
  --inset-text: 8%;
  --gap-footer: clamp(28px, 2.93vw, 70px);  /* 60 / 2048 between the links   */

  /* Motion */
  --fade-text:  180ms;
  --fade-image: 800ms;

  /* Grid — 2 columns, 3 rows, always exactly one viewport tall. */
  --cols: 2;
  --rows: 3;
}

/* Mobile layout: values taken from the 402 px "…-Mobile-V2" artboards.

   V2 stellt die Kacheln als sechs Zeilen über die volle Breite untereinander
   (Abschnitt 7). Dadurch ist eine Zeile doppelt so breit wie in V1, aber nur
   noch halb so hoch — der Fließtext bekommt mehr Zeichen pro Zeile und dafür
   weniger Zeilen.

   Gezeichnet sind: Überschrift 19 px (19/402 = 4.726vw), Fließtext und
   Kleinschrift je 8 px, Einzug 10 px oben/unten und 15 px an den Seiten.

   ABWEICHUNG: Der Fließtext steht hier auf 11 px statt der gezeichneten 8,
   die Kleinschrift auf 10. Die 8 px sind auf einem echten Telefon nicht mehr
   zu lesen — auf dem Bildschirm im Entwurf sieht das anders aus als in der
   Hand. Das ist eine bewusste Entscheidung gegen den Entwurf und die
   Stellschraube, wenn es doch wieder kleiner werden soll.

   Was die größere Schrift kostet: In den fünf Büro-Zeilen passt der Infotext
   nicht mehr in ein Sechstel des Bildschirms. Die geöffnete Zeile wächst
   deshalb um 15–40 px (siehe Abschnitt 7) und die Seite wird um so viel
   länger als ein Bildschirm. Im geschlossenen Zustand — also beim Laden —
   ändert sich nichts: die sechs Zeilen sind auf 402 × 874 weiterhin exakt
   146 px hoch, wie gezeichnet.                                              */
@media (max-width: 780px) {
  :root {
    --fs-title: clamp(15px, 4.726vw, 26px);
    --fs-body:  clamp(11px, 2.736vw, 15px);  /* 11 / 402 — s. Hinweis oben */
    --fs-meta:  clamp(10px, 2.488vw, 13px);  /* 10 / 402 */
    --pad-home:   clamp(8px,  2.488vw, 14px);  /* 10 / 402, oben und unten */
    --pad-home-x: clamp(12px, 3.731vw, 20px);  /* 15 / 402, an den Seiten  */

    /* Sechs gleich hohe Zeilen, eine Spalte — genau ein Bildschirm hoch. */
    --cols: 1;
    --rows: 6;
  }
}

/* --- 3. Reset ------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Das Raster ist weiterhin genau einen Bildschirm hoch — neu ist, dass die
   Förderzeile darunter liegt. Die Seite darf sich deshalb vertikal scrollen
   lassen, und genau das ist der Mechanismus, mit dem die Fußzeile erscheint:
   beim Laden steht sie unter der Kante, ein Stück Scrollen holt sie herauf.
   Quer wird nie gescrollt. */
body {
  overflow-x: hidden;
  overscroll-behavior-y: contain;   /* kein Pull-to-Refresh am oberen Rand */
}

p { margin: 0; }

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}

/* --- 4. Grid -------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
  width: 100vw;
  height: 100vh;
  height: 100dvh;                 /* keeps mobile browser chrome out of it */
}

.tile {
  position: relative;
  overflow: hidden;
  background: var(--tile-color, var(--c-paper));
  color: var(--tile-ink, var(--c-ink));
  min-width: 0;
  min-height: 0;
}

.tile--buero { cursor: pointer; }
.tile--buero:focus-visible {
  outline: 3px solid var(--c-ink);
  outline-offset: -6px;
}

/* --- 5. Titles and info texts inside a büro tile -------------------------- */

/* Both layers sit on top of each other and cross-fade, so the tile never
   changes size when the text swaps. */
.tile__layer {
  position: absolute;
  inset: 0;
  display: flex;
  transition: opacity var(--fade-text) linear;
}

.tile__titleWrap {
  align-items: center;
  justify-content: center;
  padding: var(--pad-home) var(--pad-home-x);
  opacity: 1;
}

.tile__bodyWrap {
  align-items: center;
  justify-content: center;
  padding: var(--pad-home) var(--inset-text);
  opacity: 0;
  pointer-events: none;
}

.tile.is-open .tile__titleWrap { opacity: 0; }
.tile.is-open .tile__bodyWrap  { opacity: 1; pointer-events: auto; }

.tile__title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: var(--lh-title);
  text-align: center;
  text-wrap: balance;
  white-space: pre-line;          /* honours the \n from the config */
}

.tile__body {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}
.tile__body::-webkit-scrollbar { display: none; }

.tile__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* "Zur Webseite" — only needed where there is no hover (touch devices). */
.tile__link {
  display: none;
  margin-top: 1.2em;
  font-family: var(--font-display);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  text-decoration: none;
}
.tile__link:hover,
.tile__link:focus-visible { text-decoration: underline; }

html.no-hover .tile__link { display: inline-block; }

/* --- 6. Start panel and slideshow (top left tile) ------------------------- */

.tile--home { cursor: default; }
html.no-hover .tile--home { cursor: pointer; }

.stage {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--fade-text) linear;
  pointer-events: none;
  background: var(--stage-color, var(--c-paper));
}

.grid.has-open .stage { opacity: 1; }

.stage__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;              /* fill the square, keep the crop centred */
  object-position: center;
  opacity: 0;
  transition: opacity var(--fade-image) ease-in-out;
}
.stage__img.is-visible { opacity: 1; }

.start {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--pad-home) var(--pad-home-x);
  transition: opacity var(--fade-text) linear;
}

.grid.has-open .start {
  opacity: 0;
  pointer-events: none;
}

.start__title {
  margin: 0 0 0.55em;
  font-family: var(--font-start-title);
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: var(--lh-title);
  white-space: pre-line;
}

.start__text {
  max-width: 84%;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.start__footer {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-footer);
  font-size: var(--fs-meta);
}

.start__links {
  display: flex;
  gap: var(--gap-footer);
}

.start__links a { text-decoration: none; }
.start__links a:hover,
.start__links a:focus-visible { text-decoration: underline; }

/* --- 7. Mobile layout (V2) ------------------------------------------------
   Sechs Zeilen über die volle Breite, oben das Startfeld, darunter die fünf
   Büros. Anders als auf dem Desktop bleibt die Überschrift beim Öffnen einer
   Zeile stehen — der Infotext tritt nicht an ihre Stelle, sondern darunter.
   Die Zeilenhöhe ändert sich dabei nicht: Text und „Zur Webseite" haben in
   der Zeile ihren festen Platz, die Zeilen darunter rutschen nicht weg und
   die Seite bleibt in jedem Zustand genau einen Bildschirm hoch.
   -------------------------------------------------------------------------- */

@media (max-width: 780px) {
  /* Sechs Zeilen, jede mindestens ein Sechstel des Bildschirms hoch. Auf dem
     gezeichneten Gerät (402 × 874) bleibt es bei genau diesem Sechstel und
     die Seite ist exakt einen Bildschirm hoch — wie im Entwurf.

     Das `auto` als Obergrenze lässt eine Zeile wachsen, wenn ihr Inhalt mehr
     Platz braucht als ihr Sechstel. Seit der Vergrößerung des Fließtextes
     (siehe Abschnitt 2) passiert das in jeder geöffneten Büro-Zeile, um 15
     bis 40 px, und auf Geräten unterhalb des Artboards zusätzlich beim
     Startfeld. Die Seite wird dadurch etwas länger als ein Bildschirm und
     lässt sich scrollen. Die Alternative wäre, den Text abzuschneiden oder
     ihn in ein unsichtbares Scrollfeld zu stecken — vorhanden, aber nicht
     auffindbar. */
  .grid {
    height: auto;
    min-height: 100dvh;
    grid-template-rows: repeat(var(--rows), minmax(calc(100dvh / var(--rows)), auto));
  }

  /* Damit eine Zeile wachsen kann, müssen Überschrift und Infotext im Fluss
     stehen statt übereinander zu liegen — auf dem Desktop bleibt es beim
     Stapel aus zwei absolut gesetzten Ebenen. */
  .tile {
    display: flex;
    flex-direction: column;
    padding: var(--pad-home) var(--pad-home-x);
  }

  .tile__layer { position: static; padding: 0; }

  /* Dasselbe für das Startfeld: es steht im Fluss, damit auch die erste Zeile
     wachsen kann, wenn Einleitung und Fußzeile sonst aneinanderstoßen würden.
     Die Slideshow bleibt darüber absolut gesetzt und deckt es beim Öffnen ab
     — das Startfeld behält dabei seine Höhe, die Zeile springt also nicht. */
  .start {
    position: static;
    padding: 0;
    flex: 1 1 auto;
  }

  /* Etwas Luft zwischen Einleitung und Fußzeile, damit die beiden auf engen
     Geräten nicht auf Stoß stehen. */
  .start__footer { padding-top: 0.9em; }

  /* Überschrift oben links in jeder Zeile, nicht zentriert. */
  .tile__titleWrap {
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .tile__title { text-align: left; }

  /* Der Unterschied zu V1 und zum Desktop: die Überschrift bleibt sichtbar,
     wenn die Zeile geöffnet ist. Nur die Fläche darunter kommt hinzu. */
  .tile.is-open .tile__titleWrap { opacity: 1; }

  /* Geschlossen belegt der Infotext keine Höhe — sonst würde jede Zeile von
     Anfang an so hoch, wie ihr längster Text es verlangt.

     `max-height` lässt sich nicht von 0 auf „soviel wie nötig" animieren.
     Beim Öffnen macht das nichts: der Block bekommt seine Höhe sofort und
     blendet sich darin ein. Beim Schließen liefe er ohne die Verzögerung
     schlagartig auf 0, während die Deckkraft noch abblendet — deshalb steht
     der Sprung dort hinter der Dauer der Blende. */
  .tile__bodyWrap {
    flex: 1 1 auto;
    align-items: stretch;
    justify-content: flex-start;
    padding-top: calc(var(--title-block) - var(--fs-title) * var(--lh-title));
    max-height: 0;
    overflow: hidden;
    transition: opacity var(--fade-text) linear,
                max-height 0s linear var(--fade-text);
  }

  .tile.is-open .tile__bodyWrap {
    max-height: none;
    overflow: visible;
    transition: opacity var(--fade-text) linear,
                max-height 0s linear 0s;
  }

  .tile__body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  /* Der Text gibt seine volle Höhe an die Zeile weiter — daran misst das
     Raster, ob die Zeile wachsen muss. Ein Scrollfeld hätte die Höhe 0 und
     die Zeile bliebe zu klein. */
  .tile__text { flex: 0 0 auto; }

  /* „Zur Webseite" steht unten rechts in der geöffneten Zeile. */
  .tile__link {
    margin-top: auto;
    padding-top: 0.6em;
    align-self: flex-end;
  }

  /* Auch in der breiten Zeile lohnt die Silbentrennung: der Fließtext steht
     klein, und ohne sie reißen die langen Komposita hässliche Lücken. */
  .tile__text,
  .start__text { hyphens: auto; }

  .start__text { max-width: 100%; }

  /* Fußzeile des Startfeldes: Copyright links, die beiden Links rechts
     zusammen — so gezeichnet (© bei x=15, Datenschutz endet bei x=387). */
  .start__footer {
    flex-wrap: nowrap;
    gap: 0;
  }

  .start__links { gap: clamp(6px, 2.488vw, 14px); }   /* 10 / 402 */

  .start__copyright,
  .start__links a { white-space: nowrap; }
}

/* --- 8. Förderzeile -------------------------------------------------------
   Sie steht als eigenes Band unter dem Raster. Weil das Raster exakt einen
   Bildschirm hoch ist, liegt sie beim Laden unter der Kante und wird erst
   sichtbar, wenn man scrollt — auf Desktop und Mobil gleichermaßen. Dafür
   braucht es kein JavaScript, nur die beiden Höhen.

   Der Text ist eine Zeile und bleibt es auch: bei --fs-meta ist der Satz auf
   jeder Desktopbreite deutlich kürzer als das Band. Auf dem Telefon ist dafür
   kein Platz mehr neben einem Logo, deshalb rutscht das Logo dort unter den
   Text (siehe unten).
   -------------------------------------------------------------------------- */

.pagefoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-footer);
  padding: clamp(20px, 1.95vw, 46px) var(--pad-home-x);
  background: var(--c-paper);
  color: var(--c-ink);
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.pagefoot__text {
  font-size: var(--fs-funding);
  line-height: var(--lh-body);
}

/* Das Logo behält sein eigenes Seitenverhältnis: gesetzt ist die Breite, die
   Höhe ergibt sich daraus. Bei der Wortmarke des Ministeriums ist die Breite
   das sinnvolle Maß — sie ist ein 5:1 breiter Schriftzug in drei Zeilen, und
   ob der lesbar ist, hängt an der Breite, nicht an der Höhe. Die Höhe des
   Bandes richtet sich danach. */
.pagefoot__logo { flex: 0 0 auto; }

.pagefoot__img {
  display: block;
  height: auto;
  width: clamp(190px, 16vw, 300px);
}

.pagefoot__logo a { display: block; }

@media (max-width: 780px) {
  /* Satz und Logo bleiben auch auf dem Telefon nebeneinander — dafür wird
     das Logo deutlich kleiner. Bei 402 px sind rund 120 px für die Marke da
     und der Rest für den Satz, der dann über zwei bis drei Zeilen läuft. */
  .pagefoot {
    gap: clamp(8px, 2.5vw, 14px);
    padding: clamp(14px, 3.98vw, 22px) var(--pad-home-x);
  }

  /* Etwas größer als die 8 px der übrigen Kleinschrift: die Zeile steht auf
     dem Telefon allein auf weißem Grund, und 8 px wären dort schlicht zu
     klein zum Lesen. */
  :root { --fs-funding: clamp(9px, 2.4vw, 13px); }

  /* Auf dieser Breite ist der Schriftzug im Logo nicht mehr zu entziffern —
     die Marke wirkt hier als Zeichen. Lesbar bleibt der Satz daneben, der
     dasselbe sagt. */
  .pagefoot__img { width: clamp(96px, 30vw, 140px); }
}

/* --- 9. Sub pages (Impressum / Datenschutz) ------------------------------- */

body.page {
  overflow: auto;
  padding: clamp(24px, 4vw, 80px);
}

.page__inner { max-width: 62ch; }

.page h1 {
  margin: 0 0 0.6em;
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: var(--lh-title);
}

.page h2 {
  margin: 2em 0 0.5em;
  font-family: var(--font-display);
  font-size: calc(var(--fs-title) * 0.5);
  font-weight: 400;
  line-height: var(--lh-title);
}

.page p,
.page li {
  font-size: var(--fs-body);
  line-height: 1.5;
}

.page p + p { margin-top: 1em; }

.page__back {
  display: inline-block;
  margin-top: 3em;
  font-size: var(--fs-body);
}

/* --- 10. Reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --fade-text: 0ms;
    --fade-image: 0ms;
  }
  * { transition-duration: 0ms !important; }
}

/* --- 11. No JavaScript ---------------------------------------------------- */

.noscript {
  padding: clamp(24px, 4vw, 80px);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.noscript li { margin-bottom: 0.5em; }