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

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

:root {
  /* ---------- 1 · Akzent + berechnete Abstufungen ---------- */
  --akzent: #C92A3B;
  --akzent-rgb: 201,42,59;
  --akzent-10: rgba(201,42,59,0.10);
  --akzent-10: color-mix(in oklch, var(--akzent) 10%, transparent);
  --akzent-15: rgba(201,42,59,0.15);
  --akzent-15: color-mix(in oklch, var(--akzent) 15%, transparent);
  --akzent-20: rgba(201,42,59,0.20);
  --akzent-20: color-mix(in oklch, var(--akzent) 20%, transparent);
  --akzent-30: rgba(201,42,59,0.30);
  --akzent-30: color-mix(in oklch, var(--akzent) 30%, transparent);
  --akzent-50: rgba(201,42,59,0.50);
  --akzent-50: color-mix(in oklch, var(--akzent) 50%, transparent);
  --akzent-deep: #691d25;   /* berechnet: dunklere Variante fuer Verlaeufe */

  /* ---------- 2 · Flächen (vier definierte Ebenen) --------- */
  --s0: #faf6f0;
  --s1: #f3ede4;
  --s2: #ebe3d7;
  --s3: #ded4c5;
  --ink:   #faf6f0;
  --ink-rgb: 250,246,240;
  --panel: #ebe3d7;
  --card:  #fffdfa;

  /* ---------- 3 · Text (aus --text abgeleitet) ------------- */
  --text:  #1c1813;
  --text-rgb: 28,24,19;
  --fg-rgb: 0,0,0;   /* Overlay-Basis: hell auf dunkel, dunkel auf hell */
  --muted: rgba(0,0,0,0.68);
  --soft:  rgba(0,0,0,0.78);
  --dim:   rgba(28,24,19,0.48);
  --hair:  rgba(28,24,19,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(201,42,59,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: 'Outfit', 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: 700;
  --headline-lh: 1.16;
  --laufweite: 0em;

  /* ---------- 4b · Handschrift (Preset: weich) --------- */
  --radius:       18px;
  --radius-gross: 28px;
  --rahmen:       1px;
  --knopf-radius: 999px;
  --knopf-pad:    14px 32px;
  --knopf-weight: 600;
  --label-versal: none;

  /* ---------- 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(.22,1,.36,1);
  --ease-aus: cubic-bezier(.4,0,.2,1);
  --tint:        radial-gradient(135% 88% at 14% 0%,rgba(201,42,59,0.055),rgba(201,42,59,0) 58%);
  --tint-strong: radial-gradient(135% 88% at 14% 0%,rgba(201,42,59,0.1),rgba(201,42,59,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);
}

/* NLSTIL:START (Handschrift: weich · Grundton: sand · Logo: farbe:hinten schnitt:fett lauf:eng schrift:normal anordnung:inline schrift2:gleich groesse2:gleich form:keine zier:kursiv) */
.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,.footer-brand.footer-brand,.logo.logo{font-family:var(--font-headline);white-space:nowrap;flex:0 0 auto;text-decoration:none}.nav-logo.nav-logo em,.nav-logo.nav-logo span,.footer-brand.footer-brand em,.footer-brand.footer-brand span,.logo.logo em,.logo.logo span{font-style:normal}.nav-logo.nav-logo,.footer-brand.footer-brand,.logo.logo{color:var(--text)}.nav-logo.nav-logo em,.nav-logo.nav-logo span,.footer-brand.footer-brand em,.footer-brand.footer-brand span,.logo.logo em,.logo.logo span{color:var(--akzent)}.nav-logo.nav-logo,.footer-brand.footer-brand,.logo.logo{font-weight:800}.nav-logo.nav-logo,.footer-brand.footer-brand,.logo.logo{letter-spacing:-.045em}.nav-logo.nav-logo em,.nav-logo.nav-logo span,.footer-brand.footer-brand em,.footer-brand.footer-brand span,.logo.logo em,.logo.logo span{margin-left:-.14em}.nav-logo.nav-logo em,.nav-logo.nav-logo span,.footer-brand.footer-brand em,.footer-brand.footer-brand span,.logo.logo em,.logo.logo span{font-style:italic}
/* 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{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 */
.hero-g{align-items:start}
.hero-left{grid-column:1/8;padding-bottom:2rem}
.hero-right{grid-column:8/13;margin-top:3.2rem}
.hero-right .plate{margin-bottom:0}
@media (max-width:1024px){.hero-right{margin-top:0}}
/* rhythmus · linie */
.seam-txt{display:none}
.seam{min-height:0;padding:0}
.seam-in{padding:0}
.seam-rule{width:100%;height:1px;background:var(--hair)}
/* kopfspalte · zentriert */
.hd, .hd.col-head{position:static;grid-column:1/-1;max-width:52rem;
  margin-inline:auto;margin-bottom:2.2rem;text-align:center}
.col-body{grid-column:1/-1}
/* raster · gleich */
.srv{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.srv-lg{grid-row:auto}
/* dichte · luftig */
:root{--sec-y:clamp(6rem,11vw,11rem);--gutter:clamp(1.8rem,3.4vw,3rem);--shell:1520px}
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 */

/* 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 */