/* community-check.de — "Menschen und Verbindung"
   Weisser Grund, tiefes Beere als Hauptfarbe, Koralle als Wärmeakzent.
   Bewusst weder das Indigo von terrassenbeschattung (258) noch das Teal von
   buero-laufband (198) — dieses Projekt liegt bei Hue 325/16.
   Keine externen Requests, keine Webfonts.
   Struktur übernommen vom terrassenbeschattung-Muster (Design-Check 17.08.2026:
   breiter Rahmen, schmale Textspalte, gemessene Kontraste). */

:root {
  --grund: #ffffff;
  --flaeche: #f8f5f7;
  --flaeche-warm: #fbf6f2;
  --text: #221a20;
  --text-schwach: #635a61;
  --linie: #e6dde3;
  --linie-stark: #cfc2ca;

  --schatten: #5c1f45;          /* tiefes Beere, Hauptakzent */
  --schatten-mid: #96607f;
  --schatten-hell: #f5eaf1;
  --licht: #ef8f63;             /* Koralle, nur Flächen und Linien */
  --licht-stark: #c95425;       /* dekorative Icons, Rahmen — UI-Kontrast */
  /* Für TEXT ist die helle Koralle zu schwach (AA verlangt 4,5:1). Alles
     Lesbare nutzt deshalb den dunkleren Ton (gegen Weiß gerechnet ≥ 4,5:1,
     Muster übernommen aus dem Design-Check terrassenbeschattung 17.08.2026). */
  --licht-text: #9c3f14;
  --licht-hell: #fdeee5;

  --warn: #b3341f;
  --warn-hell: #fdeeeb;
  --ok: #2f6b46;

  --breit: 1140px;
  --schmal: 640px;
  --radius: 10px;
  --schrift-kopf: "Bahnschrift", "Avenir Next Condensed", "Segoe UI Semibold",
                  "Arial Narrow", system-ui, sans-serif;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.125rem;   /* 18 px — Messung Design-Check: mit 17 px lagen
                            83 Zeichen in der Zeile, Optimum sind 45–75 */
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(100% - 2.5rem, var(--breit)); margin-inline: auto; }

h1, h2, h3, h4 { font-family: var(--schrift-kopf); line-height: 1.2; letter-spacing: .01em; }
h1 { font-size: clamp(1.95rem, 1.4rem + 2.2vw, 3rem); margin: 0 0 .6em; }
h2 { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.95rem); margin: 2.4em 0 .7em; }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem); margin: 1.9em 0 .5em; }
p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: .45em; }
strong { font-weight: 650; }

a { color: var(--schatten); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--licht-text); }
:focus-visible { outline: 3px solid var(--licht-stark); outline-offset: 2px; border-radius: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--schatten); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; color: #fff; }

.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; }
.h-ic { color: var(--licht-stark); margin-right: .4rem; }

/* --- Kopf ----------------------------------------------------------------
   Menuepunkte tragen nowrap: die Kopfnavigation bricht NIE innerhalb eines
   Punktes um (Befund 17.08.2026 — vier von sechs Punkten waren zweizeilig und
   der Kopf dadurch 76 px hoch). Reicht der Platz nicht, uebernimmt das
   Burger-Menue. Beim Aendern im Browser nachmessen. */
.kopf { background: var(--grund); position: sticky; top: 0; z-index: 50;
        border-bottom: 1px solid var(--linie); }
/* Lichtkante: schmaler Bernstein-Verlauf als Markenzeichen */
.kopf::before { content: ""; display: block; height: 3px;
                background: linear-gradient(90deg, var(--licht-stark) 0%, var(--licht) 38%,
                            var(--schatten-mid) 100%); }
.kopf-innen { display: flex; align-items: center; gap: 1.25rem; min-height: 64px; }

.marke { display: inline-flex; align-items: center; gap: .6rem; color: var(--text);
         text-decoration: none; flex: none; }
.marke-zeichen { display: grid; place-items: center; width: 38px; height: 38px;
                 border-radius: 50%; background: var(--licht-hell);
                 border: 1px solid #f5d3c0; }
.marke-ic { width: 22px; height: 22px; color: var(--licht-stark); }
.marke-text { display: flex; flex-direction: column; line-height: 1.05; }
.marke-haupt { font-family: var(--schrift-kopf); font-size: 1.12rem; letter-spacing: .005em; }
.marke-schwach { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
                 color: var(--text-schwach); }
.marke:hover .marke-haupt { color: var(--schatten); }

.nav { margin-left: auto; }
.nav > ul { display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav > ul > li > a { display: block; padding: .55rem .7rem; font-size: .96rem;
         white-space: nowrap; text-decoration: none; color: var(--text);
         border-radius: 6px; border-bottom: 2px solid transparent; }
.nav > ul > li > a:hover { color: var(--schatten); border-bottom-color: var(--licht); }
.nav > ul > li > a[aria-current] { color: var(--schatten); font-weight: 620;
                       border-bottom-color: var(--licht-stark); }

/* --- Untermenues ----------------------------------------------------------
   Panels oeffnen per :hover UND :focus-within — damit funktionieren sie ohne
   JavaScript und sind mit der Tastatur bedienbar. Der Schalter daneben ist
   fuer Touch (dort gibt es kein Hover) und fuer Screenreader.
   Bewusst kein Mega-Menue: drei Hubs mit 3-7 Seiten tragen kein Panel ueber
   die volle Seitenbreite (Entscheidung 17.08.2026). */
.nav-punkt { position: relative; }
.nav-punkt.hat-panel > a { padding-right: .35rem; }
.nav-pfeil { width: 15px; height: 15px; margin-left: .15rem; vertical-align: -.18em;
             color: var(--text-schwach); transition: transform .16s ease; }
.panel-schalter { display: none; }

.panel {
  /* Rechtsbündig: Die Navigation sitzt am rechten Rand, linksbündige Panels
     ragten bis 600 px aus dem Fenster (gemessen 17.08.2026). */
  position: absolute; top: calc(100% + 6px); right: -.4rem; left: auto; z-index: 60;
  min-width: 268px; max-width: 320px; padding: 1rem 1.1rem .8rem;
  background: var(--grund); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: 0 14px 34px rgba(27, 29, 41, .13);
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-punkt.hat-panel:hover > .panel,
.nav-punkt.hat-panel:focus-within > .panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-punkt.hat-panel:hover > a .nav-pfeil,
.nav-punkt.hat-panel:focus-within > a .nav-pfeil { transform: rotate(180deg); }

.panel-titel { font-family: var(--schrift-kopf); font-size: .82rem;
               text-transform: uppercase; letter-spacing: .09em;
               color: var(--licht-text); margin: 0 0 .55rem; }
.panel ul { display: block; list-style: none; margin: 0 0 .3rem; padding: 0; }
.panel.panel-zwei { min-width: 480px; max-width: 540px; }
.panel.panel-zwei ul { columns: 2; column-gap: 1.6rem; }
.panel li { margin: 0; break-inside: avoid; }
.panel li a { display: block; padding: .42rem .5rem; border-radius: 6px;
              font-size: .95rem; color: var(--text); text-decoration: none;
              white-space: normal; }
.panel li a:hover { background: var(--schatten-hell); color: var(--schatten); }
.panel-alle { display: inline-flex; align-items: center; gap: .3rem;
              margin-top: .5rem; padding: .42rem .5rem; font-size: .88rem;
              color: var(--schatten); font-weight: 600; text-decoration: none;
              border-top: 1px solid var(--linie); width: 100%; padding-top: .7rem; }
.panel-alle:hover { color: var(--licht-text); }
.panel-ic { width: 1em; height: 1em; }

.burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--linie);
          border-radius: 8px; background: none; cursor: pointer; padding: 11px 10px; }
.burger span { display: block; height: 2px; background: var(--text); border-radius: 2px; }
.burger span + span { margin-top: 5px; }

@media (max-width: 920px) {
  .burger { display: block; }
  .nav { display: none; width: 100%; order: 3; margin: 0; }
  .nav.offen { display: block; padding-bottom: .8rem; }
  .nav > ul { flex-direction: column; gap: 0; }
  .nav > ul > li > a { padding: .85rem .6rem; border-bottom: 1px solid var(--linie);
                       border-radius: 0; }
  .nav > ul > li > a[aria-current] { border-bottom-color: var(--linie);
                         box-shadow: inset 3px 0 0 var(--licht-stark); }
  .kopf-innen { flex-wrap: wrap; }

  /* Akkordeon: Hauptpunkt bleibt ein Link zur Hub-Seite, der Schalter daneben
     klappt die Unterpunkte auf. Ohne JavaScript sind die Panels offen — dann
     ist die Navigation eine vollständige Liste statt einer toten Fläche. */
  .nav-punkt.hat-panel { display: grid; grid-template-columns: 1fr auto;
                         border-bottom: 1px solid var(--linie); }
  .nav-punkt.hat-panel > a { border-bottom: 0; }
  .nav-punkt.hat-panel > a .nav-pfeil { display: none; }
  .panel-schalter { display: grid; place-items: center; width: 48px; height: 48px;
                    background: none; border: 0; cursor: pointer;
                    color: var(--text-schwach); }
  .panel-schalter .nav-pfeil { width: 20px; height: 20px; }
  .panel-schalter[aria-expanded="true"] .nav-pfeil { transform: rotate(180deg); }

  .panel { position: static; grid-column: 1 / -1; max-width: none;
           opacity: 1; visibility: visible;
           transform: none; box-shadow: none; border: 0; border-radius: 0;
           min-width: 0; padding: .2rem 0 .8rem .9rem;
           background: var(--flaeche); display: none; }
  .panel.panel-zwei { min-width: 0; }
  .panel.panel-zwei ul { columns: 1; }
  .panel-schalter[aria-expanded="true"] + .panel { display: block; }
  .panel li a { padding: .6rem .5rem; }
  html:not(.js) .panel { display: block; }
}

/* --- Brotkrumen ---------------------------------------------------------- */
.krumen { font-size: .88rem; color: var(--text-schwach); padding: .9rem 0 0; }
.krumen a { color: var(--text-schwach); display: inline-block; padding: .18rem 0; }
.krumen-trenner { margin: 0 .45rem; color: var(--linie-stark); }

/* --- Artikel-Layout ------------------------------------------------------
   Der Inhaltsbereich ist so breit wie der Header (1140 px) — ein Sprung auf
   640 px liess das Layout unruhig wirken (Feedback Thomas 17.08.2026).
   Damit die Zeilen trotzdem lesbar bleiben, laeuft der Fliesstext in einer
   eigenen Spalte; daneben steht die Sprungnavigation. Volle Breite bekommen
   Kopfbereich, Bilder und Tabellen. */
.artikel { width: min(100% - 2.5rem, var(--breit)); margin: 1.6rem auto 4.5rem; }
.artikel-breit { width: min(100% - 2.5rem, var(--breit)); margin: 1.6rem auto 4.5rem; }

.artikel-kopf { max-width: 62rem; }

/* Seiten ohne Raster (Startseite, Über uns, Rechtstexte, Datenseiten) tragen
   ihren Text direkt in .artikel. Ohne diese Grenze liefen dort 143 Zeichen je
   Zeile — der Rahmen bleibt 1140 px breit, der Lesetext nicht. */
.artikel > p, .artikel > ul, .artikel > ol, .artikel > h2, .artikel > h3,
.artikel > .kasten, .artikel > .faq, .artikel > .quellen,
.artikel-breit > p, .artikel-breit > ul, .artikel-breit > h2, .artikel-breit > h3,
.artikel-breit > .kasten { max-width: 40rem; }
/* Volle Breite behalten die Elemente, die sie brauchen */
.artikel > .kachelgrid, .artikel > .fig, .artikel > .tab-huelle,
.artikel > .weiterlesen, .artikel > .fussblock, .artikel > .artikel-raster,
.artikel > .artikel-kopf, .artikel-breit > .tab-huelle,
.artikel-breit > .daten-meta, .artikel-breit > .weiterlesen { max-width: none; }
.artikel-raster { display: grid; grid-template-columns: minmax(0, 1fr) 264px;
                  gap: 3.2rem; align-items: start; }
.artikel-raster.ohne-neben { grid-template-columns: minmax(0, 1fr); }
/* Der Container nutzt die volle Rasterspalte; begrenzt wird der LESETEXT.
   Vorher lag die Grenze am Container — dadurch brauchten Tabellen einen
   Scrollbalken, obwohl daneben 185 px frei waren (gemessen 18.08.2026:
   Spalte 825 px, Tabelle 796 px, Container 640 px). */
.artikel-haupt { max-width: none; }
.artikel-haupt > p, .artikel-haupt > ul, .artikel-haupt > ol,
.artikel-haupt > h2, .artikel-haupt > h3, .artikel-haupt > h4,
.artikel-haupt > .kasten, .artikel-haupt > .kurz, .artikel-haupt > .cta,
.artikel-haupt > .faq, .artikel-haupt > .quellen, .artikel-haupt > .fussblock,
.artikel-haupt > .anzeige-hinweis, .artikel-haupt > .finder { max-width: 40rem; }

/* Breite Elemente duerfen die ganze Spalte nutzen — dort ist Breite ein
   Gewinn, kein Lesbarkeitsproblem. */
.artikel-haupt > .tab-huelle, .artikel-haupt > .tab-hinweis,
.artikel-haupt > .tab-note, .artikel-haupt > .fig,
.artikel-haupt > .weiterlesen, .artikel-haupt > .ssg { max-width: none; }

.artikel-raster.ohne-neben .artikel-haupt > p,
.artikel-raster.ohne-neben .artikel-haupt > ul,
.artikel-raster.ohne-neben .artikel-haupt > ol,
.artikel-raster.ohne-neben .artikel-haupt > h2,
.artikel-raster.ohne-neben .artikel-haupt > h3 { max-width: 40rem; }

/* Sprungnavigation als Randspalte, die beim Scrollen stehen bleibt */
.artikel-neben { position: sticky; top: 88px; }
.artikel-neben .toc { margin: 0; }
.artikel-neben .toc ol { font-size: .93rem; }

/* Weiterlesen-Karten duerfen zweispaltig laufen, Tabellen bleiben in der
   Textspalte (sie scrollen bei Bedarf, dafuer gibt es den Scroll-Hinweis).
   Ein Ausbrechen unter die sticky Randspalte wuerde sich mit ihr ueberlagern. */
.artikel-haupt > .weiterlesen .wl-liste {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

@media (max-width: 1000px) {
  .artikel-raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .artikel-neben { position: static; margin: 0 0 2.2rem; order: -1; }
  .artikel-haupt, .artikel-raster.ohne-neben .artikel-haupt { max-width: 40rem; }
}
.eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem;
           text-transform: uppercase; letter-spacing: .09em; color: var(--licht-text);
           font-weight: 650; margin: 0 0 .7rem; }
.intro { font-size: 1.16rem; color: #3d2f39; }

.kurz { background: var(--flaeche-warm); border-left: 4px solid var(--licht);
        padding: 1.1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; margin: 0 0 2rem; }
.kurz p:last-child { margin-bottom: 0; }
.kurz-titel { font-family: var(--schrift-kopf); font-size: 1.02rem; margin: 0 0 .35rem;
              display: flex; align-items: center; gap: .4rem; }

/* Sprungnavigation */
.toc { border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.2rem;
       margin: 0 0 2.2rem; background: var(--flaeche); }
.toc p { font-family: var(--schrift-kopf); margin: 0 0 .5rem; font-size: 1rem; }
.toc ol { margin: 0; padding-left: 1.2em; font-size: .96rem; }
.toc li { margin-bottom: .3em; }
.toc a { display: inline-block; padding: .15rem 0; }

/* --- Kaesten ------------------------------------------------------------- */
.kasten { border-radius: var(--radius); padding: 1.05rem 1.25rem; margin: 1.9rem 0;
          border: 1px solid var(--linie); background: var(--flaeche); }
.kasten-titel { display: flex; align-items: center; gap: .45rem; font-family: var(--schrift-kopf);
                font-size: 1.02rem; margin: 0 0 .5rem; }
.kasten-text > :last-child { margin-bottom: 0; }
.kasten-info { background: var(--schatten-hell); border-color: #d3d3ea; }
.kasten-info .kasten-titel { color: var(--schatten); }
.kasten-warnung { background: var(--warn-hell); border-color: #f2ccc4; }
.kasten-warnung .kasten-titel { color: var(--warn); }
.kasten-tipp { background: var(--licht-hell); border-color: #f5d3c0; }
.kasten-tipp .kasten-titel { color: var(--licht-text); }
.kasten-norm { background: #fff; border-left: 4px solid var(--schatten-mid); }
.kasten-norm .kasten-titel { color: var(--schatten); }

/* --- Tabellen ------------------------------------------------------------ */
.tab-huelle { overflow-x: auto; margin: 1.9rem 0; border: 1px solid var(--linie);
              border-radius: var(--radius); }
.tab-huelle:focus-visible { outline: 3px solid var(--licht-stark); }
table { border-collapse: collapse; width: 100%; font-size: .96rem; }
caption { text-align: left; padding: .85rem 1rem; font-family: var(--schrift-kopf);
          font-size: 1.02rem; border-bottom: 1px solid var(--linie); }
th, td { padding: .62rem .8rem; text-align: left; border-bottom: 1px solid var(--linie);
         vertical-align: top; hyphens: auto; }
thead th { background: var(--flaeche); font-size: .88rem; text-transform: uppercase;
           letter-spacing: .04em; color: var(--text-schwach); white-space: nowrap; }
tbody th { font-weight: 620; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
.tab-sticky tbody th { position: sticky; left: 0; background: var(--grund);
                       box-shadow: 1px 0 0 var(--linie); }
.tab-sticky thead th:first-child { position: sticky; left: 0; z-index: 2;
                                   background: var(--flaeche); }
/* Datenseiten tragen viele Spalten — etwas kompakter, damit weniger gescrollt
   werden muss. Bleibt mit 15,3 px deutlich über der Lesbarkeitsgrenze. */
.artikel-breit table { font-size: .85rem; }
.artikel-breit th, .artikel-breit td { padding: .55rem .7rem; }
.tab-note { font-size: .88rem; color: var(--text-schwach); margin: -1.3rem 0 1.9rem; }

/* Scroll-Hinweis: nur wenn die Tabelle wirklich breiter ist als ihr Container
   (main.js setzt .scrollt). Ohne Signal merkt auf Mobil niemand, dass rechts
   noch Spalten stehen — Befund Design-Check 17.08.2026. */
.tab-huelle { position: relative; }
.tab-huelle.scrollt::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 42px;
  pointer-events: none; border-radius: 0 var(--radius) var(--radius) 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.94));
}
.tab-hinweis { display: none; font-size: .85rem; color: var(--text-schwach);
               margin: -1.3rem 0 1.9rem; align-items: center; gap: .35rem; }
.tab-huelle.scrollt + .tab-hinweis { display: flex; }
.tab-hinweis .ic { width: 1em; height: 1em; color: var(--licht-text); }

/* --- Bilder -------------------------------------------------------------- */
.fig { margin: 2.2rem 0; }
.fig-bild { position: relative; }
.fig img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.ki-badge { position: absolute; right: .6rem; bottom: .6rem; background: rgba(27,29,41,.82);
            color: #fff; font-size: .72rem; letter-spacing: .04em; padding: .25rem .5rem;
            border-radius: 5px; }
.fig figcaption { font-size: .89rem; color: var(--text-schwach); margin-top: .6rem; }

/* --- Sonnenstandsgrafik -------------------------------------------------- */
.ssg { margin: 2.4rem 0; }
.ssg svg { width: 100%; height: auto; background: var(--flaeche); border-radius: var(--radius); }
.ssg-t { font-family: var(--schrift); font-size: 13px; fill: var(--text-schwach); }
.ssg-mitte { text-anchor: middle; }
.ssg figcaption { font-size: .89rem; color: var(--text-schwach); margin-top: .6rem; }
@media (max-width: 640px) { .ssg-t { font-size: 17px; } }

/* --- FAQ ----------------------------------------------------------------- */
.faq { margin: 3rem 0 0; }
.faq h2 { display: flex; align-items: center; }
.faq-punkt { border-top: 1px solid var(--linie); padding: 1.1rem 0; }
.faq-punkt h3 { margin: 0 0 .4rem; font-size: 1.08rem; }
.faq-punkt > div > :last-child { margin-bottom: 0; }

/* --- Quellen, Weiterlesen ------------------------------------------------ */
.quellen { margin: 3rem 0 0; font-size: .93rem; }
.quellen ol { color: var(--text-schwach); }
.quellen a { display: inline-block; padding: .15rem 0; }
.quellen-note { color: var(--text-schwach); font-size: .87rem; }
.weiterlesen { margin: 3rem 0 0; }
.wl-liste { list-style: none; padding: 0; display: grid; gap: .8rem;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.wl-liste a { display: block; border: 1px solid var(--linie); border-radius: var(--radius);
              padding: 1rem 1.15rem; text-decoration: none; color: var(--text); height: 100%; }
.wl-liste a:hover { border-color: var(--schatten-mid); background: var(--flaeche); }
.wl-titel { display: block; font-family: var(--schrift-kopf); font-size: 1.06rem;
            color: var(--schatten); margin-bottom: .25rem; }
.wl-text { display: block; font-size: .93rem; color: var(--text-schwach); }
.wl-ic { color: var(--licht-stark); margin-top: .5rem; }

/* --- Partner-Komponenten ------------------------------------------------- */
.anzeige-hinweis { font-size: .87rem; color: var(--text-schwach); display: flex;
                   align-items: flex-start; gap: .45rem; background: var(--flaeche);
                   border-radius: 8px; padding: .7rem .9rem; }
.cta { border: 1px solid #f5d3c0; background: var(--licht-hell); border-radius: var(--radius);
       padding: 1.3rem 1.4rem; margin: 2.4rem 0; }
.cta-titel { font-family: var(--schrift-kopf); font-size: 1.16rem; margin: 0 0 .4rem; }
.cta-text { margin-bottom: 1rem; }
.cta-fein, .cta-anzeige { font-size: .82rem; color: var(--text-schwach); margin: .6rem 0 0; }
.knopf { display: inline-flex; align-items: center; gap: .4rem; background: var(--schatten);
         color: #fff; text-decoration: none; padding: .75rem 1.25rem; border-radius: 8px;
         font-weight: 600; }
.knopf:hover { background: #471735; color: #fff; }
.knopf-ic { width: 1.1em; height: 1.1em; }
.knopf-schlicht { background: transparent; color: var(--schatten);
                  border: 1.5px solid var(--schatten); }
.knopf-schlicht:hover { background: var(--schatten); color: #fff; }

.fussblock { border-top: 2px solid var(--linie); margin: 3.5rem 0 0; padding: 1.6rem 0 0; }
.fb-titel { display: flex; align-items: center; font-family: var(--schrift-kopf);
            font-size: 1.1rem; margin: 0 0 .5rem; }
.fussblock p { color: var(--text-schwach); font-size: .97rem; }
.fussblock strong { color: var(--text); }

/* --- Startseite ---------------------------------------------------------- */
.hero { background: linear-gradient(180deg, var(--flaeche) 0%, var(--grund) 100%);
        border-bottom: 1px solid var(--linie); padding: 3rem 0 2.6rem; }
.hero-innen { display: grid; gap: 2.4rem; grid-template-columns: 1.05fr .95fr;
              align-items: center; }
.hero h1 { margin-bottom: .4em; }
.hero-text { font-size: 1.14rem; color: #3d2f39; }
@media (max-width: 900px) { .hero-innen { grid-template-columns: 1fr; } }

.kachelgrid { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem;
              grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.kachel { border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.3rem;
          background: var(--grund); }
.kachel h3 { margin: .2rem 0 .4rem; }
.kachel h3 a { text-decoration: none; }
.kachel p { font-size: .95rem; color: var(--text-schwach); margin-bottom: .6rem; }
.kachel-ic { color: var(--licht-stark); width: 1.7em; height: 1.7em; }
.kachel ul { list-style: none; padding: 0; margin: 0; font-size: .93rem; }
.kachel li { margin-bottom: .25em; }

.band { background: var(--flaeche); padding: 3rem 0; margin: 3.5rem 0 0; }
.band-innen > h2 { margin-top: 0; }

/* --- Fragenverzeichnis --------------------------------------------------- */
.fragenliste { list-style: none; padding: 0; }
.fragenliste li { border-bottom: 1px solid var(--linie); font-size: .98rem; }
.fragenliste a { display: block; padding: .6rem 0; }
.fragen-hub { margin-top: 2.4rem; }

/* --- Datenseiten --------------------------------------------------------- */
.daten-meta { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
              background: var(--flaeche); border-radius: var(--radius); padding: 1.2rem 1.3rem;
              margin: 2rem 0; font-size: .93rem; }
.daten-meta dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
                 color: var(--text-schwach); }
.daten-meta dd { margin: .15rem 0 0; font-weight: 600; }

/* --- Fuss ---------------------------------------------------------------- */
.fuss { background: var(--schatten); color: #dfe0f0; margin-top: 4.5rem; padding: 3rem 0 1.5rem; }
.fuss a { color: #fff; }
.fuss-innen { display: grid; gap: 2.2rem; grid-template-columns: 1.5fr 1fr 1fr; }
.fuss-marke { display: flex; align-items: center; gap: .5rem; font-family: var(--schrift-kopf);
              font-size: 1.12rem; color: #fff; margin: 0 0 .6rem; }
.fuss-ic { color: var(--licht); }
.fuss-text { font-size: .92rem; color: #dcc4d2; }
.fuss-titel { font-family: var(--schrift-kopf); color: #fff; margin: 0 0 .6rem; }
.fuss-spalte ul { list-style: none; padding: 0; margin: 0; font-size: .94rem; }
.fuss-spalte li { margin-bottom: .15em; }
.fuss-spalte a { display: inline-block; padding: .25rem 0; }
.fuss-unten { border-top: 1px solid #825270; margin-top: 2.4rem; padding-top: 1.2rem;
              display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
              font-size: .88rem; color: #ccadc0; }
.fuss-unten p { margin: 0; }
@media (max-width: 760px) { .fuss-innen { grid-template-columns: 1fr; gap: 1.8rem; } }

/* --- Druckausgabe --------------------------------------------------------
   Ein Ratgeber wird ausgedruckt oder als PDF gespeichert — vor dem Gang in
   den Baumarkt oder für das Gespräch mit dem Fachbetrieb. Ohne diese Regeln
   landen Navigation, Partnerblock und Sprungmarken mit auf dem Papier.
   Befund Design-Check 17.08.2026. */
@media print {
  :root { --grund: #fff; }
  body { font-size: 11pt; line-height: 1.5; color: #000; background: #fff; }

  .kopf, .burger, .nav, .skip, .toc, .fussblock, .cta, .anzeige-hinweis,
  .weiterlesen, .fuss, .krumen { display: none !important; }

  .artikel, .artikel-breit, .wrap { width: 100%; max-width: 100%; margin: 0; }
  h1 { font-size: 20pt; }
  h2 { font-size: 14pt; margin-top: 1.4em; page-break-after: avoid; }
  h3 { font-size: 12pt; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  /* Kästen und Tabellen nicht über Seiten reißen */
  .kasten, .kurz, .fig, .tab-huelle { page-break-inside: avoid; break-inside: avoid; }
  .tab-huelle { overflow: visible; border: 1px solid #999; }
  .tab-huelle.scrollt::after, .tab-hinweis { display: none; }
  table { font-size: 9.5pt; }
  thead { display: table-header-group; }

  /* Zielangabe bei externen Links, damit die Quelle auf Papier nachvollziehbar
     bleibt. Interne Links bleiben unkommentiert. */
  .quellen a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt;
                                    word-break: break-all; color: #444; }
  a { color: #000; text-decoration: underline; }

  .fig img { max-width: 100%; }
  .ki-badge { border: 1px solid #999; color: #000; background: #fff; }
}

/* --- Schmale Geräte -------------------------------------------------------
   Muss am DATEIENDE stehen: Eine Media Query erhöht die Spezifität nicht, und
   .artikel wird weiter oben mit derselben Spezifität definiert — im Kopf der
   Datei wäre diese Regel wirkungslos (Befund Design-Check 17.08.2026).
   Grund: Mit 2.5rem Rand blieben auf 375 px nur ~39 Zeichen je Zeile. */
@media (max-width: 560px) {
  .wrap { width: min(100% - 1.75rem, var(--breit)); }
  .artikel { width: min(100% - 1.75rem, var(--schmal)); }
  .artikel-breit { width: min(100% - 1.75rem, var(--breit)); }
}

/* --- Beschattungs-Finder --------------------------------------------------
   Ohne JavaScript bleibt das Formular verborgen (hidden) und die vollstaendige
   Systemtabelle darunter sichtbar — eine tote Filterleiste waere schlechter
   als gar keine (Portfolio-Lernpunkt aus bbq-ratgeber). */
.finder { margin: 2rem 0 2.6rem; }
.finder-frage { border: 1px solid var(--linie); border-radius: var(--radius);
                padding: 1rem 1.2rem; margin: 0 0 1rem; }
.finder-frage legend { font-family: var(--schrift-kopf); font-size: 1.02rem;
                       padding: 0 .4rem; }
.finder-frage label { display: block; padding: .45rem 0; cursor: pointer; }
.finder-frage input { margin-right: .5rem; accent-color: var(--schatten); }

.finder-anzahl { font-family: var(--schrift-kopf); font-size: 1.1rem;
                 margin: 1.6rem 0 .8rem; }
.finder-karte { border: 1px solid var(--linie); border-left: 4px solid var(--licht);
                border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 0 0 1rem; }
.finder-karte h3 { margin: 0 0 .4rem; font-size: 1.12rem; }
.finder-karte p { margin-bottom: .8rem; }
.finder-fakten { display: grid; gap: .5rem 1.4rem; margin: 0 0 .6rem;
                 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                 font-size: .92rem; }
.finder-fakten dt { font-size: .78rem; text-transform: uppercase;
                    letter-spacing: .05em; color: var(--text-schwach); }
.finder-fakten dd { margin: .1rem 0 0; }
.finder-partner { margin: .8rem 0 0; display: flex; align-items: center; gap: .6rem;
                  flex-wrap: wrap; }
.finder-partner .cta-anzeige { margin: 0; }

/* --- Finder-Knopf in der Kopfzeile ---------------------------------------
   Der Finder ist ein Werkzeug, kein Themenbereich — deshalb abgesetzt statt
   als weiterer Menuepunkt. Er war nach dem Bau an KEINER Stelle verlinkt und
   damit faktisch unauffindbar (Befund 18.08.2026). */
.nav-werkzeug > a { display: inline-flex !important; align-items: center; gap: .3rem;
                    margin-left: .5rem; padding: .5rem .85rem !important;
                    background: var(--schatten); color: #fff !important;
                    border-radius: 7px; font-weight: 600;
                    border-bottom: 0 !important; }
.nav-werkzeug > a:hover { background: #471735; color: #fff !important;
                          border-bottom-color: transparent !important; }
.nav-werkzeug-ic { width: 1em; height: 1em; }

@media (max-width: 920px) {
  .nav-werkzeug > a { margin: .6rem 0 0; justify-content: center; }
}


/* --- Empfehlungs-Karten (Startseite) ------------------------------------- */
.reco-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
              gap: 1rem; list-style: none; margin: 1.2rem 0 0; padding: 0; }
.reco-karte { border: 1px solid var(--linie); border-radius: var(--radius);
              background: var(--flaeche-warm); padding: 1.1rem 1.2rem;
              display: flex; flex-direction: column; }
.reco-karte p { margin: 0 0 .7em; font-size: .97rem; }
.reco-titel { font-family: var(--schrift-kopf); font-size: 1.06rem;
              color: var(--schatten); display: flex; align-items: center; gap: .45rem; }
.reco-karte .reco-knopf { margin-top: auto; }
.reco-karte .knopf { font-size: .93rem; padding: .6rem 1rem; }
.reco-karte .cta-anzeige { display: inline-block; margin-left: .5rem; }

/* --- Gebuehren-Rechner ---------------------------------------------------- */
.rechner { border: 1px solid var(--linie); border-radius: var(--radius);
           background: var(--flaeche); padding: 1.2rem 1.3rem; margin: 1.4rem 0; }
.rechner-eingaben { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                    gap: 1rem; margin-bottom: .9rem; }
.rechner-eingaben label { display: flex; flex-direction: column; gap: .35rem;
                          font-weight: 620; font-size: .95rem; }
.rechner-eingaben input { padding: .55rem .7rem; border: 1px solid var(--linie-stark);
                          border-radius: 8px; font: inherit; background: var(--grund);
                          min-height: 44px; }
.rechner-fein { font-weight: 400; color: var(--text-schwach); }
.rechner-umsatz { font-weight: 620; color: var(--schatten); }
.rechner-limit { display: inline-block; font-size: .8rem; font-weight: 620;
                 color: var(--warn); background: var(--warn-hell);
                 border-radius: 5px; padding: .1rem .45rem; margin-left: .4rem; }

/* --- Fragenverzeichnis ---------------------------------------------------- */
.fragen-block h2 { margin-top: 1.6em; }
.fragen-block ul { list-style: none; padding: 0; }
.fragen-block li { border-bottom: 1px solid var(--linie); }
.fragen-block li a { display: block; padding: .55rem .2rem; text-decoration: none; }
.fragen-block li a:hover { background: var(--schatten-hell); }


/* =========================================================================
   Individuelle Handschrift (Vorgabe Thomas 18.08.2026): weg vom generischen
   Baukasten-Look. Kern-Elemente: Marker-Unterstreichung, harte Schatten auf
   Knoepfen und Karten (leicht handgemachter Charakter), nummerierte
   Empfehlungskarten, eigener Hero. Alle Bloecke stehen bewusst am Dateiende
   (Media-Query-Falle: spaete Regeln gewinnen bei gleicher Spezifitaet).
   ========================================================================= */

/* --- Marker: Koralle-Unterstreichung wie mit dem Textmarker --------------- */
.marker { background: linear-gradient(transparent 58%, var(--licht-hell) 58%, var(--licht-hell) 92%, transparent 92%);
          box-decoration-break: clone; -webkit-box-decoration-break: clone; }
h1 .marker { background: linear-gradient(transparent 62%, #f8c9ab 62%, #f8c9ab 94%, transparent 94%); }

/* --- Knoepfe: harter Versatz-Schatten statt Standard-Pille ---------------- */
.knopf { border-radius: 7px; box-shadow: 3px 3px 0 var(--licht);
         transition: transform .12s ease, box-shadow .12s ease; }
.knopf:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--licht-stark); }
.knopf:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--licht-stark); }
.knopf.knopf-schlicht { background: var(--grund); color: var(--schatten);
                        border: 1.5px solid var(--schatten);
                        box-shadow: 3px 3px 0 var(--schatten-hell); }
.knopf.knopf-schlicht:hover { box-shadow: 4px 4px 0 var(--linie-stark); color: var(--schatten); }

/* --- Hero (Startseite) ---------------------------------------------------- */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
        gap: 2.5rem; align-items: center; padding: 2.6rem 0 1.4rem; }
.hero h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.35rem); letter-spacing: .005em;
           margin-bottom: .45em; }
.hero-text { font-size: 1.14rem; max-width: 34rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin: 1.3rem 0 1.5rem; }
.hero-fakten { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
               margin: 0; padding: .9rem 0 0; border-top: 1px dashed var(--linie-stark);
               font-size: .92rem; color: var(--text-schwach); }
.hero-fakten li { margin: 0; }
.hero-fakten .ic { color: var(--licht-stark); }
.hero-grafik svg { width: 100%; height: auto; max-width: 400px; display: block;
                   margin-inline: auto; }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 1.2rem; padding-top: 1.6rem; }
  .hero-grafik { order: -1; }
  .hero-grafik svg { max-width: 240px; }
}

/* --- Empfehlungskarten: nummeriert, mit Versatz-Schatten ------------------ */
.reco-liste { counter-reset: reco; }
.reco-karte { position: relative; counter-increment: reco; border-radius: 8px;
              border: 1.5px solid var(--schatten); background: var(--grund);
              box-shadow: 4px 4px 0 var(--schatten-hell);
              padding: 1.2rem 1.2rem 1.1rem; }
.reco-karte::before { content: counter(reco, decimal-leading-zero);
              position: absolute; top: -1px; right: -1px;
              font-family: var(--schrift-kopf); font-size: .8rem; letter-spacing: .08em;
              color: var(--licht-text); background: var(--licht-hell);
              border: 1.5px solid var(--schatten); border-radius: 0 8px 0 8px;
              padding: .18rem .55rem; }
.reco-karte:nth-child(2n) { transform: rotate(.35deg); }
.reco-karte:nth-child(2n+1) { transform: rotate(-.3deg); }
.reco-karte:hover { transform: none; box-shadow: 5px 5px 0 var(--licht-hell); }

/* --- Abschnitts-Ueberschriften: Koralle-Tick statt nackter H2 ------------- */
.artikel-haupt > h2, .artikel > h2 { position: relative; padding-left: .95rem; }
.artikel-haupt > h2::before, .artikel > h2::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .12em; width: 5px;
  background: linear-gradient(180deg, var(--licht-stark), var(--licht));
  border-radius: 3px; }
.faq > h2 { padding-left: 0; }
.faq > h2::before { display: none; }

/* --- Kurz-gesagt-Kasten: editorialer, weniger Baukasten ------------------- */
.kurz { border: none; border-left: 5px solid var(--licht-stark);
        background: var(--flaeche-warm); border-radius: 0 var(--radius) var(--radius) 0; }

/* --- Listen: Koralle-Marker ----------------------------------------------- */
.artikel-haupt ul:not(.wl-liste):not(.hero-fakten) > li::marker { color: var(--licht-stark); }
.artikel-haupt ol > li::marker { color: var(--licht-text); font-weight: 650;
                                 font-family: var(--schrift-kopf); }

/* --- Tabellen: Kopf in Beere, erste Spalte betont -------------------------- */
.tab-huelle thead th { background: var(--schatten); color: #fff;
                       border-color: var(--schatten); }
.tab-huelle tbody th[scope="row"] { background: var(--flaeche-warm); }

/* --- Rechner: technischer Look mit Beere-Rahmen ---------------------------- */
.rechner { border: 1.5px solid var(--schatten); box-shadow: 5px 5px 0 var(--schatten-hell); }


/* =========================================================================
   Design-Feedback Thomas 18.08.2026 (zweite Runde)
   ========================================================================= */

/* Buttons: Textfarbe hart garantieren — .wl-liste-Styles hatten die
   .knopf-Farbe in den Empfehlungskarten ueberschrieben (unlesbar). Die Karten
   haengen jetzt nicht mehr an .wl-liste; der Riegel hier verhindert, dass
   irgendein Kontext-Style das je wieder kippt. */
a.knopf, a.knopf:visited { color: #fff; }
a.knopf:hover { color: #fff; }
a.knopf.knopf-schlicht, a.knopf.knopf-schlicht:visited,
a.knopf.knopf-schlicht:hover { color: var(--schatten); }

/* Hero-Hintergrund auf volle Viewport-Breite (Vorgabe Thomas). Der Band-Trick
   laeuft ueber negative Viewport-Raender; overflow-x: clip verhindert die
   horizontale Scrollleiste. */
body { overflow-x: clip; }
.hero { position: relative; padding: 3rem 0 2rem; }
.hero::before { content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1;
  background: linear-gradient(160deg, var(--schatten-hell) 0%, var(--flaeche-warm) 45%, #ffffff 100%);
  border-bottom: 1px solid var(--linie); }

/* Empfehlungskarten: eigenes Grid (war vorher ueber .wl-liste geerbt) */
.reco-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
              gap: 1.1rem; list-style: none; margin: 1.2rem 0 0; padding: 0; }


/* Feedback-Runde 3 (18.08.2026): Hero-Band als echtes Vollbreiten-Element
   statt 50vw-Pseudo-Trick — der erzeugte eine harte Farbkante an der
   Content-Grenze. Gradient bewusst rein vertikal (keine seitliche Varianz). */
.hero::before { content: none; }
.hero-band { background: linear-gradient(180deg, var(--schatten-hell) 0%,
             var(--flaeche-warm) 55%, #ffffff 100%);
             border-bottom: 1px solid var(--linie); }
.hero-wrap { width: min(100% - 2.5rem, var(--breit)); margin-inline: auto; }
.hero { padding: 3rem 0 2.2rem; }

/* Startseite: Fliesstext ueber die volle Content-Breite (Vorgabe Thomas) —
   die 40rem-Begrenzung gilt nur noch auf den Artikel-Seiten. */
.artikel-raster.voll .artikel-haupt > p,
.artikel-raster.voll .artikel-haupt > ul,
.artikel-raster.voll .artikel-haupt > ol,
.artikel-raster.voll .artikel-haupt > h2,
.artikel-raster.voll .artikel-haupt > h3,
.artikel-raster.voll .artikel-haupt > .kasten,
.artikel-raster.voll .artikel-haupt > .kurz,
.artikel-raster.voll .artikel-haupt > .cta,
.artikel-raster.voll .artikel-haupt > .faq,
.artikel-raster.voll .artikel-haupt > .quellen,
.artikel-raster.voll .artikel-haupt > .anzeige-hinweis { max-width: none; }


/* Feedback-Runde 3b: Die vom terrassenbeschattung-Muster geerbte .hero-Regel
   trug einen EIGENEN Gradient in Content-Breite — er malte ueber das
   Vollbreiten-Band und erzeugte die Kanten an beiden Seiten. Hintergrund
   liegt jetzt ausschliesslich auf .hero-band. */
.hero { background: none; border: none; }