/* Gestalt der drei Ketten-Darstellungen.
   Was sie teilen: Rahmen, Kopf, Zahlenzeile. Was sie unterscheidet: wie die
   Stufen gezeigt werden -- und wie laut die Marken links sind. */

.kt-tour{width:100%;text-align:left;font:inherit;color:inherit;background:none;
  border:1px solid var(--linie);cursor:pointer;padding:0;display:block;
  margin-bottom:var(--a3);
  transition:border-color var(--t-nah) ease,background var(--t-nah) ease}
.kt-tour:hover{border-color:rgba(51,46,42,.3)}
.kt-tour:focus-visible{outline:2px solid var(--braun);outline-offset:2px}
.kt-tour[aria-current="true"]{border-color:var(--akzent);
  background:rgba(140,90,60,.05)}

.kt-tourkopf{padding:var(--a3);border-bottom:1px solid var(--fein)}
.kt-tourname{font-family:"Cormorant Garamond",Georgia,serif;font-size:23px;
  line-height:1.16em;color:var(--braun);display:block;margin-bottom:6px}
.kt-tourkurz{margin:0;font-size:15.5px;line-height:1.5em;color:var(--leise)}

.kt-was{flex:1 1 auto;min-width:0}
.kt-wastext{font-size:16px;line-height:1.5em;color:var(--text);display:block}
.kt-wasklein{display:block;font-family:Inter,system-ui,sans-serif;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--leise);margin-top:3px}

.kt-summe{display:flex;flex-wrap:wrap;gap:var(--a1) var(--a4);
  padding:var(--a2) var(--a3) var(--a3);border-top:1px solid var(--fein);
  font-family:Inter,system-ui,sans-serif;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--leise)}
.kt-summe b{color:var(--braun);font-weight:500}

/* --- A «Leiter» ---------------------------------------------------------
   Die Marken sind da, aber sie fluestern: eine haarfeine Achse, ein Punkt
   von drei Pixeln fuer die Bahn, fuer den Fussweg gar nichts. Vorher waren
   es gefuellte und offene Quadrate mit kraeftiger Linie -- die zogen mehr
   Aufmerksamkeit als der Text daneben. */
.kt-leiter{list-style:none;margin:0;padding:var(--a3)}
.kt-leiter .kt-stufe{display:flex;gap:var(--a3);align-items:flex-start;
  padding:8px 0;position:relative}
.kt-leiter .kt-marke{flex:0 0 auto;width:9px;align-self:stretch;
  position:relative}
.kt-leiter .kt-marke::before{content:"";position:absolute;top:0;bottom:-16px;
  left:4px;width:1px;background:rgba(51,46,42,.13)}
.kt-leiter .kt-stufe:last-child .kt-marke::before{bottom:auto;height:8px}
.kt-leiter .kt-bahn .kt-marke::after{content:"";position:absolute;left:1px;top:7px;
  width:7px;height:7px;background:var(--braun)}
/* Der Fussweg bekommt keine eigene Marke -- die Achse allein genuegt. */

/* --- B «Spalte» ---------------------------------------------------------
   Keine Marken. Der Unterschied steht in der Schrift und im Einzug. */
.kt-spalte{list-style:none;margin:0;padding:var(--a3)}
.kt-spalte .kt-zeile{padding:7px 0}
.kt-spalte .kt-bahn .kt-wastext{font-family:"Cormorant Garamond",Georgia,serif;
  font-size:19px;color:var(--braun)}
.kt-spalte .kt-fuss{padding-left:var(--a4)}
.kt-spalte .kt-fuss .kt-wastext{font-size:15px;color:var(--leise)}
.kt-spalte .kt-fuss .kt-wasklein{color:rgba(139,131,119,.8)}

/* --- C «Profil» ---------------------------------------------------------
   Ein Hoehenschnitt statt einer Liste. Keine Marke ueberhaupt -- die Form
   der Linie sagt alles, was die Quadrate sagen sollten. */
.kt-profil{padding:var(--a3)}
.kt-profilbild{display:block;width:100%;height:96px}
.kt-flaeche{fill:rgba(140,90,60,.10)}
.kt-linie{fill:none;stroke:var(--akzent);stroke-width:1.4;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.kt-profilfuss{display:flex;justify-content:space-between;
  font-family:Inter,system-ui,sans-serif;font-size:10px;letter-spacing:.14em;
  color:var(--leise);margin-top:6px;padding-top:6px;
  border-top:1px solid var(--fein)}
.kt-satz{margin:var(--a2) 0 0;font-size:15px;line-height:1.6em;color:var(--text)}

@media (prefers-reduced-motion:reduce){
  .kt-tour{transition:none}
}

/* --- D «Steig» ----------------------------------------------------------
   Leiter und Profil in einem: die Achse links IST der Hoehenschnitt, senkrecht
   gelesen. Je hoeher die Stufe, desto weiter rechts ihr Punkt. Man liest die
   Kette von oben nach unten wie eine Liste und sieht dabei den Aufstieg.
   Nur die Bahnen bekommen eine Marke -- der Fussweg ist eine blosse Ecke in
   der Linie. */
.kt-steig{padding:var(--a3);position:relative}
.kt-steigbild{position:absolute;left:var(--a3);top:var(--a3);
  pointer-events:none;overflow:visible}
.kt-steiglinie{fill:none;stroke:var(--akzent);stroke-width:1.4;
  stroke-linejoin:round;stroke-linecap:round}
.kt-steigpunkt{fill:var(--akzent)}
.kt-steigpunkt.start{fill:none;stroke:var(--akzent);stroke-width:1.2}

.kt-steigliste{list-style:none;margin:0;padding:0;position:relative}
.kt-steig .kt-sstufe{padding:8px 0 8px 58px;min-height:36px}
.kt-steig .kt-start .kt-wastext{font-family:"Cormorant Garamond",Georgia,serif;
  font-size:18px;color:var(--braun)}
.kt-steig .kt-fuss .kt-wastext{color:var(--leise);font-size:15px}
.kt-steig .kt-bahn .kt-wastext{font-family:"Cormorant Garamond",Georgia,serif;
  font-size:19px;color:var(--braun)}

/* Die Hoehenspanne der Achse, in einer Zeile. */
.kt-steigfuss{margin:var(--a2) 0 0;padding-top:var(--a2);
  border-top:1px solid var(--fein);
  font-family:Inter,system-ui,sans-serif;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--leise)}

/* --- E «Band» -----------------------------------------------------------
   Ein Gegenstand statt acht Zeilen: das Hoehenband. Die Bahnnamen haengen
   darunter an ihrer Stelle. Nichts springt, nichts wechselt die Schriftgroesse. */
.kt-band{padding:var(--a4) var(--a3) var(--a3)}
.kt-bandbild{display:block;width:100%;height:62px}
.kt-bandflaeche{fill:rgba(140,90,60,.18);stroke:var(--akzent);stroke-width:1;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.kt-bandmarken{position:relative;height:40px;margin-top:9px}
.kt-bandmarke{position:absolute;top:0;transform:translateX(-50%);
  font-family:Inter,system-ui,sans-serif;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--leise);white-space:nowrap;
  /* Ohne eigene Zeilenhoehe erbt die Marke die des Fliesstextes und wird
     37 px hoch -- dann reicht der Versatz der zweiten Reihe nicht. */
  line-height:1;padding-top:11px}
.kt-bandmarke::before{content:"";position:absolute;top:0;left:50%;width:1px;
  height:7px;background:rgba(140,90,60,.55)}
/* Jede zweite eine Reihe tiefer, mit laengerem Strich bis hinauf zum Band --
   bei vier Bahnen ueberlagerten sich die Namen sonst zu einem Klumpen. */
.kt-bandmarke.unten{top:24px;padding-top:0}
.kt-bandmarke.unten::before{top:-24px;height:31px}
/* Der letzte Name wuerde sonst ueber den rechten Rand ragen. */
.kt-bandmarke:last-child{transform:translateX(-100%)}
.kt-bandmarke:last-child::before{left:auto;right:0}
.kt-bandmarke:first-child{transform:translateX(0)}
.kt-bandmarke:first-child::before{left:0}

/* --- F «Ziffer» ---------------------------------------------------------
   Die stillste: ein Satz und drei Zahlen. Keine Liste, kein Diagramm.
   Was die Tour im Einzelnen ist, zeigt die Karte beim Waehlen. */
.kt-ziffer{padding:var(--a3) var(--a3) var(--a4)}
.kt-zsatz{margin:0 0 var(--a5);font-size:17px;line-height:1.66em;
  color:var(--text);max-width:44ch}
/* Vier Angaben in einem festen Raster statt in einer umbrechenden Zeile --
   umbrechend sass "2 Bahnen" allein in der zweiten Reihe und sah aus wie
   vergessen. */
/* Immer zwei Spalten. Vier nebeneinander sahen im 1440er Fenster gut aus,
   aber die Liste ist nur rund 600 px breit -- da brach "1818 m" auf zwei
   Zeilen um und "hoechster Punkt" gleich mit. Das Fenster ist hier das
   falsche Mass. */
.kt-zzahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--a5) var(--a4)}
.kt-zzahlen div{display:flex;flex-direction:column;gap:5px}
.kt-zzahlen b{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:clamp(28px,2.4vw,36px);line-height:.95;color:var(--braun);
  letter-spacing:-.01em;white-space:nowrap}
.kt-zzahlen span{font-family:Inter,system-ui,sans-serif;font-size:9.5px;
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--leise)}

/* In «Ziffer» ist die Zahlenzeile unten doppelt gemoppelt -- sie steht
   schon gross im Block. */
.kt-ziffer + .kt-summe{display:none}

/* --- G «Ablauf» ---------------------------------------------------------
   Hoehenschnitt UND vollstaendiger Ablauf, aneinander gekoppelt. Die Liste
   ist nicht "unter" der Kurve, sie IST die Kurve, nur ausgeschrieben. */
.kt-ablauf{padding:var(--a4) var(--a3) var(--a3)}
.kt-ablaufbild{display:block;width:100%;height:74px;overflow:visible}
.kt-ablaufflaeche{fill:rgba(140,90,60,.11)}
/* Die Abschnitte liegen ueber der Flaeche und sind einzeln ansprechbar.
   stroke-width traegt die Trefferflaeche mit -- ohne sie muesste man den
   Haarstrich genau treffen. */
.kt-abschnitt{fill:none;stroke:var(--akzent);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  cursor:pointer;transition:stroke-width var(--t-nah) var(--aus),
    stroke var(--t-nah) var(--aus)}
.kt-abschnitt.kt-fuss{stroke:rgba(140,90,60,.55)}
.kt-abschnitt.jetzt{stroke:var(--braun);stroke-width:3}
/* Der Rahmen traegt die Punkte -- das SVG selbst kann es nicht, dort wuerde
   die Streckung aus einem Kreis eine Ellipse machen (11 x 4,4 px gemessen). */
.kt-ablaufrahmen{position:relative}
.kt-ablaufpunkt{position:absolute;width:7px;height:7px;border-radius:50%;
  background:var(--akzent);transform:translate(-50%,-50%);pointer-events:none;
  box-shadow:0 0 0 2px var(--creme)}

.kt-ablaufachse{display:flex;justify-content:space-between;gap:var(--a3);
  font-family:Inter,system-ui,sans-serif;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--leise);margin-top:8px;padding-bottom:var(--a3);
  border-bottom:1px solid var(--fein)}

.kt-ablaufliste{list-style:none;margin:0;padding:var(--a2) 0 0}
.kt-astufe{display:flex;gap:var(--a3);align-items:flex-start;padding:8px 0;
  transition:background var(--t-nah) ease}
.kt-astufe.jetzt{background:rgba(140,90,60,.07)}
/* Die Marke fluestert, wie in «Leiter»: eine Achse und ein kleiner Punkt
   fuer die Bahn, fuer den Fussweg gar nichts. */
.kt-amarke{flex:0 0 auto;width:9px;align-self:stretch;position:relative}
.kt-amarke::before{content:"";position:absolute;top:0;bottom:-16px;left:4px;
  width:1px;background:rgba(51,46,42,.13)}
.kt-astufe:last-child .kt-amarke::before{bottom:auto;height:8px}
.kt-astufe.kt-bahn .kt-amarke::after{content:"";position:absolute;left:1px;top:7px;
  width:7px;height:7px;background:var(--braun)}
.kt-astufe.kt-bahn .kt-wastext{font-family:"Cormorant Garamond",Georgia,serif;
  font-size:18px;color:var(--braun)}

.kt-ahoehe{flex:0 0 auto;font-family:Inter,system-ui,sans-serif;font-size:11px;
  letter-spacing:.06em;color:var(--leise);white-space:nowrap;padding-top:4px}
.kt-astufe.kt-bahn .kt-ahoehe{color:var(--braun)}

@media (prefers-reduced-motion:reduce){
  .kt-abschnitt,.kt-astufe{transition:none}
}