/* ========================================================================== CAROLA 3.0 – gemeinsames Stylesheet für die Inhaltsseiten (Startseite hat eigenes Inline-CSS; dies gilt für /vergleich, /faktencheck, /aktueller-stand). Look identisch: Hanken Grotesk, Taube-Akzent, Hairlines. ========================================================================== */ @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/sourceserif4-400.woff2) format('woff2')} @font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/sourceserif4-400i.woff2) format('woff2')} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/hankengrotesk-400.woff2) format('woff2')} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/hankengrotesk-500.woff2) format('woff2')} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/hankengrotesk-600.woff2) format('woff2')} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/hankengrotesk-700.woff2) format('woff2')} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/hankengrotesk-800.woff2) format('woff2')} :root{ /* --- Vorgabefarben von TSSB --- */ --taube:#59757E; --sandstein:#C79A6B; --navy:#000D26; --weiss:#fff; --schwarz:#000; /* --- Tonleiter aus der Taube abgeleitet --- */ --taube-900:#2C3E46; --taube-700:#42585f; --taube-500:#59757E; --taube-300:#8FA6AC; --taube-150:#C4D1D4; --taube-100:#DEE4E5; --taube-d:var(--taube-700); --taube-hell:#ECF0F1; /* Abgedunkelter Sandstein: #C79A6B faellt als Textfarbe auf hellem Grund beim Kontrast durch, dieser Wert besteht. */ --sand-700:#8A5E2B; --sand-200:#E7D9C4; /* --- Grundflaechen: kuehl, damit der Sandstein Akzent bleibt --- */ --grund:#FFFFFF; --grund-2:#E8EDEE; --line:#DFE6E7; --ink:#0A1526; --ink-2:#4C666D; --ink-3:#8FA6AC; /* --- Typografie --- */ --font-head:"Hanken Grotesk",Arial,sans-serif; --font-text:"Source Serif 4",Georgia,"Times New Roman",serif; --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace; --fs-h1:clamp(1.875rem,4.6vw,3.375rem); --fs-h2:clamp(1.4375rem,2.8vw,2.125rem); --fs-h3:1.1875rem; --fs-lead:clamp(1.1875rem,2.2vw,1.5rem); --lh-head:1.14; --lh-text:1.62; /* Ein Lesemass fuer allen Fliesstext, unabhaengig von der Schriftgroesse. 36rem = 576 px, rund 68 Zeichen bei 17 px Fliesstext. */ --measure:36rem; /* --- Raum: eine Leiter statt beliebiger Werte --- */ --r1:8px; --r2:14px; --r3:22px; --r4:34px; --r5:52px; --r6:clamp(52px,7vw,92px); --wrap:1080px; --header-h:60px; } @media(min-width:1280px){ :root{ --wrap:1240px } } @media(min-width:1440px){ :root{ --wrap:1400px } } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(--font-text);color:var(--ink);background:var(--grund); line-height:var(--lh-text);-webkit-font-smoothing:antialiased;font-size:17px} /* Bedienelemente, Marken und Zahlen bleiben in der Grotesk – nur der Fliesstext bekommt die Serife, weil sich die langen Faktentexte damit besser lesen. */ .kick,.crumb,.updated,.cap,.btn,.chip,nav,header,footer .foot-links,footer .credit, .card .num,.mehr,table,.timeline time{font-family:var(--font-head)} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,32px);width:100%} /* Frueher verengte .prose den Container auf 760px und zentrierte ihn – dadurch sprang die linke Kante von Abschnitt zu Abschnitt. Jetzt bleibt der Container immer gleich breit; begrenzt wird nur die Textzeile, linksbuendig. */ /* .prose begrenzt die LESEZEILE, nie den Container. Hier stand einmal .prose{max-width:none} – das hob die Containerbreite von .wrap auf, wodurch 53 Baender auf 22 Seiten am Fensterrand klebten, waehrend alle uebrigen mittig sassen. Genau daher die springende linke Kante. */ .wrap.prose{max-width:52rem} .wrap.prose > h1,.wrap.prose > h2,.wrap.prose > .tbl, .wrap.prose > figure,.wrap.prose > .cards{max-width:none} /* Nur Elemente, die selbst Text tragen. Ein "div.prose" haette den Container
mitgetroffen und ihn auf die Lesebreite geschrumpft – dann rutscht das ganze Band in die Mitte. */ a{color:var(--sand-700)} a:hover{color:var(--taube-700)} img{max-width:100%;height:auto;display:block} h1,h2,h3,h4{font-family:var(--font-head);line-height:var(--lh-head);margin:0;letter-spacing:-.015em;text-wrap:balance} .sperr{letter-spacing:.02em} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* ---------- Header ---------- */ header.hd{position:sticky;top:0;z-index:60;height:var(--header-h);display:flex;align-items:center;background:rgba(255,255,255,.94); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .hd .row{max-width:var(--wrap);margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:14px;width:100%} .hd .mark{font-family:var(--font-head);font-weight:800;letter-spacing:.14em;font-size:1rem;color:var(--ink);text-decoration:none;white-space:nowrap} .hd nav{margin-left:auto;display:flex;align-items:center;gap:20px} .hd nav a{font-size:.95rem;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap} .hd nav a:hover,.hd nav a[aria-current]{color:var(--taube)} /* Zweitrangige Seiten stehen nur im Mobilmenue, nicht in der Desktopleiste. */ .hd nav .nav-gruppe,.hd nav a.nav-mehr{display:none} /* ---------- Burger + Mobilmenue ---------- Unterhalb von 900px traegt das Menue alle neun Seiten. Vorher waren auf kleinen Bildschirmen Punkte schlicht ausgeblendet – auf manchen Seiten blieben drei uebrig, ohne Weg zurueck. */ .burger{display:none;margin-left:auto;width:44px;height:40px;padding:11px 10px;border:0; background:transparent;cursor:pointer;flex-direction:column;justify-content:space-between;flex:none} .burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px; transition:transform .3s ease,opacity .2s ease,background .3s ease} .burger.open span:nth-child(1){transform:translateY(9px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)} @media(max-width:899px){ .burger{display:flex} header.hd.menu-open{background:var(--navy)} header.hd.menu-open .mark{color:#fff} header.hd.menu-open .burger span{background:#fff} .hd nav{position:fixed;top:var(--header-h);left:0;right:0;margin:0;padding:6px 0 30px;gap:0; flex-direction:column;align-items:stretch;background:var(--navy); max-height:calc(100svh - var(--header-h));overflow-y:auto; transform:translateY(-12px);opacity:0;visibility:hidden; transition:transform .28s ease,opacity .28s ease,visibility .28s} .hd nav.open{transform:translateY(0);opacity:1;visibility:visible} .hd nav a{display:block;font-size:1.16rem;padding:15px 22px;color:#fff; border-bottom:1px solid rgba(255,255,255,.09)} .hd nav a:hover,.hd nav a[aria-current]{color:var(--sandstein)} .hd nav a[aria-current]::after{content:" ·";color:var(--sandstein)} .hd nav .nav-gruppe{display:block;font-size:.72rem;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:rgba(255,255,255,.45);padding:22px 22px 8px} .hd nav a.nav-mehr{display:block;font-size:1rem;padding:12px 22px;color:rgba(255,255,255,.85)} .hd nav a:last-child{border-bottom:0} .hd .mark{letter-spacing:.08em} } @media(min-width:900px) and (max-width:1080px){ .hd nav{gap:14px} .hd nav a{font-size:.86rem} } /* ---------- Bänder / Sektionen ---------- */ .band{padding:var(--r6) 0} .band.tight{padding:var(--r5) 0} .b-white{background:var(--grund)} /* ---------- Die vier Bandstufen ---------- weiss -> heller Anflug (.b-wash) -> echte Taube (.b-taube) -> schwarz Die Taube ist der Akzent: hoechstens EIN Band je Seite, und zwar das, das die Kernaussage traegt. Sie war zwischenzeitlich auf Fast-Weiss degradiert worden, wodurch das Farbklima verlorenging. */ .b-taube{background:var(--taube);color:#fff} .b-black{background:var(--schwarz);color:#fff} .b-black a{color:#fff} .kick{font-family:var(--font-head);font-weight:700;letter-spacing:.2em;text-transform:uppercase; font-size:.72rem;color:var(--taube-700);margin-bottom:var(--r2)} .b-black .kick{color:var(--sandstein)} h1.big,h2.big{font-weight:800;font-size:var(--fs-h1);line-height:1.03;text-wrap:balance} h2.mid{font-weight:700;font-size:var(--fs-h2);margin:0 0 .35em} .lead{font-size:var(--fs-lead);color:var(--ink-2);line-height:1.42;max-width:46rem;margin:.55em 0 0} .b-black .lead{color:rgba(255,255,255,.82)} p{margin:0 0 1em} .band p:last-child{margin-bottom:0} /* ---------- Karten ---------- */ .cards{display:grid;grid-template-columns:1fr;gap:16px;margin-top:26px} @media(min-width:680px){ .cards.c2{grid-template-columns:1fr 1fr} .cards.c3{grid-template-columns:repeat(3,1fr)} } .card{background:var(--weiss);border:1px solid var(--line);border-radius:16px;padding:22px; display:flex;flex-direction:column;gap:8px} .b-taube .card{background:#fff} .card h3{font-size:1.08rem;font-weight:700} .card p{font-size:.96rem;color:var(--ink-2);margin:0} .card .num{font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:.08em; text-transform:uppercase;color:var(--taube)} .card.us{border-color:var(--taube);box-shadow:0 0 0 1px var(--taube)} .card .badge{display:inline-block;align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.04em; text-transform:uppercase;background:var(--taube);color:#fff;border-radius:999px;padding:3px 10px} /* Häkchen-/Kreuz-Listen */ ul.ticks,ul.plain{list-style:none;padding:0;margin:.4em 0 0;display:flex;flex-direction:column;gap:10px} /* Häkchen absolut positioniert – der Textfluss bleibt dadurch zusammenhängend, auch wenn ein Eintrag aus fettem Text, Fließtext und Links besteht */ ul.ticks li{position:relative;padding-left:28px;font-size:1rem;color:var(--ink-2);line-height:1.55} ul.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--taube);font-weight:800;line-height:1.55} ul.ticks li b{color:var(--ink)} /* Nur das schwarze Band traegt helle Schrift. .b-taube ist hier ein heller Ton (--taube-hell); weisse Schrift darauf war praktisch unlesbar. */ .b-black ul.ticks li{color:rgba(255,255,255,.82)} .b-black ul.ticks li b{color:#fff} .b-black ul.ticks li::before{color:var(--sandstein)} /* Vergleichstabelle */ .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative; border:1px solid var(--line);border-radius:14px;margin-top:22px} /* Frueher galt pauschal min-width:520px. Das zwang auch zweispaltige Tabellen zum seitlichen Scrollen, obwohl sie auf ein Telefon passen. Jetzt nur so breit wie noetig: auf schmalen Schirmen die Containerbreite. */ table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:min(520px,100%)} /* Ab drei Spalten waeren die Spalten sonst unlesbar schmal – diese Tabellen scrollen bewusst im eigenen Rahmen und bekommen dafuer einen Hinweis. */ .tbl:has(tr > *:nth-child(3)) table{min-width:520px} .tbl th,.tbl td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)} .tbl tr:last-child td{border-bottom:0} /* Zahlenwerte nicht mitten im Ausdruck umbrechen ("2 ×" / "0,15 m"), dafuer darf die Bezeichnung links trennen. */ /* Bei mehrspaltigen Tabellen bleibt die erste Spalte stehen, waehrend der Rest wandert – sonst weiss man beim Scrollen nicht mehr, welche Zeile man liest. */ @media(max-width:759px){ .tbl:has(tr > *:nth-child(3)) th:first-child, .tbl:has(tr > *:nth-child(3)) td:first-child{ position:sticky;left:0;z-index:1;background:var(--grund); box-shadow:1px 0 0 var(--line)} .tbl:has(tr > *:nth-child(3)) thead th:first-child{background:#f6f8f8} .tbl:has(tr > *:nth-child(3)) tr.hi td:first-child{background:#F4F6F7} } /* Frueher galt nowrap pauschal fuer die letzte Spalte – bei Fliesstext sprengte das die Tabelle und quetschte die erste Spalte auf ein Zeichen. Jetzt nur dort, wo tatsaechlich kurze Werte stehen (Klasse "werte"). */ .tbl.werte td:last-child{white-space:nowrap} .tbl td:first-child,.tbl th:first-child{overflow-wrap:break-word} .tbl.scrollbar{box-shadow:inset -24px 0 20px -20px rgba(0,0,0,.3)} .tbl.scrollbar.am-ende{box-shadow:none} .tbl.scrollbar::before{content:"→ seitlich scrollen";position:absolute;top:0;right:0; font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--ink-2); background:rgba(255,255,255,.92);padding:4px 9px;border-bottom-left-radius:10px; pointer-events:none} .tbl.scrollbar.am-ende::before{display:none} @media(min-width:760px){ .tbl.scrollbar::before{display:none} } th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top} thead th{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);background:#f6f8f8;white-space:nowrap} tbody tr:last-child td{border-bottom:0} td b{color:var(--ink)} .hi{background:rgba(89,117,126,.07)} /* Chronik / Timeline */ .timeline{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:0} .tl{display:grid;grid-template-columns:132px 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--line)} .tl:first-child{border-top:0} .tl time{font-family:var(--font-head);font-weight:700;color:var(--taube-700);font-size:.95rem} .tl .tl-b h3{font-size:1.06rem;font-weight:700;margin-bottom:5px} .tl .tl-b p{font-size:.96rem;color:var(--ink-2);margin:0} .tl.past time{color:var(--ink-2)} /* Der hervorgehobene Eintrag bekommt Polster – ohne Ausgleich schoebe das seinen Text um 20 px nach rechts und die Zeitleiste haette zwei Kanten. Negativer Aussenabstand laesst nur die Flaeche breiter werden. */ .tl.next{background:var(--grund-2);border-radius:12px;padding:20px; border-top:0;margin:2px -20px 0} /* Auf getoentem und farbigem Grund wird der hervorgehobene Eintrag eine weisse Flaeche. Ein halbtransparenter Schleier hatte den Grund abgedunkelt und alles darin knapp unter die Lesbarkeitsgrenze gedrueckt (Link 4,47 statt 4,50). */ .b-wash .tl.next{background:#fff} @media(max-width:600px){ .tl{grid-template-columns:1fr;gap:6px} } /* Buttons */ .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:600; font-size:1rem;text-decoration:none;padding:12px 24px;border-radius:40px;background:var(--taube);color:#fff; border:1.5px solid var(--taube);transition:background .2s,transform .2s} .btn:hover{background:var(--taube-d);color:#fff;transform:translateY(-1px)} .btn.ghost{background:transparent;color:var(--taube-d)} .btn.ghost:hover{background:rgba(89,117,126,.08);color:var(--taube-d)} .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} /* Breadcrumb / Meta */ .crumb{font-size:.86rem;color:var(--ink-2);margin-bottom:14px} .crumb a{color:var(--ink-2);text-decoration:none} .crumb a:hover{color:var(--taube)} /* Einordnung fuer Besucher, die ueber die Suche direkt auf einer Unterseite landen und den Zusammenhang nicht kennen. */ .einordnung{margin:18px 0 0;padding:15px 18px;border-left:3px solid var(--taube-150); background:var(--grund-2);border-radius:0 12px 12px 0;font-size:.95rem; line-height:1.55;color:var(--ink-2)} .einordnung b{color:var(--ink)} .einordnung a{white-space:nowrap} .updated{font-size:.86rem;color:var(--ink-2);margin-top:6px} /* ---------- Footer ---------- Zweispaltig ab 820 px: links Absender und Logos, rechts Wege und Kanaele. Vorher stapelte sich alles linksbuendig, was auf breiten Schirmen zwei Drittel der Zeile leer liess. */ footer{background:var(--schwarz);color:rgba(255,255,255,.72);padding:60px 0 44px;font-size:.95rem} footer .foot-top{display:grid;grid-template-columns:1fr;gap:34px} @media(min-width:820px){ footer .foot-top{grid-template-columns:1.5fr 1fr;gap:56px;align-items:start} } footer .logos{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-bottom:20px;opacity:.92} footer .logos img{height:30px;width:auto} footer p{color:rgba(255,255,255,.72);font-size:.95rem} footer p b{color:#fff} footer .foot-credit{margin:0;max-width:46rem;line-height:1.6} footer .foot-credit b{color:#fff;font-weight:600} footer .foot-meta{display:flex;flex-direction:column;gap:20px} @media(min-width:820px){ footer .foot-meta{align-items:flex-end;text-align:right} } footer .foot-links{margin:0;font-size:.9rem;display:flex;flex-wrap:wrap;gap:8px 18px} @media(min-width:820px){ footer .foot-links{justify-content:flex-end} } footer .foot-links a{color:rgba(255,255,255,.8);text-decoration:none} footer .foot-links a:hover{color:#fff;text-decoration:underline} footer .socials{display:flex;align-items:center;gap:10px;flex-wrap:wrap} footer .socials a{display:inline-flex;width:36px;height:36px;align-items:center; justify-content:center;border:1px solid rgba(255,255,255,.22);border-radius:50%; color:#fff;transition:background .15s ease,border-color .15s ease} footer .socials a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)} footer .socials svg{width:17px;height:17px;fill:currentColor} footer .credit{margin:26px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.14); font-size:.86rem;color:rgba(255,255,255,.55)} footer .credit a{color:rgba(255,255,255,.75);text-decoration:none} footer .credit a:hover{color:#fff;text-decoration:underline} /* ---------- Uebersichtsseiten: Kachelraster ---------- Bisher nur im Inline-CSS der Startseite. Die beiden Uebersichtsseiten brauchen dieselben Bausteine, deshalb hier gemeinsam. */ .b-wash{background:var(--grund-2)} .card.kachel{padding:0;overflow:hidden;text-decoration:none;color:inherit;position:relative; display:flex;flex-direction:column; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease} .card.kachel:hover{transform:translateY(-2px);border-color:var(--taube); box-shadow:0 6px 22px rgba(0,0,0,.07)} .card.kachel .kbild{display:block;aspect-ratio:16/10;overflow:hidden;background:#eef1f2} .card.kachel .kbild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease} .card.kachel:hover .kbild img{transform:scale(1.03)} /* Zeichnungen nicht beschneiden – sie verlieren dabei ihre Aussage */ .card.kachel .kbild.zeichnung{background:#fff;border-bottom:1px solid var(--line)} /* Laengsschnitte und Vergleichsstreifen sind extrem breit – in einem 16:10-Rahmen schwimmen sie in Weissraum. */ .card.kachel .kbild.breit{aspect-ratio:16/6} .card.kachel .kbild.zeichnung img{object-fit:contain;padding:12px} .card.kachel:hover .kbild.zeichnung img{transform:none} .card.kachel .num,.card.kachel h3,.card.kachel p,.card.kachel .mehr{padding-left:20px;padding-right:20px} .card.kachel .num{margin-top:18px} .card.kachel h3{margin:2px 0 0} .card.kachel p{flex:1 1 auto} .card.kachel .mehr{font-size:.86rem;font-weight:700;color:var(--taube);margin-top:6px;padding-bottom:20px} .card.kachel:hover .mehr{text-decoration:underline} @media(prefers-reduced-motion:reduce){ .card.kachel:hover{transform:none} .card.kachel:hover .kbild img{transform:none} } /* ---------- Bilder, Bildraster, Bildunterschriften ---------- Bisher gab es diese Bausteine nur im Inline-CSS der Startseite; die Unterseiten haben ihre Bilder mit Inline-Styles nachgebaut. Jetzt eine gemeinsame Grundlage, damit alle Seiten gleich aussehen. */ figure.bild,figure.plan{margin:0;border-radius:16px;overflow:hidden;background:#fff} figure.bild img,figure.plan img{width:100%;height:auto;display:block} /* Zeichnungen und Plaene brauchen Luft und weissen Grund, auch auf farbigem Band */ figure.plan{padding:14px;border:1px solid var(--line)} .b-taube figure.bild,.b-taube figure.plan{border-color:rgba(0,0,0,.06)} /* ---------- Was auf dem Taube-Band liegt ---------- Flaechen mit eigenem Inhalt (Tabellen, Karten, Bilder) bleiben weiss und wirken dadurch wie Karten auf Farbe. Alles andere traegt helle Schrift. */ .b-taube h2,.b-taube h3{color:#fff} .b-taube .kick{color:#fff;opacity:1} .b-taube .lead{color:#fff} .b-taube .cap{color:#fff} .b-taube .updated{color:#fff} .b-taube p{color:#fff} .b-taube b,.b-taube strong{color:#fff} /* ...aber nicht innerhalb der weissen Flaechen – dort blieb weiss auf weiss */ .b-taube .tbl b,.b-taube .tbl strong,.b-taube .card b,.b-taube .card strong, .b-taube .nl b,.b-taube .nl strong,.b-taube .zwei-links b{color:var(--ink)} .b-taube a{color:#fff;text-decoration:underline;text-underline-offset:3px} .b-taube a:hover{text-decoration-thickness:2px} /* Tabellen als weisse Flaeche – der Inhalt bleibt dunkel und lesbar */ .b-taube .tbl{background:#fff;border-color:rgba(255,255,255,.35)} .b-taube .tbl th,.b-taube .tbl td{color:var(--ink)} .b-taube .tbl td:not(:first-child){color:var(--ink)} .b-taube .tbl a{color:var(--taube-700)} .b-taube .tbl .hi{background:rgba(89,117,126,.10)} .b-taube .tbl span{color:inherit} /* Karten und Bilder bleiben weiss */ .b-taube .card{background:#fff;border-color:rgba(255,255,255,.35)} .b-taube .card h3,.b-taube .card p,.b-taube .card b{color:var(--ink)} .b-taube .card p{color:var(--ink-2)} .b-taube .card a{color:var(--taube-700);text-decoration:none} .b-taube figure.bild,.b-taube figure.plan,.b-taube .draw{background:#fff} /* Haken: Sandstein kaeme auf der Taube nur auf 1,93 – deshalb weiss */ .b-taube ul.ticks li{color:#fff} .b-taube ul.ticks li b{color:#fff} .b-taube ul.ticks li::before{background:#fff} /* Zeitleiste: Trennlinien und Datum hell */ .b-taube .tl{border-top-color:rgba(255,255,255,.28)} .b-taube .tl time,.b-taube .tl.past time{color:#fff} .b-taube .tl .tl-b h3{color:#fff} .b-taube .tl .tl-b p{color:#fff} .b-taube .tl.next{background:#fff} .b-taube .tl.next time{color:var(--taube-700)} .b-taube .tl.next .tl-b h3{color:var(--ink)} .b-taube .tl.next .tl-b p{color:var(--ink-2)} /* Meldungsliste: die Karten bleiben weiss */ .b-taube .nl > li{background:#fff;border-color:rgba(255,255,255,.35)} .b-taube .nl h2{color:var(--ink)} .b-taube .nl p{color:var(--ink-2)} .b-taube .nl time{color:var(--taube-700)} .b-taube .nl .mehr{color:var(--taube-700)} .b-taube .nl-fuss{color:#fff} /* Schaltflaeche: die Taube-Fuellung waere unsichtbar */ .b-taube .btn{background:#fff;color:var(--taube-900);border-color:#fff} .b-taube .btn:hover{background:rgba(255,255,255,.88);border-color:rgba(255,255,255,.88)} .figrid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:14px} @media(min-width:760px){ .figrid.zwei{grid-template-columns:1fr 1fr} } .figbreit{max-width:980px;margin-left:auto;margin-right:auto} .cap{font-size:.86rem;line-height:1.5;color:var(--ink-2);margin:10px 0 0} .b-black .cap{color:rgba(255,255,255,.65)} /* Sprungmarken duerfen nicht unter dem klebenden Kopf landen */ [id]{scroll-margin-top:calc(var(--header-h) + 12px)} .band > .wrap > *:first-child{margin-top:0} @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}} /* ---------- Nachrichten ---------- Eigene Rubrik, damit Besucher den Verfahrensstand chronologisch nachlesen koennen. Der erste Eintrag ist der Aufmacher und darf groesser stehen. */ .nl{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px} .nl > li{background:#fff;border:1px solid var(--line);border-radius:16px; transition:border-color .18s ease} .nl > li:hover{border-color:var(--taube-300)} .nl a.nl-l{display:block;padding:22px 24px;text-decoration:none;color:inherit} .nl time{display:block;font-family:var(--font-head);font-size:.78rem;font-weight:700; letter-spacing:.07em;text-transform:uppercase;color:var(--taube-700);margin-bottom:8px} .nl h2{font-family:var(--font-head);font-size:1.2rem;font-weight:700;line-height:1.25; letter-spacing:-.01em;margin:0 0 8px} .nl p{font-size:.95rem;color:var(--ink-2);margin:0} .nl .mehr{display:inline-block;margin-top:12px;font-family:var(--font-head); font-weight:700;font-size:.9rem;color:var(--taube)} .nl a.nl-l:hover .mehr{text-decoration:underline} .nl > li.top{border-color:var(--taube-300);border-left-width:4px} .nl > li.top a.nl-l{padding:28px 26px} .nl > li.top h2{font-size:clamp(1.4rem,3.4vw,1.85rem)} .nl > li.top p{font-size:1.03rem} /* Hinweiszeile unter der Liste */ .nl-fuss{margin-top:22px;font-size:.9rem;color:var(--ink-2)} /* ── WhatsApp-Kanal-Hinweis ── Ein Hinweis je Seite: unter jeder Meldung (im schwarzen Schlussband), in der Nachrichtenuebersicht (Taube-Band) und auf der Startseite (Termin-Tabelle). Weisse Karte, traegt auf allen vier Bandtypen. Basiswert zur Erfolgsmessung: 295 Follower am 25.08.2026 (betrieb/messpunkte.md). */ .wa-folgen{display:flex;align-items:center;gap:14px;background:#fff; border:1px solid var(--line);border-radius:14px;padding:15px 20px; margin:26px 0 0;max-width:40rem;text-decoration:none; color:var(--ink);line-height:1.45} .wa-folgen svg{width:26px;height:26px;flex:none;fill:#25D366} .wa-folgen span b{font-family:var(--font-head)} .wa-folgen .pf{margin-left:auto;flex:none;padding-left:8px; font-family:var(--font-head);font-weight:700;color:var(--taube-700)} .wa-folgen:hover{border-color:var(--taube-300)} .b-black .wa-folgen,.b-taube .wa-folgen{border-color:transparent;color:var(--ink)} .b-black .wa-folgen b,.b-taube .wa-folgen b{color:var(--ink)} .b-black .wa-folgen .pf,.b-taube .wa-folgen .pf{color:var(--taube)} /* ── Sitze-Balken (/die-entscheidung/): Ausgangslage im Stadtrat ── Zahlen aus der Meldung vom 26.08. – bei neuen Festlegungen Breiten (x/70) und Legende anpassen, Quelle bleibt die jeweils neueste Meldung. */ .sbalken{margin:40px 0 0;position:relative} .sb-spur{position:relative;display:flex;height:36px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--grund-2)} .sb-spur span{display:block;height:100%} .sb-a{background:var(--taube)} .sb-b{background:var(--taube-900)} .sb-m{position:absolute;top:-8px;height:52px;width:0; border-left:2px dashed var(--ink);z-index:2} /* Die Marke steht je nach Sitzverteilung auf hellem ODER dunklem Balken – deshalb eine eigene helle Plakette statt bloss dunkler Schrift. */ /* Die Ziellinie steht UEBER dem Balken, damit sichtbar bleibt, wo die Mehrheit liegt und wie weit der Balken noch davon entfernt ist. */ .sb-m b{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 7px); font-family:var(--font-head);font-size:.72rem;letter-spacing:.04em;font-weight:800; white-space:nowrap;color:var(--ink)} .sb-legende{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px; margin:12px 0 0;padding:0;font-size:.95rem;color:var(--ink-2)} .sb-legende i{display:inline-block;width:12px;height:12px;border-radius:3px; margin-right:7px;vertical-align:-1px} .sb-legende b{color:var(--ink)} .sb-legende .la{background:var(--taube)} .sb-legende .lb{background:var(--taube-900)} .sb-legende .lc{background:var(--grund-2);border:1px solid var(--line)} /* ── "Der Stand in vier Saetzen": ein Satz je Zeile, damit die Zahl im Titel auch sichtbar stimmt. Volle Breite, deshalb keine Lesezeile. ── */ .vier{list-style:none;counter-reset:v;margin:18px 0 0;padding:0;display:grid;gap:12px} .vier li{counter-increment:v;position:relative;padding:14px 18px 14px 52px; background:var(--grund-2);border-radius:12px;max-width:none;line-height:1.5} .vier li::before{content:counter(v);position:absolute;left:18px;top:14px; font-family:var(--font-head);font-weight:800;color:var(--taube);font-size:1.06rem} .b-taube .vier li{background:rgba(255,255,255,.14)} .b-taube .vier li::before{color:#fff} .card a,.notiz a{font-weight:700;text-decoration:underline;text-underline-offset:3px} .card a{color:var(--taube-700)} .card a:hover,.notiz a:hover{color:var(--taube-900)} .b-taube .card a{color:var(--taube-700)} /* ── Zeitungslayout auch auf Unterseiten: Haupttext behaelt die Lesezeile, daneben laufen kurze Bloecke. Unter 900px stapelt alles. ── */ .spalten{display:grid;gap:24px;align-items:start} @media(min-width:900px){ .spalten{grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:42px} } .neben{display:flex;flex-direction:column;gap:12px} .notiz{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 18px} .notiz .n-kick{font-family:var(--font-head);font-weight:800;font-size:.72rem; letter-spacing:.16em;text-transform:uppercase;color:var(--taube);display:block;margin-bottom:8px} .notiz h3{font-family:var(--font-head);font-size:1rem;margin:0 0 5px;color:var(--ink)} .notiz p{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink-2);max-width:none} .n-liste{list-style:none;margin:0;padding:0;font-size:.95rem} .n-liste li{display:flex;justify-content:space-between;gap:12px;padding:7px 0; border-bottom:1px solid var(--line);color:var(--ink-2)} .n-liste li:last-child{border-bottom:0} .n-liste li b{color:var(--ink);font-family:var(--font-head);font-variant-numeric:tabular-nums} .n-liste li.hi,.n-liste li.hi b{color:var(--taube-900);font-weight:600} .b-taube .notiz,.b-taube .notiz p,.b-taube .notiz h3,.b-taube .notiz li{color:var(--ink-2)} .b-taube .notiz h3,.b-taube .notiz b{color:var(--ink)} .b-taube .notiz .n-kick{color:var(--taube-700)} /* === PORTAL-START === */ /* ========================================================================== Portal-Layout (Umbau September 2026) – Startseite und Meldungen. Wird von betrieb/portal/portal-umbau.py in assets/site.css eingesetzt. ========================================================================== */ /* ---------- Menüpunkt „Fragen" ---------- */ .hd nav a.nav-fragen{margin-left:6px;border:1px solid var(--line);border-radius:40px;padding:5px 13px;color:var(--taube-700)} @media(max-width:899px){ .hd nav a.nav-fragen{margin:0;border:0;border-radius:0;padding:15px 22px;color:#fff} } /* ---------- Links im Portal ohne Unterstreichung (site.css setzt keine zurück) ---------- */ .p-hero a,.p-raster a,.m-rechts a,.fuss-spalten a,a.wa-folgen,a.p-video,a.btn{text-decoration:none} .p-link:hover,.p-fragen-liste p a:hover{text-decoration:underline} /* ---------- Kleine gemeinsame Bausteine ---------- */ .p-kick{display:block;font-family:var(--font-head);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;color:var(--taube-700)} .p-h2{font-family:var(--font-head);font-weight:700;font-size:var(--fs-h2);line-height:1.14;margin:12px 0 0;color:var(--ink)} .p-link{display:inline-block;margin-top:14px;font-family:var(--font-head);font-weight:700;font-size:.9rem;color:var(--taube)} .p-link:hover{color:var(--taube-700);text-decoration:underline} .p-text{margin:0;font-size:1rem;line-height:1.62;color:var(--ink)} /* ---------- Hero ---------- */ .p-hero{position:relative;background:var(--schwarz);color:#fff} .p-buehne{position:relative;height:560px;overflow:hidden} .p-hero picture{position:absolute;top:0;left:0;right:0;bottom:0;display:block} .p-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 54%} .p-weiter{display:none} .p-buehne::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.05) 26%,rgba(0,0,0,0) 46%,rgba(0,0,0,.5) 78%,rgba(0,0,0,.85) 100%)} .p-hero-in{position:absolute;left:0;right:0;bottom:0;z-index:1;padding-bottom:52px} .p-kick-hell{font-family:var(--font-head);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;color:rgba(255,255,255,.78);margin:0 0 14px} .p-hero h1{font-weight:800;font-size:clamp(1.8rem,4.2vw,3.4rem);line-height:1.06;letter-spacing:-.02em;color:#fff;max-width:56rem;text-shadow:0 2px 24px rgba(0,0,0,.35)} .p-hero-satz{font-family:var(--font-head);font-size:clamp(1rem,1.9vw,1.18rem);line-height:1.45;color:rgba(255,255,255,.9);max-width:52rem;margin:14px 0 0} .p-chips{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:10px;font-family:var(--font-head);font-size:.88rem;font-weight:600;font-variant-numeric:tabular-nums} .p-chips li{border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.18);border-radius:40px;padding:7px 14px} .p-hero .btn{margin-top:26px} /* Bühne: Das Bild füllt beim Laden den Bildschirm und schrumpft beim Scrollen oben und unten auf die Brücke. Die Höhe setzt site.js, --hd ist die Kopfzeile. */ @media(min-width:900px) and (min-height:560px){ .p-hero{height:max(560px,calc(100vh - var(--hd,0px)))} .p-buehne{position:sticky;top:var(--hd,0px);height:max(560px,calc(100vh - var(--hd,0px)))} .p-hero-in{padding-bottom:max(52px,6vh)} .p-weiter{display:flex;position:absolute;left:50%;bottom:20px;z-index:2;transform:translateX(-50%);width:42px;height:42px;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(0,0,0,.2);opacity:calc(1 - var(--fort,0) * 3)} .p-weiter svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2} .p-weiter:hover{background:var(--taube);border-color:var(--taube)} .p-weiter:focus-visible{outline:3px solid #fff;outline-offset:2px} } @media(max-width:899px){ .p-hero{background:#fff;color:var(--ink)} .p-buehne{height:auto} .p-hero picture{position:static} .p-hero img{height:auto;aspect-ratio:16/9} .p-buehne::after{display:none} .p-hero-in{position:static;padding-top:20px;padding-bottom:24px} .p-kick-hell{color:var(--taube-700)} .p-hero h1{color:var(--ink);text-shadow:none} .p-hero-satz{color:var(--ink-2)} .p-chips{display:none} .p-hero .btn{margin-top:18px} } /* ---------- Dreispalten-Raster der Startseite ---------- */ .p-raster{display:grid;gap:40px;align-items:start;padding-top:64px;padding-bottom:92px} @media(min-width:1440px){ .p-raster{grid-template-columns:280px minmax(0,1fr) 320px} } @media(min-width:1280px) and (max-width:1439px){ .p-raster{grid-template-columns:250px minmax(0,1fr) 290px;gap:32px} } @media(min-width:1000px) and (max-width:1279px){ .p-raster{grid-template-columns:250px minmax(0,1fr);gap:36px} .p-rechts{grid-column:2} } .p-links{position:sticky;top:84px} .p-mitte{display:flex;flex-direction:column;gap:72px;min-width:0} .p-rechts{display:flex;flex-direction:column;gap:40px;min-width:0} .p-stand-mobil,.p-jahre{display:none} /* ---------- Stand-Kasten ---------- */ .p-stand{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;font-family:var(--font-head)} .p-stand-kopf{padding:22px 22px 18px} .p-stand-zahl{display:block;margin-top:12px;font-weight:800;font-size:2.75rem;line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums} .p-stand-quelle{display:block;margin-top:6px;font-size:.8rem;color:var(--ink-2)} .p-stand-satz{margin:12px 0 0;font-family:var(--font-text);font-size:.95rem;line-height:1.5;color:var(--ink)} .p-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);font-family:var(--font-head)} .p-kacheln div{padding:14px 16px 14px 22px;display:flex;flex-direction:column;gap:2px} .p-kacheln div:nth-child(odd){border-right:1px solid var(--line)} .p-kacheln div:nth-child(even){padding-left:16px} .p-kacheln div:nth-child(n+3){border-top:1px solid var(--line)} .p-kacheln b{font-size:1.25rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} .p-kacheln span{font-size:.78rem;color:var(--ink-2)} .p-plan{padding:14px 22px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;font-size:.84rem} .p-plan .p-kick{font-size:.68rem;letter-spacing:.16em} .p-plan div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px} .p-plan b{font-weight:700;color:var(--taube-700)} .p-plan span{color:var(--ink-2)} .p-plan .jetzt{margin:2px -10px 0;padding:7px 10px;border-radius:8px;background:var(--taube-hell)} .p-plan .jetzt b,.p-plan .jetzt span{color:var(--ink);font-weight:700} .p-stand-wa{padding:14px 22px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:600;color:var(--ink)} .p-stand-wa svg{width:20px;height:20px;flex:none;fill:#25D366} .p-stand-wa:hover{color:var(--taube-700)} .p-stand-wa .pf{margin-left:auto;font-weight:700;color:var(--taube-700)} .p-stand-fuss{margin:0;padding:14px 22px 18px;border-top:1px solid var(--line);font-size:.75rem;line-height:1.45;color:var(--ink-2)} .p-zarlo{font-weight:700;color:var(--ink);white-space:nowrap} .p-zarlo img{display:inline;height:.95em;width:auto;vertical-align:-.13em;margin-right:.38em} .p-zarlo:hover{color:var(--taube-700)} .m-einordnung a{color:var(--ink);font-weight:700;text-decoration:none} .m-einordnung a:hover{color:var(--taube-700);text-decoration:underline} /* ---------- Aufmacher ---------- */ .p-bild{aspect-ratio:16/9;border-radius:16px;background:var(--taube);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:28px 30px;font-family:var(--font-head)} .p-bild-rahmen,.p-video-rahmen{margin:0;min-width:0} .p-bild.mit-foto{position:relative;overflow:hidden;isolation:isolate} .p-bild.mit-foto img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-2} .p-bild.mit-foto::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.68) 100%)} .p-bild.mit-foto b,.p-bild.mit-foto span{text-shadow:0 1px 12px rgba(0,0,0,.45)} .p-bildnachweis{margin:8px 0 0;font-family:var(--font-head);font-size:.74rem;line-height:1.45;color:var(--ink-2)} .p-raster .p-bildnachweis a{color:var(--ink-2);text-decoration:underline} .p-video{isolation:isolate} .p-video-bild{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:75% 50%;z-index:-2} .p-video::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.08) 30%,rgba(0,0,0,.62) 100%)} .p-bild b{font-size:clamp(2.2rem,5vw,4rem);font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .p-bild span{font-size:.95rem;margin-top:8px} .p-meta{display:block;margin-top:22px;font-family:var(--font-head);font-weight:700;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--taube-700)} .p-aufmacher h2{font-weight:800;font-size:clamp(1.8rem,2.8vw,2.5rem);line-height:1.06;letter-spacing:-.015em;margin:10px 0 0} .p-aufmacher h2 a{color:var(--ink)} .p-aufmacher h2 a:hover{color:var(--taube-700)} .p-teaser{margin:12px 0 0;max-width:36rem;font-size:1.12rem;line-height:1.5;color:var(--ink-2)} /* ---------- So wird sie aussehen ---------- */ .p-bilder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px} .p-bilder figure{margin:0;display:flex;flex-direction:column;gap:8px} .p-bilder img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px} .p-bilder figcaption{font-family:var(--font-head);font-size:.8rem;color:var(--ink-2)} .p-bauteile{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px} .p-bauteile a{display:inline-flex;align-items:center;min-height:38px;font-family:var(--font-head);font-size:.86rem;font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:40px;padding:0 14px} .p-bauteile a:hover{border-color:var(--taube-300);color:var(--taube-700)} /* ---------- Einsturz ---------- */ .p-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start;margin-top:22px} .p-video{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;background:var(--taube);overflow:hidden;color:#fff} .p-video:hover{color:#fff;background:var(--taube-700)} .p-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.9);background:rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center} .p-play svg{width:22px;height:22px;fill:#fff} .p-video-meta{position:absolute;left:16px;bottom:14px;display:flex;flex-direction:column;gap:1px;font-family:var(--font-head)} .p-video-meta b{font-size:1rem;font-weight:700} .p-video-meta span{font-size:.8rem;font-variant-numeric:tabular-nums} .p-jahre{justify-content:space-between;margin-top:16px;padding:10px 0;border-top:2px solid var(--taube-150);font-family:var(--font-head);font-size:.88rem;font-weight:700;color:var(--taube-700);font-variant-numeric:tabular-nums} /* ---------- Geschichte ---------- */ .p-zeitleiste{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid var(--taube-150);font-family:var(--font-head)} .p-zeitleiste li{position:relative;padding:20px 16px 0 0;display:flex;flex-direction:column;gap:4px} .p-zeitleiste li::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--taube)} .p-zeitleiste li.kommt::before{background:var(--taube)} .p-zeitleiste b{font-size:1.6rem;font-weight:800;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums} .p-zeitleiste span{font-size:.86rem;line-height:1.4;color:var(--ink-2)} /* ---------- Entscheidungsweg ---------- */ .p-stufen{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 16px;font-family:var(--font-head)} .p-stufen li{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:6px} .p-stufen .nr{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--taube);color:var(--taube-700);font-weight:800;font-size:.8rem;display:flex;align-items:center;justify-content:center} .p-stufen b{font-size:.9rem;font-weight:700;line-height:1.3;color:var(--ink)} .p-stufen .wann{font-size:.78rem;color:var(--ink-2)} .p-stufen li.letzte{border-top:2px solid var(--taube);padding-top:13px} .p-stufen li.letzte .nr{background:var(--taube);color:#fff} @media(min-width:1000px) and (max-width:1279px){ .p-stufen{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px} .p-zeitleiste b{font-size:1.3rem} } /* ---------- Themen-Register ---------- */ .p-register{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px;border-top:1px solid var(--line)} .p-register a{display:flex;flex-direction:column;gap:4px;padding:18px 24px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);color:var(--ink)} .p-register a:nth-child(3n+1){padding-left:0} .p-register a:nth-child(3n){border-right:0;padding-right:0} .p-register b{font-family:var(--font-head);font-size:1rem;font-weight:700} .p-register span{font-size:.94rem;line-height:1.5;color:var(--ink-2)} .p-register a:hover b{color:var(--sand-700)} /* ---------- Breite Bildschirme ab 1900 px (27 Zoll): mehr auf einen Blick, Zeilen bleiben lesbar ---------- */ @media(min-width:1900px){ body:has(.p-raster){--wrap:1800px} .p-raster{grid-template-columns:320px minmax(0,1fr) 380px;gap:64px} .p-mitte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px 56px} .p-mitte>*{grid-column:1 / -1} .p-mitte>.p-entscheidung,.p-mitte>.p-themen{grid-column:auto} .p-aufmacher{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:44px;align-items:center} .p-aufmacher .p-meta{margin-top:0} .p-stufen{grid-template-columns:repeat(2,minmax(0,1fr))} .p-register{grid-template-columns:repeat(2,minmax(0,1fr))} .p-register a:nth-child(3n+1){padding-left:24px} .p-register a:nth-child(3n){border-right:1px solid var(--line);padding-right:24px} .p-register a:nth-child(2n+1){padding-left:0} .p-register a:nth-child(2n){border-right:0;padding-right:0} .p-einsturz .p-text{max-width:40rem} } /* ---------- Rechte Spalte: Listen, Termine, Fragen ---------- */ .p-liste{display:flex;flex-direction:column;margin-top:14px;border-top:1px solid var(--line);font-family:var(--font-head)} .p-liste a{padding:14px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px;color:var(--ink)} .p-liste time{font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--taube-700)} .p-liste b{font-size:1rem;font-weight:700;line-height:1.3} .p-liste a:hover b{color:var(--taube-700)} .p-liste.schlicht a{padding:12px 0;font-size:.94rem;font-weight:600} .p-termine{margin-top:14px;border-top:1px solid var(--line);font-family:var(--font-head);font-size:.9rem} .p-termine div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--line)} .p-termine b{font-weight:700;color:var(--taube-700)} .p-termine span{color:var(--ink-2)} .p-fragen-liste{margin-top:14px;border-top:1px solid var(--line);font-family:var(--font-head)} .p-fragen-liste details{border-bottom:1px solid var(--line)} .p-fragen-liste summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:48px;padding:12px 0;font-size:.95rem;font-weight:600;line-height:1.35;color:var(--ink)} .p-fragen-liste summary::-webkit-details-marker{display:none} .p-fragen-liste summary svg{flex:none;margin-left:auto;width:16px;height:16px;transition:transform .2s} .p-fragen-liste details[open] summary svg{transform:rotate(90deg)} .p-fragen-liste summary:focus-visible{outline:2px solid var(--taube);outline-offset:2px} .p-fragen-liste p{margin:0 0 14px;font-family:var(--font-text);font-size:.94rem;line-height:1.55;color:var(--ink-2)} .p-fragen-liste p a{color:var(--taube-700);font-family:var(--font-head);font-weight:700} /* ---------- Video-Fassade (lädt YouTube erst beim Klick) ---------- */ .yt{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;cursor:pointer;isolation:isolate;color:#fff} .yt:focus-visible{outline:3px solid var(--taube);outline-offset:2px} .yt img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .yt:hover img{transform:scale(1.045)} .yt::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.06) 45%,rgba(0,0,0,.6))} .yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:62px;height:62px;border-radius:50%;background:rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s} .yt-play::before{content:"";margin-left:5px;border-left:17px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent} .yt:hover .yt-play,.yt:focus-visible .yt-play{background:var(--taube);border-color:var(--taube)} /* Titel steht schon im Poster – Overlay zeigt nur die Laufzeit */ .yt-meta{position:absolute;right:10px;bottom:10px;z-index:2;color:#fff;font-family:var(--font-head)} .yt-dur{display:block;padding:2px 7px;border-radius:6px;background:rgba(0,0,0,.72);font-size:.76rem;font-weight:600;font-variant-numeric:tabular-nums} .yt.playing img,.yt.playing .yt-play,.yt.playing .yt-meta,.yt.playing::after{opacity:0;pointer-events:none} .yt iframe{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;border:0} .yt-hinweis{margin:8px 0 0;font-family:var(--font-head);font-size:.78rem;color:var(--ink-2)} .yt-hinweis a{color:var(--ink-2);text-decoration:underline} @media(prefers-reduced-motion:reduce){ .yt img{transition:none} .yt:hover img{transform:none} } /* ---------- WhatsApp-Kasten ---------- */ .wa-folgen{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 20px;margin:26px 0 0;max-width:40rem;text-decoration:none;color:var(--ink);line-height:1.45;font-size:.95rem} .wa-folgen svg{width:26px;height:26px;flex:none;fill:#25D366} .wa-folgen span b{font-family:var(--font-head)} .wa-folgen .pf{margin-left:auto;flex:none;padding-left:8px;font-family:var(--font-head);font-weight:700;color:var(--taube-700)} .wa-folgen:hover{border-color:var(--taube-300);color:var(--ink)} .b-black a.wa-folgen,.b-black a.wa-folgen:hover{color:var(--ink)} /* ---------- Footer: Team und Navigation oben, Leiste mit Betreiber unten ---------- */ footer{padding:56px 0 30px} .fuss-oben{display:grid;gap:40px} @media(min-width:1000px){ .fuss-oben{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;align-items:start} } .fuss-team{display:flex;flex-direction:column;align-items:flex-start;gap:18px} .fuss-label{font-family:var(--font-head);font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff} footer .fuss-team .logos{margin:0;gap:18px 28px;opacity:1} footer .fuss-team .logos a{display:inline-flex;opacity:.88;transition:opacity .2s} footer .fuss-team .logos a:hover{opacity:1} footer .fuss-team .logos img{height:28px} .fuss-oben .fuss-spalten{margin-bottom:0} .fuss-unten{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)} footer .fuss-hinweis{margin:0;font-family:var(--font-head);font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.6)} .fuss-zarlo{display:inline-flex;align-items:center;gap:14px;font-family:var(--font-head);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);text-decoration:none} .fuss-zarlo img{height:38px;width:auto;opacity:.9;transition:opacity .2s} .fuss-zarlo:hover{color:#fff} .fuss-zarlo:hover img{opacity:1} .fuss-zarlo:focus-visible,footer .fuss-team .logos a:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px} /* ---------- Schlussband: Ausblick links, Vorstellungsfilm groß rechts ---------- */ .p-schluss-raster{display:grid;gap:36px;align-items:center} @media(min-width:1000px){ .p-schluss-raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px} } .p-schluss h2{color:#fff} .p-schluss .lead,.p-schluss .wa-folgen{max-width:34rem} .p-schluss-film{margin:0} #film{scroll-margin-top:60px} .p-filme{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px} .p-filme .yt{border-radius:10px} .p-filme .yt-play{width:40px;height:40px} .p-filme .yt-play::before{border-left-width:12px;border-top-width:7px;border-bottom-width:7px;margin-left:4px} .p-filme-titel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:8px 0 0;font-family:var(--font-head);font-size:.8rem;font-weight:600;color:rgba(255,255,255,.75)} @media(max-width:520px){ .p-filme,.p-filme-titel{gap:8px} .p-filme-titel{font-size:.72rem} } .p-schluss-film .yt{border-radius:16px} .p-schluss .yt-hinweis{margin-top:12px;color:rgba(255,255,255,.62)} .p-schluss .yt-hinweis b{color:#fff;font-weight:600} .p-schluss .yt-hinweis a{color:rgba(255,255,255,.62)} /* ---------- Footer mit vier Spalten ---------- */ .fuss-spalten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin-bottom:44px;font-family:var(--font-head)} .fuss-spalten div{display:flex;flex-direction:column;gap:10px} .fuss-spalten b{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff} .fuss-spalten a{color:rgba(255,255,255,.8);font-size:.94rem;text-decoration:none} .fuss-spalten a:hover{color:#fff;text-decoration:underline} footer .fuss-marke{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px} footer .fuss-marke .logos{margin-bottom:0} @media(max-width:759px){ .fuss-spalten{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px} } /* ---------- Unterseiten: eine ruhige Lesespalte ---------- Themenseiten, Rechtsseiten und Meldungen standen bis September 2026 im Dreispalten-Raster der Startseite. Die mitlaufenden Kästen wiederholten dort deren Inhalte und standen dem Lesen im Weg. Geblieben ist eine mittige Spalte von 46rem; der Fließtext darin bleibt bei --measure (36rem, rund 70 Zeichen). Die Startseite behält ihren Dreispalter (.p-raster) unverändert. */ .m-lese{padding-top:56px;padding-bottom:92px} .m-lese .m-text{max-width:46rem;margin:0 auto} /* Die Einordnung steht als kleiner Hinweis am Ende des Textes, nicht mehr als Kasten daneben. Auf den Meldungen bleibt sie Randnotiz und steht unten in der rechten Spalte; dort hält sie unterhalb des Rasters, wo die Spalte die volle Breite hat, ebenfalls die Lesezeile. */ .m-lese .m-text>.m-einordnung,.m-lese.t-meldung .m-rechts>.m-einordnung{max-width:var(--measure)} .m-text{min-width:0;display:flex;flex-direction:column;gap:44px} .m-rechts{display:flex;flex-direction:column;gap:40px;min-width:0} .m-einordnung{margin:0;padding:15px 18px;border-left:3px solid var(--taube-150);background:var(--grund-2);border-radius:0 12px 12px 0;font-size:.9rem;line-height:1.55;color:var(--ink-2)} .m-einordnung b{display:block;margin-bottom:4px;font-family:var(--font-head);color:var(--ink)} .m-text .m-block > h2.mid:first-child{margin-top:0} .m-dunkel{background:var(--schwarz);color:#fff;border-radius:16px;padding:28px} .m-dunkel h2,.m-dunkel h3,.m-dunkel p,.m-dunkel li{color:#fff} .m-dunkel a{color:#fff} .m-dunkel .kick{color:var(--sandstein)} @media(max-width:999px){ .m-lese{padding-top:40px;padding-bottom:64px} } /* Unterhalb des Rasters steht alles untereinander. Dann muss auch das, was unter dem Artikel folgt, auf dessen Kante stehen – sonst beginnt „Weitere Meldungen" weiter links und läuft breiter als der Text darüber. Gilt nur für die Meldungen: die Themenseiten haben keine Seitenspalte mehr. */ @media(max-width:999px){ .m-lese.t-meldung .m-rechts{max-width:46rem;margin:0 auto} main:has(.m-lese.t-meldung)>.band>.wrap.prose{max-width:46rem} } /* Meldungen: neben der Lesespalte läuft „Weitere Meldungen" mit, sobald Platz ist. */ @media(min-width:1000px){ .m-lese.t-meldung{display:grid;gap:40px;align-items:start;grid-template-columns:minmax(0,1fr) 300px} .m-lese.t-meldung .m-text{margin:0} } @media(min-width:1280px){ .m-lese.t-meldung{gap:56px;grid-template-columns:minmax(0,1fr) 320px} } /* Lesezeile der Meldungen wie auf den Themenseiten; die Spalte selbst darf breiter sein, damit Tabellen, Bilder und Kacheln Platz haben. */ .t-meldung .m-text .m-block>p,.t-meldung .m-text .m-block>ul,.t-meldung .m-text .lead{max-width:var(--measure)} /* ---------- Themenseiten (Vorlage B) in der Lesespalte ---------- Alles hängt an .t-thema, .m-kopf oder neuen Klassen, damit Startseite und Meldungen unverändert bleiben. */ .m-kopf .p-meta{margin-top:0;margin-bottom:var(--r2)} .t-thema .m-text .p-bauteile a,.t-thema .m-text a.p-link,.p-schluss a.p-link{text-decoration:none} /* Zwei Verweise am Blockende (vergleich) stünden sonst in einer Textzeile: .p-link ist inline-block, und das trennende „·“ der alten Quellenzeile entfällt beim Umbau. Im Schlussband übernimmt das die Flex-Reihe .p-schluss-links, in der Mittelspalte diese Regel. */ .t-thema .m-text .m-block>.p-link+.p-link{display:block;width:fit-content} .m-kopf .p-bauteile{margin-top:22px} .m-kasten{border:1px solid var(--line);border-radius:16px;padding:24px 28px;background:var(--grund-2)} .t-thema .m-text .m-block>p,.t-thema .m-text .m-block>ul.ticks,.t-thema .m-text .lead{max-width:var(--measure)} .t-thema .m-block>p:last-child{margin-bottom:0} .t-thema .m-block>.p-h2{margin-bottom:14px} .t-thema .m-block>.p-h2:first-child{margin-top:0} /* Trägt ein Block mehrere Abschnitte (faktencheck: sechs Fragen in einem Band), stünde die nächste h2 nur 17 px unter dem letzten Absatz – so weit wie zwei Absätze auseinander. Der Abstand folgt deshalb dem Raster der Blöcke (gap 44 px). Die h2 hinter dem eigenen Kicker ist davon ausgenommen, sie behält ihren kleinen Abstand. */ .t-thema .m-text .m-block>:not(.p-kick)+.p-h2{margin-top:44px} .p-h3{font-family:var(--font-head);font-weight:700;font-size:1.15rem;line-height:var(--lh-head);margin:0 0 .4em;color:var(--ink)} .p-bilder.eins{grid-template-columns:minmax(0,1fr)} .p-bilder.eins img{aspect-ratio:16/9} .p-bilder.zwei{grid-template-columns:repeat(2,minmax(0,1fr))} .p-bilder.hoch img{aspect-ratio:3/4} .p-bilder.plan img{aspect-ratio:auto;object-fit:contain;background:#fff;border:1px solid var(--line);padding:14px} /* Einzelne Zeichnung in einer Bildreihe aus Plan und Foto (anbindung). */ .p-bilder figure.plan img{aspect-ratio:auto;object-fit:contain;background:#fff;border:1px solid var(--line);padding:14px} /* Hochformat-Rendering: volle Spaltenbreite wäre über einen Bildschirm hoch. */ .t-thema .p-bilder.eins.hoch{grid-template-columns:minmax(0,26rem)} .m-block>.p-bilder:first-child,.p-zwei>.p-bilder{margin-top:0} /* Gruppen ohne Link (aus .cards): .p-register mit div statt a. Zweispaltig, weil die Mitte zwischen 1280 und 1439 px nur rund 536 px breit ist. */ .t-thema .m-text .p-register{grid-template-columns:repeat(2,minmax(0,1fr))} .t-thema .m-text .p-register>div{display:flex;flex-direction:column;gap:4px;padding:18px 24px; border-bottom:1px solid var(--line);border-right:1px solid var(--line);color:var(--ink)} .t-thema .m-text .p-register>div:nth-child(2n+1){padding-left:0} .t-thema .m-text .p-register>div:nth-child(2n), .t-thema .m-text .p-register>div:last-child:nth-child(2n+1){border-right:0;padding-right:0} .t-thema .m-text .p-register>div.us{border-top:2px solid var(--taube);padding-top:16px} .t-thema .m-text .p-register .p-kick{margin-bottom:2px} .p-bauteile a[aria-current]{border-color:var(--taube);color:var(--taube-700)} .t-thema .m-einordnung p{margin:0} .t-thema .m-einordnung p b{display:inline;margin:0;font-family:inherit} .t-thema .m-text .p-termine div{grid-template-columns:150px minmax(0,1fr)} .p-schluss-links{display:flex;flex-wrap:wrap;gap:0 24px} .p-schluss .p-link{color:var(--sandstein)} .p-schluss .p-link:hover{color:#fff} @media(max-width:999px){ .p-bilder.eins figure,.p-bilder.plan figure{flex-basis:100%} } /* Bilder dürfen aus der Lesespalte heraustreten, sobald daneben Platz ist: mittig, höchstens 64rem und nie über den Rand des .wrap hinaus. Hochformate bleiben schmal, ihre Spalte ist nur 26rem breit und stünde sonst am linken Rand eines leeren Kastens. */ @media(min-width:1200px){ .m-lese.t-thema .m-text .m-block>.p-bilder:not(.hoch){ width:min(64rem,calc(var(--wrap) - 2 * clamp(20px,4vw,32px))); max-width:none;margin-left:50%;transform:translateX(-50%)} } @media(max-width:599px){ .t-thema .m-text .p-termine div{grid-template-columns:minmax(0,1fr);gap:2px} .t-thema .m-text .p-register{grid-template-columns:minmax(0,1fr)} .t-thema .m-text .p-register>div{padding:16px 0;border-right:0} } /* ---------- Übersichten (Vorlage C): /die-bruecke/ und /nachrichten/ ---------- Sie stehen im Raster der Themenseiten (.t-thema) und ergänzen es nur dort, wo Register und Listen aus Links statt aus div bestehen. */ .t-uebersicht .m-text .p-register a,.t-uebersicht .m-text .p-liste a, .t-uebersicht .m-text .p-aufmacher a{text-decoration:none} .t-uebersicht .m-text .p-register>a:nth-child(3n+1){padding-left:24px} .t-uebersicht .m-text .p-register>a:nth-child(3n){border-right:1px solid var(--line);padding-right:24px} .t-uebersicht .m-text .p-register>a:nth-child(2n+1){padding-left:0} .t-uebersicht .m-text .p-register>a:nth-child(2n), .t-uebersicht .m-text .p-register>a:last-child:nth-child(2n+1){border-right:0;padding-right:0} /* Der Schaltflächentext der alten Kacheln bleibt wortgleich als letzte Zeile. */ .t-uebersicht .p-register a>span.mehr,.t-uebersicht .p-liste a>span.mehr{ margin-top:6px;font-size:.86rem;font-weight:700;color:var(--taube)} .t-uebersicht a:hover>span.mehr{text-decoration:underline} /* Meldungsliste in der Mittelspalte: Aufmacher, darunter Hairline-Zeilen mit Teaser. */ .t-uebersicht .m-text .p-aufmacher .p-meta{margin-top:0} .t-uebersicht .m-text .p-liste{margin-top:22px} .t-uebersicht .m-text .p-liste a{padding:18px 0} .t-uebersicht .m-text .p-liste b{font-size:1.15rem} .t-uebersicht .m-text .p-liste .p-teaser{margin:2px 0 0;max-width:var(--measure);font-size:.98rem;line-height:1.5} .t-uebersicht .m-text .updated{margin-top:18px} /* „Zum Nachschlagen“ stand rechts und steht jetzt als letzter Block im Text: Titel plus ein Satz. */ .t-uebersicht .m-nachschlagen .p-liste a>span:not(.mehr){max-width:var(--measure);font-size:.88rem;line-height:1.45;color:var(--ink-2)} @media(max-width:599px){ /* :nth-child(n) trifft jeden Eintrag und hebt die Spaltenregeln oben auf, die sonst dieselbe Gewichtung hätten (eine Spalte: keine Einrückung). */ .t-uebersicht .m-text .p-register>a:nth-child(n){padding:16px 0;border-right:0} } /* ---------- Dossiers (Vorlage B, Variante „dossier"): /geschichte/, /aktueller-stand/, /die-entscheidung/, /buergervotum/. Alles hängt an .t-dossier oder an neuen Klassen, damit die schon umgebauten Seiten unverändert bleiben. */ .t-dossier .m-text [id]{scroll-margin-top:84px} .t-dossier .m-text .p-fragen-liste{margin-top:18px} /* Häkchenliste und folgender Absatz klebten aneinander (ul ohne unteren, p ohne oberen Rand). */ .t-dossier .m-text .m-block>ul.ticks+p{margin-top:18px} /* Zwischenüberschrift im Block: Abstand kam bisher aus einem style-Attribut. */ .t-dossier .m-text .m-block>*+.p-h3{margin-top:34px} .t-dossier .m-text .m-block>.cap+p{margin-top:16px} .t-dossier .m-text .p-fragen-liste p{max-width:var(--measure)} .t-dossier .p-bildnachweis a{color:var(--ink-2);text-decoration:underline} /* Eckdaten und Kennzahlen: dieselben Kacheln wie im Stand-Kasten der Startseite, aber linksbündig in der Lesespalte und mit Platz für den erklärenden Satz. Sie gelten nur im Textblock, damit die Kacheln der Startseite unberührt bleiben. */ .t-dossier .m-text .m-block .p-kacheln{margin-top:18px;border-top:1px solid var(--line)} .t-dossier .m-text .m-block .p-kacheln div{padding:14px 18px 16px 0} .t-dossier .m-text .m-block .p-kacheln div:nth-child(even){padding-left:18px} .t-dossier .m-text .m-block .p-kacheln b{font-size:1.1rem;line-height:1.3} .t-dossier .m-text .m-block .p-kacheln .satz{margin-top:6px;font-family:var(--font-text);font-size:.92rem; line-height:1.5;color:var(--ink-2)} .t-dossier .m-text .m-block .p-kacheln div:last-child:nth-child(odd){grid-column:1 / -1;border-right:0} /* Zeitleiste mit ganzen Sätzen: eine Spalte mit Hairline je Stufe statt der fünfspaltigen Jahresleiste der Startseite. */ .t-dossier .m-text .p-zeitleiste{display:block;margin-top:18px;border-top:0} .t-dossier .m-text .p-zeitleiste li{padding:16px 0 16px 26px;border-top:1px solid var(--line);gap:3px} .t-dossier .m-text .p-zeitleiste li:first-child{border-top:2px solid var(--taube-150)} .t-dossier .m-text .p-zeitleiste li::before{top:20px;left:0} .t-dossier .m-text .p-zeitleiste b{font-size:.92rem;font-weight:700;color:var(--taube-700)} .t-dossier .m-text .p-zeitleiste .was{font-family:var(--font-head);font-weight:700;font-size:1.05rem; color:var(--ink)} .t-dossier .m-text .p-zeitleiste span:not(.was){font-family:var(--font-text);font-size:.95rem; line-height:1.55;max-width:var(--measure)} /* Verfahrensschritte mit ganzen Sätzen: zwei Spalten, Satz in der Lesetype. */ .t-dossier .m-text .p-stufen{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px} .t-dossier .m-text .p-stufen .satz{font-family:var(--font-text);font-size:.98rem;line-height:1.55; color:var(--ink)} /* Termine mit Erläuterung; der Rückblick steht aufklappbar darunter. */ .t-dossier .m-text .p-termine span{font-family:var(--font-text);font-size:.94rem;line-height:1.55} .t-dossier .m-text .p-termine span b{display:block;font-family:var(--font-head);font-weight:700; color:var(--ink)} .t-dossier .m-text details .p-termine{margin:4px 0 16px;border-top:0} /* Register aus Verweiskarten: wie in den Übersichten, nur zweispaltig. */ .t-dossier .m-text .p-register a{text-decoration:none} .t-dossier .m-text .p-register>a:nth-child(3n+1){padding-left:24px} .t-dossier .m-text .p-register>a:nth-child(3n){border-right:1px solid var(--line);padding-right:24px} .t-dossier .m-text .p-register>a:nth-child(2n+1){padding-left:0} .t-dossier .m-text .p-register>a:nth-child(2n), .t-dossier .m-text .p-register>a:last-child:nth-child(2n+1){border-right:0;padding-right:0} .t-dossier .m-text .p-register a>span.mehr{margin-top:6px;font-family:var(--font-head);font-size:.86rem; font-weight:700;color:var(--taube)} .t-dossier .m-text .p-register a:hover>span.mehr{text-decoration:underline} @media(max-width:599px){ .t-dossier .m-text .p-register>a:nth-child(n){padding:16px 0;border-right:0} /* Auch hier nur die Kacheln im Textblock, nicht die im Stand-Kasten. */ .t-dossier .m-text .m-block .p-kacheln{grid-template-columns:minmax(0,1fr)} .t-dossier .m-text .m-block .p-kacheln div:nth-child(n){padding:14px 0 16px;border-right:0;border-top:1px solid var(--line)} .t-dossier .m-text .m-block .p-kacheln div:first-child{border-top:0} .t-dossier .m-text .p-stufen{grid-template-columns:minmax(0,1fr)} } /* ---------- Sachseiten (Vorlage B, Variante „sache"): /vergleich/, /faktencheck/, /planungsteam/. Eigene Klasse .t-sache, damit Dossiers und Bauteil-Seiten unverändert bleiben; die Regeln entsprechen denen der Dossiers. */ .t-sache .m-text [id]{scroll-margin-top:84px} .t-sache .m-text .p-fragen-liste{margin-top:18px} .t-sache .m-text .p-fragen-liste p{max-width:var(--measure)} /* Der Fragenblock trägt nur einen Kicker: Die Überschriften sind die Fragen. */ .t-sache .m-text .m-block>.p-kick+.p-fragen-liste{margin-top:14px} /* Eckdaten und Kennzahlen wie im Dossier: linksbündig in der Lesespalte, mit Platz für den erklärenden Satz, und nur im Textblock. */ .t-sache .m-text .m-block .p-kacheln{margin-top:18px;border-top:1px solid var(--line)} .t-sache .m-text .m-block .p-kacheln div{padding:14px 18px 16px 0} .t-sache .m-text .m-block .p-kacheln div:nth-child(even){padding-left:18px} .t-sache .m-text .m-block .p-kacheln b{font-size:1.1rem;line-height:1.3} .t-sache .m-text .m-block .p-kacheln .satz{margin-top:6px;font-family:var(--font-text);font-size:.92rem; line-height:1.5;color:var(--ink-2)} .t-sache .m-text .m-block .p-kacheln div:last-child:nth-child(odd){grid-column:1 / -1;border-right:0} /* Marke aus dem alten .badge: das beauftragte Team im Register (vergleich). Die 2-px-Linie darüber kommt aus .p-register>div.us. */ .t-sache .m-text .p-register .p-marke{align-self:flex-start;margin-bottom:6px;padding:2px 10px; border:1px solid var(--taube-300);border-radius:40px;font-family:var(--font-head);font-size:.7rem; font-weight:700;letter-spacing:.04em;color:var(--taube-700)} /* Vergleichstabelle: Zahlenspalten untereinander, Nebenangaben zurückgenommen (bisher ein Inline-Stil je Zelle). */ .t-sache .m-text .tbl td{font-variant-numeric:tabular-nums} .t-sache .m-text .tbl td>span{font-size:.92em;color:var(--ink-2)} @media(max-width:599px){ .t-sache .m-text .m-block .p-kacheln{grid-template-columns:minmax(0,1fr)} .t-sache .m-text .m-block .p-kacheln div:nth-child(n){padding:14px 0 16px;border-right:0;border-top:1px solid var(--line)} .t-sache .m-text .m-block .p-kacheln div:first-child{border-top:0} } /* ---------- Rechtliches (Vorlage D): /impressum.html, /datenschutz.html ---------- Dieselbe Lesespalte wie die übrigen Unterseiten, nur ohne Schlussband. Die Sprungmarken an den Überschriften bleiben die Ziele der Verweise (#youtube). Alles hängt an .t-recht, damit die übrigen Seiten unverändert bleiben. */ .t-recht .m-text [id]{scroll-margin-top:84px} /* Bisher klebten Überschrift und Text aneinander: h1–h4 haben margin:0. Der Abstand kommt jetzt aus dem gap der Blöcke (44 px). */ .t-recht .m-text .m-block>p,.t-recht .m-text .lead{max-width:var(--measure)} .t-recht .m-block>.p-h2{margin-bottom:14px} .t-recht .m-block>.p-h2:first-child{margin-top:0} .t-recht .m-block>p:last-child{margin-bottom:0} /* Der Kontakt stand als
-Absatz und ließ sich nicht überfliegen: Bezeichner links, Angabe rechts, eine Hairline je Zeile. Nur dort, weil „Telefon:", „E-Mail:" und „Web:" schon im Text stehen – bei Anschrift und USt-Nummer bliebe der Absatz sonst nicht wortgleich. */ .t-recht .m-text .p-termine div{grid-template-columns:150px minmax(0,1fr)} .t-recht .m-text .p-termine span{font-family:var(--font-text);font-size:.94rem; line-height:1.55;color:var(--ink)} /* Die Verfasser des Entwurfs: Hairline-Liste, deren Einträge keinen eigenen Verweis haben (div statt a wie sonst in .p-liste). Das Büro steht fett im Satz, nicht darüber – so bleibt die Zeile wortgleich, auch die Anschrift hinter dem Namen. */ .t-recht .m-text .p-liste>div{padding:14px 0;border-bottom:1px solid var(--line); font-size:.95rem;line-height:1.5;color:var(--ink)} /* .p-liste a ist sonst die ganze Zeile (Flex-Spalte mit eigener Hairline); hier steht der Verweis mitten im Satz und muss wieder inline werden. */ .t-recht .m-text .p-liste>div a{display:inline;padding:0;border-bottom:0; color:var(--ink);font-weight:700;text-decoration:underline} .t-recht .m-text .p-liste>div a:hover{color:var(--taube-700)} /* stand im Browser-Standard, obwohl --font-mono definiert ist (Punkt 3 der Datenschutzerklärung nennt gekürzte IP-Adressen). */ .t-recht code{font-family:var(--font-mono);font-size:.9em;background:var(--grund-2); border-radius:6px;padding:1px 5px} @media(max-width:599px){ .t-recht .m-text .p-termine div{grid-template-columns:minmax(0,1fr);gap:2px} } /* ---------- Balken (Anteile und Sitze) ---------- Ersetzt den eigenen