/* ==========================================================================
   iloveverne.de — Countdown-Teaser
   Farben, Groessen und Schnitte stammen aus dem Figma-Freigabestand
   vom 11.08.2026 (Datei QGJDc4BxSAjfmqk0XjLe40, Frame "Desktopversion").
   ========================================================================== */

@font-face {
  font-family: 'Franie';
  src: url('../fonts/Franie-Light.woff2?v=6f591a3d') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Franie';
  src: url('../fonts/Franie-SemiLight.woff2?v=6f591a3d') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Franie';
  src: url('../fonts/Franie-Bold.woff2?v=6f591a3d') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --c-blue:    #009EDF;
  --c-red:     #E2001B;
  --c-white:   #FFFFFF;
  --c-pattern: #0686BF;

  --radius:    17.31px;
  --header-h:  123px;

  --font: 'Franie', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ACHTUNG BITV: diese beiden Groessen duerfen nicht kleiner werden.
     Weiss auf --c-blue ergibt 3,02:1 und ist nur als Grosstext zulaessig
     (ab 18,66px fett). Kleiner oder leichter gesetzt gilt der Text als
     Normaltext, dann waeren 4,5:1 noetig und die Seite faellt durch. */
  --size-lead:  19px;
  --size-label: 24px;

  /* Eine Quelle fuer Zahlen- und Labelspalten. Werden sie getrennt
     gesetzt, laufen die Labels irgendwann unter den falschen Zahlen.
     150px statt der 140px aus Figma: dreistellige Tageszahlen muessen
     auch mit Ersatzschrift zwischen die Trennlinien passen. */
  /* Figma exakt: Karte 640 breit, innen 8px Rand, vier Spalten a 156.
     8 + 4x156 = 632 + 8 = 640. Die Trennlinien liegen damit auf
     804 / 960 / 1116 — genau wie im Entwurf. */
  --cd-cell: 156px;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  background: var(--c-white);
  color: var(--c-white);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

a:focus-visible,
.button:focus-visible {
  outline: 3px solid var(--c-red);
  outline-offset: 3px;
}

/* ---------- Kopfbereich ---------- */

.site-header {
  flex: 0 0 auto;
  min-height: var(--header-h);
  background: var(--c-white);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  /* Figma: linkes Logo beginnt bei x=25, rechtes endet bei 1894,6 —
     also 25px Rand, nicht 32. */
  padding: 16px 25px;
}

.site-header__claim {
  margin: 0;
  text-align: center;
  font-size: 41px;
  line-height: 1.4;
  font-weight: 300;
  color: var(--c-red);
}

.site-header__claim strong { font-weight: 700; }

.site-header img { display: block; height: auto; }

/* Ohne diese Angabe rutscht das Stadtlogo zur Mitte, sobald der Claim
   in eine eigene Zeile umbricht: die Spalte wird dann so breit wie der
   Claim, und das Logo sitzt an ihrem linken Rand statt am Bildschirm. */
.site-header__jubilee { justify-self: start; }
.site-header__city    { justify-self: end; }

/* ---------- Heldenbereich ---------- */

.hero {
  flex: 1 1 auto;
  position: relative;
  background-color: var(--c-blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;          /* Figma: Abstand zwischen den Bloecken */
  padding: 64px 24px;
  text-align: center;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/hero-pattern.svg') center / cover no-repeat;
  pointer-events: none;
}

.hero > * { position: relative; }

.hero__headline {
  margin: 0;
  font-size: 96px;
  /* 117/96 = 1.22 — die Zeilenbox umschliesst die Versalien so eng wie
     der Rahmen in Figma. Mit 1.4 waere die Box 134px hoch, und der
     gesamte mittig ausgerichtete Block rutschte 15px nach unten. */
  line-height: 1.22;
  font-weight: 700;
  text-transform: uppercase;
}

.hero__lead {
  margin: 0;
  max-width: 620px;
  font-size: var(--size-lead);
  line-height: 1.4;
  font-weight: 700;
}

.hero__cta { margin: 0; }

/* ---------- Countdown ---------- */

.countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;          /* Figma: Karte -> Labels */
}

.countdown__card {
  display: grid;
  grid-template-columns: repeat(4, var(--cd-cell));
  background: var(--c-white);
  border-radius: var(--radius);
  padding: 17px 8px;   /* 17 statt 16: ergibt die 142px Kartenhoehe aus Figma */
}

.countdown__value {
  font-size: 77px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--c-red);
  text-align: center;
  padding: 0 8px;
  /* KEINE tabular-nums: Franie hat proportionale Ziffern (Breiten von
     28px bei der Eins bis 70px bei der Null bei 77px Schriftgroesse).
     Die Tabellenziffern sind breiter und stossen an die Trennlinie —
     genau das war im Entwurf nicht so. Der Entwurf nutzt die
     proportionale Form, erkennbar an den runden Nullen. */
  font-variant-numeric: normal;
}

.countdown__value + .countdown__value {
  border-left: 2px solid var(--c-blue);
}

.countdown__labels {
  display: grid;
  grid-template-columns: repeat(4, var(--cd-cell));
  margin: 0;
  padding: 0;
  list-style: none;
}

.countdown__labels li {
  font-size: var(--size-label);
  line-height: 1.4;
  font-weight: 700;
  text-align: center;
}

.countdown__fallback,
.countdown__zero {
  margin: 0;
  font-size: 48px;
  line-height: 1.4;
  font-weight: 700;
}

/* ---------- Schaltflaeche ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 297px;
  min-height: 82px;
  /* Figma: Textbreite 251 + 2x23 Innenabstand = 297. Mit 32px Rand
     sprengt der Text die Mindestbreite und die Flaeche wird 311 breit. */
  padding: 8px 23px;
  background: var(--c-white);
  border-radius: var(--radius);
  color: var(--c-red);
  font-size: 19px;
  line-height: 1.4;
  font-weight: 700;
  text-decoration: none;
}

.button:hover,
.button:focus-visible { text-decoration: underline; }

/* ---------- Fussbereich ---------- */

.site-footer {
  flex: 0 0 auto;
  background: var(--c-white);
  padding: 18px 24px;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--c-red);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible { text-decoration: underline; }

.cd-abbr { display: none; }

/* ---------- Inhaltsseiten (Impressum, Datenschutz, Barrierefreiheit) ---------- */

.page {
  flex: 1 1 auto;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 24px 64px;
  color: #1A1A1A;
}

.page h1 {
  margin: 0 0 8px;
  font-size: 41px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--c-red);
}

.page h2 {
  margin: 40px 0 8px;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}

.page p,
.page li {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
}

.page ul { padding-left: 22px; }

.page a { color: var(--c-red); }
.page a:hover,
.page a:focus-visible { text-decoration: none; }

.page__note {
  margin: 24px 0;
  padding: 16px 20px;
  border-left: 4px solid var(--c-blue);
  background: #F2FAFE;
}

/* ---------- Anpassung an kleinere Bildschirme ----------
   ACHTUNG: --size-lead (19px) und --size-label (24px) duerfen nicht
   kleiner werden. Weiss auf Blau ergibt 3,02:1 und ist nur als fetter
   Grosstext ab 18,66px zulaessig.

   Daraus folgt die Staffelung unten: "Sekunden" ist bei 24px fett
   144px breit. Die Zellen duerfen also nicht unter ~150px fallen,
   solange die Woerter ausgeschrieben stehen — sonst laufen die Labels
   ineinander. Deshalb behaelt die Karte ihre Entwurfsbreite von 640px,
   solange sie passt, und erst darunter wird auf Kurzform gewechselt. */

@media (max-width: 1200px) {
  .site-header__claim { font-size: 32px; }
  .hero__headline { font-size: 72px; }
  /* Karte bleibt in Entwurfsgroesse: 640px passen hier noch bequem. */
}

@media (max-width: 820px) {
  .site-header { padding: 14px 20px; gap: 16px; }
  .site-header__claim { font-size: 26px; }
  .site-header__jubilee img { width: 118px; }
  .site-header__city img { width: 100px; }

  .hero { padding: 48px 20px; gap: 32px; }
  .hero__headline { font-size: 56px; }

  .countdown__fallback,
  .countdown__zero { font-size: 36px; }
}

@media (max-width: 720px) {
  /* Ab hier wird die Karte schmaler als 640, aber nie breiter. */
  :root { --cd-cell: 1fr; }
  .countdown__card,
  .countdown__labels { width: 100%; max-width: 640px; }
  .countdown__value { font-size: 60px; }
  .countdown__card { padding: 14px 8px; }
  .countdown { width: 100%; }
}

@media (max-width: 680px) {
  /* Unterhalb dieser Breite reicht der Platz fuer die ausgeschriebenen
     Labels nicht mehr (144px pro Wort). Kurzform statt kleinerer
     Schrift — der Block ist fuer Screenreader ohnehin ausgeblendet. */
  .cd-long { display: none; }
  .cd-abbr { display: inline; }
  .countdown__value { font-size: 48px; }
}

@media (max-width: 600px) {
  /* Claim rutscht unter die beiden Logos */
  .site-header {
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
  }
  .site-header__claim {
    grid-column: 1 / -1;
    order: 3;
    font-size: 22px;
  }
  .site-header__jubilee img { width: 96px; }
  .site-header__city img { width: 82px; }

  .hero { padding: 36px 16px; gap: 24px; }
  .hero__headline { font-size: 40px; }

  /* Zentriert zeigt der Ausschnitt auf schmalen Schirmen die leere
     Mitte des Musters. Links sitzt die dichte Gruppe. */
  .hero::before { background-position: left center; }

  .countdown__value { font-size: 34px; }
  .countdown__card { padding: 10px 8px; }

  .button { min-width: 0; width: 100%; }
  .hero__cta { width: 100%; max-width: 340px; }

  .countdown__fallback,
  .countdown__zero { font-size: 28px; }

  .site-footer { padding: 14px 16px; }
  .site-footer ul { gap: 18px; }
}

@media (max-width: 360px) {
  /* Schmaler Rand, damit "Tage" (73px) und dreistellige Tageszahlen
     noch in ein Viertel der Kartenbreite passen. */
  .hero { padding: 32px 8px; }
  .countdown__value { font-size: 26px; padding: 0 4px; }
  .hero__headline { font-size: 34px; }
  .site-header__claim { font-size: 19px; }
}

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}