/* Gemeinsame Gestalt der drei Wanderfinder-Entwuerfe.
   Farben, Schriften und Abstaende sind die der bestehenden Seite -- der
   Auftrag lautete ausdruecklich: gleicher Stil, nur interessanter. */

:root{
  --creme:#F3EEE7; --hell:#FBFAF8; --braun:#332E2A; --text:#54504A;
  /* --leise war #8B8377 und ergab auf der Cremeflaeche 3,24:1 -- WCAG
     verlangt 4,5:1 fuer Fliesstext. 15 von 25 Textstellen fielen durch,
     darunter jede Kleinschrift im Ablauf ("BAHN · 1464 M AUF 1818 M") und
     die Achsenbeschriftung des Hoehenschnitts. #716A60 ist derselbe Farbton
     (36 Grad) und dieselbe Saettigung, nur um neun Prozent dunkler, und
     erreicht 4,63:1. Der Unterschied ist im Bild kaum zu sehen, im Sonnen-
     licht auf dem Telefon aber genau der, auf den es ankommt. */
  --leise:#716A60; --linie:#E4DCD0; --fein:#EDE7DD; --tinte:#1C1917;
  /* Ein einziger Akzent, sparsam: er markiert, was gerade gewaehlt ist. */
  --akzent:#8C5A3C;
  /* Farbe der Hotelnadel. Stand bis 16.09.2026 nur als #3D3733 im
     Javascript -- jetzt eine Quelle fuer Nadel UND Beschriftung.
     Beide sollen nicht auseinanderlaufen (Michael 16.09.2026).
     NICHT --nadel nennen: der Name traegt weiter unten die GROESSE. */
  --nadelfarbe:#3D3733;
  /* Die Wegfarbe ist NICHT der Akzent: der Akzent ist ein warmes Braun und
     verschwindet auf dem braeunlichen Relief. Weinrot hebt sich ab, ohne
     laut zu sein. Gegen den Kartengrund #F3EEE7 gemessen: 8,15:1
     statt 4,99:1 -- der Weg ist damit gut anderthalbmal so deutlich. */
  --weg:#7B2B32;
  --a1:8px; --a2:12px; --a3:18px; --a4:28px; --a5:42px; --a6:64px; --a7:96px;
  --rund:0;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;background:var(--creme)}
body{font-family:"Abhaya Libre",Georgia,serif;color:var(--text);font-size:17px;
  line-height:1.62em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}

/* Schriftrollen ----------------------------------------------------------- */
.wk-auge{font-family:Inter,system-ui,sans-serif;font-size:10.5px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--leise);margin:0}
.wk-titel{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:clamp(34px,4.2vw,56px);line-height:1.05em;color:var(--braun);
  margin:0;text-wrap:balance;letter-spacing:-.005em}
.wk-lead{margin:0;font-size:18px;line-height:1.62em;max-width:52ch}
.wk-klein{font-family:Inter,system-ui,sans-serif;font-size:10.5px;line-height:1.6em;
  letter-spacing:.04em;color:var(--leise);margin:0}

/* Knoepfe und Filterschalter ---------------------------------------------- */
.wk-knopf{font-family:Inter,system-ui,sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--braun);
  background:none;border:1px solid rgba(51,46,42,.26);border-radius:0;
  padding:0 18px;min-height:40px;cursor:pointer;display:inline-flex;
  align-items:center;gap:8px;white-space:nowrap;
  transition:background .22s,color .22s,border-color .22s}
.wk-knopf:hover{border-color:var(--braun)}
.wk-knopf:focus-visible{outline:2px solid var(--braun);outline-offset:3px}
.wk-knopf[aria-pressed="true"]{background:var(--braun);border-color:var(--braun);
  color:var(--creme)}
.wk-knopf.voll{background:var(--braun);border-color:var(--braun);color:var(--creme)}
.wk-knopf.voll:hover{background:var(--tinte)}

.wk-filter{display:flex;flex-wrap:wrap;gap:var(--a1);align-items:center}
.wk-filter .wk-gruppe{display:flex;gap:var(--a1)}
.wk-trenner{width:1px;height:22px;background:var(--linie);margin:0 var(--a1)}

.wk-suche{position:relative;flex:1 1 190px;min-width:170px}
.wk-suche input{width:100%;font:inherit;font-size:16px;color:var(--braun);
  background:var(--hell);border:1px solid var(--linie);border-radius:0;
  padding:0 40px 0 18px;min-height:40px}
.wk-suche input::placeholder{color:var(--leise)}
.wk-suche input:focus{outline:2px solid var(--braun);outline-offset:1px;
  border-color:var(--braun)}
.wk-suche button{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border:0;border-radius:0;background:none;
  cursor:pointer;color:var(--leise);font-size:17px;line-height:1;display:none}
.wk-suche.voll button{display:block}

.wk-zahl{font-family:Inter,system-ui,sans-serif;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--leise);
  white-space:nowrap}

/* Die selbst gezeichnete Karte -------------------------------------------- */
.wk-kartenfeld{position:relative;background:var(--creme);overflow:hidden;
  cursor:grab}
.wk-kartenfeld.wk-zieht{cursor:grabbing}
/* Die Zeichenflaeche selbst. Sie stand auf --hell (#FBFAF8), also fast
   Weiss -- und weil die Karte beim Zoomen verschoben wird, lag genau diese
   Flaeche an der Kante frei. Am 05.09.2026 zweimal als "weisser Rand"
   gemeldet: beim ersten Mal habe ich nur das Kartenfeld umgefaerbt und die
   SVG darin uebersehen. Zwei Flaechen, eine Farbe. */
.wk-karte{background:var(--creme)}

/* --- Beim Zoomen ihre Groesse behalten ---------------------------------
   Auf einer Karte wachsen Beschriftung, Linienstaerke und Signaturen NICHT
   mit dem Zoom mit -- sonst steht bei dreifacher Vergroesserung ein
   dreifach grosser Ortsname im Bild. Am 04.09.2026 genau so gesehen.
   Linien loesen das ueber vector-effect, Schrift und Punkte ueber --zoom. */
.wk-karte{--zoom:1}
.wk-netz,.wk-hoehenlinie,.wk-gitterlinie,.wk-bahn-kontur,.wk-bahn-linie,
.wk-bahn-strich,.wk-weg-kontur,.wk-weg-linie,.wk-punkt .wk-hof,
.wk-huette .wk-kern{vector-effect:non-scaling-stroke}

/* Hoehenlinien und Gitter. Beide sind Untergrund, nicht Inhalt -- sobald man
   sie einzeln wahrnimmt, sind sie zu stark. */
.wk-hoehenlinie{fill:none;stroke:rgba(94,80,64,.20);stroke-width:.6;
  stroke-linejoin:round}
.wk-hoehenlinie.stark{stroke:rgba(94,80,64,.34);stroke-width:.9}
.wk-gitterlinie{stroke:rgba(51,46,42,.07);stroke-width:.7}

/* Bergbahnen in der Kartensprache: feine Linie mit Querstrichen. */
.wk-bahn-kontur{fill:none;stroke:rgba(252,251,249,.8);stroke-width:4;
  stroke-linecap:round}
.wk-bahn-linie{fill:none;stroke:rgba(51,46,42,.42);stroke-width:1}
.wk-bahn-strich{stroke:rgba(51,46,42,.42);stroke-width:1;stroke-linecap:round}

/* Eine gewaehlte Kette: die beteiligten Bahnen treten hervor, die anderen
   zurueck. Die Fussstuecke dazwischen gestrichelt -- sie sind kurz und
   sollen nicht wie ein Wanderweg aussehen. */
.wk-karte.wk-kette-an .wk-bahn .wk-bahn-linie,
.wk-karte.wk-kette-an .wk-bahn .wk-bahn-strich{stroke:rgba(51,46,42,.14)}
.wk-karte.wk-kette-an .wk-bahn.jetzt .wk-bahn-linie,
.wk-karte.wk-kette-an .wk-bahn.jetzt .wk-bahn-strich{stroke:var(--weg);
  stroke-width:2.4}
/* Seit dem 05.09.2026 ein <path> mit der echten Wegfuehrung, nicht mehr
   eine <line>. fill:none ist Pflicht -- sonst fuellt der Browser die von der
   Spur umschlossene Flaeche aus, und eine Rundtour wird zum Farbklecks.
   Und die Strichelung faellt weg: bei einem echten Weg sagt eine gestrichelte
   Linie "ungefaehr hier", und das stimmt jetzt nicht mehr. */
.wk-fussweg{fill:none;stroke:var(--weg);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* Das Grundgeruest: da, aber nie im Weg. */
.wk-netz{fill:none;stroke:rgba(51,46,42,.075);stroke-width:.85;
  stroke-linecap:round;stroke-linejoin:round}

/* Auf dem Relief braucht das Wegenetz weniger Kontrast, sonst kaempfen die
   beiden Untergruende miteinander. */
.wk-mit-relief .wk-netz{stroke:rgba(51,46,42,.055)}
.wk-mit-relief .wk-weg-kontur{stroke:rgba(252,251,249,.85);stroke-width:6.5}

.wk-weg-kontur{fill:none;stroke:var(--hell);stroke-width:6;
  stroke-linecap:round;stroke-linejoin:round}
.wk-weg-linie{fill:none;stroke:rgba(51,46,42,.52);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s,stroke-width .25s}

/* Ist ein Weg gewaehlt, treten die anderen zurueck -- nicht weg. Ganz
   ausblenden nimmt dem Gast die Orientierung, wo der Weg in der Region liegt. */
.wk-karte.wk-gewaehlt .wk-weg .wk-weg-linie{stroke:rgba(51,46,42,.16)}
/* Die Hervorhebung MUSS spezifischer sein als das Abblenden darueber --
   sonst wird der gewaehlte Weg mit abgeblendet und ist der einzige, den man
   nicht mehr sieht. Gemessen am 04.09.2026: stroke war rgba(51,46,42,.16)
   statt der Akzentfarbe. Im Bild war das kaum von einem Animationsfehler
   zu unterscheiden. */
.wk-karte.wk-gewaehlt .wk-weg.jetzt .wk-weg-linie,
.wk-weg.jetzt .wk-weg-linie{stroke:var(--weg);stroke-width:4.6}
.wk-weg.weg{display:none}

.wk-punkt .wk-kern{fill:var(--braun)}
.wk-punkt .wk-hof{fill:none;stroke:var(--akzent);stroke-width:1.4}
.wk-hotel .wk-kern{fill:var(--akzent)}
.wk-huette .wk-kern{fill:none;stroke:var(--braun);stroke-width:1.6}
.wk-bahn .wk-kern{fill:rgba(51,46,42,.55)}
.wk-ort .wk-kern{display:none}

.wk-beschriftung{font-family:Inter,system-ui,sans-serif;fill:var(--leise);
  font-size:10.5px;letter-spacing:.06em;paint-order:stroke;
  stroke:var(--hell);stroke-width:3.4;stroke-linejoin:round}
.wk-b-ort{font-size:13px;letter-spacing:.24em;text-transform:uppercase;
  fill:rgba(51,46,42,.55);font-weight:500}
/* "HOTEL GEBHARD" ist der Hausname, also die Hausschrift: Oswald 300,
   Versalien -- nie Inter, nie Serifen. Farbe wie die Nadel, damit Zeichen und
   Name als ein Ding lesen (Michael 16.09.2026). */
.wk-b-hotel{fill:var(--nadelfarbe);font-family:Oswald,"Inter",system-ui,sans-serif;
  font-weight:300;letter-spacing:.16em;text-transform:uppercase;font-size:10px}
.wk-nadel-koerper{fill:var(--nadelfarbe)}
.wk-b-bahn{fill:rgba(139,131,119,.85)}

/* Massstabsleiste -- die Antwort auf "wie weit ist das". */
.wk-massbalken{fill:none;stroke:rgba(51,46,42,.6);stroke-width:1.2}
.wk-masstext{font-family:Inter,system-ui,sans-serif;font-size:10px;
  letter-spacing:.12em;fill:rgba(51,46,42,.7);text-anchor:middle;
  paint-order:stroke;stroke:rgba(252,251,249,.9);stroke-width:3;
  stroke-linejoin:round}

/* Kartenfuss: Herkunft der Daten. Pflicht bei OpenStreetMap, und ausserdem
   die ehrliche Antwort auf "woher wisst ihr das". */
.wk-kartenfuss{position:absolute;left:var(--a3);right:var(--a3);bottom:var(--a2);
  display:flex;flex-wrap:wrap;gap:var(--a1) var(--a3);align-items:baseline;
  justify-content:space-between;pointer-events:none}
.wk-kartenfuss a{pointer-events:auto;color:var(--leise);text-decoration:none;
  border-bottom:1px solid rgba(139,131,119,.5)}
.wk-kartenfuss a:hover{color:var(--braun);border-bottom-color:var(--braun)}

/* Kennzahlen einer Tour --------------------------------------------------- */
.wk-daten{display:flex;flex-wrap:wrap;gap:var(--a1) var(--a3);
  font-family:Inter,system-ui,sans-serif;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--leise)}
.wk-daten b{font-weight:500;color:var(--braun)}
.wk-fehlt{font-family:Inter,system-ui,sans-serif;font-size:10px;
  letter-spacing:.1em;color:var(--leise);font-style:normal}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* --- Gegenrechnung zum Zoom, ganz zum Schluss --------------------------
   Diese Regeln MUESSEN am Ende stehen: sie haben dieselbe Spezifitaet wie
   die Grundregeln fuer .wk-beschriftung weiter oben, und bei gleicher
   Spezifitaet gewinnt die spaetere. Weiter oben eingesetzt blieben die
   Ortsnamen beim Zoomen riesig -- am 04.09.2026 im Bildschirmfoto gesehen. */
.wk-karte .wk-beschriftung{font-size:calc(10.5px / var(--zoom));
  stroke-width:calc(3.4px / var(--zoom))}
.wk-karte .wk-b-ort{font-size:calc(13px / var(--zoom))}
.wk-karte .wk-b-hotel{font-size:calc(10px / var(--zoom))}
.wk-karte .wk-punkt circle{r:calc(3.4px / var(--zoom))}
.wk-karte .wk-hotel .wk-hof{r:calc(9px / var(--zoom))}
.wk-karte .wk-hotel .wk-kern{r:calc(4.2px / var(--zoom))}
.wk-karte .wk-masstext{font-size:10px}

/* --- Eine einzelne Stufe der Kette hervorheben (WK9) ---------------------
   Wer im Ablauf "Sunliner, hinunter" liest, soll sehen, WO das ist. Die
   Hervorhebung muss kraeftiger sein als die ohnehin schon hervorgehobene
   Kette -- sonst ist zwischen "gehoert zur Tour" und "diese Zeile" kein
   Unterschied zu erkennen. */
/* ACHTUNG SPEZIFITAET: die Regel fuer die gewaehlte Kette lautet
   `.wk-karte.wk-kette-an .wk-bahn.jetzt .wk-bahn-linie` und wiegt 0,5,0.
   Eine Hervorhebung mit `.wk-karte .wk-bahn.stufe-jetzt ...` wiegt nur 0,4,0
   und verliert -- die Klasse steht dann am Knoten, sichtbar aendert sich
   nichts. Genau diese Falle hat im Projekt schon einmal zugeschlagen (die
   Abblendung war spezifischer als die Hervorhebung). Deshalb hier dieselbe
   Kette mitschreiben und `.stufe-jetzt` obendrauf. Und `.wk-bahn-strich`
   nicht vergessen: die Bahn besteht aus zwei Elementen. */
.wk-karte.wk-kette-an .wk-bahn.jetzt.stufe-jetzt .wk-bahn-linie,
.wk-karte.wk-kette-an .wk-bahn.jetzt.stufe-jetzt .wk-bahn-strich,
.wk-karte .wk-bahn.stufe-jetzt .wk-bahn-linie,
.wk-karte .wk-bahn.stufe-jetzt .wk-bahn-strich{stroke:var(--braun);stroke-width:4.4}
.wk-karte.wk-kette-an .wk-bahn.jetzt.stufe-jetzt .wk-bahn-text,
.wk-karte .wk-bahn.stufe-jetzt .wk-bahn-text{fill:var(--braun);font-weight:500}
.wk-karte .wk-fussweg.stufe-jetzt{stroke:var(--braun);stroke-width:3.4;
  stroke-dasharray:none}

/* --- Beschriftete Wegpunkte einer Tour ----------------------------------
   Der Name steht rechts neben seinem Punkt und wird beim Zoomen NICHT
   mitskaliert -- sonst waechst er auf das Dreifache (siehe die Ellipsen im
   Hoehenschnitt, ketten.js). */
.wk-kettepunkt{fill:var(--akzent);stroke:var(--creme);stroke-width:1.4;
  vector-effect:non-scaling-stroke}
.wk-kettename{font-family:Inter,system-ui,sans-serif;
  font-size:calc(10px / var(--zoom,1));
  fill:var(--braun);letter-spacing:.02em;paint-order:stroke;
  stroke:var(--creme);stroke-width:calc(3px / var(--zoom,1));
  stroke-linejoin:round}

/* Landingpage: Nadel statt Punkt. Skaliert gegen den Zoom, Spitze bleibt am Haus. */
.wk-nadel{transform:scale(.52)}
.wk-karte .wk-nadel{transform:scale(calc(.52 / var(--zoom)))}
/* Handy: die Karte ist dort nur ~360 px breit, die Nadel waere 13 px hoch. */
@media (max-width:860px){ .wk-karte .wk-nadel{transform:scale(calc(1.15 / var(--zoom)))} }

/* Groesse aus index.html (--nadel), gilt vor den festen Werten oben */
.wk-karte[style*="--nadel"] .wk-nadel{transform:scale(calc(var(--nadel) / var(--zoom)))}