/* Schwungstunden, Fassung 3: Ergänzungen für die Blogbeiträge und die Blogseite (Auftrag 208, 18.10.2026).
   Lädt zusätzlich zu stil.css und nur auf den Seiten in beitraege\. Alles mit dem Vorsatz bt-, damit nichts mit stil.css
   zusammenstößt. Farben kommen aus den Bereichsfarben in stil.css (--st-haupt, --st-satt, --st-hell, --st-knopf).
   Fließtext 1.05rem, also rund 19 Pixel; Zeilen höchstens rund 68 Zeichen (max-width 31em, gemessen); kein Inline-Stil;
   Knöpfe und Klappzeilen mindestens 48 Pixel hoch. Gebaut wird von werkzeug\bauen3-beitraege.py. */

/* Kopf des Beitrags */
.bt-artikel{max-width:1000px}
.bt-kopf{max-width:40em;margin:4px 0 18px}
.bt-kopf h1{margin:0 0 .35em}
.bt-meta{margin:0;color:var(--tinte2);font-weight:600}
.bt-bild{margin:0 0 26px}
.bt-bild__img{width:100%;border-top:8px solid var(--st-satt);border-radius:var(--rund);background:var(--st-hell)}

/* Der Text: groß, ruhig, nicht zu breit */
.bt-text{max-width:31em;font-size:1.05rem;line-height:1.65}
.bt-text p,.bt-text li{overflow-wrap:break-word}
.bt-text h2{margin:1.6em 0 .5em;scroll-margin-top:16px}
.bt-text h2::before{content:"";display:block;width:56px;height:6px;margin:0 0 12px;border-radius:3px;background:var(--st-satt)}
.bt-text h3{margin:1.3em 0 .4em;font-size:1.2rem}
.bt-text ul,.bt-text ol{padding:0 0 0 1.3em}
.bt-text li{margin:0 0 .5em}
.bt-text li::marker{color:var(--st-haupt);font-weight:700}
.bt-text a{color:var(--st-haupt);font-weight:600}
.bt-lead{font-size:1.15rem;line-height:1.6}
.bt-kurz{font-weight:700;color:var(--st-haupt)}

/* Sicherheit zuerst: oben, der erste Satz sichtbar, der Rest zum Aufklappen (Regel 15 Punkt 9) */
.bt-sicher{margin:22px 0 28px;padding:18px 20px 14px;background:var(--hinweis);border:2px solid var(--zart);border-left:8px solid var(--tinte);border-radius:var(--rund)}
.bt-text .bt-sicher__titel{margin:0 0 .4em;font-size:1.25rem}
.bt-text .bt-sicher__titel::before{display:none}
.bt-sicher p{margin:0 0 .6em}
.bt-sicher__klappe summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-height:48px;cursor:pointer;list-style:none}
.bt-sicher__klappe summary::-webkit-details-marker{display:none}
.bt-sicher__satz{flex:1 1 16em}
.bt-sicher__mehr{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:2px solid var(--tinte);border-radius:999px;background:var(--flaeche);font-weight:700;font-size:1rem}
.bt-sicher__mehr::after{content:"";width:9px;height:9px;margin-top:-4px;border-right:3px solid var(--tinte);border-bottom:3px solid var(--tinte);transform:rotate(45deg)}
.bt-sicher__klappe[open] .bt-sicher__mehr::after{transform:rotate(225deg);margin-top:4px}
.bt-sicher__klappe[open] .bt-sicher__mehr{font-size:0}
.bt-sicher__klappe[open] .bt-sicher__mehr::before{content:"Weniger";font-size:1rem}
.bt-sicher__liste{margin:10px 0 4px}

/* Inhaltsverzeichnis ab vier Zwischenüberschriften, zugeklappt */
.bt-inhalt{margin:0 0 26px}
.bt-inhalt__klappe{background:var(--flaeche);border:2px solid var(--zart);border-radius:var(--rund)}
.bt-inhalt__klappe summary{display:flex;align-items:center;min-height:56px;padding:0 18px;font-weight:700;cursor:pointer;list-style:none}
.bt-inhalt__klappe summary::-webkit-details-marker{display:none}
.bt-inhalt__klappe summary::after,.bt-klappe summary::after,.bt-frage summary::after,.bt-quellen summary::after{content:"";flex:none;margin-left:auto;width:12px;height:12px;margin-top:-6px;border-right:3px solid var(--tinte);border-bottom:3px solid var(--tinte);transform:rotate(45deg)}
.bt-inhalt__klappe[open] summary::after,.bt-klappe[open] summary::after,.bt-frage[open] summary::after,.bt-quellen[open] summary::after{transform:rotate(225deg);margin-top:6px}
.bt-inhalt__klappe ol{margin:0;padding:0 18px 14px 2.4em}
.bt-inhalt__klappe li{margin:0 0 .3em}
.bt-inhalt__klappe a{display:inline-block;padding:6px 0;min-height:44px}

/* Kästen im Text */
.bt-hinweis{margin:18px 0;padding:14px 18px 6px;background:var(--st-hell);border-radius:var(--rund)}
.bt-hinweis p{margin:0 0 .6em}
.bt-liste{margin:20px 0;padding:16px 20px 8px;background:var(--flaeche);border:2px solid var(--zart);border-left:8px solid var(--st-satt);border-radius:var(--rund)}
.bt-liste__titel{margin:0 0 .4em;font-family:var(--kopf-schrift);font-weight:600;font-size:1.2rem}
.bt-tabelle{margin:18px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.bt-tabelle table{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.45}
.bt-tabelle th,.bt-tabelle td{padding:10px 12px;border:1px solid var(--zart);text-align:left;vertical-align:top}
.bt-tabelle thead th{background:var(--st-hell)}
.bt-tabelle tbody th{font-weight:600}

/* Klappen im Text und Häufige Fragen */
.bt-klappe,.bt-frage{margin:12px 0;background:var(--flaeche);border:2px solid var(--zart);border-radius:var(--rund)}
.bt-klappe summary,.bt-frage summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 18px;font-weight:700;cursor:pointer;list-style:none}
.bt-klappe summary::-webkit-details-marker,.bt-frage summary::-webkit-details-marker{display:none}
.bt-klappe__inhalt,.bt-frage__antwort{padding:0 18px 6px}

/* Landeplatz: ein Angebot, ruhig, einmal (Regel 15 Punkt 5) */
.bt-lande{margin:26px 0 30px;padding:22px 22px 10px;background:var(--st-hell);border-top:8px solid var(--st-satt);border-radius:var(--rund)}
.bt-text .bt-lande__titel{margin:0 0 .4em;font-size:1.35rem}
.bt-text .bt-lande__titel::before{display:none}
.bt-lande__zeile{font-weight:600}
.bt-lande .knoepfe{margin:16px 0 12px}
.bt-text .bt-lande .knopf{color:var(--st-knopftext);font-weight:700}
.bt-text .bt-lande .knopf--rand{color:var(--tinte)}

/* Quellen mit dem gezeichneten Pfeil darüber, zugeklappt (Regel 15 Punkt 4) */
.bt-quellhinweis{display:flex;align-items:flex-end;gap:10px;margin:36px 0 4px;color:var(--st-haupt)}
.bt-quellhinweis .pfeil{order:2;flex:none;width:110px;height:auto}
.bt-quellhinweis__satz{order:1;margin:0 0 12px;font-family:var(--kopf-schrift);font-weight:600;font-size:1.1rem}
.bt-quellen{margin:0 0 10px;background:var(--flaeche);border:2px solid var(--zart);border-radius:var(--rund);font-size:1rem}
.bt-quellen summary{display:flex;align-items:center;gap:.6em;min-height:60px;padding:0 18px;font-weight:700;cursor:pointer;list-style:none}
.bt-quellen summary::-webkit-details-marker{display:none}
.bt-quellen__zahl{display:inline-flex;align-items:center;justify-content:center;min-width:1.8em;height:1.8em;border-radius:999px;background:var(--st-hell);color:var(--tinte)}
.bt-quellen__vorsatz{margin:0;padding:0 18px 8px;color:var(--tinte2)}
.bt-quellen__liste{margin:0;padding:0 18px 16px 2.2em;line-height:1.5}
.bt-quellen__liste li{margin:0 0 .6em;overflow-wrap:anywhere}
.bt-text .ziffer{color:var(--st-haupt)}

/* Karten: Blogseite groß, unter dem Beitrag klein */
.bt-karten{list-style:none;display:grid;gap:22px;margin:0 0 20px;padding:0}
@media (min-width:760px){.bt-karten{grid-template-columns:repeat(2, minmax(0, 1fr));gap:28px}}
.bt-karte{display:flex}
/* Auftrag 229: kein overflow:hidden am Kartenlink (Text darf bei 200 Prozent Zoom nicht abgeschnitten werden); nur die
   Bildzone schneidet, mit dem inneren Radius (16 minus Rand 2) */
.bt-karte__link{display:flex;flex-direction:column;width:100%;min-height:100%;background:var(--flaeche);border:2px solid var(--zart);border-radius:var(--rund);text-decoration:none;color:var(--tinte);box-shadow:var(--schatten)}
.bt-karte__link:hover .bt-karte__titel{text-decoration:underline}
.bt-karte__bild{display:block;overflow:hidden;border-radius:14px 14px 0 0;background:var(--st-hell);border-bottom:6px solid var(--st-satt)}
.bt-karte__img{width:100%;aspect-ratio:16 / 9;object-fit:cover}
.bt-karte__text{display:flex;flex-direction:column;flex:1;padding:18px 20px 18px}
.bt-karte__dach{font-weight:700;color:var(--st-haupt);font-size:1rem}
.bt-karte__titel{margin:.3em 0 .4em;font-family:var(--kopf-schrift);font-weight:600;font-size:1.3rem;line-height:1.25;color:var(--tinte)}
.bt-karte__satz{display:block;margin:0 0 14px;line-height:1.55}
.bt-karte__mehr{display:inline-flex;align-items:center;gap:8px;margin-top:auto;min-height:44px;font-weight:700;color:var(--st-haupt)}
.bt-karte--aus{display:none}
.bt-karten--klein .bt-karte__titel{font-size:1.15rem}
.bt-weiter{margin:40px 0 10px;max-width:1000px}
.bt-weiter h2::before{content:"";display:block;width:56px;height:6px;margin:0 0 12px;border-radius:3px;background:var(--st-satt)}

/* Blogseite: Kopf und Filter */
.bt-blogkopf{max-width:35em;margin:4px 0 22px}
.bt-blogkopf h1{margin:0 0 .4em}
.bt-blogkopf__satz{font-size:1.1rem;line-height:1.6}
.bt-blogkopf__satz a{color:var(--st-haupt);font-weight:700}
.bt-filter{display:none;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.js .bt-filter{display:flex}
.bt-filter__knopf{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border:2px solid var(--tinte);border-radius:999px;background:var(--flaeche);color:var(--tinte);font:700 1rem var(--lauf-schrift);cursor:pointer}
/* Auftrag 229: der gedrückte Filter zeigt einen Haken vor dem Wort, nicht nur die Farbe (Bildschirmleser lesen den Haken
   nicht, sie sagen "gedrückt" aus aria-pressed) */
.bt-filter__knopf[aria-pressed="true"]{background:var(--tinte);color:var(--flaeche)}
.bt-filter__knopf[aria-pressed="true"]::before{content:"\2713";content:"\2713" / "";margin-right:8px;font-weight:700}
.bt-filter__knopf:hover{text-decoration:underline}

/* Druck: alles aufgeklappt, ohne Kopf, Fläche oben und Griff */
@media print{
  .umbenannt,.kopf,.griff,.bt-filter,.anruf,.fuss,.zurueck,.bt-weiter,.bt-quellhinweis .pfeil{display:none !important}
  .bt-text{max-width:none;font-size:11pt}
  .bt-sicher__mehr{display:none}
}