/* ==========================================================================
   Alpen-Taxibedarf OG - Stylesheet
   Aufbau: 1 Grundlagen  2 Layout  3 Kopf und Menue  4 Bausteine
           5 Seitenteile  6 Formular  7 Fusszeile  8 Bildschirmbreiten
   Farben sind auf hohen Kontrast ausgelegt (schwarz auf weiss und
   schwarz auf taxigelb liegen beide weit ueber der WCAG-Stufe AAA).
   ========================================================================== */

/* --- 1 Grundlagen --------------------------------------------------------- */

:root {
  /* Farben */
  --tinte:        #000000;   /* Schrift, Linien, Flaechen  - 21:1 auf Weiss   */
  --tinte-leise:  #3B3F42;   /* Nebentext                  - 10.4:1 auf Weiss */
  --papier:       #FFFFFF;
  --grau:         #EFF0F1;   /* Wechselflaeche                                */
  --signal:       #FFD400;   /* Taxigelb, immer mit schwarzer Schrift 14.8:1  */
  --signal-tief:  #E0B900;   /* Randlinie zu Gelb                             */
  --linie:        #CBCED1;
  --fokus:        #0040FF;

  /* Schrift: bewusst systemeigen, damit keine Schriften von fremden
     Servern nachgeladen werden (Datenschutz) und die Seite sofort steht. */
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

  --t-xs:  0.8125rem;
  --t-s:   0.9375rem;
  --t-m:   1.0625rem;
  --t-l:   1.375rem;
  --t-xl:  1.875rem;
  --t-2xl: 2.5rem;
  --t-3xl: 3.25rem;

  --raum-1: 0.25rem;
  --raum-2: 0.5rem;
  --raum-3: 1rem;
  --raum-4: 1.5rem;
  --raum-5: 2rem;
  --raum-6: 3rem;
  --raum-7: 4.5rem;
  --raum-8: 6rem;

  --breite: 1180px;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: var(--t-m);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--raum-3); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); letter-spacing: -0.01em; }
h4 { font-size: var(--t-m); letter-spacing: 0; }

p, ul, ol, dl { margin: 0 0 var(--raum-3); }
p { max-width: 68ch; }

a { color: var(--tinte); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--signal-tief); }

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

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 2px;
}

.nur-vorleser {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprungmarke {
  position: absolute; left: var(--raum-3); top: -100px; z-index: 100;
  background: var(--tinte); color: var(--papier);
  padding: var(--raum-2) var(--raum-3); font-weight: 700;
}
.sprungmarke:focus { top: var(--raum-3); }

/* --- 2 Layout ------------------------------------------------------------- */

.breite { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--raum-4); }

.abschnitt { padding-block: var(--raum-7); border-top: 1px solid var(--linie); }
.abschnitt:first-of-type { border-top: 0; }
.buehne + .abschnitt,
.seitenkopf + .abschnitt { border-top: 0; }
.abschnitt--grau   { background: var(--grau); border-top-color: var(--linie); }
.abschnitt--dunkel { background: var(--tinte); color: var(--papier); border-top: 0; }
.abschnitt--dunkel a { color: var(--papier); }
.abschnitt--dunkel :focus-visible,
.seitenkopf :focus-visible,
.buehne__text :focus-visible,
.fuss :focus-visible { outline-color: var(--signal); }
.abschnitt--signal { background: var(--signal); border-top: 0; }

.abschnitt__kopf { margin-bottom: var(--raum-6); }
.abschnitt__kopf p { font-size: var(--t-l); line-height: 1.45; color: var(--tinte-leise); }
.abschnitt--dunkel .abschnitt__kopf p { color: #D4D7DA; }

.raster { display: grid; gap: var(--raum-5); }
.raster--2 { grid-template-columns: 1fr; }
.raster--3 { grid-template-columns: 1fr; }

/* --- 3 Kopf und Menue ----------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--papier);
  border-bottom: 2px solid var(--tinte);
}

.kopf__innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--raum-4); min-height: 72px;
}

.marke { display: inline-flex; align-items: center; text-decoration: none; }
.marke img { width: 190px; }

.menue-knopf {
  display: inline-flex; align-items: center; gap: var(--raum-2);
  font: inherit; font-weight: 700; font-size: var(--t-s);
  background: var(--tinte); color: var(--papier);
  border: 0; padding: 0.6rem 0.9rem; cursor: pointer;
}
.menue-knopf__text { line-height: 1; }
.menue-knopf__kaesten { display: grid; gap: 3px; }
.menue-knopf__kaesten span { display: block; width: 18px; height: 2px; background: currentColor; }
.menue-knopf[aria-expanded="true"] { background: var(--signal); color: var(--tinte); }

.menue ul { display: flex; gap: var(--raum-4); list-style: none; margin: 0; padding: 0; }
.menue a {
  display: block; padding: 0.35rem 0; font-weight: 600; font-size: var(--t-s);
  text-decoration: none; border-bottom: 3px solid transparent;
}
.menue a:hover { border-bottom-color: var(--signal-tief); }
.menue a[aria-current="page"] { border-bottom-color: var(--tinte); }

/* Signalband unter dem Kopf - greift die Leuchtschrift der Dachleuchte auf */
.signalband { background: var(--signal); border-bottom: 2px solid var(--tinte); }
.signalband__innen {
  display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-5);
  padding-block: 0.55rem; font-size: var(--t-s); font-weight: 600;
}
.signalband a { text-decoration: none; font-weight: 700; }
.signalband a:hover { text-decoration: underline; }

/* --- 4 Bausteine ---------------------------------------------------------- */

.knopf {
  display: inline-block; font: inherit; font-weight: 700; font-size: var(--t-s);
  padding: 0.85rem 1.4rem; text-decoration: none; cursor: pointer;
  border: 2px solid var(--tinte); background: var(--tinte); color: var(--papier);
}
.knopf:hover { background: #26292C; }
.knopf--hell { background: var(--signal); color: var(--tinte); }
.knopf--hell:hover { background: #FFE14D; }
.knopf--offen { background: transparent; color: var(--tinte); }
.knopf--offen:hover { background: var(--tinte); color: var(--papier); }
.abschnitt--dunkel .knopf--offen { color: var(--papier); border-color: var(--papier); }
.abschnitt--dunkel .knopf--offen:hover { background: var(--papier); color: var(--tinte); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--raum-3); }

/* Liste mit Haken statt Aufzaehlungspunkten */
.haken { list-style: none; padding: 0; }
.haken li { position: relative; padding-left: 1.8rem; margin-bottom: var(--raum-2); }
.haken li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 12px; height: 12px; background: var(--signal);
  border: 2px solid var(--tinte);
}

/* Faktenzeile */
.fakten { display: grid; gap: 0; border: 2px solid var(--tinte); }
.fakten div { padding: var(--raum-4); border-bottom: 2px solid var(--tinte); }
.fakten div:last-child { border-bottom: 0; }
.fakten dt { font-size: var(--t-s); font-weight: 600; color: var(--tinte-leise); margin-bottom: var(--raum-1); }
.fakten dd { margin: 0; font-size: var(--t-l); font-weight: 800; letter-spacing: -0.01em; }

/* Leistungsblock */
.leistung { border-top: 3px solid var(--tinte); padding-top: var(--raum-3); }
.leistung h3 { margin-bottom: var(--raum-2); }
.leistung p { margin-bottom: 0; }

/* Paketkarte. Das schwebende Paket sitzt sichtbar erhoeht -
   das ist genau der Unterschied, den die Halterung am Auto macht. */
.paket { background: var(--papier); border: 2px solid var(--tinte); padding: var(--raum-5); }
.paket--gehoben { box-shadow: 10px 10px 0 var(--signal), 10px 10px 0 2px var(--tinte); }
.paket__name { font-size: var(--t-xl); margin-bottom: var(--raum-2); }
.paket__fuer { font-weight: 600; color: var(--tinte-leise); margin-bottom: var(--raum-4); }
.paket__preis { margin-top: var(--raum-4); padding-top: var(--raum-3); border-top: 1px solid var(--linie); font-weight: 700; }

/* Bildkachel */
.kachel figcaption { padding-top: var(--raum-2); font-size: var(--t-s); color: var(--tinte-leise); }
.kachel img { border: 1px solid var(--linie); }

/* Ablauf - hier ist die Nummerierung inhaltlich richtig, weil es
   wirklich eine Reihenfolge ist. */
.ablauf { list-style: none; counter-reset: schritt; padding: 0; margin: 0; }
.ablauf li {
  counter-increment: schritt; position: relative;
  padding: var(--raum-4) 0 var(--raum-4) 4.5rem;
  border-top: 1px solid var(--linie);
}
.ablauf li::before {
  content: counter(schritt); position: absolute; left: 0; top: var(--raum-4);
  width: 3rem; height: 3rem; display: grid; place-items: center;
  background: var(--signal); border: 2px solid var(--tinte);
  font-weight: 800; font-size: var(--t-l);
}
.ablauf h3 { margin-bottom: var(--raum-1); }
.ablauf p { margin-bottom: 0; }

.hinweis { border-left: 6px solid var(--signal); padding: var(--raum-3) var(--raum-4); background: var(--grau); }
.hinweis p:last-child { margin-bottom: 0; }

/* --- 5 Seitenteile -------------------------------------------------------- */

.buehne { border-bottom: 2px solid var(--tinte); }
.buehne__bild { position: relative; }
.buehne__bild img { width: 100%; height: clamp(260px, 46vw, 520px); object-fit: cover; object-position: center 42%; }
.buehne__text { background: var(--tinte); color: var(--papier); padding-block: var(--raum-6); }
.buehne__text h1 { font-size: clamp(2rem, 6vw, var(--t-3xl)); margin-bottom: var(--raum-3); }
.buehne__spruch {
  display: inline-block; background: var(--signal); color: var(--tinte);
  font-weight: 800; font-size: var(--t-l); letter-spacing: -0.01em;
  padding: 0.3rem 0.8rem; margin-bottom: var(--raum-4);
}
.buehne__text p { color: #D4D7DA; font-size: var(--t-l); line-height: 1.5; }
.buehne__text .knopfreihe { margin-top: var(--raum-5); }

.seitenkopf { background: var(--tinte); color: var(--papier); padding-block: var(--raum-6); }
.seitenkopf h1 { font-size: clamp(1.9rem, 5vw, var(--t-2xl)); }
.seitenkopf p { color: #D4D7DA; font-size: var(--t-l); line-height: 1.5; margin-bottom: 0; }

/* Karte mit Zwei-Klick-Schutz: es wird nichts an Google geladen,
   bevor die Besucherin oder der Besucher das ausdruecklich will. */
.karte { border: 2px solid var(--tinte); background: var(--grau); }
.karte__platzhalter { padding: var(--raum-6) var(--raum-4); text-align: center; }
.karte__platzhalter p { margin-inline: auto; }
.karte iframe { display: block; width: 100%; height: 420px; border: 0; }

.textseite { padding-block: var(--raum-7); }
.textseite h2 { font-size: var(--t-l); margin-top: var(--raum-6); }
.textseite h2:first-of-type { margin-top: 0; }
.textseite dl { display: grid; gap: var(--raum-2); }
.textseite dt { font-weight: 700; }
.textseite dd { margin: 0 0 var(--raum-3); }

/* --- 6 Formular ----------------------------------------------------------- */

.formular { display: grid; gap: var(--raum-4); max-width: 640px; }
.feld { display: grid; gap: var(--raum-1); }
.feld label { font-weight: 700; font-size: var(--t-s); }
.feld__hilfe { font-size: var(--t-xs); color: var(--tinte-leise); }
.feld input, .feld select, .feld textarea {
  font: inherit; font-size: var(--t-m); color: var(--tinte);
  padding: 0.7rem 0.8rem; border: 2px solid var(--tinte); background: var(--papier);
  width: 100%;
}
.feld textarea { min-height: 160px; resize: vertical; }
.feld input:user-invalid,
.feld textarea:user-invalid,
.feld select:user-invalid { border-color: #A5000F; }

.zustimmung { display: flex; gap: var(--raum-3); align-items: flex-start; }
.zustimmung input { width: 1.35rem; height: 1.35rem; margin-top: 0.25rem; flex: 0 0 auto; accent-color: #000; }
.zustimmung label { font-size: var(--t-s); font-weight: 400; }

.honigtopf { position: absolute; left: -9999px; }

.meldung { border: 2px solid var(--tinte); padding: var(--raum-4); margin-bottom: var(--raum-5); font-weight: 600; }
.meldung--gut { background: var(--signal); }
.meldung--schlecht { background: #FFE3E5; }
.meldung p:last-child { margin-bottom: 0; }

/* --- 7 Fusszeile ---------------------------------------------------------- */

.fuss { background: var(--tinte); color: var(--papier); padding-block: var(--raum-6) var(--raum-5); }
.fuss a { color: var(--papier); }
.fuss__raster { display: grid; gap: var(--raum-5); }
.fuss h2 { font-size: var(--t-m); margin-bottom: var(--raum-3); }
.fuss ul { list-style: none; padding: 0; }
.fuss li { margin-bottom: var(--raum-2); }
.fuss__emblem { width: 52px; margin-bottom: var(--raum-3); }
.fuss__unten {
  margin-top: var(--raum-6); padding-top: var(--raum-4);
  border-top: 1px solid #4A4E52; font-size: var(--t-s); color: #C2C6C9;
  display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-4);
}
.fuss__unten a { color: #C2C6C9; }

/* Hilfsklassen */
.abstand-oben { margin-top: var(--raum-5); }
.klein { font-size: var(--t-s); }
.bild-rand { border: 1px solid var(--linie); }
.bild-klein { width: 200px; }
.paket .bild-rand { margin-bottom: var(--raum-4); }
.dl-blank { padding-block: 0 !important; }

/* --- 8 Bildschirmbreiten -------------------------------------------------- */

/* Handy zuerst: Menue ist eingeklappt und ueber den Knopf erreichbar. */
@media (max-width: 899px) {
  .menue {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--papier); border-bottom: 2px solid var(--tinte);
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
  }
  .menue.ist-offen { display: block; }
  .menue ul { flex-direction: column; gap: 0; padding: var(--raum-2) var(--raum-4) var(--raum-4); }
  .menue li { border-bottom: 1px solid var(--linie); }
  .menue li:last-child { border-bottom: 0; }
  .menue a { padding: 0.9rem 0; font-size: var(--t-m); border-bottom: 0; border-left: 4px solid transparent; padding-left: var(--raum-3); }
  .menue a[aria-current="page"] { border-left-color: var(--tinte); background: var(--grau); }
  .menue a:hover { border-left-color: var(--signal-tief); }
  .kopf__innen { position: relative; }
}

/* Ab Tablet: Menueband dauerhaft sichtbar, Knopf verschwindet. */
@media (min-width: 900px) {
  .menue-knopf { display: none; }
  .menue { display: block !important; }
  .raster--2 { grid-template-columns: repeat(2, 1fr); }
  .raster--3 { grid-template-columns: repeat(3, 1fr); }
  .fakten { grid-template-columns: repeat(3, 1fr); }
  .fakten div { border-bottom: 0; border-right: 2px solid var(--tinte); }
  .fakten div:last-child { border-right: 0; }
  .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr; }
  .marke img { width: 210px; }
}

@media (min-width: 640px) and (max-width: 899px) {
  .raster--2 { grid-template-columns: repeat(2, 1fr); }
  .raster--3 { grid-template-columns: repeat(2, 1fr); }
  .fakten { grid-template-columns: repeat(3, 1fr); }
  .fakten div { border-bottom: 0; border-right: 2px solid var(--tinte); }
  .fakten div:last-child { border-right: 0; }
}

@media print {
  .kopf, .signalband, .menue-knopf, .karte, .knopfreihe { display: none; }
  body { font-size: 11pt; }
  .abschnitt--dunkel, .fuss { background: #fff; color: #000; }
}