/*
 * Gemeinsame Styles. Die Werte kommen aus shared/tokens.css (Design-Tokens
 * Stadt Zürich); hier stehen nur noch Zuordnungen, keine losen Zahlen.
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--stzh-font-regular);
  font-size: var(--stzh-font-milli);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Nur im Kiosk-Modus (?kiosk=1) wird das Markieren von Text unterbunden,
   damit Besucher*innen am Gerät nichts versehentlich selektieren.
   Code-Blöcke bleiben auch dort kopierbar. */
body.kiosk {
  cursor: default;
  user-select: none;
}

body.kiosk pre,
body.kiosk code {
  user-select: text;
  cursor: text;
}

nav {
  background: var(--card-bg);
  border-bottom: 1px solid var(--stzh-grey20);
  padding: 0 var(--stzh-container-margin);
  display: flex;
  align-items: center;
  gap: var(--stzh-space-xxsmall);
  overflow-x: auto;
}

nav a {
  padding: var(--stzh-space-small) var(--stzh-space-medium);
  font-size: var(--stzh-font-micro);
  font-weight: 500;
  color: var(--text-light);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

nav a:hover {
  color: var(--text);
}

nav a.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  font-weight: 700;
}

header {
  background: var(--blue);
  color: var(--stzh-white);
  padding: var(--stzh-space-large) var(--stzh-container-margin);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--stzh-space-xxlarge);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* Scientifica-Auge links, wie in der OGD-Station an der Scientifica: als
   Kreis über den linken Rand hinaus angeschnitten. Es liegt absolut und
   nimmt darum keinen Platz im Flex-Fluss ein — der Titelblock rückt
   entsprechend nach links, was den Anschnitt optisch ausgleicht.
   Sichtbar sind 140px (220 − 80), der Titel steht rund 60px links der
   Seitenmitte.

   Das Auge trägt den einzigen Hinweis auf die Scientifica 2026 — als
   Tooltip (title) und als Alternativtext, nirgends als sichtbarer Satz;
   so gewünscht. Es braucht darum Mauszeiger-Ereignisse und darf nicht
   auf pointer-events: none stehen. cursor: help ist der einzige
   sichtbare Wink, dass hier etwas hinterlegt ist. Im Kopfbereich liegt
   kein Link, das Auge nimmt also keinem Element den Klick weg. */
.header-eye {
  position: absolute;
  left: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 50%;
  cursor: help;
}

.header-text {
  text-align: center;
  flex: 1;
  z-index: 1;
}

header h1 {
  font-family: var(--stzh-font-heavy);
  font-size: var(--stzh-font-hecto);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

header p {
  font-size: var(--stzh-font-milli);
  opacity: 0.88;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.4;
}

.header-logo {
  flex: 0 0 auto;
  height: 88px;
  object-fit: contain;
  z-index: 1;
}

/* Oben nur 1rem: Die Startseite kommt aus dem Kiosk-Betrieb und braucht den
   knappen Rand, damit Einleitung und alle vier Kacheln bei 800px Bildschirm-
   höhe ohne Scrollen sichtbar bleiben. Die übrigen Seiten übernehmen ihn,
   damit der Abstand zwischen Navigation und Inhalt beim Wechsel zwischen den
   Seiten nicht springt — sonst wirkt der Kopfbereich auf der Startseite
   gedrungener, obwohl Header und Navigation überall gleich hoch sind.
   Unten bleibt es bei 2.5rem; die Startseite setzt dort ihren eigenen Wert. */
main {
  flex: 1;
  padding: var(--stzh-space-medium) var(--stzh-container-margin) var(--stzh-space-xxxlarge);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* min(…, 100%): Auf Telefonen ist die Spalte schmaler als 340px — ohne
   die Begrenzung liefe das Raster seitlich über. Breit ändert sich nichts. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: var(--stzh-space-xlarge);
}

.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  color: inherit;
}

.card:hover, .card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  border-color: var(--accent);
  outline: none;
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.card-body {
  padding: var(--stzh-space-xlarge);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card h2 {
  font-family: var(--stzh-font-heavy);
  font-size: var(--stzh-font-deci);
  font-weight: 700;
  margin-bottom: var(--stzh-space-xsmall);
  color: var(--text);
}

.card p {
  font-size: var(--stzh-font-milli);
  color: var(--text-light);
  line-height: 1.55;
  flex: 1;
}

.card-cta {
  margin-top: var(--stzh-space-medium);
  font-size: var(--stzh-font-micro);
  font-weight: 600;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: var(--stzh-space-xxsmall);
}

.card-cta::after {
  content: '\2192';
  transition: transform 0.15s ease;
}

.card:hover .card-cta::after {
  transform: translateX(4px);
}

footer {
  text-align: center;
  padding: var(--stzh-space-xlarge) var(--stzh-container-margin) var(--stzh-space-xxlarge);
  color: var(--text-light);
  font-size: var(--stzh-font-milli);
}

footer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

footer a:hover {
  text-decoration: underline;
}

/* Stand der Inhalte, von Hand gesetzt — bei inhaltlichen Änderungen auf
   allen fünf Seiten nachführen. Kleiner als die Zeilen darüber. */
.footer-stand {
  margin-top: var(--stzh-space-xsmall);
  font-size: var(--stzh-font-micro);
}

/* Im Kiosk-Modus ausgeblendet: Die zusätzliche Zeile würde auf der
   Startseite das Höhenbudget bei 1280 × 800 sprengen (siehe
   .station-header in index.html; Reserve 5px). */
body.kiosk .footer-stand {
  display: none;
}

/* Intro */
.intro {
  display: flex;
  gap: var(--stzh-space-xxxlarge);
  align-items: flex-start;
  margin-bottom: var(--stzh-space-xxxlarge);
}

.intro-text {
  flex: 1;
}

.intro-text h2 {
  font-family: var(--stzh-font-heavy);
  font-size: var(--stzh-font-deca);
  font-weight: 700;
  margin-bottom: var(--stzh-space-small);
  color: var(--text);
}

.intro-text p {
  font-size: var(--stzh-font-milli);
  line-height: 1.6;
  color: var(--text-light);
  margin-bottom: var(--stzh-space-small);
}

.intro-image {
  width: 320px;
  flex-shrink: 0;
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* Section titles */
.section-title {
  font-family: var(--stzh-font-heavy);
  font-size: var(--stzh-font-deca);
  font-weight: 700;
  margin-bottom: var(--stzh-space-large);
  color: var(--text);
}

/* Feature / Benefit boxes */
.features, .benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--stzh-space-medium);
  margin-bottom: var(--stzh-space-xxxlarge);
}

.feature, .benefit {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: var(--stzh-space-large);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.feature strong, .benefit strong {
  display: block;
  font-size: var(--stzh-font-milli);
  margin-bottom: var(--stzh-space-xxsmall);
  color: var(--text);
}

.feature span, .benefit span {
  font-size: var(--stzh-font-micro);
  color: var(--text-light);
  line-height: 1.5;
}

/* CTA banner */
.try-cta {
  background: var(--blue);
  color: var(--stzh-white);
  border-radius: var(--radius);
  padding: var(--stzh-space-xxlarge);
  text-align: center;
  margin-bottom: var(--stzh-space-xxxlarge);
}

.try-cta h2 {
  font-family: var(--stzh-font-heavy);
  font-size: var(--stzh-font-deca);
  font-weight: 700;
  margin-bottom: var(--stzh-space-xsmall);
}

.try-cta p {
  font-size: var(--stzh-font-milli);
  opacity: 0.88;
  margin-bottom: var(--stzh-space-medium);
}

.try-cta a {
  display: inline-block;
  background: var(--stzh-white);
  color: var(--blue);
  font-weight: 700;
  font-size: var(--stzh-font-milli);
  padding: var(--stzh-space-small) var(--stzh-space-xxlarge);
  border-radius: 8px;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.try-cta a:hover {
  transform: scale(1.03);
}

/* Info note */
.info-note, .tech-note {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: var(--stzh-space-large) var(--stzh-space-xlarge);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  font-size: var(--stzh-font-micro);
  color: var(--text-light);
  line-height: 1.6;
}

.info-note a, .tech-note a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.info-note a:hover, .tech-note a:hover {
  text-decoration: underline;
}

/* Steps */
.steps {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: var(--stzh-space-xlarge) var(--stzh-space-xxlarge);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  margin-bottom: var(--stzh-space-xxxlarge);
}

.steps h3 {
  font-family: var(--stzh-font-heavy);
  font-size: var(--stzh-font-centi);
  font-weight: 700;
  margin-bottom: var(--stzh-space-medium);
  color: var(--text);
}

.steps ol {
  list-style: none;
  counter-reset: step;
  padding: 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: calc(28px + var(--stzh-space-small));
  margin-bottom: var(--stzh-space-small);
  font-size: var(--stzh-font-milli);
  line-height: 1.55;
  color: var(--text-light);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--stzh-white);
  font-weight: 700;
  font-size: var(--stzh-font-micro);
}

.steps li a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.steps li a:hover {
  text-decoration: underline;
}

/* Auto-reset overlay */
.reset-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 5, 160, 0.92);
  color: var(--stzh-white);
  z-index: 1000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.reset-overlay.visible {
  display: flex;
}

.reset-overlay h2 {
  font-family: var(--stzh-font-heavy);
  font-size: var(--stzh-font-mega);
  margin-bottom: var(--stzh-space-medium);
}

.reset-overlay p {
  font-size: var(--stzh-font-deci);
  opacity: 0.85;
}


/* =========================================================
   Responsive
   =========================================================

   Breakpoints und Begründung: siehe Kommentar «Responsive» in tokens.css.
   Ab 1200px greift hier nichts — das Layout für die Kiosk-Geräte
   (1280 × 800) bleibt unverändert. Seitenspezifisches steht jeweils am
   Ende des <style>-Blocks der Seite. */

/* ≤ 1199px: Der Abstand zwischen Titelblock und Sticker schrumpft, damit
   der Titel (534px) und der längste Untertitel (572px) einzeilig bleiben.
   Platz für den Text bei 1024px: 1024 − 2 × 32 − 88 (Sticker) − 24 = 848px. */
@media (max-width: 1199px) {
  header {
    gap: var(--stzh-space-xlarge);
  }
}

/* ≤ 1023px: Nebeneinander reicht der Platz nicht mehr. Auge und Sticker
   teilen sich die obere Zeile, Titel und Untertitel stehen darunter über
   die volle Breite. Das Auge steht hier im Raster statt angeschnitten am
   Rand — quer über dem umbrechenden Titel läge es sonst im Text. */
@media (max-width: 1023px) {
  header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "eye     sticker"
      "text    text";
    align-items: center;
    gap: var(--stzh-space-small) var(--stzh-space-medium);
    padding-block: var(--stzh-space-medium) var(--stzh-space-large);
  }

  .header-eye {
    grid-area: eye;
    position: static;
    transform: none;
    justify-self: start;
    width: 56px;
    height: 56px;
  }

  .header-logo {
    grid-area: sticker;
    justify-self: end;
    width: auto;
    height: 64px;
  }

  .header-text {
    grid-area: text;
  }

  /* Bricht der Titel um, verteilt balance die Wörter auf gleich lange
     Zeilen statt ein einzelnes Wort allein in die zweite zu setzen. */
  header h1,
  header p {
    text-wrap: balance;
  }
}

/* ≤ 767px: einspaltig. */
@media (max-width: 767px) {
  header h1 {
    font-size: var(--stzh-font-deca);
  }

  header p {
    font-size: var(--stzh-font-micro);
  }

  .header-eye {
    width: 48px;
    height: 48px;
  }

  .header-logo {
    height: 52px;
  }

  /* Fünf Punkte passen nicht mehr in eine Zeile. Umbrechen statt
     seitlich scrollen: So bleiben alle Punkte sichtbar, und niemand muss
     erraten, dass rechts noch etwas kommt. */
  nav {
    flex-wrap: wrap;
    column-gap: 0;
    padding-inline: calc(var(--stzh-container-margin) - var(--stzh-space-xsmall));
  }

  nav a {
    padding: var(--stzh-space-small) var(--stzh-space-xsmall);
  }

  main {
    padding-block: var(--stzh-space-xlarge);
  }

  .intro {
    flex-direction: column;
    gap: var(--stzh-space-xlarge);
  }

  .intro-image {
    width: 100%;
    max-width: 32rem;
  }

  .section-title,
  .intro-text h2,
  .try-cta h2 {
    font-size: var(--stzh-font-deci);
  }

  .steps {
    padding: var(--stzh-space-large);
  }

  .try-cta {
    padding: var(--stzh-space-xlarge) var(--stzh-space-large);
  }
}

/* ≤ 479px: Telefone. */
@media (max-width: 479px) {
  header h1 {
    font-size: var(--stzh-font-deci);
  }

  .card-body {
    padding: var(--stzh-space-large);
  }

  .card-image {
    height: 160px;
  }

  .info-note,
  .tech-note {
    padding: var(--stzh-space-medium) var(--stzh-space-large);
  }

  .try-cta a {
    padding-inline: var(--stzh-space-xlarge);
  }
}