/* ANFAHRT, Mittelteil. 28.09.2026.

   Hier steht NUR, was die Anfahrtsseite zusaetzlich braucht. Kopf, Menue,
   Fuss, Satzspiegel, Seitenrand, Farben und Schriften kommen aus
   lp-stil.css, kopf.css, menue.css und textseiten.css -- wer hier eine
   Breite oder eine Farbe setzt, bricht genau das.

   Geerbt aus .textseite:
     Raster     12 / 8 / 4 Spalten, Gasse 24 / 20 / 16
     Skala      1,25 ab 16: 16 / 20 / 25 / 31 / 39 / 49
     Senkrecht  Grundtakt 8 px, Abschnitt 80 / 60 / 40
     Farben     --grund --tinte --grau --text --linie

   EIGENE RECHNUNG, senkrecht: alles ist ein Vielfaches des Hausstakts von
   8 px. Der Fliesstext laeuft auf 24 px Zeile (3 Takte), eine Tabellenzeile
   misst 64 px (8 Takte), ein Abschnittskopf 88 px (11 Takte). Michael,
   28.09.2026: "Damit es schoener, uebersichtlicher und luxurioeser
   aussieht." Luft macht das, nicht Dekoration.

   DM MONO MACHT DAS UNTERGITTER UEBERFLUESSIG: dicktengleich und
   rechtsbuendig steht jede Zahl samt Einheit auf derselben Kante. Das ist
   der Grund, warum Fahrplaene mono gesetzt sind. */

/* Die Gliederungslinie der Seite. Michael, 29.09.2026: "striche zu dick".
   Gemessen war nicht die BREITE, sondern die FARBE: die Fugen standen in
   voller Tinte (#3D3733), die Tabellenlinien daneben in #DDD5C9. An vier
   Staerken nebeneinander verglichen (.45 / .32 / .22 / voll) -- .32
   gliedert noch sichtbar und wiegt nicht mehr schwer.
   NICHT betroffen: die zwei Linien des Eingabepaars im Routenplaner. Ein
   Feld, in das man tippt, darf kraeftiger sein als eine Fuge. */
:root{
  --an-pfeil:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2056%208%27%3E%3Cpath%20d%3D%27M0%204h53M48.5%200.8%2052.8%204%2048.5%207.2%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27square%27%2F%3E%3C%2Fsvg%3E");--strich:rgba(61,55,51,.32)}


.anfahrt{ --zeile:24px; --reihe:64px; }

/* ---------- Schild: Titel links, Erklaerung rechts, Linie darunter -----
   Michael, 28.09.2026: "Wenn wir jetzt genau dieses Layout uebernehmen,
   ganz oben, mit der Erklaerung." Uebernommen ist die Anordnung des
   Entwurfsschilds, ohne das Datum: eine Zeile, zwei Stimmen, ein Strich. */

/* ---------- Kopfblock: Kicker, grosse Zeile, Vorspann ------------------
   Michael, 28.09.2026: "Den Teil hast du mir vergessen, als Element wuerde
   ich das schon gerne haben." Er stand im Entwurf und fiel beim Umzug in
   die Website-Huelle heraus. Die Ueberschrift laeuft auf 88 px Zeile
   (11 Takte), damit auch zwei Zeilen auf dem Takt bleiben. */
/* Der Kopfblock ist der EINZIGE Block, der nicht auf dem 8er-Takt endet
   (gemessen 334 px). Grund ist kein Fehler, sondern ein Vorrang: die
   Hausregel verlangt Zeilenhoehen in em, nie in px -- 49 px mal 1,2 ergibt
   58,8 px, und das ist durch keine Rechnung ein Vielfaches von 8. In px
   gesetzt wuerde die Zeile beim Haltepunktwechsel nicht mitwachsen, und
   genau daran ist die Wellness-Seite am 28.08.2026 zerbrochen. Der Takt
   gilt hier also fuer die ABSTAENDE, nicht fuer den Zeilenfall der
   Ueberschrift. */
/* Michael, 28.09.2026: "Ueberschrift und Erklaertext sind nicht auf der
   gleichen Spalte. Mach das nebeneinander und die Ueberschrift oben etwas
   hoeher versetzt." Kicker ueber beides, darunter EINE Reihe mit zwei
   Feldern: Ueberschrift auf 1 bis 9, Text auf 9 bis 13. Der Text haengt an
   der Unterkante der Reihe, die Ueberschrift an der oberen -- den Versatz
   macht damit die Zeilenzahl des Textes und keine geratene Pixelzahl. */
.an-held{margin-top:calc(var(--takt)*16);row-gap:calc(var(--takt)*4);
  align-items:start}
.an-held .an-kicker{grid-column:1/13;grid-row:1;
  font:400 11px/calc(var(--takt)*2) Inter,system-ui,sans-serif;
  letter-spacing:.18em;text-transform:uppercase;color:var(--grau)}
/* GROESSEN AUS DER HAUSREGEL, nicht selbst gewaehlt (CLAUDE.md, 28.08.2026):
   Skala 1,25 ab 16 -- 16 / 20 / 25 / 31 / 39 / 49, und h1 steht auf
   31 (Mobil) / 39 (Tablet) / 49 (Desktop). Hier stand vorher
   clamp(39px, 6.4vw, 76px) und ein Vorspann auf 20 px: beides ueber der
   Skala, beides von Michael am 28.09.2026 beanstandet ("das ist viel zu
   gross"). Der Fliesstext ist in der Tabelle 16 px, auf JEDEM Haltepunkt.
   Zeilenhoehe in em, damit sie beim Haltepunktwechsel mitwaechst; 1,5em
   ergibt bei 16 px genau 24 px und haelt damit den Takt von 8. */
.an-held h1{grid-column:1/9;grid-row:2;align-self:start;
  font-size:var(--t5);line-height:1.2em;
  letter-spacing:-.015em;text-wrap:balance}
/* Der VERSATZ: der Text beginnt eine Ueberschriftszeile tiefer.
   align-items:end reichte nicht -- der Text ist sechs Zeilen hoch und damit
   hoeher als die zweizeilige Ueberschrift, beide Oberkanten lagen exakt
   gleich (gemessen 545 zu 545). Sieben Takte sind 56 px und damit knapp
   eine Zeile der 49-px-Ueberschrift (58,8 px). */
/* Michael, 28.09.2026: "Der muss schon in der Mitte anfangen und dann bis
   zum Bild gehen." Spalte 7 ist die Mitte von zwoelf, Spalte 13 die
   rechte Kante der Karte darunter. Vorher begann er auf 9 und stand
   damit im rechten Viertel. */
/* EINE KANTE FUER ALLES ERKLAERENDE. Michael, 29.09.2026: "Schau, dass
   die Schriften uebereinander stehen, vom Fliesstext." Gemessen waren
   es DREI linke Kanten: 73 fuer den Lesetext, 532 fuer Schild-Satz und
   Merksatz, 762 fuer den Vorspann. Der Vorspann war der Ausreisser --
   er stand auf Spalte 7, die beiden anderen auf 5. Jetzt alle drei auf
   Spalte 5. Damit hat die Seite genau zwei senkrechte Kanten fuer
   Schrift: eine fuer das Lesen, eine fuer das Erklaeren. */
.an-held .an-vorspann{grid-column:5/13;grid-row:2;
  margin-top:calc(var(--takt)*7);
  font-family:"Abhaya Libre",Georgia,serif;font-weight:400;
  font-size:var(--t0);line-height:1.6em;color:var(--text)}

/* ---------- Karte ---------- */
.an-karte{margin-top:calc(var(--takt)*10)}
.an-karte .an-rahmen{grid-column:1/13;border:1px solid var(--linie);
  overflow:hidden;line-height:0;background:var(--creme)}
.an-karte .an-rahmen img{width:100%;height:auto;display:block}
.an-fuss{margin-top:calc(var(--takt)*2)}
.an-fuss span:first-child{grid-column:1/5}
.an-fuss span:last-child{grid-column:9/13;text-align:right}
.an-fuss span{font:400 11px/1.45 Inter,system-ui,sans-serif;
  letter-spacing:.18em;text-transform:uppercase;color:var(--grau)}

/* ---------- Abschnittskopf: Nummer, Titel, Merksatz auf einer Kante ---- */
.an-kopf{margin-top:calc(var(--luft)*1.4);padding-top:calc(var(--takt)*5);
  border-top:1px solid var(--strich);align-items:baseline;
  grid-auto-rows:calc(var(--takt)*7)}
/* Michael, 28.09.2026: "Die Schrift an reale Kanten anlehnen, nicht an
   Raster, die keiner sieht. Der Satz soll oberhalb von der Telefonnummer
   sein." Deshalb hat die ganze Seite ab jetzt nur noch DREI senkrechte
   Linien: 1, 5, 9, 13. Jede davon ist sichtbar, weil eine Tabellenspalte
   auf ihr beginnt. Der Merksatz startet auf Linie 5 -- derselben, auf der
   darunter TELEFON, WERT, STRASSE und UEBER beginnen. */
.an-kopf .an-nr{grid-column:1/2}
.an-kopf h2{grid-column:2/5;font-size:var(--t3);line-height:1.2em}
.an-kopf .an-merk{grid-column:5/9;font-family:"Abhaya Libre",Georgia,serif;
  font-weight:400;font-size:var(--t0);line-height:1.6em;color:var(--grau)}
.an-nr{font:500 11px/1.45 "DM Mono",ui-monospace,monospace;letter-spacing:.14em;
  color:var(--akz,#8C5A3C);font-variant-numeric:lining-nums tabular-nums}

/* ---------- Tabellen ---------- */
.an-reihekopf{margin-top:calc(var(--takt)*5);padding-bottom:calc(var(--takt)*2);
  border-bottom:1px solid var(--strich);grid-auto-rows:calc(var(--takt)*2);
  font:400 11px/calc(var(--takt)*2) Inter,system-ui,sans-serif;
  letter-spacing:.18em;text-transform:uppercase;color:var(--grau)}
/* Die Sperrung haengt hinter dem letzten Zeichen nach. Ohne Ausgleich endet
   das Wort NEBEN der Rasterlinie, nicht auf ihr. */
.an-reihekopf span:last-child{margin-right:-.18em}

.an-tafel{border-bottom:1px solid var(--strich)}
/* Bei align-items:baseline waechst eine Rasterzeile auf groesste Oberlaenge
   PLUS groesste Unterlaenge aller Zellen -- Cormorant 25 neben DM Mono 12
   ergab 37 statt 32 px. Eine feste Spurhoehe bindet sie an den Takt: die
   Grundlinien fluchten weiter, die leere Unterlaenge darf ueberstehen. */
.an-zeile{
  /* Die Trennlinie zaehlt zum Takt mit: unten ein Pixel weniger Luft,
     sonst misst jede Zeile 57 statt 56. Gemessen 29.09.2026. */
  padding:calc(var(--takt)*2) 0 calc(var(--takt)*2 - 1px);
  border-bottom:1px solid var(--linie);
  align-items:baseline;grid-auto-rows:calc(var(--takt)*3)}
.an-tafel .an-zeile:last-child{border-bottom:0;padding-bottom:calc(var(--takt)*2)}
.an-gruppe{padding:calc(var(--takt)*4) 0;border-bottom:1px solid var(--linie);
  grid-auto-rows:calc(var(--takt)*3)}
.an-gruppe span{grid-column:1/13;font:400 11px/1.45 Inter,system-ui,sans-serif;
  letter-spacing:.18em;text-transform:uppercase;color:var(--akz,#8C5A3C)}

/* ====================================================================
   DIE DREI STIMMEN DES HAUSES -- am 28.09.2026 an /faq nachgemessen und
   NICHT selbst gewaehlt. Michael: "Der untere Teil muss sein wie unsere
   Webseiten jetzt immer waren."

     Name / Titel   Cormorant Garamond 300, 20 px, 1,25em, --tinte
     Fliesstext     Abhaya Libre 400, 17 px, 1,66em, --text
     Wort-Etikett   Inter 400, 11 px, 0,18em, VERSALIEN, --grau
     Zahl           DM Mono 500, 11 px, 0,14em, --grau

   textseiten.css schreibt die Trennung woertlich vor: "Die beiden kleinen
   Stimmen: Etikett in Inter, Ziffer in DM Mono". Ich hatte beides in
   DM Mono gesetzt und die Namen auf 25 statt 20 px -- daher sah der untere
   Teil fremd aus.

   display:block am Namen bleibt: als Inline-Kasten wird er neben dem
   unsichtbaren Strut der Zelle gesetzt, und die Zeile ist dann so hoch wie
   beide zusammen. */
.an-name{display:block;font-family:"Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;
  font-weight:300;font-size:var(--t1);line-height:1.25em;letter-spacing:-.005em;
  color:var(--tinte);margin:0}
.an-wert{font:500 11px/1.45 "DM Mono",ui-monospace,monospace;letter-spacing:.14em;
  color:var(--grau);font-variant-numeric:lining-nums tabular-nums}
.an-wert u{text-decoration:none;letter-spacing:.14em}
.an-lauf{display:block;font-family:"Abhaya Libre",Georgia,serif;font-weight:400;
  font-size:17px;line-height:1.66em;color:var(--text)}
.an-klein{font:400 11px/1.45 Inter,system-ui,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grau)}

/* Telefonnummern sind Text, kein Netzlink -- sie bleiben in der Hausfarbe,
   auch nachdem sie einmal gewaehlt wurden. */
.an-tafel a,.an-tafel a:visited{color:var(--text);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:var(--linie);transition:text-decoration-color .18s ease,color .18s ease}
.an-tafel a:hover{text-decoration-color:var(--tinte);color:var(--tinte)}

/* Spalten. Jede beginnt und endet auf einer Rasterlinie. */
.sp-ort {grid-column:1/5}
.sp-weg {grid-column:5/9}
.sp-km  {grid-column:9/11;text-align:right}
.sp-zt  {grid-column:11/13;text-align:right}

.an-wegzeile{padding:calc(var(--takt)*4) 0 calc(var(--takt)*2);
  border-bottom:1px solid var(--linie);align-items:baseline;
  grid-template-rows:calc(var(--takt)*3) auto;row-gap:calc(var(--takt)*2)}
.an-tafel .an-wegzeile:last-child{border-bottom:0}
.sp-wn  {grid-column:1/5}
.sp-str {grid-column:5/9}
.sp-maut{grid-column:9/13;text-align:right}
.sp-satz{grid-column:1/9}

.sp-et {grid-column:1/5}
.sp-wt {grid-column:5/9}
.sp-anm{grid-column:9/13}

.sp-hf {grid-column:1/5}
.sp-kz {grid-column:5/9}
.sp-fkm{grid-column:9/11;text-align:right}
.sp-fzt{grid-column:11/13;text-align:right}

/* ---------- Fliesstext: sieben Spalten, Zeile drei Takte -------------- */
.an-text{margin-top:calc(var(--takt)*5);align-items:start}
/* Die Textspalte endet auf Linie 9 -- genau dort beginnt die Nebentafel.
   Die Zeilenlaenge begrenzt max-width, nicht eine erfundene Spaltenzahl. */
.an-text p{grid-column:1/9;font-family:"Abhaya Libre",Georgia,serif;font-weight:400;
  font-size:17px;line-height:1.66em;color:var(--text);max-width:64ch}
.an-text p + p{margin-top:calc(var(--takt)*3)}
.an-neben{grid-column:9/13;border-top:1px solid var(--strich);
  border-bottom:1px solid var(--strich)}
.an-paar{display:grid;grid-template-columns:1fr auto;column-gap:var(--gasse);
  grid-auto-rows:calc(var(--takt)*3);padding:calc(var(--takt)*2) 0;
  align-items:baseline;border-bottom:1px solid var(--linie)}
.an-neben .an-paar:last-child{border-bottom:0}
.an-neben dt,.an-neben dd{margin:0}
.an-neben dd{text-align:right}

.an-quelle{margin-top:calc(var(--takt)*2)}
.an-quelle p{grid-column:1/9;font:400 11px/1.6 Inter,system-ui,sans-serif;
  letter-spacing:.02em;color:var(--grau)}
.an-quelle a{color:var(--akz,#8C5A3C)}

/* ---------- Schluss ---------- */
.an-schluss{margin-top:var(--luft);padding-top:calc(var(--takt)*4);
  border-top:1px solid var(--strich);align-items:start}
/* Eine Zeile statt drei Spalten: der Satz links, die zwei Knoepfe rechts,
   beide auf derselben Oberkante. Die Anschriftsspalte ist entfallen (siehe
   Kommentar im Inhalt), damit steht hier nichts mehr, was der Fussbereich
   zwei Bildschirmzeilen weiter unten noch einmal sagt. */
.an-schluss .an-ruf{grid-column:1/7;align-self:center}
/* Michael, 29.09.2026: "Bild eins raeume auf". Gemessen waren die beiden
   Knoepfe 179 und 225 px breit und standen untereinander -- zwei ungleiche
   Kanten uebereinander sind der Grund, warum der Block ausgefranst wirkt.
   Jetzt beide gleich breit ueber die ganze Spalte und gleich hoch.
   Dazu sind die zwei Etiketten "Anschrift" und "Noch Fragen zum Weg"
   entfallen: zwei Kleinzeilen nebeneinander wiederholen nur, was der Inhalt
   selbst sagt (der Hausname ist die Anschrift, der Satz ist die Frage). */
.an-schluss .an-tun{grid-column:9/13;display:flex;flex-direction:column;
  align-items:stretch;gap:var(--takt)}
.an-schluss .an-tun .an-knopf{width:100%;text-align:center;
  min-height:calc(var(--takt)*6);display:flex;align-items:center;
  justify-content:center}
.an-schluss p{font-family:"Abhaya Libre",Georgia,serif;font-weight:400;
  font-size:17px;line-height:1.66em;color:var(--text)}
/* Der Hausname traegt die Namens-Stimme des Hauses, nicht die Fliesstext-
   Stimme. Damit braucht die Spalte kein Etikett mehr ueber sich. */
.an-schluss .an-haus{font-family:"Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;
  font-weight:300;font-size:var(--t2);line-height:1.2em;letter-spacing:-.005em;
  color:var(--tinte);margin-bottom:calc(var(--takt))}
.an-schluss .an-et{font:400 11px/calc(var(--takt)*3) Inter,system-ui,sans-serif;
  letter-spacing:.18em;text-transform:uppercase;color:var(--grau);
  margin-bottom:calc(var(--takt))}
.an-knopf{display:inline-block;border:1px solid var(--tinte);border-radius:0;
  background:transparent;color:var(--tinte);padding:calc(var(--takt)*1.5) calc(var(--takt)*3);
  font:400 11px/calc(var(--takt)*2) Inter,system-ui,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .14s cubic-bezier(.23,1,.32,1)}
.an-knopf:hover{background:var(--tinte);color:var(--grund)}
.an-knopf.voll{background:var(--tinte);color:var(--grund)}
.an-knopf.voll:hover{background:transparent;color:var(--tinte)}
.an-knopf:active{transform:scale(.98)}

/* ---------- Acht Spalten (bis 1199 px) ----------------------------------
   Das Haus schaltet hier auf acht Spalten. Damit die Regel haelt -- jeder
   Textblock beginnt auf einer Linie, die man sieht -- wandern ALLE Blöcke
   mit: die Tabellenspalten auf 1 / 3 / 5 / 7 / 9, der Merksatz auf die 3,
   also wieder genau ueber die Telefonspalte. Der Abschnittskopf bricht
   dafuer um, weil die Ueberschrift in zwei Spalten nicht mehr steht. */
@media (max-width:1199px){
  .an-held h1{grid-column:1/5;font-size:var(--t4)}
  .an-kopf h2{font-size:var(--t2)}
  .an-held .an-kicker{grid-column:1/9}
  .an-held .an-vorspann{grid-column:5/9}
  .an-karte .an-rahmen{grid-column:1/9}
  .an-fuss span:first-child{grid-column:1/4}
  .an-fuss span:last-child{grid-column:6/9}
  /* Zwei feste Spuren statt auto: mit auto mass der Kopf 127 px und stand
     nicht mehr auf dem Takt. 40 + 16 + 32 plus 32 Polster = 120 = 15 Takte. */
  .an-kopf{grid-template-rows:calc(var(--takt)*5) calc(var(--takt)*4);
    grid-auto-rows:calc(var(--takt)*4);row-gap:calc(var(--takt)*2)}
  .an-kopf .an-nr{grid-column:1/2;grid-row:1}
  .an-kopf h2{grid-column:2/9;grid-row:1}
  .an-kopf .an-merk{grid-column:4/9;grid-row:2}
  .an-gruppe span{grid-column:1/9}
  /* Drei statt zwei Spalten fuer den Namen: bei zwei (200 px) brach
     "Taxi Serfaus · Fiss · Ladis" um und sprengte die Zeilenhoehe,
     gemessen am 28.09.2026 bei 800 px Fensterbreite. Dazu eine Stufe
     kleiner in der Schrift, damit auch der laengste Name einzeilig steht. */
  .an-name{font-size:var(--t1)}
  .sp-ort{grid-column:1/4} .sp-weg{grid-column:4/6}
  .sp-km{grid-column:6/7}  .sp-zt{grid-column:7/9}
  .sp-wn{grid-column:1/4}  .sp-str{grid-column:4/6} .sp-maut{grid-column:6/9}
  .sp-satz{grid-column:1/7}
  .sp-et{grid-column:1/4}  .sp-wt{grid-column:4/6} .sp-anm{grid-column:6/9}
  .sp-hf{grid-column:1/4}  .sp-kz{grid-column:4/6} .sp-fkm{grid-column:6/7} .sp-fzt{grid-column:7/9}
  .an-text p{grid-column:1/6}
  .an-neben{grid-column:6/9}
  .an-quelle p{grid-column:1/7}
  .an-schluss .an-ruf{grid-column:1/5}
  .an-schluss .an-tun{grid-column:5/9}
}

/* ---------- Vier Spalten (bis 809 px) -----------------------------------
   Vier Spalten tragen keine Tabelle mehr. Die Kopfreihe faellt weg, jede
   Zeile wird zu einem kleinen Block: Name oben, Werte darunter. Damit gibt
   es nur noch eine Linie, die linke -- und auf der stehen alle. */
@media (max-width:809px){
  /* Vier Spalten tragen kein Nebeneinander: gestapelt, Text unter dem Titel. */
  .an-held h1{grid-column:1/5;grid-row:2;font-size:var(--t3)}
  .an-held .an-kicker{grid-column:1/5}
  .an-held .an-vorspann{grid-column:1/5;grid-row:3;margin-top:calc(var(--takt)*3)}
  .an-karte .an-rahmen{grid-column:1/5}
  .an-fuss span:first-child,.an-fuss span:last-child{grid-column:1/5;text-align:left}
  .an-kopf .an-nr,.an-kopf h2,.an-kopf .an-merk{grid-column:1/5;grid-row:auto}
  .an-reihekopf{display:none}
  .an-gruppe span{grid-column:1/5}
  .an-zeile{grid-auto-rows:auto;row-gap:calc(var(--takt))}
  .sp-ort{grid-column:1/5} .sp-weg{grid-column:1/3}
  .sp-km{grid-column:3/4}  .sp-zt{grid-column:4/5}
  .sp-wn,.sp-str,.sp-satz{grid-column:1/5}
  .sp-maut{grid-column:1/5;text-align:left}
  .sp-et{grid-column:1/3}  .sp-wt{grid-column:3/5;text-align:right} .sp-anm{grid-column:1/5}
  .sp-hf{grid-column:1/5}  .sp-kz{grid-column:1/3} .sp-fkm{grid-column:3/4} .sp-fzt{grid-column:4/5}
  .an-wegzeile{grid-template-rows:auto}
  .an-text p,.an-neben,.an-quelle p{grid-column:1/5}
  .an-neben{margin-top:calc(var(--takt)*4)}
  .an-schluss .an-ruf,.an-schluss .an-tun{grid-column:1/5}
  .an-schluss .an-tun{margin-top:calc(var(--takt)*4)}
}

/* ====================================================================
   DREI FASSUNGEN DES UNTEREN TEILS. 28.09.2026.

   Michael: "Unten ist immer zu viel Platz auf der rechten Seite, das soll
   wieder zusammen dort erscheinen." Gemessen: in drei von vier Textbloecken
   lagen rechts 349 px ueber 113 bis 278 px Hoehe brach.

   Die drei Antworten stammen aus den Fassungen, die am 12.09.2026 schon
   einmal nebeneinander standen (ANFAHRT.html): A war der Fliesstext,
   B die Aufklappliste, C die klebende Karte. Umgesetzt mit den Schriften
   und dem Raster der Website, nicht mit dem alten Entwurfsstil.

   Geschaltet wird ueber data-f am <main>; ohne Attribut gilt Fassung 1.
   ==================================================================== */

/* Die Schiene und die Aufklapp-Mechanik ruhen, solange sie nicht dran sind. */
.an-schiene{display:none}
.anfahrt .an-lauf{display:block}

/* ---------- FASSUNG 1: Fakten rechts, in JEDEM Abschnitt ---------------
   Der Fliesstext bleibt, wo er ist. Neu ist, dass auch Flug und Bahn eine
   Faktenspalte bekommen -- vorher hatten nur zwei der vier eine, und genau
   dort entstand das Loch. */
.anfahrt[data-f="1"] .an-text p{grid-column:1/8}
.anfahrt[data-f="1"] .an-neben{grid-column:9/13;position:sticky;top:calc(var(--takt)*16)}

/* ---------- FASSUNG 2: die Karte klebt links ---------------------------
   Die Karte wandert aus dem Kopf in eine Schiene, die beim Scrollen stehen
   bleibt. Alles andere rueckt nach rechts. Der rechte Rand kann nicht mehr
   leer sein, weil der ganze Inhalt dort laeuft. */
.anfahrt[data-f="2"]{position:relative}
.anfahrt[data-f="2"] .an-schiene{display:block;position:sticky;
  top:calc(var(--takt)*16);float:left;width:calc(33.333% - var(--gasse));
  margin-bottom:var(--luft)}
.anfahrt[data-f="2"] .an-schiene .an-rahmen{border:1px solid var(--linie);
  overflow:hidden;line-height:0;background:var(--creme)}
.anfahrt[data-f="2"] .an-schiene .an-rahmen img{width:100%;height:auto;display:block}
.anfahrt[data-f="2"] .an-schiene .an-neben{margin-top:calc(var(--takt)*3)}
.anfahrt[data-f="2"] .an-karte,.anfahrt[data-f="2"] .an-fuss{display:none}
.anfahrt[data-f="2"] .an-held,
.anfahrt[data-f="2"] .an-kopf,.anfahrt[data-f="2"] .an-reihekopf,
.anfahrt[data-f="2"] .an-tafel,.anfahrt[data-f="2"] .an-text,
.anfahrt[data-f="2"] .an-quelle,.anfahrt[data-f="2"] .an-schluss{
  margin-left:calc(33.333% + var(--gasse))}
/* Im schmaleren Feld haben Nummer, Titel und Merksatz nicht mehr
   nebeneinander Platz -- gemessen am 28.09.2026: "Taxi und Transfer" brach
   um und der Merksatz lief darueber. Also stapeln, wie beim Achtspalter. */
.anfahrt[data-f="2"] .an-kopf{grid-template-rows:auto auto;row-gap:calc(var(--takt)*2)}
.anfahrt[data-f="2"] .an-kopf .an-nr{grid-column:1/2;grid-row:1}
.anfahrt[data-f="2"] .an-kopf h2{grid-column:2/13;grid-row:1}
.anfahrt[data-f="2"] .an-kopf .an-merk{grid-column:2/9;grid-row:2}
.anfahrt[data-f="2"] .sp-anm{grid-column:9/13}
.anfahrt[data-f="2"] .an-text p{grid-column:1/13}
.anfahrt[data-f="2"] .an-neben{grid-column:1/13;margin-top:calc(var(--takt)*4)}
.anfahrt[data-f="2"] .an-held h1{grid-column:1/13}

/* ---------- FASSUNG 3: Aufklappliste ----------------------------------
   Kein Fliesstextblock mehr. Jeder Abschnitt ist eine Zeile ueber die volle
   Breite; der erklaerende Satz liegt darunter und oeffnet sich auf Klick.
   Wo kein Fliesstext steht, kann rechts nichts frei bleiben. */
.anfahrt[data-f="3"] .an-text{display:block;margin-top:calc(var(--takt)*4);
  border-top:1px solid var(--linie)}
.anfahrt[data-f="3"] .an-text p{display:none}
.anfahrt[data-f="3"] .an-text.offen p{display:block;grid-column:1/9;
  max-width:64ch;margin-top:calc(var(--takt)*2)}
.anfahrt[data-f="3"] .an-neben{grid-column:1/13;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gasse);
  border-top:0;border-bottom:0;margin-top:calc(var(--takt)*2)}
.anfahrt[data-f="3"] .an-paar{border-bottom:0;display:block;padding:0}
.anfahrt[data-f="3"] .an-paar dd{text-align:left;margin-top:calc(var(--takt)*.5)}
.an-mehr{display:none}
.anfahrt[data-f="3"] .an-mehr{display:flex;width:100%;justify-content:space-between;
  align-items:baseline;background:none;border:0;border-radius:0;cursor:pointer;
  padding:calc(var(--takt)*2) 0;text-align:left;
  font:400 11px/1.45 Inter,system-ui,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grau)}
.anfahrt[data-f="3"] .an-mehr:hover{color:var(--tinte)}
.anfahrt[data-f="3"] .an-mehr span:last-child{font-family:"DM Mono",ui-monospace,monospace;
  font-weight:500;letter-spacing:.14em}

/* Die Schaltleiste mit den drei Fassungen ist am 29.09.2026 entfallen.
   Michael: "etwas mehr aufraeumen, ein zu starkes Wirrwarr". Drei graue
   Knoepfe ganz oben waren das Lauteste auf der Seite, und die Wahl hat
   sich erledigt: seit die Karte lebt und im Abschnitt 01 steht, ergibt
   die klebende Karte (Fassung 2) keinen Sinn mehr. Es bleibt Fassung 1,
   Fakten rechts. Die Regeln der anderen beiden stehen weiter unten und
   greifen nur ueber data-f -- sie schaden nicht und lassen sich in
   einer Zeile wieder einschalten. */

@media (max-width:1199px){
  .an-wahl-et{grid-column:1/3}
  .an-wahl-knoepfe{grid-column:3/9}
  .anfahrt[data-f="1"] .an-text p{grid-column:1/6}
  .anfahrt[data-f="1"] .an-neben{grid-column:6/9}
  .anfahrt[data-f="3"] .an-neben{grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:calc(var(--takt)*2)}
}
@media (max-width:809px){
  .an-wahl-et,.an-wahl-knoepfe{grid-column:1/5}
  /* Am Telefon gibt es keine zweite Spalte, also auch keinen freien Rand:
     alle drei Fassungen fallen auf dieselbe einspaltige Anordnung zurueck. */
  .anfahrt[data-f="1"] .an-text p,.anfahrt[data-f="1"] .an-neben{grid-column:1/5}
  .anfahrt[data-f="1"] .an-neben{position:static}
  .anfahrt[data-f="2"] .an-schiene{display:none}
  .anfahrt[data-f="2"] .an-karte{display:block}
  .anfahrt[data-f="2"] .an-held,
  .anfahrt[data-f="2"] .an-kopf,.anfahrt[data-f="2"] .an-reihekopf,
  .anfahrt[data-f="2"] .an-tafel,.anfahrt[data-f="2"] .an-text,
  .anfahrt[data-f="2"] .an-quelle,.anfahrt[data-f="2"] .an-schluss{margin-left:0}
  .anfahrt[data-f="3"] .an-neben{grid-template-columns:minmax(0,1fr)}
}

/* ====================================================================
   ROUTENPLANER, in den Hausstimmen. 28.09.2026.
   Michael wollte die Kombination AUS dem Rechner-Entwurf und der Website,
   ich hatte den Rechner beim Umzug weggelassen. Hier ist er zurueck --
   aber mit Abhaya, Inter und DM Mono statt mit dem alten Entwurfsstil.
   Feld und Knopf teilen die zwoelf Spalten auf den Linien 1, 5, 9, 13.
   ==================================================================== */
.an-rechner{margin-top:calc(var(--takt)*5);row-gap:calc(var(--takt)*3);
  align-items:end}
.an-feld{grid-column:1/9;position:relative}
.an-feld label{display:block;margin-bottom:calc(var(--takt))}
.an-feld input{display:block;width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--tinte);border-radius:0;padding:calc(var(--takt)) 0;
  color:var(--tinte);font-family:"Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;
  font-weight:300;font-size:var(--t2);line-height:1.25em;
  transition:border-color .18s ease}
.an-feld input::placeholder{color:var(--grau);font-size:var(--t1)}
.an-feld input:focus{outline:0;border-bottom-color:var(--akz,#8C5A3C)}
.an-rechner .an-knopf{grid-column:9/13;justify-self:stretch;text-align:center}

/* Die Liste waechst ueber grid-template-rows von 0fr auf 1fr, NICHT ueber
   max-height. max-height rechnet der Browser in jedem Einzelbild neu durch
   das Layout; 0fr auf 1fr laeuft im Compositor. Dafuer braucht die Liste
   einen inneren Kasten -- den setzt das Javascript mit. */
.an-tipps{position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--grund);
  border:1px solid var(--tinte);border-top:0;display:grid;grid-template-rows:0fr;
  opacity:0;overflow:hidden;
  transition:grid-template-rows .2s cubic-bezier(.23,1,.32,1),opacity .16s ease}
.an-tipps[data-offen="ja"]{grid-template-rows:1fr;opacity:1}
.an-tipps-innen{min-height:0;overflow-y:auto;max-height:calc(var(--takt)*34)}
.an-tipps button{display:block;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--linie);border-radius:0;
  padding:calc(var(--takt)*1.5) calc(var(--takt)*2);cursor:pointer;
  transition:background .14s ease}
.an-tipps button:last-child{border-bottom:0}
.an-tipps button:hover,.an-tipps button[data-aktiv="ja"]{background:rgba(107,99,95,.07)}
.an-tipps .ort{display:block;font-family:"Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;
  font-weight:300;font-size:var(--t1);line-height:1.25em;color:var(--tinte)}
.an-tipps .land{font:400 11px/1.45 Inter,system-ui,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grau)}


/* Die zehn Schnellwahl-Knoepfe sind am 28.09.2026 entfallen. Michael:
   "Brauchen wir das ueberhaupt?" Nein: das Eingabefeld kann JEDE Stadt,
   die Staedtetabelle darunter fuehrt dieselben zehn schon mit Zahlen, und
   zwei Reihen Knoepfe standen zwischen Frage und Antwort. */
.an-stand{grid-column:1/13;min-height:calc(var(--takt)*2);
  font:400 11px/1.6 Inter,system-ui,sans-serif;letter-spacing:.02em;color:var(--grau)}
.an-stand a{color:var(--akz,#8C5A3C)}

/* Die Zeile "ODER SIEH IN DER TABELLE NACH: 24 STAEDTE, GEMESSEN" ist am
   28.09.2026 entfallen. Michael: "total unuebersichtlich, hin und her."
   Gemessen war der Grund: im Abschnitt standen VIER Versalzeilen
   untereinander -- Merksatz, Feldbeschriftung, diese Zeile, Kopfreihe.
   Der Merksatz oben sagt bereits "Von 24 Staedten aus gerechnet"; die
   Zeile wiederholte ihn nur lauter. Stattdessen trennt eine Haarlinie
   den Rechner von der Tabelle. */
.an-tabellentitel{display:none}

/* Die Empfehlungszeile hebt sich nur durch die Akzentfarbe ab, nicht durch Fett. */
.an-zeile .an-rang{font:500 11px/1.45 "DM Mono",ui-monospace,monospace;
  letter-spacing:.14em;color:var(--grau)}
.an-zeile.best .an-rang{color:var(--akz,#8C5A3C)}
.an-zeile .an-satz{grid-column:1/9;margin-top:calc(var(--takt)*1.5)}

@media (max-width:1199px){
  .an-feld{grid-column:1/6}
  .an-rechner .an-knopf{grid-column:6/9}
  .an-stand{grid-column:1/9}
  .an-zeile .an-satz{grid-column:1/7}
}
@media (max-width:809px){
  .an-feld,.an-rechner .an-knopf,.an-stand,
  .an-tabellentitel span,.an-zeile .an-satz{grid-column:1/5}
}

/* Eine Ergebniszeile MIT Erklaerungssatz braucht eine zweite Spur -- mit der
   festen Spurhoehe der normalen Zeile lief der Satz in die naechste Zeile
   hinein, gemessen am 28.09.2026. */
.an-zeile.mit-satz{grid-template-rows:calc(var(--takt)*3) auto;
  row-gap:calc(var(--takt)*1.5);grid-auto-rows:auto}

/* ====================================================================
   ROUTENPLANER, zweiter Anlauf. 28.09.2026.
   Michael: "Es sieht aus wie Chaos, keine mathematische Anordnung, keine
   Grosszuegigkeit, kein Luxus, keine Eleganz."

   Was chaotisch war, benannt:
   1. Die Ergebniszeile trug rechts DREI Dinge (km, Zeit, Rang) auf drei
      verschiedenen Kanten. Jetzt zwei -- dieselben, auf denen in der
      Staedtetabelle Strecke und Fahrt stehen. Der Rang ist ein Kicker
      ueber dem Namen.
   2. Die Schnellwahl war ein Haufen aus flex-wrap mit ungleichen Breiten.
      Jetzt ein Raster aus fuenf gleichen Spalten, zwei ruhige Reihen.
   3. Der Statussatz lief ueber die ganze Breite. Jetzt acht Spalten.
   4. Die Zeilen standen zu eng. Polster von zwei auf vier Takte.
   ==================================================================== */

/* -- Grosszuegigkeit: der Block bekommt Luft, nicht Dekoration -- */
.an-rechner{margin-top:calc(var(--takt)*7);row-gap:calc(var(--takt)*4)}
.an-feld label{margin-bottom:calc(var(--takt)*2)}
.an-feld input{padding:calc(var(--takt)*1.5) 0;font-size:var(--t3)}
.an-feld input::placeholder{font-size:var(--t2)}

/* -- Schnellwahl als Raster, nicht als Haufen -- */

/* -- Statussatz auf Lesebreite, nicht ueber die ganze Seite -- */
.an-stand{grid-column:1/9;line-height:1.7}

/* -- Vorschlagsliste: grosszuegige Zeilen, damit sie sich anfassen laesst -- */
.an-tipps{box-shadow:0 18px 40px -28px rgba(61,55,51,.55)}
.an-tipps button{padding:calc(var(--takt)*2) calc(var(--takt)*2.5)}
.an-tipps .land{display:block;margin-top:calc(var(--takt)*.5)}

/* -- Die Ergebniszeile: vier Spalten, zwei rechte Kanten, ein Kicker -- */
#ergebnis{margin-top:calc(var(--takt)*4);border-top:1px solid var(--strich)}
/* Der Rechner ist ein eigener Block, die Staedtetabelle der naechste.
   Eine Haarlinie und acht Takte Luft sagen das, ohne ein Wort. */
.an-rechner + .an-reihekopf,#ergebnis + .an-reihekopf{
  margin-top:calc(var(--takt)*8);padding-top:calc(var(--takt)*4);
  border-top:1px solid var(--linie)}
#ergebnis .an-zeile{padding:calc(var(--takt)*4) 0}
.an-rang{display:block;margin-bottom:calc(var(--takt));
  font:400 11px/1.45 Inter,system-ui,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grau)}
.an-zeile.best .an-rang{color:var(--akz,#8C5A3C)}
/* Der Name traegt jetzt einen Kicker ueber sich, die Zelle also zwei Zeilen.
   Ohne diese Spur schnitte die feste Zeilenhoehe den Namen ab. */
.an-zeile.mit-satz,#ergebnis .an-zeile{grid-auto-rows:auto}
#ergebnis .sp-ort{grid-row:span 1}
#ergebnis .an-satz{grid-column:1/9;margin-top:calc(var(--takt)*2)}
#ergebnis .an-lauf{font-size:var(--t0);line-height:1.7em;max-width:58ch}

@media (max-width:1199px){
  .an-stand{grid-column:1/7}
  #ergebnis .an-satz{grid-column:1/7}
}
@media (max-width:809px){
  .an-stand,#ergebnis .an-satz{grid-column:1/5}
  .an-feld input{font-size:var(--t2)}
}

/* ====================================================================
   ERKLAERSCHRIFT: KEIN MONO. Michael, 28.09.2026: "keine mono schrift."
   Damit ist die Anweisung von zwoelf Minuten vorher ("die soll auf jeden
   Fall Mono sein als Erklaerschrift") zurueckgenommen. Die drei kurzen
   Saetze neben den Ueberschriften laufen wieder in der Fliesstextschrift
   des Hauses, so wie auf /faq der .ts-stand-Vorspann.
   Die ZAHLEN in den Tabellen bleiben DM Mono -- das ist nicht meine Wahl,
   sondern der Hausstil: textseiten.css schreibt "Etikett in Inter, Ziffer
   in DM Mono", und dicktengleiche Ziffern sind der Grund, warum die
   Spalten ueberhaupt auf einer Kante stehen. Soll das auch weg, sag es --
   dann brauchen die Zahlenspalten eine andere Loesung.
   ==================================================================== */
.an-kopf .an-merk,.an-held .an-vorspann{
  font-family:"Abhaya Libre",Georgia,serif;font-weight:400;
  font-size:var(--t0);line-height:1.6em;letter-spacing:normal;color:var(--grau)}

/* ====================================================================
   LEBENDE KARTE. 28.09.2026.
   Michael: "Warum ist die Karte nur ein Foto? Warum kann ich nicht gleich
   ueber der Karte eingeben, von wo ich komme, und sie zeigt mir die Route?"

   Gebaut mit MapLibre GL JS und OpenFreeMap (Stil positron) -- beides frei,
   beides OHNE Schluessel und ohne Konto, am 28.09.2026 mit HTTP 200
   nachgemessen. Die Route zeichnet OSRM als GeoJSON, derselbe Dienst, der
   auch die Zahlen liefert; damit koennen Linie und Zahl nicht auseinander
   laufen. Ohne Javascript bleibt die gezeichnete Karte als Bild stehen.
   ==================================================================== */
.an-kartefeld{margin-top:calc(var(--takt)*7);border:1px solid var(--linie);
  background:var(--creme);overflow:hidden}
#karte{width:100%;height:clamp(360px,46vh,560px)}
.an-kartefeld noscript img{width:100%;height:auto;display:block}
.an-kartenfuss{margin-top:calc(var(--takt)*2)}
.an-kartenfuss span{grid-column:1/9;font:400 11px/1.45 Inter,system-ui,sans-serif;
  letter-spacing:.06em;color:var(--grau)}

/* Die Beschriftungen der Karte sollen nicht lauter sein als die Seite. */
.maplibregl-ctrl-attrib{font:400 10px/1.4 Inter,system-ui,sans-serif!important;
  background:rgba(243,238,231,.82)!important}
.maplibregl-ctrl-group{border-radius:0!important;
  box-shadow:0 0 0 1px var(--linie)!important}
.maplibregl-ctrl-group button{border-radius:0!important}
/* Die Nadel traegt das Signet. Es ist eine Strichzeichnung, also braucht es
   auf der hellen Karte eine Aura -- die steckt als zweiter, dickerer Zug in
   Papierfarbe im SVG selbst, nicht als Kreis dahinter (ein zweiter Kreis
   neben dem Signetkreis wuerde doppelt aussehen). */
/* Seitenverhaeltnis 44:64 wie der viewBox. Der Hover waechst aus der
   SPITZE heraus, nicht aus der Mitte -- sonst wandert der Ort unter der
   Nadel weg, waehrend sie groesser wird. */
/* 48 x 70 statt 44 x 64: bei 44 px liefen die Innenlinien des Signets
   mit seinem eigenen Ring zusammen. Gemessen an drei Groessen
   nebeneinander am 29.09.2026. */
.an-marke-haus{width:48px;height:76px;cursor:pointer;
  /* viewBox 84 x 134, Spitze bei y=0 von -120 -- das sind 89,6 Prozent
     der Hoehe. Der Hover waechst genau dort heraus. */
  transform-origin:50% 89.6%;
  transition:transform .18s cubic-bezier(.23,1,.32,1)}
.an-marke-haus svg{width:100%;height:100%;display:block}
.an-marke-haus:hover{transform:scale(1.08)}
@media (max-width:809px){ .an-marke-haus{width:40px;height:64px} }

/* ---------- Die Talstation: Gondel und Schild -------------------------
   Michael, 29.09.2026: Vorschlag A. Anders als die Hausnadel ist das
   hier KEIN Tropfen -- sonst haette die Karte zwei gleiche Zeichen und
   der Gast muesste zweimal hinsehen, welches sein Haus ist. Eine runde
   Scheibe auf Papiergrund traegt das Gondelzeichen, darunter steht die
   Sache und die gemessene Gehzeit. */
.an-marke-bahn{display:flex;flex-direction:column;align-items:center;
  gap:5px;cursor:default}
.an-scheibe{width:36px;height:36px;border-radius:50%;background:var(--grund);
  border:1.5px solid var(--tinte);display:flex;align-items:center;
  justify-content:center;box-shadow:0 2px 8px rgba(61,55,51,.18);
  transition:transform .18s cubic-bezier(.23,1,.32,1)}
.an-scheibe svg{width:22px;height:22px;fill:none;stroke:var(--tinte);
  stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.an-marke-bahn:hover .an-scheibe{transform:scale(1.08)}
.an-bahnschild{background:var(--grund);border:1px solid var(--strich);
  padding:5px 10px 6px;text-align:center;white-space:nowrap}
/* Zwei Stimmen wie ueberall auf der Seite: die Sache in Inter,
   die Zahl in DM Mono. */
.an-bahnschild b{display:block;font:400 10px/1.5 Inter,system-ui,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinte)}
.an-bahnschild i{display:block;font:500 10px/1.5 "DM Mono",ui-monospace,monospace;
  letter-spacing:.08em;font-style:normal;color:var(--grau)}
@media (max-width:809px){
  .an-scheibe{width:30px;height:30px}
  .an-scheibe svg{width:18px;height:18px}
  .an-bahnschild b,.an-bahnschild i{font-size:9px}
}

/* ---------- Was der Zoom mit den Marken macht ------------------------
   Michael, 29.09.2026: "warum werden die Bergbahnen groesser?" Sie
   bleiben gleich gross -- gemessen 200 x 84 px auf jeder Stufe --, nur
   deckt diese Flaeche bei Zoom 7 rund 166 km ab statt 650 m bei Zoom 15.
   Also weniger zeigen, je weiter man herausgeht. */
#karte.z-mittel .an-bahnschild{display:none}
#karte.z-mittel .an-scheibe{width:28px;height:28px}
#karte.z-mittel .an-scheibe svg{width:17px;height:17px}
#karte.z-weit .an-marke-bahn{display:none}
/* Die Hausnadel bleibt immer sichtbar -- sie ist der Grund der Karte --,
   wird auf der Routenansicht aber kleiner. */
#karte.z-weit .an-marke-haus{width:32px;height:51px}
.an-marke-bahn,.an-marke-haus{transition:width .2s ease,height .2s ease}

@media (max-width:809px){
  #karte{height:320px}
  .an-kartenfuss span{grid-column:1/5}
}

/* ====================================================================
   DER ROUTENPLANER SIEHT JETZT AUS WIE EINER. 29.09.2026.
   Michael: "Mach gleich klar, dass das ein Routenplaner ist. Wie machen
   das die vernuenftigen Routenplaner?"

   Nachgesehen statt behauptet, am 29.09.2026 an zwei echten gemessen:
     ViaMichelin  zwei Felder, Platzhalter "Abfahrt" und "Ankunft",
                  dazu "Umkehren" und der Knopf "Eine Route suchen"
     ADAC Maps    Seitentitel "Kostenloser Routenplaner"
   Das gemeinsame Erkennungszeichen ist das FELDPAAR von/nach, nicht die
   Karte und nicht die Ueberschrift. Ein einzelnes Feld liest sich als
   Suchschlitz.

   Hier ist das Ziel fest, also steht es als zweite Zeile da -- lesbar,
   aber nicht tippbar. Die beiden Marken "Von" und "Nach" stehen auf der
   linken Kante (73), die Werte auf der Erklaerkante (532): dieselben zwei
   Kanten wie im Rest der Seite, kein drittes System.
   ==================================================================== */
.an-vershidden{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.an-marke-von,.an-marke-nach{grid-column:1/5;align-self:center}
.an-rechner .an-feld{grid-column:5/13}
.an-ziel{grid-column:5/13;margin:0;padding:calc(var(--takt)*1.5) 0;
  border-bottom:1px solid var(--linie);
  font-family:"Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;
  font-weight:300;font-size:var(--t2);line-height:1.25em;color:var(--tinte)}
.an-ziel span{display:block;margin-top:calc(var(--takt)*.5);
  font:400 11px/1.45 Inter,system-ui,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grau)}
.an-rechner .an-knopf{grid-column:9/13;justify-self:stretch;text-align:center}

/* Die leise Zwischenzeile vor der Staedtetabelle */
.an-zwischen{margin-top:calc(var(--takt)*8);padding-top:calc(var(--takt)*4);
  border-top:1px solid var(--linie)}
.an-zwischen span{grid-column:1/9;font:400 11px/1.45 Inter,system-ui,sans-serif;
  letter-spacing:.18em;text-transform:uppercase;color:var(--grau)}
.an-zwischen + .an-reihekopf{margin-top:calc(var(--takt)*3);
  border-top:0;padding-top:0}

@media (max-width:1199px){
  .an-marke-von,.an-marke-nach{grid-column:1/4}
  .an-rechner .an-feld,.an-ziel{grid-column:4/9}
  .an-rechner .an-knopf{grid-column:4/9}
  .an-zwischen span{grid-column:1/9}
}
@media (max-width:809px){
  .an-marke-von,.an-marke-nach{grid-column:1/5;align-self:start}
  .an-rechner .an-feld,.an-ziel,.an-rechner .an-knopf{grid-column:1/5}
  .an-zwischen span{grid-column:1/5}
}

/* ====================================================================
   VON UND NACH SIND ZWEI GLEICHE ZEILEN. 29.09.2026.
   Michael: "Typografie besser gestalten, vor allem bei Hotel Gebhard und
   der Adresse. Und den Knopf so lang wie die ganze Eingabe, damit es
   symmetrisch bleibt."

   Was nicht ging: der Name stand in Cormorant, die Adresse darunter in
   gesperrten Inter-Versalien. Zwei Schriften, zwei Groessen, zwei
   Laufweiten fuer EINE Angabe -- daneben eine Eingabezeile, die aus
   genau einer Zeile Cormorant besteht. Die beiden Haelften des Paars
   sahen aus wie aus zwei Entwuerfen.

   Jetzt tragen beide dasselbe: eine Zeile Cormorant in der Groesse der
   Eingabe, auf derselben Haarlinie, mit demselben Polster. Der Knopf
   liegt auf denselben Spalten wie beide Zeilen (5 bis 13).
   ==================================================================== */
.an-ziel{grid-column:5/13;margin:0;
  padding:calc(var(--takt)*1.5) 0;
  border-bottom:1px solid var(--tinte);
  font-family:"Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;
  font-weight:300;font-size:var(--t3);line-height:1.25em;
  letter-spacing:normal;color:var(--tinte)}
.an-rechner .an-knopf{grid-column:5/13;justify-self:stretch;text-align:center}

@media (max-width:1199px){
  .an-ziel{font-size:var(--t2)}
  .an-rechner .an-knopf{grid-column:4/9}
}
@media (max-width:809px){
  .an-ziel{font-size:var(--t2)}
  .an-rechner .an-knopf{grid-column:1/5}
}

/* ====================================================================
   DER BEREICH UNTER DER KARTE. 29.09.2026.
   Michael: "Verfeinere die Typografie in diesem Bereich, sieht nicht gut
   aus."

   Der Fehler war ein Rangfehler, kein Abstandsfehler: unter der Karte
   standen ZWEI Zeilen derselben Groesse und derselben Schrift direkt
   uebereinander -- die Quellenangabe (Inter 11, gemischt) und die
   Zwischenzeile (Inter 11, Versalien). Gleicher Rang, verschiedene
   Behandlung, vier Pixel Abstand. Das liest sich als Versehen.

   Jetzt tragen die drei Zeilen drei Raenge:
     Quellenangabe   Inter 10, --grau, direkt an der Karte -- eine Fussnote
     Zwischentitel   Cormorant 20, --tinte -- eine Ueberschrift
     Beisatz         Inter 11 Versalien, --grau -- die Einordnung
   Dazwischen 80 px Luft und eine Linie in --tinte, damit der Sprung von
   der Karte zur Tabelle sichtbar ist.
   ==================================================================== */
.an-kartenfuss{margin-top:calc(var(--takt)*2)}
.an-kartenfuss span{grid-column:1/9;
  font:400 10px/1.6 Inter,system-ui,sans-serif;letter-spacing:.04em;
  text-transform:none;color:var(--grau)}

.an-zwischen{margin-top:calc(var(--takt)*10);padding-top:calc(var(--takt)*5);
  border-top:1px solid var(--strich);align-items:baseline}
.an-zwischen span{grid-column:1/5;
  font-family:"Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;
  font-weight:300;font-size:var(--t1);line-height:1.25em;letter-spacing:-.005em;
  text-transform:none;color:var(--tinte)}
.an-zwischen em{grid-column:5/9;font-style:normal;
  font:400 11px/1.45 Inter,system-ui,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grau)}
.an-zwischen + .an-reihekopf{margin-top:calc(var(--takt)*4);
  border-top:0;padding-top:0}

@media (max-width:1199px){
  .an-kartenfuss span{grid-column:1/9}
  .an-zwischen span{grid-column:1/4}
  .an-zwischen em{grid-column:4/9}
}
@media (max-width:809px){
  .an-kartenfuss span{grid-column:1/5}
  .an-zwischen span,.an-zwischen em{grid-column:1/5}
  .an-zwischen em{margin-top:calc(var(--takt))}
}

/* Der Merksatz lief bis Spalte 9 und brach nach halber Breite um, waehrend
   die Kopfreihe daneben bis zur Maut-Kante reicht. Michael, 29.09.2026:
   "Schreib den Text laenger, bis Maut oder fast bis Maut." Jetzt bis
   Spalte 12 -- eine Spalte vor dem Rand, damit das Wort MAUT allein auf
   der letzten Kante stehen bleibt. */
.an-kopf .an-merk{grid-column:5/12}
@media (max-width:1199px){ .an-kopf .an-merk{grid-column:4/9} }
@media (max-width:809px){  .an-kopf .an-merk{grid-column:1/5} }

/* ====================================================================
   DIE DREI ZEILEN DES PLANERS LIEGEN AUFEINANDER -- letzte Festlegung.
   Gemessen am 29.09.2026: Eingabe 372 bis 904, Ziel 482 bis 984, Knopf
   372 bis 904. Drei Zeilen, zwei verschiedene Spaltenbereiche. Ursache
   waren Regeln aus drei nacheinander angehaengten Bloecken, die sich je
   Haltepunkt gegenseitig ueberschrieben -- jede fuer sich richtig, zusammen
   widerspruechlich. Deshalb stehen Eingabe, Ziel und Knopf ab hier an
   EINER Stelle und je Haltepunkt nur EINMAL. Wer sie aendert, aendert sie
   hier; ein weiterer Block dahinter macht denselben Fehler noch einmal.
   ==================================================================== */
.an-rechner .an-feld,
.an-rechner .an-ziel{grid-column:5/13}
/* Michael, 29.09.2026, letzte Fassung: "mach den Button wieder dunkel und
   zentriert, ich glaube das ist besser." Also gefuellt wie am Anfang, ueber
   die ganze Spalte 5/13 wie Eingabe und Ziel -- die drei Zeilen enden damit
   auf derselben rechten Kante -- und die Beschriftung in der Mitte.
   Zwischenstaende desselben Tages, zur Nachvollziehbarkeit: erst halbe
   Spalte (zu klein gegenueber den Zeilen darueber), dann volle Spalte mit
   blossem Umriss (zu leise). Die gefuellte Flaeche traegt den einen Knopf,
   der Gaeste zum Ziel bringt.
   ACHTUNG: Eingabe und Ziel stehen in der Zeile darueber und muessen
   ihren EIGENEN Selektor behalten -- am 29.09. hat eine Sammelregel sie
   mit verkleinert, weil der Knopf mit ihnen zusammenstand. */
.an-rechner .an-knopf{grid-column:5/13;justify-self:stretch;
  min-height:calc(var(--takt)*7);display:flex;align-items:center;
  justify-content:center}

@media (max-width:1199px){
  .an-rechner .an-feld,
  .an-rechner .an-ziel,
  .an-rechner .an-knopf{grid-column:4/9}
}
@media (max-width:809px){
  .an-rechner .an-feld,
  .an-rechner .an-ziel,
  .an-rechner .an-knopf{grid-column:1/5}
}

/* ====================================================================
   SPEZIFITAET: textseiten.css setzt `.textseite p{margin:0;padding:0}`.
   Das ist Klasse PLUS Typ und schlaegt jede meiner reinen Klassenregeln
   an einem <p>. Gemessen am 29.09.2026: zwischen Quellenangabe und
   Zwischentitel blieb 1 px statt der gesetzten 120 -- die Regel stand in
   der Datei und wirkte nicht. Mit dem vorangestellten .anfahrt gewinnt
   sie. Das betrifft ALLE Abstaende, die ich an einem <p> setze.
   ==================================================================== */
/* Michael, 29.09.2026: "diesen Bereich etwas grosszuegiger". Gemessen
   waren zwischen Kartenfuss und der ersten Klapplinie GENAU 0 px -- die
   Linie klebte am Text und der Uebergang von der Karte zur Liste hatte
   keinen Atem. Jetzt drei Schritte Luft unter die Karte, zehn darunter
   bis zur ersten Klapplinie (das Hausmass --luft). */
.anfahrt .an-kartenfuss{margin-top:calc(var(--takt)*3);
  margin-bottom:var(--luft)}
.anfahrt .an-zwischen{margin-top:calc(var(--takt)*10);
  padding-top:calc(var(--takt)*5);border-top:1px solid var(--strich)}
.anfahrt .an-ziel{margin:0;padding:calc(var(--takt)*1.5) 0}
.anfahrt .an-quelle{margin-top:calc(var(--takt)*2)}
.anfahrt .an-text p + p{margin-top:calc(var(--takt)*3)}
.anfahrt .an-held .an-vorspann{margin-top:calc(var(--takt)*7)}

/* ====================================================================
   VIER KLAPPBLOECKE. 29.09.2026.
   Michael: "Das ist zu viel Information. Auto, Bahn, Flugzeug -- und dann
   kann man alles aufklappen. Taxi extra, das wird gefragt."

   NACHGESEHEN, wie es andere machen: Rome2Rio zeigt fuer Muenchen nach
   Fiss eine Zeile JE VERKEHRSMITTEL, und in der zugeklappten Zeile steht
   schon die entscheidende Zahl (4 Std. 29 Min., 31 bis 126 Euro) plus ein
   Rang ("BESTES", "GUENSTIGSTES"). Erst der Klick oeffnet die Einzelheiten.
   Genau das ist hier uebernommen: die Kennzahl steht IMMER da, auch
   zugeklappt -- wer nur wissen will, wie lange es dauert, muss nichts
   oeffnen.

   Gebaut mit <details>/<summary>: kein Javascript, mit Tastatur bedienbar,
   und der Text steht auch dann in der Seite, wenn Skripte ausfallen --
   Suchmaschinen lesen ihn ebenfalls.
   ==================================================================== */
/* Die Klappgruppe beginnt nicht unmittelbar unter dem, was ueber ihr
   steht -- der Abstand kommt aus dem margin-bottom des Kartenfusses.
   Faellt der Kartenfuss weg, traegt diese Regel den Abstand selbst. */
.an-klapp:first-of-type{margin-top:0}
.an-klapp{border-top:1px solid var(--strich)}
.an-klapp:last-of-type{border-bottom:1px solid var(--strich)}
/* Der letzte Block traegt zwei Linien, also unten ebenfalls eine weniger. */
.an-klapp:last-of-type>.an-klappkopf{padding-bottom:calc(var(--takt)*7 - 1px)}
.an-klappkopf{list-style:none;cursor:pointer;align-items:baseline;
  /* Michael, 29.09.2026: "grosszuegiger". Die Zeile stand auf 120 px und
     wirkte gedraengt -- Titel, Kennzahl und Zeichen lagen dicht an den
     Linien. Jetzt sieben Schritte Luft oben und unten, dazu eine
     Titelzeile von sieben Schritten:
     55 + 56 + 56 + 1 Haarlinie = 168 = einundzwanzig Schritte. */
  padding:calc(var(--takt)*7 - 1px) 0 calc(var(--takt)*7);
  transition:background .18s ease}
.an-klappkopf::-webkit-details-marker{display:none}
.an-klappkopf:hover .an-klapptitel span{color:var(--akz,#8C5A3C)}
.an-klappkopf:focus-visible{outline:1px solid var(--tinte);outline-offset:4px}

.an-klapp .an-nr{grid-column:1/2}
.an-klapptitel{grid-column:2/6;display:flex;align-items:center;
  /* Feste Zeilenhoehe: sonst bestimmt die Schrift den Takt, nicht das Raster. */
  min-height:calc(var(--takt)*7);
  gap:calc(var(--takt)*2.5)}
.an-klapptitel span{font-family:"Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;
  /* Jeder Klappblock ist ein Kapitel, also die H2-Stufe der Hausskala
     (39 px auf Desktop) statt der Zwischenstufe 31. */
  font-weight:300;font-size:var(--t4);line-height:1.2em;letter-spacing:-.008em;
  color:var(--tinte);transition:color .18s ease}
/* Die Kennzahl sitzt auf der Grundlinie des Titels, nicht am oberen Rand --
   sonst schwebt sie neben der grossen Schrift in der Luft. Zwei Zeilen
   duerfen sein, deshalb 2em Zeilenabstand statt 1,45. */
.an-kennzahl{grid-column:6/12;align-self:center;
  font:400 11px/2 Inter,system-ui,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:var(--grau);
  /* Kein max-width: bei 34ch brach "AB 2 H 35 VON MUENCHEN &middot;" mitten
     am Trennpunkt um. Die Spalte 6/12 begrenzt schon genug. */
  text-wrap:balance}

/* Das Zeichen ist ein Strich, der beim Oeffnen zum Kreuz wird -- kein
   Pfeil, kein Dreieck, nichts Fremdes. Es dreht sich nicht, es waechst. */
.an-zeichen{grid-column:12/13;justify-self:end;position:relative;
  width:18px;height:18px;align-self:center}
.an-zeichen::before,.an-zeichen::after{content:"";position:absolute;
  background:var(--tinte);transition:transform .22s cubic-bezier(.23,1,.32,1)}
.an-zeichen::before{left:0;right:0;top:8.5px;height:1px}
.an-zeichen::after{top:0;bottom:0;left:8.5px;width:1px}
.an-klapp[open] .an-zeichen::after{transform:scaleY(0)}

/* Gefaltetes Papier, dieselbe Sprache wie der Papierflieger: gerade
   Kanten, sichtbare Faltlinien, keine Rundung. Michael, 29.09.2026:
   "Mach alle anderen Icons auch aus Origami." Groesse waechst mit dem
   Titel mit -- 34 px neben 39 px Cormorant. */
.an-ikon{width:34px;height:34px;flex:none;fill:none;
  stroke:var(--grau);stroke-width:1.1;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .18s ease}
.an-klappkopf:hover .an-ikon{stroke:var(--akz,#8C5A3C)}

.an-klappinhalt{padding-bottom:calc(var(--takt)*7)}
.an-klappinhalt > .an-zwischen:first-child{margin-top:0;padding-top:0;border-top:0}
.anfahrt .an-klappinhalt > .an-zwischen:first-child{margin-top:0;padding-top:0}

@media (max-width:1199px){
  .an-klapptitel{grid-column:2/5}
  .an-klapptitel span{font-size:var(--t3)}
  .an-kennzahl{grid-column:5/8}
  .an-zeichen{grid-column:8/9}
  /* Auf Tablet zurueck auf fuenf Schritte Luft: 39+40+40+1 = 120. */
  .an-klappkopf{padding:calc(var(--takt)*5 - 1px) 0 calc(var(--takt)*5)}
  .an-klapp:last-of-type>.an-klappkopf{padding-bottom:calc(var(--takt)*5 - 1px)}
  .an-klapptitel{min-height:calc(var(--takt)*5)}
  .an-ikon{width:28px;height:28px}
}
@media (max-width:809px){
  .an-klappkopf{row-gap:calc(var(--takt)*1.5)}
  .an-klapp .an-nr{grid-column:1/2}
  .an-klapptitel{grid-column:2/4}
  .an-zeichen{grid-column:4/5;align-self:start}
  .an-kennzahl{grid-column:1/5}
  .an-ikon{width:22px;height:22px}
}


/* ==== NACH HIMMELSRICHTUNG =========================================
   Diese Zeilen tragen ZWEI Zeilen im Startfeld: die Richtung als
   Etikett und darunter den Weg als Name. Der Takt der uebrigen
   Tabelle (3 Schritte = 24 px) reicht dafuer nicht -- am 29.09.2026
   lag der Wegname im naechsten Etikett. Sechs Schritte = 48 px
   tragen beide Zeilen und bleiben im Raster.
   ================================================================= */
.an-richtung .an-zeile{grid-auto-rows:calc(var(--takt)*6);align-items:start}
.an-richtung .an-rang{display:block;margin-bottom:calc(var(--takt)*0.5)}
.an-richtung .an-name{line-height:1.2em}
/* Die beiden rechten Spalten sitzen auf der Grundlinie des Wegnamens,
   nicht auf der des Etiketts darueber. */
.an-richtung .sp-weg,.an-richtung .sp-km,.an-richtung .sp-zt{
  align-self:end;padding-bottom:calc(var(--takt)*0.5)}
@media (max-width:809px){
  .an-richtung .an-zeile{grid-auto-rows:auto}
  .an-richtung .sp-weg,.an-richtung .sp-km,.an-richtung .sp-zt{
    align-self:auto;padding-bottom:0}
}
/* ---------- Routenknopf: nur die Beschriftung, mittig ------------------
   Drei Staende an einem Tag, damit die Reihenfolge nachvollziehbar bleibt:
     1. gefuellt, Schrift mittig           (Ausgangsstand)
     2. Schrift links, langer Pfeil rechts (eine Parallelsitzung)
     3. gefuellt, Schrift mittig, PFEIL WEG
   Michael, 29.09.2026, zuletzt: "ohne Pfeil". Damit ist auch das Polster
   rechts hinfaellig, das nur den Pfeil auf Abstand hielt -- der Knopf ist
   wieder symmetrisch.
   Der Token --an-pfeil bleibt in Zeile 32 stehen: er kostet nichts und
   waere sonst beim naechsten Bedarf neu zu bauen. */
.an-rechner .an-knopf{justify-self:stretch;display:flex;align-items:center;
  justify-content:center;text-align:center}