/* ---------------------------------------------------------------------------
   mein.ETI - zentrale Gestaltung
   Mobile first: die Grundregeln gelten fuer kleine Geraete, groessere Breiten
   kommen ueber Media Queries dazu. Farben und Abstaende stehen als Variablen
   ganz oben - Aenderungen am Erscheinungsbild moeglichst nur dort.
   --------------------------------------------------------------------------- */

:root {
    /* Farben aus dem ETI-Logo */
    --navy:          #1B3A6B;
    --navy-dunkel:   #142C51;
    /* Navy stark aufgehellt - ruhige Flaechen, die zum aktiven Navy passen
       (Reiter der Buchungsseite). */
    --navy-hell:       #E7EEF7;
    --navy-hell-hover: #DBE6F3;
    --orange:        #ED6909;
    --orange-dunkel: #C85607;
    --blau:          #94D1E9;
    --blau-dunkel:   #2F7C9B;

    --text:        #1F2933;
    --text-leise:  #5B6772;
    --linie:       #E1E7EC;
    --flaeche:     #FFFFFF;
    --grund:       #F2F5F8;
    --seite:       #DDE5EC;
    --fuss-linie:  #3F6DA6;   /* Mittelblau, Trennstriche im Fuss */
    --fehler:      #B3261E;
    --fehler-hell: #FDECEA;
    --ok:          #1B5E20;
    --ok-hell:     #EAF4EB;

    --ueberschrift: 1.2rem;   /* eine Groesse fuer alle Ueberschriften */

    --radius:      12px;
    --radius-klein: 8px;
    --schatten:    0 1px 2px rgba(20, 44, 81, .06), 0 4px 16px rgba(20, 44, 81, .06);
    --breite:      72rem;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--seite);
    color: var(--text);
    font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
}

.innen {
    width: 100%;
    max-width: var(--breite);
    margin: 0 auto;
    padding: 0 1rem;
}

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

a { color: var(--blau-dunkel); }
a:hover { color: var(--navy); }

:focus-visible { outline: 3px solid var(--blau-dunkel); outline-offset: 2px; }

/* Sprungmarke fuer Tastaturbedienung ---------------------------------- */

.sprung {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--navy);
    color: #fff;
    padding: .75rem 1rem;
    z-index: 100;
}
.sprung:focus { left: 0; }

/* Rahmen: die Seite steht als abgesetzte Flaeche in der Mitte ---------- */

.rahmen {
    background: var(--flaeche);
    min-height: 100vh;
}

/* Kopf ---------------------------------------------------------------- */

/* Der Kopf scrollt mit der Seite weg - er bleibt bewusst nicht stehen,
   sonst schiebt er sich beim Scrollen ueber das Bildband. */
.kopf {
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.kopf-inhalt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Umbrechen duerfen: Das aufgeklappte Menue stellt sich als dritte Zeile
       unter Logo und Knopf, statt die beiden zusammenzuquetschen. */
    flex-wrap: wrap;
    gap: 1rem;
    /* Innenabstand statt fester Hoehe: das Logo bekommt oben und unten Luft */
    padding-top: .8rem;
    padding-bottom: .8rem;
}

/* Logo und Schriftzug stehen unten buendig: Die Unterkante des Logos und
   die Grundlinie von "Mein.ETI.de" liegen auf einer Hoehe. Deshalb
   flex-end und nicht center - und deshalb hat .marke-text unten keinen
   Zeilendurchschuss (line-height: 1), sonst schoebe der die Schrift hoch. */
.marke {
    display: flex;
    align-items: flex-end;
    /* Auf schmalen Geraeten enger, damit der Menueknopf daneben passt und
       der Kopf eine Zeile bleibt. Ab 48rem wieder die vollen 1.75rem -
       siehe Media Query weiter unten. */
    gap: .9rem;
    text-decoration: none;
    color: var(--navy);
    flex: 0 0 auto;
}

.marke img { width: 50px; height: 50px; display: block; }

.marke-text {
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
}

/* Die Endung steht bewusst leichter und kursiv daneben. */
.marke-text em {
    font-weight: 400;
    font-style: italic;
    font-size: .72em;
    letter-spacing: .01em;
}

/* Hauptnavigation ------------------------------------------------------
   Mobile first: Auf schmalen Geraeten ist das Menue zugeklappt und oeffnet
   sich als Liste unter dem Kopf. Ab 48rem steht es wieder in einer Zeile,
   der Knopf verschwindet - siehe Media Query weiter unten.

   Vorher lag die Leiste waagerecht und scrollte. Auf dem Telefon war sie
   damit praktisch unbedienbar: Die Punkte rechts standen ausserhalb des
   Bildschirms, und dass man dort seitlich wischen kann, sieht man nicht.

   Geschaltet wird mit einem Kaestchen statt mit <details>: Ein <details>
   laesst sich per CSS nicht dauerhaft offen halten, der Browser haengt den
   Inhalt aus dem Baum statt ihn nur auszublenden. Auf breiten Bildschirmen
   bliebe das Menue dann zu. */

/* Das Kaestchen bleibt bedienbar, ist aber nicht zu sehen - deshalb nicht
   'display: none': damit waere es auch fuer die Tabulatortaste weg. */
.navi-schalter {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.navi-knopf {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .8rem;
    border-radius: var(--radius-klein);
    background: var(--navy-hell);
    color: var(--navy);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.navi-knopf:hover { background: var(--navy-hell-hover); }

/* Tastaturbedienung sichtbar machen: Das Kaestchen selbst sieht man nicht,
   also bekommt seine Beschriftung den Rahmen. */
.navi-schalter:focus-visible + .navi-knopf {
    outline: 3px solid var(--blau-dunkel);
    outline-offset: 2px;
}

.navi {
    display: none;
    flex-direction: column;
    gap: .15rem;
    /* Ueber die volle Breite unter den Kopf, nicht in die Zeile gequetscht */
    flex-basis: 100%;
    margin: .6rem -1rem 0;
    padding: .6rem 1rem .2rem;
    border-top: 1px solid var(--linie);
}

.navi-schalter:checked ~ .navi { display: flex; }

.navi a {
    display: flex;
    align-items: center;
    gap: .6rem;
    white-space: nowrap;
    padding: .6rem .7rem;
    border-radius: var(--radius-klein);
    color: var(--text-leise);
    text-decoration: none;
    font-size: .95rem;
}

.navi a .icon { flex: 0 0 auto; opacity: .6; }
.navi a:hover { background: var(--navy-hell); color: var(--navy); }
.navi a:hover .icon { opacity: .85; }

.navi a[aria-current="page"] {
    color: var(--navy);
    font-weight: 600;
    background: var(--navy-hell);
}
.navi a[aria-current="page"] .icon { opacity: 1; color: var(--orange); }

.navi .abmelden { color: var(--orange); }
.navi .abmelden .icon { opacity: .8; }
.navi .abmelden:hover { color: var(--orange-dunkel); background: #FDEEE1; }

/* Bildband mit Seitentitel -------------------------------------------- */

.band {
    position: relative;
    background: var(--navy) center/cover no-repeat;
    min-height: 8.5rem;
    display: flex;
    align-items: flex-end;
}

/* Bilder der Baender und Kacheln stehen hier und nicht als Inline-Stil im
   HTML - die Content-Security-Policy laesst keine Inline-Stile zu.

   Das "?v=" hinter jedem Dateinamen ist die Sperre gegen den Browsercache.
   Die app.css selbst traegt schon eine Versionsnummer (View::version, aus
   dem Aenderungsdatum) und kommt nach einem Deployment frisch an - das Bild
   dahinter aber nicht: Der Dateiname bleibt gleich, also nimmt der Browser
   weiter seine alte Fassung. WER EIN MOTIV AUSTAUSCHT, ZAEHLT DIE ZAHL
   HINTER DIESER DATEI UM EINS HOCH. Sonst sieht der Kunde monatelang das
   alte Bild und niemand versteht, warum. */
.band-start     { background-image: url("/assets/img/hero-start.jpg?v=1"); }
.band-buchung   { background-image: url("/assets/img/hero-buchung.jpg?v=1"); }
.band-hotel     { background-image: url("/assets/img/hero-hotel.jpg?v=1"); }
.band-flug      { background-image: url("/assets/img/hero-flug.jpg?v=2"); }
.band-ausfluege { background-image: url("/assets/img/hero-ausfluege.jpg?v=1"); }
.band-faq       { background-image: url("/assets/img/hero-faq.jpg?v=1"); }
.band-profil    { background-image: url("/assets/img/hero-profil.jpg?v=1"); }
.band-kontakt   { background-image: url("/assets/img/hero-kontakt.jpg?v=1"); }

/* Zahlung und Dokumente haben noch kein eigenes Motiv. Die Regeln stehen
   trotzdem schon da; ob sie ueberhaupt gesetzt werden, entscheidet
   View::bandMotiv() anhand der Datei. Liegt sie nicht im Verzeichnis, kommt
   erst gar nicht diese Klasse an das Band, sondern die der Reiseart - kein
   leeres Navy, kein vergeblicher Abruf. Datei hinlegen genuegt. */
.band-zahlung   { background-image: url("/assets/img/hero-zahlung.jpg?v=1"); }
.band-dokumente { background-image: url("/assets/img/hero-dokumente.jpg?v=1"); }

.band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20, 44, 81, .78) 0%, rgba(20, 44, 81, .15) 60%, rgba(20, 44, 81, 0) 100%);
}

.band .innen { position: relative; z-index: 1; padding-bottom: 1rem; padding-top: 2rem; }

.band h1 {
    color: #fff;
    margin: 0;
    font-size: 1.5rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.band p {
    color: rgba(255, 255, 255, .92);
    margin: .25rem 0 0;
    font-size: .95rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* Inhalt -------------------------------------------------------------- */

main { padding: 1.5rem 0 3rem; background: var(--grund); }

/* Eine Groesse fuer alle Ueberschriften im Inhalt (--ueberschrift).
   Ausgenommen sind nur die grossen Titel im Bildband und auf der
   Anmeldeseite sowie Zwischenueberschriften innerhalb eines Fliesstextes. */
h1, h2, h3 {
    font-size: var(--ueberschrift);
    margin: 0 0 .75rem;
    color: var(--navy);
    letter-spacing: -.01em;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.klein  { font-size: .875rem; color: var(--text-leise); }
.gross  { font-size: 1.25rem; font-weight: 600; }
.hinweis { color: var(--text-leise); }
.schrittzahl {
    font-size: .75rem; letter-spacing: .02em;
    color: var(--orange); font-weight: 700; margin-bottom: .35rem;
}

.karte {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1.25rem;
    margin: 0 0 1rem;
}

/* Ueberschrift einer Karte: mehr Luft nach unten und ein oranger Strich,
   wie im Fuss. Gilt nur fuer die direkte Ueberschrift der Karte - nicht fuer
   die im Buchungskopf, der schon eine eigene Trennlinie hat. */
.karte > h2,
.karte > h3,
.platzhalter > h3 {
    position: relative;
    padding-bottom: .55rem;
    margin-bottom: 1.4rem;
}

.karte > h2::after,
.karte > h3::after,
.platzhalter > h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2.5rem;
    height: 2px;
    background: var(--orange);
    border-radius: 2px;
}

.karte-schmal { max-width: 30rem; margin-left: auto; margin-right: auto; }

.platzhalter {
    border: 1px dashed var(--linie);
    border-radius: var(--radius);
    background: var(--flaeche);
    padding: 1.25rem;
    color: var(--text-leise);
}

/* Hinweis in der Servicecenter-Ansicht -------------------------------- */

.service-hinweis {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #FFF4E6;
    border: 1px solid var(--orange);
    color: #7A3B02;
    border-radius: var(--radius-klein);
    padding: .7rem 1rem;
    font-size: .9rem;
    margin-bottom: 1rem;
}

/* Meldungen ----------------------------------------------------------- */

.meldung {
    border-radius: var(--radius-klein);
    padding: .8rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    font-size: .95rem;
}

.meldung p { margin: 0 0 .6rem; }
.meldung p:last-child { margin-bottom: 0; }

.meldung-fehler  { background: var(--fehler-hell); border-color: var(--fehler); color: var(--fehler); }
.meldung-hinweis { background: var(--ok-hell);     border-color: var(--ok);     color: var(--ok); }

/* Anmeldeseite -------------------------------------------------------- */

.anmelde-flaeche {
    display: grid;
    gap: 1.5rem;
    align-items: center;
}

.anmelde-text h1 { font-size: 1.75rem; }

.anmelde-vorteile {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: .6rem;
}

.anmelde-vorteile li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    color: var(--text-leise);
}

.anmelde-vorteile li::before {
    content: "";
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .18rem;
    border-radius: 50%;
    background: var(--orange);
    -webkit-mask: no-repeat center/0.7rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            mask: no-repeat center/0.7rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Formulare ----------------------------------------------------------- */

label {
    display: block;
    margin: 1rem 0 .3rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--navy);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: .75rem .8rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text);
    background: #fff;
    border: 1px solid #C9D3DC;
    border-radius: var(--radius-klein);
}

textarea { min-height: 8rem; resize: vertical; }

input:focus, textarea:focus, select:focus {
    border-color: var(--blau-dunkel);
    outline: 3px solid rgba(47, 124, 155, .25);
    outline-offset: 0;
}

.paar { display: grid; gap: 0 1rem; }

.wahl {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-weight: 400;
    color: var(--text);
    margin-top: 1rem;
}

.wahl input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }

/* Erklaerung unter einem Eingabefeld - haengt am Feld, nicht als eigener
   Absatz mit vollem Abstand darunter. */
.feld-hinweis { margin: .35rem 0 0; }

/* EINE Groesse fuer alle Knoepfe der Anwendung - Formulare wie Verweise,
   die wie ein Knopf aussehen (.knopf). Es gibt bewusst keine zweite,
   kleinere Ausfuehrung: Wo ein zweiter Knopf danebensteht, unterscheidet
   ihn die Farbe (.knopf-zweit), nicht die Groesse.

   Rund 2,5 rem hoch. Die frueheren 3,3 rem waren fuer eine Seite gedacht,
   auf der ein einzelner Knopf steht; auf dem Reiter "Teilnehmer" stehen
   drei, und da wirkten sie wie Werbebanner.

   Fuer die Fingerbedienung wird weiter unten wieder aufgepolstert - dort
   gelten 2,75 rem (44 px), die uebliche Mindestgroesse einer Trefferflaeche. */
button,
.knopf {
    display: inline-block;
    margin-top: 1rem;
    padding: .55rem 1.15rem;
    font-size: .9rem;
    /* Ausdruecklich gesetzt: <button> erbt die Zeilenhoehe des Textes nicht,
       ein <a class="knopf"> schon - ohne diese Zeile waren die beiden
       nebeneinander unterschiedlich hoch. */
    line-height: 1.25;
    font-family: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--orange);
    border: 0;
    border-radius: var(--radius-klein);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

/* Maus und Stift treffen genau, ein Finger nicht. Wo mit dem Finger bedient
   wird, bekommt jeder Knopf wieder die volle Trefferflaeche. */
@media (pointer: coarse) {
    button,
    .knopf {
        min-height: 2.75rem;
        padding: .65rem 1.25rem;
        font-size: .95rem;
    }
}

button:hover, .knopf:hover { background: var(--orange-dunkel); color: #fff; }

.knopf-zweit {
    background: transparent;
    color: var(--navy);
    border: 1px solid #C9D3DC;
}
.knopf-zweit:hover { background: var(--grund); color: var(--navy); }

/* Der Knopf, hinter dem etwas Unwiderrufliches liegt. Orange ist die Farbe
   der gewoehnlichen Handlung - was nicht zurueckzuholen ist, soll auch nicht
   so aussehen. Nur im Servicebereich in Gebrauch, hinter einer Rueckfrage. */
.knopf-gefahr { background: var(--fehler); }
.knopf-gefahr:hover { background: #8E1D17; color: #fff; }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.abstand-oben { margin-top: 1.25rem; }

/* Abschnittsueberschrift mit orangem Akzent --------------------------- */

.abschnitt {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: var(--ueberschrift);
    letter-spacing: .01em;
    margin: 2rem 0 1rem;
}

.abschnitt:first-child { margin-top: 0; }

.abschnitt::before {
    content: "";
    width: 1.6rem;
    height: 3px;
    border-radius: 3px;
    background: var(--orange);
    flex: 0 0 auto;
}

/* Reiseliste ---------------------------------------------------------- */

.liste { display: grid; gap: 1rem; margin-bottom: 2rem; }

.kachel {
    display: grid;
    gap: .2rem;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
}

.kachel {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.kachel:hover {
    border-color: var(--blau-dunkel);
    transform: translateY(-3px);
    box-shadow: 0 3px 8px rgba(20, 44, 81, .10), 0 16px 32px rgba(20, 44, 81, .16);
}

/* Rahmen fuer den Zoom des Bildes */
.kachel-rahmen {
    position: relative;
    display: block;
    overflow: hidden;
}

.kachel-bild { transition: transform .35s ease; }
.kachel:hover .kachel-bild { transform: scale(1.06); }

/* Leiste im Bild: Reiseart links, Zaehler rechts - bricht bei schmalen
   Kacheln um, statt sich zu ueberlappen. */
.kachel-chips {
    position: absolute;
    left: .6rem;
    right: .6rem;
    bottom: .6rem;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: space-between;
    align-items: flex-end;
}

.kachel-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(255, 255, 255, .93);
    color: var(--navy);
    font-size: .8rem;
    font-weight: 600;
    padding: .25rem .7rem;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(20, 44, 81, .18);
}

.kachel-chip { font-size: .75rem; }
.kachel-chip .icon { width: .85rem; height: .85rem; min-width: .85rem; }

.kachel-chip-zaehler {
    background: var(--orange);
    color: #fff;
    letter-spacing: .02em;
    font-size: .68rem;
    font-weight: 700;
    padding: .25rem .7rem;
    box-shadow: 0 2px 6px rgba(20, 44, 81, .28);
}


.kachel-chip-alt {
    background: rgba(27, 58, 107, .88);
    color: #fff;
    letter-spacing: .02em;
    font-size: .7rem;
}

.kachel-bild {
    display: block;
    height: 7.5rem;
    background: var(--navy) center/cover no-repeat;
}

/* Motive der Reisekacheln. Die Zuteilung macht Vorgang::kachelMotive() -
   zwei Kacheln auf einer Seite zeigen nie dasselbe Bild. Ein weiteres Motiv
   heisst: Datei ablegen, eine Zeile hier ergaenzen, MOTIVE in Vorgang.php
   hochsetzen. */
.kachel-bild-motiv-1 { background-image: url("/assets/img/kachel-motiv-1.jpg?v=1"); }
.kachel-bild-motiv-2 { background-image: url("/assets/img/kachel-motiv-2.jpg?v=1"); }
.kachel-bild-motiv-3 { background-image: url("/assets/img/kachel-motiv-3.jpg?v=1"); }
.kachel-bild-motiv-4 { background-image: url("/assets/img/kachel-motiv-4.jpg?v=1"); }
.kachel-bild-motiv-5 { background-image: url("/assets/img/kachel-motiv-5.jpg?v=1"); }
.kachel-bild-motiv-6 { background-image: url("/assets/img/kachel-motiv-6.jpg?v=1"); }
.kachel-bild-motiv-7 { background-image: url("/assets/img/kachel-motiv-7.jpg?v=1"); }

/* Nur-Flug behaelt das Flugzeug. Die beiden uebrigen bleiben als Rueckfall,
   falls einmal ohne Zuteilung gerendert wird. */
.kachel-bild-flug    { background-image: url("/assets/img/kachel-flug.jpg?v=1"); }
.kachel-bild-buchung { background-image: url("/assets/img/kachel-buchung.jpg?v=1"); }
.kachel-bild-hotel   { background-image: url("/assets/img/kachel-hotel.jpg?v=1"); }

.kachel-inhalt { padding: .8rem 1rem 1rem; display: grid; gap: .15rem; }

.kachel-kopf { font-size: 1.05rem; font-weight: 700; color: var(--navy); letter-spacing: -.01em; }
.kachel-art, .kachel-nr { font-size: .8rem; color: var(--text-leise); }
.kachel-mehr { font-size: .85rem; color: var(--orange); font-weight: 600; margin-top: .3rem; }

.kachel-alt .kachel-bild { filter: saturate(.5); }

/* Stornierte Buchung: sichtbar, aber deutlich zurueckgenommen. Das Bild
   fast entfaerbt - eine bunte Strandkachel zu einer stornierten Reise
   sieht aus wie ein Fehler. */
.kachel-storno .kachel-bild { filter: saturate(.12) brightness(.95); }

.kachel-chip-storno {
    background: rgba(31, 41, 51, .88);
    color: #fff;
    letter-spacing: .02em;
    font-size: .7rem;
}

/* Hinweisband oben auf der Reiseseite, wenn die Buchung storniert ist. */
.reise-storno {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0 0 1rem;
    padding: .8rem 1rem;
    background: var(--grund);
    border-left: 3px solid var(--text-leise);
    border-radius: var(--radius-klein);
    color: var(--text);
}

.reise-storno strong { color: var(--navy); }

.marke-alt {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--text-leise);
    background: var(--grund);
    border-radius: 999px;
    padding: .1rem .6rem;
    width: fit-content;
}

/* Reiter (Meine Reise) ------------------------------------------------- */

/* Die Reiterleiste UMBRICHT, sie scrollt nicht.

   Bis zum 14.09.2026 stand sie in einer Zeile mit overflow-x: auto. Auf dem
   Telefon war das derselbe Fehler wie beim Hauptmenue: Von acht Reitern
   waren drei zu sehen, die uebrigen standen ausserhalb des Bildschirms -
   und dass man dort seitlich wischen kann, sieht niemand.

   Umbrechen kostet zwei Zeilen Hoehe (141 statt 47 Pixel bei 430 px
   Breite). Das ist der Preis dafuer, dass jeder Reiter sichtbar und mit
   EINEM Antippen erreichbar ist. Ein aufklappbares Menue wie in der
   Hauptnavigation waere kuerzer, braeuchte aber zwei Antipper je Wechsel -
   und die Reiter sind das, was man auf dieser Seite staendig wechselt.

   Auf breiten Bildschirmen aendert die Regel nichts: Dort passt alles in
   eine Zeile, und was passt, bricht nicht um. */
.reiter { display: flex; flex-wrap: wrap; }
/* Mobile first: enge Pillen, damit die Leiste beim Umbrechen nicht zu hoch
   wird. Ab 48rem wieder die vollen Masse - siehe Media Query weiter unten. */
.reiter a { display: inline-flex; align-items: center; gap: .4rem;
    white-space: nowrap; text-decoration: none; font-size: .9rem; }
.reiter .icon { flex: 0 0 auto; }

.reiter { gap: .35rem; margin: 0 0 1.25rem; padding-bottom: .2rem; }
.reiter a { padding: .45rem .7rem; border-radius: var(--radius); color: var(--navy);
    background: var(--navy-hell); border: 1px solid transparent; }
.reiter a .icon { opacity: .65; }
.reiter a:hover { background: var(--navy-hell-hover); }
.reiter a:hover .icon { opacity: .9; }
.reiter a[aria-current="page"] { background: var(--navy); border-color: var(--navy);
    color: #fff; font-weight: 600; }
.reiter a[aria-current="page"] .icon { opacity: 1; }


/* Kopf der Buchungsseite ---------------------------------------------- */

.reise-kopf {
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--orange);
}

.reise-kopf h2 {
    margin: 0;
    line-height: 1.3;
}

.reise-kopf-ort {
    margin: .2rem 0 0;
    font-size: .95rem;
    color: var(--text-leise);
}

/* steht der Untertitel direkt in der Karte, braucht er Abstand nach unten */
.karte > .reise-kopf-ort { margin-bottom: .9rem; }

.reise-kopf-zeitraum {
    margin: .5rem 0 0;
    color: var(--orange);
    font-weight: 600;
}

.sterne {
    display: inline-block;
    margin-left: .35rem;
    color: var(--orange);
    font-size: .95rem;
    letter-spacing: .05em;
    vertical-align: .1em;
    white-space: nowrap;
}

.sterne-plus { font-weight: 700; }

/* zwei Spalten innerhalb einer Karte */
.reise-spalten { display: grid; gap: 1.25rem 2rem; }

/* Der fruehere eigene Flugblock der Buchungsseite (.flug-block,
   .flug-teil, .flug-nummer, .flug-datum) ist am 11.09.2026 entfallen:
   Beide Reiter zeigen die Strecken jetzt ueber denselben Baustein
   (_flugstrecken.php) und damit ueber die Regeln unter "Reiter Flug". */

/* Hotelbilder und Hotelbeschreibung (Giata) --------------------------- */

.galerie {
    display: flex;
    gap: .6rem;
    margin: 1.25rem 0 .4rem;
    padding-bottom: .5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.galerie-vorschau {
    flex: 0 0 auto;
    display: block;
    border-radius: var(--radius-klein);
    overflow: hidden;
    scroll-snap-align: start;
    line-height: 0;
}

.galerie img {
    width: 16rem;
    height: 10.5rem;
    object-fit: cover;
    background: var(--grund);
    transition: transform .3s ease;
}

.galerie-vorschau:hover img { transform: scale(1.05); }

.galerie-hinweis { margin: 0 0 .8rem; }

/* Grossansicht: kommt ohne JavaScript aus - der Anker im Verweis schaltet
   die Ebene ueber :target sichtbar. */

.lupe { display: none; }

.lupe:target {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 60;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(20, 44, 81, .93);
}

/* liegt hinter dem Bild und schliesst beim Klick daneben */
.lupe-grund { position: absolute; inset: 0; }

.lupe-inhalt {
    position: relative;
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
}

.lupe-inhalt img {
    max-width: 100%;
    max-height: calc(100vh - 6rem);
    width: auto;
    border-radius: var(--radius-klein);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}

.lupe-inhalt figcaption {
    color: rgba(255, 255, 255, .85);
    font-size: .875rem;
}

.lupe-knopf {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    text-decoration: none;
}

.lupe-knopf:hover { background: var(--orange); color: #fff; }

.lupe-zu     { top: 1rem; right: 1rem; }
.lupe-vor    { top: 50%; left: 1rem;  transform: translateY(-50%); }
.lupe-weiter { top: 50%; right: 1rem; transform: translateY(-50%); }

/* Fremdtext -----------------------------------------------------------
   Ein Textkoerper, den nicht wir schreiben, sondern Giata oder das
   Marketing in der Pflegemaske. Alle sehen gleich aus - eine Regel fuer
   alle, stuenden sie getrennt, liefen sie frueher oder spaeter auseinander
   (genau das war am 10.09.2026 der Fall: Hotelbeschreibung .95rem,
   Airline-Text 1rem).

   Die Groesse ist 1rem, also die des uebrigen Fliesstextes. Bis zum
   11.09.2026 stand hier .95rem - "etwas kleiner, weil es nicht unser Text
   ist". Das war eine Unterscheidung, die nur der Entwickler kennt: Auf dem
   Reiter "Anreise" steht der gepflegte Text allein in der Karte und sah
   neben "Buchung" und "Hotel" schlicht zu klein aus. Woher ein Text kommt,
   geht den Leser nichts an. */
.fremdtext { font-size: 1rem; }
.fremdtext p { margin: 0 0 .7rem; }
.fremdtext p:last-child { margin-bottom: 0; }
/* Zwischenueberschrift im Fremdtext. Etwas groesser als der Fliesstext, aber
   deutlich kleiner als das h2 der Karte - sie gliedert, sie eroeffnet nicht. */
.fremdtext h3, .fremdtext h4, .fremdtext h5 {
    font-size: 1.05rem;
    color: var(--navy);
    margin: 1.1rem 0 .3rem;
}
.fremdtext h3:first-child, .fremdtext h4:first-child, .fremdtext h5:first-child {
    margin-top: 0;
}
.fremdtext strong { color: var(--navy); }
.fremdtext ul, .fremdtext ol { margin: 0 0 .7rem; padding-left: 1.25rem; }
/* Verweis mit Symbol davor, z.B. die Hotelkarte im Kopf der Hotelseite */
.mit-symbol {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
}
.mit-symbol span { text-decoration: underline; }
/* Auf einem Knopf ist die Unterstreichung falsch - der Rahmen zeigt schon,
   dass er anklickbar ist. */
.knopf.mit-symbol span { text-decoration: none; }

/* Verweise im Fremdtext, z.B. "Hotelkarte ansehen" aus der
   Giata-Beschreibung oder die Homepage der Fluggesellschaft */
.fremdtext a[href] { color: var(--blau-dunkel); }
.fremdtext a[href]:hover { color: var(--navy); }
/* Verweis ohne brauchbares Ziel: bleibt Text, sieht auch so aus. */
.fremdtext a:not([href]) { color: inherit; text-decoration: none; }
.fremdtext li { margin-bottom: .2rem; }

/* Klimatabelle -------------------------------------------------------- */

.klima-satz {
    font-size: 1.05rem;
    color: var(--navy);
    margin-bottom: 1rem;
}

.klima { font-variant-numeric: tabular-nums; }

.klima th[scope="row"] {
    font-size: .9rem;
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
    padding-right: 1rem;
}

/* Beim waagerechten Scrollen auf dem Handy bleibt die Beschriftung stehen,
   sonst weiss man nach drei Spalten nicht mehr, welche Zeile man liest. */
.klima th[scope="row"],
.klima thead th:first-child {
    position: sticky;
    left: 0;
    background: var(--flaeche);
    z-index: 1;
}

.klima td { text-align: right; padding-right: .9rem; }
.klima thead th { text-align: right; padding-right: .9rem; }
.klima thead th:first-child { text-align: left; }

/* Die Monate der Reise stehen hervorgehoben - deswegen die Tabelle. */
.klima .klima-reise {
    background: #FFF4E6;
    color: var(--orange-dunkel);
    font-weight: 700;
}

.klima thead th.klima-reise {
    color: var(--orange-dunkel);
    border-radius: var(--radius-klein) var(--radius-klein) 0 0;
}

/* Kontakt ---------------------------------------------------------------- */

/* Mehrere Buchungen bedeuten mehrere Bloecke - die brauchen eine Trennung. */
.kontakt-block + .kontakt-block {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--linie);
}

.kontakt-block p { margin: 0 0 .3rem; }
.kontakt-block p:last-child { margin-bottom: 0; }

.kontakt-name { font-weight: 700; color: var(--navy); }

/* Telefonnummern und E-Mail stehen untereinander, nicht in einer Zeile:
   .mit-symbol ist sonst inline-flex und laesst sie umbrechen wie Fliesstext. */
.kontakt-block .mit-symbol { display: flex; align-items: flex-start; }

/* Hier ist der Verweis der Text selbst - die Beschriftung davor ("Telefon",
   "Notfallnr.") gehoert nicht unterstrichen. */
.kontakt-block .mit-symbol > span { text-decoration: none; }

/* Mehrere Werte unter einer Beschriftung (Oeffnungszeiten, Anschrift). */
.werte dd .zeile { display: block; }

.kontakt-bezug {
    font-size: .8rem;
    color: var(--text-leise);
    margin-bottom: .35rem;
}

/* Fragen und Antworten -------------------------------------------------- */

.faq { display: grid; }

/* Der linke Balken und der Innenabstand liegen auf JEDEM Punkt, nur
   durchsichtig - sonst ruckt der Text beim Aufklappen zur Seite. */
.faq-punkt {
    border-top: 1px solid var(--linie);
    border-left: 3px solid transparent;
    padding-left: .85rem;
    border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
}

.faq-punkt:first-child { border-top-color: transparent; }

/* Der aufgeklappte Punkt hebt sich als ganzer Block ab. */
.faq-punkt[open] {
    background: var(--grund);
    border-left-color: var(--orange);
    border-top-color: transparent;
    margin: .35rem 0;
}

/* Die Trennlinie des naechsten Punktes wuerde sonst am Block kleben. */
.faq-punkt[open] + .faq-punkt { border-top-color: transparent; }

.faq-punkt > summary {
    cursor: pointer;
    list-style: none;          /* eigener Pfeil statt Dreieck */
    position: relative;
    padding: .85rem 2rem .85rem 0;
    font-weight: 600;
    color: var(--navy);
}

.faq-punkt[open] > summary { color: var(--orange-dunkel); }

.faq-punkt > summary::-webkit-details-marker { display: none; }

/* Pfeil rechts, dreht sich beim Aufklappen. */
.faq-punkt > summary::after {
    content: "";
    position: absolute;
    right: .6rem;
    top: 1.3rem;
    width: .55rem;
    height: .55rem;
    border-right: 2px solid var(--orange);
    border-bottom: 2px solid var(--orange);
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform .2s ease;
}

.faq-punkt[open] > summary::after { transform: rotate(-135deg); }

.faq-punkt > summary:hover { color: var(--orange-dunkel); }

/* Ueber eine Sprungmarke angesteuerte Frage hervorheben. Neuere Browser
   klappen sie dabei selbst auf; die uebrigen springen wenigstens sichtbar
   an die richtige Stelle. */
.faq-punkt > summary:target {
    background: #FFF4E6;
    border-radius: var(--radius-klein);
    padding-right: 2.4rem;
}

.faq-antwort {
    padding: 0 2rem .9rem 0;
    color: var(--text);
}

/* Der Balken links darf nicht mitten im Text enden. */
.faq-punkt[open] > .faq-antwort { padding-bottom: 1rem; }

.faq-antwort p { margin: 0 0 .7rem; }
.faq-antwort p:last-child { margin-bottom: 0; }
.faq-antwort ul { margin: 0 0 .7rem; }
.faq-antwort li { margin-bottom: .15rem; }

/* Check-Liste ---------------------------------------------------------- */

.checkliste {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
}

/* Der Haken sitzt absolut, damit ein Punkt beliebig viele Absaetze haben
   darf (Titel, Text, Hinweis) - im Raster wuerde jeder davon eine eigene
   Zeile aufmachen. */
.checkliste li {
    position: relative;
    padding: .8rem 0 .8rem 1.9rem;
    border-top: 1px solid var(--linie);
}

.checkliste li:first-child { border-top: 0; padding-top: .4rem; }

.checkliste li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: .8rem;
    color: var(--orange);
    font-size: .95rem;
    line-height: 1.5;
}

.checkliste li:first-child::before { top: .4rem; }

.checkliste p { margin: 0; }

.checkliste-titel {
    display: block;
    color: var(--navy);
    margin-bottom: .25rem;
}

/* Zusatz zu einem Punkt: abgesetzt, aber nicht lauter als der Punkt selbst.
   Abgesetzt wird ueber Hintergrund und Kante, nicht ueber die Schriftgroesse -
   die ist wie im uebrigen Fliesstext. Bis zum 11.09.2026 stand hier .9rem;
   damit war der Zusatz auch dann schwer zu lesen, wenn er das Wichtigste am
   Punkt war (die 100-Milliliter-Regel etwa). */
.checkliste-hinweis {
    margin-top: .5rem;
    padding: .55rem .8rem;
    background: #FFF4E6;
    border-left: 3px solid var(--orange);
    border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
}

/* Reiter Ausfluege: Bilder des Zielgebiets ----------------------------
   In der Altanwendung drei feste Kacheln zu 240x160 nebeneinander, mit
   orangenem Rahmen. Hier duerfen es auch ein oder zwei sein - die Tabelle
   hat drei Spalten, gepflegt sind nicht immer alle -, und auf dem Telefon
   stehen sie untereinander statt sich auf 80 Pixel zu quetschen. */
.regionbilder {
    list-style: none;
    margin: 0 0 1.2rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .8rem;
}

.regionbilder img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-klein);
}

/* Reiter Flug ---------------------------------------------------------- */

.flug-richtung { margin: 0 0 1.5rem; }
.flug-richtung:last-of-type { margin-bottom: 0; }

.flug-titel {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .6rem;
}
/* Dasselbe Symbol fuer beide Richtungen, aber waagerecht gedreht: Hinflug
   nach rechts, Rueckflug nach links. NICHT geneigt - am 14.09.2026 gab es
   kurz ein steigendes und ein sinkendes Flugzeug ueber einer Bodenlinie.
   Die Bodenlinie hat nicht gereicht: Ein Flugzeug mit der Nase nach unten
   sieht nach Absturz aus, auch ueber einer Landebahn.

   Groesser als die uebrigen Symbole (18px), damit der Umriss in der
   Ueberschrift nicht untergeht. */
.flug-titel .icon {
    color: var(--orange);
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    transform: rotate(90deg);
}
.flug-titel-zurueck .icon { transform: rotate(-90deg); }

.strecke-karte {
    background: var(--grund);
    border-radius: var(--radius-klein);
    padding: .9rem 1rem;
}

.strecke-datum {
    margin: 0 0 .5rem;
    font-size: .85rem;
    color: var(--text-leise);
}

/* Mobile first: die beiden Halte stehen untereinander, der Pfeil zeigt
   nach unten. Ab 48rem nebeneinander - siehe Media Query weiter unten. */
.strecke {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
}

.strecke-halt { display: flex; align-items: baseline; gap: .5rem; }

.strecke-zeit {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}

.strecke-ort { color: var(--text); }

.strecke-pfeil {
    color: var(--orange);
    font-size: 1.1rem;
    /* Untereinander zeigt der Pfeil nach unten. */
    transform: rotate(90deg);
    margin-left: .2rem;
}

.strecke-angabe {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .8rem;
    margin: .5rem 0 0;
    font-size: .9rem;
}
.strecke-linie { color: var(--text); }
.strecke-nummer { color: var(--text-leise); }
/* Freigepaeck: dieselbe Zeile wie Fluggesellschaft und Flugnummer, aber
   abgesetzt - es ist die Angabe, nach der in dieser Zeile gesucht wird. */
.strecke-gepaeck { color: var(--navy); font-weight: 600; }

/* Steht unter allen Strecken, nicht unter jeder einzelnen. */
.flug-ortszeit { margin: .8rem 0 0; }

.strecke-umstieg {
    margin: .5rem 0;
    padding-left: 1rem;
    border-left: 3px solid var(--linie);
    font-size: .85rem;
    color: var(--text-leise);
}

/* Angaben der Fluggesellschaft ----------------------------------------
   Eine Karte je Fluggesellschaft, zum Aufklappen - <details>/<summary> wie
   bei den Fragen und Antworten, also ohne JavaScript und mit der Tastatur
   bedienbar. Bei mehreren Fluggesellschaften bleibt die Seite damit kurz;
   der Kunde oeffnet die, die ihn betrifft. */

.airline { padding: 0; }

.airline-kopf {
    display: flex;
    align-items: center;
    gap: .9rem;
    cursor: pointer;
    list-style: none;              /* eigener Pfeil statt Dreieck */
    position: relative;
    padding: 1rem 2.6rem 1rem 1.25rem;
    border-radius: var(--radius);
}

.airline-kopf::-webkit-details-marker { display: none; }

.airline-name {
    font-weight: 600;
    color: var(--navy);
    font-size: var(--ueberschrift);
    letter-spacing: -.01em;
}

.airline-kopf:hover .airline-name { color: var(--orange-dunkel); }
.airline[open] .airline-name { color: var(--orange-dunkel); }

/* Pfeil rechts, dreht sich beim Aufklappen - derselbe wie in der FAQ. */
.airline-kopf::after {
    content: "";
    position: absolute;
    right: 1.1rem;
    top: 50%;
    width: .55rem;
    height: .55rem;
    border-right: 2px solid var(--orange);
    border-bottom: 2px solid var(--orange);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .2s ease;
}

.airline[open] .airline-kopf::after { transform: translateY(-30%) rotate(-135deg); }

.airline-logo { max-width: 130px; height: auto; display: block; flex: 0 0 auto; }

/* Trennlinie erst, wenn aufgeklappt ist - sonst schwebt sie unter einer
   zugeklappten Karte. */
.airline[open] .airline-inhalt {
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid var(--linie);
    margin-top: -.2rem;
    padding-top: 1rem;
}

.airline-zusatz { margin-bottom: .6rem; }

/* Hervorhebung aus den gepflegten Texten (<orange> in der Pflegemaske). */
.hervor { color: var(--orange); }

/* Zahlung --------------------------------------------------------------
   Eine Zeile je Posten: Bezeichnung links, Betrag rechtsbuendig, die Frist
   daneben. Die Betraege stehen mit Ziffern gleicher Breite
   (tabular-nums) untereinander - sonst tanzen die Kommastellen. */

.zahlung { margin: 0; }

.zahlung-zeile {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: .1rem .9rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--linie);
}

.zahlung-zeile:first-child { padding-top: 0; }

.zahlung-zeile dt { color: var(--text-leise); font-size: .9rem; }
.zahlung-zeile dd { margin: 0; }

.zahlung-betrag {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Die Frist steht direkt hinter der Bezeichnung, leiser gesetzt. Sie stand
   zuerst in einer eigenen Spalte rechts neben dem Betrag - dort war sie vom
   Posten, zu dem sie gehoert, zu weit weg. */
.zahlung-frist {
    color: var(--text-leise);
    white-space: nowrap;
}

/* Ein Trennpunkt davor: Bezeichnung und Frist stehen in derselben Farbe,
   ohne ihn liest sich "Anzahlung faellig am 15.08.2026" wie ein Satz. */
.zahlung-frist::before { content: "· "; }

/* Der Zahlungsknopf steht unter den Betraegen - so ist ohne Beschriftung
   klar, worauf er sich bezieht. */
.zahlung-knopf { margin: 1.1rem 0 .5rem; }

/* Hinweis auf die offene Anzahlung: abgesetzt, aber keine Fehlermeldung -
   der Kunde hat nichts falsch gemacht. */
.zahlung-anzahlung {
    margin: 1.2rem 0 1rem;
    padding: .8rem 1rem;
    background: var(--navy-hell);
    border-left: 3px solid var(--orange);
    border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
    font-size: .95rem;
}

/* Die Logos der Zahlungsmittel, je in einer eigenen weissen Kachel. Die
   feste Hoehe bringt sehr unterschiedlich geschnittene Logos auf ein Mass;
   die Breite richtet sich danach. */
/* Erster Absatz nach der Betragsliste - die Summenzeile hat oben eine
   Linie, darunter braucht es Luft. */
.zahlung-vorspann { margin: 1.1rem 0 .7rem; }

.zahlungsmittel {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.zahlungsmittel li {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    padding: .5rem .9rem;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
}

.zahlungsmittel img { height: 1.5rem; width: auto; display: block; }

/* Die letzte Zeile ist die Summe: kraeftiger, mit oranger Linie darueber. */
.zahlung-summe {
    border-bottom: 0;
    border-top: 2px solid var(--orange);
    margin-top: .3rem;
    padding-top: .7rem;
    font-weight: 700;
    color: var(--navy);
}

.zahlung-summe dt { color: var(--navy); font-size: 1rem; font-weight: 700; }

/* Rueckfrage vor etwas, das man nicht mit einem Klick zurueckholt.
   Keine Fehlerfarbe - der Kunde hat nichts falsch gemacht, er soll nur
   kurz innehalten. */
.karte-warnung { border-left: 3px solid var(--orange); }

/* Die beiden Verweise in der Reisenliste des Profils. */
.profil-aktionen { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.profil-aktionen .entfernen { color: var(--text-leise); }
.profil-aktionen .entfernen:hover { color: var(--fehler); }

/* Dokumente ------------------------------------------------------------
   Eine Zeile je Datei. Bei mehreren Rechnungen steht die aktuelle oben und
   ist markiert - die aelteren bleiben sichtbar, damit sich niemand fragt,
   wo die Rechnung von letzter Woche geblieben ist. */

.dok-titel { font-size: 1rem; margin: 0 0 .5rem; }

.dok-liste { list-style: none; margin: 0 0 .8rem; padding: 0; }

.dok-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .8rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--linie);
}

.dok-zeile:last-child { border-bottom: 0; }

.dok-zeile a,
.dok-ohne {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.dok-zeile a .icon { flex: 0 0 auto; color: var(--orange); }

/* Eintrag ohne Datei: aufgefuehrt, aber nicht anklickbar. */
.dok-ohne { color: var(--text-leise); }
.dok-ohne .icon { opacity: .5; }

.dok-marke {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--navy);
    background: var(--navy-hell);
    border-radius: 999px;
    padding: .1rem .6rem;
}

.dok-aktuell a { font-weight: 600; }

/* Aus dem Archiv gelaufen: dieselbe Form wie "aktuell", aber leise - es ist
   eine Erklaerung, keine Auszeichnung. */
.dok-marke-alt {
    font-size: .75rem;
    letter-spacing: .02em;
    color: var(--text-leise);
    background: var(--grund);
    border-radius: 999px;
    padding: .1rem .6rem;
}

/* Werteliste und Tabelle ---------------------------------------------- */

.werte { display: grid; gap: .2rem 1rem; margin: 0; }
.werte dt { font-size: .85rem; color: var(--text-leise); }
.werte dd { margin: 0 0 .6rem; }

.summe {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .6rem;
    margin-top: .6rem;
    border-top: 1px solid var(--linie);
    font-weight: 700;
    color: var(--navy);
}

.tabellenrahmen { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: .95rem; }
/* Keine Versalien - auch nicht in Tabellenkoepfen. */
th {
    text-align: left; font-size: .8rem;
    color: var(--text-leise); font-weight: 600;
    padding: 0 .75rem .4rem 0;
}
td { padding: .55rem .75rem .55rem 0; border-bottom: 1px solid var(--linie); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

ul { margin: 0; padding-left: 1.25rem; }
.ohne-punkte { list-style: none; padding: 0; }

/* Symbole -------------------------------------------------------------- */

.icon {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    flex: 0 0 auto;
}

/* Fuss ---------------------------------------------------------------- */

.fuss {
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dunkel) 100%);
    color: rgba(255, 255, 255, .82);
    padding: 2.25rem 0 2.5rem;
    font-size: .875rem;
    border-radius: inherit;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.fuss-spalten { display: grid; gap: 1.75rem; text-align: center; }
.fuss h2 { font-size: .9rem; letter-spacing: .01em; color: #fff; }
.fuss a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.fuss a:hover { color: #FFB067; text-decoration: underline; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }

.fuss li { display: flex; justify-content: center; }

.fuss li > a,
.fuss li > span,
.fuss li {
    align-items: center;
}

.fuss li a,
.fuss li > span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.fuss li > .icon { margin-right: .5rem; }

/* Mehrzeilige Anschrift im Fuss: je Zeile ein eigener Eintrag, damit sie
   auch ohne diese Regel untereinander stehen. Hier ruecken die Folgezeilen
   nur naeher zusammen - eine Anschrift mit dem vollen Zeilenabstand der
   uebrigen Eintraege faellt auseinander. */
.fuss li.fuss-anschrift-weiter { margin-top: -.35rem; }

.fuss h2 {
    margin-bottom: .9rem;
    position: relative;
    padding-bottom: .6rem;
}

/* feine Linie unter der Spaltenueberschrift */
.fuss h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 2.25rem;
    height: 2px;
    margin-left: -1.125rem;
    background: var(--orange);
    border-radius: 2px;
}

.fuss .icon { opacity: .75; }
.fuss a:hover .icon { opacity: 1; }
/* Social-Media-Kanaele im Fuss ---------------------------------------- */

.nur-vorlesen {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

.fuss-sozial {
    margin-top: 2rem; padding-top: 1.5rem;
    border-top: 1px solid var(--fuss-linie);
    text-align: center;
}

.fuss-sozial p {
    margin: 0 0 .9rem;
    font-size: .85rem; letter-spacing: .01em;
    color: rgba(255, 255, 255, .7);
}

.fuss-sozial ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem;
}

.fuss-sozial li { display: block; }

.fuss-sozial a {
    display: flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem;
    border-radius: 50%;
    border: 1px solid var(--fuss-linie);
    color: rgba(255, 255, 255, .85);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.fuss-sozial a:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    text-decoration: none;
}

.icon-marke { display: block; }

.fuss-zeile {
    margin-top: 1.75rem; padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
    display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
    justify-content: space-between;
}

.fuss-umgebung {
    font-size: .72rem; font-weight: 700; letter-spacing: .02em;
    color: #06323F; background: var(--blau);
    border-radius: 999px; padding: .15rem .7rem;
}

/* Groessere Geraete ---------------------------------------------------- */

@media (min-width: 48rem) {

    .marke { gap: 1.75rem; }

    /* Flugstrecke nebeneinander, sobald die Breite reicht. */
    .strecke { flex-direction: row; align-items: baseline; gap: .35rem 1rem; }
    .strecke-pfeil { transform: none; margin-left: 0; }
    .rahmen {
        max-width: 76rem;
        margin: 1.75rem auto;
        min-height: 0;
        border-radius: 18px;
        box-shadow: 0 2px 6px rgba(20, 44, 81, .07), 0 18px 40px rgba(20, 44, 81, .10);
    }
    .band { min-height: 12rem; }
    .band h1 { font-size: 2.1rem; }
    main { padding-top: 2rem; }
    .marke img { width: 60px; height: 60px; }
    .marke-text { font-size: 1.45rem; }
    .paar { grid-template-columns: 1fr 1fr; }
    .liste { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
    .reiter { gap: .4rem; }
    .reiter a { padding: .5rem .9rem; gap: .45rem; font-size: .95rem; }
    .werte { grid-template-columns: 12rem 1fr; }
    .werte dd { margin-bottom: .2rem; }
    .reise-spalten { grid-template-columns: 1fr 1fr; }
    /* 11rem statt 9: Seit "Gebuchte Verpflegung" die laengste Beschriftung
       ist, brach sie bei 9rem um. Die Spalte steht in einer halben Karte,
       viel breiter darf sie nicht werden. */
    .reise-spalten .werte { grid-template-columns: 11rem 1fr; }
    .anmelde-flaeche { grid-template-columns: 1fr 26rem; gap: 3rem; }
    .fuss-spalten { grid-template-columns: repeat(3, 1fr); gap: 0; }

    /* senkrechte Trennstriche zwischen den drei Bloecken */
    .fuss-spalte + .fuss-spalte {
        border-left: 1px solid var(--fuss-linie);
    }

    .fuss-spalte { padding: 0 1.5rem; }
    .karte { padding: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .kachel, .kachel-bild, .galerie img, .faq-punkt > summary::after,
    .airline-kopf::after { transition: none; }
    .galerie-vorschau:hover img { transform: none; }
    .kachel:hover { transform: none; }
    .kachel:hover .kachel-bild { transform: none; }
}

/* Reiter "Teilnehmer" -------------------------------------------------
   Reiseanmelder und Teilnehmer: viele kurze Felder. Auf dem Telefon
   untereinander, ab Tablet zweispaltig - sonst laeuft die Seite ins
   Endlose und zusammengehoerende Angaben stehen weit auseinander. */

/* Ein Formular mit wenigen, kurzen Feldern in einer breiten Karte. Ohne
   Begrenzung zieht ein Kennwortfeld ueber die ganze Seite und sieht aus, als
   erwarte es einen Aufsatz. */
.formular-eng { max-width: 28rem; }

/* Zwischenueberschrift im Formular ("Reiseanmelder", "Teilnehmer 1") -
   braucht Luft nach oben, sonst klebt sie am Feld darueber. */
.formular h3 { margin-top: 1.6rem; }
.formular > h3:first-of-type { margin-top: 1rem; }

.felder { display: grid; gap: 0 1.25rem; }

.felder .feld { margin: 0; }

/* Flacher als die uebrigen Formulare. Hier stehen bis zu 27 kurze Felder
   untereinander - in voller Hoehe laeuft die Seite ins Endlose und man
   scrollt an den Knoepfen vorbei. Die Trefferflaeche bleibt mit rund 2,4 rem
   auch auf dem Telefon gross genug. */
.felder .feld label {
    margin: .55rem 0 .15rem;
    font-size: .8rem;
}

.felder .feld input {
    padding: .4rem .6rem;
    font-size: .95rem;
}

@media (min-width: 40rem) {

    .felder { grid-template-columns: 1fr 1fr; }
}

/* Geaenderter Wert in der Zusammenstellung vor dem Absenden.
   Die Altanwendung hat solche Felder gelb hinterlegt; hier steht ein
   orangener Balken davor - er faellt auch dann auf, wenn jemand Farben
   schlecht unterscheidet, und traegt den Vorwert gleich mit. */
.werte dd.geaendert {
    padding-left: .6rem;
    border-left: 3px solid var(--orange);
    font-weight: 600;
}

.werte dd.geaendert .vorher {
    display: block;
    font-weight: 400;
    color: var(--text-leise);
}

/* Hauptnavigation in einer Zeile ---------------------------------------
   Erst ab 64rem, nicht schon ab 48rem: Bei 768 und 900 Pixeln passt die
   Zeile zwar auf den Bildschirm, aber nicht mehr neben das Logo - der Kopf
   wurde dort 142 statt 87 Pixel hoch, weil das Menue umbrach. Gemessen
   passt es ab etwa 1010 Pixeln; 64rem sind 1024 und damit die naechste
   runde Marke darueber. Unterhalb bleibt es der Klappknopf.

   Wird das Menue laenger oder kommt eine Sprache mit laengeren Woertern
   dazu, bricht es hier wieder um - dann diese Marke nachmessen. */
@media (min-width: 64rem) {
    .navi-knopf { display: none; }
    .navi {
        display: flex;
        flex-direction: row;
        gap: .25rem;
        flex-basis: auto;
        margin: 0;
        padding: 0;
        border-top: 0;
    }
    .navi a { padding: .5rem .7rem; }
}

/* ---------------------------------------------------------------------------
   Merkliste des Servicecenters ("Zuletzt angesehen")

   Bewusst eine schlichte Liste statt der Reisekacheln: Die Buchungen gehoeren
   diesem Zugang nicht, und eine Kachelwand sieht aus wie "meine Reisen". Die
   Nummer steht vorn, weil danach gesucht wird.
   --------------------------------------------------------------------------- */

.merkliste {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.merkliste li {
    border-top: 1px solid var(--linie);
    padding: .6rem 0;
}

.merkliste li:first-child { border-top: 0; }

.merkliste a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .1rem .6rem;
    text-decoration: none;
}

.merk-nummer {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--navy);
}

.merk-titel { color: var(--text); }

.merkliste a:hover .merk-titel,
.merkliste a:focus .merk-titel { text-decoration: underline; }

.merk-zusatz {
    display: block;
    font-size: .875rem;
    color: var(--text-leise);
}


/* ---------------------------------------------------------------------------
   Servicebereich: Konten und Zuordnungen (/service)
   --------------------------------------------------------------------------- */

/* Die Eingriffsspalte ist der Zweck der Seite - sie darf als letzte nicht aus
   dem Bild laufen. Auf schmalen Bildschirmen fallen deshalb die beiden
   Spalten weg, die nur Beiwerk sind: Name und letzte Anmeldung. Die Tabelle
   scrollt in .tabellenrahmen weiterhin, wenn es trotzdem eng wird. */
@media (max-width: 62rem) {
    .kontentabelle th:nth-child(2),   /* Name */
    .kontentabelle td:nth-child(2),
    .kontentabelle th:nth-child(5),   /* letzte Anmeldung */
    .kontentabelle td:nth-child(5),
    .buchungstabelle th:nth-child(4), /* zugeordnet am */
    .buchungstabelle td:nth-child(4) { display: none; }
}

/* Auf dem Telefon bleiben nur die Adresse und der Eingriff stehen. Alles
   andere ist am Hoerer nachrangig, und die Adresse darf dann umbrechen -
   sonst schiebt eine lange Adresse die Knoepfe wieder aus dem Bild. */
@media (max-width: 40rem) {
    .kontentabelle th:nth-child(3),
    .kontentabelle td:nth-child(3),
    .kontentabelle th:nth-child(4),
    .kontentabelle td:nth-child(4),
    .buchungstabelle th:nth-child(3),
    .buchungstabelle td:nth-child(3) { display: none; }

    .kontentabelle td:first-child { white-space: normal; word-break: break-word; }
}

/* Knopf und Verweis untereinander, mit etwas Luft dazwischen. */
.eingriff { display: grid; gap: .35rem; justify-items: start; }
.eingriff form { margin: 0; }

/* Die Buchungsnummern in den Trefferlisten: gleiche Ziffernbreite, damit
   sich Tippfehler beim Vergleichen zeigen. */
.nummer { font-variant-numeric: tabular-nums; }