/* freizeitgrundstueck-meiner-region.de
 *
 * CI von iMMo75: 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.
 *
 * NEU GESCHRIEBEN STATT KOPIERT. Das Stylesheet des Enzkreis-Portals ist
 * 74 KB und trägt Karten, Rechner, Marktdiagramme und Stadtteillisten, die
 * es hier nicht gibt. Übernommen sind die Farbwerte, die Schriften und die
 * Lehren aus den Prüfläufen der Flotte:
 *
 *   - hyphens:auto für Überschriften unter 600 px. Ohne das schiebt ein
 *     deutsches Kompositum die ganze Seite seitlich auf; „Wochenendgrundstück"
 *     war bei 375 px 384 Pixel breit bei 343 verfügbaren.
 *   - Kein Farbpaar unter 4,5 : 1. --akzent auf --gruen-hell ergibt nur
 *     4,06 und ist deshalb verboten; dafür gibt es --akzent-dunkel (5,38).
 *   - Eingabefelder mindestens 16 px, sonst zoomt iOS beim Antippen.
 *   - Bedienelemente mindestens 48 px hoch, Kästchen mindestens 24 px
 *     (WCAG 2.5.8).
 *   - Tabellen brechen unter 480 px um, statt die Seite breiter zu machen.
 */

@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:#6B7076;
  --linie:#E3E8E0;
  --linie-2:#C5CFC0;
  --gruen:#4DAD32;
  --akzent:#35801F;
  --akzent-dunkel:#2A6B17;
  --gruen-hell:#DDEED8;
  --gruen-auf-dunkel:#8CD66F;
  --nacht:#0C0F26;
  --nacht-2:#161A36;
  --nacht-3:#272C4A;
  --auf-nacht:#EEF1F4;
  --auf-nacht-2:#AAB1BA;
  --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;
  --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}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);
  font:400 1.08rem/1.65 var(--text);overflow-x:clip}
h1,h2,h3,h4{font-family:var(--titel);font-weight:400;text-transform:uppercase;
  letter-spacing:.01em;line-height:1.08;color:var(--tinte);margin:0 0 .6rem}
h1{font-size:clamp(2rem,5vw,3.3rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem)}
p{margin:0 0 1rem}
a{color:var(--akzent-dunkel)}
a:hover{color:var(--akzent)}
img{max-width:100%;height:auto}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.huelle{max-width:1240px;margin-inline:auto;padding-inline:var(--rand)}
.schmal{max-width:820px;margin-inline:auto}
.abschnitt{padding-block:clamp(44px,7vw,88px)}
.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.15rem;
  color:var(--akzent-dunkel);margin:0 0 .4rem}
.abschnitt-dunkel .kicker{color:var(--gruen-auf-dunkel)}
.lede{font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.55;color:var(--tinte-2);max-width:66ch;margin:1rem 0 0}
.abschnitt-dunkel .lede{color:var(--auf-nacht-2)}
.hinweis{font-size:.95rem;color:var(--tinte-2);max-width:74ch}

/* ---------- Knöpfe. Mindestens 48 px hoch, auch am Telefon ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:48px;padding:.8rem 1.5rem;border:2px solid var(--akzent);background:var(--akzent);
  color:#fff;font:700 1rem/1 var(--text);text-transform:uppercase;letter-spacing:.1em;
  text-decoration:none;cursor:pointer;border-radius:0}
.knopf:hover,.knopf:focus-visible{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel);color:#fff}
.knopf-zweit{background:transparent;color:var(--tinte);border-color:var(--linie-2)}
.knopf-zweit:hover,.knopf-zweit:focus-visible{background:var(--papier-2);border-color:var(--akzent);color:var(--akzent-dunkel)}
.knopf-gross{font-size:1.1rem;padding:1.1rem 2rem;min-height:58px}
.knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
:focus-visible{outline:3px solid var(--gruen);outline-offset:2px}

/* ---------- Kopf und Fuß ---------- */
.kopf{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--linie)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--tinte)}
.marke img{width:72px;height:auto}
.wortmarke{font-family:var(--titel);text-transform:uppercase;font-size:1.05rem;line-height:1.1;letter-spacing:.02em}
.wortmarke b{color:var(--akzent-dunkel);font-weight:400}
.kopf-nav{display:flex;align-items:center;gap:1.4rem}
.kopf-nav a{color:var(--tinte);text-decoration:none;font-weight:700;font-size:1rem}
.kopf-nav a:hover{color:var(--akzent-dunkel)}
@media(max-width:860px){.kopf-nav .nur-breit{display:none}}
/*
 * Unter 560 px reicht die Zeile nicht für Wortmarke UND Textlinks.
 * NACHGEMESSEN, nicht geschätzt: Bei 375 px lag der Link „Flächen" von 169
 * bis 213 Pixel — die Wortmarke reicht von 99 bis 225. Der Link stand also
 * mitten im Schriftzug, und zwar auf jeder Seite der Website.
 *
 * Weg muss der Link, nicht die Wortmarke: Das Logo führt ohnehin auf
 * dieselbe Seite, die Marke ist auf einer neuen Domain das Wichtigere, und
 * Ratgeber und Musteranfragen stehen vollständig im Fuß.
 */
@media(max-width:560px){
  .kopf-nav a:not(.knopf){display:none}
  .kopf-nav .knopf{padding:.6rem 1rem;font-size:.82rem;letter-spacing:.06em}
  .marke img{width:64px}
  .wortmarke{font-size:.98rem}
}

.fuss{background:var(--nacht);color:var(--auf-nacht-2);padding-block:clamp(36px,5vw,64px);font-size:.98rem}
.fuss a{color:var(--auf-nacht);text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss h3{color:#fff;font-size:1.1rem;margin-bottom:.5rem}
.fuss-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1.8rem}
.fuss ul{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.fuss-unten{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--nacht-3);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-size:.92rem}

/* ---------- Karten der Flächen ---------- */
.flaechen{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:20px;margin-top:1.6rem}
.flaeche{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linie);
  text-decoration:none;color:var(--tinte);transition:box-shadow .15s,transform .15s}
.flaeche:hover{box-shadow:var(--schatten);transform:translateY(-3px);border-color:var(--gruen);color:var(--tinte)}
.flaeche-bild{position:relative;aspect-ratio:4/3;background:var(--papier-3);overflow:hidden}
.flaeche-bild img{width:100%;height:100%;object-fit:cover}
.flaeche-leer{display:grid;place-items:center;height:100%;color:var(--tinte-3);font-size:.92rem}
.flaeche-marken{position:absolute;top:10px;left:10px;display:flex;flex-wrap:wrap;gap:6px}
.marke-art,.marke-quelle{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.3rem .6rem}
.marke-art{background:var(--akzent-dunkel);color:#fff}
/* „von privat" gegen „von iMMo75": muss sichtbar unterscheidbar sein, sonst
   sehen fremde Inserate wie eigene aus. Nicht nur Farbe, auch Text. */
.marke-quelle{background:#fff;color:var(--tinte);border:1px solid var(--linie-2)}
.marke-quelle.eigen{background:var(--gruen-hell);color:var(--akzent-dunkel);border-color:var(--gruen-hell)}
.flaeche-text{display:flex;flex-direction:column;gap:.4rem;padding:16px 18px 20px;flex:1}
.flaeche-ort{font-size:.92rem;font-weight:700;color:var(--akzent-dunkel);margin:0}
.flaeche h3{font-family:var(--text);text-transform:none;font-size:1.15rem;font-weight:700;
  line-height:1.3;letter-spacing:0;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.flaeche-daten{display:flex;flex-wrap:wrap;gap:.1rem .9rem;list-style:none;padding:0;margin:.2rem 0 0;
  font-size:.96rem;color:var(--tinte-2)}
.flaeche-preis{margin:auto 0 0;padding-top:.6rem;font-family:var(--titel);font-size:1.55rem;line-height:1.1}
.flaeche-preis small{display:block;font-family:var(--text);font-size:.9rem;font-weight:400;color:var(--tinte-2)}

/* ---------- Kennzahlen ---------- */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px;margin:1.8rem 0 0}
.kachel{display:flex;flex-direction:column;gap:.2rem;background:#fff;border:1px solid var(--linie);
  border-top:3px solid var(--gruen);padding:16px 18px}
.kachel-label{font-size:.9rem;font-weight:700;color:var(--tinte-2)}
.kachel-wert{font-family:var(--titel);font-size:clamp(1.7rem,2.6vw,2.1rem);line-height:1.05}
.kachel-zusatz{font-size:.94rem;color:var(--tinte)}

/* ---------- Filter ---------- */
.filter{margin:1.6rem 0;padding-bottom:1.4rem;border-bottom:1px solid var(--linie-2)}
.filter fieldset{border:0;padding:0;margin:0 0 1rem}
.filter legend{font-size:.86rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tinte-2);padding:0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:.6rem 0 0}
.chips a{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.4rem .95rem;
  border-radius:999px;background:#fff;border:2px solid var(--linie-2);color:var(--tinte);
  text-decoration:none;font-size:.98rem;font-weight:700}
.chips a span{font-family:var(--titel);font-weight:400;color:var(--tinte-2)}
.chips a:hover,.chips a:focus-visible{border-color:var(--akzent);color:var(--akzent-dunkel)}
.chips a.an{background:var(--akzent);border-color:var(--akzent);color:#fff}
.chips a.an span{color:#fff}

/* ---------- Formular. Der wichtigste Teil der Seite ---------- */
.formular{display:grid;gap:1.5rem;max-width:720px}
.feld{display:grid;gap:.4rem}
.feld>label,.feldgruppe>legend{font-weight:700;font-size:1.05rem;color:var(--tinte)}
.feld-hilfe{font-size:.95rem;color:var(--tinte-2);margin:0}
.feld input[type=text],.feld input[type=email],.feld input[type=tel],.feld input[type=number],
.feld select,.feld textarea{
  width:100%;min-height:52px;padding:.7rem .9rem;border:2px solid var(--linie-2);background:#fff;
  color:var(--tinte);font:400 1.05rem/1.4 var(--text);border-radius:0}
/* 16 px ist die Grenze, unter der iOS beim Antippen hineinzoomt. */
.feld input,.feld select,.feld textarea{font-size:max(1.05rem,16px)}
.feld textarea{min-height:150px;resize:vertical;line-height:1.55}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--akzent);outline:none;
  box-shadow:0 0 0 3px var(--gruen-hell)}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.feld-fehler input,.feld-fehler select,.feld-fehler textarea{border-color:var(--fehler)}
.fehlertext{color:var(--fehler);font-weight:700;font-size:.98rem;margin:0}

/* Große Auswahlkacheln statt Auswahlliste: Auf dem Telefon trifft man eine
   Kachel, bei einem <select> mit sieben Einträgen greift man daneben. */
.feldgruppe{border:0;padding:0;margin:0}
.wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:10px;margin-top:.7rem}
.wahl label{position:relative;display:block;cursor:pointer}
.wahl input{position:absolute;opacity:0;width:1px;height:1px}
.wahl span{display:block;min-height:56px;padding:.8rem 1rem;border:2px solid var(--linie-2);
  background:#fff;font-weight:700;line-height:1.3}
.wahl span small{display:block;font-weight:400;font-size:.92rem;color:var(--tinte-2);margin-top:.15rem}
.wahl input:checked+span{border-color:var(--akzent);background:var(--gruen-hell);color:var(--akzent-dunkel)}
.wahl input:checked+span small{color:var(--akzent-dunkel)}
.wahl input:focus-visible+span{outline:3px solid var(--gruen);outline-offset:2px}

/* Kästchen: mindestens 24 px (WCAG 2.5.8) */
.haken{display:flex;align-items:flex-start;gap:.7rem;font-weight:400;line-height:1.45}
.haken input[type=checkbox]{width:24px;height:24px;min-width:24px;margin:.15rem 0 0;accent-color:var(--akzent)}

.meldung{padding:1rem 1.2rem;border-left:5px solid var(--fehler);background:var(--fehler-hell);
  color:var(--fehler);font-weight:700;margin:0 0 1.4rem}
.meldung.ok{border-left-color:var(--ok);background:var(--ok-hell);color:var(--ok)}

/* Zugeklappte Zusatzangaben: alles, was nicht Pflicht ist, versteckt sich
   hier. Wer es braucht, klappt auf; alle anderen scrollen vorbei. */
.mehr{border:1px solid var(--linie);background:var(--papier-2);padding:0 1.1rem}
.mehr summary{cursor:pointer;font-weight:700;padding:1rem 0;list-style:none}
.mehr summary::-webkit-details-marker{display:none}
.mehr summary::before{content:"+ ";color:var(--akzent-dunkel)}
.mehr[open] summary::before{content:"− "}
.mehr>div{padding-bottom:1.2rem;display:grid;gap:1.2rem}

/* ---------- Fortschritt des Formulars ---------- */
.schritte{display:flex;gap:.5rem;list-style:none;padding:0;margin:0 0 2rem;flex-wrap:wrap;font-size:.92rem}
.schritte li{display:flex;align-items:center;gap:.4rem;color:var(--tinte-2)}
.schritte li::before{content:attr(data-nr);display:grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:var(--gruen-hell);color:var(--akzent-dunkel);font-weight:700}

/* ---------- Artikel ---------- */
.artikel{max-width:820px}
.artikel h2{margin-top:2.4rem}
.artikel ul{padding-left:1.2rem}
.artikel li{margin-bottom:.5rem}
.artikel .box{background:var(--papier-2);border-left:4px solid var(--gruen);padding:1rem 1.2rem;margin:1.4rem 0}

/* ---------- Tabellen ---------- */
.tabelle-rahmen{overflow-x:auto;margin:1.2rem 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:1rem}
th,td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--linie);vertical-align:top}
th{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tinte-2);font-weight:700}
tbody th{font-size:1rem;text-transform:none;letter-spacing:0;color:var(--tinte)}

/* ---------- Fragen ---------- */
.faq{border-top:1px solid var(--linie);margin-top:1.6rem}
.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;font-weight:700;font-size:1.15rem}
.faq summary::-webkit-details-marker{display:none}
.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;color:var(--akzent-dunkel)}
.faq details[open] summary::after{content:"−";background:var(--gruen);color:#fff}
.faq-antwort{padding-bottom:1.2rem;color:var(--tinte-2);max-width:74ch}

.rechtsgrundlagen{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--linie)}
.rechtsgrundlagen h2{font-size:1.2rem}
.recht-liste{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.4rem;font-size:1rem}
.recht-liste li{position:relative;padding-left:1rem;overflow-wrap:anywhere}
.recht-liste li::before{content:"\203A";position:absolute;left:0;color:var(--tinte-3)}
.recht-liste a{color:var(--tinte);text-decoration:underline;text-underline-offset:2px}
.recht-liste a:hover{color:var(--akzent-dunkel)}

.leer{background:#fff;border:1px dashed var(--linie-2);padding:24px;display:flex;gap:1.2rem;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.leer p{margin:0;max-width:62ch}

/* ---------- Musteranfragen ----------
 *
 * .box gab es bisher nur als .artikel .box. Die Musterseiten setzen den
 * Kasten auch außerhalb eines Artikels; ohne eigene Regel stünde er dort
 * völlig ungestaltet. Die Regel für den Artikel bleibt, sie ist spezifischer
 * und gewinnt — wie bisher.
 */
.box{background:var(--papier-2);border-left:4px solid var(--gruen);padding:1rem 1.2rem;margin:1.4rem 0}
.box p:last-child{margin-bottom:0}
.h2-klein{font-size:clamp(1.3rem,2.4vw,1.75rem)}

.anleitung{counter-reset:schritt;list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:1rem}
.anleitung li{counter-increment:schritt;position:relative;padding-left:3rem;max-width:72ch}
.anleitung li::before{content:counter(schritt);position:absolute;left:0;top:-2px;
  width:34px;height:34px;display:grid;place-items:center;background:var(--gruen);color:#fff;
  font:700 1.05rem/1 var(--titel);border-radius:50%}

.eckdaten{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--linie);border:1px solid var(--linie);margin:1.6rem 0 0}
.eckdaten>div{background:#fff;padding:14px 16px}
.eckdaten dt{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tinte-2);font-weight:700}
.eckdaten dd{margin:.25rem 0 0;font-size:1rem}

.brief-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.knopf-klein{min-height:44px;padding:.55rem 1.1rem;font-size:.85rem}

/* Der Brieftext.
 *
 * pre bricht von Haus aus NICHT um. Am Telefon liefe eine Betreffzeile damit
 * aus dem Bild heraus und schöbe die ganze Seite seitlich auf — derselbe
 * Fehler, den im Haus schon einmal eine Überschrift verursacht hat, nur dass
 * ihn hier niemand im Entwurf sieht, weil er am Schreibtisch nicht auftritt.
 * Deshalb white-space:pre-wrap: Die Zeilenschaltungen des Briefes bleiben,
 * zu lange Zeilen brechen um.
 */
.brief{white-space:pre-wrap;overflow-wrap:anywhere;font:400 1rem/1.6 ui-monospace,'Cascadia Mono',Consolas,monospace;
  background:#fff;border:1px solid var(--linie-2);border-left:4px solid var(--gruen);
  padding:clamp(16px,3vw,26px);margin:1rem 0 1.4rem;max-width:80ch;tab-size:2}
.luecke{background:var(--gruen-hell);color:var(--akzent-dunkel);font-weight:700;
  padding:.05em .2em;border-radius:2px}
@media (max-width:600px){.brief{font-size:.92rem}}

/* ---------- Handy ---------- */
@media(max-width:600px){
  /* Lange deutsche Wörter in Überschriften. Ohne diese Regel schiebt ein
     Kompositum die ganze Seite seitlich auf; hyphens:auto trennt dank
     lang="de" nach deutschen Regeln. */
  h1,h2,h3,h4{hyphens:auto;overflow-wrap:break-word}
  .feld-reihe{grid-template-columns:1fr}
  .knoepfe .knopf{width:100%}
}
@media(max-width:480px){
  table{table-layout:fixed}
  th,td{overflow-wrap:break-word}
}

/* Das Band über der Vorschau eines noch nicht freigegebenen Inserats.
   Auffällig mit Absicht: Es darf keine Sekunde unklar sein, dass diese Seite
   nicht die öffentliche ist. */
.vorschau-band{background:var(--nacht);color:var(--auf-nacht);padding:12px 0;font-size:.98rem;
  border-bottom:4px solid var(--gruen)}
.vorschau-band strong{color:var(--gruen-auf-dunkel)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .flaeche:hover{transform:none}
}

@media print{
  .kopf,.fuss,.knoepfe,.filter{display:none}
  body{font-size:11pt}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  /* Eine Musteranfrage wird ausgedruckt — dafür ist sie da. Der Kopierknopf
     gehört dann nicht aufs Papier, und die Lücken müssen auch in
     Schwarzweiß als Lücken erkennbar bleiben. */
  .brief-kopf .knopf{display:none}
  .brief{border:1px solid #999;border-left:3px solid #333;page-break-inside:avoid;max-width:none}
  .luecke{background:none;border-bottom:1.5px solid #333;font-weight:700;color:#000}
}