/* ==========================================================================
   Phone Shop Eschen — Stylesheet
   Aufbau:  1 Schriften · 2 Variablen · 3 Grundlagen · 4 Bausteine
            5 Abschnitte · 6 Handy (unter 900px) · 7 Starteffekt
   ========================================================================== */

/* 1 — Schriften -------------------------------------------------------------
   Lokal eingebunden. Nicht auf Google Fonts umstellen: Liechtenstein liegt
   im EWR, ein direkter Aufruf bei Google überträgt die IP jedes Besuchers. */

@font-face { font-family: Barlow; font-style: normal; font-weight: 400;
  src: url("../schriften/barlow-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: Barlow; font-style: normal; font-weight: 500;
  src: url("../schriften/barlow-500.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: Barlow; font-style: normal; font-weight: 600;
  src: url("../schriften/barlow-600.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: Barlow; font-style: normal; font-weight: 700;
  src: url("../schriften/barlow-700.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700;
  src: url("../schriften/barlow-condensed-700.woff2") format("woff2"); font-display: swap; }


/* 2 — Variablen ------------------------------------------------------------ */

:root {
  /* Marke */
  --rot:        #D01027;   /* Akzent, Handlungsknöpfe, Überzeilen, Sterne */
  --blau:       #1B2E9E;   /* Zweitfarbe, Zahlen, sekundäre Knöpfe */
  --navy:       #101A47;   /* Überschriften und Fliesstext */

  /* Grautöne */
  --text:       #454B6B;   /* längere Absätze */
  --leise:      #5A6180;   /* Beschriftungen, Nebeninformation */
  --grau:       #F2F3F6;   /* Flächen, Faktenkasten */
  --linie:      #DCE0EA;   /* Kartenrahmen */
  --kante:      #E6E9F0;   /* feine Abschnittskanten */

  /* Aufhellungen der Markenfarben, keine neuen Farben */
  --blau-hauch: #ECEEF8;   /* Hintergrund der Icons */
  --rot-hauch:  #FCEDEF;   /* aktiver Menüpunkt */
  --gedaempft:  #7B85B5;
  --lichtblau:  #D6DBF4;   /* Text auf blauem Grund */

  /* Arbeitsmarkierung: fehlende Angaben, vor dem Aufschalten alle ersetzen */
  --offen:      #FFF1A8;

  /* Masse */
  --rand:       64px;      /* seitlicher Innenabstand, Handy siehe Abschnitt 6 */
  --breite:     1280px;
  --radius:     10px;      /* Knöpfe, Eingabefelder */
  --radius-k:   18px;      /* Karten */
  --abstand:    96px;      /* oben und unten in jedem Abschnitt */

  /* Schatten statt Rahmen: Karten heben sich weich vom Grund ab */
  --schatten:      0 1px 2px rgba(16,26,71,.05), 0 10px 30px -14px rgba(16,26,71,.20);
  --schatten-hoch: 0 2px 4px rgba(16,26,71,.06), 0 22px 44px -18px rgba(16,26,71,.32);

  box-sizing: border-box;
}

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


/* 3 — Grundlagen ----------------------------------------------------------- */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--navy);
  font-family: Barlow, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau); }
/* Knöpfe übernehmen die Schrift sonst nicht und fallen auf Arial zurück */
button { font-family: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: "Barlow Condensed", Barlow, sans-serif;
  font-weight: 700;
  line-height: 1.04;
  text-wrap: balance;   /* gleichmässig umbrechen, kein einzelnes Wort in der letzten Zeile */
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Sichtbarer Fokusrahmen: nötig für Tastaturbedienung, nicht entfernen */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: 2px;
}

/* Nur für Screenreader */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


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

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

.label {
  font-size: 13px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--rot);
}

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px;              /* mindestens 44px, sonst zu klein für Finger */
  padding: 0 26px;
  border: 2px solid transparent; border-radius: var(--radius);
  font-size: 17px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background-color .15s;
}
.knopf--rot    { background: var(--rot);  color: #fff; box-shadow: 0 8px 20px -10px rgba(208,16,39,.6); }
.knopf--blau   { background: var(--blau); color: #fff; box-shadow: 0 8px 20px -10px rgba(27,46,158,.6); }
.knopf--weiss  { background: #fff;        color: var(--blau); }
.knopf--kontur { border-color: var(--blau); color: var(--blau); background: #fff; }
.knopf--klein  { min-height: 48px; padding: 0 22px; font-size: 16px; }
.knopf svg     { flex: none; }
@media (hover: hover) {
  .knopf:hover { transform: translateY(-2px); }
  .knopf--kontur:hover { background: var(--blau-hauch); }
}

/* Runder Icon-Hintergrund in Kacheln und Karten */
.icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--blau-hauch); color: var(--blau);
  transition: background-color .2s, color .2s;
}
.icon svg { width: 24px; height: 24px; }
/* Linien-Icons aus dem SVG-Sprite am Seitenanfang (<use href="#i-...">) */
.i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8;
     stroke-linecap: round; stroke-linejoin: round; }

/* Karte mit Icon, Titel, Satz und Hakenliste */
.karte {
  background: #fff; border-radius: var(--radius-k);
  box-shadow: var(--schatten); padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.karte--eng { max-width: 480px; }
.karte h2,
.karte h3 { font-size: 30px; line-height: 1.05; }
.karte p  { font-size: 16px; color: var(--text); }
.karte ul { display: flex; flex-direction: column; gap: 11px; font-size: 15px; line-height: 1.4;
            margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--kante); }
.karte li { display: flex; gap: 10px; align-items: flex-start; }
.karte li svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--rot); }


.schwung { position: absolute; top: 0; left: 0; width: 100%; }


/* 5 — Abschnitte ----------------------------------------------------------- */

/* 5.1 Kontaktleiste */
.oben { background: var(--blau); color: #fff; font-size: 14px; font-weight: 500; }
.oben .huelle { display: flex; align-items: center; justify-content: space-between;
                gap: 20px; min-height: 44px; flex-wrap: wrap; }
.oben a { color: #fff; text-decoration: none; font-weight: 700; }
.oben .zeiten { opacity: .85; }
.oben__tel { display: flex; gap: 20px; }

/* 5.2 Kopfzeile: bleibt beim Scrollen oben, leicht durchscheinend */
.kopf { position: sticky; top: 0; z-index: 20;
        background: rgba(255,255,255,.88);
        -webkit-backdrop-filter: saturate(1.6) blur(12px); backdrop-filter: saturate(1.6) blur(12px);
        border-bottom: 1px solid rgba(16,26,71,.06); }
.kopf .huelle { display: flex; align-items: center; justify-content: space-between;
                gap: 24px; min-height: 92px; }
.kopf img { height: 74px; width: auto; }
.menue { display: flex; gap: 6px; font-size: 14px; font-weight: 600;
         letter-spacing: .06em; text-transform: uppercase; }
.menue a { color: var(--navy); text-decoration: none; padding: 10px 14px; border-radius: 999px;
           transition: background-color .15s, color .15s; }
.menue a:hover { background: var(--grau); }
.menue a[aria-current="page"] { color: var(--rot); background: var(--rot-hauch); }
.menue-knopf { display: none; }   /* nur auf dem Handy, siehe Abschnitt 6 */

/* 5.3 Einstieg */
.einstieg { position: relative; overflow: hidden; padding-bottom: 80px; background: #fff; }
/* Schlanke Welle als Markenzeichen; so bemessen, dass auf einem 13"-Notebook
   (rund 1440 × 720 sichtbar) die Google-Bewertung ohne Scrollen zu sehen ist */
.einstieg .schwung { height: 96px; }
.einstieg .huelle { position: relative; padding-top: 136px;
                    display: flex; gap: 64px; align-items: center; }
.einstieg .text { flex: 1 1 auto; max-width: 740px;
                  display: flex; flex-direction: column; gap: 18px; }
.einstieg h1 { font-size: 58px; line-height: 1; }
.einstieg p:not(.label)  { font-size: 19px; color: var(--text); max-width: 580px; }
.knoepfe { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
/* Bewertung als Abzeichen. "p.sterne", damit die Absatzregel des Einstiegs nicht greift */
.einstieg p.sterne { position: relative; overflow: hidden; align-self: flex-start;
                     display: inline-flex; align-items: center; gap: 12px; margin-top: 8px;
                     padding: 10px 18px 10px 14px; border-radius: 999px;
                     background: #fff; box-shadow: var(--schatten);
                     font-size: 16px; font-weight: 600; color: var(--navy); max-width: none; }
.sterne__reihe { display: flex; gap: 3px; }
.sterne__reihe svg { display: block; }
.sterne__text b { font-weight: 700; }
.zaehler { font-variant-numeric: tabular-nums; }
/* Illustration rechts im Einstieg (Reparatur) */
.einstieg__bild { flex: 0 1 500px; min-width: 0; width: 500px; margin: -20px -16px -40px 0; }

.fakten { flex: none; width: 370px; display: flex; flex-direction: column; gap: 14px; }
.fakt { display: flex; align-items: center; gap: 18px;
        background: #fff; border-radius: var(--radius-k); box-shadow: var(--schatten);
        padding: 20px 22px; }
.fakt div { display: flex; flex-direction: column; gap: 3px; }
.fakt b { font-family: "Barlow Condensed", Barlow, sans-serif;
          font-size: 30px; font-weight: 700; line-height: 1; color: var(--navy); }
.fakt div span { font-size: 15px; font-weight: 500; color: var(--leise); }

/* 5.4 Vitrine — einzige Stelle der Seite mit Verfallsdatum (Modellnamen)
   Bento-Raster: links eine hohe Karte fürs Hauptmodell, rechts zwei gestapelte.
   Die Karten sind weiss auf hellgrauem Grund, die Geräte stehen auf einem
   leichten Lichthof in Markenblau. */
.vitrine { background: var(--grau); padding: var(--abstand) 0; }
.vitrine__kopf { display: flex; align-items: flex-end; justify-content: space-between;
                 gap: 24px 48px; margin-bottom: 40px; flex-wrap: wrap; }
.vitrine__kopf > div { display: flex; flex-direction: column; gap: 10px; }
.vitrine__kopf h2 { font-size: 48px; }
.vitrine__kopf > p { max-width: 380px; font-size: 17px; color: var(--text); }

.modelle { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr 1fr; gap: 24px; }
.modell { position: relative; overflow: hidden;
          background: #fff; border-radius: 24px; box-shadow: var(--schatten);
          display: flex; align-items: center; gap: 16px; padding: 32px 32px 32px 36px;
          transition: transform .25s, box-shadow .25s; }
@media (hover: hover) {
  .modell:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
}
.modell__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.modell h3 { font-size: 34px; }
.modell__bild { flex: none; display: flex; align-items: center; justify-content: center;
                background: radial-gradient(closest-side, var(--blau-hauch) 0%, var(--blau-hauch) 55%, transparent 100%); }
.modell__bild img { width: auto; filter: drop-shadow(0 18px 24px rgba(16,26,71,.22)); }
.modell--pro .modell__bild { width: 220px; max-width: 55%; height: 220px; }
.modell--pro .modell__bild img { height: 210px; }
.modell--duo .modell__bild { width: 290px; max-width: 60%; height: 200px; }
.modell--duo .modell__bild img { width: 100%; max-width: 280px; height: auto; }

/* Hauptmodell: hohe, dunkle Karte. Titel oben links in Weiss, darunter das
   Querformat-Foto mit den vier Farben über die ganze Kartenbreite, unten
   bündig. Der Foto-Hintergrund ist schwarz wie die Karte, so geht es nahtlos
   in sie über. Handy: siehe Abschnitt 6. */
.modell--gross { grid-row: span 2; flex-direction: column; align-items: stretch;
                 justify-content: flex-start; gap: 0; min-height: 520px; padding: 44px 0 0;
                 background: #000; }
.modell--gross .modell__text { flex: none; position: relative; z-index: 1; padding: 0 44px; }
.modell--gross h3 { font-size: clamp(40px, 4.2vw, 56px); line-height: .98; color: #fff; }
.modell--gross .modell__bild { margin-top: auto; width: 100%; height: auto; display: block; background: none; }
.modell--gross .modell__bild img { display: block; width: 100%; height: auto; filter: none;
                                   transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
  .modell--gross:hover .modell__bild img { transform: scale(1.03); }
}

/* Kleines Schild "Im Schaufenster" */
.schild { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
          padding: 6px 12px; border-radius: 999px; background: var(--rot-hauch);
          font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
          color: var(--rot); }
.schild::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rot); }

/* 5.5 Allgemeiner Abschnitt: weiss und hellgrau wechseln sich ab */
.abschnitt { padding: var(--abstand) 0; }
.abschnitt--grau { background: var(--grau); }
.abschnitt__kopf { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; max-width: 760px; }
.abschnitt__kopf h2 { font-size: 48px; }
.abschnitt__kopf p:not(.label)  { font-size: 18px; color: var(--text); margin-top: 2px; }

/* 5.6 Zubehör */
.kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kachel { background: var(--grau); border-radius: var(--radius-k); padding: 26px;
          display: flex; flex-direction: column; gap: 10px; }
.kachel .icon { margin-bottom: 14px; background: #fff; }
.kachel b { font-family: "Barlow Condensed", Barlow, sans-serif;
            font-size: 25px; font-weight: 700; line-height: 1.1; }
.kachel span:not(.icon) { font-size: 16px; color: var(--leise); }
.kacheln--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Kachel mit Illustration statt Icon (Reparatur) */
.kachel__bild { width: 100%; height: auto; margin-bottom: 12px;
                border-radius: 12px; background: var(--blau-hauch); }
/* Kacheln auf grauem Grund werden weiss */
.abschnitt--grau .kachel { background: #fff; box-shadow: var(--schatten); }
.abschnitt--grau .kachel .icon { background: var(--blau-hauch); }

/* Hover: Kachel oder Gerätekarte hebt sich an, das Icon wird blau.
   Nur bei echter Maus, auf Touchgeräten bliebe der Zustand nach dem Tippen hängen. */
.kachel, .geraete .karte { transition: transform .25s, box-shadow .25s, background-color .25s; }
@media (hover: hover) {
  .kachel:hover, .geraete .karte:hover { transform: translateY(-4px); background: #fff; box-shadow: var(--schatten-hoch); }
  .kachel:hover .icon, .geraete .karte:hover .icon { background: var(--blau); color: #fff; }
}

/* 5.7 Geräte */
.geraete { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* 5.8 Flugtickets */
.tickets { position: relative; overflow: hidden; background: var(--blau);
           color: #fff; padding-bottom: 64px; }
.tickets .huelle { position: relative; padding-top: 148px;
                   display: flex; gap: 56px; align-items: flex-start; }
.tickets__text { flex: 1 1 auto; max-width: 620px;
                 display: flex; flex-direction: column; gap: 14px; }
.tickets h1,
.tickets h2 { font-size: 42px; line-height: 1.05; }
.tickets p:not(.label)  { font-size: 17px; color: var(--lichtblau); }
.tickets .label { color: #FFB3BC; }
.kasten { flex: none; width: 360px; border: 1px solid rgba(255,255,255,.28);
          background: rgba(255,255,255,.07);
          border-radius: var(--radius-k); padding: 28px;
          display: flex; flex-direction: column; gap: 14px; }
.kasten b { font-size: 16px; font-weight: 600; color: var(--lichtblau); }
.kasten small { font-size: 15px; color: var(--lichtblau); }
.kasten small a { color: #fff; font-weight: 700; text-decoration: none; }

/* Flugticket-Seite: Kasten unter dem Text, rechts die Illustration
   mit dem Stempel "seit 2001" (Startseiten-Band bleibt unverändert) */
.tickets--seite .huelle { align-items: center; }
.tickets--seite .kasten { align-self: flex-start; margin-top: 12px; }
.tickets__bild { position: relative; flex: 0 1 520px; min-width: 0; margin: -30px -20px -40px 0; }
.tickets__bild img { width: 100%; }
/* Rund wie ein Reiseaufkleber, leicht schräg */
/* "p.stempel", damit die Absatzregel von .tickets nicht greift */
.tickets p.stempel { position: absolute; left: 2%; top: 4%; transform: rotate(-10deg);
           width: 116px; height: 116px; border-radius: 50%;
           display: flex; flex-direction: column; align-items: center; justify-content: center;
           background: #fff; color: var(--navy); box-shadow: 0 12px 24px -12px rgba(10,16,48,.6);
           font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
           line-height: 1.1; text-align: center; }
.stempel::before { content: ""; position: absolute; inset: 7px; border-radius: 50%;
                   border: 2px dashed var(--rot); opacity: .7; }
.stempel span { font-size: 10px; letter-spacing: .16em; color: var(--leise); }
.stempel b { font-family: "Barlow Condensed", Barlow, sans-serif; font-size: 36px;
             letter-spacing: .02em; line-height: .95; color: var(--rot); }

/* 5.8b Formular: Karte links, Hinweise rechts */
.anfrage { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.anfrage__karte { background: #fff; border-radius: 24px; box-shadow: var(--schatten); padding: 40px; }
.hinweise { position: sticky; top: 116px; display: flex; flex-direction: column; gap: 22px;
            background: #fff; border-radius: 24px; box-shadow: var(--schatten); padding: 32px; }
.hinweise h3 { font-size: 26px; }
.hinweise li { display: flex; gap: 14px; align-items: flex-start; }
.hinweise li + li { margin-top: 18px; }
.hinweise li .icon { width: 40px; height: 40px; border-radius: 12px; }
.hinweise li .icon svg { width: 20px; height: 20px; }
.hinweise li b { display: block; font-size: 16px; }
.hinweise li span:not(.icon) { font-size: 15px; color: var(--leise); }
.hinweise__direkt { padding-top: 20px; border-top: 1px solid var(--kante);
                    display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--leise); }
.hinweise__direkt a { font-weight: 700; text-decoration: none; }

.formular { display: flex; flex-direction: column; gap: 20px; }
.formular[hidden] { display: none; }
.formular label { display: flex; flex-direction: column; gap: 8px;
                  font-size: 14px; font-weight: 600; color: var(--navy); }
.formular__zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Zwischentitel, gliedert das Formular in Kontakt / Reise / Details */
.formular__gruppe { font-family: "Barlow Condensed", Barlow, sans-serif; font-size: 22px; font-weight: 700;
                    padding-top: 22px; border-top: 1px solid var(--kante); }
.formular__gruppe:first-of-type { padding-top: 0; border-top: none; }
.formular input,
.formular textarea { border: 1px solid var(--linie); border-radius: var(--radius);
                      padding: 13px 15px; font: inherit; font-weight: 400; color: var(--navy);
                      background: var(--grau); transition: border-color .15s, box-shadow .15s, background-color .15s; }
.formular input:focus,
.formular textarea:focus { outline: none; border-color: var(--blau); background: #fff;
                           box-shadow: 0 0 0 4px rgba(27,46,158,.16); }
.formular textarea { resize: vertical; }
.formular .formular__kontrolle { flex-direction: row; align-items: center; gap: 10px;
                        font-weight: 500; }
.formular__kontrolle input { width: 20px; height: 20px; accent-color: var(--rot); }
.formular button { align-self: flex-start; }

/* Flughafen-Suche: Textfeld mit Vorschlagsliste darunter */
.flughafen-suche { position: relative; }
.flughafen-suche input { width: 100%; }
.flughafen-suche__liste {
  position: absolute; z-index: 10; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 260px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-k);
  box-shadow: 0 12px 28px -12px rgba(16,26,71,.35);
}
.flughafen-suche__liste li {
  padding: 8px 10px; border-radius: var(--radius); cursor: pointer;
  font-size: 14px; font-weight: 400; color: var(--navy); line-height: 1.35;
}
.flughafen-suche__liste li b { font-weight: 700; }
.flughafen-suche__liste li span { display: block; font-size: 12px; color: var(--leise); }
.flughafen-suche__liste li[aria-selected="true"],
.flughafen-suche__liste li:hover { background: var(--grau); }

/* Datumsfeld mit Kalender-Knopf: Textfeld bleibt frei bearbeitbar */
.datum-eingabe { position: relative; }
.datum-eingabe input[type="text"] { width: 100%; padding-right: 44px; }
.datum-eingabe__knopf {
  position: absolute; top: 0; right: 0; height: 100%; width: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--leise); cursor: pointer;
}
.datum-eingabe__knopf:hover { color: var(--blau); }
/* Das echte Datumsfeld liegt unsichtbar über dem Knopf. So trifft der Finger
   direkt das native Feld, was auf Handys (vor allem iOS) als Einziges
   zuverlässig den Kalender öffnet. showPicker() per Skript ginge dort nicht. */
.datum-eingabe__kalender {
  position: absolute; top: 0; right: 0; width: 44px; height: 100%;
  margin: 0; padding: 0; border: none; opacity: 0; cursor: pointer;
  font-size: 16px; /* verhindert Zoomen auf iOS */
}
.datum-eingabe__kalender::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; cursor: pointer;
}

/* Sperrt Spam-Bots aus, für Menschen unsichtbar (auch nicht per Tastatur erreichbar) */
.versteckt { position: absolute; left: -9999px; }

/* Meldung nach erfolgreichem Absenden, ersetzt das Formular */
.formular__erfolg { display: flex; align-items: center; gap: 16px; padding: 24px;
                     border-radius: var(--radius-k); background: var(--blau-hauch); }
.formular__erfolg[hidden] { display: none; }
.formular__erfolg p { margin: 0; font-size: 17px; color: var(--navy); font-weight: 600; }

/* Budget: ein Regler, davor eine eingefärbte Spur bis zum gewählten Wert */
.formular__budget { display: flex; flex-direction: column; gap: 14px; }
.formular__budget > span { font-size: 14px; font-weight: 600; color: var(--navy); }
.regler { position: relative; height: 24px; }
.regler__schiene { position: absolute; top: 50%; left: 0; right: 0; height: 4px;
                    margin-top: -2px; border-radius: 2px; background: var(--linie); }
.regler__spur { position: absolute; top: 50%; height: 4px; margin-top: -2px;
                border-radius: 2px; background: var(--rot); }
.regler input[type="range"] {
  position: absolute; top: 0; left: 0; width: 100%; height: 24px; margin: 0;
  background: none; border: none; padding: 0; pointer-events: none;
  -webkit-appearance: none; appearance: none;
}
.regler input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto; -webkit-appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--rot); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer;
}
.regler input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--rot); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer;
}
.regler input[type="range"]::-webkit-slider-runnable-track,
.regler input[type="range"]::-moz-range-track { background: none; border: none; }
#budget-anzeige { font-size: 15px; font-weight: 700; color: var(--navy); }

/* 5.9 Kontakt: zwei Karten links, Stadtplan rechts */
.kontakt__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.kontakt__spalte { display: flex; flex-direction: column; gap: 24px; }
.karte .kontaktliste { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px;
                       margin: 0; padding: 0; border: none; font-size: 16px; }
.kontaktliste li { display: flex; align-items: center; gap: 14px; }
.kontaktliste li div { display: flex; flex-direction: column; font-size: 16px; color: var(--text); }
.kontaktliste strong { font-size: 13px; font-weight: 700; letter-spacing: .08em;
                       text-transform: uppercase; color: var(--leise); }
.kontaktliste a { font-weight: 700; text-decoration: none; }
.kontaktliste .icon img { width: 24px; height: 24px; }
.karte__titel { display: flex; align-items: center; gap: 14px; }
.karte__titel h3 { font-size: 26px; }
.zeiten-liste { display: flex; flex-direction: column; }
.zeit { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0;
        font-size: 16px; color: var(--text); }
.zeit + .zeit { border-top: 1px solid var(--kante); }
.zeit b { color: var(--navy); }
.zeit--zu b { color: var(--leise); font-weight: 600; }
.karte-bild { display: flex; flex-direction: column; gap: 14px;
              background: #fff; border-radius: 24px; box-shadow: var(--schatten); padding: 14px 14px 18px; }
.karte-bild__karte { position: relative; display: block; overflow: hidden; border-radius: 14px; }
.karte-bild__karte img { width: 100%; }
.karte-bild .knopf { margin: 0 4px; }
.karte-bild small { padding: 0 6px; }
/* Spitze der Nadel sitzt genau auf dem Laden in der Bildmitte */
.karte-bild__nadel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%);
                     filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
.karte-bild small { font-size: 13px; color: var(--leise); }
.karte-bild small a { color: var(--leise); }

/* 5.10 Fuss: dunkler Abschluss in Navy */
.fuss { background: var(--navy); color: var(--lichtblau); font-size: 15px; }
.fuss__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-top: 64px; padding-bottom: 48px; }
.fuss__raster > div { display: flex; flex-direction: column; gap: 10px; }
.fuss__name { font-family: "Barlow Condensed", Barlow, sans-serif; font-size: 30px; font-weight: 700; color: #fff; }
.fuss__raster p { max-width: 320px; color: var(--gedaempft); }
.fuss strong { color: #fff; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.fuss a { color: var(--lichtblau); text-decoration: none; }
.fuss a:hover { color: #fff; }
.fuss__unten { position: relative; display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between;
               padding-top: 22px; padding-bottom: 22px;
               font-size: 14px; color: var(--gedaempft); }
/* Trennlinie nur so breit wie der Inhalt, nicht über den Seitenrand hinaus */
.fuss__unten::before { content: ""; position: absolute; top: 0; left: var(--rand); right: var(--rand);
                       border-top: 1px solid rgba(255,255,255,.1); }

/* 5.11 Unterseiten */
.zweispaltig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.karte .weiter { font-size: 16px; font-weight: 700; }

/* 5.12 Impressum und Datenschutz: schmale Textspalte, gut lesbar */
.rechtliches .huelle > * { max-width: 760px; }
.rechtliches h1 { font-size: 42px; margin: 8px 0 28px; }
.rechtliches h2 { font-size: 24px; margin: 32px 0 8px; }
.rechtliches p:not(.label) { color: var(--text); }
.rechtliches p + p { margin-top: 12px; }
.rechtliches .einleitung { font-size: 18px; }
.rechtliches .stand { margin-top: 40px; font-size: 15px; color: var(--leise); }
.fuss a[aria-current="page"] { color: #fff; font-weight: 700; }
.offen { background: var(--offen); padding: 0 4px; border-radius: 3px; }


/* 5.13 Schmale Desktops und Tablets quer (901 bis 1100px): Titel und
   Faktenkarten etwas kleiner, sonst bricht der Titel der Startseite neben
   den Karten in bis zu sechs Zeilen um */
@media (min-width: 901px) and (max-width: 1100px) {
  .einstieg .huelle { gap: 40px; }
  .einstieg h1 { font-size: 48px; }
  .fakten { width: 300px; }
  .fakt { padding: 16px 18px; gap: 14px; }
  .fakt b { font-size: 26px; }
}


/* 6 — Handy und Tablet (unter 900px) --------------------------------------- */

@media (max-width: 900px) {
  :root { --rand: 18px; --abstand: 48px; }
  body { font-size: 16px; }

  /* Kontaktleiste entfällt auf dem Handy: sie bräuchte drei Zeilen, und
     dieselben Angaben stehen vollständig im Abschnitt Kontakt. */
  .oben { display: none; }

  .kopf .huelle { min-height: 70px; }
  .kopf img { height: 56px; }

  /* Menü klappt auf, siehe js/menue.js. Die Kopfzeile bleibt dabei "sticky",
     das genügt als Bezugsrahmen für das absolut platzierte Menü. */
  .menue-knopf { display: inline-flex; align-items: center; justify-content: center;
                 width: 44px; height: 44px; background: #fff;
                 border: 1px solid var(--linie); border-radius: var(--radius); cursor: pointer; }
  .menue { position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
           flex-direction: column; gap: 0; background: #fff;
           border-bottom: 1px solid var(--linie); padding: 8px var(--rand) 16px;
           box-shadow: 0 18px 30px -18px rgba(16,26,71,.3); }
  .menue[hidden] { display: none; }
  .menue a { padding: 14px 0; border-radius: 0; border-bottom: 1px solid var(--kante); font-size: 15px; }
  .menue a:hover,
  .menue a[aria-current="page"] { background: none; }

  .einstieg { padding-bottom: 44px; }
  .einstieg .huelle { flex-direction: column; align-items: stretch; padding-top: 92px; gap: 28px; }
  .einstieg .schwung { height: 64px; }
  .tickets .schwung  { height: 70px; }
  .einstieg .text { max-width: none; }
  .einstieg__bild { flex: none; width: 100%; max-width: 380px; margin: 0 auto -16px; }
  .einstieg h1 { font-size: 38px; }
  .einstieg p:not(.label)  { font-size: 16px; }
  .knoepfe { flex-direction: column; align-items: stretch; }
  /* Auf dem Handy folgt der Knopf direkt auf die rote Welle; blau wirkt das
     weniger erdrückend. Gilt für Startseite und Reparatur (beide .einstieg) */
  .einstieg .knopf--rot { background: var(--blau); box-shadow: 0 8px 20px -10px rgba(27,46,158,.6); }
  .knoepfe .knopf { width: 100%; }
  .nur-desktop { display: none; }
  .fakten { width: 100%; gap: 10px; }
  .fakt { padding: 14px 16px; gap: 14px; }
  .fakt b { font-size: 24px; }
  .fakt .icon { width: 42px; height: 42px; }

  /* Vitrine: Karten untereinander, Bild jeweils rechts neben dem Namen */
  .vitrine__kopf { margin-bottom: 22px; }
  .vitrine__kopf h2 { font-size: 32px; }
  .vitrine__kopf > p { font-size: 16px; }
  .modelle { grid-template-columns: 1fr; grid-template-rows: none; gap: 14px; }
  .modell { padding: 18px 16px 18px 20px; border-radius: 20px; }
  .modell h3 { font-size: 24px; }
  .modell--pro .modell__bild { width: 130px; height: 140px; }
  .modell--pro .modell__bild img { height: 132px; }
  .modell--duo { flex-direction: column; align-items: stretch; }
  .modell--duo .modell__bild { width: 100%; max-width: none; height: 150px; }
  .modell--duo .modell__bild img { width: 250px; }
  .modell--gross { grid-row: auto; min-height: 0; padding: 24px 0 0; }
  .modell--gross .modell__text { padding: 0 20px; }
  .modell--gross h3 { font-size: 40px; }
  .modell--gross .modell__bild { margin-top: 16px; }

  .abschnitt__kopf { margin-bottom: 24px; }
  .abschnitt__kopf h2 { font-size: 32px; }
  .abschnitt__kopf p:not(.label)  { font-size: 16px; }

  .kacheln { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kachel { padding: 16px; gap: 6px; }
  .kachel .icon { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 8px; }
  .kachel .icon svg { width: 20px; height: 20px; }
  .kachel b { font-size: 20px; }
  .kachel span:not(.icon) { font-size: 14px; }
  .kacheln--drei { grid-template-columns: 1fr; }
  .kachel__bild { margin-bottom: 6px; border-radius: 10px; }

  .geraete { grid-template-columns: 1fr; gap: 14px; }
  .karte { padding: 22px 20px; gap: 12px; }
  .karte h2,
  .karte h3 { font-size: 24px; }
  .karte p  { font-size: 15px; }
  .zweispaltig { grid-template-columns: 1fr; gap: 14px; }
  .karte--eng { max-width: none; }
  .rechtliches h1 { font-size: 30px; margin-bottom: 20px; }
  .rechtliches h2 { font-size: 20px; margin-top: 26px; }
  .rechtliches .einleitung { font-size: 16px; }

  .tickets { padding-bottom: 36px; }
  .tickets .huelle { flex-direction: column; padding-top: 84px; gap: 20px; }
  .tickets h1,
  .tickets h2 { font-size: 30px; }
  .tickets__text { max-width: none; }
  .kasten { width: 100%; padding: 22px; }
  .tickets__bild { flex: none; width: 100%; max-width: 400px; margin: 4px auto -12px; }
  .tickets p.stempel { width: 92px; height: 92px; font-size: 10px; }
  .stempel span { font-size: 8px; }
  .stempel b { font-size: 28px; }

  .anfrage { grid-template-columns: 1fr; gap: 16px; }
  .anfrage__karte { padding: 22px 18px; border-radius: 20px; }
  .hinweise { position: static; padding: 22px 20px; border-radius: 20px; }
  .formular__zeile { grid-template-columns: 1fr; gap: 16px; }
  .formular button { align-self: stretch; }

  .kontakt__raster { grid-template-columns: 1fr; gap: 16px; }
  .kontakt__spalte { gap: 16px; }
  .karte .kontaktliste { grid-template-columns: 1fr; gap: 16px; }
  .karte-bild .knopf { margin: 0; }

  .fuss__raster { grid-template-columns: 1fr; gap: 28px; padding-top: 44px; padding-bottom: 32px; }
}

/* 7 — Starteffekt (nur Startseite) ---------------------------------------------
   Der Einstieg baut sich beim Laden nacheinander auf, danach ploppen die fünf
   Sterne einzeln auf und ein Glanz läuft über das Abzeichen. Die Zahl zählt
   dazu in js/start.js hoch. Nur wenn Bewegung erwünscht ist; sonst steht
   alles sofort da. Ohne Animationsunterstützung ist der Inhalt normal sichtbar. */

@media (prefers-reduced-motion: no-preference) {
  .einstieg .text > *,
  .einstieg .fakt { animation: aufsteigen .8s cubic-bezier(.2, .7, .2, 1) both; }
  .einstieg .text > :nth-child(1) { animation-delay: .05s; }
  .einstieg .text > :nth-child(2) { animation-delay: .15s; }
  .einstieg .text > :nth-child(3) { animation-delay: .25s; }
  .einstieg .text > :nth-child(4) { animation-delay: .35s; }
  .einstieg .text > :nth-child(5) { animation-delay: .45s; }
  .einstieg .fakt:nth-child(1) { animation-delay: .35s; }
  .einstieg .fakt:nth-child(2) { animation-delay: .47s; }
  .einstieg .fakt:nth-child(3) { animation-delay: .59s; }

  .sterne__reihe svg { animation: stern-auf .55s cubic-bezier(.3, 1.6, .5, 1) both; }
  .sterne__reihe svg:nth-child(1) { animation-delay: .9s; }
  .sterne__reihe svg:nth-child(2) { animation-delay: 1.02s; }
  .sterne__reihe svg:nth-child(3) { animation-delay: 1.14s; }
  .sterne__reihe svg:nth-child(4) { animation-delay: 1.26s; }
  .sterne__reihe svg:nth-child(5) { animation-delay: 1.38s; }

  .einstieg p.sterne::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.85) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: glanz 1.1s ease-in-out 2s both;
  }
  /* Zweite Animation: kurzer roter Puls, sobald alle Sterne da sind */
  .einstieg .text > p.sterne { animation-name: aufsteigen, puls; animation-duration: .8s, .6s;
                       animation-delay: .45s, 1.9s; animation-timing-function: cubic-bezier(.2, .7, .2, 1), ease-out; }
}

@keyframes aufsteigen {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes stern-auf {
  0%   { opacity: 0; transform: scale(0) rotate(-60deg); }
  70%  { opacity: 1; transform: scale(1.35) rotate(10deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes glanz {
  to { transform: translateX(120%); }
}
@keyframes puls {
  0%   { box-shadow: var(--schatten), 0 0 0 0 rgba(208,16,39,.35); }
  100% { box-shadow: var(--schatten), 0 0 0 14px rgba(208,16,39,0); }
}

/* Wer Animationen abgeschaltet hat, bekommt keine */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kachel, .karte, .modell, .knopf { transition: none; }
  .kachel:hover, .karte:hover, .modell:hover, .knopf:hover { transform: none; }
}