/* ──────────────────────────────────────────────────────────────
   Startseite der Kundendomain — eigene Gestaltung, ohne Shell
   (Entscheid Karlo, 09.09.2026)

   Die Seite ist die Haustür einer fremden Apotheke unter deren eigener
   Adresse. Sie lädt deshalb weder shell.css noch tokens.css und kein
   JavaScript; alles, was sie braucht, steht hier.

   EINE Farbe kommt von außen: --akzent, die Farbe der Apotheke
   (src/domain/akzentfarbe.js). Beim Speichern ist sie auf 4,5:1 gegen
   Weiß geprüft — also ist weiße Schrift auf ihr lesbar und sie selbst
   ist auf Weiß lesbar. Gegen den DUNKLEN Grund ist nichts geprüft.
   Daraus folgt die Regel, an der sich hier jede Zeile hält:

     Der Akzent erscheint nur als gefüllte Fläche mit weißer Schrift,
     nie als Schriftfarbe auf dem Seitengrund.

   Wer eine Stelle einfärben will, gibt ihr also einen Akzent-Grund oder
   lässt sie in der Textfarbe. Ein Knopf mit weißem Grund und Akzent-
   Schrift ist erlaubt, weil sein eigener Grund weiß ist.

   Die schrägen Kanten am Farbband und über dem Kontakt sind das
   Gestaltungsmotiv der Heider-CI (diagonale Flächen), bewusst nur
   zweimal — dreimal wäre Dekoration.
   ────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  /* Dieselbe Datei, die auch die Shell ausliefert; der Pfad ist relativ
     zu /static/v/<version>/css/. Selbst gehostet, weil der Dienst
     egress-dicht ist und keine Schrift von außen laden kann. */
  src: url('../shell/fonts/inter-variabel.woff2') format('woff2');
}

:root {
  --grund: #ffffff;
  --ruhe: #f2f5f8;
  --linie: #e0e6ec;
  --text: #12161b;
  --leise: #55606d;
  --auf-akzent: #ffffff;

  --breite: 64rem;
  --rand: clamp(1.25rem, 5vw, 3rem);
  --schraege: clamp(1.75rem, 5vw, 4rem);
  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0f1317;
    --ruhe: #171d24;
    --linie: #29323b;
    --text: #e9edf1;
    --leise: #9daab6;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body.start {
  /* Die Farbe der Apotheke kommt als Inline-Eigenschaft an diesem Element
     an und überschreibt diesen Rückfall. Er steht hier, damit die Seite
     auch ohne ihn vollständig gestaltet ist. */
  --akzent: #192c39;

  margin: 0;
  /* Der Body trägt den ruhigen Ton, die hellen Bänder setzen ihr Weiß
     selbst. So passt jede Restfläche unter kurzem Inhalt zum Fuß, statt
     als weißer Streifen darunter zu stehen. */
  background: var(--ruhe);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Die ruhigen Flächen tragen einen Hauch der Apothekenfarbe statt eines
   neutralen Graus. Nur hinter @supports: Eine Eigenschaft wie --ruhe nimmt
   jeden Wert an, auch einen, den der Browser nicht versteht. Safari vor
   16.2 (iPadOS 15) hätte das Grau aus :root sonst verloren und den Grund
   durchsichtig gemacht, im Nachtmodus mit heller Schrift auf Weiß. So bleibt
   es dort beim Grau, die Seite wirkt nüchterner und nie falsch. */
@supports (color: color-mix(in srgb, red 50%, white)) {
  body.start {
    --ruhe: color-mix(in srgb, var(--akzent) 7%, #ffffff);
  }

  @media (prefers-color-scheme: dark) {
    body.start {
      --ruhe: color-mix(in srgb, var(--akzent) 22%, #0f1317);
    }
  }
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 3px;
}

/* Mittelspalte: eine Breite für Kopf, Inhalt und Fuß, damit die
   linken Kanten über die ganze Seite auf einer Linie stehen. */
.start-mitte {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
}

.start-sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--grund);
  color: var(--text);
  padding: 0.75rem 1rem;
  z-index: 10;
}
.start-sprung:focus { left: 0; }

/* ─── Kopf ─────────────────────────────────────────────────── */

.start-kopf {
  background: var(--grund);
  padding-block: clamp(1rem, 3vw, 1.75rem);
}

.start-kopf-reihe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.start-marke {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Ein Logo-SVG hat oft nur einen viewBox und keine eigene Breiten- und
   Höhenangabe. Es braucht deshalb eine FESTE Höhe; aus `height: auto` plus
   `max-height` wird sonst nichts (gemessen: 0 mal 0 Pixel, das Logo fehlte
   wortlos). Die Obergrenze der Breite steht in Pixeln und nicht in Prozent
   — ein Prozentwert bezöge sich auf einen Kasten, dessen Breite gerade
   dieses Bild bestimmt, und der Kreis endet wieder bei null. */
.start-marke-bild {
  display: block;
  flex: none;
  height: clamp(2.75rem, 7vw, 4.25rem);
  width: auto;
  max-width: 300px;
  object-fit: contain;
}

.start-marke-name {
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

/* Ohne Logo trägt der Name die Marke allein und darf dafür größer sein. */
.start-marke-name--allein {
  font-size: clamp(1.0625rem, 4vw, 1.1875rem);
  letter-spacing: -0.015em;
}

/* Sprachumschalter: derselbe Baustein wie auf den übrigen Patientenseiten
   (views/partials/sprachwahl.ejs), hier mit den Tokens dieser Seite. Ein
   Segment-Control mit gleitendem Schieber; der Schieber hängt an
   `aria-current`, weil die Sprachwahl ein Link ist und kein Formularfeld.

   Bricht der Kopf auf dem Telefon um, steht der Umschalter allein in der
   zweiten Zeile. `space-between` richtet ihn dort links aus, also links
   unter dem Namen, was nach Versehen aussieht. Der Automatik-Rand hält ihn
   in beiden Fällen rechts. */
.sprach-segment {
  margin-left: auto;
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;   /* gleiche Breite ist die Bedingung fürs Gleiten */
  padding: 3px;
  background: var(--ruhe);
  border: 1px solid var(--linie);
  border-radius: 10px;
}

.sprach-segment::before {
  content: '';
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / 2);
  border-radius: 7px;
  background: var(--grund);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.09);
  transition: transform 0.18s ease;
  pointer-events: none;
}

.sprach-segment:has(> :nth-child(3))::before { width: calc((100% - 6px) / 3); }
.sprach-segment:has(> :nth-child(4))::before { width: calc((100% - 6px) / 4); }
.sprach-segment:has(> :nth-child(2)[aria-current])::before { transform: translateX(100%); }
.sprach-segment:has(> :nth-child(3)[aria-current])::before { transform: translateX(200%); }
.sprach-segment:has(> :nth-child(4)[aria-current])::before { transform: translateX(300%); }

.sprach-segment-knopf {
  position: relative;
  z-index: 1;               /* Beschriftung liegt über dem Schieber */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.3rem 0.7rem;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--leise);
  text-decoration: none;
  transition: color 0.12s ease;
}

.sprach-segment-knopf:hover { color: var(--text); }
.sprach-segment-knopf[aria-current] { color: var(--text); font-weight: 600; }
.sprach-segment-flagge { width: 18px; height: 12px; border-radius: 2px; display: block; }

/* ─── Farbband ─────────────────────────────────────────────── */

.held-rahmen { background: var(--grund); }

.held {
  background: var(--akzent);
  color: var(--auf-akzent);
  padding-block: clamp(3rem, 9vw, 5.5rem);
  /* Schräge Unterkante: das Motiv der Heider-CI. Die zusätzliche
     Polsterung unten hält den Text aus dem angeschnittenen Bereich. */
  padding-bottom: calc(clamp(3rem, 9vw, 5.5rem) + var(--schraege));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schraege)), 0 100%);
  /* Sehr leise diagonale Aufhellung als Gegenkante zur Schräge unten.
     Sie liegt bewusst rechts der Textspalte: Läuft die Kante durch die
     Überschrift, liest sie sich als Fehler statt als Gestaltung. */
  background-image: linear-gradient(112deg, rgba(255, 255, 255, 0) 0 58%, rgba(255, 255, 255, 0.07) 58%);
}

.held-inhalt { max-width: 34rem; }

/* Der Name der Apotheke über der Überschrift. Groß genug, um die Marke zu
   tragen, ruhig genug, um der Überschrift nicht die Schau zu stehlen. */
.held-marke {
  margin: 0 0 0.875rem;
  font-size: clamp(1rem, 2.6vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
}

.held-titel {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}

.held-lead {
  margin: 1rem 0 0;
  font-size: clamp(1.0625rem, 2.2vw, 1.3125rem);
  line-height: 1.5;
  opacity: 0.92;
}

.held-tat { margin: 2rem 0 0; }

.start-knopf {
  display: inline-block;
  background: #ffffff;
  color: var(--akzent);
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius);
}

.start-knopf:hover { background: #eef2f6; }

/* ─── Ablauf und Mitbringliste ─────────────────────────────── */

/* Das helle Band um Ablauf und Mitbringliste. Seine schräge Unterkante
   nimmt die Kante des Farbbands wieder auf; darunter liegt der getönte
   Grund des Body. */
.ablauf-band {
  background: var(--grund);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schraege)), 0 100%);
}

.ablauf-raster {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-top: clamp(2.5rem, 7vw, 4.5rem);
  padding-bottom: calc(clamp(2.5rem, 7vw, 4.5rem) + var(--schraege));
}

@media (min-width: 56rem) {
  .ablauf-raster {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: start;
  }
}

.start-h2 {
  margin: 0 0 1.75rem;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 650;
}

.start-h3 {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.schritt {
  position: relative;
  display: grid;
  grid-template-columns: 2.375rem 1fr;
  gap: 1rem;
  align-items: start;
}

.schritt + .schritt { margin-top: 1.75rem; }

/* Die Schiene verbindet je zwei Ziffern. Bewusst je Schritt und nicht
   als eine Linie über die ganze Liste: Wie hoch der letzte Schritt ist,
   entscheidet der Text, und ein fester Wert für sein Ende wäre bei jeder
   Übersetzung wieder falsch. */
.schritt:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(1.1875rem - 1px);
  top: 2.375rem;
  bottom: -1.75rem;
  width: 2px;
  background: var(--linie);
}

.schritt-nr {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  background: var(--akzent);
  color: var(--auf-akzent);
  display: grid;
  place-items: center;
  font-weight: 650;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.schritt-text { padding-top: 0.4375rem; }

.mitbringen {
  background: var(--ruhe);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.mitbringen-text {
  margin: 0;
  color: var(--leise);
}

/* ─── Kontakt ──────────────────────────────────────────────── */

/* Ohne eigenen Grund: Der Body trägt ihn, und die Schräge des Bands
   darüber ist bereits die Kante. Zwei Schrägen an derselben Naht wären
   ein Zickzack. */
.kontakt {
  padding-block: clamp(2rem, 5vw, 3rem) clamp(3rem, 7vw, 4.5rem);
}

.kontakt-liste {
  margin: 0;
  display: grid;
  gap: 1.5rem 3rem;
}

@media (min-width: 40rem) {
  .kontakt-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kontakt-paar dt {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--leise);
  margin-bottom: 0.25rem;
}

.kontakt-paar dd { margin: 0; }

.kontakt-paar a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

.kontakt-mehrzeilig { white-space: pre-line; }

/* ─── Fuß ─────────────────────────────────────────────────── */

/* Fuß und Kontakt teilen sich den Ton des Body. Der Abstand zwischen
   ihnen ist deshalb EIN Abstand, nicht die Summe zweier Polsterungen. */
.start-fuss {
  padding-top: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: clamp(2rem, 5vw, 3rem);
}

.start-fuss-inhalt {
  border-top: 1px solid var(--linie);
  padding-top: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--leise);
}

.start-fuss-inhalt p { margin: 0 0 0.5rem; }
.start-fuss-inhalt p:last-child { margin-bottom: 0; }

.start-fuss-marke { color: var(--text); font-weight: 600; }

.start-fuss-recht a { text-underline-offset: 2px; }