/* Die Startseite ist aus vier Entwürfen zusammengesetzt, die eine Jury aus
   drei Blickwinkeln (Auftraggeberin, Fahrer, Art Director) bewertet hat:
   die Überschrift und die zwei Türen aus „Zwei Türen", die Karte aus „Das
   Gebiet", die nummerierte Leistungsliste ebenfalls von dort, der Tagesrhythmus
   aus „Der Arbeitstag als Achse" mit den echten Startzeiten des Betreibers,
   und der Straßenstreifen als Trenner aus „Schrift und Straße". Was hier
   steht, gilt nur für diese Seite; alles Gemeinsame liegt in /stil.css. */

:root {
  --fluss: #4E6272;          /* der Rhein, kühl abgesetzt vom warmen Schwarz */
  --asphalt-karte: #3A302A;  /* Straßen auf der Karte */
  --gedeckt-hell: #B4ACA1;   /* Nebentext auf Schwarz, 7:1 */
  --wa: #25D366;             /* WhatsApp-Grün, damit der Knopf sofort erkannt wird */
  --wa-text: #0B3D1F;
}

/* ── Bühne: Überschrift und zwei Türen ────────────────────────────────── */
.buehne { background: var(--nacht); color: #fff; padding: clamp(44px, 7vw, 84px) 0 0; }
.buehne .augenbraue { color: #FF7A85; }
.titel { color: #fff; font-size: clamp(38px, 7.2vw, 88px); line-height: .98; letter-spacing: -0.03em; max-width: 12ch; }
.titel .zeile { display: block; }
.titel .du { color: var(--rot); }
.buehne p.fuehrung { color: #C9C4BB; margin-top: 22px; max-width: 56ch; }

.tueren {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin-top: clamp(36px, 5vw, 60px);
  border-top: 6px solid var(--rot);
}
.tuer-halb { position: relative; overflow: hidden; padding: clamp(30px, 4vw, 52px) clamp(22px, 3vw, 40px) clamp(34px, 4vw, 56px); min-height: 380px; display: flex; align-items: flex-end; }
.tuer-halb.sie { background: var(--nacht-weich); color: #fff; }
.tuer-halb.du { background: var(--papier); color: var(--text); }
.tuer-halb .kunst { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tuer-inhalt { position: relative; z-index: 1; max-width: 46ch; }
.tuer-halb h2 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 12px; }
.tuer-halb.sie h2 { color: #fff; }
.tuer-halb.sie p { color: #C9C4BB; }
.tuer-halb.du h2 { color: var(--asphalt); }
.tuer-halb.du p { color: var(--muted); }
.tuer-halb .augenbraue { margin-bottom: 8px; }
.tuer-halb.sie .augenbraue { color: #FF7A85; }
.tuer-halb .knopfreihe { margin-top: 22px; }
@media (max-width: 760px) {
  .tueren { grid-template-columns: 1fr; }
  .tuer-halb { min-height: 0; }
  /* Am Telefon zuerst die Fahrertuer: Wer auf dem Handy kommt, sucht meist
     einen Job, und die Jury hat bemaengelt, dass die Tuer sonst erst nach
     dem Scrollen erscheint. Am Rechner stehen beide nebeneinander. */
  .tuer-halb.du { order: -1; border-bottom: 6px solid var(--nacht); }
  /* Am Telefon laeuft der Text ueber die ganze Breite und damit ueber die
     Sonne — grauer Text auf Rot war nicht mehr lesbar (Betreiber-Screenshot
     17.09.2026). Die Sonne wird dort zum blassen Hintergrund; der Text gewinnt. */
  .tuer-halb.du .kunst { opacity: .22; }
}
/* Am Rechner bleibt der Text links von der Sonne: schmalere Spalte, Sonne
   weiter rechts, etwas zurueckgenommen. */
.tuer-halb.du .tuer-inhalt { max-width: 40ch; }


/* Der Morgen auf der Fahrerseite: eine rote Sonne über dem Horizont. */
@media (prefers-reduced-motion: no-preference) {
  .sonne { animation: aufgehen 1.6s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes aufgehen { from { transform: translateY(70px); } to { transform: translateY(0); } }
}

/* ── Karte ────────────────────────────────────────────────────────────── */
.gebiet { background: var(--nacht); color: #EDEAE4; }
.gebiet h2 { color: #fff; }
.gebiet .augenbraue { color: #FF7A85; }
.gebiet .zwei { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.5fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 820px) { .gebiet .zwei { grid-template-columns: 1fr; } }
.gebiet p.fuehrung { color: #C6C1B8; }
.gebiet p.fuehrung strong { color: #fff; }
.kartenrahmen { position: relative; }
.gebietskarte { width: 100%; height: auto; display: block; }
.kartenhinweis { font-size: 12px; color: var(--gedeckt-hell); margin-top: 8px; }
.gebietskarte .fluss { fill: none; stroke: var(--fluss); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.gebietskarte .fluss-name { fill: #8FA3B3; font-size: 13px; font-style: italic; letter-spacing: .08em; }
.gebietskarte .asphalt { fill: none; stroke: var(--asphalt-karte); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.gebietskarte .mitte { fill: none; stroke: var(--rot); stroke-width: 1.6; stroke-dasharray: 10 9; stroke-linejoin: round; }
.gebietskarte .strassenname { fill: var(--gedeckt-hell); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.gebietskarte .region { fill: rgba(255,255,255,.16); font-size: 22px; font-weight: 800; letter-spacing: .26em; }
.gebietskarte .ort .ring { fill: none; stroke: var(--rot); stroke-width: 2; opacity: .55; }
.gebietskarte .ort .punkt { fill: var(--rot); stroke: #fff; stroke-width: 2.5; }
.gebietskarte .ort text { fill: #fff; font-size: 17px; font-weight: 700; paint-order: stroke; stroke: var(--nacht); stroke-width: 5px; stroke-linejoin: round; }
.gebietskarte .nordpfeil { fill: var(--gedeckt-hell); font-size: 12px; font-weight: 700; }
.gebietskarte .nordpfeil-linie { stroke: var(--gedeckt-hell); stroke-width: 1.5; fill: none; }
/* Zwei Arten von Punkt: Zustellstandort (voll) und Firmensitz (voll mit
   weißem Kern). Die Legende unter der Karte erklärt den Unterschied. */
.gebietskarte .ort.sitz .kern { fill: #fff; }

.kartenlegende { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 14px 0 0; padding: 0; font-size: 13px; color: #C6C1B8; }
.kartenlegende li { display: flex; align-items: center; gap: 8px; }
.kartenlegende .sinn { width: 13px; height: 13px; border-radius: 50%; flex: none; position: relative; }
.kartenlegende .sinn.depot, .kartenlegende .sinn.sitz { background: var(--rot); box-shadow: 0 0 0 2px rgba(216,30,44,.4); }
.kartenlegende .sinn.sitz::after { content: ""; position: absolute; inset: 4.5px; background: #fff; border-radius: 50%; }
/* Auf dem Telefon wird die Karte 300 px breit — dann müssen die Schriften
   im SVG mitwachsen, sonst sind die Ortsnamen sechs Pixel groß. */
@media (max-width: 560px) {
  .gebietskarte .ort text { font-size: 30px; stroke-width: 8px; }
  .gebietskarte .ort .punkt { r: 10; }
  .gebietskarte .ort .ring { r: 20; }
  .gebietskarte .region { font-size: 30px; letter-spacing: .2em; }
  .gebietskarte .fluss-name { font-size: 22px; }
  .gebietskarte .strassenname { font-size: 18px; }
  .gebietskarte .ort .kern { r: 4.5; }
  .gebietskarte .kartenraster { display: none; }
}
/* Beim Laden zeichnen sich die Straßen einmal nach, dann leuchten die Orte von
   West nach Ost auf. Einmal, kurz — danach steht die Karte still. */
@media (prefers-reduced-motion: no-preference) {
  .gebietskarte .asphalt { stroke-dasharray: 1; stroke-dashoffset: 1; animation: nachzeichnen 1.6s ease-out forwards; }
  .gebietskarte .mitte { opacity: 0; animation: einblenden .8s ease-out 1.3s forwards; }
  .gebietskarte .fluss, .gebietskarte .fluss-name { opacity: 0; animation: einblenden 1s ease-out .2s forwards; }
  .gebietskarte .ort { opacity: 0; transform-box: fill-box; transform-origin: center; animation: aufleuchten .55s cubic-bezier(.2,.8,.3,1.2) forwards; animation-delay: calc(1.2s + var(--n) * .2s); }
  @keyframes nachzeichnen { to { stroke-dashoffset: 0; } }
  @keyframes einblenden { to { opacity: 1; } }
  @keyframes aufleuchten { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
}

.ortsband { margin-top: 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.ortsband h3 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gedeckt-hell); margin-bottom: 10px; }
.ortsliste { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.ortsliste li { display: inline-flex; align-items: center; gap: 8px; background: var(--nacht-weich); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 7px 14px 7px 10px; font-size: 14.5px; font-weight: 600; color: #fff; }
.ortsliste li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 0 2px #fff; }
.ortsliste small { font-weight: 400; color: var(--gedeckt-hell); }
/* Die Punkte vor den Ortsnamen sagen dasselbe wie die Punkte auf der Karte:
   voll = Zustellstandort, voll mit Kern = Firmensitz. */
.ortsliste li.sitz::before { background: radial-gradient(circle, #fff 0 2.2px, var(--rot) 2.2px); }

/* ── Leistungen als nummerierte Liste ─────────────────────────────────── */
.leistungsliste { list-style: none; margin-top: 30px; display: grid; gap: 0; border-top: 1px solid var(--linie); }
.leistungsliste li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--linie); }
.leistungsliste .nr { font-size: 30px; font-weight: 800; color: var(--rot); letter-spacing: -0.03em; line-height: 1; }
.leistungsliste h3 { font-size: 20px; margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.marke-haupt { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--rot); padding: 3px 9px; border-radius: 4px; }
.leistungsliste p { color: var(--muted); font-size: 15.5px; max-width: 64ch; }
@media (max-width: 480px) { .leistungsliste li { grid-template-columns: 44px 1fr; gap: 12px; } .leistungsliste .nr { font-size: 24px; } }

/* ── Ein Tag auf der Tour ─────────────────────────────────────────────── */
.tag { background: var(--nacht); color: #EDEAE4; }
.tag h2 { color: #fff; }
.tag .augenbraue { color: #FF7A85; }
.stationen { list-style: none; margin-top: 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; position: relative; }
.stationen li { padding: 22px 22px 22px 0; border-top: 3px solid rgba(255,255,255,.12); position: relative; }
.stationen li::before { content: ""; position: absolute; top: -9px; inset-inline-start: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 0 3px var(--nacht); }
.stationen .zeit { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #FF7A85; font-weight: 700; }
.stationen h3 { color: #fff; margin: 6px 0 8px; }
.stationen p { color: #C6C1B8; font-size: 15px; }
.startzeiten { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.startzeiten span.z { background: var(--nacht-weich); border: 1px solid rgba(255,255,255,.16); color: #fff; font-weight: 700; padding: 6px 12px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.startzeiten .erkl { color: var(--gedeckt-hell); font-size: 14px; }

/* ── Fahrer ───────────────────────────────────────────────────────────── */
.fahrer { border-top: 6px solid var(--rot); }
.ehrlich { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 30px; }
.ehrlich .karte-e { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 22px; }
.ehrlich h3 { font-size: 16px; margin-bottom: 4px; }
.ehrlich ul.strich { margin-top: 12px; }
.ehrlich ul.strich li { font-size: 15px; }
.ruf { margin-top: 34px; background: var(--nacht); color: #fff; border-radius: 14px; padding: clamp(24px, 3vw, 36px); display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; }
.ruf h3 { color: #fff; font-size: 22px; margin-bottom: 6px; }
.ruf p { color: #C6C1B8; }
.ruf .knopfreihe { margin-top: 0; }
@media (max-width: 760px) { .ruf { grid-template-columns: 1fr; } .ruf .knopfreihe { margin-top: 6px; } }