/* Lokal gehostete Schriften (ehemals Google Fonts) */
/* Source Sans 3 – latin */
@font-face{
font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;
src:url(/assets/fonts/source-sans-3-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;
src:url(/assets/fonts/source-sans-3-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;
src:url(/assets/fonts/source-sans-3-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Source Sans 3 – latin-ext */
@font-face{
font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;
src:url(/assets/fonts/source-sans-3-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;
src:url(/assets/fonts/source-sans-3-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;
src:url(assets/fonts/source-sans-3-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Varela Round – latin */
@font-face{
font-family:'Varela Round';font-style:normal;font-weight:400;font-display:swap;
src:url(/assets/fonts/varela-round-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Varela Round – latin-ext */
@font-face{
font-family:'Varela Round';font-style:normal;font-weight:400;font-display:swap;
src:url(/assets/fonts/varela-round-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* ---- Farben: helles Standard-Thema ----
Alle Farben stehen als Variablen hier oben. Der Dunkelmodus weiter unten
überschreibt nur diese Werte – die Regeln darunter bleiben unverändert. */
:root{
color-scheme:light dark;
/* Akzentfarben für Text, Rahmen und Linien */
--blau:#2e5c96; --gruen:#597364; --gelb:#f7c23a;
--blau-tief:#1f3a5f; /* dunklere Variante für Hover */
--blau-weich:#eef3fa; /* zarte blaue Tönung als Fläche */
/* Farbige Flächen und der Text darauf */
--blau-fuell:#2e5c96; --blau-fuell-hover:#1f3a5f; --auf-blau:#ffffff;
--gruen-fuell:#607b6b; --auf-gruen:#ffffff;
--gelb-fuell:#f7c23a; --auf-gelb:#1f3a5f;
/* Flächen und Text */
--bg:#f8f7f4; --weiss:#ffffff; --sand:#f1efe9;
--dunkel:#1f3a5f; --text:#55606b; --text-leise:#5c6660;
--linie:#e3e0d9; --linie-fein:#eeece6;
/* Formularfelder. --feld-rand umrandet auch Buttons: mindestens 3:1
gegen die Fläche dahinter (WCAG 1.4.11), sonst ist das Feld nicht
als Bedienelement erkennbar. --linie bleibt rein dekorativ. */
--feld-bg:#ffffff; --feld-rand:#8b8882; --feld-rahmen:#e8e5dd;
/* Fokusring: zwei Ringe, damit er auf hellen Flächen UND auf farbigen
Buttons sichtbar bleibt. --fokus liegt aussen, --fokus-kontrast in
der Lücke direkt am Element. */
--fokus:#1f3a5f; --fokus-kontrast:#ffffff;
/* Hinweisboxen */
--warn-bg:#fdf6e3; --warn-rand:#f0e3bd; --erfolg-bg:#eef4f0;
/* Grosse Bildansicht (Lightbox). Diese Werte stehen bewusst NUR hier und
werden im Dunkelmodus nicht ueberschrieben: Die Ansicht ist in beiden
Themen dunkel - ein Foto steht vor abgedunkeltem Hintergrund am besten,
und im Nachtmodus wuerde eine helle Flaeche blenden. */
--lupe-hinter:rgba(14,18,23,.93); --lupe-flaeche:#1b2228;
--lupe-text:#eef2f6; --lupe-leise:#aeb9c3; --lupe-rand:#8a97a2;
--lupe-knopf-hover:#2c353d;
/* Kleines Schild in der Bildecke, das zeigt: Bild laesst sich vergroessern.
Helle Platte mit dunklem Symbol - sie liegt auf einem beliebigen Foto und
kann deshalb nicht mit den Themenfarben arbeiten. */
--lupe-marke:rgba(255,255,255,.92);
/* Bild-Platzhalter */
--platz-a:#eef1ee; --platz-b:#e4e9e5; --platz-rand:#dfe3df; --platz-text:#606a64;
--platz-sand-a:#f3f0e6; --platz-sand-b:#ebe6d8; --platz-sand-rand:#e3ddcb; --platz-sand-text:#6e6656;
/* Kopf- und Fußbereich */
--leiste-leise:#d7e2f2;
--fuss-bg:#dde4dd; --fuss-linie:#c8d1c8;
--breite:1120px;
/* Symbole für Telefon- und E-Mail-Links. Die SVG stecken als Data-URI
direkt hier – keine Bilddateien, keine zusätzliche Anfrage, keine
Icon-Schrift. Sie werden als Maske benutzt (siehe .symbol), die Farbe
kommt also aus dem Text und stimmt in beiden Themen automatisch. */
--sym-tel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.2 3.5H5.4A1.9 1.9 0 0 0 3.5 5.4c0 8.4 6.7 15.1 15.1 15.1a1.9 1.9 0 0 0 1.9-1.9v-2.6l-4.2-1.4-1.6 2a15.6 15.6 0 0 1-6.3-6.3l2-1.6z'/%3E%3C/svg%3E");
--sym-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='4.8' width='18.8' height='14.4' rx='2.2'/%3E%3Cpath d='m3.4 7.4 8.6 5.4 8.6-5.4'/%3E%3C/svg%3E");
/* Lupe fuer das Schild in der Bildecke. Anders als die beiden Symbole
darueber wird sie NICHT als Maske benutzt, sondern als Bild auf heller
Platte - die Strichfarbe steht deshalb fest im SVG. */
--sym-lupe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3a5f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.2 15.2 20.5 20.5M8 10.5h5M10.5 8v5'/%3E%3C/svg%3E");
}
/* ---- Dunkelmodus: folgt der Systemeinstellung ----
Nur für "screen": beim Ausdruck gelten immer die hellen Werte von oben,
sonst käme helle Schrift auf weißem Papier heraus. */
@media screen and (prefers-color-scheme:dark){
:root{
--blau:#8ab4e8; --gruen:#8fc3a4; --gelb:#efc350;
--blau-tief:#b6d2f2;
--blau-weich:#1c2a3a;
--blau-fuell:#3a6aa6; --blau-fuell-hover:#4575b0; --auf-blau:#ffffff;
--gruen-fuell:#4d7a63; --auf-gruen:#ffffff;
--gelb-fuell:#e2b544; --auf-gelb:#151a1f;
--bg:#121619; --weiss:#1a2026; --sand:#232b32;
--dunkel:#e9eef3; --text:#b6c1cb; --text-leise:#8d99a4;
--linie:#2c343c; --linie-fein:#242c33;
--feld-bg:#141a1f; --feld-rand:#6c757c; --feld-rahmen:#2c343c;
--fokus:#efc350; --fokus-kontrast:#121619;
--warn-bg:#2a2416; --warn-rand:#4a4126; --erfolg-bg:#18241d;
--platz-a:#1e262c; --platz-b:#242d34; --platz-rand:#2c353c; --platz-text:#8d99a4;
--platz-sand-a:#242219; --platz-sand-b:#2b2820; --platz-sand-rand:#332f24; --platz-sand-text:#a1937a;
--leiste-leise:#eaf1fb;
--fuss-bg:#161c21; --fuss-linie:#2c343c;
}
}
*{box-sizing:border-box}
/* scroll-padding-top haelt Sprungziele (#inhalt, alle Anker) unter dem
klebenden Kopf frei. Ohne das landet die Sprungmarke hinter dem Kopf
und der Nutzer sieht die Ueberschrift nicht, zu der er gesprungen ist. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:200px}
body{margin:0;background:var(--bg);color:var(--dunkel);
font-family:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;font-size:17px;line-height:1.6}
h1,h2,h3,legend{font-family:"Varela Round","Source Sans 3",Helvetica,Arial,sans-serif;font-weight:400;color:var(--dunkel);line-height:1.25}
h1{font-size:clamp(28px,3.6vw,40px);margin:0 0 20px}
h2{font-size:24px;margin:0 0 12px}
h3{font-size:20px;margin:0 0 8px}
p{margin:0 0 16px;text-wrap:pretty}
a{color:var(--blau)}
a:hover{color:var(--blau-tief)}
:focus-visible{outline:3px solid var(--fokus);outline-offset:2px;box-shadow:0 0 0 2px var(--fokus-kontrast)}
/* height:auto gehoert zwingend zu max-width:100%. Ohne die Zeile bleibt bei
einem die Hoehe auf 900 px stehen, waehrend
die Breite mitschrumpft - das Foto wird in die Laenge gezogen. Mit
height:auto greift stattdessen das Seitenverhaeltnis aus width/height, und
der Platz ist schon vor dem Laden reserviert (kein Layout-Sprung).
.logo img und .fuss img setzen ihre feste Hoehe spaeter selbst. */
img{max-width:100%;height:auto}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--blau-fuell);color:var(--auf-blau);padding:12px 18px;z-index:100}
.skip:focus{left:0}
/* ---- Kopf ---- */
.kopf{position:sticky;top:0;z-index:50;background:var(--weiss);border-bottom:1px solid var(--linie)}
/* Bei niedrigem Fenster (starke Vergroesserung, Querformat am Handy) wuerde
der klebende Kopf fast den ganzen Bildschirm einnehmen - bei 400 % Zoom
blieben nur rund 19 px fuer den Inhalt. Dort scrollt der Kopf einfach mit
(WCAG 1.4.10 Reflow). scroll-padding-top wird dann nicht mehr gebraucht. */
@media (max-height:600px){
.kopf{position:static}
html{scroll-padding-top:0}
}
.kontaktleiste{background:var(--blau-fuell);color:var(--auf-blau)}
.kontaktleiste .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;padding-top:8px;padding-bottom:8px}
/* Die E-Mail-Adresse steht bis zum Eingreifen des Skripts in einem
(siehe script.js) und muss deshalb genauso aussehen wie die Links.
Bewusst kein display:flex: Der Ersatztext enthaelt ein eigenes
um das "(at)", das sonst als eigenes Flex-Element auseinandergerissen
wuerde. Das Symbol richtet sich ueber vertical-align aus. */
.kontaktleiste a,.kontaktleiste .mail{color:var(--auf-blau);text-decoration:none;font-weight:600}
.kontaktleiste a:hover{text-decoration:underline}
.punkt{width:8px;height:8px;border-radius:50%;display:inline-block}
.punkt-gelb{background:var(--gelb)} .punkt-gruen{background:var(--gruen)} .punkt-blau{background:var(--blau)}
.kontaktleiste .hinweis{margin-left:auto;font-size:15px;color:var(--leiste-leise)}
/* ---- Symbole vor Telefon- und E-Mail-Links ----
Die SVG (Variablen ganz oben) dienen als Maske, gefaerbt wird mit
background: so hat das Symbol immer die Farbe des Textes daneben - auch
im Dunkelmodus und auf der blauen Kontaktleiste. Rein schmueckend:
Was der Link tut, steht als Text daneben, deshalb kein alt/aria noetig.
Die @supports-Klammer ist wichtig: kann ein Browser keine Masken, gaebe
es sonst ein farbiges Kaestchen statt eines Symbols. */
@supports ((-webkit-mask-image:none) or (mask-image:none)){
.symbol::before{content:"";display:inline-block;width:1.05em;height:1.05em;
margin-right:7px;vertical-align:-0.16em;background:currentColor;
-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.symbol-tel::before{-webkit-mask-image:var(--sym-tel);mask-image:var(--sym-tel)}
.symbol-mail::before{-webkit-mask-image:var(--sym-mail);mask-image:var(--sym-mail)}
/* Die zweite Rufnummer eines Eintrags auf notfall.html traegt kein eigenes
Symbol, soll aber buendig unter der ersten stehen. Der Einzug ist die
Breite des Symbols darueber: 1.05em der 21px aus .nummernliste .nr,
plus dessen margin-right von 7px. Aendert sich einer der beiden Werte,
muss dieser mitwandern. In der @supports-Klammer, weil es ohne Masken
kein Symbol und damit auch nichts einzuruecken gibt. */
.nummernliste .nr-weiter{margin-left:29px}
}
.kopfzeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding-top:14px;padding-bottom:14px}
.logo img{height:52px;width:auto;display:block}
.navtoggle{display:none;font:inherit;font-size:17px;font-weight:600;color:var(--dunkel);background:var(--sand);border:1px solid var(--feld-rand);padding:10px 16px;cursor:pointer}
.hauptnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 6px}
.hauptnav a{display:block;padding:10px 12px;color:var(--dunkel);text-decoration:none;font-size:17px;border-bottom:3px solid transparent}
.hauptnav a:hover{background:var(--sand);color:var(--blau)}
.hauptnav a[aria-current="page"]{border-bottom-color:var(--gelb);font-weight:600}
.hauptnav .cta a{background:var(--blau-fuell);color:var(--auf-blau);font-weight:600;padding:10px 16px;border-bottom:0}
.hauptnav .cta a:hover{background:var(--blau-fuell-hover);color:var(--auf-blau)}
/* ---- Untermenues ----
Der Aufklapp-Knopf haengt wie der Menue-Button an der Klasse .js: ohne
JavaScript bliebe er wirkungslos. Stattdessen stehen die Untereintraege
dann einfach mit in der Zeile - genau die flache Navigation wie vorher. */
.hauptnav li{position:relative}
.unterknopf{display:none;font:inherit;font-size:17px;color:var(--dunkel);background:none;
border:0;border-bottom:3px solid transparent;padding:10px 12px;cursor:pointer;align-items:center;gap:8px}
.js .unterknopf{display:flex}
.unterknopf:hover{background:var(--sand);color:var(--blau)}
/* Dreieck aus Rahmen - kein Bild, keine Schriftzeichen noetig. */
.pfeil{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
border-top:6px solid currentColor}
.hat-unter.offen .pfeil{transform:rotate(180deg)}
/* Liegt die aktuelle Seite in der Gruppe, markiert das Skript den Knopf. */
.unterknopf.aktiv{border-bottom-color:var(--gelb);font-weight:600}
.js .unternav{display:none;position:absolute;top:100%;left:0;z-index:60;min-width:240px;
flex-direction:column;gap:0;padding:6px 0;background:var(--weiss);
border:1px solid var(--linie);box-shadow:0 8px 20px rgba(0,0,0,.14)}
.js .hat-unter.offen>.unternav{display:flex}
.js .unternav a{padding:10px 16px;border-bottom:0;border-left:3px solid transparent;white-space:nowrap}
.js .unternav a[aria-current="page"]{border-left-color:var(--gelb);background:var(--sand);font-weight:600}
/* ---- Inhalte ---- */
main{display:block}
/* Nur vertikal setzen - der seitliche Abstand kommt von .wrap und darf hier
nicht durch die Kurzschreibweise ueberschrieben werden. */
.seite{padding-top:48px;padding-bottom:64px}
.lead{font-size:19px;line-height:1.7;color:var(--text);max-width:62ch}
.text{color:var(--text)}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:24px}
.raster-schmal{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.karte{background:var(--weiss);border:1px solid var(--linie);padding:26px}
.karte p:last-child{margin-bottom:0}
.karte-blau{border-top:5px solid var(--blau)}
.karte-gruen{border-top:5px solid var(--gruen)}
.karte-gelb{border-top:5px solid var(--gelb)}
.liste-blank{list-style:none;margin:0;padding:0}
.btn{display:inline-block;background:var(--blau-fuell);color:var(--auf-blau);border:0;font:inherit;font-size:18px;font-weight:600;padding:14px 22px;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--blau-fuell-hover);color:var(--auf-blau)}
.btn-zweit{background:var(--weiss);color:var(--blau);border:2px solid var(--blau);padding:12px 20px}
.btn-zweit:hover{background:var(--blau-weich);color:var(--blau)}
.btnzeile{display:flex;flex-wrap:wrap;gap:12px}
.hero{background:var(--weiss);border-bottom:1px solid var(--linie)}
.hero .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:44px;align-items:center;padding-top:56px;padding-bottom:60px}
.kicker{margin:0 0 14px;font-size:17px;letter-spacing:.12em;text-transform:uppercase;color:var(--gruen);font-weight:600}
/* Punkte wie in der Fusszeile, nur etwas luftiger: Die Versalien hier sind
groesser, deshalb sitzt der Punkt hoeher und bekommt mehr Abstand.
.wort haelt Punkt und Wort zusammen - sonst bleibt beim Umbruch auf
schmalen Schirmen ein Punkt allein am Zeilenende zurueck. */
.kicker .wort{white-space:nowrap}
.kicker .punkt{margin:0 9px 3px 0;vertical-align:middle}
.platzhalter{background:repeating-linear-gradient(135deg,var(--platz-a) 0 14px,var(--platz-b) 14px 28px);border:1px solid var(--platz-rand);
display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;min-height:220px;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;color:var(--platz-text)}
.platzhalter-sand{background:repeating-linear-gradient(135deg,var(--platz-sand-a) 0 14px,var(--platz-sand-b) 14px 28px);border-color:var(--platz-sand-rand);color:var(--platz-sand-text)}
.band{background:var(--weiss);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:48px 0}
.info{background:var(--blau-weich);border-left:5px solid var(--blau);padding:24px}
.warn{background:var(--warn-bg);border:1px solid var(--warn-rand);padding:26px}
.erfolg{background:var(--erfolg-bg);border-left:5px solid var(--gruen);padding:24px;margin-bottom:24px}
/* Die Schritte stehen nebeneinander und nutzen die volle Spalte - wie die
Karten im .raster. auto-fit statt fester Spaltenzahl: bei schmalem Fenster
rutschen sie von selbst untereinander, ohne eigenen Breakpoint. */
.schritte{list-style:none;margin:0 0 40px;padding:0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px}
.schritte li{display:flex;gap:16px;background:var(--weiss);border:1px solid var(--linie);padding:20px}
.nummer{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--auf-blau);background:var(--blau-fuell)}
.nummer-gruen{background:var(--gruen-fuell);color:var(--auf-gruen)} .nummer-gelb{background:var(--gelb-fuell);color:var(--auf-gelb)}
table{width:100%;border-collapse:collapse;color:var(--text)}
caption{text-align:left;font-size:16px;color:var(--text-leise);padding-bottom:10px}
th{text-align:left;font-weight:600;color:var(--dunkel);padding:8px 0}
td{text-align:right;padding:8px 0}
tbody tr{border-bottom:1px solid var(--linie-fein)}
tbody tr:last-child{border-bottom:0}
dl.zeiten div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--linie-fein);padding:4px 0}
dl.zeiten dd{margin:0}
address{font-style:normal;line-height:1.8;color:var(--text)}
/* ---- Textabschnitt mit umflossenem Bild ----
Fuer Seiten mit viel Fliesstext: Ueberschrift, Teaser (.lead) und darunter
der lange Text, der ein Bild umfliesst. Das Bild steht per float rechts;
.textbild-links stellt es auf die andere Seite. Mehr braucht es nicht -
kein Raster, keine Spalten, der Umbruch ergibt sich von selbst.
Im Quelltext steht das Bild VOR dem Absatz, neben dem es beginnen soll:
Ein Float wandert nie nach oben. Der uebliche Platz ist direkt hinter dem
Teaser, dann laeuft der ganze Fliesstext daran vorbei.
Der Abschnitt laeuft ueber die volle Spaltenbreite. Die Lesebreite
entsteht hier nicht durch eine max-width, sondern durch das Bild: Es
nimmt gut ein Drittel ein, daneben bleiben rund 75 Zeichen. Beide Werte
gehoeren zusammen - wird das Bild schmaler, werden die Zeilen laenger. */
.textblock{margin:0 0 40px}
/* Der Teaser steht ueber dem Bild und hat deshalb keinen Float, der ihn
umbricht. Die 80ch entsprechen ungefaehr der Spalte neben dem Bild - so
endet er auf derselben Linie wie der Text darunter. Mit den 62ch aus
.lead stuende er merklich schmaler und saehe aus wie eingerueckt. */
.textblock .lead{max-width:80ch}
/* Ohne das Clearing ragt ein hohes Bild unten aus dem Abschnitt heraus und
schiebt sich neben den naechsten. */
.textblock::after{content:"";display:block;clear:both}
/* Zwischenueberschriften ruecken immer unter das Bild. Eine Ueberschrift auf
halber Spaltenbreite neben dem Bild liest sich wie ein Fehler. */
.textblock h3{clear:both}
.textblock p:last-child{margin-bottom:0}
/* min() statt fester Breite: bei schmalem Fenster schrumpft das Bild mit,
bleibt aber nie breiter als 380 px. Gilt fuer
genauso wie fuer ein einzelnes . */
.textbild{float:right;width:min(38%,380px);margin:6px 0 20px 28px}
.textbild-links{float:left;margin:6px 28px 20px 0}
.textbild img{display:block;width:100%;height:auto}
.textbild figcaption{padding-top:8px;font-size:16px;line-height:1.5;color:var(--text-leise)}
.textbild .platzhalter{min-height:180px}
/* ---- Galerie ---- */
/* auto-fit statt fester Spaltenzahl: die Galerie wird von selbst ein-, zwei-
oder dreispaltig, ohne eigene Breakpoints - wie .raster weiter oben. */
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:24px}
.galerie figure{margin:0;height:100%;background:var(--weiss);border:1px solid var(--linie)}
.galerie img{display:block;width:100%;height:auto}
/* Der Platzhalter sitzt schon im Rahmen der figure - sein eigener Rand
waere dann eine doppelte Linie. */
.galerie .platzhalter{border:0}
.galerie figcaption{padding:14px 18px;font-size:16px;color:var(--text)}
/* ---- Grosse Bildansicht (Lightbox) ----
Zwei Teile: der Ausloeser im Seitenfluss (.grossbild) und die Ansicht
selbst (.lupe), die script.js einmal je Seite an den Body haengt.
Ausloeser ist entweder ein Link auf die Bilddatei - dann funktioniert das
Vergroessern auch ohne JavaScript, der Browser oeffnet einfach das Bild -
oder ein Knopf, den das Skript um die schraffierten Platzhalter legt. */
.grossbild{display:block;position:relative;width:100%;padding:0;border:0;background:none;
font:inherit;color:inherit;text-align:inherit;cursor:zoom-in}
.grossbild img{display:block;width:100%;height:auto}
/* Das Schild mit der Lupe sagt, dass hier mehr zu sehen ist. Rein
schmueckend: Der Ausloeser hat einen eigenen Namen ("Groesser anzeigen: …",
siehe script.js), das Schild wird nicht vorgelesen. */
.grossbild::after{content:"";position:absolute;right:0;bottom:0;width:40px;height:40px;
background:var(--lupe-marke) var(--sym-lupe) center/21px 21px no-repeat}
.grossbild:hover::after,.grossbild:focus-visible::after{background-color:#fff}
/* Die Ansicht ist ein