/* ================================================================
   LöWa Baumaschinen & Fahrzeugservice — stil.css
   Token-System aus der Welt des Betriebs:
   Kobalt = Transporter, Ocker = Hallenfassade/Raute, Stahl = Maschine.
   ================================================================ */

/* ---- Reset / Grundlage ---------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}

:root{
  /* Farben — Material, Werkzeug, Umgebung */
  --stahl:#12161c;
  --stahl-2:#1b232e;
  --kobalt:#1257a6;
  --kobalt-tief:#0e3f78;
  --ocker:#e79a1f;
  --ocker-hell:#f4b73d;
  --rost:#df5a24;
  --beton:#e9e6df;
  --kreide:#f7f6f2;
  --tinte:#171a1f;
  --tinte-2:#4c535d;
  --linie:#d4cfc5;
  --linie-dunkel:#2c3644;

  /* EINE Hebungsfarbe, am Untergrund gekippt */
  --hebung:var(--kobalt-tief);      /* Akzent auf hellem Grund */

  /* Schriftrollen */
  --display:"Archivo",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  /* Typo-Skala */
  --fs-hero:clamp(2.55rem,6.4vw,5.4rem);
  --fs-h2:clamp(1.85rem,4vw,3rem);
  --fs-h3:clamp(1.2rem,2.2vw,1.55rem);
  --fs-kennzahl:clamp(2.3rem,5vw,3.6rem);
  --fs-klein:.8125rem;

  --schale:1200px;
  --rand:clamp(1.15rem,5vw,3rem);
}

/* Hebung am Untergrund kippen, nicht am Baustein */
.dunkel,.fuss{--hebung:var(--ocker-hell)}
/* helle Kästen in dunklem Abschnitt setzen zurück */
.karte-hell,.hinweis-hell{--hebung:var(--kobalt-tief)}

body{
  font-family:var(--body);
  font-weight:400;
  line-height:1.62;
  color:var(--tinte);
  background:var(--beton);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

/* ---- Auszeichnung: alles auf einer Ebene ---------------------- */
/* 1 Rubrik (Kicker) */
.rubrik{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-weight:600;
  font-size:var(--fs-klein);letter-spacing:.16em;text-transform:uppercase;
  color:var(--hebung);margin:0 0 1.15rem;
  hyphens:manual;
}
.rubrik::before{
  content:"";inline-size:.62rem;block-size:.62rem;
  background:var(--hebung);transform:rotate(45deg);flex:0 0 auto;
}
/* 2 Datenwert */
.wert{font-family:var(--mono);font-weight:600;color:var(--hebung);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
/* 3 Betonung im Fließtext — kein Schriftwechsel */
em,.betont{font-style:normal;font-weight:600;color:var(--hebung)}
/* 4 Kennzahl — die Größe trägt, nicht die Farbe */
.kennzahl{font-family:var(--display);font-weight:800;
  font-size:var(--fs-kennzahl);line-height:.95;color:var(--tinte);
  letter-spacing:-.02em;hyphens:manual;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
.dunkel .kennzahl{color:var(--kreide)}

/* ---- Überschriften / Text ------------------------------------- */
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.04;
  letter-spacing:-.02em;text-wrap:balance;hyphens:manual}
.hero__titel{font-size:var(--fs-hero);font-weight:900;letter-spacing:-.03em}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);letter-spacing:-.01em;line-height:1.12}
p{text-wrap:pretty}
.fliess{max-width:60ch;hyphens:auto}
.fliess + .fliess{margin-top:1rem}
.vorspann{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--tinte-2);
  max-width:58ch;hyphens:auto}
.dunkel .vorspann{color:#c3ccd6}

/* ---- Schale / Abschnitt --------------------------------------- */
.schale{max-width:var(--schale);margin-inline:auto;padding-inline:var(--rand)}
.abschnitt{padding-block:clamp(3.5rem,8vw,7rem)}
.abschnitt--schmal{padding-block:clamp(2.5rem,5vw,4rem)}
.dunkel{background:var(--stahl);color:var(--kreide)}
.stahl2{background:var(--stahl-2)}
.kobaltgrund{background:var(--kobalt);color:#fff}
/* Aufgehellter Ocker: --ocker-hell traegt auf Kobalt nur 3,98:1, zu wenig
   fuer den 13-px-Kicker. #FFD27A ergibt 5,02:1 bei gleichem Charakter. */
.kobaltgrund{--hebung:#FFD27A}

.kopfblock{max-width:62ch;margin-bottom:clamp(2rem,4vw,3.25rem)}
/* Die Rubrik ist ausgenommen — sonst schlaegt .kopfblock p (0,1,1) die
   Regel .rubrik (0,1,0) und der Kicker verliert seine Akzentfarbe.
   Auf dem Kobaltband ergab das 1,09:1, also praktisch unsichtbar. */
.kopfblock p:not(.rubrik){color:var(--tinte-2)}
.dunkel .kopfblock p:not(.rubrik){color:#c3ccd6}

/* ---- Kopfzeile / Navigation ----------------------------------- */
.kopf{position:sticky;top:0;z-index:50;background:var(--stahl);
  color:var(--kreide);border-bottom:1px solid var(--linie-dunkel)}
.kopf__reihe{display:flex;align-items:center;gap:1rem;
  min-height:68px;padding-block:.5rem}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;
  color:inherit;flex:0 0 auto}
.marke__mark{inline-size:34px;block-size:34px;flex:0 0 auto}
.marke__wort{font-family:var(--display);font-weight:900;font-size:1.32rem;
  letter-spacing:.01em;line-height:1}
.marke__zusatz{display:block;font-family:var(--mono);font-weight:500;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:#9aa6b3;margin-top:.15rem}
.marke__text{display:flex;flex-direction:column}

.kopf__nav{margin-left:auto}
.kopf__liste{display:flex;align-items:center;gap:.2rem}
.kopf__liste a{display:inline-block;text-decoration:none;font-weight:500;
  font-size:.95rem;padding:.55rem .7rem;border-radius:2px;color:#d4dbe3}
.kopf__liste a:hover{color:#fff;background:var(--stahl-2)}
.kopf__liste a[aria-current="page"]{color:#fff}
.kopf__liste a[aria-current="page"]::after{content:"";display:block;
  height:2px;background:var(--ocker);margin-top:.28rem;border-radius:2px}
.kopf__tel{margin-left:.35rem}

.nav-schalter{display:none;margin-left:auto;background:var(--stahl-2);
  color:#fff;border:1px solid var(--linie-dunkel);border-radius:3px;
  padding:.5rem .8rem;gap:.5rem;align-items:center;cursor:pointer;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.nav-schalter__balken{position:relative;inline-size:18px;block-size:2px;
  background:currentColor;display:inline-block}
.nav-schalter__balken::before,.nav-schalter__balken::after{content:"";
  position:absolute;left:0;inline-size:18px;block-size:2px;background:currentColor}
.nav-schalter__balken::before{top:-6px}.nav-schalter__balken::after{top:6px}

/* ---- Knöpfe ---------------------------------------------------- */
.knopf,.knopf-geist{display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--body);font-weight:600;font-size:.98rem;line-height:1;
  text-decoration:none;padding:.85rem 1.4rem;border-radius:3px;
  cursor:pointer;border:2px solid transparent}
.knopf{background:var(--kobalt);color:#fff}
.knopf:hover{background:var(--kobalt-tief)}
.knopf-geist{background:transparent;border-color:currentColor;color:inherit}
.knopf-geist:hover{background:var(--rost);border-color:var(--rost);color:#fff}
.dunkel .knopf-geist:hover{color:#fff}
.knopf--klein{padding:.6rem 1rem;font-size:.9rem}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* ---- Hero ------------------------------------------------------ */
.hero{position:relative;isolation:isolate;background:var(--stahl);color:#fff;
  overflow:hidden}
.hero__foto{position:absolute;inset:0;inline-size:100%;block-size:100%;
  object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(9,12,16,.62) 0%,rgba(9,12,16,.72) 55%,rgba(9,12,16,.9) 100%)}
.hero__innen{padding-block:clamp(4rem,13vw,8.5rem);max-width:56rem}
.hero .rubrik{color:var(--ocker-hell)}
.hero .rubrik::before{background:var(--ocker-hell)}
.hero__titel{margin-bottom:1.25rem}
.hero__unter{font-size:clamp(1.05rem,1.7vw,1.32rem);max-width:46ch;
  color:#e7ebef;hyphens:auto;text-wrap:pretty}
.hero__meta{display:flex;flex-wrap:wrap;gap:1.4rem 2.2rem;margin-top:2.3rem;
  padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.18)}
.hero__meta div{min-width:0}
.hero__meta dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:#aeb8c2}
.hero__meta dd{margin:.25rem 0 0;font-family:var(--display);font-weight:700;
  font-size:1.15rem;color:#fff;font-variant-numeric:tabular-nums}

/* ---- Gewerke als Hallentore (Signatur-Layout) ----------------- */
.tore{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;background:var(--linie);border:1px solid var(--linie)}
.tor{background:var(--kreide);padding:clamp(1.5rem,3vw,2.2rem);min-width:0;
  display:flex;flex-direction:column;gap:.7rem;text-decoration:none;color:inherit;
  position:relative}
.tor:hover{background:#fff}
.tor__nr{font-family:var(--mono);font-weight:600;font-size:.78rem;
  letter-spacing:.12em;color:var(--tinte-2)}
.tor h3{margin-top:.2rem}
.tor p{color:var(--tinte-2);font-size:.96rem;hyphens:auto}
.tor__pfeil{margin-top:auto;font-family:var(--mono);font-weight:600;
  font-size:.85rem;letter-spacing:.06em;color:var(--hebung);
  display:inline-flex;align-items:center;gap:.4rem}
.tor:hover .tor__pfeil{color:var(--rost)}
.tor::before{content:"";position:absolute;left:0;top:0;inline-size:100%;
  block-size:4px;background:var(--kobalt);transform:scaleX(0);transform-origin:left}
.tor:hover::before{transform:scaleX(1)}

/* ---- Karten-Raster (Leistungen) ------------------------------- */
.raster{display:grid;gap:clamp(1rem,2.5vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.karte{background:var(--kreide);border:1px solid var(--linie);border-radius:4px;
  padding:clamp(1.4rem,2.6vw,1.9rem);min-width:0}
.karte-hell{background:var(--kreide);color:var(--tinte)}
.karte h3{margin-bottom:.6rem}
.karte p{color:var(--tinte-2);font-size:.97rem;hyphens:auto}
.karte ul{margin-top:.8rem;display:grid;gap:.45rem}
.karte li{position:relative;padding-left:1.15rem;font-size:.95rem;
  color:var(--tinte-2)}
.karte li::before{content:"";position:absolute;left:0;top:.55em;
  inline-size:.42rem;block-size:.42rem;background:var(--hebung);transform:rotate(45deg)}

/* ---- Zwei-Spalten-Block --------------------------------------- */
.zwei{display:grid;gap:clamp(1.8rem,4vw,3.2rem);align-items:start;
  grid-template-columns:1fr}
@media(min-width:820px){.zwei{grid-template-columns:1.05fr .95fr}
  .zwei--umkehr>*:first-child{order:2}}
.zwei>*{min-width:0}
.medienrahmen{border:1px solid var(--linie);border-radius:5px;overflow:hidden;
  background:#fff}
.dunkel .medienrahmen{border-color:var(--linie-dunkel)}
.medienrahmen img{inline-size:100%;height:auto}
.bildnote{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--tinte-2);padding:.6rem .85rem;border-top:1px solid var(--linie);
  background:var(--kreide)}

/* ---- Zahlenliste: EINE gemeinsame Spalte ---------------------- */
.datenliste{display:grid;grid-template-columns:auto 1fr;
  column-gap:clamp(1.1rem,3vw,2.2rem);row-gap:clamp(1.1rem,2.5vw,1.7rem);
  align-items:baseline;margin-top:.5rem}
.datenliste>div{display:contents}
.datenliste dt{grid-column:1;justify-self:start}
.datenliste dd{grid-column:2;margin:0;color:var(--tinte-2);
  align-self:center;hyphens:auto}
.dunkel .datenliste dd{color:#c3ccd6}
.datenliste .kennzahl{color:var(--hebung)}
.dunkel .datenliste .kennzahl{color:var(--ocker-hell)}
.datenliste dd b{font-weight:600;color:var(--tinte);display:block;
  font-size:1.02rem;margin-bottom:.1rem}
.dunkel .datenliste dd b{color:#fff}
/* erstes Element ohne Vorpolster (zwei Spalten auf gleicher Höhe) */
.randlos-oben{margin-top:0}
.randlos-oben>*:first-child{margin-top:0}

/* ---- Mietpark-Tabelle ----------------------------------------- */
.tabellenhuelle{overflow-x:auto;border:1px solid var(--linie);border-radius:5px;
  background:var(--kreide)}
.dunkel .tabellenhuelle{border-color:var(--linie-dunkel);background:var(--stahl-2)}
table.park{inline-size:100%;border-collapse:collapse;min-width:520px}
.park caption{text-align:left;font-family:var(--mono);font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-2);
  padding:.9rem 1rem;border-bottom:1px solid var(--linie)}
.dunkel .park caption{color:#aeb8c2;border-color:var(--linie-dunkel)}
.park th,.park td{text-align:left;padding:.72rem 1rem;
  border-bottom:1px solid var(--linie);font-size:.95rem;vertical-align:baseline}
.dunkel .park th,.dunkel .park td{border-color:var(--linie-dunkel)}
.park thead th{font-family:var(--mono);font-weight:600;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-2)}
.dunkel .park thead th{color:#aeb8c2}
.park tbody th{font-weight:600}
.park td.zahl,.park th.zahl{text-align:right;font-family:var(--mono);
  font-variant-numeric:tabular-nums;color:var(--hebung);font-weight:600;white-space:nowrap}
.dunkel .park td.zahl{color:var(--ocker-hell)}
.park tbody tr:last-child th,.park tbody tr:last-child td{border-bottom:0}
.park tbody tr:hover{background:#fff}
.dunkel .park tbody tr:hover{background:#212b37}
.park .gruppe td{background:var(--beton);font-family:var(--mono);
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinte-2);font-weight:600}
.dunkel .park .gruppe td{background:#161d26;color:#aeb8c2}

/* ---- Partner-Streifen ----------------------------------------- */
.partner{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2rem;
  padding:1.3rem clamp(1.15rem,5vw,3rem);border:1px solid var(--linie);
  border-radius:5px;background:var(--kreide)}
.partner p{font-size:.95rem;color:var(--tinte-2);max-width:44ch;min-width:0}
.partner img{border-radius:3px;flex:0 0 auto}

/* ---- Galerie -------------------------------------------------- */
.galerie{display:grid;gap:1px;background:var(--linie-dunkel);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  border:1px solid var(--linie-dunkel)}
.galerie figure{margin:0;position:relative;min-width:0;background:var(--stahl)}
.galerie img{inline-size:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.galerie figcaption{position:absolute;left:0;bottom:0;right:0;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:#fff;
  padding:.9rem .85rem .65rem;
  background:linear-gradient(0deg,rgba(9,12,16,.82),transparent)}

/* ---- Kontakt / Formular --------------------------------------- */
.kontakt-gitter{display:grid;gap:clamp(1.8rem,4vw,3rem);
  grid-template-columns:1fr}
@media(min-width:860px){.kontakt-gitter{grid-template-columns:1fr 1fr}}
.kontakt-gitter>*{min-width:0}
.infozeile{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.1rem;
  align-items:baseline;margin-top:1.5rem}
.infozeile dt{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinte-2)}
.dunkel .infozeile dt{color:#aeb8c2}
.infozeile dd{margin:0;font-weight:500}
.infozeile a{color:var(--hebung);text-decoration:none;font-weight:600;
  overflow-wrap:anywhere}
.infozeile a:hover{text-decoration:underline}

form.anfrage{display:grid;gap:1.05rem;margin-top:.5rem}
.feld{display:grid;gap:.4rem;min-width:0}
.feld label{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinte-2)}
.dunkel .feld label{color:#aeb8c2}
.feld input,.feld textarea,.feld select{inline-size:100%;background:#fff;color:var(--tinte);
  border:1px solid var(--linie);border-radius:3px;padding:.7rem .8rem;
  font-size:1rem}
.feld textarea{min-height:130px;resize:vertical}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:none;border-color:var(--kobalt);
  box-shadow:0 0 0 3px rgba(18,87,166,.22)}
.zwei-felder{display:grid;gap:1.05rem;grid-template-columns:1fr}
@media(min-width:520px){.zwei-felder{grid-template-columns:1fr 1fr}}
.formnote{font-size:.82rem;color:var(--tinte-2)}
.dunkel .formnote{color:#aeb8c2}

/* ---- Fußzeile -------------------------------------------------- */
.fuss{background:var(--stahl);color:#c3ccd6;
  border-top:3px solid var(--kobalt)}
.fuss__gitter{display:grid;gap:2rem;grid-template-columns:1fr;
  padding-block:clamp(2.8rem,6vw,4rem)}
@media(min-width:720px){.fuss__gitter{grid-template-columns:1.4fr 1fr 1fr}}
.fuss h4{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;color:#8f9bA8;margin-bottom:1rem;font-weight:600}
.fuss a{color:#d4dbe3;text-decoration:none;overflow-wrap:anywhere}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss__liste{display:grid;gap:.5rem;font-size:.95rem}
.fuss__marke{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.fuss__marke .marke__wort{color:#fff}
.fuss__klein{font-size:.88rem;line-height:1.7;color:#9aa6b3}
.fuss__klein .wert{color:var(--ocker-hell)}
.fuss__leiste{border-top:1px solid var(--linie-dunkel);
  padding-block:1.1rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;
  align-items:center;font-size:.82rem;color:#8f9bA8}
.fuss__leiste .raute-mini{inline-size:.6rem;block-size:.6rem;
  background:var(--ocker);transform:rotate(45deg);display:inline-block}

/* ---- Aufzählung schlicht -------------------------------------- */
.merkliste{display:grid;gap:.7rem;margin-top:1.4rem;max-width:56ch}
.merkliste li{position:relative;padding-left:1.5rem;hyphens:auto}
.merkliste li::before{content:"";position:absolute;left:0;top:.5em;
  inline-size:.55rem;block-size:.55rem;background:var(--hebung);transform:rotate(45deg)}

/* ---- Diverse Helfer ------------------------------------------- */
.band{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;align-items:baseline}
.trenn{border:0;border-top:1px solid var(--linie);margin:0}
.dunkel .trenn{border-color:var(--linie-dunkel)}
.mittig{text-align:center;margin-inline:auto}

/* ---- Fokus ---------------------------------------------------- */
:focus-visible{outline:3px solid var(--rost);outline-offset:2px;border-radius:2px}
.kopf :focus-visible,.hero :focus-visible,.dunkel :focus-visible,.fuss :focus-visible{
  outline-color:var(--ocker-hell)}

.sichtbar-sprung{position:absolute;left:-9999px;top:0;background:var(--ocker);
  color:var(--stahl);padding:.7rem 1.1rem;font-weight:700;z-index:100;border-radius:0 0 4px 0}
.sichtbar-sprung:focus{left:0}

/* ---- Mobile Navigation ---------------------------------------- */
@media(max-width:900px){
  .nav-schalter{display:inline-flex}
  .kopf__nav{position:absolute;left:0;right:0;top:100%;background:var(--stahl);
    border-bottom:1px solid var(--linie-dunkel);margin-left:0;
    display:none;z-index:60}
  .kopf__nav.offen{display:block;max-height:80vh;overflow:auto}
  .kopf__liste{flex-direction:column;align-items:stretch;gap:0;
    padding:.6rem var(--rand) 1.2rem}
  .kopf__liste a{padding:.85rem .2rem;border-bottom:1px solid var(--linie-dunkel)}
  .kopf__liste a[aria-current="page"]::after{display:none}
  .kopf__liste a[aria-current="page"]{color:var(--ocker-hell)}
  .kopf__tel{margin:.9rem 0 0}
  .kopf{position:relative}
}

/* ---- Unterseiten-Hero (kompakter) + Brotkrumen ---------------- */
.hero--unter .hero__innen{padding-block:clamp(2.8rem,8vw,5rem);max-width:62rem}
.hero--unter::after{background:linear-gradient(95deg,rgba(9,12,16,.9) 0%,rgba(9,12,16,.68) 55%,rgba(9,12,16,.42) 100%)}
.krumen{display:flex;flex-wrap:wrap;gap:.5rem;font-family:var(--mono);
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#aeb8c2;
  margin-bottom:1.15rem}
.krumen a{color:#d4dbe3;text-decoration:none}
.krumen a:hover{color:#fff;text-decoration:underline}
.krumen span[aria-current]{color:var(--ocker-hell)}
.krumen .teiler{color:#93a0ad}   /* #5c6875 trug nur 3,19:1 */

/* ---- Ausklang / CTA-Band -------------------------------------- */
.ausklang .schale{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:1.3rem 2.5rem}
.ausklang__text{max-width:34ch;min-width:0}
.ausklang h2{margin:0 0 .5rem}
.ausklang p{margin:0;color:#dbe6f3}
.ausklang .knopf-reihe{margin-top:0;flex:0 0 auto}

/* ---- Rechtstexte (Impressum, Datenschutz) ---------------------------------- */
.rechtstext{max-width:70ch}
.rechtstext h2{font-size:clamp(1.15rem,1rem + .7vw,1.45rem);margin:2.4rem 0 .7rem;
  color:var(--kobalt-tief)}
.rechtstext h2:first-of-type{margin-top:0}
.rechtstext p{margin:0 0 .9rem;color:var(--tinte-2)}
.rechtstext a{color:var(--kobalt-tief);text-underline-offset:3px}
.rechtstext .wert{color:var(--tinte)}

/* Fehlende Pflichtangaben sichtbar markieren, statt sie zu erfinden */
.offen{background:#ffe9bc;border-bottom:2px solid var(--kobalt-tief);
  padding:.05em .4em;font-style:italic;white-space:nowrap;color:var(--tinte)}
.offen-hinweis{background:var(--kreide);border-left:4px solid var(--kobalt);
  padding:1rem 1.2rem;margin-bottom:2.2rem;font-size:.95rem;color:var(--tinte-2)}
.offen-hinweis strong{color:var(--tinte)}

/* Rechtslinks in der Fussleiste */
.fuss__recht{display:inline-flex;flex-wrap:wrap;gap:1.2rem;margin-left:auto}
.fuss__recht a{color:#d4dbe3;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.fuss__recht a:hover{color:#fff}


/* Der MENUE-Knopf ragte auf schmalen Anzeigen 2px ueber den Rand
   (04.08.2026 bei 390px gemessen). Etwas weniger Rand und Polster. */
@media (max-width:839.98px){
  .kopf__reihe{ padding-inline:1rem; gap:.6rem; min-width:0; }
  .kopf__reihe > *{ min-width:0; }
  .kopf__reihe .nav-schalter{ padding-inline:.75rem; flex:0 0 auto; }
}