/* ==========================================================================
   REDEFLUSS — Dolmetscher- und Übersetzungsdienst Hannover
   Gestaltungsbeispiel. Alle Angaben frei erfunden.
   ========================================================================== */

/* --------------------------------------------------------------- Tokens -- */
:root{
  /* Grün: drei Rollen, weil ein einziges Grün entweder als Fläche zu dunkel
     oder als Text zu hell wäre. */
  --gruen:        #7EC93F;   /* Signal — Zierstriche, Akzente auf Dunkel      */
  --gruen-knopf:  #3F7C1B;   /* Knopfflächen, trägt weiße Schrift (5,1:1)     */
  --gruen-knopf2: #33670F;   /* Knopf im Zeigezustand                          */
  --gruen-tief:   #2C5E14;   /* grüne Schrift auf Hell (7,7:1)                */
  --gruen-hell:   #EAF7DC;   /* getönte Karte                                  */
  --gruen-band:   #F2F9E8;   /* Band hinter den Kundenstimmen                  */

  --pflaume:      #4C1D5B;   /* Schrift auf der lila Karte                     */
  --pflaume-hell: #F0E7F6;
  --pflaume-voll: #6B2A85;   /* volles Feld im Aufruf                          */

  --sand:         #FAEEE3;
  --sand-tief:    #6B4527;

  --tinte:        #0E100D;   /* fast schwarzer Block                           */
  --oliv:         #263A16;   /* olivgrüner Block                               */
  --text:         #33382F;
  --text-leise:   #5B6157;
  --grau:         #F0F0F0;   /* Vertrauensband                                 */
  --linie:        #E2E5DE;
  --weiss:        #fff;

  --rund:      26px;
  --rund-klein:10px;
  --kerbe:     58px;         /* Eckenschnitt der gekerbten Blöcke              */
  --kopf-hoch: 84px;

  --anzeige: "Outfit", "Trebuchet MS", system-ui, sans-serif;
  --lesen:   "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-hoch) + 16px);-webkit-text-size-adjust:100%}

body{
  margin:0;background:var(--weiss);color:var(--text);
  font:400 17px/1.65 var(--lesen);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

/* height:auto schlaegt das HTML-height-Attribut — sonst zieht width:100%
   das Bild auf die Attributhoehe statt auf das eigene Seitenverhaeltnis. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3,h4{font-family:var(--anzeige);font-weight:700;letter-spacing:-.022em;
  line-height:1.06;color:var(--tinte);margin:0}
h1{font-size:clamp(2.5rem,5.9vw,4.35rem)}
h2{font-size:clamp(2rem,4.2vw,3.1rem)}
h3{font-size:clamp(1.5rem,2.5vw,2.05rem);line-height:1.12}
h4{font-size:1.16rem;line-height:1.25}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

.breite{max-width:1240px;margin-inline:auto;padding-inline:26px}
.eng{max-width:820px}

.sprung{position:absolute;left:-9999px;top:0;z-index:200;background:var(--tinte);
  color:#fff;padding:14px 22px;border-radius:0 0 12px 0;font-weight:600}
.sprung:focus{left:0}

:where(a,button,summary,input,textarea,select):focus-visible{
  outline:3px solid var(--gruen-tief);outline-offset:3px;border-radius:6px}

/* -------------------------------------------------------- Zierunterstrich -- */
/* Der Balken unter einzelnen Überschriftwörtern: läuft von blass nach tief
   und endet in einer nach oben gezogenen Fahne. Kennzeichen der Seite. */
.strich{position:relative;display:inline-block;white-space:nowrap}
.strich::after{
  content:"";position:absolute;left:0;right:-.13em;bottom:-.05em;height:.20em;
  background:linear-gradient(90deg,#E4F4CF 0%,var(--gruen) 46%,var(--gruen-tief) 100%);
  clip-path:polygon(0 52%,90% 52%,90% 0,100% 0,100% 100%,0 100%);
  pointer-events:none;
}
.dunkel .strich::after,.strich--hell::after{
  background:linear-gradient(90deg,rgba(126,201,63,.14) 0%,var(--gruen) 100%)}

/* ------------------------------------------------------------------ Marke -- */
.marke{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--tinte)}
.marke__zeichen{width:34px;height:30px;flex:none;display:block}
.marke__text{display:flex;flex-direction:column;line-height:1}
.marke__text b{font-family:var(--anzeige);font-weight:800;font-size:1.42rem;letter-spacing:-.035em}
.marke__text b span{color:var(--gruen-tief)}
.marke__text i{font-style:normal;font-size:.605rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--text-leise);margin-top:4px;font-weight:600}

/* ------------------------------------------------------------- Kopfleiste -- */
.kopf{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid transparent;
  transition:border-color .25s,box-shadow .25s}
.kopf.gescrollt{border-bottom-color:var(--linie);box-shadow:0 6px 26px rgba(14,16,13,.05)}
.kopf__reihe{height:var(--kopf-hoch);display:flex;align-items:center;gap:26px}

.nav{display:flex;align-items:center;gap:4px;margin-left:14px}
.nav__punkt{position:relative}
.nav__link{display:inline-flex;align-items:center;gap:5px;padding:10px 14px;
  border-radius:9px;font:500 15.5px/1 var(--lesen);color:var(--text);
  text-decoration:none;background:none;border:0;cursor:pointer;font-family:var(--lesen)}
.nav__link:hover{background:#F4F6F1;color:var(--tinte)}
.nav__link[aria-current="page"]{color:var(--gruen-tief);font-weight:600}
.nav__pfeil{width:9px;height:9px;flex:none;transition:transform .2s}
.nav__punkt[data-offen="ja"] .nav__pfeil{transform:rotate(180deg)}

.klapp{position:absolute;top:calc(100% + 8px);left:0;min-width:264px;
  background:#fff;border:1px solid var(--linie);border-radius:16px;
  box-shadow:0 24px 50px -18px rgba(14,16,13,.22);padding:9px;
  opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .18s,transform .18s,visibility .18s}
.nav__punkt[data-offen="ja"] .klapp{opacity:1;visibility:visible;transform:none}
.klapp a{display:block;padding:10px 13px;border-radius:10px;text-decoration:none;
  font-size:15px;line-height:1.4}
.klapp a b{display:block;font-weight:600;color:var(--tinte);font-size:15.5px}
.klapp a i{font-style:normal;color:var(--text-leise);font-size:13.4px}
.klapp a:hover{background:var(--gruen-hell)}
.klapp a:hover b{color:var(--gruen-tief)}

.kopf__rechts{margin-left:auto;display:flex;align-items:center;gap:16px}
.kopf__still{display:inline-flex;align-items:center;gap:7px;font-size:15px;
  font-weight:500;text-decoration:none;color:var(--text)}
.kopf__still:hover{color:var(--gruen-tief)}
.kopf__still svg{width:17px;height:17px}

.burger{display:none;width:44px;height:44px;border:1px solid var(--linie);
  background:#fff;border-radius:11px;cursor:pointer;padding:0;
  align-items:center;justify-content:center}
.burger span{display:block;width:19px;height:2px;background:var(--tinte);
  position:relative;border-radius:2px;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;
  width:19px;height:2px;background:var(--tinte);border-radius:2px;transition:transform .24s}
.burger span::before{top:-6px}.burger span::after{top:6px}
body.menue-offen .burger span{background:transparent}
body.menue-offen .burger span::before{transform:translateY(6px) rotate(45deg)}
body.menue-offen .burger span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------------------------------------------------------------- Knöpfe -- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:700 13px/1 var(--lesen);letter-spacing:.1em;text-transform:uppercase;
  padding:17px 30px;border-radius:9px;text-decoration:none;border:0;cursor:pointer;
  transition:background .2s,transform .16s,box-shadow .2s;white-space:nowrap}
.knopf:active{transform:translateY(1px)}
.knopf--gruen{background:var(--gruen-knopf);color:#fff;
  box-shadow:0 10px 24px -12px rgba(63,124,27,.75)}
.knopf--gruen:hover{background:var(--gruen-knopf2)}
.knopf--dunkel{background:var(--tinte);color:#fff}
.knopf--dunkel:hover{background:#20241D}
.knopf--rand{background:transparent;color:var(--tinte);box-shadow:inset 0 0 0 2px var(--linie)}
.knopf--rand:hover{box-shadow:inset 0 0 0 2px var(--gruen-knopf);color:var(--gruen-tief)}
.knopf--klein{padding:13px 22px;font-size:12px}
.knopf--gross{padding:20px 38px;font-size:13.5px}

/* ----------------------------------------------------------- Kopfbereich -- */
.hero{position:relative;padding:clamp(34px,5vw,64px) 0 clamp(48px,6vw,86px);overflow:hidden}
.hero__gitter{display:grid;grid-template-columns:1.04fr .96fr;gap:30px;align-items:center;
  position:relative;z-index:2}

/* schräge Fläche und Rahmenlinie im Hintergrund, wie im Vorbild */
.hero__zier{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero__schraeg{position:absolute;left:-4%;top:6%;width:62%;height:78%;
  background:linear-gradient(150deg,#EEF8E1,rgba(238,248,225,0));
  transform:skewX(-19deg);border-radius:34px}
.hero__rahmen{position:absolute;left:16%;top:12%;width:56%;height:56%;
  border:1px solid #DCE4D3;border-radius:4px}
.hero__bogen{position:absolute;right:2%;top:4%;width:min(430px,38vw);aspect-ratio:1;
  border-radius:50%;border:26px solid var(--pflaume-voll);opacity:.9;
  clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%)}

.hero__titel{margin-bottom:clamp(26px,3.4vw,44px)}
.hero__titel>span{display:block}
.hero__titel>span+span{margin-top:.28em}
.zusammen{white-space:nowrap}

.hero__aufruf{display:inline-grid;grid-template-columns:auto auto;align-items:stretch;
  background:#F2F3F0;border-radius:4px;max-width:540px}
.hero__aufruf p{margin:0;align-self:center;padding:20px 24px;font-size:15.4px;
  line-height:1.5;font-weight:500;color:#41473D;max-width:300px}
.hero__aufruf .knopf{border-radius:4px;margin:9px 9px 9px 0}

.hero__bild{position:relative}
.hero__rahmenbild{border-radius:22px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(14,16,13,.4)}
.hero__rahmenbild img{width:100%;height:auto}

/* schwebende Felder über dem Bild */
.feld{position:absolute;display:flex;align-items:center;gap:10px;
  background:rgba(20,26,17,.9);backdrop-filter:blur(7px);color:#fff;
  border:1px solid rgba(255,255,255,.13);border-radius:16px;padding:11px 16px;
  font-size:13.4px;line-height:1.25;box-shadow:0 18px 40px -20px rgba(0,0,0,.6);z-index:3}
.feld b{font-family:var(--anzeige);font-weight:700;font-size:15px;display:block}
.feld small{display:block;font-size:11.6px;color:#B9C6AC;letter-spacing:.02em}
.feld--saeule{flex-direction:column;align-items:flex-start;gap:8px;border-radius:20px;padding:14px 18px}
.feld--hell{background:rgba(255,255,255,.95);color:var(--tinte);border-color:#E4E8DE}
.feld--hell small{color:var(--text-leise)}

.koepfe{display:flex}
.koepfe img{width:29px;height:29px;border-radius:50%;border:2px solid #1B2415;
  object-fit:cover;margin-left:-9px}
.koepfe img:first-child{margin-left:0}
.feld--hell .koepfe img{border-color:#fff}

.zuwachs{display:inline-flex;align-items:center;gap:5px;color:var(--gruen);
  font-weight:700;font-size:13.4px}
.zuwachs svg{width:13px;height:13px;flex:none}

.hero__f1{top:6%;right:-2%}
.hero__f2{bottom:17%;right:-6%}
.hero__f3{bottom:4%;right:6%}
.hero__f4{top:26%;left:-7%}

.sterne{display:inline-flex;gap:2px;color:#F2B21B}
.sterne svg{width:13px;height:13px}

/* --------------------------------------------------------- Vertrauensband -- */
.vertrauen{background:var(--grau);padding:44px 0 52px;text-align:center}
.vertrauen__hut{font:700 12px/1 var(--lesen);letter-spacing:.19em;text-transform:uppercase;
  color:var(--tinte);margin-bottom:26px}
.vertrauen__reihe{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(28px,6vw,76px);align-items:center}
.kunde{font-family:var(--anzeige);font-weight:700;font-size:clamp(1.05rem,2.1vw,1.5rem);
  letter-spacing:.02em;color:#4A4F46;display:inline-flex;align-items:center;gap:9px;
  filter:grayscale(1);opacity:.82}
.kunde svg{width:26px;height:26px;flex:none}
.kunde em{font-style:normal;font-weight:400;letter-spacing:.16em;font-size:.62em;
  text-transform:uppercase;align-self:flex-end;padding-bottom:.28em}

/* Eselsohr: zwei umgeknickte Ecken oben. Kein clip-path am Elternteil — der
   wuerde die eigenen Eck-Dreiecke gleich wieder wegschneiden. */
.eselsohr{position:relative;background:var(--weiss)}
.eselsohr::before,.eselsohr::after{content:"";position:absolute;top:0;
  width:44px;height:44px;z-index:3}
.eselsohr::before{left:0;clip-path:polygon(0 0,100% 0,0 100%);
  background:linear-gradient(225deg,#D8DBD4 0%,#EDEFEA 46%,var(--grau) 47%)}
.eselsohr::after{right:0;clip-path:polygon(100% 0,100% 100%,0 0);
  background:linear-gradient(135deg,#D8DBD4 0%,#EDEFEA 46%,var(--grau) 47%)}

/* ------------------------------------------------------------- Einleitung -- */
.einleitung{padding:clamp(60px,7vw,104px) 0 clamp(30px,3vw,44px);text-align:center}
.einleitung h2>span{display:block}
.einleitung h2 b{font-weight:400}
.einleitung__text{max-width:470px;margin:26px auto 0;color:var(--text-leise);font-size:16.4px}

/* ------------------------------------------------------------ Tonkarten -- */
.tonkarten{padding:clamp(28px,4vw,52px) 0 clamp(56px,7vw,96px)}
.tonkarten__gitter{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tonkarte{border-radius:20px;padding:36px 34px 40px;min-height:280px;
  display:flex;flex-direction:column}
.tonkarte h3{margin-bottom:auto;max-width:7.2em}
.tonkarte p{margin:52px 0 0;font-size:15.4px;line-height:1.55;max-width:24em}
.tonkarte--gruen{background:var(--gruen-hell)}
.tonkarte--gruen h3,.tonkarte--gruen p{color:var(--gruen-tief)}
.tonkarte--lila{background:var(--pflaume-hell)}
.tonkarte--lila h3,.tonkarte--lila p{color:var(--pflaume)}
.tonkarte--sand{background:var(--sand)}
.tonkarte--sand h3,.tonkarte--sand p{color:var(--sand-tief)}

/* -------------------------------------------------------- Dunkler Block -- */
.dunkel{background:var(--tinte);color:#fff;border-radius:var(--rund);
  padding:clamp(38px,4.6vw,62px);position:relative;overflow:hidden}
.dunkel h2,.dunkel h3{color:#fff}
.dunkel__dreiecke{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:
    conic-gradient(from 180deg at 12% 42%,#1A1F16 0deg 90deg,transparent 90deg),
    conic-gradient(from 180deg at 26% 68%,#171B14 0deg 90deg,transparent 90deg),
    radial-gradient(60% 60% at 78% 55%,rgba(126,201,63,.13),transparent 70%)}
.dunkel__gitter{position:relative;z-index:2;display:grid;
  grid-template-columns:1fr 1.02fr;gap:clamp(26px,4vw,52px);align-items:center}
.dunkel h2{margin-bottom:34px}

.punkte{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:26px}
.punkte li{display:grid;grid-template-columns:38px 1fr;gap:16px;align-items:start}
.punkte__zeichen{width:38px;height:38px;border-radius:50%;background:#fff;
  display:grid;place-items:center;color:var(--tinte)}
.punkte__zeichen svg{width:20px;height:20px}
.punkte b{font-family:var(--anzeige);font-weight:700;font-size:clamp(1.12rem,1.7vw,1.42rem);
  line-height:1.25;color:#fff}

.dunkel__bild{position:relative}
.dunkel__bild img{border-radius:18px;width:100%}

.dunkel__f1{top:-14px;right:-10px}
.dunkel__f2{bottom:-16px;left:-14px}
.dunkel__f3{bottom:16px;right:-18px;flex-direction:column;align-items:flex-start;gap:10px}

.saeulen{display:flex;align-items:flex-end;gap:6px;height:52px}
.saeulen i{width:15px;border-radius:4px 4px 2px 2px;display:block;
  background:linear-gradient(180deg,var(--pflaume-voll),#3F1652)}
.saeulen i:nth-child(1){height:36%}
.saeulen i:nth-child(2){height:52%}
.saeulen i:nth-child(3){height:70%}
.saeulen i:nth-child(4){height:88%}
.saeulen i:nth-child(5){height:100%}

.abschnitt{padding:clamp(52px,6.5vw,92px) 0}
.abschnitt--eng{padding:clamp(34px,4vw,58px) 0}

/* ------------------------------------------------------------- Kennzahlen -- */
.zahlen__gitter{display:grid;grid-template-columns:1.22fr 1fr;gap:26px;align-items:start}

.zahlen__karte{background:#fff;border:1px solid var(--linie);border-radius:16px;
  display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden}
.zahl{padding:30px 26px 34px}
.zahl+.zahl{border-left:1px solid var(--linie)}
.zahl b{display:block;font-family:var(--anzeige);font-weight:700;
  font-size:clamp(2rem,3.4vw,2.7rem);line-height:1;margin-bottom:18px;letter-spacing:-.03em}
.zahl p{font-size:14.4px;line-height:1.5;margin:0}
.zahl--gruen b,.zahl--gruen p{color:var(--gruen-tief)}
.zahl--lila b,.zahl--lila p{color:var(--pflaume)}
.zahl--sand b,.zahl--sand p{color:var(--sand-tief)}

.schaufenster{position:relative;margin-top:22px;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#F4FAEB,#fff)}
.schaufenster img{width:100%}
.abspielen{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:13px;background:rgba(38,58,22,.86);
  backdrop-filter:blur(6px);color:#fff;border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:14px 26px 14px 15px;text-decoration:none;
  box-shadow:0 22px 50px -22px rgba(0,0,0,.7);transition:background .2s,transform .2s}
.abspielen:hover{background:rgba(38,58,22,.96);transform:translate(-50%,-50%) scale(1.035)}
.abspielen__kreis{width:34px;height:34px;border-radius:50%;background:#fff;
  display:grid;place-items:center;flex:none}
.abspielen__kreis svg{width:13px;height:13px;color:var(--gruen-tief);margin-left:2px}
.abspielen b{font-family:var(--anzeige);font-weight:700;font-size:17px;display:block;line-height:1.2}
.abspielen small{font-size:12px;color:#C6D6B7}

.zahlen__panel{background:#fff;border:1px solid var(--linie);border-radius:16px;
  padding:clamp(30px,3.4vw,46px)}
.zahlen__panel h2{margin-bottom:26px;font-size:clamp(1.7rem,3vw,2.4rem)}
.zahlen__panel p{color:var(--text-leise);font-size:16.2px;margin-bottom:30px}

/* --------------------------------------------------------- Ablauf, oliv -- */
.ablauf{background:var(--oliv);color:#fff;position:relative;overflow:hidden;
  clip-path:polygon(var(--kerbe) 0,100% 0,100% calc(100% - var(--kerbe)),
                    calc(100% - var(--kerbe)) 100%,0 100%,0 var(--kerbe))}
.ablauf__zier{position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:
    conic-gradient(from 180deg at 62% 22%,#2F4A1C 0deg 90deg,transparent 90deg),
    conic-gradient(from 180deg at 71% 40%,#2F4A1C 0deg 90deg,transparent 90deg),
    conic-gradient(from 180deg at 66% 62%,#2F4A1C 0deg 90deg,transparent 90deg)}
.ablauf__innen{position:relative;z-index:2;padding:clamp(52px,6vw,88px) 0 clamp(52px,6vw,86px)}
.ablauf h2{color:#fff;margin-bottom:clamp(30px,3.5vw,46px)}
.ablauf__gitter{display:grid;grid-template-columns:1.16fr .84fr;gap:clamp(26px,3.6vw,48px);
  align-items:start}

.stufen{display:grid;gap:14px;margin:0;padding:0;list-style:none;counter-reset:stufe}
.stufe{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);
  border-radius:16px;display:grid;grid-template-columns:74px 1fr 1.15fr;
  align-items:center;gap:14px;padding:20px 22px}
.stufe__nr{font-family:var(--anzeige);font-weight:700;font-size:1.32rem;color:#fff;opacity:.92}
.stufe h4{color:#fff}
.stufe__text{background:rgba(255,255,255,.07);border-radius:11px;padding:14px 17px;
  font-size:13.8px;line-height:1.5;font-weight:600;color:#E4EEDA}

.ablauf__schluss{margin-top:14px;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1);border-radius:16px;display:grid;
  grid-template-columns:1fr 1.15fr;gap:14px;align-items:center;padding:22px}
.ablauf__schluss p{font-family:var(--anzeige);font-weight:700;font-size:1.16rem;
  line-height:1.3;color:#fff;margin:0;max-width:15em}
.ablauf__tuer{background:rgba(255,255,255,.07);border-radius:11px;padding:20px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  text-decoration:none;transition:background .2s}
.ablauf__tuer:hover{background:rgba(255,255,255,.14)}
.ablauf__tuer b{font-family:var(--anzeige);font-weight:700;font-size:clamp(1.3rem,2vw,1.75rem);color:#fff}
.ablauf__pfeil{width:46px;height:46px;border-radius:50%;background:#fff;flex:none;
  display:grid;place-items:center;color:var(--oliv)}
.ablauf__pfeil svg{width:17px;height:17px}

.ablauf__bild{position:relative;padding-top:8px}
.ablauf__bild img{border-radius:16px;width:100%}
.ablauf__f1{top:-10px;left:-16px}
.ablauf__f2{bottom:18px;left:-22px}

.legende{display:grid;gap:5px;font-size:11px;color:#C2D3B2}
.legende span{display:flex;align-items:center;gap:6px}
.legende i{width:7px;height:7px;border-radius:50%;display:block}

/* --------------------------------------------------------- Kundenstimmen -- */
.stimmen{background:var(--gruen-band);border-radius:var(--rund);position:relative;
  overflow:hidden;padding:clamp(38px,4.4vw,58px)}
.stimmen__raster{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:
    repeating-linear-gradient(30deg,rgba(63,124,27,.12) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(-30deg,rgba(63,124,27,.12) 0 1px,transparent 1px 46px)}
.stimmen__gitter{position:relative;z-index:2;display:grid;grid-template-columns:.72fr 1.28fr;
  gap:clamp(24px,3.4vw,44px);align-items:start}
.stimmen h2{color:var(--gruen-tief);max-width:6.5em}
.stimmen__zeichen{margin-top:34px;display:flex;gap:7px}
.stimmen__zeichen i{width:0;height:0;display:block;
  border-left:34px solid var(--gruen-knopf);border-bottom:34px solid transparent}
.stimmen__zeichen i:nth-child(2){opacity:.55}

.stimmen__buehne{background:#fff;border-radius:20px;padding:clamp(30px,3.4vw,44px);
  min-height:330px;display:flex;flex-direction:column;
  box-shadow:0 24px 60px -34px rgba(30,70,32,.35)}
.stimme{display:none}
.stimme[data-aktiv="ja"]{display:block;animation:einblenden .35s ease}
@keyframes einblenden{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.stimme blockquote{margin:0 0 30px;font-family:var(--anzeige);font-weight:600;
  font-size:clamp(1.12rem,1.85vw,1.42rem);line-height:1.42;color:var(--tinte)}
.stimme__wer{display:flex;align-items:center;gap:14px}
.stimme__wer img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.stimme__wer b{display:block;font-family:var(--anzeige);font-weight:700;font-size:16px;color:var(--tinte)}
.stimme__wer span{display:block;font-size:14px;color:var(--text-leise)}

.stimmen__steuer{margin-top:auto;padding-top:26px;display:flex;justify-content:flex-end;gap:12px}
.pfeil{width:46px;height:46px;border-radius:50%;background:#fff;cursor:pointer;
  border:1.6px solid var(--gruen-knopf);color:var(--gruen-tief);display:grid;place-items:center;
  transition:background .2s,color .2s}
.pfeil:hover{background:var(--gruen-knopf);color:#fff}
.pfeil svg{width:17px;height:17px}

/* -------------------------------------------------------------- Aufruf -- */
.aufruf{background:var(--tinte);border-radius:var(--rund);color:#fff;overflow:hidden;
  display:grid;grid-template-columns:1fr 1.06fr;align-items:stretch}
.aufruf__text{padding:clamp(34px,4vw,58px)}
.aufruf__text h3{color:#fff;margin-bottom:16px;max-width:12em}
.aufruf__text p{color:#BFC7B8;font-size:15.6px;margin-bottom:32px;max-width:30em}
.aufruf__feld{position:relative;background:var(--pflaume-voll);min-height:280px;
  display:grid;place-items:center;overflow:hidden}
.aufruf__wort{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;padding:0 clamp(20px,3vw,44px);
  font-family:var(--anzeige);font-weight:800;letter-spacing:-.03em;line-height:.92;
  text-transform:uppercase;justify-content:flex-start;padding-top:clamp(18px,3vw,34px);
  font-size:clamp(2.6rem,5.6vw,4.4rem);color:rgba(255,255,255,.22)}
.aufruf__dreiecke{position:absolute;inset:0;opacity:.5;
  background:
    conic-gradient(from 180deg at 88% 22%,#0E100D 0deg 90deg,transparent 90deg),
    conic-gradient(from 180deg at 94% 40%,#0E100D 0deg 90deg,transparent 90deg)}
.aufruf__heft{position:relative;z-index:2;width:min(74%,340px);transform:rotate(-9deg);
  border-radius:8px;overflow:hidden;box-shadow:0 34px 60px -26px rgba(0,0,0,.6)}
.aufruf__heft img{width:100%}
.aufruf__aufdruck{position:absolute;left:0;right:0;top:26%;text-align:center;
  font-family:var(--anzeige);font-weight:800;line-height:1.02;color:var(--tinte);
  font-size:clamp(1.15rem,2.2vw,1.7rem);letter-spacing:-.02em;padding:0 12%}
.aufruf__aufdruck small{display:block;font-size:.56em;letter-spacing:.15em;
  text-transform:uppercase;color:var(--pflaume-voll);margin-bottom:.5em;font-weight:700}

/* --------------------------------------------------------------- Fußzeile -- */
.fuss{padding:clamp(56px,6vw,90px) 0 0}
.fuss__gitter{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:34px}
.fuss__marke .marke{margin-bottom:20px}
.fuss__marke p{font-size:14.6px;color:var(--text-leise);max-width:32em}
.fuss h4{font-size:15px;margin-bottom:16px;font-family:var(--lesen);font-weight:700}
.fuss ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px}
.fuss a{font-size:14.6px;color:var(--gruen-tief);text-decoration:none}
.fuss a:hover{text-decoration:underline}

.siegel{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;
  padding:44px 0 28px;margin-top:44px;border-top:1px solid var(--linie)}
.siegel__stueck{display:flex;align-items:center;gap:11px;border:1px solid var(--linie);
  border-radius:12px;padding:11px 18px;font-size:12.6px;line-height:1.3;
  color:var(--text-leise);font-weight:600;max-width:250px}
.siegel__stueck svg{width:24px;height:24px;flex:none;color:var(--gruen-tief)}
.siegel__stueck b{display:block;color:var(--tinte);font-size:13.2px}

.fuss__schluss{border-top:1px solid var(--linie);padding:22px 0 34px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:12.4px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-leise)}
.fuss__schluss a{color:var(--text-leise);text-decoration:none}
.fuss__schluss a:hover{color:var(--gruen-tief)}

.hinweis{background:var(--gruen-hell);color:var(--gruen-tief);text-align:center;
  font-size:13.4px;padding:12px 26px;font-weight:600}

/* ------------------------------------------------------- Unterseiten-Kopf -- */
.seitenkopf{background:var(--grau);padding:clamp(46px,5vw,78px) 0 clamp(52px,6vw,86px);
  text-align:center}
.seitenkopf .brot{font-size:12.6px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-leise);margin-bottom:18px;font-weight:600}
.seitenkopf .brot a{color:var(--gruen-tief);text-decoration:none}
.seitenkopf p{max-width:600px;margin:22px auto 0;color:#4C5247;font-size:16.6px}

/* Bildkarten für Leistungen und Fachgebiete */
.bildkarten{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.bildkarten--drei{grid-template-columns:repeat(3,1fr)}
.bildkarte{border:1px solid var(--linie);border-radius:20px;overflow:hidden;
  background:#fff;display:flex;flex-direction:column;
  transition:box-shadow .25s,transform .25s}
.bildkarte:hover{box-shadow:0 26px 60px -34px rgba(14,16,13,.3);transform:translateY(-3px)}
.bildkarte img{width:100%;aspect-ratio:25/16;object-fit:cover}
.bildkarte__text{padding:28px 28px 32px;display:flex;flex-direction:column;flex:1}
.bildkarte h3{font-size:1.36rem;margin-bottom:12px}
.bildkarte p{font-size:15.2px;color:var(--text-leise);margin-bottom:20px}
.bildkarte ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px;font-size:14.6px}
.bildkarte li{display:grid;grid-template-columns:19px 1fr;gap:9px;align-items:start;color:var(--text)}
.bildkarte li svg{width:19px;height:19px;color:var(--gruen-knopf);margin-top:2px}
.bildkarte .knopf{margin-top:auto;align-self:flex-start}

/* Preistafeln */
.preise{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.tafel{border:1px solid var(--linie);border-radius:20px;padding:34px 30px 38px;
  display:flex;flex-direction:column;background:#fff}
.tafel--hervor{background:var(--gruen-hell);border-color:#CFE7B4;position:relative}
.tafel--hervor::after{content:"Am häufigsten";position:absolute;top:-13px;left:30px;
  background:var(--gruen-knopf);color:#fff;font-size:11.4px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:999px}
.tafel h3{font-size:1.3rem;margin-bottom:8px}
.tafel__preis{font-family:var(--anzeige);font-weight:700;font-size:2.4rem;
  color:var(--gruen-tief);letter-spacing:-.03em;line-height:1;margin:18px 0 6px}
.tafel__preis small{font-size:.42em;font-weight:600;color:var(--text-leise);letter-spacing:0}
/* :not() noetig — .tafel>p hat mehr Spezifitaet als .tafel__preis und wuerde
   den Preis sonst auf Fliesstextgroesse druecken. */
.tafel>p:not(.tafel__preis){font-size:14.8px;color:var(--text-leise)}
.tafel ul{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:11px;font-size:14.8px}
.tafel li{display:grid;grid-template-columns:19px 1fr;gap:10px;align-items:start}
.tafel li svg{width:19px;height:19px;color:var(--gruen-knopf);margin-top:2px}
.tafel .knopf{margin-top:auto;justify-content:center}

.tabelle{width:100%;border-collapse:collapse;font-size:15px;
  border:1px solid var(--linie);border-radius:14px;overflow:hidden}
.tabelle th,.tabelle td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--linie)}
.tabelle th{background:#F6F8F3;font-family:var(--anzeige);font-weight:700;color:var(--tinte);font-size:14.6px}
.tabelle tr:last-child td{border-bottom:0}
.tabelle td:last-child{font-weight:600;color:var(--gruen-tief);white-space:nowrap}

/* Fragen */
.fragen{display:grid;gap:12px;max-width:860px;margin-inline:auto}
.frage{border:1px solid var(--linie);border-radius:14px;background:#fff;overflow:hidden}
.frage summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;
  align-items:center;justify-content:space-between;gap:18px;
  font-family:var(--anzeige);font-weight:700;font-size:1.05rem;color:var(--tinte)}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"";width:11px;height:11px;flex:none;
  border-right:2.4px solid var(--gruen-knopf);border-bottom:2.4px solid var(--gruen-knopf);
  transform:rotate(45deg);margin-top:-5px;transition:transform .22s}
.frage[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.frage__text{padding:0 24px 22px;font-size:15.4px;color:var(--text-leise);max-width:62em}

/* Formular */
.formular{display:grid;gap:18px}
.feldreihe{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.formular label{display:grid;gap:7px;font-size:14px;font-weight:600;color:var(--tinte)}
.formular input,.formular select,.formular textarea{
  font:400 16px/1.5 var(--lesen);padding:13px 15px;border:1.6px solid var(--linie);
  border-radius:10px;background:#fff;color:var(--text);width:100%}
.formular textarea{min-height:132px;resize:vertical}
.formular input:focus,.formular select:focus,.formular textarea:focus{
  border-color:var(--gruen-knopf);outline:none;box-shadow:0 0 0 3px rgba(63,124,27,.15)}
.formular .zustimmung{grid-template-columns:22px 1fr;display:grid;align-items:start;
  gap:11px;font-weight:400;font-size:14px;color:var(--text-leise)}
.formular .zustimmung input{width:19px;height:19px;margin-top:2px;accent-color:var(--gruen-knopf)}
.formular__hinweis{font-size:13.4px;color:var(--text-leise);margin:0}
.meldung{border-radius:12px;padding:15px 18px;font-size:15px;font-weight:600;
  background:var(--gruen-hell);color:var(--gruen-tief);border:1px solid #CFE7B4}
.meldung[hidden]{display:none !important}

.kontaktkarten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:44px}
.kontaktkarte{border:1px solid var(--linie);border-radius:16px;padding:26px}
.kontaktkarte h4{margin-bottom:10px;font-family:var(--anzeige)}
.kontaktkarte p{font-size:15px;color:var(--text-leise);margin:0}
.kontaktkarte a{color:var(--gruen-tief);text-decoration:none;font-weight:600}
.kontaktkarte a:hover{text-decoration:underline}

.kartenbild{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--linie)}
.kartenbild img{width:100%}
.nadel{position:absolute;left:50%;top:46%;transform:translate(-50%,-100%);
  width:40px;height:40px;color:var(--gruen-knopf);filter:drop-shadow(0 6px 10px rgba(0,0,0,.28))}

/* ------------------------------------------------------------ Einblenden -- */
.zeigen{opacity:0;transform:translateY(20px);
  transition:opacity .62s cubic-bezier(.2,.7,.3,1),transform .62s cubic-bezier(.2,.7,.3,1)}
.zeigen.da{opacity:1;transform:none}

/* ------------------------------------------------------------------ Klein -- */
@media (max-width:1080px){
  .hero__gitter{grid-template-columns:1fr;gap:44px}
  .hero__bogen{display:none}
  .hero__f4{left:-2%}
  .dunkel__gitter,.zahlen__gitter,.ablauf__gitter,.stimmen__gitter,.aufruf{grid-template-columns:1fr}
  .aufruf__feld{min-height:240px}
  .fuss__gitter{grid-template-columns:1fr 1fr}
  .bildkarten--drei{grid-template-columns:repeat(2,1fr)}
  .preise{grid-template-columns:1fr}
  .tafel--hervor{order:-1}
}
@media (max-width:900px){
  .nav,.kopf__still{display:none}
  .burger{display:inline-flex}
  .kopf__rechts{gap:10px}
  body.menue-offen{overflow:hidden}
  /* backdrop-filter macht die Kopfleiste zum Bezugsrahmen fuer position:fixed —
     das Menue faellt dann auf Kopfleistenhoehe zusammen. Bei offenem Menue also
     abschalten, die Leiste ist ohnehin deckend weiss. */
  body.menue-offen .kopf{backdrop-filter:none;background:#fff}
  .nav.offen{display:flex;position:fixed;inset:var(--kopf-hoch) 0 0;background:#fff;
    flex-direction:column;align-items:stretch;gap:2px;padding:22px;margin:0;
    overflow-y:auto;z-index:80}
  .nav.offen .nav__link{font-size:20px;font-family:var(--anzeige);font-weight:700;
    padding:15px 12px;justify-content:space-between}
  .nav.offen .klapp{position:static;opacity:1;visibility:visible;transform:none;
    border:0;box-shadow:none;padding:0 0 12px 12px;display:none}
  .nav.offen .nav__punkt[data-offen="ja"] .klapp{display:block}
  .tonkarten__gitter{grid-template-columns:1fr}
  .zahlen__karte{grid-template-columns:1fr}
  .zahl+.zahl{border-left:0;border-top:1px solid var(--linie)}
  .stufe{grid-template-columns:52px 1fr;gap:6px 12px}
  .stufe__text{grid-column:1/-1;margin-top:6px}
  .ablauf__schluss{grid-template-columns:1fr}
  .kontaktkarten{grid-template-columns:1fr}
}
@media (max-width:680px){
  :root{--kerbe:34px;--rund:18px}
  .hero__rahmen{display:none}
  body{font-size:16px}
  .breite{padding-inline:18px}
  .hero__aufruf{grid-template-columns:1fr;max-width:none;width:100%}
  .hero__aufruf p{max-width:none;padding:18px 18px 4px}
  .hero__aufruf .knopf{margin:14px 14px 14px;justify-content:center}
  .hero__schraeg{width:96%;left:-14%}
  .feld{padding:9px 13px;font-size:12.4px;border-radius:13px}
  .koepfe img{width:25px;height:25px}
  .hero__f1{top:-12px;right:-6px}
  .hero__f2{bottom:24%;right:-8px}
  .hero__f3{bottom:-14px;right:auto;left:8px}
  .hero__f4{top:auto;bottom:44%;left:-8px}
  .dunkel__f2,.dunkel__f3,.ablauf__f2{position:static;margin-top:12px;display:inline-flex}
  .bildkarten,.bildkarten--drei{grid-template-columns:1fr}
  .fuss__gitter{grid-template-columns:1fr}
  .feldreihe{grid-template-columns:1fr}
  .vertrauen__reihe{gap:24px 34px}
  .stimmen__steuer{justify-content:center}
  .fuss__schluss{justify-content:flex-start}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .zeigen{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
@media print{.kopf,.hero__zier,.feld,.stimmen__steuer{display:none}}

/* Kontaktseite: zweispaltiger Block bricht früher als das übrige Raster. */
@media (max-width:1080px){ .kontakt__gitter{grid-template-columns:1fr !important} }

/* Unterseiten: die Titelzeile darf kleiner ausfallen als auf der Startseite. */
.seitenkopf h1{font-size:clamp(2.2rem,4.6vw,3.5rem)}
/* Aktiver Nav-Punkt — greift auch beim Klappknopf, der kein href trägt. */
.nav__link[aria-current="page"]{color:var(--gruen-tief);font-weight:600}

/* Der Aufdruck liegt auf dem geliefertem Broschürenbild. Der Umschlag soll laut
   Bildliste weiß sein — dieser Verlauf hält die Schrift auch dann lesbar, wenn
   das Bild dunkler ausfällt als bestellt. */
.aufruf__heft::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.6) 44%,
             rgba(255,255,255,0) 70%)}
.aufruf__aufdruck{z-index:2}

/* Der Anfrage-Knopf im aufgeklappten Menü. Am Schreibtisch verdeckt, dort sitzt
   derselbe Knopf schon rechts in der Kopfleiste. */
.nav__knopf{display:none}
@media (max-width:900px){
  .nav.offen .nav__knopf{display:inline-flex;margin-top:18px;justify-content:center}
}
/* Unter 560 px passen Marke, Knopf und Burger nicht mehr nebeneinander —
   der Knopf wandert ins Menü, die Unterzeile der Marke entfällt. */
@media (max-width:560px){
  .kopf__rechts>.knopf{display:none}
  .marke__text i{display:none}
  .marke__text b{font-size:1.34rem}
  .hero__f4{bottom:34%;left:-6px}
}