/* ------------------------------------------------------------------ Probe: die Registerkarte der Wanderkarte als Milchglas -- hell und dunkel. Gehoert NICHT zur Landingpage, wird nicht ausgerollt. Regeln, die aus den vorigen Runden stehen: - Der Grund bleibt klar. Kein Schleier, keine Abdunklung; unscharf wird nur, was wirklich hinter der Scheibe liegt (Michael 17.09.2026). - Um das X kein Rahmen (Michael 17.09.2026). Der Vollbildknopf verliert ihn mit, sonst steht ein gerahmter neben einem ungerahmten Knopf. - Schrift, Groessen, Raster und Bedienung bleiben. Im Negativ dreht sich die Schrift ins Helle, sonst waere ein dunkler Grund unlesbar. ------------------------------------------------------------------ */ /* ---- Kein Rahmen um X und Vollbild, in jeder Fassung ---- */ .t-regzu, .t-regvoll{border:0} @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ /* --- R1 hell: weisses Milchglas ueber der Karte --- */ [data-reg="hell"] .t-reg{background:rgba(246,242,234,.82); -webkit-backdrop-filter:blur(26px) saturate(.7) brightness(1.06); backdrop-filter:blur(26px) saturate(.7) brightness(1.06); box-shadow:0 18px 44px -26px rgba(28,24,21,.5),inset 0 1px 0 rgba(255,255,255,.55)} /* --- R2 dunkel: dasselbe braune Glas wie der Buchungsbalken (Fassung C) --- */ [data-reg="dunkel"] .t-reg{background:rgba(53,48,43,.84); -webkit-backdrop-filter:blur(30px) saturate(.65);backdrop-filter:blur(30px) saturate(.65); box-shadow:0 18px 44px -26px rgba(20,17,15,.6),inset 0 1px 0 rgba(246,242,234,.16)} /* --- R3 Nacht: die Karte selbst wird dunkel (vorhandene Farbwelt), das Register bleibt die helle Scheibe darauf --- */ [data-reg="nacht"] .t-reg{background:rgba(246,242,234,.88); -webkit-backdrop-filter:blur(30px) saturate(.7) brightness(1.06); backdrop-filter:blur(30px) saturate(.7) brightness(1.06); box-shadow:0 18px 44px -26px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.6)} } /* ---- Kehrseite fuer das dunkle Register ---- Das Modul faerbt alles ueber Variablen. Sie im Register neu zu belegen ist ehrlicher als zwanzig Einzelregeln: jede Zeile, jede Achse, jede Bildunter- schrift dreht sich damit mit, auch die, die spaeter dazukommen. */ [data-reg="dunkel"] .t-reg{ --braun:#F6F2EA; /* Ueberschriften, starke Werte */ --tinte:#FFFFFF; --text:#EDE8DF; /* Fliesstext */ --leise:#D2CBC1; /* Kleinschrift, Achsen, Bildunterschriften */ --linie:rgba(246,242,234,.22); --fein:rgba(246,242,234,.16); --creme:transparent; /* sonst legt sich Creme ueber das Glas */ --hell:rgba(246,242,234,.08); color:#EDE8DF; border-color:rgba(246,242,234,.20)} [data-reg="dunkel"] .t-regleib::-webkit-scrollbar-thumb{background:rgba(246,242,234,.28)} /* Fotos bleiben Fotos -- nur ihre Unterschrift dreht sich mit (ueber --leise). */ /* ---- nur die Probe selbst ---- */ .pk-umschalter{position:fixed;top:12px;left:12px;z-index:9999; display:flex;flex-direction:column;align-items:stretch;background:#3D3733} .pk-umschalter button{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:10px; letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border:0;background:transparent; color:rgba(246,242,234,.55);cursor:pointer;text-align:left} .pk-umschalter button[aria-pressed="true"]{background:#4a433d;color:#F6F2EA} /* ------------------------------------------------------------------ Unter 980 px greifen im Modul Regeln, die eigentlich nur zur Farbwelt "nacht" gehoeren: in den mehrzeiligen Selektorlisten traegt jeweils nur die ERSTE Zeile das Praefix [data-farbwelt="nacht"], die uebrigen gelten ueberall (index.html, Zeilen 496-507). Heute faellt das nicht auf, weil die Werte zufaellig der hellen Palette entsprechen -- fuer ein dunkles Register hebeln sie aber jede Farbe wieder aus. Darum hier ausdruecklich ueberschrieben. Der Befund gehoert unabhaengig davon repariert. ------------------------------------------------------------------ */ @media (max-width:980px){ [data-reg="dunkel"] .t-karte:not(.voll) .t-reg{background:rgba(53,48,43,.84)} [data-reg="dunkel"] .t-karte:not(.voll) .t-regname{color:#F6F2EA} [data-reg="dunkel"] .t-karte:not(.voll) .t-regleib p, [data-reg="dunkel"] .t-karte:not(.voll) .t-regzahlen b, [data-reg="dunkel"] .t-karte:not(.voll) .t-urteil p{color:#EDE8DF} [data-reg="dunkel"] .t-karte:not(.voll) .t-regzahlen, [data-reg="dunkel"] .t-karte:not(.voll) .t-auge, [data-reg="dunkel"] .t-karte:not(.voll) .t-woran, [data-reg="dunkel"] .t-karte:not(.voll) .t-fotounter{color:#D2CBC1} [data-reg="dunkel"] .t-karte:not(.voll) .t-regzu, [data-reg="dunkel"] .t-karte:not(.voll) .t-regvoll{border-color:transparent} [data-reg="dunkel"] .t-karte:not(.voll) .t-regzu::before, [data-reg="dunkel"] .t-karte:not(.voll) .t-regzu::after{background:#D2CBC1} [data-reg="dunkel"] .t-karte:not(.voll) .t-regvoll::before, [data-reg="dunkel"] .t-karte:not(.voll) .t-regvoll::after{border-color:#D2CBC1} } /* ================================================================== Hoehenschnitt: vier Fassungen. Michael 17.09.2026: bessere Farbe, schraffieren, es muss viel besser werden. Geaendert wird nur die Zeichnung -- Groesse, Achsen und die Zahlen 1433 m / 2594 m bleiben, wo sie sind. ================================================================== */ [data-profil="P1"] .kt-linie{stroke:#E8B98C;stroke-width:1.6} [data-profil="P1"] .kt-flaeche{fill:url(#pf-kupfer)} [data-profil="P2"] .kt-linie{stroke:#F1ECE3;stroke-width:1.6} [data-profil="P2"] .kt-flaeche{fill:rgba(246,242,234,.13)} [data-profil="P3"] .kt-linie{stroke:#F1ECE3;stroke-width:1.6} [data-profil="P3"] .kt-flaeche{fill:url(#pf-schraffur)} [data-profil="P4"] .kt-linie{stroke:#E8B98C;stroke-width:1.6} [data-profil="P4"] .kt-flaeche{fill:url(#pf-schichten)} /* Im hellen Register kehren sich die Hilfsfarben um. */ [data-reg="hell"][data-profil="P2"] .kt-linie, [data-reg="nacht"][data-profil="P2"] .kt-linie, [data-reg="hell"][data-profil="P3"] .kt-linie, [data-reg="nacht"][data-profil="P3"] .kt-linie{stroke:#5A5049} [data-reg="hell"][data-profil="P2"] .kt-flaeche, [data-reg="nacht"][data-profil="P2"] .kt-flaeche{fill:rgba(61,55,51,.12)} /* Die eine hart gesetzte Farbe im Ablauf, die keine Variable benutzt. */ [data-reg="dunkel"] .kt-spalte .kt-fuss .kt-wasklein{color:rgba(210,203,193,.85)} .pk-zweitreihe{margin-top:6px;border-top:1px solid rgba(246,242,234,.18)} /* ================================================================== Ablauf in Inter statt Serife (Michael 17.09.2026: "wie Bild 3"). In der Liste unter der Karte stehen die Touren in Inter -- im Register springt derselbe Inhalt in die Serife. Diese Fassung zieht beides zusammen. Die Bahnzeile bleibt die staerkere: nicht mehr durch eine andere Schrift, sondern durch Schnitt und Farbe. Groessen sind auf gleiche Zeilenhoehe gesetzt, nicht auf gleiche Zahl -- Inter laeuft bei gleicher Punktgroesse hoeher als Cormorant. ================================================================== */ [data-ablauf="inter"] .kt-astufe .kt-wastext{ font-family:Inter,system-ui,sans-serif;font-size:14.5px;line-height:1.45; letter-spacing:-.002em} [data-ablauf="inter"] .kt-astufe.kt-bahn .kt-wastext{ font-family:Inter,system-ui,sans-serif;font-size:14.5px;font-weight:500; letter-spacing:.005em;color:var(--braun)} /* Der Tourname ueber dem Ablauf bleibt die Serife -- er ist die Ueberschrift, nicht Teil der Liste. */ /* ------------------------------------------------------------------ Eine senkrechte Kante. Michael 17.09.2026: "vertikal richten". "MEINE EINSCHAETZUNG" und "DER ABLAUF" stehen am linken Satzrand, der Text darunter war um Linie plus Einzug (2 px + var(--a3)) nach rechts verschoben -- drei Anfaenge auf drei Achsen. Der Block wird jetzt um genau seinen Einzug nach links gezogen: die Akzentlinie steht im Weissraum, die Schrift auf derselben Kante wie die Ueberschriften. ------------------------------------------------------------------ */ [data-reg] .t-urteil{margin-left:calc(-1 * (var(--a3) + 2px))} /* ------------------------------------------------------------------ Der zweite Hoehenschnitt unter "DER ABLAUF" trug die Aenderung nicht mit (Michael 17.09.2026: "mach Bild 1 wie Bild 2"). Er ist dieselbe Zeichnung in klein, mit Punkten fuer die Bahnstationen -- also bekommt er dieselbe Fuellung, dieselbe Linie und Punkte in derselben Farbe. ------------------------------------------------------------------ */ [data-profil="P1"] .kt-ablaufbild path:not(.kt-ablaufflaeche){stroke:#E8B98C;stroke-width:1.6} [data-profil="P1"] .kt-ablaufflaeche{fill:url(#pf-kupfer)} [data-profil="P1"] .kt-ablaufpunkt{background:#E8B98C} [data-profil="P2"] .kt-ablaufbild path:not(.kt-ablaufflaeche){stroke:#F1ECE3;stroke-width:1.6} [data-profil="P2"] .kt-ablaufflaeche{fill:rgba(246,242,234,.13)} [data-profil="P2"] .kt-ablaufpunkt{background:#F1ECE3} [data-profil="P3"] .kt-ablaufbild path:not(.kt-ablaufflaeche){stroke:#F1ECE3;stroke-width:1.6} [data-profil="P3"] .kt-ablaufflaeche{fill:url(#pf-schraffur)} [data-profil="P3"] .kt-ablaufpunkt{background:#F1ECE3} [data-profil="P4"] .kt-ablaufbild path:not(.kt-ablaufflaeche){stroke:#E8B98C;stroke-width:1.6} [data-profil="P4"] .kt-ablaufflaeche{fill:url(#pf-schichten)} [data-profil="P4"] .kt-ablaufpunkt{background:#E8B98C} /* Der weisse Ring um die Punkte kam von der Cremeflaeche -- auf Glas muss er die Glasfarbe haben, sonst sitzt ein heller Fleck im Berg. */ [data-reg="dunkel"] .kt-ablaufpunkt{box-shadow:0 0 0 2px rgba(53,48,43,.92)} /* ================================================================== Michael 17.09.2026: der Akzentstrich am Urteil braucht die richtige Farbe, sonst weg -- und die Navigation links auf der Karte soll in dasselbe Glas. ================================================================== */ /* Der Strich war Kupfer (--akzent) und das einzige Bunte im Register. Er wird zur hellen Haarlinie: er gliedert weiter, ohne zu leuchten. Ganz weg braucht er nicht -- ohne ihn faellt der Absatz in den Fliesstext zurueck und ist keine Einschaetzung mehr, sondern nur noch Text. */ [data-reg="dunkel"] .t-urteil{border-left-width:1px;border-left-color:rgba(246,242,234,.35)} [data-reg="hell"] .t-urteil,[data-reg="nacht"] .t-urteil{border-left-width:1px;border-left-color:rgba(61,55,51,.28)} /* Navigation auf der Karte in demselben braunen Glas wie Register und Buchungsbalken. Sie steht auf hellem Gelaende, deshalb traegt sie hier die dunkle Scheibe: heller Knopf auf heller Karte verschwindet. */ @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ [data-reg] .t-zoom button{background:rgba(53,48,43,.84);border-color:rgba(246,242,234,.20); -webkit-backdrop-filter:blur(20px) saturate(.65);backdrop-filter:blur(20px) saturate(.65)} } [data-reg] .t-zoom button::before, [data-reg] .t-zoom button::after{background:#F1ECE3} [data-reg] .t-zoom .t-heim::before{background:none;border-color:#F1ECE3} [data-reg] .t-zoom button:hover{border-color:rgba(246,242,234,.55)} [data-reg] .t-zoom button:focus-visible{outline-color:#F6F2EA} /* ================================================================== Tourenfotos groesser (Michael 17.09.2026). Drei Wege, drei Kosten: F1 kostet wenig Hoehe, F2 gar keine, F3 am meisten. Die Unterschriften, die Reihenfolge und das Aufklappen bleiben, wo sie sind. ================================================================== */ /* --- F1 "Erste gross": ein Aufmacher ueber die ganze Breite, darunter die beiden anderen als Paar. Hierarchie ohne Klick. --- */ [data-fotos="F1"] .t-fotozeile, [data-fotos="F1"] .t-fotozeile[data-offen]{display:grid;grid-auto-flow:row; grid-template-columns:1fr 1fr !important;gap:6px} [data-fotos="F1"] .t-foto:first-child{grid-column:1 / -1} [data-fotos="F1"] .t-foto:first-child img{height:210px} [data-fotos="F1"] .t-foto img{height:124px} /* F2 "Wischstreifen" ist seit 18.09.2026 der Normalfall und steht im Modul. */ /* --- F3 "Gestapelt": alle drei ueber die ganze Breite, 3:2. Das groesste Bild, der hoechste Preis -- rund 380 px mehr Blatt. --- */ [data-fotos="F3"] .t-fotozeile, [data-fotos="F3"] .t-fotozeile[data-offen]{display:grid;grid-auto-flow:row; grid-template-columns:1fr !important;gap:14px} [data-fotos="F3"] .t-foto img{height:auto;aspect-ratio:3 / 2} [data-fotos="F3"] .t-fotounter{white-space:normal} /* Aufklappen ergibt nur in der Dreierreihe Sinn -- in F2 und F3 ist ohnehin jedes Bild gross. Die Hoehenaenderung wird dort stillgelegt. */ [data-fotos="F3"] .t-fotozeile[data-offen] .t-foto[aria-expanded="true"] img{height:inherit} /* Hoehenpunkte im dunklen Register: Ring in Glasfarbe, sonst sitzt ein heller Fleck im Berg */ [data-reg="dunkel"] .kt-profilpunkt{box-shadow:0 0 0 2px rgba(53,48,43,.92)} [data-reg="dunkel"] .kt-profilhoehe{color:#F6F2EA} /* Innenrand der dunklen Registerkarte am Handy/Tablet (Michael 18.09.2026: "das Padding passt nicht, viel zu nahe am Rand"). Das Modul setzt unter 980 px den Innenrand seitlich auf 0 -- auf dem hellen Grund fiel das nicht auf, auf der dunklen Flaeche stand der Text direkt an der Kante. */ @media (max-width:980px){ [data-reg="dunkel"] .t-karte:not(.voll) .t-regkopf, [data-reg="dunkel"] .t-karte:not(.voll) .t-regleib{padding-left:24px;padding-right:24px} } @media (max-width:480px){ [data-reg="dunkel"] .t-karte:not(.voll) .t-regkopf, [data-reg="dunkel"] .t-karte:not(.voll) .t-regleib{padding-left:20px;padding-right:20px} } /* Registerkarte am Handy: EINE linke Kante, VIER Schriftstufen (Michael 18.09.2026: "man weiss nicht mehr, wo man hinschauen soll"). Gemessen vorher bei 390 px: 15 verschiedene Schriftbilder und drei linke Kanten (20, 38, 65 px) -- Profil, Urteil und Ablauf trugen je 18 px eigenen Innenrand im schon eingerueckten Blatt. Stufen jetzt: Titel (Cormorant 25) · Zwischentitel (Inter 10,5 Versal, leise) · Lesetext (Abhaya 15) · Angaben (Inter 11/12). */ @media (max-width:980px){ [data-reg="dunkel"] .t-karte:not(.voll) .kt-profil, [data-reg="dunkel"] .t-karte:not(.voll) .kt-ablauf{padding-left:0;padding-right:0} /* Das Urteil reicht bis an die Blattkante (eigene Flaeche) -- es bekommt darum den Innenrand des Blatts selbst, nicht null */ [data-reg="dunkel"] .t-karte:not(.voll) .t-urteil{padding-left:20px;padding-right:20px} [data-reg="dunkel"] .t-karte:not(.voll) .t-auge{font-size:10.5px;font-weight:500;letter-spacing:.2em; color:#D2CBC1;margin:40px 0 16px;padding-top:18px;border-top:1px solid rgba(246,242,234,.16)} [data-reg="dunkel"] .t-karte:not(.voll) .t-regleib > .t-auge:first-child{margin-top:8px;padding-top:0;border-top:0} /* Der Wegsatz unter dem Profil wiederholt den Ablauf weiter unten -- am Handy als leise Angabe statt als zweiter Lesetext */ [data-reg="dunkel"] .t-karte:not(.voll) .kt-satz{font-family:Inter,system-ui,sans-serif;font-size:12px; line-height:1.6;color:#B9B1A6;margin-top:10px} [data-reg="dunkel"] .t-karte:not(.voll) .t-hoehentext, [data-reg="dunkel"] .t-karte:not(.voll) .t-regleib > p:not([class]){font-size:15px;line-height:1.6;margin:0 0 14px} [data-reg="dunkel"] .t-karte:not(.voll) .t-woran{font-size:12px;line-height:1.6;color:#B9B1A6} [data-reg="dunkel"] .t-karte:not(.voll) .kt-wasklein{letter-spacing:.12em} } /* Handy: Registerkarte kurz (siehe probe-karte-glas.js). Die Hoehe reicht fuer "Hoehenmeter" samt Profil; darunter blendet der Text weich aus. */ .t-regmehr{display:none} @media (max-width:980px){ .t-karte:not(.voll) .t-reg.kurz .t-regleib{max-height:480px;overflow:hidden; -webkit-mask-image:linear-gradient(#000 75%,transparent);mask-image:linear-gradient(#000 75%,transparent)} .t-karte:not(.voll) .t-regmehr{display:block;margin:0 20px 24px;padding:14px 0;width:calc(100% - 40px); font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;cursor:pointer;background:transparent;border:1px solid rgba(246,242,234,.45); color:#F6F2EA} .t-karte:not(.voll) .t-regmehr:active{transform:scale(.98)} } @media (max-width:980px) and (prefers-reduced-motion:reduce){ .t-karte:not(.voll) .t-regmehr:active{transform:none} }