/* Gebündelte Formatvorlagen — erzeugt von ha-stile.php.
Nicht von Hand ändern; die Quellen stehen in den einzelnen
Erweiterungen unter wp-content/mu-plugins/. */
/* ---- absprache ---- */
.ab-werkzeug { border:1px solid var(--linie,#E8DDD5); border-radius:10px; overflow:hidden;
margin:1.8rem 0 2rem; background:var(--grund-erhoben,#fff); }
.ab-kopf { background:var(--grund-tief,#FAF4EF); padding:1rem 1.2rem; border-bottom:1px solid var(--linie,#E8DDD5); }
.ab-kopf b { display:block; font-size:1.12rem; }
.ab-kopf span { display:block; font-size:.86rem; color:var(--tinte-leise,#8A7B78); margin-top:.2rem; }
.ab-teil { padding:1rem 1.2rem; border-bottom:1px solid var(--linie,#E8DDD5); }
.ab-teil:last-child { border-bottom:0; }
.ab-teil > p.ab-etikett { margin:0 0 .6rem; font-size:.8rem; letter-spacing:.14em;
text-transform:uppercase; color:var(--tinte-leise,#8A7B78); font-weight:600; }
.ab-liste { list-style:none; margin:0; padding:0; }
.ab-liste li { display:flex; align-items:center; gap:.7rem; padding:.5rem 0;
border-bottom:1px solid var(--linie,#E8DDD5); }
.ab-liste li:last-child { border-bottom:0; }
.ab-punkt { width:22px; height:22px; border-radius:50%; flex:0 0 auto;
border:1px solid rgba(0,0,0,.15); }
.ab-name { font-weight:600; }
.ab-detail { color:var(--tinte-leise,#8A7B78); font-size:.9rem; }
.ab-leer { color:var(--tinte-leise,#8A7B78); font-style:italic; margin:0; }
.ab-feld { display:flex; flex-wrap:wrap; gap:.6rem; align-items:flex-end; }
.ab-feld label { display:flex; flex-direction:column; gap:.25rem; font-size:.88rem; }
.ab-feld input, .ab-feld select { font:inherit; padding:.5rem .6rem; border:1px solid var(--linie,#E8DDD5);
border-radius:6px; min-width:9rem; background:#fff; color:var(--tinte,#3A2E2C); }
.ab-knopf { font:inherit; font-weight:600; padding:.6rem 1.1rem; border-radius:999px; cursor:pointer;
border:1px solid var(--tinte,#3A2E2C); background:var(--tinte,#3A2E2C); color:#fff; }
.ab-knopf.ab-zweit { background:#fff; color:var(--tinte,#3A2E2C); }
.ab-warnung { margin:.9rem 0 0; padding:.75rem .9rem; border-radius:6px;
background:#FBEFEE; border-left:4px solid #B4564F; }
.ab-warnung[hidden] { display:none; }
.ab-gut { background:#EEF5EC; border-left-color:#7A9A6B; }
.ab-link { margin-top:.8rem; }
.ab-link input { width:100%; font:inherit; font-size:.86rem; padding:.5rem .6rem;
border:1px solid var(--linie,#E8DDD5); border-radius:6px; background:var(--grund-tief,#FAF4EF); }
.ab-hinweis { font-size:.84rem; color:var(--tinte-leise,#8A7B78); margin:.9rem 0 0; }
@media (max-width:600px){ .ab-feld { flex-direction:column; align-items:stretch; }
.ab-feld input, .ab-feld select { min-width:0; width:100%; } }
/* ---- aenderbar ---- */
.ae-liste { display:grid; gap:.45rem; margin:.2rem 0 1rem; }
.ae-punkt { display:grid; grid-template-columns:26px 1fr; align-items:start; gap:.6rem;
padding:.55rem .7rem; border:1px solid var(--linie,#E3D5D0); border-left-width:5px;
border-radius:0 9px 9px 0; background:#fff; }
.ae-punkt.ae-ja { border-left-color:#2E6B4F; }
.ae-punkt.ae-vielleicht { border-left-color:#9A6B12; }
.ae-punkt.ae-nein { border-left-color:#A32E38; background:#FBF2F3; }
.ae-nr { font-weight:600; color:#8A7B78; text-align:center; line-height:1.5; }
.ae-punkt b { display:block; font-weight:600; line-height:1.3; }
.ae-punkt small { display:block; color:#6B5B57; font-size:.88rem; line-height:1.4; margin-top:.1rem; }
.hawz-knopf.ae-mehr { margin-top:.4rem; border-style:dashed; }
/* ---- aktualitaet ---- */
.ha-aktualitaet{margin:0 0 1.4rem;padding:.5rem .85rem;border-left:3px solid #D9BBA4;
background:#FBF7F4;font-size:.93rem;color:#6B5B57;border-radius:0 8px 8px 0}
.ha-aktualitaet time{font-weight:600;color:#3A2E2C}
.ha-aktualitaet span{color:#8A7B78}
/* ---- altbestand ---- */
/* --- Sicherheitsnetz: gilt für allen Inhalt ---------------------- */
/* 252 Seiten tragen Bilder mit fester Pixelbreite. Die Attribute
bleiben stehen (sie reservieren den Platz und verhindern, dass der
Text beim Laden springt) — hier wird nur dafür gesorgt, dass sie
eine schmale Spalte nicht sprengen. */
.beitragstext img{max-width:100%;height:auto}
/* Tabellen, die der Umbau nicht angefasst hat, bekommen einen
scrollbaren Rahmen statt die Seite zu verbreitern. Eine zu breite
Tabelle schiebt sonst das GANZE Layout auf und erzeugt den
waagerechten Balken, den Google als mobilen Mangel wertet. */
.beitragstext table{max-width:100%;display:block;overflow-x:auto;
border-collapse:collapse;font-size:.95rem}
.beitragstext table td,.beitragstext table th{padding:.35rem .6rem}
/* Blocksatz kann auch in style-Attributen einzelner Absätze stecken,
die der Umbau nicht erwischt. */
.beitragstext [style*="justify"]{text-align:left !important}
/* --- Klassen, die der Umbau setzt -------------------------------- */
/* Aus den Layout-Tabellen mit Pfeil-Grafik. Der Pfeil war ein 30x15-PNG
von 2010; ein Zeichen tut dasselbe, lädt nicht nach und wächst mit
der Schriftgröße mit. */
.ha-pfeilliste{list-style:none;margin:1.4rem 0;padding:0;
border-left:3px solid #D9BBA4;background:#FBF7F4;border-radius:0 8px 8px 0}
.ha-pfeilliste li{position:relative;padding:.55rem .9rem .55rem 2.1rem;margin:0}
.ha-pfeilliste li+li{border-top:1px solid #EFE6E0}
.ha-pfeilliste li::before{content:"\203A";position:absolute;left:.95rem;top:.5rem;
color:#B04A63;font-size:1.25rem;line-height:1.2;font-weight:700}
.ha-pfeilliste a{text-decoration:none;font-weight:600;color:#8C3A50}
.ha-pfeilliste a:hover,.ha-pfeilliste a:focus{text-decoration:underline}
/* Umflossene Bilder — aber nur, wo Platz dafür ist. Unter 600 Pixel
Breite steht das Bild frei; ein 233 Pixel breites Bild neben Text in
einer 320-Pixel-Spalte lässt vier Zeichen pro Zeile übrig. */
.ha-bild-links,.ha-bild-rechts{display:block;margin:.4rem auto 1rem;border-radius:8px}
@media (min-width:600px){
.ha-bild-rechts{float:right;margin:.3rem 0 1rem 1.4rem}
.ha-bild-links {float:left; margin:.3rem 1.4rem 1rem 0}
}
/* Die Aufforderung zum Kommentar. Sie stand in — ein Tag, den
HTML5 gestrichen hat, und größer als die Überschriften daneben. */
.ha-mitreden{display:block;margin:2rem 0 .5rem;padding:.7rem 1rem;
background:#FBF7F4;border-left:3px solid #D9BBA4;border-radius:0 8px 8px 0;
font-style:normal;font-size:.95rem;color:#6B5B57}
/* Nach dem Entfernen der Anzeigenblöcke bleiben deren Abstandshalter
stehen. */
.beitragstext br[style*="clear"]{display:block;clear:both;content:"";height:0}
/* ---- anprobe ---- */
.ap-werkzeug { border:1px solid var(--linie,#E8DDD5); border-radius:10px; overflow:hidden;
margin:1.8rem 0 2rem; background:var(--grund-erhoben,#fff); }
.ap-kopf { background:var(--grund-tief,#FAF4EF); padding:1rem 1.2rem; border-bottom:1px solid var(--linie,#E8DDD5); }
.ap-kopf b { display:block; font-size:1.12rem; }
.ap-kopf span { display:block; font-size:.86rem; color:var(--tinte-leise,#8A7B78); margin-top:.2rem; }
.ap-teil { padding:.9rem 1.2rem; border-bottom:1px solid var(--linie,#E8DDD5); }
.ap-etikett { margin:0 0 .6rem; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--tinte-leise,#8A7B78); font-weight:600; }
.ap-wahl { display:flex; flex-wrap:wrap; gap:.45rem; }
.ap-wahl button { border:1px solid var(--linie,#E8DDD5); background:#fff; cursor:pointer;
padding:.5rem .8rem; border-radius:999px; font:inherit; font-size:.94rem; color:var(--tinte,#3A2E2C); }
.ap-wahl button[aria-pressed="true"] { background:var(--tinte,#3A2E2C); color:#fff; border-color:var(--tinte,#3A2E2C); }
.ap-punkte { list-style:none; margin:0; padding:0; }
.ap-punkt { border-bottom:1px solid var(--linie,#E8DDD5); padding:.85rem 0; }
.ap-punkt:last-child { border-bottom:0; }
.ap-frage { display:flex; gap:.8rem; align-items:flex-start; }
.ap-frage > div { flex:1; }
.ap-frage b { display:block; font-size:1rem; margin-bottom:.15rem; }
.ap-frage small { color:var(--tinte-leise,#8A7B78); font-size:.86rem; line-height:1.45; display:block; }
.ap-ko { display:inline-block; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
background:#FBEFEE; color:#B4564F; padding:.1rem .4rem; border-radius:4px; margin-left:.4rem;
vertical-align:.1em; }
.ap-antwort { display:flex; gap:.4rem; margin-top:.5rem; }
.ap-antwort button { flex:0 0 auto; border:1px solid var(--linie,#E8DDD5); background:#fff; cursor:pointer;
padding:.4rem .9rem; border-radius:999px; font:inherit; font-size:.9rem; color:var(--tinte,#3A2E2C); }
.ap-antwort button[aria-pressed="true"][data-w="ja"] { background:#EEF5EC; border-color:#7A9A6B; color:#3F5A38; }
.ap-antwort button[aria-pressed="true"][data-w="nein"] { background:#FBEFEE; border-color:#B4564F; color:#7E322C; }
.ap-fortschritt { height:8px; border-radius:999px; background:var(--linie,#E8DDD5); overflow:hidden; margin:.2rem 0 .8rem; }
.ap-fortschritt span { display:block; height:100%; background:var(--champagner,#D9BBA4); width:0; transition:width .2s; }
.ap-ergebnis { padding:1.1rem 1.2rem; background:var(--grund-tief,#FAF4EF); }
.ap-urteil { font-size:1.3rem; font-weight:700; margin:0 0 .3rem; }
.ap-begruendung { margin:0; }
.ap-offen { margin:.8rem 0 0; padding:.75rem .9rem; background:#fff; border-radius:6px;
border-left:4px solid #B4564F; }
.ap-offen[hidden] { display:none; }
.ap-offen ul { margin:.3rem 0 0; padding-left:1.1rem; }
.ap-hinweis { font-size:.84rem; color:var(--tinte-leise,#8A7B78); margin:.9rem 0 0; }
/* ---- auftritt ---- */
#ha-auftritt-band{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
margin:0 0 1.7rem;padding:.7rem 1.1rem;border-radius:999px;
background:#F7EEF1;border:1px solid #E3D5D0;font-size:.99rem}
.ha-band-etikett{font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
color:#8C2F4A;font-weight:600;white-space:nowrap}
.ha-band-text{color:#3A2E2C;flex:1;min-width:0}
.ha-band-link{color:#8C2F4A;font-size:.94rem;white-space:nowrap}
.ha-uebernommen{margin:0 0 1.1rem;padding:.6rem .9rem;border-radius:9px;
background:#F7EEF1;font-size:.97rem;color:#5A4B48}
.ha-uebernommen .hawz-zurueck{margin:0;font-size:.97rem}
.hawz-loeschen{margin-top:1.3rem;display:flex;gap:1.5rem;flex-wrap:wrap}
.hawz-loeschen .hawz-zurueck{margin-top:0}
@media (max-width:520px){
#ha-auftritt-band{border-radius:12px;font-size:.94rem}
}
/* ---- auftrittskosten ---- */
.ak-werkzeug { border:1px solid var(--linie,#E8DDD5); border-radius:10px; overflow:hidden;
margin:1.8rem 0 2rem; background:var(--grund-erhoben,#fff); }
.ak-kopf { background:var(--grund-tief,#FAF4EF); padding:1rem 1.2rem; border-bottom:1px solid var(--linie,#E8DDD5); }
.ak-kopf b { display:block; font-size:1.12rem; }
.ak-kopf span { display:block; font-size:.86rem; color:var(--tinte-leise,#8A7B78); margin-top:.2rem; }
.ak-teil { padding:.9rem 1.2rem; border-bottom:1px solid var(--linie,#E8DDD5); }
.ak-teil:last-child { border-bottom:0; }
.ak-etikett { margin:0 0 .7rem; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--tinte-leise,#8A7B78); font-weight:600; }
.ak-zeile { display:flex; align-items:center; gap:.7rem; padding:.4rem 0; }
.ak-zeile label { flex:1; font-size:.95rem; }
.ak-zeile label small { display:block; color:var(--tinte-leise,#8A7B78); font-size:.8rem; }
.ak-zeile input[type=number] { width:5.6rem; font:inherit; text-align:right; padding:.4rem .5rem;
border:1px solid var(--linie,#E8DDD5); border-radius:6px; background:#fff; color:var(--tinte,#3A2E2C); }
.ak-zeile .ak-euro { color:var(--tinte-leise,#8A7B78); width:1rem; }
.ak-summe { padding:1.1rem 1.2rem; background:var(--grund-tief,#FAF4EF); }
.ak-gross { font-size:1.6rem; font-weight:700; color:var(--tinte,#3A2E2C); }
.ak-balken { display:flex; height:12px; border-radius:999px; overflow:hidden; margin:.8rem 0 .5rem;
background:var(--linie,#E8DDD5); }
.ak-balken span { display:block; height:100%; }
.ak-legende { display:flex; flex-wrap:wrap; gap:.5rem 1rem; font-size:.82rem;
color:var(--tinte-leise,#8A7B78); margin:0; }
.ak-legende i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:.3rem; }
.ak-karten { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-top:1rem; }
.ak-karte { padding:.8rem .9rem; border:1px solid var(--linie,#E8DDD5); border-radius:8px; background:#fff; }
.ak-karte b { display:block; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
color:var(--tinte-leise,#8A7B78); margin-bottom:.25rem; }
.ak-karte strong { font-size:1.15rem; }
.ak-rat { margin:1rem 0 0; padding:.8rem .95rem; border-radius:6px; background:#fff;
border-left:4px solid var(--champagner,#D9BBA4); }
.ak-hinweis { font-size:.84rem; color:var(--tinte-leise,#8A7B78); margin:.9rem 0 0; }
@media (max-width:600px){ .ak-karten { grid-template-columns:1fr; } }
/* ---- bildhinweis ---- */
.ha-bildhinweis {
clear: both;
margin: 26px 0 0;
padding: 14px 18px;
background: var(--grund-tief, #f3ebea);
border-left: 3px solid var(--champagner, #b99268);
font-size: .93rem;
line-height: 1.55;
color: var(--tinte-leise, #6b6070);
}
.ha-bildhinweis a { color: var(--akzent, #8c2f4a); }
/* ---- blaettern ---- */
.ha-blaettern{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1.6rem 0 .6rem}
.ha-blatt{display:block;padding:.85rem 1rem;border:1px solid #E3D5D0;border-radius:12px;
background:#fff;text-decoration:none;transition:border-color .15s,background .15s;min-width:0}
.ha-blatt:hover{border-color:#8C2F4A;background:#FDF6F8}
.ha-blatt.weiter{text-align:right}
.ha-blatt.leer{border:0;background:none}
.ha-blatt-richtung{display:block;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;
color:#8C2F4A;margin-bottom:.25rem}
.ha-blatt-titel{display:block;color:#3A2E2C;font-size:.99rem;line-height:1.4;overflow:hidden;
text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (max-width:560px){.ha-blaettern{grid-template-columns:1fr}.ha-blatt.weiter{text-align:left}}
/* ---- brautfrage ---- */
.bf-karte{display:flex;align-items:center;gap:1.2rem;padding:1.2rem 1.3rem;margin:0 0 1.2rem;
border:1px solid #E3D5D0;border-radius:14px;background:linear-gradient(180deg,#FFFDFC,#FBF7F6)}
.bf-farbe{flex:0 0 84px;height:84px;border-radius:50%;background:var(--f);
border:1px solid rgba(0,0,0,.15);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.bf-frage{margin:0 0 .3rem;font-size:1.14rem;line-height:1.45}
.bf-frage2{margin:0;font-size:1.24rem;font-weight:600}
@media (max-width:520px){.bf-karte{flex-direction:column;text-align:center}.bf-farbe{flex-basis:auto}}
/* ---- darstellung ---- */
/* Blocksatz aus dem Bestand aufheben */
.beitragstext [align="justify"],
.beitragstext [style*="justify"],
.beitragstext .justify,
.beitragstext p,
.beitragstext div,
.beitragstext li { text-align: left; }
.beitragstext h1, .beitragstext h2, .beitragstext h3,
.beitragstext h4, .beitragstext h5, .beitragstext h6 { text-align: left; }
/* Nachträglich eingerahmte Anzeigen: klar abgesetzt, nie im Satz */
.anzeige-nachtraeglich { clear: both; margin: 2rem 0; text-align: center; }
.anzeige-nachtraeglich .anzeige-inhalt { display: block; }
.anzeige-nachtraeglich ins.adsbygoogle { display: inline-block !important; max-width: 100%; }
/* Das Einwilligungsfenster von Google setzt seine Breite in Pixeln und
ragt auf schmalen Bildschirmen fünf Pixel über den Rand — das genügt
für einen waagerechten Rollbalken auf jeder Seite. Da die Fassung von
Google kommt, wird sie hier eingefangen. */
.fc-consent-root, .fc-dialog-overlay, .fc-dialog { max-width: 100vw; }
html, body { overflow-x: clip; }
/* ------------------------------------------------------------------
* Feste Breiten aus dem Bestand
*
* Die Beiträge stammen aus einer Zeit vor dem Smartphone. Bilder tragen
* width="468" (die alte Bannerbreite), Tabellen und Kästen ebenso.
* Gemessen: 59 Seiten mit Breiten über 380 Pixel, 102 Seiten mit
* align=left oder align=right.
*
* Auf einem 375 Pixel breiten Bildschirm sprengt beides das Layout.
* Der Bestand bleibt unangetastet; die Angaben werden überstimmt.
* ---------------------------------------------------------------- */
.beitragstext img, .beitragstext table, .beitragstext iframe,
.beitragstext object, .beitragstext embed, .beitragstext video {
max-width: 100%; height: auto;
}
.beitragstext table { display: block; overflow-x: auto; }
.beitragstext table td, .beitragstext table th { min-width: 0; }
@media (max-width: 620px) {
/* Umflossene Bilder brauchen Breite. Die ist auf dem Handy nicht da —
also stellt sich das Bild über den Text statt daneben. */
.beitragstext [align="left"], .beitragstext [align="right"],
.beitragstext img[style*="float"], .beitragstext .alignleft, .beitragstext .alignright {
float: none !important;
display: block;
margin: 1.1rem auto !important;
}
.beitragstext [width] { max-width: 100% !important; }
.beitragstext div[style*="width"] { max-width: 100% !important; }
}
/* ---- farbcheck-blitz ---- */
.fc-blitz{margin:1.6rem 0 0;padding:1rem 1.15rem;border:1px solid #E3D5D0;border-radius:12px;
background:linear-gradient(180deg,#FFFDFC,#FBF7F6)}
.fc-blitz-vorschau{font-size:.96rem;color:#5A4B48;background:#fff;border:1px dashed #E3D5D0;
border-radius:9px;padding:.6rem .8rem}
.fc-blitz-knopf{display:inline-block;padding:.65rem 1.2rem;border-radius:999px;background:#2E6B4F;
color:#fff;text-decoration:none;font-size:1rem;margin-right:.6rem}
.fc-blitz-knopf:hover{background:#3B8262;color:#fff}
.fc-blitz-kopie{background:none;border:2px solid #E3D5D0;border-radius:999px;padding:.55rem 1.1rem;
font:inherit;font-size:1rem;cursor:pointer;color:#3A2E2C}
.fc-blitz-kopie:hover{border-color:#8C2F4A}
/* ---- farbrad ---- */
.fr-felder{display:grid;gap:.55rem;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));margin:0 0 1.2rem}
.fr-feld{position:relative;height:72px;border-radius:11px;border:2px solid #E3D5D0;cursor:pointer;
background:var(--f);padding:0;overflow:hidden;transition:transform .12s,border-color .12s}
.fr-feld:hover,.fr-feld:focus-visible{transform:translateY(-2px);border-color:#8C2F4A;outline:none}
.fr-feld.an{border-color:#8C2F4A;box-shadow:0 0 0 2px #fff inset,0 0 0 4px #8C2F4A inset}
.fr-feld span{position:absolute;left:0;right:0;bottom:0;padding:.2rem .35rem;font-size:.78rem;
background:rgba(255,255,255,.88);color:#2E2426;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-antwort{border:1px solid #E3D5D0;border-radius:12px;overflow:hidden;background:#fff}
.fr-antwort::before{content:"";display:block;height:10px;background:var(--f)}
.fr-kopf{margin:.9rem 1.1rem .3rem;font-size:1.18rem}
.fr-liste{margin:.4rem 1.1rem 1rem;padding:0}
.fr-liste dt{font-weight:600;margin:.75rem 0 .15rem;color:#3A2E2C}
.fr-liste dd{margin:0;color:#5A4B48;line-height:1.5}
.fr-liste dt.fr-fehler{color:#A32E38}
.fr-weiter{margin:.2rem 1.1rem 1rem;font-size:.97rem}
@media (max-width:520px){.fr-felder{grid-template-columns:repeat(3,1fr)}.fr-feld{height:62px}}
/* ---- farbtyp ---- */
.ft-palette{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));margin:.6rem 0 1rem}
.ft-farbe{display:block;height:76px;border-radius:11px;background:var(--f);position:relative;
overflow:hidden;border:2px solid #E3D5D0;text-decoration:none;transition:transform .12s,border-color .12s}
.ft-farbe:hover{transform:translateY(-2px);border-color:#8C2F4A}
.ft-farbe span{position:absolute;left:0;right:0;bottom:0;padding:.25rem .45rem;font-size:.82rem;
background:rgba(255,255,255,.9);color:#2E2426}
/* ---- fleckenretter ---- */
.fr-werkzeug { border: 1px solid var(--linie,#E8DDD5); border-radius: 10px; overflow: hidden;
margin: 1.8rem 0 2rem; background: var(--grund-erhoben,#fff); }
.fr-kopf { background: var(--grund-tief,#FAF4EF); padding: 1rem 1.2rem; border-bottom: 1px solid var(--linie,#E8DDD5); }
.fr-kopf b { display:block; font-size: 1.12rem; }
.fr-kopf span { display:block; font-size:.86rem; color: var(--tinte-leise,#8A7B78); margin-top:.2rem; }
.fr-schritt { padding: 1rem 1.2rem; border-bottom: 1px solid var(--linie,#E8DDD5); }
.fr-schritt > p { margin:0 0 .6rem; font-size:.8rem; letter-spacing:.14em;
text-transform:uppercase; color: var(--tinte-leise,#8A7B78); font-weight:600; }
.fr-knoepfe { display:flex; flex-wrap:wrap; gap:.45rem; }
.fr-knoepfe button { border:1px solid var(--linie,#E8DDD5); background:#fff; cursor:pointer;
padding:.5rem .8rem; border-radius:999px; font:inherit; font-size:.94rem; color:var(--tinte,#3A2E2C);
transition: background .12s, border-color .12s; }
.fr-knoepfe button:hover { border-color: var(--champagner,#D9BBA4); }
.fr-knoepfe button[aria-pressed="true"] { background: var(--tinte,#3A2E2C); color:#fff;
border-color: var(--tinte,#3A2E2C); }
.fr-ergebnis { padding: 1.1rem 1.2rem 1.3rem; }
.fr-ergebnis[hidden] { display:none; }
.fr-block { margin: 0 0 1rem; padding-left: .9rem; border-left: 4px solid var(--champagner,#D9BBA4); }
.fr-block:last-child { margin-bottom:0; }
.fr-block.fr-jetzt { border-left-color:#7A9A6B; }
.fr-block.fr-nie { border-left-color:#B4564F; }
/* Nur das DIREKTE Kind ist das Etikett. Ohne den `>` traf die Regel
auch jedes im Fließtext — aus „Mineralwasser" wurde
„MINERALWASSER", aus einer Hervorhebung eine Überschrift.
Gemessen im Browser am 10.08.2026. */
.fr-block > b { display:block; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
margin-bottom:.3rem; color: var(--tinte-leise,#8A7B78); }
.fr-block p b, .fr-block li b { font-weight:600; color: var(--tinte,#3A2E2C); }
.fr-block p { margin:0; line-height:1.55; }
.fr-block ol { margin:.3rem 0 0; padding-left:1.2rem; }
.fr-block ol li { margin:.25rem 0; }
.fr-chance { margin-top:1rem; padding:.7rem .9rem; background:var(--grund-tief,#FAF4EF);
border-radius:6px; font-size:.95rem; }
.fr-hinweis { font-size:.84rem; color:var(--tinte-leise,#8A7B78); margin:.9rem 0 0; }
@media (max-width:600px){ .fr-knoepfe button{ font-size:.9rem; padding:.45rem .7rem; } }
/* ---- grafik ---- */
.ha-grafik{margin:1.8rem 0;padding:0}
/* Spezifität erhöht: Die allgemeine Bildregel des Themes setzt 2px und
kommt in der Kaskade später — gemessen im Browser. */
.beitragstext .ha-grafik img{width:100%;height:auto;display:block;border:1px solid #E3D5D0;border-radius:12px;background:#FBF7F4}
.ha-grafik figcaption{margin:.7rem 0 0;font-size:.95rem;line-height:1.5;color:#6B5B57}
/* ---- highlight ---- */
.ha-highlight {
margin: 1.6rem 0 1.8rem;
padding: 1.1rem 1.3rem 1.2rem;
background: var(--grund-tief, #FAF4EF);
border-left: 4px solid var(--champagner, #D9BBA4);
border-radius: 0 6px 6px 0;
}
.ha-highlight .ha-highlight-etikett {
display: block;
font-size: 10.5px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--tinte-leise, #8A7B78);
margin: 0 0 .45rem;
font-style: normal;
font-weight: 600;
}
/* Etwas größer als der Fließtext, aber nicht so groß, dass der Kasten
die Überschrift überstimmt — er ist ein Merksatz, keine Dachzeile. */
.ha-highlight p {
margin: 0;
font-size: 1.06em;
line-height: 1.55;
color: var(--tinte, #3A2E2C);
}
.ha-highlight strong { color: var(--tinte, #3A2E2C); }
@media (max-width: 600px) {
.ha-highlight { padding: .9rem 1rem 1rem; }
.ha-highlight p { font-size: 1.02em; }
}
/* ---- kachelbild ---- */
/* !important, weil `.rat` im Theme eine spezifischere Regel mit
Innenabstand traegt — gemessen: Bild 232 statt 264 Pixel breit. */
.rat-bild {
padding: 0 !important;
overflow: hidden;
display: flex;
flex-direction: column;
}
.rat-bild img {
width: 100%;
height: 150px;
/* Zuschneiden statt verzerren. Ohne object-fit würde ein Hochformat
auf Kachelbreite gequetscht — Gesichter werden dabei breit. */
object-fit: cover;
/* Der obere Bildbereich zeigt bei Modeaufnahmen Kopf und Schultern.
Standard wäre die Mitte; dann fehlt regelmäßig der Kopf. */
object-position: center 22%;
display: block;
margin: 0;
}
.rat-bild .rat-quelle {
position: absolute;
right: 6px; top: 132px;
font-size: .62rem;
font-style: normal;
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,.75);
pointer-events: none;
}
.rat-bild { position: relative; }
.rat-bild .rat-text {
display: block;
padding: 14px 16px 16px;
}
.rat-bild .rat-text i,
.rat-bild .rat-text b,
.rat-bild .rat-text span { display: block; }
/* ---- lastminute ---- */
.lm-plan{margin:1.2rem 0 1rem;padding:0;list-style:none;counter-reset:lm}
.lm-plan li{position:relative;padding:0 0 1.05rem 3rem;counter-increment:lm}
.lm-plan li::before{content:counter(lm);position:absolute;left:0;top:-.15rem;width:2.1rem;height:2.1rem;
border-radius:50%;background:#8C2F4A;color:#fff;font-weight:600;display:flex;
align-items:center;justify-content:center}
.lm-plan li b{display:block;margin-bottom:.15rem}
.lm-plan li span{color:#5A4B48;line-height:1.5}
/* ---- lichtsaal ---- */
.ls-stofffrage{margin:1.3rem 0 .7rem;font-size:1.06rem}
.ls-stoffe{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.ls-stoff{min-height:auto;padding:.6rem .8rem}
.ls-stoff.an{border-color:#8C2F4A;background:#FDF6F8}
.ls-stoff b{font-size:1rem}
.ls-saal{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin:1.4rem 0 1rem}
.ls-kabine{margin:0}
.ls-buehne{border-radius:10px 10px 0 0;padding:.6rem .9rem .2rem}
.ls-buehne svg{width:100%;height:auto;display:block}
.ls-kabine figcaption{border:1px solid #E3D5D0;border-top:0;border-radius:0 0 10px 10px;
padding:.5rem .7rem .6rem;font-size:.92rem;line-height:1.35;background:#fff}
.ls-kabine figcaption b{display:block}
.ls-kabine figcaption span{color:#6B5B57;font-size:.85rem}
.ls-befund{display:block;margin-top:.3rem;color:#A32E38;font-style:normal;font-size:.88rem;font-weight:600}
.ls-eigen input{min-height:44px;width:90px;padding:.15rem;cursor:pointer}
@media (max-width:560px){.ls-saal{grid-template-columns:repeat(2,1fr)}}
/* ---- pinterest ---- */
.ha-pin{display:flex;gap:1.6rem;align-items:flex-start;margin:2.6rem 0 1rem;
padding:1.4rem;border:1px solid #E3D5D0;border-radius:14px;
background:linear-gradient(180deg,#FFFDFC,#FBF7F6)}
.ha-pin-bild{flex:0 0 200px;max-width:200px}
.ha-pin-bild img{width:100%;height:auto;display:block;border-radius:8px;
border:1px solid #E3D5D0}
.ha-pin-text{flex:1}
.ha-pin-text h2{margin:.1rem 0 .6rem;font-size:1.16rem;line-height:1.3}
.ha-pin-text p{margin:0 0 .8rem;font-size:1rem;line-height:1.5;color:#5A4B48}
.ha-pin-knopf{display:inline-block;padding:.7rem 1.3rem;border-radius:999px;
background:#8C2F4A;color:#fff;text-decoration:none;font-size:1rem}
.ha-pin-knopf:hover{background:#A94462;color:#fff}
.ha-pin-hinweis{font-size:.9rem!important;color:#8B7B77!important}
@media (max-width:560px){
.ha-pin{flex-direction:column;gap:1.1rem}
.ha-pin-bild{flex:none;max-width:170px;align-self:center}
}
/* ---- ratgeber-block ---- */
/* Sicherung gegen wpautop: Es setzt zwischen zwei Blöcken gern ein
leeres . Im Grid besetzt das eine Spalte — der Text landete
dadurch UNTER dem Bild statt daneben. Der Quelltext steht jetzt in
einer Zeile, aber ein Redakteur bricht sie beim Bearbeiten wieder um;
deshalb hier zusätzlich abgefangen. */
.ha-ratgeber-block > p:empty { display: none; }
.ha-ratgeber-block {
display: grid; gap: 26px; align-items: center;
grid-template-columns: 1fr;
margin: 28px 0; padding: 20px;
background: var(--grund-tief, #f3ebea);
border-radius: 4px;
}
@media (min-width: 620px) {
/* Text links, Ratgeber rechts. Im Quelltext steht das Bild zuerst —
auf schmalen Bildschirmen soll es oben stehen, weil es den Blick
hält. Auf breiten tauschen die beiden per grid-column die Plätze,
ohne dass die Reihenfolge im HTML sich ändert. */
.ha-ratgeber-block { grid-template-columns: 1fr 270px; gap: 28px; }
.ha-ratgeber-block .ha-ratgeber-bild { grid-column: 2; grid-row: 1; }
.ha-ratgeber-block .ha-ratgeber-text { grid-column: 1; grid-row: 1; }
}
.ha-ratgeber-block .ha-ratgeber-bild img {
width: 100%; max-width: 270px; height: auto; display: block;
margin: 0 auto;
/* Der Schatten steckt schon im Bild; hier nur eine feine Kante, damit
das helle Titelblatt sich vom hellen Kasten abhebt. */
filter: drop-shadow(0 2px 10px rgba(60,40,50,.14));
transition: transform .18s ease;
}
.ha-ratgeber-block .ha-ratgeber-bild:hover img { transform: translateY(-3px); }
.ha-ratgeber-titel { font-size: 1.14rem; line-height: 1.3; margin: 0 0 .5rem; }
.ha-ratgeber-block p { margin: 0 0 .8rem; font-size: .97rem; line-height: 1.6; }
.ha-ratgeber-klein { font-size: .86rem; color: var(--tinte-leise, #6b6070); margin: 0; }
.ha-knopf {
display: inline-block; padding: 13px 26px;
background: var(--akzent, #8c2f4a); color: #fff;
text-decoration: none; border-radius: 3px;
font-weight: 600; font-size: 1.02rem;
}
.ha-knopf:hover { background: #a94462; color: #fff; }
/* ---- saumrechner ---- */
.sr-werkzeug { border:1px solid var(--linie,#E8DDD5); border-radius:10px; overflow:hidden;
margin:1.8rem 0 2rem; background:var(--grund-erhoben,#fff); }
.sr-kopf { background:var(--grund-tief,#FAF4EF); padding:1rem 1.2rem; border-bottom:1px solid var(--linie,#E8DDD5); }
.sr-kopf b { display:block; font-size:1.12rem; }
.sr-kopf span { display:block; font-size:.86rem; color:var(--tinte-leise,#8A7B78); margin-top:.2rem; }
.sr-teil { padding:1rem 1.2rem; border-bottom:1px solid var(--linie,#E8DDD5); }
.sr-teil:last-child { border-bottom:0; }
.sr-etikett { margin:0 0 .6rem; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--tinte-leise,#8A7B78); font-weight:600; }
.sr-zeile { display:flex; align-items:center; gap:.7rem; padding:.4rem 0; flex-wrap:wrap; }
.sr-zeile label { flex:1 1 14rem; font-size:.95rem; }
.sr-zeile label small { display:block; color:var(--tinte-leise,#8A7B78); font-size:.8rem; }
.sr-zeile input[type=number] { width:5.4rem; font:inherit; text-align:right; padding:.45rem .5rem;
border:1px solid var(--linie,#E8DDD5); border-radius:6px; background:#fff; color:var(--tinte,#3A2E2C); }
.sr-zeile select { font:inherit; padding:.45rem .5rem; border:1px solid var(--linie,#E8DDD5);
border-radius:6px; background:#fff; color:var(--tinte,#3A2E2C); }
.sr-einheit { color:var(--tinte-leise,#8A7B78); width:2rem; font-size:.9rem; }
.sr-regler { width:100%; margin:.4rem 0 0; }
.sr-ergebnis { padding:1.1rem 1.2rem; background:var(--grund-tief,#FAF4EF); }
.sr-gross { font-size:1.5rem; font-weight:700; color:var(--tinte,#3A2E2C); margin:0 0 .2rem; }
.sr-unter { color:var(--tinte-leise,#8A7B78); margin:0; }
.sr-karten { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-top:1rem; }
.sr-karte { padding:.8rem .9rem; border:1px solid var(--linie,#E8DDD5); border-radius:8px; background:#fff; }
.sr-karte b { display:block; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
color:var(--tinte-leise,#8A7B78); margin-bottom:.25rem; }
.sr-karte strong { font-size:1.1rem; }
.sr-rat { margin:1rem 0 0; padding:.8rem .95rem; border-radius:6px; background:#fff;
border-left:4px solid var(--champagner,#D9BBA4); }
.sr-rat.sr-warn { border-left-color:#B4564F; background:#FBEFEE; }
.sr-hinweis { font-size:.84rem; color:var(--tinte-leise,#8A7B78); margin:.9rem 0 0; }
@media (max-width:600px){ .sr-karten { grid-template-columns:1fr; } }
/* ---- schnittberater ---- */
.sn-liste { display:grid; gap:.45rem; margin:.3rem 0 1rem; }
.sn-zeile { display:grid; grid-template-columns:26px 1fr; gap:.6rem; align-items:start;
padding:.55rem .7rem; border:1px solid var(--linie,#E3D5D0); border-radius:9px; background:#fff; }
.sn-nr { font-weight:600; color:#8A7B78; text-align:center; line-height:1.5; }
.sn-zeile b { display:block; font-weight:600; }
.sn-zeile b a { color:var(--akzent,#8C2F4A); }
.sn-zeile small { display:block; color:#6B5B57; font-size:.88rem; line-height:1.45; margin-top:.15rem; }
/* ---- seitenbild ---- */
.ha-seitenbild {
margin: .3rem 0 1.1rem;
width: 100%;
max-width: 300px;
/* Das Bild schwebt, die Umhüllung muss mitschweben — sonst steht der
Nachweis irgendwo im Text statt unter seinem Bild. */
float: none;
}
@media (min-width: 600px) {
/* Feste Breite, nicht nur max-width: Ein schwebendes Element ohne
Breitenangabe richtet sich nach seinem Inhalt — und das Bild darin
nach der figure. Dieser Zirkelschluss ergab beim ersten Versuch ein
Bild von 108 statt 240 Pixeln. Gemessen, nicht vermutet. */
.ha-seitenbild { float: right; width: 240px; margin: .3rem 0 1rem 1.4rem; }
}
.ha-seitenbild img { display: block; width: 100%; height: auto; margin: 0; float: none; }
.ha-seitenbild figcaption {
font-size: .78rem;
color: var(--tinte-leise, #6b6070);
margin-top: .35rem;
text-align: right;
}
/* ---- startkacheln ---- */
.start-werkzeuge{background:linear-gradient(180deg,#FFFDFC,#FBF7F6)}
.wz-gitter{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:1.4rem 0 0}
.wz-kachel{display:block;padding:1.05rem 1.15rem;background:#fff;border:1px solid #E3D5D0;
border-radius:13px;text-decoration:none;transition:border-color .15s,transform .15s}
.wz-kachel:hover{border-color:#8C2F4A;transform:translateY(-2px)}
.wz-kachel b{display:block;font-family:Georgia,serif;font-size:1.14rem;line-height:1.3;color:#2E2426;margin-bottom:.3rem}
.wz-kachel span{display:block;font-size:.95rem;line-height:1.45;color:#6B5B57}
.wz-kachel i{display:inline-block;font-style:normal;font-size:.74rem;letter-spacing:.09em;
text-transform:uppercase;color:#8C2F4A;font-weight:600;margin-bottom:.35rem}
.wz-kachel.hervor{border-color:#B99268;background:linear-gradient(180deg,#fff,#FDF8F2)}
.wz-alle{margin:1.3rem 0 0;font-size:.98rem;color:#6B5B57}
.wz-alle a{color:#8C2F4A}
/* ---- stoffwahl ---- */
.sw-rang { display:grid; gap:.4rem; margin:.6rem 0 1rem; }
.sw-zeile { display:grid; grid-template-columns:26px 1fr 88px; align-items:center; gap:.7rem;
padding:.5rem .6rem; border:1px solid var(--linie,#E3D5D0); border-radius:9px; background:#fff; }
.sw-zeile.sw-erste { border-color:#2E6B4F; background:#F1F7F3; }
.sw-zeile.sw-letzte { background:#FBF2F3; }
.sw-nr { font-weight:600; color:#8A7B78; text-align:center; }
.sw-name b { display:block; font-weight:600; line-height:1.25; }
.sw-name small { display:block; color:#6B5B57; font-size:.86rem; line-height:1.35; margin-top:.1rem; }
.sw-balken { height:9px; border-radius:5px; background:#EFE4E0; overflow:hidden; }
.sw-balken i { display:block; height:100%; background:#8C2F4A; border-radius:5px; }
@media (max-width:480px){
.sw-zeile { grid-template-columns:22px 1fr 54px; gap:.5rem; }
.sw-name small { font-size:.8rem; }
}
/* ---- stolaschule ---- */
.st-werkzeug { border:1px solid var(--linie,#E8DDD5); border-radius:10px; overflow:hidden;
margin:1.8rem 0 2rem; background:var(--grund-erhoben,#fff); }
.st-kopf { background:var(--grund-tief,#FAF4EF); padding:1rem 1.2rem; border-bottom:1px solid var(--linie,#E8DDD5); }
.st-kopf b { display:block; font-size:1.12rem; }
.st-kopf span { display:block; font-size:.86rem; color:var(--tinte-leise,#8A7B78); margin-top:.2rem; }
.st-teil { padding:1rem 1.2rem; border-bottom:1px solid var(--linie,#E8DDD5); }
.st-teil:last-child { border-bottom:0; }
.st-etikett { margin:0 0 .6rem; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--tinte-leise,#8A7B78); font-weight:600; }
.st-zweck { display:flex; flex-wrap:wrap; gap:.45rem; }
.st-zweck button { border:1px solid var(--linie,#E8DDD5); background:#fff; cursor:pointer;
padding:.5rem .8rem; border-radius:999px; font:inherit; font-size:.94rem; color:var(--tinte,#3A2E2C); }
.st-zweck button[aria-pressed="true"] { background:var(--tinte,#3A2E2C); color:#fff; border-color:var(--tinte,#3A2E2C); }
.st-arten { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.7rem; }
.st-art { border:1px solid var(--linie,#E8DDD5); border-radius:8px; padding:.6rem; cursor:pointer;
background:#fff; text-align:left; font:inherit; color:var(--tinte,#3A2E2C); }
.st-art[aria-pressed="true"] { border-color:var(--tinte,#3A2E2C); box-shadow:0 0 0 1px var(--tinte,#3A2E2C); }
.st-art svg { display:block; width:100%; height:auto; margin-bottom:.4rem; }
.st-art b { display:block; font-size:.94rem; }
.st-art small { color:var(--tinte-leise,#8A7B78); font-size:.8rem; }
.st-art.st-empfohlen { background:#F7FAF6; }
.st-marke { display:inline-block; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
background:#EEF5EC; color:#3F5A38; padding:.08rem .35rem; border-radius:4px; margin-left:.3rem; }
.st-folge { display:flex; gap:.5rem; overflow-x:auto; padding:0 0 .4rem; margin:0 0 1rem;
scroll-snap-type:x proximity; }
.st-folge figure { margin:0; flex:0 0 118px; text-align:center; position:relative;
border:1px solid var(--linie,#E8DDD5); border-radius:8px; padding:.4rem .3rem .5rem; background:#fff;
scroll-snap-align:start; }
.st-folge svg { display:block; width:100%; height:auto; }
.st-folge figcaption { font-size:.76rem; line-height:1.35; color:var(--tinte,#3A2E2C); margin-top:.25rem; }
.st-nr { position:absolute; left:.3rem; top:.3rem; width:20px; height:20px; border-radius:50%;
background:var(--tinte,#3A2E2C); color:#fff; font-size:.76rem; line-height:20px; font-weight:600; }
.st-anleitung { display:block; }
.st-schritte { margin:0; padding-left:1.2rem; }
.st-schritte li { margin:.35rem 0; line-height:1.5; }
.st-schritte li.st-aktiv { font-weight:600; }
.st-fakten { display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; margin:.8rem 0 0; padding:0; list-style:none;
font-size:.88rem; }
.st-fakten li b { color:var(--tinte-leise,#8A7B78); font-weight:600; font-size:.76rem;
letter-spacing:.1em; text-transform:uppercase; display:block; }
.st-tipp { margin:.9rem 0 0; padding:.75rem .9rem; border-radius:6px; background:var(--grund-tief,#FAF4EF);
border-left:4px solid var(--champagner,#D9BBA4); }
.st-hinweis { font-size:.84rem; color:var(--tinte-leise,#8A7B78); margin:.9rem 0 0; }
/* Auf 375 Pixel Bildbreite bleiben im Kasten 299 Pixel. Drei Schritte
müssen dort ohne Wischen zu sehen sein, sonst übersieht man den
dritten: 3 × 92 + 2 × 6,4 = 289. Die vierteilige Trageweise scrollt
dann sichtbar an — das angeschnittene Bild ist der Hinweis darauf. */
@media (max-width:600px){
.st-folge { gap:.4rem; }
.st-folge figure { flex-basis:92px; padding:.35rem .2rem .4rem; }
.st-folge figcaption { font-size:.7rem; }
.st-nr { width:17px; height:17px; line-height:17px; font-size:.68rem; left:.2rem; top:.2rem; }
}
/* ---- verwandte ---- */
.ha-verwandt{margin:2.6rem 0 1rem}
.ha-verwandt h2{margin:0 0 1rem;font-size:1.22rem;line-height:1.3}
.ha-verwandt ul{margin:0;padding:0;list-style:none;display:grid;gap:1.1rem;
grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.ha-verwandt a{display:block;text-decoration:none;color:inherit}
.ha-verwandt-bild{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:10px;
background:#EFE4E0;margin-bottom:.5rem}
.ha-verwandt-bild img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .35s ease}
.ha-verwandt a:hover .ha-verwandt-bild img{transform:scale(1.04)}
.ha-verwandt-titel{display:block;font-size:1rem;line-height:1.35;color:#2E2426}
.ha-verwandt a:hover .ha-verwandt-titel{color:#8C2F4A}
.ha-verwandt-ohne.ha-ersatz-0{background:linear-gradient(135deg,#EFE0E4,#E3D5D0)}
.ha-verwandt-ohne.ha-ersatz-1{background:linear-gradient(135deg,#E7E0EF,#D8D3E0)}
.ha-verwandt-ohne.ha-ersatz-2{background:linear-gradient(135deg,#EFE8E0,#E0D6C8)}
.ha-verwandt-ohne.ha-ersatz-3{background:linear-gradient(135deg,#E0E9EF,#CFDCE3)}
.ha-verwandt-ohne.ha-ersatz-4{background:linear-gradient(135deg,#EFE4E0,#E3CFD5)}
@media (max-width:520px){
.ha-verwandt ul{grid-template-columns:1fr 1fr;gap:.85rem}
.ha-verwandt-titel{font-size:.95rem}
}
/* ---- verweise ---- */
.hawz-verweise{margin:2.4rem 0 1rem;padding:1.2rem 1.35rem;border:1px solid #E3D5D0;border-radius:14px;
background:linear-gradient(180deg,#FFFDFC,#FBF7F6)}
.hawz-verweise h2{margin:0 0 .8rem;font-size:1.16rem;line-height:1.3}
.hawz-verweise ul{margin:0;padding:0;list-style:none;display:grid;gap:.85rem;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.hawz-verweise li{font-size:.99rem;line-height:1.45;color:#5A4B48}
.hawz-verweise li a{color:#8C2F4A;text-decoration:none}
.hawz-verweise li a:hover{text-decoration:underline}
.hawz-verweise-fuss{margin:1rem 0 0;font-size:.94rem;color:#6B5B57}
/* ---- weitergeben ---- */
.wg-block { margin:2rem 0 1.4rem; padding:1rem 1.1rem; border:1px solid var(--linie,#E8DDD5);
border-radius:10px; background:var(--grund-tief,#FAF4EF); }
.wg-block p { margin:0 0 .6rem; font-size:.95rem; color:var(--tinte,#3A2E2C); }
.wg-block p b { font-weight:600; }
.wg-reihe { display:flex; flex-wrap:wrap; gap:.5rem; }
.wg-knopf { display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
border:1px solid var(--linie,#E8DDD5); background:#fff; color:var(--tinte,#3A2E2C);
padding:.55rem .9rem; border-radius:999px; font:inherit; font-size:.94rem; cursor:pointer;
line-height:1.2; }
.wg-knopf:hover, .wg-knopf:focus-visible { border-color:var(--akzent,#8C2F4A);
background:#FDF6F8; outline:none; }
.wg-knopf svg { width:17px; height:17px; flex:0 0 17px; }
.wg-wa svg { fill:#25D366; }
.wg-gemeldet { color:#2E6B4F; font-weight:600; }
/* Wo das Gerät ein eigenes Teilen-Menü mitbringt, steht es vorn und
trägt die Farbe; die einzelnen Wege daneben werden zur Nebenrolle. */
.wg-teilen { border-color:var(--tinte,#3A2E2C); background:var(--tinte,#3A2E2C); color:#fff; }
.wg-teilen:hover, .wg-teilen:focus-visible { background:#241C1A; border-color:#241C1A; }
.wg-hat-menue .wg-wa, .wg-hat-menue .wg-knopf:not(.wg-teilen) { font-size:.9rem; }
@media (max-width:420px){ .wg-knopf { flex:1 1 100%; justify-content:center; } }
/* ---- werkzeuge ---- */
.hawz{--rand:#E3D5D0;--grund:#FFFDFC;--akzent:#8C2F4A;--champagner:#B99268;
--ja:#2E6B4F;--nein:#A32E38;--vielleicht:#9A6B12;
margin:2.2rem 0;border:1px solid var(--rand);border-radius:14px;background:var(--grund);
overflow:hidden;font-size:1.06rem;line-height:1.55}
.hawz *{box-sizing:border-box}
.hawz-kopf{background:linear-gradient(180deg,#fff,#FBF7F6);padding:1.1rem 1.3rem .9rem;border-bottom:1px solid var(--rand)}
.hawz-kopf h3{margin:0 0 .25rem;font-size:1.24rem;line-height:1.3}
.hawz-kopf p{margin:0;color:#6B5B57;font-size:.99rem}
.hawz-koerper{padding:1.2rem 1.3rem 1.4rem}
.hawz-frage{margin:0 0 1rem;font-size:1.16rem;font-weight:600;line-height:1.35}
.hawz-hilfe{margin:-.6rem 0 1rem;color:#6B5B57;font-size:.97rem}
.hawz-wahl{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.hawz-knopf{display:block;width:100%;min-height:56px;padding:.85rem 1rem;text-align:left;
border:2px solid var(--rand);border-radius:11px;background:#fff;cursor:pointer;
font:inherit;font-size:1.04rem;color:#2E2426;transition:border-color .15s,background .15s}
.hawz-knopf:hover,.hawz-knopf:focus-visible{border-color:var(--akzent);background:#FDF6F8;outline:none}
.hawz-knopf b{display:block;font-weight:600}
.hawz-knopf span{display:block;color:#6B5B57;font-size:.93rem;margin-top:.15rem}
/* Knöpfe mit Skizze: Bild links, Text rechts. Ein Ausschnitt ist eine
Form — als Wort muss man ihn übersetzen, als Umriss erkennt man ihn.
Die Zeichnungen wurden gerendert und angesehen, bevor sie hier
stehen (Muster 9 in FEHLERMUSTER.md). */
.hawz-knopf.mit-bild{display:flex;align-items:center;gap:.8rem;text-align:left}
.hawz-knopf.mit-bild svg{flex:0 0 64px;width:64px;height:auto;display:block}
.hawz-knopf.mit-bild .bh-wort{flex:1 1 auto}
.hawz-knopf.mit-bild .bh-wort span{margin-top:.1rem}
.bh-schwester{margin:1.1rem 0 0;padding:.9rem 1rem;border-radius:10px;background:#F7F4F3;
border-left:6px solid var(--champagner)}
.bh-schwester p{margin:0 0 .5rem}
.bh-schwester p:last-child{margin:0}
.bh-schwester select{font:inherit;padding:.35rem .5rem;border:1px solid var(--rand);
border-radius:7px;background:#fff;color:#2E2426}
.bh-schwester label{font-weight:600}
#bh-schwester-satz{padding:.6rem .75rem;border-radius:8px;background:#F1F7F3}
.hawz-schritte{display:flex;gap:.35rem;margin:0 0 1rem;padding:0;list-style:none}
.hawz-schritte li{height:6px;flex:1;border-radius:3px;background:#EFE4E0}
.hawz-schritte li.an{background:var(--akzent)}
.hawz-zurueck{margin-top:1.1rem;background:none;border:0;padding:.5rem .2rem;color:var(--akzent);
cursor:pointer;font:inherit;font-size:1rem;text-decoration:underline}
.hawz-antwort{border-radius:11px;padding:1.1rem 1.2rem;margin:0 0 1.1rem;border-left:6px solid #ccc;background:#F7F4F3}
.hawz-antwort.ja{border-left-color:var(--ja);background:#F1F7F3}
.hawz-antwort.nein{border-left-color:var(--nein);background:#FBF2F3}
.hawz-antwort.vielleicht{border-left-color:var(--vielleicht);background:#FCF7EC}
.hawz-antwort .satz{font-size:1.22rem;font-weight:600;line-height:1.35;margin:0 0 .5rem}
.hawz-antwort p{margin:.5rem 0 0}
.hawz-liste{margin:.9rem 0 0;padding-left:1.15rem}
.hawz-liste li{margin:.35rem 0}
.hawz-feld{display:block;margin:0 0 1rem}
.hawz-feld label{display:block;font-weight:600;margin-bottom:.3rem}
.hawz-feld input,.hawz-feld select{width:100%;max-width:340px;min-height:52px;padding:.6rem .8rem;
font:inherit;font-size:1.08rem;border:2px solid var(--rand);border-radius:10px;background:#fff}
.hawz-feld input:focus,.hawz-feld select:focus{border-color:var(--akzent);outline:none}
.hawz-tabelle{width:100%;border-collapse:collapse;margin:1rem 0 0;font-size:1rem}
.hawz-tabelle th,.hawz-tabelle td{padding:.5rem .6rem;border-bottom:1px solid var(--rand);text-align:left}
.hawz-tabelle th{background:#FBF7F6;font-weight:600}
.hawz-tabelle tr.treffer td{background:#F7EEF1;font-weight:600}
.hawz-hinweis{margin:1.2rem 1.3rem 1.3rem;padding:.9rem 1rem;background:#FBF7F6;border:1px solid var(--rand);
border-radius:10px;font-size:.95rem;color:#5A4B48;line-height:1.5}
.hawz-hinweis b{color:#3A2E2C}
.hawz-ohne-js{padding:1rem 1.3rem;color:#6B5B57}
.hawz-marke{display:inline-block;padding:.15rem .5rem;border-radius:6px;background:#EFE4E0;font-size:.9rem;margin-right:.35rem}
/* ---- Tafeln: dieselbe Anmutung wie die Pinterest-Grafiken ----
Wer über einen Pin kommt, sieht die Übersicht wieder, die ihn
hergeführt hat — darunter das Werkzeug, das sie persönlich macht. */
.hatafel{margin:1.8rem 0;display:grid;gap:.55rem}
.hatafel-zeile{display:flex;align-items:flex-start;gap:1rem;background:#fff;
border:1px solid #EFE4E0;border-left:0;border-radius:0 10px 10px 0;padding:.95rem 1.1rem;position:relative}
.hatafel-zeile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:9px;
background:var(--balken,#B99268);border-radius:2px 0 0 2px}
.hatafel-zeile.ja{--balken:#2E6B4F}
.hatafel-zeile.nein{--balken:#A32E38}
.hatafel-zeile.vielleicht{--balken:#9A6B12}
.hatafel-punkt{flex:0 0 42px;height:42px;border-radius:50%;margin-left:.4rem;
border:1px solid rgba(0,0,0,.12)}
.hatafel-text{flex:1;min-width:0}
.hatafel-text b{display:block;font-family:var(--schrift-titel,Georgia,serif);
font-size:1.16rem;font-weight:600;line-height:1.3;color:#2E2426}
.hatafel-text span{display:block;margin-top:.2rem;font-size:1rem;line-height:1.45;color:#6B5B57}
.hatafel-zeile.betont .hatafel-text b{color:#8C2F4A}
/* Zeitstrahl */
.hastrahl{margin:1.8rem 0;padding-left:0;list-style:none;position:relative}
.hastrahl::before{content:"";position:absolute;left:126px;top:14px;bottom:14px;
width:3px;background:#EFE4E0}
.hastrahl li{display:flex;align-items:flex-start;gap:1.1rem;margin:0 0 1.15rem;position:relative}
.hastrahl .wann{flex:0 0 104px;text-align:right;font-weight:600;color:#8C2F4A;
font-size:1rem;padding-top:.15rem}
.hastrahl .punkt{flex:0 0 22px;height:22px;border-radius:50%;background:#8C2F4A;
margin-top:.15rem;position:relative;z-index:1;border:3px solid #FBF7F6}
.hastrahl .was{flex:1;font-family:var(--schrift-titel,Georgia,serif);font-size:1.1rem;
line-height:1.35;color:#2E2426;padding-top:.05rem}
.hastrahl .was small{display:block;font-family:inherit;font-size:.95rem;color:#6B5B57;margin-top:.15rem}
@media (max-width:560px){
.hatafel-text b{font-size:1.06rem}
.hastrahl::before{left:86px}
.hastrahl .wann{flex:0 0 66px;font-size:.92rem}
}
@media (max-width:560px){
.hawz{font-size:1.02rem;border-radius:10px}
.hawz-wahl{grid-template-columns:1fr}
.hawz-kopf h3{font-size:1.14rem}
}
/* ---- wetterblick ---- */
.wb-monate{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.wb-monate .hawz-knopf{min-height:46px;text-align:center}