/*
Theme Name: ESPRO
Theme URI: https://www.es-pro.info/
Author: RSR Strategy
Author URI: https://rsr-strategy.com/
Description: Eigenes Theme der ESPRO GmbH — Infrarot-Waermetechnik sowie Trennwand- und Schranksysteme. Ohne Seitenbaukasten, ohne externe Abrufe.
Version: 3.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietaer — nur zur Verwendung durch die ESPRO GmbH
Text Domain: espro
Update URI: false
*/

/* ============================================================
   ESPRO — Startseite, Stand nach Kundenfeedback
   Schriften self-hosted (kein externer Server, DSGVO)
   Farbwelt aus dem Logo: Rot #A02D36, Grafit #4A5159
   Titillium Web ersetzt Archivo — Klavika (Hengstler) ist
   lizenzpflichtig und darf nicht übernommen werden.
   ============================================================ */

@font-face{font-family:'Titillium';src:url('assets/fonts/titillium-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Titillium';src:url('assets/fonts/titillium-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Titillium';src:url('assets/fonts/titillium-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Plex Mono';src:url('assets/fonts/plexmono-1-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Plex Mono';src:url('assets/fonts/plexmono-2-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}

:root{
  --rot:#A02D36;
  --rot-tief:#87232C;
  --rot-licht:#EA6A5E;
  --grafit:#4A5159;

  --tinte:#16181B;
  --tinte-2:#1F2226;
  --tinte-3:#2B2F34;
  --papier:#FFFFFF;
  --papier-2:#F2F2F0;
  --papier-3:#E2E2DF;
  --linie:#D7D7D3;

  --auf-dunkel:#EDEDEA;
  --auf-dunkel-leise:#ADAFB2;
  --auf-hell:#1A1D20;
  --auf-hell-leise:#585D63;

  --breite:1240px;
  --rand:clamp(1.25rem,5vw,3.5rem);
  --serif:'Titillium',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --z-kopf:60;
  --z-dialog:90;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1rem,0.97rem + 0.2vw,1.12rem);
  line-height:1.6;
  color:var(--auf-hell);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-0.02em;font-weight:700;text-wrap:balance;}
p{margin:0;text-wrap:pretty;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}

/* ---------- Glühkante: wiederkehrendes Merkmal ---------- */
.gluehkante{position:relative;}
.gluehkante::before{
  content:'';position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,transparent 0%,var(--rot) 14%,var(--rot-licht) 46%,var(--rot-licht) 54%,var(--rot) 86%,transparent 100%);
}

.huelle{max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand);}

.kicker{
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rot);
  margin:0 0 1.1rem;display:flex;align-items:center;gap:.7rem;
}
.kicker::before{content:'';width:1.9rem;height:2px;background:var(--rot);flex:none;}
.dunkel .kicker{color:var(--rot-licht);}
.dunkel .kicker::before{background:var(--rot-licht);}

/* ---------- Kopf ---------- */
.kopf{
  position:sticky;top:0;z-index:var(--z-kopf);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linie);
}
/* Angemeldet: Kopf unter der WordPress-Werkzeugleiste halten (ab 601 px ist sie fest oben) */
.admin-bar .kopf{top:32px;}
@media (max-width:782px){.admin-bar .kopf{top:46px;}}
@media (max-width:600px){.admin-bar .kopf{top:0;}}
.kopf-innen{
  max-width:var(--breite);margin-inline:auto;padding:.7rem var(--rand);
  display:flex;align-items:center;gap:1.1rem;min-width:0;
}
.marken{display:flex;align-items:center;gap:1rem;flex:none;}
.marke{display:block;line-height:0;}
.marke img{height:clamp(32px,5.5vw,46px);width:auto;}
.kopf-nav{display:none;margin-left:auto;gap:.9rem;font-size:.82rem;font-weight:600;white-space:nowrap;}
.kopf-nav a{color:var(--auf-hell-leise);text-decoration:none;padding:.3rem 0;position:relative;transition:color .18s;}
.kopf-nav a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--rot);transition:right .25s ease;
}
.kopf-nav a:hover{color:var(--auf-hell);}
.kopf-nav a:hover::after{right:0;}
.kopf-nav a.extern::before{
  content:'↗';font-size:.78em;margin-right:.25em;color:var(--rot);
}
.kopf-tel{
  margin-left:auto;display:flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.86rem;font-weight:500;
  color:#fff;background:var(--rot);text-decoration:none;
  padding:.6rem 1rem;white-space:nowrap;
  transition:background .2s,transform .12s;
}
.kopf-tel:hover{background:var(--rot-tief);}
.kopf-tel:active{transform:translateY(1px);}
.kopf-tel svg{width:15px;height:15px;fill:currentColor;flex:none;}
@media (max-width:559px){
  .kopf-innen{gap:.65rem;padding-inline:1rem;}
  .kopf-tel{padding:.5rem .7rem;font-size:.76rem;letter-spacing:-.02em;}
}
@media (min-width:1100px){
  .kopf-nav{display:flex;margin-left:1.5rem;}
  .kopf-tel{margin-left:0;}
}

/* ---------- Menue fuer Handy und Tablet ---------- */
/* Erscheint nur mit JavaScript — ohne funktioniert der Knopf nicht, also zeigt man ihn nicht */
.kopf-menue{
  display:none;flex:none;width:44px;height:44px;
  align-items:center;justify-content:center;
  background:none;border:1px solid var(--linie);color:var(--tinte);cursor:pointer;
  transition:border-color .18s,background .18s;
}
.js .kopf-menue{display:flex;}
.kopf-menue:hover{border-color:var(--tinte);}
.kopf-menue-striche,
.kopf-menue-striche::before,
.kopf-menue-striche::after{
  display:block;width:18px;height:2px;background:currentColor;
  transition:transform .22s ease,opacity .15s ease,background .15s;
}
.kopf-menue-striche{position:relative;}
.kopf-menue-striche::before,
.kopf-menue-striche::after{content:'';position:absolute;left:0;}
.kopf-menue-striche::before{top:-6px;}
.kopf-menue-striche::after{top:6px;}
/* Geoeffnet: aus drei Strichen wird ein Kreuz */
.kopf-menue[aria-expanded="true"] .kopf-menue-striche{background:transparent;}
.kopf-menue[aria-expanded="true"] .kopf-menue-striche::before{transform:translateY(6px) rotate(45deg);}
.kopf-menue[aria-expanded="true"] .kopf-menue-striche::after{transform:translateY(-6px) rotate(-45deg);}

.mobil-nav{
  position:absolute;top:100%;left:0;right:0;
  background:var(--papier);border-bottom:2px solid var(--rot);
  box-shadow:0 18px 40px -18px rgba(22,24,27,.35);
  max-height:calc(100dvh - 4.5rem);overflow-y:auto;overscroll-behavior:contain;
}
.mobil-nav[hidden]{display:none;}
.mobil-nav ul{list-style:none;margin:0 auto;padding:.35rem 0 .6rem;max-width:var(--breite);}
.mobil-nav li + li{border-top:1px solid var(--linie);}
.mobil-nav a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:52px;padding:.85rem var(--rand);
  color:var(--tinte);text-decoration:none;font-size:1.05rem;font-weight:600;
}
.mobil-nav a::after{content:'›';color:var(--rot);font-size:1.35rem;line-height:1;font-weight:400;}
.mobil-nav a:hover,.mobil-nav a:focus-visible{background:var(--papier-2);}
/* Unterpunkte der Infrarot-Waermetechnik: zwei je Zeile, spart Hoehe */
.mobil-nav .mobil-nav-unter{
  list-style:none;margin:0;padding:0 var(--rand) .7rem;
  display:grid;grid-template-columns:1fr 1fr;gap:.4rem;
}
.mobil-nav-unter li + li{border-top:0;}
.mobil-nav-unter a{
  min-height:44px;padding:.55rem .8rem;font-size:.92rem;font-weight:600;
  background:var(--papier-2);color:var(--tinte-3);
}
.mobil-nav-unter a::after{font-size:1.1rem;}
/* Abschnitt, in dem man gerade steht */
.mobil-nav a[aria-current="true"]{color:var(--rot);box-shadow:inset 3px 0 0 var(--rot);}
.mobil-nav-extern{border-top:2px solid var(--linie)!important;}
.mobil-nav-extern a{font-size:.95rem;color:var(--auf-hell-leise);}
.mobil-nav-extern a::after{content:none;}
.mobil-nav-extern a span{color:var(--rot);}
/* Hinter dem offenen Menue scrollt die Seite nicht mit */
/* Sperre auf body, nicht auf html: Bekaeme html overflow:hidden, wuerde der body
   (overflow-x:hidden aus dem Grundgeruest) selbst zum Scrollkasten — die
   klebende Kopfleiste spraenge dann samt Menue an den Seitenanfang. */
html.menue-offen body{overflow:hidden;}

@media (min-width:1100px){
  .js .kopf-menue,.mobil-nav{display:none!important;}
}
@media (max-width:559px){
  .kopf-menue{width:40px;height:40px;}
}

@media (prefers-reduced-motion:reduce){.kopf-menue-striche,.kopf-menue-striche::before,.kopf-menue-striche::after{transition:none;}}

/* ---------- Abschnitte ---------- */
.dunkel{background:var(--tinte);color:var(--auf-dunkel);}
.hell{background:var(--papier);color:var(--auf-hell);}
.hell-2{background:var(--papier-2);color:var(--auf-hell);}
section{padding-block:clamp(3.5rem,7.5vw,6.5rem);}
/* Ankersprünge: sticky Kopf darf den Sektionsanfang nicht verdecken */
section[id],div[id],.bereich[id]{scroll-margin-top:5.5rem;}
@media (max-width:559px){section[id],div[id],.bereich[id]{scroll-margin-top:4.5rem;}}
.dunkel p{color:var(--auf-dunkel-leise);}
.hell p,.hell-2 p{color:var(--auf-hell-leise);}

h2{font-size:clamp(1.7rem,1.2rem + 2.2vw,2.75rem);margin-bottom:1rem;}
h3{font-size:clamp(1.12rem,1.03rem + 0.45vw,1.35rem);}
.fuehrung{max-width:56ch;font-size:clamp(1.02rem,1rem + 0.22vw,1.16rem);}
/* Einleitung der Partner: ein durchgehender Satz ueber die volle Breite */
.fuehrung.breit{max-width:none;text-wrap:nowrap;}
@media (max-width:1120px){.fuehrung.breit{text-wrap:wrap;}}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--tinte);color:var(--auf-dunkel);padding-block:clamp(2.75rem,6vw,5rem) 0;overflow:hidden;}
.hero::after{
  content:'';position:absolute;inset:auto -20% -30% -20%;height:70%;
  background:radial-gradient(ellipse at 50% 100%,rgba(160,45,54,.32),transparent 68%);
  pointer-events:none;
}
.hero-raster{
  max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand);
  display:grid;gap:clamp(2.25rem,4.5vw,3.75rem);position:relative;z-index:2;
}
.hero-raster{max-width:var(--breite);}
.hero-raster h1{max-width:none;}
.hero h1{font-size:clamp(1.95rem,1.4rem + 2.6vw,3.2rem);letter-spacing:-0.03em;margin-bottom:1.25rem;text-wrap:wrap;}
.hero h1 em{font-style:normal;color:var(--rot-licht);}
.hero-text{font-size:clamp(1.05rem,1rem + 0.35vw,1.2rem);max-width:none;color:var(--auf-dunkel-leise);text-wrap:wrap;}
/* Sagt vor allem anderen, was ESPRO verkauft */
.hero-zeile{
  font-size:clamp(1rem,.95rem + .3vw,1.18rem);font-weight:600;
  color:var(--rot-licht);margin-bottom:.9rem;text-wrap:balance;
}
/* Beisatz unter der Überschrift einer Spalte */
.bereich-unter{
  font-size:.88rem;color:var(--auf-dunkel-leise);
  margin:-.3rem 0 .9rem;letter-spacing:.01em;
}

.hero-aktionen{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.9rem;}
.knopf{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.7rem;font-size:.96rem;font-weight:600;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  font-family:var(--serif);transition:transform .15s,background .2s,border-color .2s,color .2s;
}
.knopf:hover{transform:translateY(-2px);}
.knopf:active{transform:translateY(0) scale(.985);}
.knopf-primaer{background:var(--rot);color:#fff;border-color:var(--rot);}
.knopf-primaer:hover{background:var(--rot-tief);border-color:var(--rot-tief);}
.knopf-geist{background:transparent;color:var(--auf-dunkel);border-color:rgba(237,237,234,.3);}
.knopf-geist:hover{border-color:var(--rot-licht);color:var(--rot-licht);}
.knopf svg{width:16px;height:16px;fill:currentColor;flex:none;}

/* Zwei Geschäftsfelder nebeneinander — über die volle Bildschirmbreite */
.hero-bereiche{
  margin:clamp(2.25rem,4.5vw,3.25rem) auto 0;
  padding-inline:var(--rand);position:relative;z-index:2;
  display:grid;gap:clamp(1rem,2.2vw,2rem);
}
@media (min-width:860px){
  .hero-bereiche{grid-template-columns:1fr 1fr;}
}
.bereich{
  background:var(--tinte-2);display:flex;flex-direction:column;
  padding:0;transition:background .25s;
}
.bereich:hover{background:#242830;}
.bereich-bild{overflow:hidden;background:var(--tinte-3);position:relative;}
.bereich-bild .bild-logo{
  position:absolute;right:4%;bottom:6%;z-index:2;
  width:auto;height:12%;min-height:20px;max-height:46px;
  aspect-ratio:auto;object-fit:contain;filter:none;pointer-events:none;
}
.bereich-bild img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  filter:saturate(.92) contrast(1.03);
}
.bereich-inhalt{
  padding:clamp(1.5rem,3vw,2rem);display:flex;flex-direction:column;flex:1;
  border-top:2px solid var(--rot);
}
.bereich-inhalt h2{
  font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem);
  color:var(--auf-dunkel);margin-bottom:.6rem;
}
.bereich-inhalt > p{font-size:.97rem;margin-bottom:1.25rem;}
.bereich-links{
  list-style:none;margin:0 0 1.5rem;padding:0;
  display:grid;gap:1px;background:rgba(237,237,234,.1);
  border-top:1px solid rgba(237,237,234,.1);
  border-bottom:1px solid rgba(237,237,234,.1);
}
.bereich-links a{
  display:block;background:var(--tinte-2);padding:.7rem 0;
  text-decoration:none;color:var(--auf-dunkel);font-size:.95rem;font-weight:600;
  transition:color .18s,padding-left .18s;
}
.bereich-links a:hover{color:var(--rot-licht);padding-left:.5rem;}
.bereich-links a::after{content:'→';float:right;color:var(--rot-licht);opacity:.55;font-weight:400;}
.bereich-links a.extern::after{content:'↗';}
.bereich .knopf{margin-top:auto;align-self:flex-start;}

.hero-bild-rahmen{position:relative;box-shadow:0 28px 70px -22px rgba(22,24,27,.9);}
.hero-bild-rahmen img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.94) contrast(1.03);}
.hero-bild-rahmen::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(234,106,94,.3);}
.bild-marke{
  position:absolute;left:0;bottom:0;background:var(--tinte);
  padding:.7rem 1.1rem;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.04em;color:var(--auf-dunkel-leise);
  border-top:2px solid var(--rot);max-width:88%;
}
.bild-marke b{color:var(--auf-dunkel);font-weight:500;}

/* ---------- Kennzahlen (kräftiger, dichter) ---------- */
.kennzahlen{border-top:1px solid rgba(237,237,234,.12);margin-top:clamp(2.75rem,5.5vw,4.5rem);position:relative;z-index:2;background:var(--tinte);}
.kennzahlen-innen{max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand);display:grid;grid-template-columns:repeat(2,1fr);}
@media (min-width:820px){.kennzahlen-innen{grid-template-columns:repeat(4,1fr);}}
.kennzahl{padding:1.6rem 1.1rem;text-align:center;border-right:1px solid rgba(237,237,234,.09);border-bottom:1px solid rgba(237,237,234,.09);min-width:0;}
@media (min-width:820px){.kennzahl{border-bottom:none;}.kennzahl:last-child{border-right:none;}}
@media (max-width:819px){
  .kennzahl:nth-child(2n){border-right:none;}
  .kennzahl:nth-last-child(-n+2){border-bottom:none;}
}
.kennzahl-wert{
  font-size:clamp(1.55rem,1.3rem + 1.2vw,2.1rem);font-weight:700;
  color:var(--rot-licht);letter-spacing:-0.03em;line-height:1;margin-bottom:.5rem;
  font-variant-numeric:tabular-nums;
}
.kennzahl-wert small{font-size:.55em;font-weight:600;color:var(--auf-dunkel-leise);}
.kennzahl-text{
  font-family:var(--mono);font-size:.8rem;font-weight:500;
  line-height:1.4;color:var(--auf-dunkel);letter-spacing:.01em;
  overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto;
}
/* Schmale Spalten: feste Umbrüche aufheben, Text fließt mittig */
@media (max-width:819px){.kennzahl-text br{display:none;}}
@media (max-width:430px){
  .kennzahl{padding-inline:.6rem;}
  .kennzahl-text{font-size:.74rem;}
}

/* ---------- Zielgruppen ---------- */
.drei{display:grid;gap:1px;background:var(--linie);margin-top:2.75rem;}
@media (min-width:860px){.drei{grid-template-columns:repeat(3,1fr);}}
.zielgruppe{background:var(--papier);padding:2rem 1.7rem 2.2rem;transition:background .25s;}
.zielgruppe:hover{background:#FAFAF9;}
.zielgruppe-nr{font-family:var(--mono);font-size:.72rem;font-weight:500;color:var(--rot);letter-spacing:.12em;margin-bottom:.9rem;display:block;}
.zielgruppe h3{margin-bottom:.65rem;}
.zielgruppe p{font-size:.98rem;}
.zielgruppe ul{margin:1.15rem 0 0;padding:0;list-style:none;display:grid;gap:.5rem;}
.zielgruppe li{font-size:.92rem;color:var(--auf-hell-leise);padding-left:1.3rem;position:relative;line-height:1.5;}
.zielgruppe li::before{content:'';position:absolute;left:0;top:.55em;width:.5rem;height:2px;background:var(--rot);}

/* ---------- Vorteile (neu) ---------- */
.vorteile{display:grid;gap:1px;background:var(--linie);margin-top:2.75rem;}
@media (min-width:640px){.vorteile{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1000px){.vorteile{grid-template-columns:repeat(3,1fr);}}
.vorteil{background:var(--papier-2);padding:1.5rem 1.4rem;display:flex;gap:.9rem;align-items:flex-start;}
.vorteil-haken{
  flex:none;width:1.4rem;height:1.4rem;margin-top:.1rem;
  border:1.5px solid var(--rot);display:grid;place-items:center;
}
.vorteil-haken svg{width:.8rem;height:.8rem;fill:var(--rot);}
.vorteil b{display:block;font-weight:600;font-size:1rem;margin-bottom:.2rem;color:var(--auf-hell);}
.vorteil span{font-size:.9rem;color:var(--auf-hell-leise);line-height:1.5;}

/* ---------- Lieferumfang ---------- */
.paket{display:grid;gap:2.5rem;margin-top:2.75rem;align-items:start;}
@media (min-width:900px){.paket{grid-template-columns:.82fr 1.18fr;gap:3.75rem;}}
.paket-liste{display:grid;gap:1px;background:var(--linie);border-top:2px solid var(--rot);}
.paket-teil{background:var(--papier-2);padding:1.3rem 1.45rem;display:grid;gap:.25rem;}
.paket-teil dt{font-weight:600;font-size:1.03rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;}
.paket-teil dd{margin:0;font-size:.93rem;color:var(--auf-hell-leise);line-height:1.5;}
.paket-teil dd b{color:var(--rot);font-weight:600;}
.marke-pkt{font-family:var(--mono);font-size:.62rem;font-weight:500;background:var(--rot);color:#fff;padding:.18rem .5rem;letter-spacing:.08em;text-transform:uppercase;flex:none;}
.marke-pkt.wahl{background:var(--grafit);}

/* ---------- Regelung ---------- */
.regel-raster{display:grid;gap:2.5rem;margin-top:2.75rem;}
@media (min-width:900px){.regel-raster{grid-template-columns:1fr 1fr;gap:3.75rem;align-items:center;}}
.vergleich{display:grid;gap:1.35rem;}
.vergleich-zeile{background:var(--tinte-2);padding:1.4rem 1.5rem;}
.vergleich-zeile h3{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.9rem;color:var(--auf-dunkel-leise);}
.vergleich-zeile.wir{border-left:2px solid var(--rot);}
.vergleich-zeile.wir h3{color:var(--rot-licht);}
.wellen{width:100%;height:auto;display:block;}
.vergleich-wert{font-family:var(--mono);font-size:.86rem;margin-top:.85rem;color:var(--auf-dunkel-leise);font-variant-numeric:tabular-nums;}
.vergleich-zeile.wir .vergleich-wert b{color:var(--rot-licht);font-weight:500;}

/* ---------- Einsatzbereiche ---------- */
.faelle{display:grid;gap:1px;background:var(--linie);margin-top:2.75rem;}
@media (min-width:780px){.faelle{grid-template-columns:repeat(3,1fr);}}
.fall{background:var(--papier);display:flex;flex-direction:column;}
.fall-bild{position:relative;overflow:hidden;background:var(--tinte-3);}
.fall-bild img{width:100%;aspect-ratio:16/11;object-fit:cover;}
.fall-inhalt{padding:1.5rem 1.45rem 1.8rem;display:flex;flex-direction:column;flex:1;}
.fall-inhalt h3{margin-bottom:.55rem;font-size:1.12rem;}
.fall-inhalt p{font-size:.95rem;flex:1;}
.fall-fakt{font-family:var(--mono);font-size:.74rem;color:var(--rot);margin-top:1.1rem;padding-top:.85rem;border-top:1px solid var(--linie);}

/* Projektfilm — Hochformat, laedt erst beim Klick */
.film{margin-top:2.75rem;display:grid;gap:2rem;align-items:center;}
@media (min-width:760px){.film{grid-template-columns:minmax(0,300px) 1fr;gap:2.75rem;}}
.film-rahmen{position:relative;background:var(--tinte-2);max-width:300px;width:100%;}
.film video{display:block;width:100%;height:auto;background:var(--tinte-2);}
/* Steht, bis der gekuerzte Projektfilm vorliegt. In WordPress wird daraus ein Feld. */
.film-platz{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.75rem;aspect-ratio:9/16;padding:1.5rem;text-align:center;
  border:2px dashed rgba(234,106,94,.45);background:var(--tinte-2);
}
.film-platz svg{width:38px;height:38px;fill:var(--rot-licht);opacity:.85;}
.film-platz b{color:var(--auf-hell);font-size:.95rem;}
.film-platz span{color:var(--auf-hell-leise);font-size:.82rem;line-height:1.5;}
.film-text h3{color:var(--auf-hell);margin-bottom:.6rem;}
.film-text p{color:var(--auf-hell-leise);font-size:.95rem;line-height:1.6;max-width:46ch;}
.film-text p + p{margin-top:.8rem;}
.film-dauer{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rot);margin-bottom:.7rem;display:block;}

/* ---------- Referenzen: zweigeteilt ---------- */
.ref-highlights{display:grid;gap:1.25rem;margin-top:2.75rem;}
@media (min-width:900px){
  .ref-highlights{grid-template-columns:1fr 1fr;}
  .ref-hl-gross{grid-column:1 / -1;}
}
.ref-hl{
  background:var(--tinte-2);border-left:3px solid var(--rot);
  display:flex;flex-direction:column;overflow:hidden;
}
.ref-hl-bild{overflow:hidden;background:var(--tinte-3);}
.ref-hl-bild img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.ref-hl-text{padding:clamp(1.4rem,3vw,1.9rem);display:flex;flex-direction:column;justify-content:center;flex:1;}
.ref-hl-marke{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rot-licht);margin-bottom:.7rem;
}
.ref-hl h3{font-size:clamp(1.15rem,1rem + .6vw,1.45rem);color:var(--auf-dunkel);margin-bottom:.6rem;}
.ref-hl p{font-size:.95rem;}
/* Grosses Highlight: Bild und Text nebeneinander */
@media (min-width:900px){
  .ref-hl-gross{flex-direction:row;align-items:stretch;}
  .ref-hl-gross .ref-hl-bild{flex:1.15;}
  .ref-hl-gross .ref-hl-bild img{height:100%;aspect-ratio:auto;min-height:260px;}
  .ref-hl-gross .ref-hl-text{flex:.85;}
  .ref-hl-gross h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);}
}

/* Vier Sektionen im 2x2-Raster */
.ref-raster{display:grid;gap:1px;background:rgba(237,237,234,.12);margin-top:2.5rem;}
@media (min-width:760px){.ref-raster{grid-template-columns:1fr 1fr;}}
.ref-feld{background:var(--tinte-2);padding:1.6rem 1.5rem 1.4rem;}
.ref-kat{margin-bottom:1.6rem;}
.ref-kat:last-child{margin-bottom:0;}
.ref-kat-titel{
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rot-licht);margin-bottom:.7rem;
}
.ref-liste{display:grid;gap:1px;background:rgba(237,237,234,.1);}
.ref-feld .ref-kat-titel{margin-bottom:.9rem;}
.ref-zeile{background:var(--tinte-2);padding:.8rem 0;display:grid;grid-template-columns:1fr auto;gap:.9rem;align-items:baseline;}
.ref-ort{font-size:.95rem;color:var(--auf-dunkel);}
.ref-art{font-family:var(--mono);font-size:.7rem;color:var(--auf-dunkel-leise);text-align:right;}
.ref-hinweis{font-family:var(--mono);font-size:.72rem;color:var(--auf-dunkel-leise);margin-top:1.5rem;line-height:1.7;padding-left:1rem;border-left:2px solid var(--rot);}
.ref-hinweis a.extern{color:var(--rot-licht);text-decoration:underline;text-underline-offset:.2em;}
.ref-hinweis a.extern::after{content:' ↗';text-decoration:none;}
.ref-einsatz{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem;}
.ref-einsatz span{
  font-family:var(--mono);font-size:.72rem;padding:.35rem .7rem;
  border:1px solid rgba(237,237,234,.2);color:var(--auf-dunkel-leise);
}

/* ---------- Trennwände ---------- */
.zweit{display:grid;gap:2.5rem;align-items:center;}
@media (min-width:880px){.zweit{grid-template-columns:1fr 1.15fr;gap:3.5rem;}}
.zweit-logo{height:52px;width:auto;margin-bottom:1.5rem;mix-blend-mode:multiply;}
.zweit-marken{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem;}
.zweit-marke{font-family:var(--mono);font-size:.78rem;padding:.45rem .85rem;border:1px solid var(--linie);color:var(--auf-hell-leise);background:var(--papier);}
.tw-galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;}
.tw-galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.tw-galerie figure{margin:0;overflow:hidden;position:relative;background:var(--tinte-3);}

/* ---------- Partner ---------- */
.partner{display:grid;gap:1px;background:var(--linie);margin-top:2.75rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));}
/* Bei fuenf Partnern sonst 4 + 1 mit leerer Flaeche — hier lieber 3 + 2 */
@media (min-width:1000px) and (max-width:1279px){.partner{grid-template-columns:repeat(3,1fr);}}
.partner-feld{
  background:var(--papier);padding:1.8rem 1.4rem 1.7rem;
  display:flex;flex-direction:column;gap:1.05rem;
  border:none;text-align:left;font:inherit;cursor:pointer;
  transition:background .2s,transform .15s;
}
.partner-feld:hover{background:#FAFAF9;transform:translateY(-2px);}
.partner-feld:active{transform:translateY(0);}
.partner-logo{height:76px;display:flex;align-items:center;justify-content:flex-start;}
.partner-logo img{max-height:76px;max-width:100%;width:auto;object-fit:contain;mix-blend-mode:multiply;}
/* Logos mit echtem Alphakanal brauchen kein Multiplizieren */
.partner-logo img.hat-alpha,.p-dialog-kopf img.hat-alpha{mix-blend-mode:normal;}
.partner-rolle{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rot);hyphens:none;}
.partner-feld p{font-size:.91rem;line-height:1.5;color:var(--auf-hell-leise);}
.partner-mehr{
  margin-top:auto;font-family:var(--mono);font-size:.7rem;color:var(--rot);
  display:flex;align-items:center;gap:.4rem;
}
.partner-mehr svg{width:.75rem;height:.75rem;fill:currentColor;}

/* Partner-Dialog */
.p-dialog{
  border:none;padding:0;max-width:38rem;width:calc(100% - 2rem);
  background:var(--papier);color:var(--auf-hell);
  box-shadow:0 30px 80px -20px rgba(22,24,27,.5);
}
.p-dialog::backdrop{background:rgba(22,24,27,.72);backdrop-filter:blur(3px);}
.p-dialog-innen{padding:clamp(1.5rem,4vw,2.25rem);}
.p-dialog-kopf{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-bottom:1.5rem;}
.p-dialog-kopf img{max-height:56px;width:auto;mix-blend-mode:multiply;}
.p-schliessen{
  border:1px solid var(--linie);background:transparent;cursor:pointer;
  width:2.4rem;height:2.4rem;display:grid;place-items:center;flex:none;
  transition:background .2s,border-color .2s;
}
.p-schliessen:hover{background:var(--papier-2);border-color:var(--rot);}
.p-schliessen svg{width:1rem;height:1rem;fill:var(--auf-hell);}
.p-dialog h3{margin-bottom:.4rem;}
.p-dialog .partner-rolle{margin-bottom:1rem;}
.p-dialog p{font-size:.98rem;line-height:1.6;color:var(--auf-hell-leise);}
.p-dialog p + p{margin-top:.9rem;}
.p-dialog ul{margin:.9rem 0 0;padding-left:1.1rem;list-style:none;}
.p-dialog li{font-size:.95rem;line-height:1.55;color:var(--auf-hell-leise);position:relative;padding-left:.2rem;}
.p-dialog li + li{margin-top:.4rem;}
.p-dialog li::before{content:"";position:absolute;left:-1.1rem;top:.62em;width:.42rem;height:1px;background:var(--rot);}
.p-dialog ul + p{margin-top:1rem;}
.p-dialog a{color:var(--rot);text-decoration:underline;text-underline-offset:.2em;}
.p-dialog .quelle{font-family:var(--mono);font-size:.76rem;line-height:1.5;color:var(--auf-hell-leise);margin-top:1rem;}

/* ---------- Leistungen mit Symbolen ---------- */
.leistungen{display:grid;gap:1px;background:var(--linie);margin-top:2.75rem;}
@media (min-width:600px){.leistungen{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1000px){.leistungen{grid-template-columns:repeat(4,1fr);}}
.leistung{background:var(--papier);padding:1.6rem 1.35rem;display:flex;flex-direction:column;gap:.9rem;}
.leistung-symbol{
  width:3.4rem;height:3.4rem;flex:none;
  border:2px solid var(--rot);border-radius:50%;
  display:grid;place-items:center;overflow:hidden;background:var(--papier);
}
.leistung-symbol img{width:2rem;height:2rem;object-fit:contain;mix-blend-mode:multiply;}
.leistung h3{font-size:1rem;margin-bottom:.35rem;}
.leistung p{font-size:.9rem;line-height:1.5;}

/* ---------- FAQ ---------- */
.faq{margin-top:2.5rem;}
.faq details{border-bottom:1px solid var(--linie);}
.faq details:first-of-type{border-top:1px solid var(--linie);}
.faq summary{cursor:pointer;list-style:none;padding:1.3rem 3rem 1.3rem 0;font-weight:600;font-size:1.05rem;position:relative;transition:color .18s;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--rot);}
.faq summary::after{
  content:'';position:absolute;right:.65rem;top:1.7rem;width:11px;height:11px;
  border-right:2px solid var(--rot);border-bottom:2px solid var(--rot);
  transform:rotate(45deg);transition:transform .25s;
}
.faq details[open] summary::after{transform:rotate(225deg);top:1.9rem;}
.faq-antwort{padding:0 2.5rem 1.5rem 0;font-size:.99rem;color:var(--auf-hell-leise);max-width:74ch;}
.faq-antwort p + p{margin-top:.9rem;}
.faq-abbinder{color:var(--rot);font-weight:600;}
.faq-tabelle{width:100%;border-collapse:collapse;margin-top:.9rem;font-size:.92rem;}
.faq-tabelle th{
  text-align:left;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rot);padding:.5rem .9rem .5rem 0;
  border-bottom:1px solid var(--linie);font-weight:500;
}
.faq-tabelle td{padding:.7rem .9rem .7rem 0;border-bottom:1px solid var(--linie);vertical-align:top;color:var(--auf-hell-leise);}
.faq-tabelle td:first-child{color:var(--auf-hell);font-weight:600;width:38%;}

/* ---------- Kontakt ---------- */
.kontakt-raster{display:grid;gap:2.75rem;margin-top:2.5rem;}
@media (min-width:900px){.kontakt-raster{grid-template-columns:.85fr 1.15fr;gap:4rem;}}
.wege{display:grid;gap:1px;background:rgba(237,237,234,.12);margin-top:1.9rem;}
.weg{background:var(--tinte);padding:1.3rem 0;display:flex;align-items:center;gap:1.1rem;text-decoration:none;transition:padding-left .2s;}
.weg:hover{padding-left:.6rem;}
.weg-symbol{width:2.4rem;height:2.4rem;flex:none;border:1px solid rgba(234,106,94,.4);display:grid;place-items:center;}
.weg-symbol svg{width:16px;height:16px;fill:var(--rot-licht);}
.weg-text{display:grid;gap:.15rem;}
.weg-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--auf-dunkel-leise);}
.weg-wert{font-size:1.05rem;font-weight:600;color:var(--auf-dunkel);}

form{display:grid;gap:1.1rem;}
.feld{display:grid;gap:.45rem;}
.feld-paar{display:grid;gap:1.1rem;}
@media (min-width:560px){.feld-paar{grid-template-columns:1fr 1fr;}}
.feld-drei{display:grid;gap:1.1rem;}
@media (min-width:560px){.feld-drei{grid-template-columns:1fr 1fr;}}
label{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--auf-dunkel);font-weight:500;}
label .pflicht{color:var(--rot-licht);}
.form-gruppe{
  border:none;padding:0;margin:0;display:grid;gap:1.1rem;
  padding-top:1.4rem;border-top:1px solid rgba(237,237,234,.14);
}
.form-gruppe legend{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rot-licht);padding:0;margin-bottom:.2rem;
}
input,textarea,select{
  font-family:var(--serif);font-size:1rem;
  background:var(--tinte-2);color:var(--auf-dunkel);
  border:1px solid rgba(237,237,234,.18);padding:.85rem 1rem;width:100%;
  transition:border-color .2s,background .2s;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--rot-licht);background:var(--tinte-3);}
input:user-invalid,textarea:user-invalid,select:user-invalid{border-color:var(--rot-licht);}
textarea{resize:vertical;min-height:7rem;}
select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--rot-licht) 50%),linear-gradient(135deg,var(--rot-licht) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.feld-fehler{font-size:.84rem;color:var(--rot-licht);display:none;}
.feld[data-fehler] .feld-fehler{display:block;}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-fuss{font-family:var(--mono);font-size:.72rem;color:var(--auf-dunkel-leise);line-height:1.65;}
.form-fuss a{color:var(--rot-licht);}

/* ---------- Fuß ---------- */
.fuss{background:var(--tinte-2);color:var(--auf-dunkel-leise);padding-block:3rem 1.9rem;font-size:.92rem;}
.fuss-raster{display:grid;gap:2.25rem;}
@media (min-width:760px){.fuss-raster{grid-template-columns:1.4fr 1fr 1fr;gap:3rem;}}
.fuss-logo{display:inline-block;line-height:0;margin-bottom:1.2rem;}
.fuss-logo img{height:38px;width:auto;}
.fuss h3{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--auf-dunkel);margin-bottom:.9rem;font-weight:500;}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;}
.fuss a{color:var(--auf-dunkel-leise);text-decoration:none;transition:color .18s;}
.fuss a:hover{color:var(--rot-licht);}
.fuss-unten{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid rgba(237,237,234,.1);display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;font-family:var(--mono);font-size:.72rem;}
.fuss-credit a{color:var(--auf-dunkel-leise);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:rgba(237,237,234,.25);}
.fuss-credit a:hover{color:var(--rot-licht);text-decoration-color:currentColor;}

.offen{display:inline-block;font-family:var(--mono);font-size:.68rem;background:rgba(234,106,94,.16);color:var(--rot-licht);padding:.12rem .45rem;border:1px solid rgba(234,106,94,.4);}
.hell .offen,.hell-2 .offen{background:rgba(160,45,54,.09);color:var(--rot);border-color:rgba(160,45,54,.35);}

/* ---------- Zugänglichkeit ---------- */
:focus-visible{outline:2px solid var(--rot);outline-offset:3px;}
.dunkel :focus-visible,.hero :focus-visible{outline-color:var(--rot-licht);}
.sprung{position:absolute;left:-9999px;top:0;z-index:100;background:var(--rot);color:#fff;padding:.75rem 1.25rem;font-weight:600;}
.sprung:focus{left:0;}

/* ---------- Bewegung: Inhalt ist ohne JavaScript sichtbar ---------- */
.js .auf{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);}
.js .auf.da{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .auf{opacity:1;transform:none;transition:none;}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ---------- Zurueck nach oben ---------- */
.nach-oben{
  position:fixed;z-index:55;
  right:max(1rem,env(safe-area-inset-right));
  bottom:max(1rem,env(safe-area-inset-bottom));
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  background:var(--tinte);color:#fff;text-decoration:none;
  /* Der helle Rand traegt ihn ueber dunkle Abschnitte, der Schatten ueber helle */
  border:1px solid rgba(237,237,234,.32);
  box-shadow:0 10px 24px -10px rgba(22,24,27,.6);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,background .18s;
}
.nach-oben svg{width:20px;height:20px;fill:currentColor;}
.nach-oben:hover{background:var(--rot);}
.nach-oben.sichtbar{opacity:1;transform:none;pointer-events:auto;}
/* Auf grossen Bildschirmen steht die Navigation dauerhaft oben */
@media (min-width:1100px){.nach-oben{display:none;}}
@media (prefers-reduced-motion:reduce){.nach-oben{transition:none;}}


/* ---------- Fachwissen ---------- */
.fw-kopf{padding:clamp(3.5rem,9vw,6rem) 0 clamp(2rem,5vw,3rem);}
.fw-kopf h1{max-width:20ch;}
.fw-kopf .fuehrung{margin-top:1.1rem;}

/* Ohne JavaScript filtert nichts — dann auch keine toten Knoepfe zeigen.
   Alle Beitraege sind ohnehin sichtbar. */
.fw-filter{display:none;flex-wrap:wrap;gap:.5rem;margin-top:2rem;}
.js .fw-filter{display:flex;}
.fw-filter button{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.45rem .85rem;border:1px solid var(--linie);background:transparent;
  color:var(--auf-hell-leise);cursor:pointer;font-weight:500;
  transition:border-color .15s,color .15s,background .15s;
}
.fw-filter button:hover{border-color:var(--rot);color:var(--rot);}
.fw-filter button[aria-pressed="true"]{background:var(--rot);border-color:var(--rot);color:#fff;}

/* Karten mit eigenem Rand: eine Flaechenfuellung durch die Rasterluecke
   wuerde bei unvollstaendigen Reihen als grauer Block stehen bleiben */
.fw-liste{display:grid;gap:1.25rem;margin-top:2.5rem;}
@media (min-width:700px){.fw-liste{grid-template-columns:1fr 1fr;}}
@media (min-width:1100px){.fw-liste{grid-template-columns:repeat(3,1fr);}}

.fw-karte{background:var(--papier);display:flex;flex-direction:column;border:1px solid var(--linie);}
.fw-karte[hidden]{display:none;}
.fw-karte-bild{aspect-ratio:16/10;overflow:hidden;background:var(--tinte-2);}
.fw-karte-bild img{width:100%;height:100%;object-fit:cover;display:block;
}
.fw-karte-text{padding:1.5rem 1.4rem 1.7rem;display:flex;flex-direction:column;gap:.7rem;flex:1;}
.fw-marke{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rot);}
.fw-karte h2{font-size:1.12rem;line-height:1.3;}
.fw-karte h2 a{text-decoration:none;}
.fw-karte h2 a::after{content:"";position:absolute;inset:0;}   /* ganze Karte klickbar */
.fw-karte{position:relative;}
.fw-karte p{font-size:.92rem;line-height:1.55;color:var(--auf-hell-leise);}
.fw-meta{margin-top:auto;font-family:var(--mono);font-size:.7rem;
  color:var(--auf-hell-leise);display:flex;gap:.6rem;flex-wrap:wrap;}
.fw-karte:hover h2{color:var(--rot);}

.fw-leer{padding:3rem 0;font-family:var(--mono);font-size:.85rem;color:var(--auf-hell-leise);}

/* Brotkrumen */
.krumen{font-family:var(--mono);font-size:.72rem;color:var(--auf-hell-leise);
  padding-top:clamp(1.5rem,4vw,2.25rem);}
.krumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;}
.krumen li::after{content:"›";margin-left:.45rem;color:var(--linie-2,#C9CCCF);}
.krumen li:last-child::after{content:"";}
.krumen a{color:var(--auf-hell-leise);}
.krumen a:hover{color:var(--rot);}
.krumen [aria-current]{color:var(--auf-hell);}

/* Beitrag */
.beitrag{padding:clamp(2rem,5vw,3rem) 0 clamp(4rem,10vw,7rem);}
.beitrag-innen{max-width:44rem;}
.beitrag h1{margin-top:.9rem;}
.beitrag-meta{font-family:var(--mono);font-size:.74rem;color:var(--auf-hell-leise);
  display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.1rem;
  padding-bottom:1.5rem;border-bottom:1px solid var(--linie);}
.beitrag-bild{margin:2rem 0 2.5rem;}
.beitrag-bild img{width:100%;height:auto;display:block;}
.beitrag-bild figcaption{font-family:var(--mono);font-size:.72rem;
  color:var(--auf-hell-leise);margin-top:.7rem;}
.beitrag-text{font-size:1.02rem;line-height:1.7;color:var(--auf-hell-leise);}
.beitrag-text > * + *{margin-top:1.1rem;}
.beitrag-text h2{font-size:1.4rem;line-height:1.25;color:var(--auf-hell);margin-top:2.5rem;}
.beitrag-text h3{font-size:1.08rem;color:var(--auf-hell);margin-top:1.8rem;}
.beitrag-text ul{padding-left:1.1rem;list-style:none;}
.beitrag-text li{position:relative;}
.beitrag-text li + li{margin-top:.45rem;}
.beitrag-text li::before{content:"";position:absolute;left:-1.1rem;top:.72em;
  width:.42rem;height:1px;background:var(--rot);}
.beitrag-text strong{color:var(--auf-hell);font-weight:600;}
.beitrag-tabelle{width:100%;border-collapse:collapse;font-size:.94rem;}
.beitrag-tabelle th,.beitrag-tabelle td{text-align:left;padding:.7rem .8rem;
  border-bottom:1px solid var(--linie);vertical-align:top;}
.beitrag-tabelle th{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--auf-hell);}
.beitrag-hinweis,.beitrag-text .is-style-hinweis{border-left:2px solid var(--rot);padding:.2rem 0 .2rem 1.1rem;
  margin:2rem 0;font-size:.98rem;}
/* Bausteine aus dem Editor bekommen dasselbe Aussehen wie der Beispielbeitrag */
.beitrag-text .wp-block-table{margin:2rem 0;overflow-x:auto;}
.beitrag-text .wp-block-table table{width:100%;border-collapse:collapse;font-size:.94rem;}
.beitrag-text .wp-block-table th,.beitrag-text .wp-block-table td{text-align:left;padding:.7rem .8rem;
  border:0;border-bottom:1px solid var(--linie);vertical-align:top;}
.beitrag-text .wp-block-table th{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--auf-hell);}
.beitrag-text .wp-block-table figcaption,.beitrag-text .wp-block-image figcaption{font-family:var(--mono);
  font-size:.72rem;color:var(--auf-hell-leise);margin-top:.6rem;}
.beitrag-text .wp-block-image{margin:2rem 0;}
.beitrag-text .wp-block-image img{width:100%;height:auto;display:block;}
.beitrag-text a{color:var(--rot);}
/* Leer gelassene Felder aus der Vorlage erscheinen nicht */
.beitrag-text > p:empty,.beitrag-text > h2:empty,.beitrag-text > h3:empty,.beitrag-text li:empty,
.beitrag-text > ul:not(:has(li:not(:empty))){display:none;}
.beitrag-abschluss{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--linie);
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;}

.fw-weiter{padding:clamp(3rem,7vw,4.5rem) 0;}
.fw-weiter h2{font-size:1.5rem;margin-bottom:1.75rem;}

/* Themen sind eigene Adressen — funktioniert ohne JavaScript und wird gefunden */
.fw-themen{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem;}
.fw-themen a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.45rem .85rem;border:1px solid var(--linie);text-decoration:none;
  color:var(--auf-hell-leise);font-weight:500;
  transition:border-color .15s,color .15s,background .15s;
}
.fw-themen a:hover{border-color:var(--rot);color:var(--rot);}
.fw-themen a[aria-current="page"]{background:var(--rot);border-color:var(--rot);color:#fff;}
.fw-blaettern{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem;font-family:var(--mono);font-size:.8rem;}
.fw-blaettern a{color:var(--rot);}

/* Rueckmeldung, wenn der Versand gescheitert ist */
.form-fehler{
  border-left:3px solid var(--rot-licht);background:rgba(234,106,94,.1);
  color:var(--auf-dunkel);padding:.9rem 1.1rem;margin-bottom:1.5rem;font-size:.95rem;
}
.form-fehler a{color:var(--rot-licht);}

/* ---------- Dankeseite ---------- */


/* ---------- Dankeseite ---------- */
.danke{padding:clamp(4rem,12vw,8rem) 0;}
.danke-innen{max-width:44rem;}
.danke-zeichen{width:4rem;height:4rem;border:2px solid var(--rot);border-radius:50%;
  display:grid;place-items:center;place-content:center;margin-bottom:1.75rem;}
.danke-zeichen svg{width:1.6rem;height:1.6rem;fill:var(--rot);}
.danke p{color:var(--auf-hell-leise);font-size:1.02rem;line-height:1.65;max-width:46ch;}
.danke p + p{margin-top:.9rem;}
.danke-weiter{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.25rem;}