/* ============================================================
   NODELOOP · theme.css
   Mandant: MD CARE (mdcare) · Config-Version 113
   AUTOMATISCH GENERIERT — nicht von Hand bearbeiten.
   Änderungen gehören in tenant_config, danach neu generieren.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  /* ---------- 1 · Akzent + berechnete Abstufungen ---------- */
  --akzent: #77cff1;
  --akzent-rgb: 119,207,241;
  --akzent-10: rgba(119,207,241,0.10);
  --akzent-10: color-mix(in oklch, var(--akzent) 10%, transparent);
  --akzent-15: rgba(119,207,241,0.15);
  --akzent-15: color-mix(in oklch, var(--akzent) 15%, transparent);
  --akzent-20: rgba(119,207,241,0.20);
  --akzent-20: color-mix(in oklch, var(--akzent) 20%, transparent);
  --akzent-30: rgba(119,207,241,0.30);
  --akzent-30: color-mix(in oklch, var(--akzent) 30%, transparent);
  --akzent-50: rgba(119,207,241,0.50);
  --akzent-50: color-mix(in oklch, var(--akzent) 50%, transparent);
  --akzent-deep: #1d82a9;   /* berechnet: dunklere Variante fuer Verlaeufe */
  --akzent2: #ffc14d;

  /* ---------- 2 · Flächen (vier definierte Ebenen) --------- */
  --s0: #080b0f;
  --s1: #0b1016;
  --s2: #0e1318;
  --s3: #131a22;
  --ink:   #080b0f;
  --ink-rgb: 8,11,15;
  --panel: #0e1318;
  --card:  #111820;

  /* ---------- 3 · Text (aus --text abgeleitet) ------------- */
  --text:  #e8edf2;
  --text-rgb: 232,237,242;
  --fg-rgb: 255,255,255;   /* Overlay-Basis: hell auf dunkel, dunkel auf hell */
  --muted: rgba(255,255,255,0.6);
  --soft:  rgba(255,255,255,0.42);
  --dim:   rgba(232,237,242,0.36);
  --hair:  rgba(232,237,242,0.07);
  /* Deckende Zweitfassung: gewinnt, wo color-mix unterstuetzt wird, und
     wird sonst schon beim Parsen verworfen - die Zeilen darueber sind
     dann der Fallback. Deckend heisst messbar: ein Alpha-Ton haengt am
     Untergrund, und genau daran sind die 3.27:1-Befunde entstanden. */
  --muted: color-mix(in oklch, var(--text) 74%, var(--s0));
  --soft:  color-mix(in oklch, var(--text) 86%, var(--s0));
  --dim:   color-mix(in oklch, var(--text) 58%, var(--s0));
  --hair:  color-mix(in oklch, var(--text) 10%, var(--s0));
  --line:  rgba(119,207,241,0.1);

  /* ---------- 4 · Typografie -------------------------------
     Zeilenhoehe, Laufweite und Schnitt kommen aus der Handschrift,
     lassen sich aber ueber design.typo_skala ueberschreiben.
     WARUM: Der NLSTIL-Layer schreibt h1,h2,h3{line-height:...}
     DIREKT auf jede Seite - auch auf handgebaute Bestandsseiten,
     die diese Variable nie benutzt haben. Eine Handschrift mit
     1.00 laesst dort die Zeilen ineinanderlaufen. Wer einen
     Bestand hat, braucht ein Ventil. */
  --font-headline: 'Syne', sans-serif;
  --font-body:     'DM Sans', sans-serif;
  --font-weight-body: 300;
  --mono: ui-monospace,"SF Mono","Roboto Mono",Menlo,Consolas,monospace;
  --t-xs: 0.605rem;
  --t-sm: 0.795rem;
  --t-md: 0.87rem;
  --t-lg: 0.985rem;
  --font-weight-headline: 800;
  --headline-lh: 1.14;
  --laufweite: 0em;

  /* ---------- 4b · Handschrift (Preset: kante) --------- */
  --radius:       0px;
  --radius-gross: 0px;
  --rahmen:       1px;
  --knopf-radius: 0px;
  --knopf-pad:    15px 32px;
  --knopf-weight: 700;
  --label-versal: uppercase;

  /* ---------- 5 · Layout ----------------------------------- */
  --shell:  1400px;
  --pad:    clamp(1.15rem,4vw,3.5rem);
  --gutter: clamp(1.25rem,2.4vw,2.25rem);
  --nav-h:  70px;
  --sec-y:  clamp(4.5rem,8.5vw,8rem);
  --bleed:  calc(max(0px,(100vw - var(--shell))/2) + var(--pad));

  /* ---------- 6 · Bewegung & Tints ------------------------- */
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-aus: cubic-bezier(.4,0,.2,1);
  --tint:        radial-gradient(135% 88% at 14% 0%,rgba(119,207,241,0.055),rgba(119,207,241,0) 58%);
  --tint-strong: radial-gradient(135% 88% at 14% 0%,rgba(119,207,241,0.1),rgba(119,207,241,0) 60%);
  /* Zweitfassung in oklab: gleichmaessiger Verlauf ohne Grauband. */
  --tint:        radial-gradient(in oklab 135% 88% at 14% 0%,color-mix(in oklch, var(--akzent) 6%, transparent),transparent 58%);
  --tint-strong: radial-gradient(in oklab 135% 88% at 14% 0%,color-mix(in oklch, var(--akzent) 10%, transparent),transparent 60%);

  /* ---------- 7 · Kompatibilität mit Bestands-Templates ----
     --blue kommt 472× vor, --gold 12×. Diese Aliase halten den
     Bestand lauffähig, während schrittweise auf --akzent
     umgestellt wird. Neue Templates nutzen nur --akzent. */
  --blue: var(--akzent);
  --blue-deep: var(--akzent-deep);
  --blue-10: var(--akzent-10);
  --blue-15: var(--akzent-15);
  --blue-20: var(--akzent-20);
  --blue-30: var(--akzent-30);
  --blue-50: var(--akzent-50);
  --gold: var(--akzent2);
}

/* NLSTIL:START (Handschrift: kante · Grundton: nacht · Logo: Bild 150px×34px) */
.btn, .btn-primary, .nav-actions .btn, .final-actions .btn{
  border-radius:var(--knopf-radius);padding:var(--knopf-pad);
  font-weight:var(--knopf-weight);letter-spacing:var(--laufweite)}
h1,h2,h3,.section-title,.hero h1{font-weight:var(--font-weight-headline);
  line-height:var(--headline-lh);letter-spacing:var(--laufweite)}
.card,.leistung-card,.link-hub-card,.faq-item,.beweis-karte,.nlb-rechen{
  border-radius:var(--radius-gross);border-width:var(--rahmen)}
.badge,.chip,.mini-label,.eyebrow,.nlb-rechen-label{
  text-transform:var(--label-versal);letter-spacing:calc(var(--laufweite) + .12em)}
img,.bild,.hero-bild,figure img{border-radius:var(--radius)}
.nav-logo.nav-logo,.nl-logo.nl-logo,.footer-brand.footer-brand,.logo.logo{background:url("/logo.png") no-repeat left center;background-size:contain;width:150px;height:34px;display:inline-block;text-indent:-9999px;overflow:hidden;white-space:nowrap;flex:0 0 auto;text-decoration:none}@media (max-width:760px){.nav-logo.nav-logo,.nl-logo.nl-logo,.footer-brand.footer-brand,.logo.logo{width:120px;height:28px}}
/* NLSTIL:END */

/* NLCRAFT:START v1 — Handwerk: Umbruch, Zeilenmass, Ziffern, Fokus, Bewegung */
/* ── KOPFLEISTE UND HANDY-LEISTE ────────────────────────────
   Gemessen auf einer erzeugten Service-Seite: die Navigation stand
   nach dem Scrollen bei top=-917px. "position:sticky" war gesetzt,
   wirkte aber nicht - die Templates setzen body{overflow-x:clip},
   und ein Clipping-Kontext auf dem Body hebt sticky fuer alle
   Kinder auf.

   Vier Korrekturen durchgemessen: clip entfernen half nicht, clip
   auf html verschieben half nicht. Nur "fixed" haelt. Dafuer
   braucht der Body oben Platz, sonst liegt der erste Abschnitt
   darunter.

   Die Handy-Leiste war auf der Startseite "static" und 27px hoch -
   sie stand einfach im Textfluss und erschien auch am Bildschirm.
   Das Markup liefert die Engine, die Gestaltung fehlte nur im
   index_template. Hier gilt sie fuer alle. */
html .nav{position:fixed;left:0;right:0;top:0;z-index:100}
body:has(.nav){padding-top:var(--nav-h)}
@media (max-width:760px){
  html .mobile-cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex}
  /* Platz fuer die Leiste, sonst verdeckt sie den Fuss. */
  body{padding-bottom:calc(var(--nav-h) - 6px)}
}
@media (min-width:761px){ html .mobile-cta-bar{display:none} }

/* ── KOPFLEISTE AUF DEM HANDY ───────────────────────────────
   Gemessen bei 390px: der Knopf "Nachricht senden" war 194px
   breit - die halbe Kopfleiste, neben einem 87px breiten Logo.
   Zusammen mit dem Menuknopf bleibt kein Platz.

   Der Aufruf gehoert dort nicht doppelt hin: die feste Leiste am
   unteren Rand traegt ihn bereits, und sie ist mit dem Daumen
   erreichbar. Oben bleiben Logo und Menue. */
@media (max-width:760px){
  html .nav .nav-actions{display:none}
  html .nav-tel{display:none}
}

html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body{font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
table td,table th,.preis,.betrag,.nlb-rechen-row strong{font-variant-numeric:tabular-nums lining-nums}
h1,h2,h3,.section-title,.hero h1{text-wrap:balance;hyphens:none}
p,li,.lead{text-wrap:pretty}
p{max-width:72ch}.lead,.hero p{max-width:62ch}
h1,.hero h1{letter-spacing:calc(var(--laufweite) - .012em)}
h2,.section-title{letter-spacing:calc(var(--laufweite) - .006em)}
:target,section[id],div[id]{scroll-margin-top:calc(var(--nav-h) + 18px)}
html{scroll-behavior:smooth}
img{max-width:100%;height:auto;display:block}figure{margin:0}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--akzent);outline-offset:3px;border-radius:var(--radius)}
:where(a,button):focus:not(:focus-visible){outline:none}
::selection{background:var(--akzent);color:var(--ink)}
*{scrollbar-color:var(--akzent) transparent;scrollbar-width:thin}
a,button,.btn,.card,.link-hub-card,.leistung-card{
  transition:color .18s var(--ease),background-color .18s var(--ease),
  border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn:hover,.btn-primary:hover{transform:translateY(-1px);
  box-shadow:0 1px 2px rgba(0,0,0,.28),0 8px 24px -8px var(--akzent-50)}
.btn:active{transform:translateY(0)}
.card:hover,.link-hub-card:hover,.leistung-card:hover{transform:translateY(-2px);
  border-color:var(--akzent-30);box-shadow:0 1px 2px rgba(0,0,0,.22),0 18px 40px -22px rgba(0,0,0,.55)}
@media (min-resolution:2dppx){.card,.link-hub-card,.faq-item,.nlb-rechen{border-width:.5px}}
section>*:first-child,.wrap>*:first-child{margin-top:0}
p+p{margin-top:.9em}h2+p,h3+p{margin-top:.55em}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{
  animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .btn:hover,.card:hover{transform:none}}
@media (max-width:760px){
  a.btn,button,.btn,.nav-tel,.mobile-cta-bar a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  input,select,textarea{font-size:16px}
  h1,.hero h1{letter-spacing:calc(var(--laufweite) - .006em)}
  p,.lead{max-width:none}}
@media print{body{background:#fff;color:#000}
  .nav,.mobile-cta-bar,.final-cta-orb,video{display:none !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}}
/* NLCRAFT:END */

/* NLBAU:START v1 — Bauweise (kopf:geteilt · rhythmus:linie · kopfspalte:zentriert · raster:gleich · dichte:luftig) */
/* kopf · geteilt */
body:has(.nav) .hero-g{align-items:start}
body:has(.nav) .hero-left{grid-column:1/8;padding-bottom:2rem}
body:has(.nav) .hero-right{grid-column:8/13;margin-top:3.2rem}
body:has(.nav) .hero-right .plate{margin-bottom:0}
@media (max-width:1024px){.hero-right{margin-top:0}}
/* rhythmus · linie */
body:has(.nav) .seam-txt{display:none}
body:has(.nav) .seam{min-height:0;padding:0}
body:has(.nav) .seam-in{padding:0}
body:has(.nav) .seam-rule{width:100%;height:1px;background:var(--hair)}
/* kopfspalte · zentriert */
body:has(.nav) .hd, .hd.col-head{position:static;grid-column:1/-1;max-width:52rem;
  margin-inline:auto;margin-bottom:2.2rem;text-align:center}
body:has(.nav) .col-body{grid-column:1/-1}
/* raster · gleich */
body:has(.nav) .srv{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
body:has(.nav) .srv-lg{grid-row:auto}
/* dichte · luftig */
:root{--sec-y:clamp(6rem,11vw,11rem);--gutter:clamp(1.8rem,3.4vw,3rem);--shell:1520px}
body:has(.nav) p,li,.lead{max-width:64ch}
/* Handy-Wache: hebt auf, was nur im zwoelfspaltigen Raster traegt */
@media (max-width:1024px){
  .hd, .hd.col-head{position:static;top:auto}
  .srv{grid-template-columns:1fr}
  .srv-lg{grid-row:auto}
  .hero-left, .hero-right{grid-column:1/-1}
  .hero-right{position:static;opacity:1;z-index:auto}
}
@media (max-width:760px){
  :root{--gutter:clamp(1rem,4vw,1.5rem);--shell:100%}
  .orte, .spalten, [style*="columns:"]{columns:1}
  p, li, td, dd, .lead{overflow-wrap:break-word}
}
/* NLBAU:END */

/* NLSCHUTZ:START v2 — Navigation, Zahlen, Hero, Handy */

/* 1 · NAVIGATION IST KEINE FLIESSTEXT-ZONE
   Der CRAFT-Layer erlaubt Silbentrennung auf a, li und span — gedacht
   fuer lange Komposita im Fliesstext. Die Navigation ist ein Flex-
   Container: passen die Punkte nicht in die Zeile, schrumpft Flex sie
   und die Trennung bricht Aussenreinigung zu Aus-sen-reini-gung.
   KEIN flex-wrap hier: ein dreizeiliger Kopf ist nicht besser als ein
   zerhacktes Wort. Passen elf Punkte nicht, gehoeren sie in ein
   Klappmenue — das ist Struktur, nicht CSS. */
.nav-links.nav-links a,.nav-links.nav-links li,
.nav-tel.nav-tel,.nav-actions.nav-actions a,.nav-actions.nav-actions .btn{
  hyphens:none;-webkit-hyphens:none;
  overflow-wrap:normal;word-wrap:normal;word-break:normal}

/* 2 · SILBENTRENNUNG NUR IN UEBERSCHRIFTEN
   Gemessen: Autoaufbereitung ist bei 76px Schrift 1042px breit und hat
   737px Platz. Das Wort MUSS brechen — die Frage ist nur, wo und ob mit
   Strich. Voraussetzung ist <html lang=de-CH>. */
html h1,html h2,html h3,html h4,html .section-title,html .h-sec{
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

/* 3 · ZAHLEN UND LABELS BRECHEN NIE
   Die Schrittnummer braucht 52px und hat auf dem Handy 49.6px. Chrome
   bricht dann zwischen den Ziffern: 0 ueber 1. Ein Wort umbrechen ist
   eine Notloesung, eine ZAHL umbrechen ist immer ein Fehler. */
html .step-n,html .tnum,html .stat-num,html .tb-num,html .chap,
html .tag,html .badge,html .chip,html .mini-label,html .seam-txt b,
html .srv-time,html .srv-price,html .nav-tel{
  white-space:nowrap;overflow-wrap:normal;word-break:keep-all}

/* 4 · HERO-UEBERSCHRIFT: WUCHT OHNE UEBERMASS
   Gemessen bei 1440px: die Startseite setzte 65px und brauchte sieben
   Zeilen. Das ist keine Schlagzeile mehr, das ist ein Absatz in
   Grossbuchstaben. Zwei Selektoren, weil die Seiten verschieden rechnen:
   die Startseite in cqi, die Service-Seiten in vw. */
html h1.hero-h1,html .hero-h1{font-size:clamp(1.9rem,8.2cqi,4.1rem)}
html .hero h1,html h1.hero-title{font-size:clamp(1.5rem,5.8vw,3.1rem)}

/* 5 · HERO-BILD NEBEN DIE UEBERSCHRIFT
   Vorher richtete align-items:end die rechte Spalte am unteren Rand aus.
   Gemessen bei 1440px endete die H1 bei y=493, das Bild begann erst bei
   y=835 — dreihundert Pixel Leere neben der wichtigsten Zeile.
   Nur ab 1025px: darunter gehoert das Bild unter den Text. */
@media (min-width:1025px){
  html .hero-g{align-items:start}
  html .hero-right{margin-top:3.2rem}
  html .hero-left{padding-bottom:2rem}
  html .hero-right .plate{margin-bottom:0}
}

/* 6 · HANDY: was im zwoelfspaltigen Raster traegt und hier nicht */
@media (max-width:1024px){
  .hd,.hd.col-head{position:static;top:auto}
  .hero-left,.hero-right{grid-column:1/-1}
}
@media (max-width:760px){
  html .step-n{font-size:clamp(1.15rem,5vw,1.5rem)}
  .orte,.spalten{columns:1}
  p,li,td,dd,.lead{overflow-wrap:break-word;max-width:none}
  a.btn,button.btn,.btn,.nav-tel,.mobile-cta-bar a{min-height:44px}
}

/* 7 · KLEBENDER SEKTIONSKOPF — nur auf dem Schirm */
.hd.col-head{position:sticky;top:calc(var(--nav-h) + 2rem);align-self:start}

/* ---- NAVKANON v3 — der eine Kopfbereich ----
   Quelle: servicegebiet-rheintal.html. Seit der Vorlagenreinigung
   bringt keine Seite mehr eigene Nav-Regeln mit. */
.nav.nav{position:sticky;top:0;z-index:100;
  background:rgba(8,11,15,.85);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line)}
.nav-inner.nav-inner{display:flex;align-items:center;
  justify-content:space-between;height:70px;gap:1.5rem;flex-wrap:nowrap;min-width:0}
/* KOPF-EINPASSUNG: gleiche Breite und gleicher Innenabstand wie der
   Seiteninhalt. Ohne sie klebt die Leiste am Fensterrand und laeuft
   darueber hinaus, sobald die Punkte nicht mehr passen. */
.nav-inner.nav-inner{max-width:var(--shell);margin-inline:auto;
  padding-inline:var(--pad);box-sizing:border-box}
.nav-links.nav-links{display:flex;gap:2rem;list-style:none;margin:0;padding:0;
  flex:1 1 auto;flex-wrap:nowrap;min-width:0;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none}
.nav-links.nav-links::-webkit-scrollbar{display:none}
/* flex:0 0 auto ist Pflicht: nowrap allein haelt den Text einzeilig,
   laesst die BOX aber schrumpfen — dann laeuft die Schrift in den
   Nachbarn. Genau das war am 03.09. im Kopf zu sehen. */
.nav-links.nav-links a,.nav-links.nav-links li,
.nav-actions.nav-actions>*,.nav-tel.nav-tel{
  flex:0 0 auto;min-width:max-content;white-space:nowrap;
  hyphens:none;-webkit-hyphens:none;overflow-wrap:normal;word-break:normal}
.nav-links.nav-links a{font-size:.85rem;font-weight:500;
  color:var(--muted);text-decoration:none}
.nav-links.nav-links a:hover{color:var(--text)}
.nav-actions.nav-actions{display:flex;align-items:center;gap:.75rem;flex:0 0 auto}
.nav-tel.nav-tel{font-size:.85rem;color:var(--muted);font-weight:500;text-decoration:none}
.nav-toggle.nav-toggle{flex-direction:column;gap:5px;cursor:pointer;padding:.5rem;
  background:none;border:none;min-height:44px;min-width:44px;
  align-items:center;justify-content:center}
.nav-toggle.nav-toggle span{display:block;width:22px;height:2px;
  background:var(--text);transition:all .3s}
@media (min-width:901px){ .nav-toggle.nav-toggle{display:none} }
@media (max-width:900px){
  body:has(.nav) .nav-links.nav-links{display:none}
  .nav-toggle.nav-toggle{display:flex}
  .nav-inner.nav-inner{height:60px}
}
/* ---- NAVKANON:END ---- */

/* ---- LESEBREITE v1 — kein Kasten schmaler als lesbar ----
   Eine Spalte, die auf null schrumpfen darf, macht aus einem Wort
   einen senkrechten Buchstabenstapel. Zwei Regeln verhindern das
   an der Wurzel, statt hinterher am Umbruch zu drehen. */

/* 1 · Rasterzellen haben eine Mindestbreite. min(...,100%) sorgt
   dafuer, dass die Zelle auf schmalen Schirmen trotzdem passt und
   nicht ueber den Rand hinauslaeuft. */
.srv,.grid-2,.two-col,.karten,.cards,.leistungen,.f-grid,.f-cols,
.footer-grid.footer-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}

/* Fussspalten fallen sonst auf Buchstabenbreite zusammen. Eine
   Mailadresse ist ein Wort ohne Trennstelle - die Spalte muss sie
   halten koennen. Verdoppelte Klassen, weil die Seiten eigene
   footer-Regeln im Inline-Block mitbringen. */
.footer-col.footer-col,.footer-contact.footer-contact,
.footer-brand.footer-brand,.footer-bottom.footer-bottom{
  min-width:min(220px,100%);overflow-wrap:anywhere}
.footer-col.footer-col h3,.footer-col.footer-col p,
.footer-col.footer-col a{overflow-wrap:anywhere;word-break:normal}
@media (max-width:760px){
  .footer-grid.footer-grid{grid-template-columns:1fr}
  .footer-col.footer-col,.footer-contact.footer-contact,
  .footer-brand.footer-brand,.footer-bottom.footer-bottom{min-width:0}
}

/* 2 · Textkaesten kippen unter 14 Zeichen ins Unlesbare.
   Vorher schrumpfen sie nicht weiter, danach wird umbrochen. */
p,li,dd,.lead,.card,.srv-item,.col-body,.hd,td,th{min-width:14ch}

/* 3 · Auf dem Handy gilt: eine Spalte. Ein zweispaltiges Raster
   auf 360 Pixeln ist der haeufigste Weg in denselben Fehler. */
@media (max-width:760px){
  .srv,.grid-2,.two-col,.karten,.cards,.leistungen{grid-template-columns:1fr}
  .srv-item{grid-template-columns:1fr}
  p,li,dd,.lead,.card,.srv-item,.col-body,.hd,td,th{min-width:0}
}
/* ---- LESEBREITE:END ---- */
/* NLSCHUTZ:END */

/* NLB:START v1 — Nodeloop-Bausteine (M11) · token-only, kollisionsfrei */
mark{background:var(--akzent-15);color:var(--text);padding:.06em .3em;border-radius:5px}
.nlb-rechen-section{padding:calc(var(--sec-y)*.6) 0 0}
.nlb-rechen{max-width:640px;margin:0 auto;background:var(--s1);border:1px solid var(--akzent-20);border-left:3px solid var(--akzent);border-radius:14px;padding:26px 28px}
.nlb-rechen-label{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--akzent);margin-bottom:8px}
.nlb-rechen h3{font-family:var(--font-headline);font-size:1.25rem;color:var(--text);margin:0 0 14px}
.nlb-rechen-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--hair);color:var(--soft);font-size:var(--t-sm)}
.nlb-rechen-row strong{color:var(--text);font-family:var(--mono)}
.nlb-rechen-fazit{margin-top:14px;color:var(--text)}
.nlb-rechen-fazit strong,.nlb-rechen-fazit mark{color:var(--akzent);background:none;padding:0}

/* NLB-Mobil v2: breite Tabellen auf kleinen Schirmen horizontal scrollbar
   (hoehere Spezifitaet als die Template-Regeln, damit es sicher greift) */
@media (max-width: 760px){
  main .artikel table, main article table, main .content table{
    display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
    border:1px solid var(--hair); border-radius:12px; padding:2px;
    background:linear-gradient(90deg, var(--s1) 30%, rgba(0,0,0,0)),
               linear-gradient(90deg, rgba(0,0,0,0), var(--s1) 70%) 100% 0;
    background-repeat:no-repeat; background-size:24px 100%; background-attachment:local, local;
  }
  main .artikel table th, main article table th{white-space:nowrap; font-size:.66rem; padding:9px 12px}
  main .artikel table td, main article table td{min-width:130px; font-size:.86rem; padding:9px 12px; hyphens:auto}
}
/* NLB:END */

/* NLLOGOFIX:START v1 — ein Logo, nicht zwei */
.nav-logo.nav-logo:has(img),.nl-logo.nl-logo:has(img),.footer-brand.footer-brand:has(img),.logo.logo:has(img){background-image:none;text-indent:0;width:auto;height:auto;overflow:visible;display:inline-flex;align-items:center}
.nav-logo.nav-logo img,.nl-logo.nl-logo img,.footer-brand.footer-brand img,.logo.logo img{height:var(--logo-hoehe,34px);width:auto;display:block;max-width:none}
.nav-logo.nav-logo:has(img) em,.nl-logo.nl-logo:has(img) em,.footer-brand.footer-brand:has(img) em,.logo.logo:has(img) em,.nav-logo.nav-logo:has(img) span,.nl-logo.nl-logo:has(img) span,.footer-brand.footer-brand:has(img) span,.logo.logo:has(img) span,.nav-logo.nav-logo:has(img) .w1,.nl-logo.nl-logo:has(img) .w1,.footer-brand.footer-brand:has(img) .w1,.logo.logo:has(img) .w1,.nav-logo.nav-logo:has(img) .w2,.nl-logo.nl-logo:has(img) .w2,.footer-brand.footer-brand:has(img) .w2,.logo.logo:has(img) .w2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:760px){.nav-logo.nav-logo:has(img) img,.nl-logo.nl-logo:has(img) img,.footer-brand.footer-brand:has(img) img,.logo.logo:has(img) img{height:calc(var(--logo-hoehe,34px) * .82)}}
/* NLLOGOFIX:END */