/* Die Stile des KARTENMODULS -- Buehne, Blatt mit dem Ablauf, Fahnen,
   Stationsmarken. Alles, was das Modul braucht, wo immer es eingesetzt wird.

   Herausgezogen am 05.09.2026 aus KARTE.html. Anlass: die Landing Page band
   das Modul ein, lud aber nur die drei CSS-Dateien -- die Modulstile standen
   als <style> IN der Seite. Das Blatt lag dadurch mit position:static UNTER
   der Karte statt darauf, 1238 px breit statt 392.

   ACHTUNG beim naechsten Zerlegen: NICHT an jeder "}" trennen. Der erste
   Versuch tat das und zerriss die Media-Queries -- .b-blatt landete dabei in
   keiner der beiden Dateien und fehlte still. Klammern zaehlen.

   Was NICHT hierher gehoert: die Umschaltleiste und der Seitenrahmen von
   KARTE.html. Das ist die Vergleichsseite, nicht das Modul. */

@media (max-width:860px){
    .s-tourwahl{flex-wrap:wrap}

  }

@media (prefers-reduced-motion:reduce){
    .n-fahne,.s-marke,.s-halt{transition:none}

  }

/* --- Die Buehne: die Karte fuellt sie, alles andere liegt darauf ------ */
.k-buehne{position:relative;border:1px solid var(--linie);background:var(--hell);
    height:min(74svh,700px);overflow:hidden}

.k-buehne .wk-kartenfeld{position:absolute;inset:0}

/* --- 1 «Nadel» ------------------------------------------------------- */
.n-fahne{position:absolute;transform:translate(-50%,-100%);
    background:var(--creme);border:1px solid var(--braun);
    padding:9px 13px 10px;cursor:pointer;text-align:left;font:inherit;
    color:inherit;border-radius:0;max-width:230px;
    box-shadow:0 8px 22px rgba(28,24,21,.16);
    transition:transform var(--t-nah) var(--aus),
      box-shadow var(--t-nah) var(--aus),background var(--t-nah) var(--aus)}

/* Der Stiel: die Fahne zeigt auf ihren Punkt, sonst schwebt sie irgendwo. */
.n-fahne::after{content:"";position:absolute;left:50%;top:100%;
    width:1px;height:16px;background:var(--braun)}

.n-fahne:hover{background:#FFFDFA;box-shadow:0 12px 30px rgba(28,24,21,.22)}

.n-fahne:active{transform:translate(-50%,-100%) scale(.97)}

/* Liegt der Punkt zu weit oben, kippt die Fahne unter ihn -- sonst haengt
     sie halb ausserhalb der Karte. Gemessen: eine von zwei ragte hinaus. */
.n-fahne.unten{transform:translate(-50%,0)}

.n-fahne.unten:active{transform:translate(-50%,0) scale(.97)}

.n-fahne.unten::after{top:auto;bottom:100%}

.n-fahne:focus-visible{outline:2px solid var(--braun);outline-offset:2px}

.n-fahne[aria-pressed="true"]{background:var(--braun);border-color:var(--braun)}

.n-fahne[aria-pressed="true"] .n-name,
.n-fahne[aria-pressed="true"] .n-klein{color:var(--creme)}

.n-name{font-family:"Cormorant Garamond",Georgia,serif;font-size:17px;
    color:var(--braun);display:block;line-height:1.2}

.n-klein{display:block;font-family:Inter,system-ui,sans-serif;font-size:9.5px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--leise);margin-top:4px}

.n-punkt{position:absolute;width:9px;height:9px;border-radius:50%;
    background:var(--akzent);box-shadow:0 0 0 3px var(--creme);
    transform:translate(-50%,-50%);pointer-events:none}

/* --- 2 «Blatt» ------------------------------------------------------- */
.b-blatt{position:absolute;left:var(--a4);top:var(--a4);bottom:var(--a4);
    width:min(392px,42%);background:rgba(243,238,231,.95);
    backdrop-filter:blur(14px);border:1px solid var(--linie);
    display:flex;flex-direction:column;box-shadow:0 18px 44px rgba(28,24,21,.18)}

.b-kopf{padding:var(--a3);border-bottom:1px solid var(--fein)}

.b-kopf h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
    font-size:22px;color:var(--braun);margin:0 0 4px}

.b-kopf p{margin:0;font-size:14.5px;color:var(--leise)}

.b-wahl{display:flex;border-bottom:1px solid var(--fein)}

.b-wahlknopf{flex:1 1 0;font-family:Inter,system-ui,sans-serif;font-size:10.5px;
    font-weight:500;letter-spacing:.1em;text-transform:uppercase;
    color:var(--leise);background:none;border:0;border-right:1px solid var(--fein);
    border-radius:0;padding:12px 8px;cursor:pointer;
    transition:color var(--t-nah) var(--aus),background var(--t-nah) var(--aus)}

.b-wahlknopf:last-child{border-right:0}

.b-wahlknopf[aria-pressed="true"]{background:var(--braun);color:var(--creme)}

.b-wahlknopf:active{transform:scale(.97)}

.b-inhalt{flex:1 1 auto;overflow-y:auto}

.b-inhalt .kt-ablauf{padding:var(--a3)}

/* --- 3 «Station» ----------------------------------------------------- */
.s-marke{position:absolute;transform:translate(-50%,-50%);
    width:22px;height:22px;background:var(--creme);border:1px solid var(--braun);
    font-family:Inter,system-ui,sans-serif;font-size:11px;font-weight:500;
    color:var(--braun);display:flex;align-items:center;justify-content:center;
    pointer-events:none;
    transition:background var(--t-nah) var(--aus),color var(--t-nah) var(--aus),
      transform var(--t-nah) var(--aus)}

.s-marke.jetzt{background:var(--braun);color:var(--creme);
    transform:translate(-50%,-50%) scale(1.22)}

.s-leiste{display:flex;gap:0;border:1px solid var(--linie);border-top:0;
    background:#FBF9F6;overflow-x:auto}

.s-halt{flex:1 0 auto;min-width:150px;text-align:left;font:inherit;color:inherit;
    background:none;border:0;border-right:1px solid var(--linie);border-radius:0;
    padding:var(--a3);cursor:pointer;transition:background var(--t-nah) ease}

.s-halt:last-child{border-right:0}

.s-halt:hover,.s-halt.jetzt{background:rgba(140,90,60,.08)}

.s-nr{font-family:Inter,system-ui,sans-serif;font-size:10px;font-weight:500;
    letter-spacing:.16em;color:var(--leise);display:block;margin-bottom:5px}

.s-was{font-family:"Cormorant Garamond",Georgia,serif;font-size:17px;color:var(--braun);
    display:block;line-height:1.2}

.s-klein{display:block;font-family:Inter,system-ui,sans-serif;font-size:10px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--leise);margin-top:5px}

.s-tourwahl{display:flex;border:1px solid var(--linie);border-bottom:0;
    background:#FBF9F6}

.s-tourknopf{font-family:Inter,system-ui,sans-serif;font-size:11.5px;
    font-weight:500;letter-spacing:.08em;color:var(--leise);background:none;
    border:0;border-right:1px solid var(--linie);border-radius:0;
    padding:13px 20px;cursor:pointer;
    transition:color var(--t-nah) var(--aus),background var(--t-nah) var(--aus)}

.s-tourknopf:last-child{border-right:0}

.s-tourknopf[aria-pressed="true"]{background:var(--braun);color:var(--creme)}

.s-tourknopf:active{transform:scale(.97)}

/* Die Kennzahlen standen zuerst als Streifen AUF der Karte -- und lagen
     dort ueber Marke 3, "HOECHSTER PUNKT" war von der Ziffer verdeckt.
     Zwei Dinge um denselben Platz. Jetzt sitzen sie in der Kopfleiste:
     die Karte gehoert den Marken, die Zahlen stehen daneben. */
.s-tourwahl{align-items:stretch}

.s-summe{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;
    gap:var(--a1) var(--a4);padding:var(--a2) var(--a3);
    font-family:Inter,system-ui,sans-serif;font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--leise)}

.s-summe b{color:var(--braun);font-weight:500}

/* WIEDER EINGEPACKT am 05.09.2026. Diese fuenf Regeln standen kurzzeitig
   OHNE ihren @media-Rahmen und galten damit auf jeder Breite: das Blatt war
   1238 statt 392 px breit und lag unten quer ueber der Karte, die Buehne war
   auf 520 px gestaucht, und eine der drei Stationsmarken fiel dadurch aus
   dem Bild. Ursache war ein Zerleger, der an jeder "}" getrennt hat. */
@media (max-width:860px){
.s-summe{margin-left:0;width:100%;border-top:1px solid var(--linie)}
.k-buehne{height:min(64svh,520px)}
.b-blatt{left:0;right:0;top:auto;bottom:0;width:auto;max-height:58%}
.n-fahne{max-width:170px;padding:7px 10px 8px}
.n-name{font-size:15px}
}