/* =========================================================================
   FIRMA NG – Service · Wetter (Ruhr)
   Stylesheet der Website · keine externen Ressourcen (DSGVO-freundlich)
   ========================================================================= */

/* ---------- 1. Design-Tokens ---------- */
:root{
  /* Marke – Gruen exakt aus dem Logo entnommen */
  --gruen:        #009640;
  --gruen-knopf:  #008238;   /* nur fuer Knopfflaechen: 4,9:1 zu Weiss (WCAG), Logo bleibt #009640 */
  --gruen-dunkel: #00702f;   /* fuer kleinen Text auf Hell */
  --gruen-hell:   #22c56a;   /* fuer Text auf Dunkel */
  --gruen-leuchte:rgba(0,150,64,.20);

  --schwarz:  #0b0d0f;
  --dunkel:   #12161a;
  --dunkel-2: #1a2027;
  --linie-d:  rgba(255,255,255,.12);

  --weiss:    #ffffff;
  --hell:     #f5f7f6;
  --hell-2:   #eaeeec;
  --linie:    #dde3e0;

  --text:     #14181b;
  --text-2:   #56605e;
  --text-inv: #eef2f0;
  --text-inv-2: rgba(238,242,240,.66);

  --radius:   18px;
  --radius-s: 12px;
  --radius-l: 28px;

  --schatten:    0 2px 6px rgba(11,13,15,.05), 0 12px 34px rgba(11,13,15,.09);
  --schatten-xl: 0 8px 20px rgba(11,13,15,.10), 0 32px 70px rgba(11,13,15,.16);

  --breite: 1180px;
  --luft: clamp(64px, 9vw, 132px);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. Basis ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--text);
  background:var(--weiss);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
/* <picture> ist nur die Verpackung fuer WebP+JPEG - darf das Layout nie beeinflussen */
picture{ display:contents; }
a{ color:var(--gruen-dunkel); text-decoration:none; }
a:hover{ text-decoration:underline; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--gruen); color:#fff; }

h1,h2,h3,h4{ margin:0; line-height:1.14; letter-spacing:-.02em; font-weight:760; }
h1{ font-size:clamp(2.6rem, 6.4vw, 4.6rem); letter-spacing:-.035em; }
h2{ font-size:clamp(1.95rem, 3.9vw, 3.05rem); letter-spacing:-.028em; }
h3{ font-size:clamp(1.2rem, 1.9vw, 1.5rem); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

:focus-visible{ outline:3px solid var(--gruen); outline-offset:3px; border-radius:6px; }

.container{ width:min(100% - 44px, var(--breite)); margin-inline:auto; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:14px; top:-60px; z-index:200; background:var(--gruen);
  color:#fff; padding:10px 18px; border-radius:0 0 10px 10px; transition:top .2s;
}
.skip-link:focus{ top:0; }

/* ---------- 3. Buttons ---------- */
.btn{
  --btn-bg:var(--gruen-knopf); --btn-fg:#fff;
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; border-radius:100px; border:0;
  background:var(--btn-bg); color:var(--btn-fg);
  font-weight:650; font-size:1rem; letter-spacing:-.01em;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, background .2s;
  box-shadow:0 8px 22px var(--gruen-leuchte);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 32px var(--gruen-leuchte); text-decoration:none; }
.btn:active{ transform:translateY(0); }
.btn svg{ width:19px; height:19px; flex:none; }
.btn--geist{
  --btn-bg:transparent; --btn-fg:var(--text);
  border:1.5px solid var(--linie); box-shadow:none;
}
.btn--geist:hover{ border-color:var(--text); box-shadow:none; }
.btn--dunkel-geist{
  --btn-bg:rgba(255,255,255,.07); --btn-fg:#fff;
  border:1.5px solid rgba(255,255,255,.28); box-shadow:none;
  backdrop-filter:blur(8px);
}
.btn--dunkel-geist:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); box-shadow:none; }
.btn--gross{ padding:18px 34px; font-size:1.06rem; }

/* ---------- 4. Kopfzeile ---------- */
.kopf{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:16px 0;
  transition:background .35s, box-shadow .35s, padding .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.kopf__innen{ display:flex; align-items:center; gap:26px; }
.kopf.ist-fest{
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--linie);
  padding:10px 0;
}
.marke{ display:flex; align-items:center; gap:12px; margin-right:auto; text-decoration:none; }
.marke img{ height:42px; width:auto; transition:height .35s; }
.kopf.ist-fest .marke img{ height:36px; }
.marke__text{ display:flex; flex-direction:column; line-height:1.15; }
.marke__name{ font-weight:800; font-size:1.02rem; letter-spacing:-.02em; color:#fff; transition:color .35s; }
.marke__zusatz{ font-size:.735rem; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.6); transition:color .35s; }
.kopf.ist-fest .marke__name{ color:var(--text); }
.kopf.ist-fest .marke__zusatz{ color:var(--text-2); }
.marke .logo-hell{ display:block; }
.marke .logo-dunkel{ display:none; }
.kopf.ist-fest .logo-hell{ display:none; }
.kopf.ist-fest .logo-dunkel{ display:block; }

.nav{ display:flex; align-items:center; gap:4px; }
.nav a{
  padding:9px 14px; border-radius:100px; font-size:.95rem; font-weight:550;
  color:rgba(255,255,255,.82); text-decoration:none; transition:background .2s, color .2s;
}
.nav a:hover{ background:rgba(255,255,255,.14); color:#fff; text-decoration:none; }
.kopf.ist-fest .nav a{ color:var(--text-2); }
.kopf.ist-fest .nav a:hover{ background:var(--hell-2); color:var(--text); }
.kopf__cta{ margin-left:10px; padding:11px 22px; font-size:.95rem; }

.burger{
  display:none; width:46px; height:46px; border:0; border-radius:12px;
  background:rgba(255,255,255,.14); cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.kopf.ist-fest .burger{ background:var(--hell-2); }
.burger span{ display:block; width:20px; height:2px; background:#fff; border-radius:2px; position:relative; transition:.25s; }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:#fff; border-radius:2px; transition:.25s;
}
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.kopf.ist-fest .burger span,
.kopf.ist-fest .burger span::before,
.kopf.ist-fest .burger span::after{ background:var(--text); }
body.menue-offen .burger span{ background:transparent; }
body.menue-offen .burger span::before{ top:0; transform:rotate(45deg); }
body.menue-offen .burger span::after{ top:0; transform:rotate(-45deg); }

/* ---------- 5. Hero mit 3D-Szene ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:150px 0 96px; background:var(--schwarz); color:var(--text-inv);
  overflow:hidden; isolation:isolate;
}
.hero__foto{
  position:absolute; inset:0; z-index:-3;
  background:url("../img/arbeit-5.jpg") center 32% / cover no-repeat;
  background-image:image-set(url("../img/arbeit-5.webp") type("image/webp"), url("../img/arbeit-5.jpg") type("image/jpeg"));
  transform:scale(1.08);
  filter:saturate(.72) contrast(1.05);
}
.hero__schleier{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(110% 85% at 20% 16%, rgba(0,150,64,.22), transparent 56%),
    linear-gradient(105deg, rgba(11,13,15,.94) 0%, rgba(11,13,15,.80) 44%, rgba(11,13,15,.42) 100%),
    linear-gradient(to top, rgba(11,13,15,1) 2%, rgba(11,13,15,0) 46%);
}
#szene{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; display:block; pointer-events:none; }

.hero__inhalt{ max-width:790px; position:relative; }
.augenbraue{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:22px;
  padding:8px 17px 8px 13px; border-radius:100px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  font-size:.845rem; font-weight:560; letter-spacing:.01em; color:rgba(255,255,255,.92);
}
.augenbraue .punkt{
  width:8px; height:8px; border-radius:50%; background:var(--gruen-hell); flex:none;
  box-shadow:0 0 0 4px rgba(34,197,106,.22);
  animation:pulsieren 2.4s ease-in-out infinite;
}
@keyframes pulsieren{ 0%,100%{ box-shadow:0 0 0 3px rgba(34,197,106,.28);} 50%{ box-shadow:0 0 0 8px rgba(34,197,106,0);} }

.hero h1{ margin-bottom:6px; }
.hero h1 .gruen{
  background:linear-gradient(100deg, var(--gruen-hell), #7ff0ae 60%, var(--gruen-hell));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__satz{
  font-size:clamp(1.08rem,1.65vw,1.32rem); color:var(--text-inv-2);
  max-width:60ch; margin:20px 0 34px; line-height:1.6;
}
.hero__knoepfe{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:44px; }

.beweise{
  display:flex; flex-wrap:wrap; gap:12px 30px;
  padding-top:26px; border-top:1px solid var(--linie-d);
}
.beweis{ display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--text-inv-2); }
.beweis strong{ color:#fff; font-weight:650; }
.beweis svg{ width:18px; height:18px; color:var(--gruen-hell); flex:none; }

.scrollhinweis{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45);
}
.scrollhinweis i{
  display:block; width:1px; height:38px;
  background:linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
  animation:rutschen 2.2s ease-in-out infinite;
}
@keyframes rutschen{ 0%{ opacity:0; transform:translateY(-10px);} 40%{opacity:1;} 100%{ opacity:0; transform:translateY(10px);} }

/* ---------- 6. Abschnitte ---------- */
.abschnitt{ padding:var(--luft) 0; position:relative; }
.abschnitt--hell{ background:var(--hell); }
.abschnitt--dunkel{ background:var(--dunkel); color:var(--text-inv); }
.abschnitt--dunkel h2{ color:#fff; }
.abschnitt--dunkel p{ color:var(--text-inv-2); }

.kapitel{ max-width:720px; margin-bottom:56px; }
.kapitel--mitte{ margin-inline:auto; text-align:center; }
.kapitel__label{
  display:inline-block; margin-bottom:16px; font-size:.76rem; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:var(--gruen-dunkel);
}
.abschnitt--dunkel .kapitel__label{ color:var(--gruen-hell); }
.kapitel__label::before{
  content:""; display:inline-block; width:26px; height:2px; background:currentColor;
  margin-right:11px; vertical-align:middle;
}
.kapitel p{ font-size:1.08rem; color:var(--text-2); margin-top:18px; }
.abschnitt--dunkel .kapitel p{ color:var(--text-inv-2); }

/* ---------- 7. Leistungskarten mit 3D-Neigung ---------- */
.raster-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.tiefe{ perspective:1200px; }

.karte{
  position:relative; background:var(--weiss); border:1px solid var(--linie);
  border-radius:var(--radius-l); padding:38px 36px 34px; overflow:hidden;
  display:flex; flex-direction:column;
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.8,.3,1), box-shadow .45s, border-color .3s;
  will-change:transform;
}
.karte::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(0,150,64,.10), transparent 62%);
  opacity:0; transition:opacity .4s;
}
.karte:hover{ box-shadow:var(--schatten-xl); border-color:transparent; }
.karte:hover::after{ opacity:1; }
.karte__kopf{ display:flex; align-items:center; gap:15px; margin-bottom:8px; transform:translateZ(28px); }
.karte__symbol{
  width:52px; height:52px; flex:none; border-radius:15px;
  display:grid; place-items:center;
  background:linear-gradient(145deg, var(--gruen), #00b84f);
  color:#fff; box-shadow:0 8px 20px var(--gruen-leuchte);
}
.karte__symbol svg{ width:26px; height:26px; }
.karte h3{ transform:translateZ(24px); }
.karte__text{ color:var(--text-2); font-size:.99rem; margin:14px 0 22px; transform:translateZ(16px); }
.karte__liste{ list-style:none; margin:0; padding:0; display:grid; gap:1px; transform:translateZ(12px); }
.karte__liste li{
  display:flex; align-items:center; gap:11px; padding:9px 0;
  border-top:1px solid var(--linie); font-size:.97rem;
}
.karte__liste li:first-child{ border-top:0; }
.karte__liste svg{ width:16px; height:16px; color:var(--gruen); flex:none; }
.karte__fuss{
  margin-top:auto; padding-top:20px; border-top:1px solid var(--linie);
  font-size:.9rem; color:var(--text-2); transform:translateZ(10px);
}
.karte__liste{ margin-bottom:24px; }
.karte__fuss strong{ color:var(--text); }

/* ---------- 8. Glasstreifen (Spezialgebiet) ---------- */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,72px); align-items:center; }
.split--dreh{ direction:rtl; }
.split--dreh > *{ direction:ltr; }
.split h2{ margin-bottom:20px; }
.split p{ color:var(--text-2); }
.abschnitt--dunkel .split p{ color:var(--text-inv-2); }

.bildstapel{ position:relative; perspective:1400px; }
.bildstapel img{
  border-radius:var(--radius-l); box-shadow:var(--schatten-xl);
  transform:rotateY(-9deg) rotateX(3deg) translateZ(0);
  transition:transform .8s cubic-bezier(.2,.8,.3,1);
  aspect-ratio:4/5; object-fit:cover; width:100%;
}
.bildstapel:hover img{ transform:rotateY(-3deg) rotateX(1deg) translateZ(28px); }
.bildstapel__marke{
  position:absolute; right:-14px; bottom:26px; z-index:2;
  background:var(--weiss); color:var(--text); border-radius:var(--radius);
  padding:16px 22px; box-shadow:var(--schatten-xl); max-width:230px;
  transform:translateZ(60px);
}
.bildstapel__marke b{ display:block; font-size:1.5rem; letter-spacing:-.03em; color:var(--gruen-dunkel); }
.bildstapel__marke span{ font-size:.84rem; color:var(--text-2); line-height:1.4; display:block; }

.hakenliste{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:13px; }
.hakenliste li{ display:flex; gap:13px; align-items:flex-start; font-size:1rem; }
.hakenliste svg{ width:21px; height:21px; color:var(--gruen); flex:none; margin-top:2px; }
.abschnitt--dunkel .hakenliste svg{ color:var(--gruen-hell); }

/* ---------- 9. Vorher/Nachher-Vergleich ---------- */
.vergleich-raster{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.vergleich{
  position:relative; border-radius:var(--radius-l); overflow:hidden;
  box-shadow:var(--schatten-xl); background:var(--dunkel-2);
  touch-action:pan-y; user-select:none; cursor:ew-resize;
  aspect-ratio:5/6;
}
.vergleich img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vergleich__nachher{ clip-path:inset(0 0 0 var(--pos,50%)); }
.vergleich__griff{
  position:absolute; top:0; bottom:0; left:var(--pos,50%); width:3px;
  background:#fff; box-shadow:0 0 22px rgba(0,0,0,.5); transform:translateX(-50%);
}
.vergleich__knopf{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%; background:#fff; color:var(--text);
  display:grid; place-items:center; box-shadow:0 6px 22px rgba(0,0,0,.35);
}
.vergleich__knopf svg{ width:26px; height:26px; }
.vergleich__schild{
  position:absolute; bottom:16px; padding:7px 15px; border-radius:100px;
  font-size:.78rem; font-weight:650; letter-spacing:.07em; text-transform:uppercase;
  backdrop-filter:blur(10px); pointer-events:none;
}
.vergleich__schild--v{ left:16px; background:rgba(11,13,15,.62); color:#fff; }
.vergleich__schild--n{ right:16px; background:var(--gruen); color:#fff; }
.vergleich__titel{
  position:absolute; top:0; left:0; right:0; padding:20px 22px 34px;
  background:linear-gradient(to bottom, rgba(11,13,15,.72), transparent);
  color:#fff; font-weight:650; font-size:1rem; pointer-events:none;
}

/* ---------- 10. Pflegekasse ---------- */
.hinweisbox{
  border-radius:var(--radius-l); padding:clamp(30px,4vw,52px);
  background:linear-gradient(150deg, rgba(0,150,64,.14), rgba(0,150,64,.03));
  border:1px solid rgba(0,150,64,.28);
}
.abschnitt--dunkel .hinweisbox{
  background:linear-gradient(150deg, rgba(0,150,64,.20), rgba(255,255,255,.03));
  border-color:rgba(34,197,106,.32);
}
.zahlen{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
.zahl{
  background:rgba(255,255,255,.05); border:1px solid var(--linie-d);
  border-radius:var(--radius); padding:26px 24px;
  transition:transform .4s cubic-bezier(.2,.8,.3,1), background .3s;
}
.zahl:hover{ transform:translateY(-5px); background:rgba(255,255,255,.09); }
.zahl b{ display:block; font-size:clamp(1.9rem,3.4vw,2.7rem); letter-spacing:-.035em; color:var(--gruen-hell); line-height:1.1; }
.zahl span{ display:block; margin-top:8px; font-size:.93rem; color:var(--text-inv-2); }

/* ---------- 11. Ablauf in Schritten ---------- */
.schritte{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:s; }
.schritt{
  position:relative; padding:32px 26px 28px; border-radius:var(--radius);
  background:var(--weiss); border:1px solid var(--linie);
  transition:transform .45s cubic-bezier(.2,.8,.3,1), box-shadow .45s;
}
.schritt:hover{ transform:translateY(-7px) rotateX(3deg); box-shadow:var(--schatten-xl); }
.schritt::before{
  counter-increment:s; content:"0" counter(s);
  display:block; font-size:.82rem; font-weight:750; letter-spacing:.14em;
  color:var(--gruen-dunkel); margin-bottom:14px;
}
.schritt h3{ font-size:1.12rem; margin-bottom:9px; }
.schritt p{ font-size:.94rem; color:var(--text-2); }

/* ---------- 12. Preis ---------- */
.preisbanner{
  display:flex; flex-wrap:wrap; align-items:center; gap:30px 46px;
  padding:clamp(28px,3.6vw,44px); border-radius:var(--radius-l);
  background:var(--schwarz); color:var(--text-inv); margin-top:46px;
  background-image:radial-gradient(90% 130% at 90% 10%, rgba(0,150,64,.30), transparent 60%);
}
.preisbanner__zahl{ font-size:clamp(2.6rem,5vw,3.7rem); font-weight:780; letter-spacing:-.04em; color:#fff; line-height:1; }
.preisbanner__zahl small{ display:block; font-size:.9rem; font-weight:500; letter-spacing:0; color:var(--text-inv-2); margin-top:9px; }
.preisbanner p{ flex:1 1 320px; color:var(--text-inv-2); margin:0; }

/* ---------- 13. Einsatzgebiet ---------- */
.orte{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.ort{
  padding:11px 22px; border-radius:100px; border:1px solid var(--linie-d);
  background:rgba(255,255,255,.05); font-size:.97rem; font-weight:560;
  transition:transform .3s, background .3s, border-color .3s;
}
.ort:hover{ transform:translateY(-3px); background:rgba(0,150,64,.18); border-color:var(--gruen-hell); }
a.ort{ color:inherit; text-decoration:none; }
a.ort:focus-visible{ outline:2px solid var(--gruen-hell); outline-offset:3px; }

.radar{ position:relative; }
.radar svg{ width:100%; height:auto; overflow:visible; }
.radar__mitte{ transform-origin:260px 240px; animation:radarpuls 3s ease-in-out infinite; }
@keyframes radarpuls{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.72; transform:scale(1.22);} }

/* ---------- 14. Galerie ---------- */
.galerie{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.galerie figure{ margin:0; border-radius:var(--radius); overflow:hidden; position:relative; background:var(--hell-2); }
.galerie img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:3/4;
  transition:transform .7s cubic-bezier(.2,.8,.3,1);
}
.galerie figure:hover img{ transform:scale(1.06); }
.galerie figcaption{
  position:absolute; inset:auto 0 0 0; padding:26px 18px 15px; color:#fff; font-size:.88rem;
  background:linear-gradient(to top, rgba(11,13,15,.85), transparent);
  opacity:0; transform:translateY(8px); transition:.35s;
}
.galerie figure:hover figcaption{ opacity:1; transform:translateY(0); }
.galerie figure:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.galerie figure:nth-child(1) img{ aspect-ratio:1/1.1; }
.galerie figure:nth-child(2),
.galerie figure:nth-child(3){ grid-column:span 2; }
.galerie figure:nth-child(4),
.galerie figure:nth-child(5){ grid-column:span 2; }

/* ---------- 15. Ueber mich ---------- */
.portraet{ position:relative; perspective:1200px; }
.portraet img{
  border-radius:var(--radius-l); width:100%; aspect-ratio:3/4; object-fit:cover;
  box-shadow:var(--schatten-xl);
  transform:rotateY(6deg); transition:transform .8s cubic-bezier(.2,.8,.3,1);
}
.portraet:hover img{ transform:rotateY(0deg) translateZ(20px); }
.signatur{
  margin-top:28px; font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--text);
}
.abschnitt--dunkel .signatur{ color:#fff; }

/* ---------- 16. Kontakt ---------- */
.kontakt-raster{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,4vw,60px); align-items:start; }
.kontakt-raster > *{ min-width:0; }
.kontaktdaten{ display:grid; gap:4px; }
.kontaktzeile{
  display:flex; gap:16px; align-items:flex-start; padding:18px 0;
  border-bottom:1px solid var(--linie-d);
}
.kontaktzeile:last-child{ border-bottom:0; }
.zeiten{
  display:grid; grid-template-columns:auto auto; gap:3px 26px;
  justify-content:start; margin-top:6px; font-variant-numeric:tabular-nums;
}
.zeiten span:nth-child(odd){ color:var(--text-inv-2); }
.kontaktzeile__symbol{
  width:44px; height:44px; flex:none; border-radius:13px; display:grid; place-items:center;
  background:rgba(0,150,64,.16); color:var(--gruen-hell);
}
.kontaktzeile__symbol svg{ width:21px; height:21px; }
.kontaktzeile b{ display:block; font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; color:var(--text-inv-2); font-weight:650; margin-bottom:3px; }
.kontaktzeile a, .kontaktzeile span{ color:#fff; font-size:1.05rem; text-decoration:none; }
.kontaktzeile a:hover{ color:var(--gruen-hell); text-decoration:underline; }

.formular{
  background:var(--weiss); color:var(--text); border-radius:var(--radius-l);
  padding:clamp(26px,3.4vw,40px); box-shadow:var(--schatten-xl);
}
.feldreihe{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.feld{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.feld label{ font-size:.85rem; font-weight:640; color:var(--text-2); }
.feld input, .feld textarea, .feld select{
  font:inherit; font-size:.98rem; padding:13px 15px; border-radius:var(--radius-s);
  border:1.5px solid var(--linie); background:var(--hell); color:var(--text);
  transition:border-color .2s, background .2s;
}
.feld input:focus, .feld textarea:focus, .feld select:focus{
  outline:none; border-color:var(--gruen); background:var(--weiss);
}
.feld textarea{ resize:vertical; min-height:118px; }
.feld--fehler input, .feld--fehler textarea{ border-color:#d33; background:#fff5f5; }
.pflicht{ color:var(--gruen-dunkel); }
/* Das Formular steht auf dunklem Grund, ist selbst aber hell –
   deshalb die Textfarben hier ausdruecklich zuruecksetzen. */
.abschnitt--dunkel .formular p,
.abschnitt--dunkel .formular label,
.formular__fuss{ color:var(--text-2); }
.formular__fuss{ font-size:.82rem; margin-top:14px; }
.formular__hinweis{
  display:none; margin-bottom:18px; padding:14px 17px; border-radius:var(--radius-s);
  font-size:.92rem; background:#fff4f4; border:1px solid #f0c2c2; color:#8c1d1d;
}
.formular__hinweis.sichtbar{ display:block; }
.formular__hinweis--ok{ background:rgba(0,150,64,.09); border-color:rgba(0,150,64,.35); color:var(--gruen-dunkel); }

/* ---------- 17. Schluss-CTA + Fuss ---------- */
.schluss{
  text-align:center; padding:var(--luft) 0;
  background:var(--schwarz); color:var(--text-inv);
  background-image:radial-gradient(70% 90% at 50% 0%, rgba(0,150,64,.26), transparent 62%);
}
.schluss h2{ color:#fff; max-width:16ch; margin-inline:auto; }
.schluss p{ color:var(--text-inv-2); max-width:52ch; margin:20px auto 34px; }
.schluss__knoepfe{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.fuss{ background:var(--schwarz); color:var(--text-inv-2); padding:64px 0 30px; border-top:1px solid var(--linie-d); font-size:.94rem; }
.fuss__raster{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:38px; }
.fuss h3{ color:#fff; font-size:.79rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:16px; font-weight:700; }
.fuss ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.fuss a{ color:var(--text-inv-2); text-decoration:none; }
.fuss a:hover{ color:var(--gruen-hell); text-decoration:underline; }
.fuss__marke img{ height:52px; width:auto; margin-bottom:16px; }
.fuss__unten{
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between;
  margin-top:48px; padding-top:22px; border-top:1px solid var(--linie-d); font-size:.85rem;
}
.instagram{ display:inline-flex; align-items:center; gap:9px; }
.instagram svg{ width:19px; height:19px; }

/* Mobiler Anrufbalken */
.anrufbalken{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:95;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,13,15,.94); backdrop-filter:blur(14px);
  border-top:1px solid var(--linie-d); gap:10px;
}
.anrufbalken .btn{ flex:1; justify-content:center; padding:14px 10px; font-size:.95rem; }

/* ---------- 18. Unterseiten (Impressum/Datenschutz) ---------- */
.seitenkopf{
  padding:170px 0 64px; background:var(--schwarz); color:var(--text-inv);
  background-image:radial-gradient(80% 120% at 20% 0%, rgba(0,150,64,.26), transparent 60%);
}
.seitenkopf h1{ font-size:clamp(2.1rem,4.6vw,3.3rem); color:#fff; }
.seitenkopf p{ color:var(--text-inv-2); margin-top:14px; }
.rechtstext{ max-width:800px; padding:var(--luft) 0; }
.rechtstext h2{ font-size:1.5rem; margin:44px 0 14px; }
.rechtstext h2:first-child{ margin-top:0; }
.rechtstext h3{ font-size:1.1rem; margin:26px 0 8px; }
.rechtstext p, .rechtstext li{ color:var(--text-2); }
.rechtstext a{ text-decoration:underline; text-underline-offset:2px; }
.rechtstext ul{ padding-left:20px; display:grid; gap:7px; margin:0 0 1.1em; }
.rechtstext .platzhalter{
  background:rgba(224,169,43,.16); border:1px dashed #c99a20; color:#7a5c05;
  padding:3px 9px; border-radius:6px; font-size:.9rem; font-weight:600;
}

/* ---------- 19. Einblenden beim Scrollen ---------- */
.zeigen{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.8,.3,1), transform .8s cubic-bezier(.2,.8,.3,1); }
.zeigen.ist-da{ opacity:1; transform:none; }
.zeigen[data-verzoegern="1"]{ transition-delay:.1s; }
.zeigen[data-verzoegern="2"]{ transition-delay:.2s; }
.zeigen[data-verzoegern="3"]{ transition-delay:.3s; }
.zeigen[data-verzoegern="4"]{ transition-delay:.4s; }

/* Lesefortschritt */
.fortschritt{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:110;
  background:linear-gradient(90deg, var(--gruen), var(--gruen-hell));
  transition:width .1s linear;
}

/* ---------- 20. Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:150; display:none;
  background:rgba(6,8,10,.94); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; padding:34px;
}
.lightbox.offen{ display:flex; }
.lightbox img{ max-width:min(1000px,92vw); max-height:88vh; border-radius:var(--radius); box-shadow:var(--schatten-xl); }
.lightbox__zu{
  position:absolute; top:22px; right:26px; width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1); color:#fff;
  cursor:pointer; font-size:1.5rem; line-height:1;
}

/* ---------- 21. Responsive ---------- */
@media (max-width:1000px){
  .raster-2, .vergleich-raster{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .split--dreh{ direction:ltr; }
  .schritte{ grid-template-columns:repeat(2,1fr); }
  .kontakt-raster{ grid-template-columns:minmax(0,1fr); }
  .fuss__raster{ grid-template-columns:1fr 1fr; }
  .galerie{ grid-template-columns:repeat(4,1fr); }
  .galerie figure:nth-child(n){ grid-column:span 2; grid-row:span 1; }
  .galerie figure:nth-child(1) img{ aspect-ratio:3/4; }
}
@media (max-width:760px){
  body{ font-size:16.5px; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(84vw,340px);
    flex-direction:column; align-items:stretch; justify-content:center; gap:6px;
    background:var(--schwarz); padding:34px 26px;
    transform:translateX(100%); visibility:hidden;
    transition:transform .38s cubic-bezier(.3,.8,.3,1), visibility 0s .38s;
    box-shadow:-20px 0 60px rgba(0,0,0,.4);
    /* Eigene Compositing-Ebene: verhindert Schrift-Flimmern waehrend der
       Einblend-Animation auf Mobilgeraeten */
    will-change:transform; backface-visibility:hidden;
  }
  body.menue-offen .nav{
    transform:none; visibility:visible;
    transition:transform .38s cubic-bezier(.3,.8,.3,1), visibility 0s 0s;
  }
  /* Bei offenem Menue nicht dahinter weiterscrollen - sonst "rutscht" die
     Seite samt 3D-Szene unter dem Panel durch */
  body.menue-offen{ overflow:hidden; }
  /* Der backdrop-filter der festen Kopfzeile macht sie sonst zum Bezugsrahmen
     des fixierten Menues: Das Panel klebte dann in der schmalen Leiste und
     die Eintraege liefen durchsichtig ueber die Seite (nur nach dem Scrollen
     sichtbar, weil erst dann .ist-fest den Filter setzt). */
  body.menue-offen .kopf{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  /* Bei offenem Menue liegt der Knopf auf dem dunklen Panel. Die ist-fest-Regel
     faerbt das X sonst dunkel (unsichtbar auf Schwarz) - hier immer hell. */
  body.menue-offen .kopf .burger{
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.28);
  }
  body.menue-offen .kopf .burger span::before,
  body.menue-offen .kopf .burger span::after{ background:#fff; }
  .nav a, .kopf.ist-fest .nav a{ color:#fff; font-size:1.16rem; padding:14px 16px; }
  .kopf.ist-fest .nav a:hover{ background:rgba(255,255,255,.12); color:#fff; }
  .kopf__cta{ display:none; }
  .nav .btn{ margin-top:14px; justify-content:center; }
  .burger{ display:flex; }
  .hero{ min-height:auto; padding:132px 0 92px; }
  .hero__inhalt{ max-width:100%; }
  .scrollhinweis{ display:none; }
  .zahlen{ grid-template-columns:1fr; }
  .schritte{ grid-template-columns:1fr; }
  .feldreihe{ grid-template-columns:1fr; }
  .fuss__raster{ grid-template-columns:1fr; gap:30px; }
  .galerie{ grid-template-columns:repeat(2,1fr); }
  .bildstapel__marke{ right:8px; bottom:-16px; }
  .bildstapel img{ transform:none; }
  .portraet img{ transform:none; }
  .anrufbalken{ display:flex; }
  body{ padding-bottom:74px; }
  .vergleich{ aspect-ratio:4/5; }
}

/* ---------- 21b. Bewertungen (Laufband) ---------- */
.sterne{ color:#f5a623; letter-spacing:2px; font-size:19px; line-height:1; }
.sterne-kopf{ display:flex; align-items:center; justify-content:center; gap:11px;
              flex-wrap:wrap; margin-top:16px; }
.sterne-kopf .sterne{ font-size:25px; letter-spacing:3px; }
.sterne-kopf strong{ font-size:25px; }

/* Ohne JavaScript bleibt es ein Band zum Wischen – erst der Klon macht den Lauf nahtlos */
/* overflow-anchor:none ist wichtig: Chrome haelt die Scrollposition an einem Element im Bild
   fest. Faellt die Wahl auf das laufende Band, wandert die Seite beim Aktualisieren mit dem
   Band mit – auf dem Handy bis ganz nach unten. Hier darf nichts verankert werden. */
.laufband{ position:relative; overflow-x:auto; margin-top:38px; padding:4px 0;
           overflow-anchor:none; }
.laufband *{ overflow-anchor:none; }
.laufband--bereit{ overflow:hidden; }
/* Weiche Raender als eigene Verlaufsflaechen statt als mask-image: Eine Maske zwingt den
   Browser, bei JEDEM Bild neu zu rechnen – zusammen mit der Bewegung flackert dann die Schrift. */
.laufband--bereit::before,
.laufband--bereit::after{ content:""; position:absolute; top:0; bottom:0; width:9%;
                          z-index:2; pointer-events:none; }
.laufband--bereit::before{ left:0;  background:linear-gradient(90deg,var(--hell),rgba(245,247,246,0)); }
.laufband--bereit::after { right:0; background:linear-gradient(270deg,var(--hell),rgba(245,247,246,0)); }
.laufband__spur{ display:flex; gap:20px; width:max-content; padding:0 10px; }
/* translate3d hebt die Spur auf eine eigene Ebene: Der Text wird einmal gerastert und
   danach nur noch verschoben, statt bei jedem Bild neu gezeichnet zu werden. */
.laufband--bereit .laufband__spur{ animation:laufband 130s linear infinite;
                                   will-change:transform; backface-visibility:hidden; }
/* --lauf ist der exakte Abstand bis zur ersten geklonten Karte, in ganzen Pixeln von der
   app.js gesetzt. Mit 50 Prozent traefe man je nach Bildschirmbreite ein paar Pixel daneben
   und das Band wuerde bei jedem Durchlauf leicht springen. */
@keyframes laufband{ from{ transform:translate3d(0,0,0); }
                     to  { transform:translate3d(calc(-1 * var(--lauf,50%)),0,0); } }
/* Beim Lesen anhalten – auch fuer die Tastatur */
.laufband:hover .laufband__spur,
.laufband:focus-within .laufband__spur{ animation-play-state:paused; }
/* Ausserhalb des Sichtfelds steht das Band still: spart Akku und haelt Chrome davon ab,
   die Scrollposition an einer Bewegung festzumachen, die niemand sieht. */
.laufband--ruht .laufband__spur{ animation-play-state:paused; }

.stimme{ flex:0 0 380px; margin:0; background:var(--weiss); border:1px solid var(--linie);
         border-radius:14px; padding:22px 24px; display:flex; flex-direction:column; gap:13px; }
/* Kein abgeschnittener Textkasten: Ein Bereich mit overflow:hidden zwingt den Browser,
   den Text waehrend der Bewegung staendig neu umzubrechen – dann flimmert die Schrift.
   Die Bewertungen stehen jetzt vollstaendig da, das ist ohnehin die ehrlichere Wiedergabe. */
.stimme blockquote{ margin:0; font-size:15px; line-height:1.62; color:var(--text); }
.stimme figcaption{ display:flex; align-items:center; gap:11px; margin-top:auto; }
.stimme__kreis{ flex:0 0 38px; width:38px; height:38px; border-radius:50%;
                background:var(--gruen); color:#fff; font-size:13px; font-weight:700;
                display:flex; align-items:center; justify-content:center; letter-spacing:.5px; }
.stimme__wer{ font-weight:600; font-size:14.5px; line-height:1.3; }
.stimme__wann{ display:block; font-weight:400; font-size:13px; color:var(--text-2); }

.bewertungen__fuss{ margin-top:34px; text-align:center; }
.bewertungen__hinweis{ margin:20px auto 0; max-width:760px; text-align:center;
                       font-size:12.5px; line-height:1.7; color:var(--text-2); }

@media (max-width:560px){
  .stimme{ flex-basis:300px; padding:19px 20px; }
  .laufband__spur{ gap:14px; }
  .laufband--bereit .laufband__spur{ animation-duration:105s; }
}

/* ---------- 22. Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .zeigen{ opacity:1; transform:none; }
  /* Ohne Bewegung wird aus dem Laufband ein Band zum Wischen */
  .laufband{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .laufband__spur{ animation:none !important; }
}

/* ---------- 23. Druck ---------- */
@media print{
  .kopf,.anrufbalken,.scrollhinweis,#szene,.fortschritt{ display:none !important; }
  body{ color:#000; background:#fff; }
  .abschnitt--dunkel,.schluss,.fuss,.hero{ background:#fff !important; color:#000 !important; }
}