/* Immobilien im Enzkreis, in der CI von immo75.de
   Farben: Weiß als Fläche, CI-Grün #4DAD32 für Grafik, #35801F für Text und Knöpfe,
   Überschriften #0C0F26. Schriften Antonio (Überschriften, Versalien) und
   PT Sans Narrow (Text), lokal eingebunden, keine Verbindung zu Google. */

@font-face{font-family:'Antonio';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/Antonio-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Antonio';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/Antonio-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Antonio';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/Antonio-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Antonio';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/Antonio-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'PT Sans Narrow';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/PTSansNarrow-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'PT Sans Narrow';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/PTSansNarrow-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'PT Sans Narrow';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/PTSansNarrow-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'PT Sans Narrow';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/PTSansNarrow-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --papier:#FFFFFF;
  --papier-2:#F6F9F4;
  --papier-3:#E6EEE2;
  --tinte:#0C0F26;
  --tinte-2:#585C62;
  --tinte-3:#7A7F85;
  --linie:#E3E8E0;
  --linie-2:#C5CFC0;
  --gruen:#4DAD32;          /* CI-Grün, für Grafik und Flächen */
  --akzent:#35801F;         /* dasselbe Grün dunkler, für Text und Knöpfe (4,9 : 1) */
  --akzent-dunkel:#2A6B17;
  --gruen-hell:#DDEED8;
  --gruen-auf-dunkel:#8CD66F;
  --nacht:#0C0F26;
  --nacht-2:#161A36;
  --nacht-3:#272C4A;
  --fuss:#06080F;
  --auf-nacht:#EEF1F4;
  --auf-nacht-2:#AAB1BA;
  --wasser:#5B9BC8;
  --ok:#2A6B17; --ok-hell:#E3F1DE;
  --fehler:#8A1C1C; --fehler-hell:#FBEAEA;
  --text:'PT Sans Narrow','Arial Narrow',Arial,sans-serif;
  --titel:'Antonio','Arial Narrow',Impact,sans-serif;
  --radius:0;
  --schatten:0 1px 2px rgba(12,15,38,.05),0 12px 30px -14px rgba(12,15,38,.18);
  --rand:clamp(16px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--text);font-size:19px;line-height:1.55;letter-spacing:.016em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:var(--akzent);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--akzent-dunkel)}
:focus-visible{outline:3px solid var(--gruen);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--titel);font-weight:400;line-height:1.1;letter-spacing:.03em;margin:0;text-wrap:balance;text-transform:uppercase;color:var(--tinte)}
h1{font-size:clamp(2.5rem,5.6vw,4.4rem)}
h2{font-size:clamp(2rem,4vw,3.3rem);margin-bottom:.9rem}
h3{font-size:1.4rem;letter-spacing:.02em}
p{margin:0 0 1em}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:-9999px;top:0;z-index:200;background:var(--tinte);color:#fff;padding:.7rem 1.1rem}
.sprung:focus{left:0}

.huelle{max-width:1240px;margin-inline:auto;padding-inline:var(--rand)}
.schmal{max-width:900px}
.schmal-links>*{max-width:860px}
.abschnitt{padding-block:clamp(56px,8vw,100px)}
.abschnitt-hell{background:var(--papier-2)}
.abschnitt-dunkel{background:var(--nacht);color:var(--auf-nacht)}
.abschnitt-dunkel h2,.abschnitt-dunkel h3{color:#fff}
.kicker{font-family:var(--titel);font-weight:400;font-style:italic;font-size:1.2rem;letter-spacing:.01em;text-transform:none;color:var(--akzent);margin:0 0 .5rem}
.abschnitt-dunkel .kicker{color:var(--gruen-auf-dunkel)}
.lede{font-size:clamp(1.15rem,1.6vw,1.32rem);line-height:1.5;color:var(--tinte-2);max-width:66ch;margin:1rem 0 0}
.abschnitt-dunkel .lede{color:var(--auf-nacht-2)}
.h2-klein{font-size:clamp(1.5rem,2.4vw,1.9rem);margin-bottom:1.4rem}
.h3-abstand{margin:2.2rem 0 1.2rem}
.quelle{font-size:.88rem;color:var(--tinte-2);margin-top:1rem;max-width:95ch}
.zahl{font-variant-numeric:tabular-nums}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.85rem 1.6rem;border-radius:0;
  background:var(--akzent);color:#fff;font:400 1rem/1.2 var(--titel);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:2px solid var(--akzent);cursor:pointer;
  transition:background-color .15s,border-color .15s,transform .15s}
.knopf:hover{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel);color:#fff}
.knopf:active{transform:translateY(1px)}
.knopf-zweit{background:transparent;color:var(--tinte);border-color:var(--linie-2)}
.knopf-zweit:hover{background:var(--papier-2);border-color:var(--akzent);color:var(--akzent-dunkel)}
.abschnitt-dunkel .knopf-zweit{color:#fff;border-color:var(--nacht-3)}
.knopf-klein{min-height:40px;padding:.5rem 1.1rem;font-size:.92rem;letter-spacing:.12em}
.knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.mehr{font-weight:700;text-decoration:none;white-space:nowrap}
.mehr::after{content:" →"}
.weiter-links{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:1.2rem}

/* Kopf: deckend weiß, Logo unverändert */
.kopf{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--linie);box-shadow:0 1px 0 rgba(12,15,38,.02)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:78px}
.marke-link{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:var(--tinte)}
.logo{height:56px;width:auto}
.wortmarke{font-family:var(--titel);font-size:1.25rem;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;line-height:1;padding-left:.9rem;border-left:2px solid var(--gruen)}
.wortmarke b{font-weight:400;color:var(--akzent)}
.haupt-nav{display:flex;align-items:center;gap:1.2rem}
.nav-links{display:flex;gap:1.3rem;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--tinte);text-decoration:none;font-family:var(--titel);text-transform:uppercase;font-size:1.02rem;letter-spacing:.03em;padding:.3rem 0;border-bottom:3px solid transparent}
.nav-links a:hover,.nav-links a[aria-current]{border-bottom-color:var(--gruen);color:var(--tinte)}
.menue{display:none;position:relative}
.menue summary{list-style:none;cursor:pointer;width:46px;height:46px;border-radius:0;border:2px solid var(--linie-2);display:grid;place-content:center;gap:5px}
.menue summary::-webkit-details-marker{display:none}
.menue summary span{display:block;width:22px;height:2.5px;background:var(--akzent);border-radius:2px}
.menue ul{position:absolute;right:0;top:56px;width:min(310px,88vw);list-style:none;margin:0;padding:.5rem;background:#fff;border:1px solid var(--linie);border-radius:0;box-shadow:var(--schatten)}
.menue li a{display:block;padding:.7rem .9rem;border-radius:0;color:var(--tinte);text-decoration:none;font-weight:700}
.menue li a:hover{background:var(--papier-2);color:var(--akzent)}
@media (max-width:1180px){
  .nav-links{display:none}
  .menue{display:block}
}
.haupt-nav .knopf-klein{white-space:nowrap}
@media (max-width:640px){
  .kopf-innen{min-height:66px}
  .logo{height:44px}
  .wortmarke{font-size:1rem;padding-left:.6rem;white-space:normal;max-width:7.5em;line-height:1.05}
  .marke-link{gap:.6rem}
  .haupt-nav{gap:.5rem}
  .haupt-nav .knopf-klein{padding:.45rem .7rem;font-size:.9rem;min-height:40px}
  .menue summary{width:42px;height:42px}
}
@media (max-width:400px){
  .wortmarke{display:none}
}

/* Held */
.held{position:relative;padding-block:clamp(40px,7vw,90px) clamp(48px,7vw,96px);background:linear-gradient(180deg,#fff 0%,var(--papier-2) 100%);overflow:hidden}
.held::before{content:"";position:absolute;right:-6%;top:-10%;width:min(620px,60vw);aspect-ratio:1;pointer-events:none;opacity:.07;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M4 58 50 6l46 52z' fill='%234DAD32'/%3E%3C/svg%3E") center/contain no-repeat}
.held-raster{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center}
.held h1{font-size:clamp(3rem,7vw,5.6rem);line-height:1}
.held-unter{font-family:var(--text);font-style:italic;font-size:clamp(1.35rem,2.4vw,1.75rem);color:var(--akzent);margin:.6rem 0 0}
.ortwahl{margin-top:1.8rem;background:#fff;border:1px solid var(--linie);border-left:5px solid var(--gruen);border-radius:0;padding:16px 18px;box-shadow:var(--schatten);max-width:560px}
.ortwahl label{font-weight:700;font-size:.95rem;margin-bottom:.5rem}
.ortwahl-reihe{display:flex;gap:.6rem}
.ortwahl-reihe select{flex:1}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:1.6rem 0 0}
.chips a{display:inline-block;padding:.38rem .85rem;border-radius:999px;background:#fff;border:1px solid var(--linie-2);color:var(--tinte);text-decoration:none;font-size:.98rem;font-weight:700}
.chips a:hover{border-color:var(--akzent);color:var(--akzent)}
.chips-gross a{padding:.5rem 1rem;font-size:1.02rem}
.chip-an a{background:var(--gruen-hell);border-color:var(--gruen);color:var(--akzent-dunkel)}
.chip-aus a{color:var(--tinte-2)}

.puls{background:var(--nacht);color:var(--auf-nacht);border-radius:0;padding:clamp(22px,3vw,32px);box-shadow:0 30px 60px -30px rgba(12,15,38,.55);border-top:5px solid var(--gruen)}
.puls-titel{display:flex;align-items:center;gap:.6rem;font-family:var(--text);font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gruen-auf-dunkel);margin-bottom:1rem}
.live{width:9px;height:9px;border-radius:50%;background:var(--gruen);box-shadow:0 0 0 0 rgba(77,173,50,.6);animation:puls 2.4s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(77,173,50,.55)}70%{box-shadow:0 0 0 10px rgba(77,173,50,0)}100%{box-shadow:0 0 0 0 rgba(77,173,50,0)}}
.puls dl{margin:0}
.puls-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.8rem 0;border-top:1px solid var(--nacht-3)}
.puls-zeile:first-child{border-top:0;padding-top:0}
.puls dt{font-size:1rem;font-weight:700;color:var(--auf-nacht)}
.puls dt span{display:block;font-size:.84rem;font-weight:400;color:var(--auf-nacht-2);margin-top:.1rem}
.puls dd{margin:0;text-align:right;font-family:var(--titel);font-size:1.7rem;white-space:nowrap}
.puls-delta{display:block;font-family:var(--text);font-size:.8rem;font-weight:400;color:var(--auf-nacht-2)}
.puls-fuss{font-size:.84rem;color:var(--auf-nacht-2);margin:1.1rem 0 0;line-height:1.45}
.puls-fuss a{color:var(--auf-nacht)}

/* Absichten */
.absicht-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.absicht-vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.absicht{display:grid;gap:.35rem;padding:22px 22px 24px;border:1px solid var(--linie);border-top:4px solid var(--gruen);border-radius:var(--radius);text-decoration:none;color:var(--tinte);background:#fff;
  transition:box-shadow .15s,transform .15s}
.absicht:hover{box-shadow:var(--schatten);transform:translateY(-2px);color:var(--tinte)}
.absicht-nr{font-size:.85rem;font-weight:700;color:var(--akzent);letter-spacing:.08em}
.absicht strong{font-family:var(--titel);text-transform:uppercase;font-size:1.7rem;font-weight:400;letter-spacing:.02em}
.absicht strong::after{content:" →";color:var(--gruen)}
.absicht span:last-child{color:var(--tinte-2);font-size:1.05rem;line-height:1.45}
.absichten{padding-block:clamp(40px,6vw,64px)}

.kopfzeile{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.8rem}

/* Angebote */
.angebote{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px}
.angebot{height:100%}
.angebot-huelle{display:contents}
.angebot-huelle[hidden]{display:none}
.angebot-link{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--linie);border-radius:0;overflow:hidden;color:var(--tinte);text-decoration:none;
  transition:box-shadow .2s,transform .2s,border-color .2s}
.angebot-link:hover{box-shadow:var(--schatten);transform:translateY(-3px);border-color:var(--gruen);color:var(--tinte)}
.angebot-bild{position:relative;aspect-ratio:4/3;background:var(--papier-3)}
.angebot-bild img{width:100%;height:100%;object-fit:cover}
.bild-leer{display:block;width:100%;height:100%}
.marken{position:absolute;left:12px;top:12px;display:flex;gap:6px}
.marke{background:var(--akzent);color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.04em;padding:.25rem .6rem;border-radius:4px;text-transform:uppercase}
.marke-hell{background:#fff;color:var(--tinte)}
.angebot-text{display:flex;flex-direction:column;gap:.4rem;padding:18px 18px 20px;flex:1}
.angebot-ort{font-size:.9rem;font-weight:700;color:var(--akzent);letter-spacing:.02em;margin:0}
.angebot h3{font-family:var(--text);text-transform:none;font-size:1.2rem;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.angebot-daten{display:flex;flex-wrap:wrap;gap:.1rem .9rem;list-style:none;padding:0;margin:.1rem 0 0;font-size:.95rem;color:var(--tinte-2)}
.angebot-preis{margin:auto 0 0;padding-top:.5rem;font-family:var(--titel);font-size:1.6rem}
.angebot-preis small{font-family:var(--text);font-size:.9rem;font-weight:700;color:var(--tinte-2)}
.angebot-pflicht{margin:0;font-size:.8rem;line-height:1.4;color:var(--tinte-2)}
.angebot-weiter{margin:0;font-size:.95rem;font-weight:700;color:var(--akzent)}
.angebote-fuss{font-size:.92rem;color:var(--tinte-2);margin-top:1.4rem}
.leer{background:#fff;border:1px dashed var(--linie-2);border-radius:0;padding:24px;display:flex;gap:1.2rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.leer p{margin:0;max-width:62ch}
.filter-leiste{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.filter{display:flex;gap:.5rem;flex-wrap:wrap}
.filter-knopf{font:700 1rem var(--text);padding:.5rem 1.1rem;border-radius:999px;border:2px solid var(--linie-2);background:#fff;color:var(--tinte);cursor:pointer}
.filter-knopf[aria-pressed="true"]{background:var(--akzent);border-color:var(--akzent);color:#fff}
.filter-ort{display:flex;align-items:center;gap:.6rem}
.filter-ort label{display:block;font-weight:700}
.filter-ort select{min-width:220px}

/* Kreiskarte */
.karte-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,48px);align-items:start;margin-top:clamp(24px,4vw,40px)}
.karte-box{position:relative;background:#fff;border:1px solid var(--linie);border-radius:0;padding:clamp(6px,1.2vw,14px);overflow:hidden}
.kreiskarte{width:100%;height:auto}
.gebiet path{fill:#fff;stroke:var(--linie-2);stroke-width:1.2;stroke-linejoin:round;transition:fill .15s}
.gebiet:hover path,.gebiet:focus path{fill:var(--gruen-hell);stroke:var(--gruen)}
.gebiet-aktiv path{fill:var(--gruen);fill-opacity:.35;stroke:var(--akzent);stroke-width:2.2}
.gebiet-pf path{fill:#ECEEF1;stroke:#C9CDD3}
.gebiet-pf:hover path{fill:#DFE3E8}
.kreiskarte .fluss{fill:none;stroke:var(--wasser);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.75;pointer-events:none}
.kreiskarte .fluss-enz{stroke-width:3.2}
.kreiskarte .name{font-family:var(--text);font-weight:700;font-size:16px;fill:var(--tinte);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.kreiskarte .name-pf{font-family:var(--titel);font-size:19px;fill:#8A9099;text-transform:uppercase;letter-spacing:.08em}
.kreiskarte .name-aktiv{font-size:20px;fill:var(--akzent-dunkel)}
.kreiskarte-ortsteile .name{font-size:calc(14px * var(--s) / .5);stroke-width:calc(3px * var(--s) / .5);fill:var(--tinte-2)}
.kreiskarte-ortsteile .name-pf{font-size:calc(16px * var(--s) / .5)}
.kreiskarte-ortsteile .fluss{stroke-width:calc(2.2px * var(--s) / .5)}
.kreiskarte-ortsteile .gebiet path{stroke-width:calc(1.2px * var(--s) / .5)}
.kreiskarte-ortsteile .gebiet-aktiv path{stroke-width:calc(2.2px * var(--s) / .5);fill-opacity:.18}
.zaehler circle{fill:var(--akzent)}
.zaehler text{font-family:var(--text);font-weight:700;font-size:13px;fill:#fff;pointer-events:none}
.zaehler{pointer-events:none}
.ortsteil circle{fill:var(--akzent);stroke:#fff;stroke-width:1.5}
.ortsteil-haupt circle{fill:var(--tinte)}
.ortsteil text{font-family:var(--text);font-weight:700;fill:var(--tinte);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.ortsteil:hover circle,.ortsteil:focus circle{fill:var(--gruen)}
.buero path{fill:var(--gruen);stroke:#fff;stroke-width:1.5}
.karte-info{position:absolute;z-index:5;max-width:260px;background:var(--nacht);color:var(--auf-nacht);border-radius:0;padding:.6rem .8rem;font-size:.92rem;line-height:1.35;pointer-events:none;box-shadow:var(--schatten)}
.karte-info strong{display:block;font-size:1.05rem;color:#fff}
.karte-info em{display:block;font-style:normal;color:var(--gruen-auf-dunkel);font-size:.86rem}
.karte-gross-kreis{max-width:1000px}
.karte-klein .karte-box{padding:6px}
.gemeinde-liste{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 1.6rem}
.gemeinde-liste a{display:flex;align-items:center;gap:.5rem;padding:.42rem 0;border-bottom:1px solid var(--linie);color:var(--tinte);text-decoration:none;font-weight:700;font-size:1rem}
.gemeinde-liste a span:first-child{flex:1}
.gemeinde-liste a:hover{color:var(--akzent)}
.gemeinde-liste .zahl{color:var(--tinte-2);font-weight:400}
.gemeinde-angebote{min-width:1.5rem;height:1.5rem;border-radius:999px;background:var(--akzent);color:#fff;font-size:.8rem;display:grid;place-items:center;padding:0 .35rem}

/* Stadtteilkarte Mühlacker */
.karte{width:100%;height:auto;min-width:340px}
.karte-ausschnitt{min-width:0}
.karte .fluss{fill:none;stroke:var(--wasser);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.35}
.karte .fluss-gross{stroke-width:9;opacity:.4}
.flussname{font-family:var(--text);font-style:italic;font-size:19px;fill:var(--wasser)}
.ort{cursor:pointer}
.ort text{font-family:var(--text);font-size:21px;font-weight:700;fill:var(--tinte);paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.ort-punkt{fill:var(--akzent);fill-opacity:.9;stroke:#fff;stroke-width:2}
.ort-treffer{fill:transparent}
.ort:hover .ort-punkt,.ort:focus .ort-punkt{fill:var(--akzent-dunkel);fill-opacity:1}
.ort:hover text,.ort:focus text{fill:var(--akzent-dunkel)}
.ort-aktiv .ort-punkt{fill:var(--gruen);fill-opacity:1;stroke:var(--tinte);stroke-width:2.5}
.massstab{stroke:var(--tinte-2);stroke-width:2}
.karte .achse{font-size:16px}
.bahnhof rect{fill:var(--tinte)}
.bahnhof text{font-family:var(--text);font-size:15px;font-weight:700;fill:var(--tinte-2);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.karten-liste{list-style:none;margin:1.2rem 0 1.6rem;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:.6rem 1.6rem}
.karten-liste li{display:flex;flex-direction:column;gap:.15rem;padding:.7rem 0;border-top:1px solid var(--linie)}

/* Kacheln */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px;margin:1.8rem 0 0}
.kachel{display:flex;flex-direction:column;gap:.25rem;background:#fff;border:1px solid var(--linie);border-top:3px solid var(--gruen);border-radius:var(--radius);padding:16px 18px}
.abschnitt-hell .kachel{border-color:var(--papier-3);border-top-color:var(--gruen)}
.kachel-label{font-size:.92rem;font-weight:700;color:var(--tinte-2)}
.kachel-wert{font-family:var(--titel);font-size:clamp(1.7rem,2.8vw,2.2rem);line-height:1.05}
.kachel-wert a{font-size:1.1rem}
.kachel-zusatz{font-size:.95rem;color:var(--tinte)}
.pfeil{font-size:.7em;color:var(--tinte-2)}
.kachel-quelle{font-size:.8rem;color:var(--tinte-2);margin-top:auto;padding-top:.4rem}
.karte-klein .kacheln{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1rem;gap:10px}
.karte-klein .kachel{padding:12px 14px}
.karte-klein .kachel-wert{font-size:1.5rem}
.beispiel{background:var(--papier-2);border-left:4px solid var(--gruen);padding:.9rem 1.1rem;border-radius:0;font-size:1rem;margin-top:1.4rem}
.abschnitt-hell .beispiel,.weg-box .beispiel{background:#fff}
.hinweis-zeile{margin-top:1.4rem;color:var(--tinte-2)}

/* Balken (Grundsteuer, Mieten) */
.balken{margin:0}
.balken-liste{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.balken-liste li{display:grid;grid-template-columns:minmax(8.5em,11em) 1fr 4.2em;align-items:center;gap:.7rem;font-size:.98rem}
.balken-liste a{color:var(--tinte);text-decoration:none;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.balken-liste a:hover{color:var(--akzent)}
.balken-spur{height:14px;background:var(--papier-3);border-radius:3px;overflow:hidden}
.balken-wert{display:block;height:100%;background:var(--gruen);border-radius:3px}
.balken-zahl{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.balken-aktiv a,.balken-aktiv .balken-zahl{color:var(--akzent-dunkel)}
.balken-aktiv .balken-wert{background:var(--akzent-dunkel)}

/* Zinsen und Diagramme */
.zins-raster{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,56px);align-items:start}
.zins-raster p{color:var(--tinte-2)}
.diagramm-box{margin:1.4rem 0 0}
.diagramm-flaeche{position:relative}
.diagramm{width:100%;height:auto;overflow:visible}
.diagramm .raster{stroke:#E8EEE5;stroke-width:1}
.diagramm .basis{stroke:var(--linie-2);stroke-width:1}
.diagramm .tick{stroke:var(--linie-2)}
.diagramm .achse,.karte .achse{font-family:var(--text);font-size:13px;fill:var(--tinte-2);font-variant-numeric:tabular-nums}
.diagramm .linie{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.diagramm .endpunkt{stroke:#fff;stroke-width:2}
.diagramm .endwert{font-family:var(--text);font-size:15px;font-weight:700;fill:var(--tinte)}
.diagramm .fadenkreuz{stroke:var(--tinte-3);stroke-width:1}
.diagramm .trefferflaeche{fill:transparent;cursor:crosshair}
.legende{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;list-style:none;padding:0;margin:0 0 .6rem;font-size:.95rem;color:var(--tinte-2)}
.legende li{display:flex;align-items:center;gap:.45rem}
.schluessel{width:16px;height:3px;border-radius:2px}
.tooltip{position:absolute;top:0;z-index:5;min-width:170px;background:#fff;border:1px solid var(--linie);border-radius:0;box-shadow:var(--schatten);padding:.55rem .75rem;font-size:.9rem;pointer-events:none}
.tooltip b{display:block;margin-bottom:.25rem}
.tooltip span{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.tooltip i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:.35rem;vertical-align:middle}
.tabelle-auf{margin-top:1rem}
.tabelle-auf summary{cursor:pointer;font-weight:700;font-size:.98rem;color:var(--akzent)}
.tabelle-rahmen{overflow-x:auto;margin-top:.8rem;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:1rem;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:.55rem .8rem;border-bottom:1px solid var(--linie);white-space:nowrap}
th{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tinte-2);font-weight:700}
td:not(:first-child),th:not(:first-child){text-align:right}
.vergleich-tabelle td:first-child a{font-weight:700;text-decoration:none}
.vergleich-tabelle tbody tr:hover{background:#fff}

/* Rechner (dunkel) */
.rechner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.rechner h3{font-size:clamp(1.7rem,2.8vw,2.3rem);margin-bottom:1.4rem;color:#fff}
.rechner label,.rechner legend{font-weight:700;font-size:1rem;color:var(--auf-nacht)}
.rechner-regler{display:flex;align-items:center;gap:1rem;margin:.6rem 0 1.4rem}
.rechner-regler input{flex:1;accent-color:var(--gruen);height:32px}
.rechner-regler output{min-width:5.2em;text-align:right;font-family:var(--titel);font-size:1.4rem;font-variant-numeric:tabular-nums}
.rechner-ergebnis{background:#fff;color:var(--tinte);border-radius:0;padding:clamp(22px,3vw,34px);border-top:5px solid var(--gruen)}
.rechner-wert{display:block;font-family:var(--titel);font-size:clamp(2.2rem,4.6vw,3.2rem);line-height:1.05;margin:.3rem 0 .6rem}
.rechner-wert-text{font-size:clamp(1.6rem,3vw,2.1rem)}
.rechner-basis{color:var(--tinte-2);font-size:.98rem}
.rechner-zeile{font-weight:700;margin:0 0 .6rem}
.rechner .hinweis-zeile{color:var(--auf-nacht-2);font-size:.95rem;margin:.2rem 0 1.2rem}
.rechner .hinweis-zeile a{color:#fff}
.rechner-miete{align-items:start}
.rechner-miete .feld-reihe{margin-bottom:1rem}
.rechner-boden label,.rechner-miete>.rechner-eingabe>label{margin-bottom:1rem}
.rechner-boden .rechner-wert{font-size:clamp(2rem,3.6vw,2.7rem)}
@media (min-width:981px){.rechner-miete .rechner-ergebnis{position:sticky;top:110px}}
.rechner-mehr{margin:1.6rem 0 0;color:var(--auf-nacht-2)}
.rechner-mehr a{color:#fff}

/* Wer */
.wer-raster{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.wer-bild{width:100%;height:auto;max-width:420px;aspect-ratio:1;object-fit:cover;object-position:top;border-radius:50%;background:radial-gradient(circle at 50% 38%,var(--gruen-hell),var(--papier-3));border:6px solid #fff;box-shadow:0 0 0 3px var(--gruen)}
.plaketten{list-style:none;padding:0;margin:1.8rem 0 1.4rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.plaketten li{display:flex;flex-direction:column;border:1px solid var(--linie);border-left:4px solid var(--gruen);border-radius:0;padding:12px 16px;background:#fff}
.plaketten b{font-family:var(--titel);font-weight:400;font-size:1.7rem;color:var(--akzent)}
.plaketten span{font-size:.95rem;color:var(--tinte-2)}

/* Kanäle */
.kanaele{list-style:none;padding:0;margin:.6rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.kanaele a{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .8rem .4rem .55rem;border-radius:999px;text-decoration:none;font-weight:700;font-size:.95rem;border:1.5px solid var(--linie-2);color:var(--tinte);background:#fff}
.kanaele a:hover{border-color:var(--akzent);color:var(--akzent)}
.kanaele svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kanaele svg .voll{fill:currentColor;stroke:none}
.kanaele-dunkel a,.kanaele-hell a{background:transparent;color:var(--auf-nacht);border-color:var(--nacht-3)}
.kanaele-dunkel a:hover,.kanaele-hell a:hover{border-color:var(--gruen);color:#fff}
.kanaele-gross a{padding:.6rem 1.1rem .6rem .8rem;font-size:1.05rem}
.kanaele-gross svg{width:24px;height:24px;color:var(--akzent)}
.kanal-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);align-items:center}
.kanal-raster p{color:var(--tinte-2)}
.kontakt .kanaele{margin-top:1.4rem}

/* Marktbrief */
.brief{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center}
.brief p:not(.kicker):not(.meldung){color:var(--tinte-2)}
.brief h2{margin-bottom:1rem}
.brief-formular{background:#fff;border:1px solid var(--linie);border-top:4px solid var(--gruen);border-radius:0;padding:clamp(20px,3vw,28px)}
.brief-felder{display:flex;gap:.6rem}
.brief-felder label{flex:1}
.brief-felder input{width:100%}
.einwilligung{display:flex!important;gap:.6rem;align-items:flex-start;margin-top:1rem;font-weight:400!important;font-size:.92rem!important;color:var(--tinte-2);line-height:1.4}
/* 24px, nicht 18px: Das ist die kleinste Bedienfläche, die WCAG 2.5.8
   zulässt, und dieses Kästchen ist das eine Element, das JEDER treffen muss,
   der uns schreiben will. Bei 18px daneben zu tippen kostet eine Anfrage.
   margin-top entfällt, weil der größere Kasten von selbst zur ersten
   Textzeile passt. */
.einwilligung input{width:24px;height:24px;min-height:0;margin-top:0;flex:none;accent-color:var(--akzent)}

/* FAQ */
.faq{margin-top:1.6rem;border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.05rem 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-family:var(--text);text-transform:none;font-size:1.2rem;font-weight:700;letter-spacing:0}
.faq summary::after{content:"+";flex:none;width:32px;height:32px;border-radius:50%;background:var(--gruen-hell);display:grid;place-items:center;font-size:1.3rem;font-weight:700;color:var(--akzent)}
.faq details[open] summary::after{content:"−";background:var(--gruen);color:#fff}
.faq-antwort p{color:var(--tinte-2);font-size:1.1rem;max-width:74ch;margin:0 0 1.2rem}

/* Seitenkopf, Brotkrumen, Steckbrief */
.brotkrumen ol{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;padding:1.1rem 0 0;margin:0;font-size:.92rem;color:var(--tinte-2)}
.brotkrumen li+li::before{content:"›";margin-right:.35rem;color:var(--tinte-3)}
.brotkrumen a{color:var(--tinte-2);text-decoration:none}
.brotkrumen a:hover{color:var(--akzent);text-decoration:underline}
.seitenkopf{padding-block:clamp(24px,4vw,40px) clamp(40px,6vw,72px)}
.seitenkopf-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,4vw,56px);align-items:start}
.steckbrief{background:var(--papier-2);border-radius:0;padding:clamp(18px,2.5vw,26px);border-top:5px solid var(--gruen)}
.steckbrief dl{margin:0}
.steckbrief div{display:grid;grid-template-columns:8.8rem 1fr;gap:.8rem;padding:.55rem 0;border-top:1px solid var(--papier-3)}
.steckbrief div:first-child{border-top:0;padding-top:0}
.steckbrief dt{font-size:.92rem;color:var(--tinte-2);font-weight:700}
.steckbrief dd{margin:0;font-weight:700}
.steckbrief dd span{display:block;font-size:.84rem;font-weight:400;color:var(--tinte-2)}
.sprungmarken{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.6rem}
.sprungmarken a{font-size:.95rem;font-weight:700;padding:.35rem .8rem;border-radius:999px;background:var(--papier-2);color:var(--tinte);text-decoration:none;border:1px solid var(--linie)}
.sprungmarken a:hover{background:var(--gruen-hell);color:var(--akzent-dunkel);border-color:var(--gruen)}

/* Textspalten */
.zwei-spalten{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);align-items:start}
.text p,.artikel p{font-size:1.15rem;line-height:1.6;max-width:70ch}
.text h2,.artikel h2{margin-bottom:1rem}
.text h3{margin:1.8rem 0 .7rem;font-size:1.3rem}
.artikel{max-width:1100px}
.artikel-abschnitt{margin-bottom:clamp(40px,6vw,64px)}
.artikel-abschnitt>h2,.artikel-abschnitt>p,.artikel-abschnitt>ul{max-width:780px}
.artikel-abschnitt:last-child{margin-bottom:0}
.haken{list-style:none;padding:0;margin:.4rem 0 0;display:grid;gap:.6rem;max-width:72ch}
.haken li{position:relative;padding-left:1.9rem;font-size:1.12rem;line-height:1.5}
.haken li::before{content:"";position:absolute;left:0;top:.25em;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5 7 11l5-6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.pruefliste{counter-reset:p;list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.9rem}
.pruefliste li{counter-increment:p;position:relative;padding-left:2.7rem;font-size:1.12rem;line-height:1.5}
.pruefliste li::before{content:counter(p);position:absolute;left:0;top:0;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--akzent);color:#fff;font:700 1rem/1.9rem var(--text);text-align:center}
.eigentuemer{background:var(--nacht);color:var(--auf-nacht);border-radius:0;padding:clamp(22px,3vw,32px);border-top:5px solid var(--gruen)}
.eigentuemer .kicker{color:var(--gruen-auf-dunkel)}
.eigentuemer h3{color:#fff;font-size:1.7rem;margin-bottom:.8rem}
.eigentuemer p{color:var(--auf-nacht-2)}
.weg-box{background:var(--papier-2);border:1px solid var(--linie);border-top:5px solid var(--gruen);border-radius:0;padding:clamp(20px,3vw,28px)}
.abschnitt-hell .weg-box{background:#fff}
.weg-box h3{margin-bottom:.6rem}
.weg-zahl{font-family:var(--titel);font-size:4rem;line-height:1;color:var(--akzent);margin:.2rem 0 .4rem}
.schritte{counter-reset:s;list-style:none;padding:0;margin:1.2rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:14px}
.schritte li{counter-increment:s;background:var(--papier-2);border-radius:var(--radius);padding:18px;display:grid;gap:.35rem;align-content:start;border-top:3px solid var(--gruen)}
.schritte li::before{content:"0" counter(s);font-family:var(--titel);color:var(--akzent);font-size:1.2rem}
.schritte strong{font-size:1.12rem}
.schritte span{color:var(--tinte-2);font-size:1.02rem;line-height:1.45}
.fakten{margin:0}
.fakten div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--papier-3);align-items:baseline}
.fakten dt{color:var(--tinte-2);font-weight:700}
.fakten dd{margin:0;text-align:right;font-family:var(--titel);font-size:1.35rem}
.fakten dd span{display:block;font-family:var(--text);font-size:.85rem;color:var(--tinte-2)}
.breit{max-width:none}

/* Ortsteile, Gemeinden, Nachbarn */
.ortsteil-karten,.gemeinde-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px;margin-top:1.6rem}
.ortsteil-karte,.gemeinde-karte{background:#fff;border:1px solid var(--papier-3);border-top:4px solid var(--gruen);border-radius:0;padding:20px 22px;scroll-margin-top:110px}
.ortsteil-karte:target{box-shadow:0 0 0 3px var(--gruen)}
.ortsteil-karte h3,.gemeinde-karte h3{font-size:1.5rem}
.ortsteil-karte h3 a,.gemeinde-karte h3 a{color:var(--tinte);text-decoration:none}
.ortsteil-karte h3 a:hover,.gemeinde-karte h3 a:hover{color:var(--akzent)}
.gemeinde-karte h3 a::after{content:" →";color:var(--gruen)}
.ortsteil-zahl{font-weight:700;color:var(--akzent);margin:.3rem 0 .6rem}
.ortsteil-karte p,.gemeinde-karte p{color:var(--tinte-2);font-size:1.05rem}
.ortsteil-angebote-titel{font-weight:700;color:var(--tinte)!important;margin:.8rem 0 .3rem}
.ortsteil-angebote{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.ortsteil-angebote li{display:flex;justify-content:space-between;gap:.8rem;border-top:1px solid var(--linie);padding-top:.35rem}
.ortsteil-angebote a{font-weight:700;text-decoration:none}
.ortsteil-angebote span{white-space:nowrap;color:var(--tinte-2)}
.ortsteil-leer{font-size:.98rem}
.zahl-gross{font-family:var(--titel);font-size:1.7rem;margin:.3rem 0 .5rem;color:var(--tinte)!important}
.zahl-gross span{font-family:var(--text);font-size:.95rem;color:var(--tinte-2)}
.gemeinde-ortsteile{font-size:.95rem!important}
.gemeinde-merkmale{list-style:none;padding:0;margin:.6rem 0 0;display:flex;flex-wrap:wrap;gap:.35rem}
.gemeinde-merkmale li{font-size:.86rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;background:var(--papier-2);color:var(--tinte-2)}
.gemeinde-merkmale li.an{background:var(--gruen-hell);color:var(--akzent-dunkel)}
.nachbarn{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px}
.nachbar{display:grid;gap:.3rem;background:#fff;border:1px solid var(--linie);border-left:4px solid var(--gruen);border-radius:var(--radius);padding:16px 18px;text-decoration:none;color:var(--tinte);transition:box-shadow .15s}
.nachbar:hover{box-shadow:var(--schatten);color:var(--tinte)}
.nachbar strong{font-family:var(--titel);text-transform:uppercase;font-size:1.3rem;font-weight:400}
.nachbar strong::after{content:" →";color:var(--gruen)}
.nachbar span{font-size:1rem;color:var(--tinte-2);line-height:1.4}

.autor{display:flex;gap:1rem;align-items:center;margin-top:2rem;padding:16px 18px;background:#fff;border:1px solid var(--linie);border-left:4px solid var(--gruen);border-radius:0}
.autor img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:top;flex:none;border:2px solid var(--gruen)}
.autor p{margin:0;font-size:1rem;color:var(--tinte-2)}
.autor strong{color:var(--tinte)}
.quellen-liste{margin-top:2rem;border-top:1px solid var(--linie);padding-top:1rem}
.quellen-liste summary{cursor:pointer;font-weight:700;color:var(--akzent)}
.quellen-liste ul{list-style:none;padding:0;margin:.8rem 0;display:grid;gap:.3rem;font-size:.95rem}
.quellen-liste li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quellen-liste li span{color:var(--tinte-3)}
.quellen-liste p{font-size:.92rem;color:var(--tinte-2)}

/* Formulare */
.kontakt{background:var(--nacht);color:var(--auf-nacht);padding-block:clamp(56px,8vw,96px);border-top:6px solid var(--gruen)}
.kontakt-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
.kontakt .kicker{color:var(--gruen-auf-dunkel)}
.kontakt h2{color:#fff}
.kontakt .lede{color:var(--auf-nacht-2)}
.person{display:flex;gap:1rem;align-items:center;margin:2rem 0 1.4rem}
.person img{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:top;background:var(--nacht-3);flex:none;border:3px solid var(--gruen)}
.person p{margin:0;font-size:1rem;color:var(--auf-nacht-2)}
.person strong{color:#fff;font-size:1.15rem}
.kontakt-direkt a{color:#fff;font-weight:700;font-size:1.25rem;text-decoration:none}
.kontakt-direkt a:hover{text-decoration:underline}
.formular{background:#fff;color:var(--tinte);border-radius:0;padding:clamp(20px,3vw,32px);display:grid;gap:1rem}
label{display:grid;gap:.35rem;font-weight:700;font-size:1rem}
.optional{font-weight:400;color:var(--tinte-2)}
input,select,textarea{font:400 1.05rem var(--text);color:var(--tinte);background:#fff;border:1.5px solid var(--linie-2);border-radius:0;padding:.65rem .85rem;min-height:48px;width:100%}
textarea{resize:vertical;min-height:120px;line-height:1.45}
select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%2335801F' stroke-width='1.8'/%3E%3C/svg%3E") right .9rem center/12px no-repeat;padding-right:2.4rem}
select:disabled{background-color:var(--papier-2);color:var(--tinte-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gruen);box-shadow:0 0 0 3px rgba(77,173,50,.22)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--fehler)}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:end}
.honig{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular-hinweis{font-size:.88rem;color:var(--tinte-2);margin:0}
.formular .knopf{justify-self:start}
.meldung{margin:0;padding:.8rem 1rem;border-radius:0;font-size:1rem;font-weight:700;background:var(--fehler-hell);color:var(--fehler)}
.meldung.ok{background:var(--ok-hell);color:var(--ok)}

/* Wert-Check */
.wertcheck{max-width:900px;margin-inline:auto;background:#fff;border:1px solid var(--papier-3);border-top:6px solid var(--gruen);border-radius:0;padding:clamp(20px,4vw,44px);box-shadow:var(--schatten);display:grid;gap:1.2rem}
.wc-fortschritt{display:none;list-style:none;padding:0;margin:0 0 .4rem;gap:.4rem;counter-reset:w}
.js .wc-fortschritt{display:grid;grid-template-columns:repeat(4,1fr)}
.wc-fortschritt li{counter-increment:w;font-size:.9rem;font-weight:700;color:var(--tinte-3);padding-top:.6rem;border-top:4px solid var(--papier-3)}
.wc-fortschritt li::before{content:counter(w) ". "}
.wc-fortschritt li.aktiv,.wc-fortschritt li.fertig{color:var(--tinte);border-top-color:var(--gruen)}
.wc-schritt{border:0;padding:0;margin:0;display:grid;gap:1.1rem;min-width:0}
.wc-schritt legend{font-family:var(--titel);text-transform:uppercase;font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:1rem;padding:0}
.js .wc-schritt:not(.aktiv){display:none}
.wc-knoepfe{display:none;gap:.75rem;flex-wrap:wrap;margin-top:.4rem}
.js .wc-knoepfe{display:flex}
.wc-schritt[data-schritt="4"] .wc-knoepfe{display:flex}
.wc-arten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.wc-art{position:relative;display:grid;justify-items:center;gap:.5rem;padding:18px 10px;border:2px solid var(--linie-2);border-radius:0;cursor:pointer;text-align:center;font-weight:700;transition:border-color .15s,background-color .15s}
.wc-art input{position:absolute;opacity:0;pointer-events:none}
.wc-art svg{width:40px;height:40px;color:var(--tinte-2)}
.wc-art:hover{border-color:var(--akzent)}
.wc-art:has(input:checked){border-color:var(--gruen);background:var(--gruen-hell)}
.wc-art:has(input:checked) svg{color:var(--akzent)}
.wc-art:has(input:focus-visible){outline:3px solid var(--gruen);outline-offset:2px}
.wc-ergebnis{border-top:1px solid var(--linie);padding-top:1.6rem}
.wc-ergebnis h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.wc-wert{font-family:var(--titel);font-size:clamp(2.2rem,5vw,3.2rem);color:var(--akzent);margin:.6rem 0}
.wc-basis,.wc-weiter{color:var(--tinte-2)}
.wc-faktoren{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;gap:.5rem}
.wc-faktoren li{display:flex;gap:.6rem;align-items:baseline;font-size:1.02rem}
.wc-faktoren b{flex:none;width:1.4rem;text-align:center;color:var(--akzent)}

/* Fuß */
.fuss{background:var(--fuss);color:var(--auf-nacht-2);padding-block:clamp(48px,6vw,72px) 28px;font-size:1rem}
.kontakt+.fuss{border-top:1px solid var(--nacht-3)}
.fuss a{color:var(--auf-nacht);text-decoration:none}
.fuss a:hover{text-decoration:underline;color:#fff}
.fuss-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:clamp(24px,4vw,56px)}
.fuss-logo{width:190px;height:auto;background:#fff;border-radius:0;padding:10px 14px;margin-bottom:1.2rem}
.fuss-titel{color:#fff;font-family:var(--titel);text-transform:uppercase;font-size:1.1rem;letter-spacing:.04em;margin-bottom:.8rem}
.fuss-titel-abstand{margin-top:1.6rem}
.fuss-liste{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.fuss-liste.spalten{grid-template-columns:1fr 1fr;gap:.3rem 1rem}
.fuss-betreiber{margin:1.2rem 0 1.4rem;line-height:1.65}
.fuss-unten{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--nacht-3);font-size:.92rem}
.fuss-unten p{margin:0}
.fuss-unten .fuss-hinweis{flex-basis:100%;font-size:.86rem;color:var(--auf-nacht-2)}

/* Schmale Bildschirme */
@media (max-width:980px){
  .held-raster,.karte-raster,.zins-raster,.rechner,.wer-raster,.brief,.seitenkopf-raster,.zwei-spalten,.kontakt-raster,.kanal-raster{grid-template-columns:minmax(0,1fr)}
  .absicht-raster,.absicht-vier{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fuss-raster{grid-template-columns:1fr 1fr}
  .fuss-raster>div:first-child{grid-column:1/-1}
  .wer-bild{max-width:280px}
}
@media (max-width:640px){
  body{font-size:18px}
  .absicht-raster,.absicht-vier{grid-template-columns:minmax(0,1fr)}
  .feld-reihe{grid-template-columns:minmax(0,1fr)}
  .wc-arten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gemeinde-liste{grid-template-columns:minmax(0,1fr)}
  .fuss-raster{grid-template-columns:minmax(0,1fr)}
  .brief-felder{flex-direction:column}
  .puls dd{font-size:1.4rem}
  .steckbrief div{grid-template-columns:7.2rem 1fr}
  .kopfzeile{margin-bottom:1.2rem}
  .plaketten{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ortwahl-reihe{flex-direction:column}
  .balken-liste li{grid-template-columns:minmax(6.5em,8.5em) 1fr 3.8em;gap:.5rem;font-size:.92rem}
  .karte{min-width:0}
  .filter-ort{width:100%}
  .filter-ort select{min-width:0;flex:1}
  .karte-klein .kacheln{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ------------------------------------------------------------------ */
/*  Bewegung beim Scrollen                                             */
/*  Angelegt am 14.10.2026.                                            */
/* ------------------------------------------------------------------ */

/*
 * Abschnitte blenden beim Scrollen sanft ein. Zwei Dinge sind daran wichtiger
 * als der Effekt selbst:
 *
 * 1. Der versteckte Zustand gilt NUR, wenn das Skript die Klasse js-effekte
 *    an das <html> gesetzt hat. Ohne JavaScript, bei einem Fehler im Skript
 *    oder bei einem Suchmaschinen-Crawler ist also alles sofort sichtbar.
 *    Ein Einblend-Effekt, der ohne JavaScript eine leere Seite hinterlässt,
 *    ist kein Effekt, sondern ein Totalausfall.
 * 2. Verlangt das Gerät weniger Bewegung, wird der versteckte Zustand
 *    ausdrücklich aufgehoben. Der Block weiter oben schaltet nur Übergänge
 *    ab; opacity:0 würde sonst bestehen bleiben und den Inhalt verschlucken.
 *
 * Die Bewegung ist bewusst klein (14 px) und kurz. Sie soll das Lesen
 * begleiten, nicht auffallen.
 */
.js-effekte .einblenden{opacity:0;transform:translateY(14px);will-change:opacity,transform}
.js-effekte .einblenden.sichtbar{opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
/* Nacheinander statt alle gleichzeitig: wirkt ruhiger und lenkt den Blick */
.js-effekte .einblenden.sichtbar:nth-child(2){transition-delay:.07s}
.js-effekte .einblenden.sichtbar:nth-child(3){transition-delay:.14s}
.js-effekte .einblenden.sichtbar:nth-child(4){transition-delay:.21s}

@media (prefers-reduced-motion:reduce){
  .js-effekte .einblenden,.js-effekte .einblenden.sichtbar{
    opacity:1!important;transform:none!important;will-change:auto}
}

/* Hochlaufende Zahl: die Ziffern sollen dabei nicht springen */
.kachel-wert[data-zaehler]{font-variant-numeric:tabular-nums}

/*
 * Kopfzeile wird beim Scrollen flacher und bekommt einen Schatten, damit
 * mehr Inhalt sichtbar bleibt. Nur am Laptop: Auf dem Telefon ist die
 * Kopfzeile ohnehin knapp, und ein springender Kopf beim Scrollen ist dort
 * eher störend als hilfreich.
 */
@media (min-width:821px) and (prefers-reduced-motion:no-preference){
  .kopf{transition:box-shadow .25s,padding .25s}
  .kopf.geschrumpft{box-shadow:0 2px 14px rgba(0,0,0,.09)}
}

/*
 * Tastaturbedienung sichtbar machen. Wer mit der Tabulatortaste navigiert,
 * muss jederzeit erkennen, wo er steht; mit der Maus soll der Rahmen nicht
 * aufblitzen. Genau dafür ist :focus-visible da.
 */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--gruen);outline-offset:2px;border-radius:2px}

/*
 * Die Markenzeile unter dem Logo in der Fußzeile. Sie stand früher im
 * Logo-Bild und trug dort fest den Ort Pforzheim; jetzt ist sie Text und
 * nennt die Stadt der jeweiligen Seite. Schriftgröße und Abstand sind so
 * gewählt, dass sie wie vorher zum Logo gehört und nicht wie ein Satz
 * daneben wirkt.
 */
.fuss-claim{margin:.35rem 0 1rem;font-weight:700;font-size:.95rem;line-height:1.3;
  color:#fff;max-width:300px}

/* ------------------------------------------------------------------ */
/*  Verkaufsfahrplan                                                   */
/*  Angelegt am 14.10.2026.                                            */
/* ------------------------------------------------------------------ */

/*
 * Eine Zeitleiste mit echten Kalenderdaten. Die Linie links führt das Auge
 * von Schritt zu Schritt; die Datumsangabe steht rechts und ist das, was
 * ein Verkäufer wirklich sucht. Am Telefon rutscht das Datum unter den
 * Titel, sonst würde beides gegeneinander gedrängt.
 */
.fahrplan{list-style:none;counter-reset:fp;margin:0;padding:0}
.fahrplan-schritt{position:relative;margin:0;padding:0 0 1.15rem 34px;counter-increment:fp}
.fahrplan-schritt::before{content:counter(fp);position:absolute;left:0;top:1px;
  width:22px;height:22px;border-radius:50%;background:var(--gruen);color:#fff;
  font:700 .78rem/22px var(--text);text-align:center}
/* Verbindungslinie zwischen den Punkten, beim letzten Schritt nicht */
.fahrplan-schritt::after{content:"";position:absolute;left:10px;top:26px;bottom:2px;
  width:2px;background:var(--linie-2)}
.fahrplan-schritt:last-child{padding-bottom:0}
.fahrplan-schritt:last-child::after{display:none}
.fahrplan-kopf{display:flex;flex-wrap:wrap;gap:.2rem .8rem;align-items:baseline;
  justify-content:space-between}
.fahrplan-kopf strong{font-family:var(--titel);text-transform:uppercase;
  font-size:1.15rem;font-weight:400;letter-spacing:.02em;line-height:1.2}
.fahrplan-datum{font-variant-numeric:tabular-nums;font-size:.9rem;font-weight:700;
  color:var(--gruen);white-space:nowrap}
.fahrplan-schritt p{margin:.25rem 0 0;font-size:.95rem;line-height:1.55;color:var(--tinte-2)}
.fahrplan-ergebnis{font-family:var(--titel);font-size:clamp(1.3rem,3vw,1.75rem);
  line-height:1.25;margin:.4rem 0 .9rem}
@media (max-width:560px){
  .fahrplan-kopf{display:block}
  .fahrplan-datum{display:block;margin-top:.1rem}
}

/* ------------------------------------------------------------------ */
/*  Kanäle mit Begründung                                              */
/* ------------------------------------------------------------------ */

/*
 * Eine Reihe Symbole ohne Erklärung klickt niemand an. Diese Karten nennen
 * je Kanal, was es dort zu sehen gibt. Sie verhalten sich wie die übrigen
 * Karten der Seite: heben sich beim Zeigen leicht an, am Telefon einspaltig.
 */
.kanal-karten{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.kanal-karte{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:16px 18px;background:#fff;border:1px solid var(--linie);border-radius:var(--radius);
  text-decoration:none;color:var(--tinte);transition:box-shadow .2s,transform .2s,border-color .2s}
.kanal-karte:hover{box-shadow:var(--schatten);transform:translateY(-2px);border-color:var(--gruen);color:var(--tinte)}
.kanal-zeichen{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--gruen)}
.kanal-zeichen svg{width:21px;height:21px;fill:#fff}
.kanal-text{display:grid;gap:.25rem}
.kanal-text strong{font-family:var(--titel);text-transform:uppercase;font-weight:400;
  font-size:1.2rem;letter-spacing:.02em;line-height:1.15}
.kanal-text span{font-size:.93rem;line-height:1.5;color:var(--tinte-2)}
@media print{
  .kopf,.kontakt,.brief,.fuss,.knoepfe,.filter,.sprungmarken{display:none!important}
  .abschnitt{padding-block:24px}
}

/* Links auf die amtlichen Richtwertkarten einer Gemeinde */
.brw-links{list-style:none;padding:0;margin:1rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:.2rem 1.4rem;font-size:1rem}
.brw-links li{border-top:1px solid var(--linie);padding:.35rem 0}
.brw-links a{font-weight:700;text-decoration:none}
.brw-links a:hover{text-decoration:underline}

/* Suchauftrag (Käuferkartei) */
.suchauftrag fieldset{border:0;padding:0;margin:0;min-width:0}
.suchauftrag legend{font-weight:700;font-size:1rem;padding:0;margin-bottom:.5rem}
.suchauftrag legend .optional{font-size:.92rem;margin-left:.3rem}
.suchauftrag [hidden]{display:none!important}
.sa-wahl{display:flex;flex-wrap:wrap;gap:.5rem}
.sa-knopf,.sa-ort{position:relative;display:flex!important;cursor:pointer}
.sa-knopf input,.sa-ort input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;pointer-events:none}
.sa-knopf span{padding:.5rem 1.05rem;border:1.5px solid var(--linie-2);border-radius:999px;background:#fff;font-size:1rem;font-weight:700}
.sa-orte{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,128px),1fr));gap:.4rem}
.sa-ort span{width:100%;padding:.4rem .6rem;line-height:1.25;overflow-wrap:anywhere;border:1.5px solid var(--linie-2);border-radius:0;background:#fff;font-size:.98rem;font-weight:400}
.sa-knopf:hover span,.sa-ort:hover span{border-color:var(--akzent)}
.sa-knopf input:checked+span,.sa-ort input:checked+span{border-color:var(--gruen);background:var(--gruen-hell);color:var(--akzent-dunkel);font-weight:700}
.sa-knopf input:focus-visible+span,.sa-ort input:focus-visible+span{outline:3px solid var(--gruen);outline-offset:2px}
.sa-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:end}
.sa-ablauf{list-style:none;counter-reset:sa;padding:0;margin:1.4rem 0;display:grid;gap:.9rem}
.sa-ablauf li{counter-increment:sa;position:relative;padding-left:2.6rem;display:grid;gap:.15rem}
.sa-ablauf li::before{content:counter(sa);position:absolute;left:0;top:0;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--gruen);color:#fff;font-weight:700;display:grid;place-items:center}
.sa-ablauf strong{font-size:1.05rem}
.sa-ablauf span{color:var(--tinte-2);line-height:1.45}
.kontakt .sa-ablauf strong,.kontakt .person a{color:#fff}
.kontakt .sa-ablauf span{color:var(--auf-nacht-2)}
.sa-seite{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,4vw,56px);align-items:start}
.sa-seite .formular{border:1px solid var(--linie);border-top:6px solid var(--gruen);box-shadow:var(--schatten)}
.sa-seite-info .sa-ablauf{margin-top:0}
.kontakt-direkt-hell a{font-weight:700;font-size:1.25rem;color:var(--akzent);text-decoration:none}
.kartei-hinweis{display:inline-block;margin:1rem 0 0;padding:.55rem .9rem;border-left:4px solid var(--gruen);border-radius:0;background:var(--gruen-hell);color:var(--tinte);font-weight:700}
.kontakt .kartei-hinweis,.eigentuemer .kartei-hinweis{background:var(--nacht-2);color:#fff}
@media (max-width:980px){.sa-seite{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.sa-zahlen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.sa-zahlen label:first-child{grid-column:1/-1}}

/* Leiste über dem Kopf: Kontakt, Hauptseite, Akademie, Kanäle */
.oben{background:var(--nacht);color:var(--auf-nacht-2);font-size:.92rem}
.oben-innen{display:flex;align-items:center;justify-content:space-between;gap:.4rem 1.4rem;min-height:38px;flex-wrap:wrap}
.oben-text{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
.oben-links{list-style:none;margin:0;padding:0;display:flex;gap:1.1rem;flex-wrap:wrap}
.oben a{color:var(--auf-nacht);text-decoration:none;font-weight:700}
.oben a:hover{color:var(--gruen-auf-dunkel);text-decoration:underline}
.kanaele-mini{margin:0;gap:.15rem}
.kanaele-mini a{padding:.3rem;border:0;background:transparent;color:var(--auf-nacht);border-radius:0}
.kanaele-mini a:hover{color:var(--gruen-auf-dunkel);background:var(--nacht-2)}
.kanaele-mini svg{width:18px;height:18px}
.kanaele-mini span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:1180px){.oben-text{display:none}}
@media (max-width:640px){
  .oben-links li:nth-child(n+2){display:none}
  .oben-innen{justify-content:space-between;min-height:34px;flex-wrap:nowrap}
}
.menue-extern{border-top:1px solid var(--linie);margin-top:.3rem;padding-top:.3rem}
.menue-extern+.menue-extern{border-top:0;margin-top:0;padding-top:0}
.menue li.menue-extern a{color:var(--akzent)}

/* Abstände */
.kopfzeile-abstand{margin-top:clamp(2.4rem,5vw,3.4rem)}
.h2-abstand{margin-top:clamp(2.4rem,5vw,3.2rem)}

/* Neu-Marke auf Angeboten */
.marke-neu{background:#fff;color:var(--akzent);box-shadow:inset 0 0 0 2px var(--gruen)}

/* Videos von YouTube */
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:18px}
.video{display:flex;flex-direction:column;border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;background:#fff;color:var(--tinte);text-decoration:none;transition:box-shadow .15s,transform .15s}
.video:hover{box-shadow:var(--schatten);transform:translateY(-2px);color:var(--tinte)}
.video-bild{position:relative;display:block;aspect-ratio:16/9;background:var(--nacht-2);overflow:hidden}
.video-bild img{width:100%;height:100%;object-fit:cover}
.video-play{position:absolute;left:50%;top:50%;width:58px;height:40px;margin:-20px 0 0 -29px;border-radius:0;background:rgba(12,15,38,.82);transition:background-color .15s}
.video-play::after{content:"";position:absolute;left:24px;top:12px;border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent #fff}
.video:hover .video-play{background:var(--akzent)}
.video-text{display:grid;gap:.3rem;padding:14px 16px 16px;flex:1}
.video-meta{font-size:.86rem;color:var(--tinte-2)}
.video-text strong{font-size:1.05rem;line-height:1.3}
.video-weiter{font-size:.92rem;font-weight:700;color:var(--akzent);margin-top:auto;padding-top:.3rem}
.abschnitt-dunkel .video{border-color:var(--nacht-3)}

/* Die Seiten von iMMo75 */
.netz{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px}
.netz-karte{display:grid;gap:.4rem;align-content:start;padding:22px 22px 20px;border:1px solid var(--linie);border-left:5px solid var(--gruen);border-radius:var(--radius);background:#fff;color:var(--tinte);text-decoration:none;transition:box-shadow .15s,transform .15s}
.netz-karte:hover{box-shadow:var(--schatten);transform:translateY(-2px);color:var(--tinte)}
.netz-karte strong{font-family:var(--titel);font-weight:400;text-transform:uppercase;font-size:1.45rem;line-height:1.1;letter-spacing:.02em}
.netz-karte span{color:var(--tinte-2);line-height:1.45}
.netz-karte .netz-weiter{color:var(--akzent);font-weight:700;margin-top:.3rem}

/* Lebenslagen: Erbe, Scheidung, Wohnrecht, Kapitalanlage, Netzwerk */
.lebenslagen{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:14px}
.lebenslage{display:grid;gap:.35rem;align-content:start;padding:18px 18px 20px;border:1px solid var(--linie);border-top:4px solid var(--gruen);border-radius:var(--radius);background:#fff;color:var(--tinte);text-decoration:none;transition:box-shadow .15s,transform .15s}
.lebenslage:hover{box-shadow:var(--schatten);transform:translateY(-2px);color:var(--tinte)}
.lebenslage strong{font-family:var(--titel);font-weight:400;text-transform:uppercase;font-size:1.4rem;line-height:1.1;letter-spacing:.02em}
.lebenslage strong::after{content:" →";color:var(--gruen)}
.lebenslage span{color:var(--tinte-2);font-size:1rem;line-height:1.45}

/* Kasten Kapital Akademie */
.akademie-box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem 2.4rem;align-items:center;margin-top:clamp(2rem,4vw,2.8rem);padding:clamp(20px,3vw,30px);background:var(--gruen-hell);border-left:6px solid var(--gruen);border-radius:0}
.akademie-box h3{margin-bottom:.6rem}
.akademie-box p:last-child{margin-bottom:0}
.akademie-knoepfe{display:grid;gap:.8rem;justify-items:start}
@media (max-width:980px){.akademie-box{grid-template-columns:minmax(0,1fr)}}

/* Schnellleiste unten auf dem Handy */
.schnell{display:none}
@media (max-width:640px){
  .schnell{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--linie);box-shadow:0 -6px 20px -12px rgba(12,15,38,.35);padding-bottom:env(safe-area-inset-bottom)}
  .schnell a{display:flex;align-items:center;justify-content:center;min-height:54px;font-weight:700;font-size:1rem;text-decoration:none;color:var(--tinte)}
  .schnell a+a{border-left:1px solid var(--linie)}
  .schnell a:first-child{background:var(--akzent);color:#fff}
  body{padding-bottom:calc(54px + env(safe-area-inset-bottom))}
}
@media print{.oben,.schnell{display:none!important}}

/* Zitat Jens Stumpp */
.zitat{position:relative;margin:1.8rem 0;padding:clamp(20px,3vw,28px) clamp(20px,3vw,30px) clamp(18px,2.5vw,24px) clamp(56px,6vw,76px);background:#fff;border:1px solid var(--linie);border-left:6px solid var(--gruen);border-radius:0;max-width:760px}
.zitat::before{content:"„";position:absolute;left:clamp(14px,2vw,20px);top:-.42em;font-family:var(--titel);font-size:clamp(4rem,7vw,5.4rem);line-height:1;color:var(--gruen)}
.zitat blockquote{margin:0}
.zitat blockquote p{margin:0;font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.45;color:var(--tinte);font-weight:700}
.zitat figcaption{display:flex;align-items:center;gap:.8rem;margin-top:1rem}
.zitat figcaption img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:top;background:var(--gruen-hell);box-shadow:0 0 0 2px var(--gruen)}
.zitat figcaption span{display:grid;font-size:.95rem;color:var(--tinte-2);line-height:1.3}
.zitat figcaption b{color:var(--tinte);font-size:1.02rem}
.artikel .zitat{margin-block:2.4rem}

/* Hinweis, wenn sich eine Rechtsgrundlage geändert hat (lib/recht.php) */
.recht-hinweis{padding:14px 18px;background:var(--papier-2);border-left:5px solid var(--gruen);color:var(--tinte-2)}

/* Impressum und Datenschutz */
.rechtstext h1{margin-bottom:.4rem}
.rechtstext .lede{margin-bottom:2rem}
.rechtstext .artikel-abschnitt+.artikel-abschnitt,.rechtstext .lede+.artikel-abschnitt{margin-top:2rem}
.rechtstext .artikel-abschnitt h2{font-size:clamp(1.4rem,2.2vw,1.8rem)}

/* Kurzantwort ganz oben: die wichtigsten Zahlen mit Quelle */
.kurz-gesagt{margin:1.4rem 0 0;padding:1rem 1.2rem;border-left:4px solid var(--gruen);background:var(--papier-2);border-radius:0 8px 8px 0}
.kurz-gesagt .kicker{margin:0 0 .4rem}
.kurz-gesagt ul{margin:0;padding-left:1.1rem;display:grid;gap:.35rem}
.kurz-gesagt li{font-size:1.02rem;line-height:1.5}
@media(max-width:600px){.kurz-gesagt{padding:.9rem 1rem}}

/* Hinweis auf den WhatsApp-Kanal unter den Kanalzeichen in der Fusszeile */
.fuss-kanal{margin:.9rem 0 0;font-size:.92rem;line-height:1.6;color:var(--auf-nacht-2)}
.fuss-kanal a{color:var(--auf-nacht)}

/* ------------------------------------------------------------------ */
/*  Rechner: Kaufnebenkosten und Baufinanzierung                       */
/*  Eingabe links, Ergebnis rechts, auf dem Handy untereinander.       */
/*  Die Klassen nk-* gab es im Markup schon, aber ohne Gestaltung.     */
/* ------------------------------------------------------------------ */
.nk-rechner,
.bf-rechner,
.budget-rechner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
.nk-eingabe>label,
.bf-eingabe>label{display:block;margin-bottom:.9rem}
.nk-eingabe .feld-reihe,
.bf-eingabe .feld-reihe{margin-bottom:.9rem}
.nk-ergebnis,
.bf-ergebnis{background:var(--papier-2);padding:clamp(20px,3vw,30px);border-top:5px solid var(--gruen)}
/* Der Budgetrechner hat zwei Überschriften je Spalte und drei Tabellen im
   Ergebnis. Die Zwischenüberschriften brauchen Luft nach oben, sonst kleben
   sie an der Tabelle darüber. */
.bf-ergebnis h3{margin:1.8rem 0 .6rem}
.bf-eingabe h2+label,.bf-eingabe h2+.feld-reihe{margin-top:0}
.bf-eingabe h2:not(:first-child){margin-top:1.8rem}
.nk-tabelle{width:100%;border-collapse:collapse;margin:0 0 1rem}
.nk-tabelle td{padding:.55rem 0;border-bottom:1px solid var(--linie);vertical-align:baseline}
.nk-tabelle td+td{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.nk-tabelle tr.summe td{font-weight:700;border-bottom:2px solid var(--linie-2)}
.nk-tabelle tr:last-child td{border-bottom:none}
.nk-rate{margin:1.2rem 0;padding:1rem 1.2rem;background:#fff;border-left:4px solid var(--gruen)}
.nk-rate .kachel-label{display:block;font-size:.9rem;color:var(--tinte-2);margin-bottom:.2rem}
.nk-rate strong{font-family:var(--titel);font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.05;display:block}
.nk-rest{margin:0 0 1rem;line-height:1.7}
@media(max-width:820px){
  .nk-rechner,.bf-rechner,.budget-rechner{grid-template-columns:minmax(0,1fr);gap:28px}
}
/* Am Telefon: Spalten fest halbieren und die Beschriftung umbrechen lassen.
   Beide Spalten standen auf white-space:nowrap. Eine lange Beschriftung wie "Restschuld am Ende
   der Zinsbindung" (braucht 213 px, hat 152) hat die Tabelle dadurch über den Bildschirmrand
   gezwungen: Die Baufinanzierungsseite ließ sich bei 375 px um 24 px seitlich schieben, und die
   Beträge rechts waren abgeschnitten. Die Wertspalte bleibt nicht umbrechend, damit "271.464 €"
   zusammenbleibt. Nur am Telefon, die Laptopansicht bleibt unverändert.

   Am 14.10.2026 von .nk-tabelle auf ALLE Tabellen erweitert. Grund: die Korrektur hing an einer
   einzelnen Klasse, und jede neue Tabelle auf jeder der sieben Stadtseiten hätte denselben
   Fehler von neuem gehabt — ein Fehler, der nur bei 375 px sichtbar wird und am Laptop nie
   auffällt. Jetzt kann keine Tabelle mehr die Seite breiter machen als den Bildschirm.
   Die Wertspalten der bekannten Rechnertabellen bleiben über ihre eigene, genauere Regel
   (.nk-tabelle td+td) nicht umbrechend; überall sonst darf im Notfall innerhalb eines Wortes
   getrennt werden, weil eine umbrechende Zahl immer besser ist als eine abgeschnittene. */
@media(max-width:480px){
  table{table-layout:fixed}
  table td:first-child,table th:first-child{white-space:normal;overflow-wrap:anywhere}
  table td,table th{overflow-wrap:break-word}
}

/* Ausflugsziele. Karten in einem Raster, das sich nach der Breite richtet;
   auto-fit mit minmax füllt die Zeile auf, ohne feste Spaltenzahl. Die Karten
   dürfen unterschiedlich hoch sein: Ein Ziel mit Anwohner-Hinweis hat mehr
   Text als eines ohne, und einen Text dafür zu kürzen wäre falsch herum.
   align-items:start hält sie oben bündig. */
.ziel-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(16px,2.4vw,28px);align-items:start;margin-top:1.6rem}
.ziel{background:var(--papier-2);padding:clamp(18px,2.4vw,26px);border-top:4px solid var(--gruen)}
.ziel h3{font-size:1.25rem;margin:0 0 .3rem;text-transform:none;letter-spacing:0}
.ziel p{margin:0 0 .7rem;line-height:1.6}
.ziel p:last-child{margin-bottom:0}
.ziel-weg{font-weight:700;color:var(--gruen);font-variant-numeric:tabular-nums}
.ziel-wohnwert{font-size:.95rem;color:var(--tinte-2);border-left:3px solid var(--linie-2);padding-left:.7rem}
.ziel-quelle{font-size:.92rem}

/* Lange deutsche Wörter in Überschriften.
   „Datenschutzerklärung" ist 20 Zeichen lang und passte bei 375 px in der
   Titelschrift nicht in die Spalte: Die H1 wurde 362 px breit, verfügbar
   waren 328, und die ganze Seite ließ sich dadurch 3 px seitlich schieben.
   Dasselbe droht jedem Kompositum, also ziemlich jedem Wort auf einer
   Immobilienseite (Kaufnebenkosten, Immobilienbewertung, Grundstücksmarkt).
   hyphens:auto trennt dank lang="de" nach deutschen Regeln mit Bindestrich;
   overflow-wrap ist nur das Netz darunter, falls kein Trennpunkt passt.
   Nur am Telefon, damit die Überschriften am Laptop unverändert bleiben. */
@media(max-width:600px){
  h1,h2,h3{hyphens:auto;overflow-wrap:break-word}
}

/* Kundenstimmen. Karten variabler Hoehe, weil Zitate nie gekuerzt werden: eine
   angeschnittene Bewertung waere schlechter als keine. align-content:start haelt
   den Text oben, damit unterschiedlich lange Stimmen nebeneinander ruhig wirken. */
.stimmen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;align-items:start}
.stimme{display:grid;gap:.6rem;align-content:start;margin:0;padding:18px 18px 16px;border:1px solid var(--linie);border-top:4px solid var(--gruen);border-radius:var(--radius);background:#fff}
.stimme blockquote{margin:0;display:grid;gap:.45rem}
.stimme blockquote p{margin:0;font-size:1rem;line-height:1.55;color:var(--tinte)}
.stimme-titel{font-family:var(--titel);font-weight:400;text-transform:uppercase;font-size:1.25rem;line-height:1.15;letter-spacing:.02em;color:var(--tinte)}
.stimme figcaption{padding-top:.5rem;border-top:1px solid var(--linie);color:var(--tinte-2);font-size:.9rem}
.stimmen-herkunft{margin:1rem 0 0;color:var(--tinte-2);font-size:.85rem;line-height:1.5;max-width:70ch}
@media (max-width:640px){.stimmen{grid-template-columns:minmax(0,1fr)}}
/* ------------------------------------------------------------------ */
/*  Telefon: Tippziele und ruhige Bewegung beim Scrollen               */
/*  Ergaenzt am 01.10.2026.                                            */
/* ------------------------------------------------------------------ */

/*
 * Gemessen am 01.10.2026 bei 375 px Breite: Links in Listen waren nur rund
 * 20 Pixel hoch. Zum Treffen mit dem Daumen werden etwa 44 Pixel empfohlen.
 * ":only-child" trifft genau die Listenpunkte, die aus nichts als dem Link
 * bestehen. Links im Fliesstext bleiben klein, sie stehen im Satz.
 */
@media (max-width:640px){
  li>a:only-child{display:inline-block;padding-block:.6rem;line-height:1.35}
  .kanaele li>a:only-child{padding-block:0}
  .brotkrumen li>a:only-child{padding-block:.35rem}
}

/*
 * Abschnitte tauchen beim Scrollen leicht auf, ohne JavaScript, ueber die
 * Scroll-Zeitleiste des Browsers. Browser ohne diese Technik zeigen die Seite
 * unveraendert. Wer im System weniger Bewegung eingestellt hat, bekommt keine.
 * Bewegt werden nur opacity und transform, das verschiebt nichts im Layout.
 */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .abschnitt>.huelle{
      animation:auftauchen linear both;
      animation-timeline:view();
      animation-range:entry 5% entry 45%;
    }
    @keyframes auftauchen{
      from{opacity:0;transform:translateY(16px)}
      to{opacity:1;transform:none}
    }
  }
}

/*
 * Am 02.10.2026: Handyansicht nachgebessert. Drei Befunde, alle bei 375 Pixeln
 * gemessen, nicht geschaetzt.
 *
 * 1. Die Regel vom 01.10.2026 (li>a:only-child{display:inline-block}) sollte
 *    Listenlinks mit dem Daumen treffbar machen. Sie traf aber auch die
 *    Listen, deren Link selbst aus zwei Teilen besteht, Name und Zahl. Aus dem
 *    Raster wurde ein inline-block, und auf dem Telefon stand dann
 *    "Keltern8.687" ohne Abstand. Diese Listen bekommen ihr Raster zurueck,
 *    das Polster fuer den Daumen bleibt.
 *
 * 2. Die sieben Kanalsymbole im dunklen Streifen ganz oben waren 18 x 28 Pixel
 *    gross. Das trifft niemand zuverlaessig. Dieselben Kanaele stehen auf
 *    jeder Seite weiter unten noch einmal in voller Groesse (43 x 78), es geht
 *    also nichts verloren. Auf dem Telefon treten sie oben deshalb zurueck,
 *    dafuer steht dort jetzt die E-Mail-Adresse.
 *
 * 3. Die Zeilen der Balkenliste (Gemeinden im Vergleich) waren 23 Pixel hoch,
 *    jede Zeile ist ein Link auf die Gemeindeseite.
 */
@media (max-width:640px){
  .gemeinde-liste li>a:only-child,
  .stadtteil-liste li>a:only-child{display:flex;padding-block:.55rem}

  .oben .kanaele-mini{display:none}
  .oben-links li:nth-child(2){display:block}

  /* Die Zeile hoeher machen reicht nicht: Tippbar ist der Link, nicht die
     Zeile. align-self:stretch zieht ihn auf die volle Zeilenhoehe, die
     line-height setzt den Namen mittig. Der Link bleibt ein Block, damit der
     lange Name weiter mit Auslassungspunkten endet statt zu ueberlaufen. */
  .balken-liste li{min-height:40px}
  .balken-liste li>a{align-self:stretch;line-height:40px}
}

/*
 * Kaestchen im Rechner. Am 04.10.2026 mit dem Grundsteuer-Rechner dazugekommen.
 * min-height muss mit zurueckgesetzt werden: Die allgemeine Regel fuer
 * Eingabefelder macht aus dem Kaestchen sonst ein schmales hohes Rechteck.
 */
.rechner-haken{display:flex!important;align-items:center;gap:.6rem;margin:0 0 1rem;font-weight:500!important}
/* 24px wie beim Einwilligungshaken: kleinste Bedienfläche nach WCAG 2.5.8. */
.rechner-haken input{width:24px;height:24px;min-height:24px;flex:0 0 auto;accent-color:var(--gruen)}