/* Textseiten: NUR der Mittelteil zwischen Kopf und Fuss. Gebaut am 24.09.2026. Was hier ausdruecklich NICHT steht: Kopf, Menue, Fuss, Buchungsbalken, Satzspiegel, Seitenrand, Farben, Schriften. Das alles kommt aus lp-stil.css und kopf.css, damit jede Seite dieselbe Huelle traegt. Wer hier eine Breite setzt, bricht genau das. Vom Haus geerbt: --breite 1435px, --rand 40px, --grund, --tinte, --grau, --text, --linie (lp-stil.css) Eigene Rechnung fuer den Mittelteil: 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 */ .textseite{ --sp:12; --gasse:24px; --takt:8px; --luft:80px; --t0:16px; --t1:20px; --t2:25px; --t3:31px; --t4:39px; --t5:49px; padding:0 var(--rand) calc(var(--luft)*1.5); } @media (max-width:1199px){ .textseite{--sp:8; --gasse:20px; --luft:60px} } @media (max-width:809px){ .textseite{--sp:4; --gasse:16px; --luft:40px} } .ts-raster{display:grid;grid-template-columns:repeat(var(--sp),minmax(0,1fr));column-gap:var(--gasse)} .textseite h1,.textseite h2,.textseite h3{ font-family:"Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;font-weight:300;margin:0; letter-spacing:-.005em;text-wrap:balance;color:var(--tinte)} .textseite p,.textseite ol,.textseite dl,.textseite dd{margin:0;padding:0} /* Die beiden kleinen Stimmen: Etikett in Inter, Ziffer in DM Mono */ .ts-et{font:400 11px/1.45 Inter,system-ui,sans-serif;letter-spacing:.18em; text-transform:uppercase;color:var(--grau)} .ts-nr{font:500 11px/1.45 "DM Mono",ui-monospace,monospace;letter-spacing:.14em; color:var(--grau);font-variant-numeric:lining-nums tabular-nums} .ts-kicker{font:500 11px/1.45 "DM Mono",ui-monospace,monospace;letter-spacing:.22em; text-transform:uppercase;color:var(--grau)} /* ---------- Titelfeld, drei Fassungen (Klasse k1/k2/k3 am ) ---------- */ /* Abstaende am Seitenanfang, gemessen gegen die Startseite (Kopf endet bei 110 px): 64 px Luft bis zur Haarlinie, 24 px bis zur Ueberschrift, 80 px bis zum Inhalt. Alles Vielfache von 8. Vorher waren es 40, das stand zu dicht unter dem Kopf. */ /* Michael 24.09.2026: "Entferne den dicken Strich oben." Die Haarlinie unter der Kopfleiste reicht; eine zweite darunter war ein Strich zuviel. Der Abstand bleibt. */ .ts-titel{margin-top:calc(var(--takt)*11); padding-bottom:var(--luft);row-gap:calc(var(--takt)*2)} .ts-stand{color:var(--text);font-size:var(--t0);line-height:1.6} /* K1 Grundlinie: Kicker in der ersten Spalte, Titel ab Spalte 3 */ .k1 .ts-kicker{grid-column:1/3;grid-row:1} .k1 .ts-titel h1{grid-column:3/11;grid-row:1/3;font-size:clamp(31px,4.6vw,var(--t5)); line-height:1.04;max-width:21ch} .k1 .ts-stand{grid-column:3/11;grid-row:3;max-width:52ch} /* K2 Tafel: Titel ueber alle zwoelf Spalten */ .k2 .ts-kicker{grid-column:1/13;grid-row:1} .k2 .ts-titel h1{grid-column:1/13;grid-row:2;font-size:clamp(39px,7.6vw,110px); line-height:.94;letter-spacing:-.015em} .k2 .ts-stand{grid-column:1/7;grid-row:3;margin-top:calc(var(--takt)*4);max-width:46ch} /* K3 Register links: Titel rechts, das Verzeichnis traegt die linke Spalte */ .k3 .ts-kicker{grid-column:5/13;grid-row:1} .k3 .ts-titel h1{grid-column:5/13;grid-row:2;font-size:clamp(31px,4.2vw,var(--t4)); line-height:1.1;max-width:20ch} .k3 .ts-stand{grid-column:5/11;grid-row:3;max-width:48ch} /* ---------- Inhaltsverzeichnis ---------- */ .ts-inhalt{margin-bottom:var(--luft);row-gap:calc(var(--takt)*1.5)} .ts-inhalt .ts-et{grid-column:1/3} .ts-inhalt ol{grid-column:6/13;list-style:none;display:grid; grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gasse);row-gap:calc(var(--takt)*1.5)} .ts-inhalt li{display:grid;grid-template-columns:calc(var(--takt)*6) 1fr; column-gap:calc(var(--takt)*2);align-items:baseline; border-top:1px solid var(--linie);padding-top:calc(var(--takt)*1.25)} .ts-inhalt a{text-decoration:none;font-size:var(--t0);line-height:1.5;color:var(--tinte)} @media (hover:hover) and (pointer:fine){ .ts-inhalt a:hover{text-decoration:underline;text-underline-offset:4px}} /* In K3 klebt das Verzeichnis links mit, der Text laeuft rechts */ .k3 .ts-rumpf{align-items:start} .k3 .ts-inhalt ol{grid-column:1/13} .k3 .ts-inhalt{grid-column:1/4;position:sticky;top:96px;margin-bottom:0;display:block} .k3 .ts-inhalt ol{display:block} .k3 .ts-koerper{grid-column:5/13} /* ---------- Abschnitt: Ziffer, Titel, Text auf einer Grundlinie ---------- */ .ts-abschnitt{border-top:1px solid var(--linie);padding:calc(var(--takt)*3.5) 0 var(--luft); row-gap:calc(var(--takt)*1.25)} .ts-abschnitt .ts-nr{grid-column:1/2} .ts-abschnitt h2{grid-column:2/6;font-size:var(--t2);line-height:1.2;padding-right:var(--gasse)} .ts-text{grid-column:6/12;display:flex;flex-direction:column;gap:calc(var(--takt)*1.75);max-width:62ch} .ts-text p{font-size:17px;line-height:1.66;color:var(--text);text-wrap:pretty} .ts-text a{color:var(--tinte);text-underline-offset:3px} .k2 .ts-abschnitt .ts-nr{grid-row:1;margin-bottom:calc(var(--takt)*1.5)} .k2 .ts-abschnitt h2{grid-column:1/5;grid-row:2;font-size:var(--t3)} .k2 .ts-abschnitt .ts-text{grid-column:6/12;grid-row:2} .k3 .ts-abschnitt{grid-template-columns:repeat(8,minmax(0,1fr))} .k3 .ts-abschnitt h2{grid-column:2/9;padding-right:0;margin-bottom:calc(var(--takt)*1.5)} .k3 .ts-abschnitt .ts-text{grid-column:2/9} /* Zahlenwerk und Datenpaare */ .ts-staffel{display:flex;flex-direction:column;margin:calc(var(--takt)*.5) 0} .ts-staffel div{display:flex;justify-content:space-between;align-items:baseline; gap:calc(var(--takt)*2.5);border-top:1px solid var(--linie);padding:calc(var(--takt)*1.25) 0} .ts-staffel div:last-child{border-bottom:1px solid var(--linie)} .ts-staffel span:first-child{flex:1 1 auto;min-width:0;font-size:var(--t0);color:var(--text)} .ts-staffel .wert{flex:0 0 auto;white-space:nowrap;font:500 13px/1 "DM Mono",ui-monospace,monospace; letter-spacing:.06em;color:var(--tinte);font-variant-numeric:lining-nums tabular-nums} .ts-daten{display:grid;grid-template-columns:minmax(150px,auto) 1fr;column-gap:var(--gasse)} .ts-daten dt{font:400 11px/1.45 Inter,system-ui,sans-serif;letter-spacing:.14em; text-transform:uppercase;color:var(--grau);border-top:1px solid var(--linie); padding:calc(var(--takt)*1.5) 0} .ts-daten dd{font-size:var(--t0);line-height:1.5;color:var(--text); border-top:1px solid var(--linie);padding:calc(var(--takt)*1.5) 0; font-variant-numeric:lining-nums tabular-nums} /* ---------- FAQ ---------- */ .ts-gruppe{border-top:1px solid var(--tinte);padding:calc(var(--takt)*3.5) 0 var(--luft); row-gap:calc(var(--takt)*3)} .ts-gruppe .ts-nr{grid-column:1/2} .ts-gruppe h2{grid-column:2/6;font-size:var(--t3);line-height:1.15;padding-right:var(--gasse)} .ts-fragen{grid-column:6/13;display:flex;flex-direction:column} .ts-frage{display:grid;grid-template-columns:calc(var(--takt)*9) 1fr;column-gap:var(--gasse); border-top:1px solid var(--linie);padding:calc(var(--takt)*2.5) 0} .ts-frage:first-child{border-top:0;padding-top:0} .ts-frage .ts-nr{padding-top:calc(var(--takt)*.75)} .ts-frage h3{grid-column:2/3;font-size:var(--t1);line-height:1.25} .ts-frage .ts-text{grid-column:2/3;margin-top:calc(var(--takt)*1.25);max-width:58ch} .k2 .ts-gruppe h2{grid-column:1/6;font-size:var(--t4)} .k3 .ts-gruppe{grid-template-columns:repeat(8,minmax(0,1fr))} .k3 .ts-gruppe h2{grid-column:1/9;padding-right:0} .k3 .ts-fragen{grid-column:1/9} /* ---------- Schlussblock ---------- */ .ts-schluss{border-top:1px solid var(--tinte);padding-top:calc(var(--takt)*3.5); row-gap:calc(var(--takt)*3)} /* Eine Zeile, drei Felder, Oberkanten buendig. grid-row wird ausdruecklich gesetzt, damit keine Fassungsregel den Satz in eine zweite Zeile schiebt. */ .ts-schluss h2{grid-column:1/5;grid-row:1;font-size:var(--t3);line-height:1.15} .ts-schluss .ts-text{grid-column:6/10;grid-row:1;max-width:none} .ts-knopf{grid-column:10/13;grid-row:1;align-self:start;display:flex;align-items:center; justify-content:space-between;gap:var(--gasse);height:56px;padding:0 calc(var(--takt)*2.75); border:1px solid var(--tinte);border-radius:0;text-decoration:none; font:400 11px/1 Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase; transition:background-color .2s ease,color .2s ease} /* Der Pfeil waechst von 28 auf 44 px, gerechnet ueber transform statt Breite: eine Breitenanimation loest Layout und Paint aus. 28/44 = .636 ist der Ruhezustand. */ .ts-pf{position:relative;display:inline-block;flex:0 0 auto;width:44px;height:1px} .ts-pf::before{content:"";position:absolute;inset:0;background:currentColor; transform:scaleX(.636);transform-origin:left center;transition:transform .25s cubic-bezier(.23,1,.32,1)} .ts-pf::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px; border-top:1px solid currentColor;border-right:1px solid currentColor; transform:translateX(-16px) rotate(45deg);transition:transform .25s cubic-bezier(.23,1,.32,1)} @media (hover:hover) and (pointer:fine){ .ts-knopf:hover{background:var(--tinte);color:var(--grund)} .ts-knopf:hover .ts-pf::before{transform:scaleX(1)} .ts-knopf:hover .ts-pf::after{transform:translateX(0) rotate(45deg)} } /* ---------- Tablet: 8 Spalten ---------- Auch hier nur ZWEI senkrechte Linien: Spalte 1 traegt Etiketten, Ziffern und Ueberschriften, Spalte 4 den Text. Die Regeln muessen dieselbe Staerke haben wie die Fassungsregeln oben (.k2 .ts-abschnitt .ts-text), sonst gewinnen die Desktop-Spalten und der Satz rutscht eine Spalte nach rechts. */ @media (min-width:810px) and (max-width:1199px){ .k1 .ts-titel h1,.k1 .ts-stand{grid-column:3/9} .k2 .ts-kicker,.k2 .ts-titel h1{grid-column:1/9} .k2 .ts-stand{grid-column:1/6} .k3 .ts-kicker,.k3 .ts-titel h1,.k3 .ts-stand{grid-column:3/9} .ts-inhalt ol,.k3 .ts-inhalt ol{grid-column:4/9;grid-template-columns:minmax(0,1fr)} .k3 .ts-inhalt{grid-column:1/3} .k3 .ts-koerper{grid-column:3/9} .ts-abschnitt h2,.k2 .ts-abschnitt h2,.k3 .ts-abschnitt h2{grid-column:1/4;font-size:var(--t2)} .ts-text,.k2 .ts-abschnitt .ts-text,.k3 .ts-abschnitt .ts-text{grid-column:4/9} .ts-gruppe h2,.k2 .ts-gruppe h2,.k3 .ts-gruppe h2{grid-column:1/4;font-size:var(--t3)} .ts-fragen,.k3 .ts-fragen{grid-column:4/9} .ts-schluss h2{grid-column:1/4;grid-row:1} .ts-schluss .ts-text{grid-column:4/9;grid-row:1} .ts-knopf{grid-column:4/9;grid-row:2;justify-self:stretch;margin-top:calc(var(--takt)*2)} } /* ---------- Mobil: alles untereinander, in DOM-Reihenfolge ---------- Das !important ist noetig: die Fassungsregeln (.k1 .ts-stand{grid-row:3}) wiegen sonst schwerer und stellen die Zeilen durcheinander. */ @media (max-width:809px){ .textseite{padding-bottom:var(--luft)} .ts-titel>*,.ts-inhalt>*,.ts-abschnitt>*,.ts-gruppe>*,.ts-schluss>*{ grid-column:1/5!important;grid-row:auto!important} .ts-titel h1,.k1 .ts-titel h1,.k2 .ts-titel h1,.k3 .ts-titel h1{ font-size:clamp(28px,8.4vw,var(--t3));line-height:1.08;max-width:none} .ts-titel{padding-bottom:calc(var(--takt)*5)} .ts-kicker{margin-bottom:calc(var(--takt)*1.5)} .ts-stand{margin-top:calc(var(--takt)*2)} .ts-inhalt,.k3 .ts-inhalt{position:static;display:grid;margin-bottom:calc(var(--takt)*5)} .ts-inhalt ol,.k3 .ts-inhalt ol{display:grid;grid-template-columns:minmax(0,1fr)} .ts-abschnitt,.k3 .ts-abschnitt,.ts-gruppe,.k3 .ts-gruppe{ padding:calc(var(--takt)*2.5) 0 calc(var(--takt)*5)} .ts-abschnitt h2,.k2 .ts-abschnitt h2,.k3 .ts-abschnitt h2, .ts-gruppe h2,.k2 .ts-gruppe h2{font-size:var(--t2);padding-right:0} .ts-text{max-width:none} .ts-frage{grid-template-columns:minmax(0,1fr);row-gap:calc(var(--takt))} .ts-frage .ts-nr,.ts-frage h3,.ts-frage .ts-text{grid-column:1/2;padding-top:0} .ts-daten{grid-template-columns:minmax(0,1fr)} .ts-daten dt{padding-bottom:0} .ts-daten dd{border-top:0;padding-top:calc(var(--takt)*.5)} .ts-knopf{width:100%} } /* Das Buchungsformular reist unsichtbar mit, damit der Verfuegbarkeits-Balken auf jeder Seite arbeitet. Siehe textseiten/bauen.py, Funktion buchform(). */ .ts-buchform{display:none} /* Fassungsschalter, nur in der Vorschau */ .ts-schalter{position:fixed;left:0;top:50%;z-index:60;display:flex;flex-direction:column; background:#35302B} .ts-schalter a{font:500 11px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.14em; color:#F6F2EA;text-decoration:none;padding:12px 14px} .ts-schalter a[aria-current]{background:#F1ECE3;color:#35302B} @media (prefers-reduced-motion:reduce){ .textseite *{transition-duration:.01ms!important;animation-duration:.01ms!important} } /* ---------- Bausteine der Themenseiten ---------- Beide sitzen INNERHALB der Textspalte (Linie 2) und erfinden keine neue Kante. */ /* Kennzahlen als Band: Etikett oben, Wert darunter, eine Haarlinie darueber. */ .ts-fakten{display:flex;flex-wrap:wrap;gap:calc(var(--takt)*4); border-top:1px solid var(--linie);padding-top:calc(var(--takt)*2)} .ts-fakten div{display:flex;flex-direction:column;gap:calc(var(--takt)*.75)} .ts-fakten dt{font:400 11px/1.45 Inter,system-ui,sans-serif;letter-spacing:.18em; text-transform:uppercase;color:var(--grau)} .ts-fakten dd{font-family:"Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;font-weight:300; font-size:var(--t1);line-height:1.2;color:var(--tinte)} /* Gleichrangige Punkte: zwei Spalten, Haarlinie ueber jedem Eintrag. */ .ts-gitter{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--gasse);row-gap:calc(var(--takt)*3)} .ts-gitter li{display:flex;flex-direction:column;gap:calc(var(--takt)*.75); border-top:1px solid var(--linie);padding-top:calc(var(--takt)*1.5)} .ts-gitter h3{font-size:var(--t1);line-height:1.25} .ts-gitter p{font-size:var(--t0);line-height:1.6;color:var(--text)} @media (max-width:809px){ .ts-fakten{gap:calc(var(--takt)*3)} .ts-gitter{grid-template-columns:minmax(0,1fr)} }