/* Themenseiten: Nachbau der Framer-Seiten (Wellness, Essen und Trinken, Wandern, Mountainbike, Familien Sommer). Nur der Mittelteil. Kopf, Menue, Fuss, Buchungsbalken und Satzspiegel kommen aus lp-stil.css und kopf.css. Hier steht NUR, was zwischen
und
gehoert. Alle Werte sind am 24.09.2026 an der Framer-Seite gemessen, Fensterbreite 1440: Inhaltsbreite 1200 px, Seitenrand 120 px Textspalten 530 px, Zwischenraum 80 px (x = 120 und x = 730) Auftaktbild 1200 x 800 Bild im Paar 530 x 706 (hoch) bzw. 530 x 520 (quer) Schrift Kicker 12, H1 38, H2 24, Fliesstext 18, Faktenwert 16 Die Schriftfamilien sind die des Hauses (Cormorant Garamond, Abhaya Libre, Inter, DM Mono), nicht die Framer-Namen. */ .themenseite{ /* Michael 24.09.2026: "Mach die Bilder alle gleich breit wie bei der Homeseite." Framer misst 1200, die Homeseite fuehrt aber ein Band von 1435 mit 40 px Rand, also 1355 px Inhalt. Massgeblich ist die Homeseite. */ --inhalt:var(--breite); /* 1435 wie main und .fuss auf der Startseite */ --luecke:80px; /* Zwischenraum der beiden Textspalten */ --takt:8px; --bild:800px; /* Hoehe der Vollbilder */ margin:0 auto; padding:0 0 calc(var(--takt)*15); } .tb{width:min(var(--inhalt),100% - 2*var(--rand));margin:0 auto} /* Michael 24.09.2026: "Wir haben uns die Typografie schon erarbeitet, mach nichts Neues." Deshalb steht hier KEIN eigener Schriftgradsatz mehr. Es gelten die Werte der Startseite aus lp-stil.css, am 15.09.2026 freigegeben: Kleinzeile .mikro 11/12 px Inter, Laufweite .14em; Titel 30 px Cormorant 300; Leitsatz und Fliesstext .lauf 17 px; Randspalte .rand dt 12 px, dd 15 px. Abschnittskopf ist .kopf1 (Kleinzeile, 14 px Luft, Titel). */ .themenseite h1,.themenseite h2,.themenseite h3{text-wrap:balance} /* Michael 24.09.2026: "Mach frueher einen Zeilenumbruch. Zwei Zeilen macht daraus vier, das sieht luxurioeser aus." Deshalb ein kurzes Satzmass fuer ALLE Fliesstexte der Themenseite -- 34 Zeichen statt der vollen Spalte. */ .themenseite .lauf,.themenseite .leitsatz{max-width:34ch} .themenseite p{margin:0} .themenseite img{display:block;width:100%;height:100%;object-fit:cover;background:#E6DFD4} /* ---------- Bildbausteine ---------- */ .tvoll{margin:calc(var(--takt)*10) auto 0;width:min(var(--inhalt),100% - 2*var(--rand))} .tvoll figure{margin:0;height:var(--bild);overflow:hidden} /* Quadratische Buehne fuer ein HOCHKANT-Foto, das sonst beschnitten wuerde. Michael am 26.09.2026 aus vier Vorschlaegen gewaehlt (W2, probe-wandern-bild.html): bergsee.jpg ist 1333 x 2000, in der breiten Buehne blieben 42 Prozent der Hoehe uebrig und der Wanderin fehlte der Kopf. Quadratisch passen Figur und Spiegelung zusammen ins Bild. Gilt NUR fuer das Auftaktbild, die uebrigen Vollbilder der Seite behalten ihre Hoehe. */ .tvoll-quadrat figure{height:auto;aspect-ratio:1/1} /* Paar: Bild und Text nebeneinander, 530 zu 530, 80 Luft dazwischen */ .tpaar{width:min(var(--inhalt),100% - 2*var(--rand));margin:calc(var(--takt)*10) auto 0; display:grid;grid-template-columns:1fr 1fr;column-gap:var(--luecke);align-items:center} .tpaar figure{margin:0;height:706px;overflow:hidden} .tpaar.flach figure{height:520px} .tpaar.rechts figure{order:2} .tpaar .wort{display:flex;flex-direction:column;gap:38px} .tpaar .wort .lauf+.lauf{margin-top:-14px} .tpaar .wort .rand{grid-column:auto;display:flex;flex-direction:column;gap:28px} /* Auch im Bildpaar steht der Untertitel 46 px unter dem Kopf (38 aus dem Flex-Abstand plus 8), wie auf der Startseite gemessen. */ .tpaar .wort .kopf1+.leitsatz{margin-top:8px} /* ---------- Breitblock ---------- Michael 24.09.2026: "Korrigiere den Textblock, schau auf der Home Seite nach." Der Block hat jetzt denselben Aufbau wie ein Abschnitt der Startseite: Kleinzeile, Titel, darunter .satz mit zwei Textspalten und der Randspalte (4fr 4fr 3fr, 48 px Luft, oben ausgerichtet). Satz und Rand kommen aus lp-stil.css -- hier steht nur noch der Abstand nach oben. Eigene Spalten- und Kennzahlenregeln sind weg, damit beide Seiten nicht auseinanderlaufen. */ /* Michael 24.09.2026: Der Breitblock "klebt zu stark links", er soll etwas zur Mitte. Er laeuft deshalb nicht mehr ueber die volle Bildbreite (1355), sondern steht mit 1120 px mittig darin. */ .tbreit{width:min(1120px,100% - 2*var(--rand));margin:calc(var(--takt)*12) auto 0} .tbreit h2{max-width:900px} /* Michael 24.09.2026: "Korrigiere den Untertitel." Gemessen an der Startseite (#wellness): 46 px Luft ueber dem Leitsatz, 56 px darunter. Auf der Themenseite stand er mit 12 px am Titel und 64 px ueber dem Text -- also verkehrt herum. Die Startseite erreicht die Werte ueber .abschnitt{gap:64} plus .leitsatz{margin-top:-26}; hier ist der Block kein Flex-Kasten, deshalb stehen die Abstaende direkt. */ .tbreit .kopf1+.leitsatz{margin-top:46px} /* Michael 24.09.2026: "Die letzten Zeilen sollen nebeneinander sein, damit nicht so viel Platz verbraucht wird." Die Randspalte steht deshalb NICHT rechts neben dem Text, sondern als Zeile unter den beiden Textspalten und schliesst den Block ab. Dieselbe Loesung fahren Startseite und Landingpage ab 1199 px abwaerts (.rand{grid-column:1/-1} in lp-stil.css). */ .tbreit .satz{margin-top:56px} /* ---------- Tablet ---------- Michael am 28.09.2026: "die Bilder sollen groesser werden, wenn es zusammengeschoben wird." Vorher wurden sie KLEINER: --bild fiel von 800 auf 560, die Paarbilder von 706 auf 520. Jetzt waechst die Buehne mit der schmaleren Spalte mit, statt gegen sie. */ @media (max-width:1199px){ .themenseite{--luecke:40px;--bild:min(720px,78vh)} .tpaar figure{height:min(706px,72vh)} .tpaar.flach figure{height:min(560px,58vh)} } /* ---------- Mobil: alles untereinander, Bild zuerst ---------- Am Handy laufen die Bilder von Kante zu Kante (der Seitenrand wird herausgezogen) und stehen hochkant im Format 4:5, gedeckelt auf 72 Prozent der Fensterhoehe. Gemessen vorher: 350 x 360 px. So ist das Bild das, was der Gast zuerst sieht, und nicht eine Briefmarke ueber dem Text. Der Text bleibt im Satzspiegel -- nur die Bilder gehen bis an den Rand. */ @media (max-width:809px){ .themenseite{--bild:min(72vh,120vw)} .tpaar{grid-template-columns:1fr;row-gap:calc(var(--takt)*4); margin-top:calc(var(--takt)*6)} .tpaar.rechts figure{order:0} .tpaar figure,.tpaar.flach figure,.tpaar.mittel figure{ height:min(72vh,120vw); margin-inline:calc(var(--rand)*-1); /* randlos, ohne 100vw-Falle */ } .tvoll{margin-top:calc(var(--takt)*6)} .tvoll figure{margin-inline:calc(var(--rand)*-1)} .tbreit{margin-top:calc(var(--takt)*7)} /* Schrift kompakter: die Zeilen stehen enger, der Satz bleibt bei 34 Zeichen. Groessen bleiben wie freigegeben -- nur der Durchschuss geht zurueck, sonst zerfaellt der Block am schmalen Schirm. */ .themenseite h1,.themenseite h2{line-height:1.15} .themenseite .leitsatz{line-height:1.45} .themenseite .lauf{line-height:1.55} .tpaar .wort{gap:26px} } @media (prefers-reduced-motion:reduce){ .themenseite *{transition-duration:.01ms!important;animation-duration:.01ms!important} } /* Das versteckte Buchungsformular reist auf jeder Seite mit, damit buchen.js nicht abbricht und der Verfuegbarkeits-Balken erscheint. Es darf nie sichtbar sein: ohne diese Zeile ragte es 9 px ueber den rechten Rand (gemessen 1440 px). */ .ts-buchform{display:none}