/* ═══════════════════════════════════════════════════════════
   CEFIVAR — Schwarzwald Moderne
   Space Grotesk + Newsreader
   Weiß · Tannengrün · Kupfer
   ─────────────────────────────────────────────────────────
   Swiss-German grid discipline meets southern warmth.
   Dieter Rams structure. Visible grid lines. Big numbers.
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400;1,6..72,500&display=swap');

:root {
  /* ── Farben ── */
  --weiss:      #f7f6f3;
  --weiss-2:    #efede8;
  --weiss-3:    #e5e2da;
  --papier:     #fcfbf9;
  --rein:       #ffffff;
  --tanne:      #1f3d34;
  --tanne-2:    #2a5145;
  --tanne-3:    #16302a;
  --tanne-hell: #3d6557;
  --kupfer:     #b06a3f;
  --kupfer-h:   #c8835a;
  --kupfer-d:   #8d5230;
  --kupfer-p:   rgba(176,106,63,.08);
  --kupfer-b:   rgba(176,106,63,.25);
  --anthrazit:  #2c2e2b;
  --grau:       #6f7370;
  --grau-h:     #9a9d98;
  --linie:      rgba(31,61,52,.12);
  --linie-d:    rgba(31,61,52,.2);

  /* ── Typografie ── */
  --ff-g: 'Space Grotesk', system-ui, sans-serif;
  --ff-s: 'Newsreader', Georgia, serif;

  /* ── Raster ── */
  --r:   0px;
  --r2:  2px;
  --max: 1200px;
  --max-sm: 820px;
  --gut: 32px;

  --ease: cubic-bezier(.33,1,.68,1);
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ff-g);
  color: var(--anthrazit);
  background: var(--weiss);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

.wrap    { max-width: var(--max);    margin: 0 auto; padding: 0 var(--gut); }
.wrap-sm { max-width: var(--max-sm); margin: 0 auto; padding: 0 var(--gut); }

/* ═══════════════════════════════════════════════════════════
   TOPBALKEN
═══════════════════════════════════════════════════════════ */
.balken {
  background: var(--tanne);
  color: rgba(247,246,243,.6);
  font-size: .72rem; letter-spacing: .02em;
  padding: .55rem 0;
}
.balken-in { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
.balken a { color: rgba(247,246,243,.72); }
.balken a:hover { color: var(--kupfer-h); }
.balken-r { display: flex; gap: 1.75rem; align-items: center; }
.balken-r span { display: flex; align-items: center; gap: .35rem; }
.balken-num { font-feature-settings: 'tnum'; }

/* ═══════════════════════════════════════════════════════════
   KOPF — Wortmarke
═══════════════════════════════════════════════════════════ */
.kopf {
  background: var(--weiss);
  position: sticky; top: 0; z-index: 900;
  border-bottom: 1px solid var(--linie-d);
}
.kopf-in {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px; gap: 2rem;
}
/* Wortmarke statt Logo */
.marke { display: flex; align-items: baseline; gap: .5rem; }
.marke-name {
  font-family: var(--ff-g); font-weight: 700;
  font-size: 1.5rem; letter-spacing: -.02em; color: var(--tanne);
}
.marke-punkt { width: 7px; height: 7px; background: var(--kupfer); flex-shrink: 0; align-self: center; }
.marke-sub {
  font-family: var(--ff-g); font-size: .6rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--grau);
}

/* Navigation */
.nav { display: flex; align-items: center; gap: 0; }
.nav a {
  font-family: var(--ff-g); font-size: .8rem; font-weight: 500;
  letter-spacing: .01em; color: var(--grau);
  padding: .5rem .9rem; transition: color .2s; position: relative; white-space: nowrap;
}
.nav a:hover, .nav a.aktiv { color: var(--tanne); }
.nav a.aktiv::before {
  content: ''; position: absolute; top: 50%; left: .1rem; transform: translateY(-50%);
  width: 4px; height: 4px; background: var(--kupfer);
}
.nav a.aktiv { padding-left: 1.1rem; }
.nav-dd { position: relative; }
.nav-dd > a span { font-size: .6rem; opacity: .5; }
.dd {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--rein); border: 1px solid var(--linie-d);
  min-width: 230px; padding: .5rem 0;
  box-shadow: 0 12px 40px rgba(31,61,52,.12);
  opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: all .2s var(--ease); z-index: 200;
}
.nav-dd:hover .dd { opacity: 1; pointer-events: all; transform: translateY(0); }
.dd a {
  display: flex; align-items: center; gap: .6rem; padding: .6rem 1.2rem;
  font-size: .78rem; font-weight: 500; color: var(--grau);
}
.dd a::before { content: ''; width: 4px; height: 4px; background: var(--kupfer-b); flex-shrink: 0; transition: background .2s; }
.dd a:hover { color: var(--tanne); background: var(--weiss); }
.dd a:hover::before { background: var(--kupfer); }
.kopf-cta { display: flex; align-items: center; gap: .75rem; }

/* ═══════════════════════════════════════════════════════════
   KNÖPFE
═══════════════════════════════════════════════════════════ */
.knopf {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-g); font-size: .78rem; font-weight: 600;
  letter-spacing: .01em; border: none; cursor: pointer;
  transition: all .2s var(--ease); white-space: nowrap;
  border-radius: var(--r2);
}
.k-tanne { background: var(--tanne); color: var(--weiss); padding: .75rem 1.6rem; }
.k-tanne:hover { background: var(--tanne-2); }
.k-kupfer { background: var(--kupfer); color: var(--rein); padding: .75rem 1.6rem; }
.k-kupfer:hover { background: var(--kupfer-d); }
.k-rand { background: transparent; border: 1px solid var(--tanne); color: var(--tanne); padding: .72rem 1.55rem; }
.k-rand:hover { background: var(--tanne); color: var(--weiss); }
.k-rand-h { background: transparent; border: 1px solid rgba(247,246,243,.3); color: rgba(247,246,243,.85); padding: .72rem 1.55rem; }
.k-rand-h:hover { background: rgba(247,246,243,.1); border-color: var(--kupfer-h); color: var(--kupfer-h); }
.k-gr { padding: .9rem 2.2rem; font-size: .84rem; }
.k-kl { padding: .45rem 1rem; font-size: .72rem; }
.k-voll { width: 100%; justify-content: center; }

/* Mobil */
.burg { display: none; background: none; border: none; color: var(--tanne); font-size: 1.4rem; padding: .3rem; }
.mob {
  display: none; position: fixed; inset: 76px 0 0 0; z-index: 850;
  background: var(--weiss); flex-direction: column;
  border-top: 1px solid var(--linie-d); overflow-y: auto;
}
.mob.auf { display: flex; }
.mob > a {
  padding: 1rem 1.5rem; font-family: var(--ff-g); font-size: .82rem; font-weight: 500;
  color: var(--grau); border-bottom: 1px solid var(--linie);
}
.mob > a:hover { color: var(--tanne); background: var(--weiss-2); }
.mob-foot { background: var(--tanne); padding: 1.5rem; margin-top: auto; }
.mob-foot-l { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(247,246,243,.4); margin-bottom: .75rem; }
.mob-foot a { display: flex; align-items: center; gap: .5rem; color: rgba(247,246,243,.7)!important; font-size: .85rem; padding: .45rem 0!important; }
.mob-foot a:hover { color: var(--kupfer-h)!important; }

/* ═══════════════════════════════════════════════════════════
   PFLICHT-LEISTE §6a PAngV
═══════════════════════════════════════════════════════════ */
.pflicht {
  background: var(--tanne-3); color: rgba(247,246,243,.62);
  padding: .8rem 0;
}
.pflicht-in { display: flex; align-items: flex-start; gap: .85rem; }
.pflicht-tag {
  font-family: var(--ff-g); font-size: .6rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tanne-3); background: var(--kupfer-h);
  padding: .2rem .55rem; flex-shrink: 0; margin-top: 1px;
}
.pflicht p { font-size: .73rem; line-height: 1.6; }
.pflicht strong { color: var(--weiss); font-weight: 500; }
.pflicht .num { font-feature-settings: 'tnum'; }

/* ═══════════════════════════════════════════════════════════
   HERO — Raster, große Zahlen
═══════════════════════════════════════════════════════════ */
.hero {
  background: var(--weiss);
  border-bottom: 1px solid var(--linie-d);
  position: relative; overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  min-height: 86vh;
}
.hero-links {
  padding: 90px var(--gut) 70px;
  border-right: 1px solid var(--linie-d);
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
}
/* Rasterlinien */
.hero-links::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 33.33%;
  width: 1px; background: var(--linie); pointer-events: none;
}
.hero-marke {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--ff-g); font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--kupfer-d);
  margin-bottom: 2rem;
}
.hero-marke::before { content: ''; width: 24px; height: 1px; background: var(--kupfer); }
.hero h1 {
  font-family: var(--ff-g); font-weight: 500;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  color: var(--tanne); line-height: 1.02; letter-spacing: -.03em;
  margin-bottom: 1.75rem;
}
.hero h1 em {
  font-family: var(--ff-s); font-style: italic; font-weight: 300;
  color: var(--kupfer);
}
.hero-text {
  font-size: 1rem; font-weight: 400; color: var(--grau);
  line-height: 1.8; max-width: 460px; margin-bottom: 2.5rem;
}
.hero-akt { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-rechts {
  background: var(--tanne);
  padding: 90px var(--gut) 70px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
/* Große Hintergrundzahl */
.hero-bgnum {
  position: absolute; top: -30px; right: -20px;
  font-family: var(--ff-g); font-size: 16rem; font-weight: 700;
  color: rgba(247,246,243,.03); line-height: 1; pointer-events: none;
  font-feature-settings: 'tnum';
}
.hero-rate-label {
  font-family: var(--ff-g); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--kupfer-h);
  margin-bottom: 1rem; position: relative; z-index: 1;
}
.hero-rate {
  font-family: var(--ff-g); font-size: clamp(4rem, 8vw, 6.5rem); font-weight: 700;
  color: var(--weiss); line-height: .9; letter-spacing: -.04em;
  margin-bottom: .5rem; position: relative; z-index: 1;
  font-feature-settings: 'tnum';
}
.hero-rate span { color: var(--kupfer-h); }
.hero-rate-sub {
  font-family: var(--ff-s); font-style: italic; font-size: 1rem;
  color: rgba(247,246,243,.5); margin-bottom: 2.5rem; position: relative; z-index: 1;
}
.hero-mini {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(247,246,243,.1); border: 1px solid rgba(247,246,243,.1);
  position: relative; z-index: 1;
}
.hmini { background: var(--tanne); padding: 1.25rem; }
.hmini-z { font-family: var(--ff-g); font-size: 1.6rem; font-weight: 700; color: var(--weiss); line-height: 1; font-feature-settings: 'tnum'; }
.hmini-l { font-family: var(--ff-g); font-size: .62rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(247,246,243,.4); margin-top: .4rem; }

/* ═══════════════════════════════════════════════════════════
   ABSCHNITTE
═══════════════════════════════════════════════════════════ */
.absch { padding: 100px 0; }
.absch-sm { padding: 64px 0; }
.a-weiss { background: var(--weiss); }
.a-papier { background: var(--papier); }
.a-tanne { background: var(--tanne); }
.a-rein { background: var(--rein); }

.kapitel {
  display: flex; align-items: baseline; gap: 1rem;
  margin-bottom: 3rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--linie-d);
}
.kapitel-nr {
  font-family: var(--ff-g); font-size: .8rem; font-weight: 600;
  color: var(--kupfer); font-feature-settings: 'tnum'; flex-shrink: 0;
}
.kapitel-txt { flex: 1; }
.augen {
  font-family: var(--ff-g); font-size: .66rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--kupfer-d);
  margin-bottom: .75rem;
}
h2.titel {
  font-family: var(--ff-g); font-weight: 500;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  color: var(--tanne); line-height: 1.08; letter-spacing: -.025em;
}
.a-tanne h2.titel { color: var(--weiss); }
h2.titel em { font-family: var(--ff-s); font-style: italic; font-weight: 300; color: var(--kupfer); }
.untertext { font-size: .96rem; font-weight: 400; color: var(--grau); line-height: 1.8; max-width: 480px; margin-top: 1rem; }
.a-tanne .untertext { color: rgba(247,246,243,.55); }

/* ═══════════════════════════════════════════════════════════
   LEISTUNGEN — Raster mit Linien
═══════════════════════════════════════════════════════════ */
.leist-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--linie-d); border-left: 1px solid var(--linie-d);
}
.leist {
  padding: 2.5rem 2rem; background: var(--weiss);
  border-right: 1px solid var(--linie-d); border-bottom: 1px solid var(--linie-d);
  transition: background .2s; cursor: pointer; position: relative;
}
.leist:hover { background: var(--papier); }
.leist-nr {
  font-family: var(--ff-g); font-size: .72rem; font-weight: 600;
  color: var(--kupfer); margin-bottom: 1.5rem; font-feature-settings: 'tnum';
  display: flex; align-items: center; gap: .5rem;
}
.leist-nr::after { content: ''; flex: 1; height: 1px; background: var(--linie); }
.leist-name { font-family: var(--ff-g); font-size: 1.2rem; font-weight: 600; color: var(--tanne); margin-bottom: .7rem; letter-spacing: -.01em; }
.leist-txt { font-size: .85rem; font-weight: 400; color: var(--grau); line-height: 1.7; margin-bottom: 1.5rem; }
.leist-link {
  font-family: var(--ff-g); font-size: .72rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--tanne);
  display: inline-flex; align-items: center; gap: 6px; transition: gap .2s;
}
.leist:hover .leist-link { gap: 10px; color: var(--kupfer); }

/* ═══════════════════════════════════════════════════════════
   ABLAUF — nummerierte Reihe
═══════════════════════════════════════════════════════════ */
.ablauf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--tanne); }
.ablauf-s {
  padding: 2rem 1.5rem 2rem 0; border-right: 1px solid var(--linie);
}
.ablauf-s:last-child { border-right: none; }
.ablauf-s + .ablauf-s { padding-left: 1.5rem; }
.ablauf-nr {
  font-family: var(--ff-g); font-size: 2.8rem; font-weight: 700;
  color: var(--tanne); line-height: 1; margin-bottom: 1rem;
  font-feature-settings: 'tnum';
}
.ablauf-nr span { color: var(--kupfer); }
.ablauf-t { font-family: var(--ff-g); font-size: 1rem; font-weight: 600; color: var(--tanne); margin-bottom: .5rem; }
.ablauf-d { font-size: .82rem; font-weight: 400; color: var(--grau); line-height: 1.7; }
.a-tanne .ablauf-nr { color: var(--weiss); }
.a-tanne .ablauf-t { color: var(--weiss); }
.a-tanne .ablauf-d { color: rgba(247,246,243,.5); }
.a-tanne .ablauf { border-top-color: var(--kupfer); }
.a-tanne .ablauf-s { border-right-color: rgba(247,246,243,.1); }

/* ═══════════════════════════════════════════════════════════
   BEISPIEL — Datenblatt
═══════════════════════════════════════════════════════════ */
.blatt {
  background: var(--rein); border: 1px solid var(--linie-d);
}
.blatt-kopf {
  background: var(--tanne); padding: 1.25rem 1.75rem;
  display: flex; align-items: center; justify-content: space-between;
}
.blatt-titel { font-family: var(--ff-g); font-size: .95rem; font-weight: 600; color: var(--weiss); letter-spacing: -.01em; }
.blatt-ref { font-family: var(--ff-g); font-size: .6rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--kupfer-h); }
.blatt-zeilen { }
.blatt-z {
  display: grid; grid-template-columns: 1fr auto;
  padding: 1rem 1.75rem; border-bottom: 1px solid var(--linie);
  align-items: baseline;
}
.blatt-z:last-child { border-bottom: none; }
.blatt-z.gross { background: var(--kupfer-p); }
.blatt-bez { font-family: var(--ff-g); font-size: .8rem; font-weight: 400; color: var(--grau); }
.blatt-wert { font-family: var(--ff-g); font-size: 1.1rem; font-weight: 700; color: var(--tanne); font-feature-settings: 'tnum'; }
.blatt-z.gross .blatt-wert { color: var(--kupfer); font-size: 1.4rem; }
.blatt-fuss { padding: 1rem 1.75rem; background: var(--papier); font-size: .7rem; font-weight: 400; color: var(--grau); line-height: 1.65; }

/* ═══════════════════════════════════════════════════════════
   RECHNER
═══════════════════════════════════════════════════════════ */
.rechner {
  background: var(--rein); border: 1px solid var(--linie-d);
  padding: 2.5rem;
}
.rechner-kopf { font-family: var(--ff-g); font-size: 1.15rem; font-weight: 600; color: var(--tanne); margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linie-d); letter-spacing: -.01em; }
.rechner-z { margin-bottom: 1.5rem; }
.rechner-z label { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--ff-g); font-size: .7rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--grau); margin-bottom: .5rem; }
.rechner-w { font-family: var(--ff-g); font-size: 1.1rem; font-weight: 700; color: var(--tanne); text-transform: none; letter-spacing: 0; font-feature-settings: 'tnum'; }
input[type=range] { width: 100%; accent-color: var(--kupfer); height: 2px; cursor: pointer; }
.rechner-erg { background: var(--tanne); margin-top: 1.5rem; }
.rechner-r {
  display: flex; justify-content: space-between; align-items: center;
  padding: .7rem 1.25rem; font-family: var(--ff-g); font-size: .8rem; font-weight: 400;
  color: rgba(247,246,243,.55); border-bottom: 1px solid rgba(247,246,243,.08);
}
.rechner-r:last-child { border-bottom: none; }
.rechner-r .rw { font-family: var(--ff-g); font-weight: 700; color: var(--weiss); font-feature-settings: 'tnum'; }
.rechner-r.summe { background: var(--tanne-3); }
.rechner-r.summe .rw { color: var(--kupfer-h); font-size: 1.15rem; }

/* ═══════════════════════════════════════════════════════════
   ZAHLEN-BAND
═══════════════════════════════════════════════════════════ */
.zahlen {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--linie-d); border-bottom: 1px solid var(--linie-d);
}
.zahl {
  padding: 2.5rem 1.5rem; border-right: 1px solid var(--linie);
  text-align: left;
}
.zahl:last-child { border-right: none; }
.zahl-z { font-family: var(--ff-g); font-size: clamp(2.2rem, 3.5vw, 3rem); font-weight: 700; color: var(--tanne); line-height: 1; font-feature-settings: 'tnum'; letter-spacing: -.02em; }
.zahl-z span { color: var(--kupfer); }
.zahl-l { font-family: var(--ff-g); font-size: .66rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); margin-top: .6rem; }

/* ═══════════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════════ */
.faq-z { border-bottom: 1px solid var(--linie-d); }
.faq-z:first-child { border-top: 1px solid var(--linie-d); }
.faq-f { display: flex; justify-content: space-between; align-items: center; padding: 1.4rem 0; cursor: pointer; user-select: none; gap: 1.5rem; transition: color .2s; }
.faq-f:hover { color: var(--kupfer); }
.faq-ft { font-family: var(--ff-g); font-size: 1rem; font-weight: 600; color: var(--tanne); line-height: 1.3; letter-spacing: -.01em; }
.faq-f:hover .faq-ft { color: var(--kupfer); }
.faq-ic {
  width: 28px; height: 28px; border: 1px solid var(--linie-d);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 1rem; color: var(--kupfer); transition: all .2s;
}
.faq-z.auf .faq-ic { background: var(--kupfer); color: var(--rein); border-color: var(--kupfer); }
.faq-a { display: none; padding: 0 0 1.4rem; font-size: .9rem; font-weight: 400; color: var(--grau); line-height: 1.8; max-width: 720px; }
.faq-a a { color: var(--kupfer); text-decoration: underline; }
.faq-z.auf .faq-a { display: block; }

/* ═══════════════════════════════════════════════════════════
   FORMULAR
═══════════════════════════════════════════════════════════ */
.form { background: var(--rein); border: 1px solid var(--linie-d); }
.formk { background: var(--tanne); padding: 1.5rem 2rem; }
.formk h3 { font-family: var(--ff-g); font-size: 1.1rem; font-weight: 600; color: var(--weiss); letter-spacing: -.01em; }
.formk p { font-family: var(--ff-g); font-size: .75rem; font-weight: 400; color: rgba(247,246,243,.5); margin-top: .25rem; }
.formb { padding: 2rem; }
.fr { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.fz { display: flex; flex-direction: column; gap: .4rem; }
.fz.voll { grid-column: 1 / -1; }
.fz label { font-family: var(--ff-g); font-size: .64rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
.fz input, .fz select, .fz textarea {
  width: 100%; padding: .78rem .9rem;
  border: 1px solid var(--linie-d); border-radius: var(--r2);
  font-family: var(--ff-g); font-size: .9rem; font-weight: 400; color: var(--anthrazit);
  background: var(--papier); transition: border-color .2s;
}
.fz input:focus, .fz select:focus, .fz textarea:focus { outline: none; border-color: var(--kupfer); background: var(--rein); }
.fz textarea { resize: vertical; min-height: 110px; }
.f-trenn {
  font-family: var(--ff-g); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--kupfer-d);
  padding-bottom: .5rem; border-bottom: 1px solid var(--linie); margin-bottom: .3rem;
  display: flex; align-items: center; gap: .5rem;
}
.f-trenn::before { content: ''; width: 16px; height: 2px; background: var(--kupfer); }
.zust { display: flex; align-items: flex-start; gap: 10px; font-family: var(--ff-g); font-size: .82rem; font-weight: 400; color: var(--grau); line-height: 1.6; }
.zust input[type=checkbox] { margin-top: 3px; width: 15px; height: 15px; accent-color: var(--kupfer); flex-shrink: 0; }
.zust a { color: var(--kupfer); text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   SEITEN-HERO
═══════════════════════════════════════════════════════════ */
.shero { background: var(--tanne); padding: 80px 0 56px; position: relative; overflow: hidden; }
.shero-bgnum { position: absolute; top: 50%; right: -10px; transform: translateY(-50%); font-family: var(--ff-g); font-size: 14rem; font-weight: 700; color: rgba(247,246,243,.03); line-height: 1; pointer-events: none; font-feature-settings: 'tnum'; }
.shero .wrap { position: relative; z-index: 1; }
.brot { display: flex; gap: .5rem; align-items: center; font-family: var(--ff-g); font-size: .68rem; font-weight: 500; letter-spacing: .04em; color: rgba(247,246,243,.45); margin-bottom: 1.25rem; flex-wrap: wrap; }
.brot a { color: rgba(247,246,243,.55); }
.brot a:hover { color: var(--kupfer-h); }
.brot .t { color: rgba(247,246,243,.3); }
.shero h1 { font-family: var(--ff-g); font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 500; color: var(--weiss); line-height: 1.05; letter-spacing: -.03em; }
.shero h1 em { font-family: var(--ff-s); font-style: italic; font-weight: 300; color: var(--kupfer-h); }
.shero .us { font-family: var(--ff-g); font-weight: 400; color: rgba(247,246,243,.55); font-size: .96rem; margin-top: 1rem; max-width: 540px; }
/* Pillen */
.pillen { display: inline-flex; margin-top: 2rem; border: 1px solid rgba(247,246,243,.15); }
.pille { padding: .75rem 1.4rem; border-right: 1px solid rgba(247,246,243,.15); font-family: var(--ff-g); font-size: .7rem; font-weight: 400; color: rgba(247,246,243,.5); }
.pille:last-child { border-right: none; }
.pille strong { display: block; font-family: var(--ff-g); font-size: 1.1rem; font-weight: 700; color: var(--kupfer-h); margin-bottom: .15rem; font-feature-settings: 'tnum'; }

/* ═══════════════════════════════════════════════════════════
   BOXEN
═══════════════════════════════════════════════════════════ */
.box-kupfer { background: var(--kupfer-p); border-left: 3px solid var(--kupfer); padding: 1rem 1.25rem; font-size: .84rem; font-weight: 400; color: var(--anthrazit); line-height: 1.7; }
.box-kupfer strong { color: var(--kupfer-d); font-weight: 600; }
.box-warn { background: #fbf3e9; border-left: 3px solid var(--kupfer); padding: .95rem 1.15rem; font-size: .83rem; font-weight: 400; color: #7a4a20; line-height: 1.7; }
.box-tanne { background: var(--tanne); border-left: 3px solid var(--kupfer); padding: 1rem 1.25rem; font-size: .84rem; font-weight: 400; color: rgba(247,246,243,.65); line-height: 1.7; }
.box-tanne strong { color: var(--weiss); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   KONTAKT
═══════════════════════════════════════════════════════════ */
.kon-z { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.5rem 0; border-bottom: 1px solid var(--linie-d); }
.kon-z:first-child { border-top: 1px solid var(--linie-d); }
.kon-ic { width: 44px; height: 44px; border: 1px solid var(--linie-d); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; color: var(--kupfer); }
.kon-l { font-family: var(--ff-g); font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--grau-h); margin-bottom: .3rem; }
.kon-w { font-family: var(--ff-g); font-size: 1.05rem; font-weight: 600; color: var(--tanne); }
.kon-w a { color: var(--kupfer); }
.kon-w a:hover { color: var(--kupfer-d); }
.kon-s { font-family: var(--ff-g); font-size: .8rem; font-weight: 400; color: var(--grau); margin-top: .2rem; }

/* ═══════════════════════════════════════════════════════════
   COOKIE
═══════════════════════════════════════════════════════════ */
.cookie { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: var(--tanne-3); border-top: 2px solid var(--kupfer); padding: 1.1rem 1.5rem; display: none; }
.cookie.an { display: block; }
.cookie-in { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.cookie-t { flex: 1; font-family: var(--ff-g); font-size: .8rem; font-weight: 400; color: rgba(247,246,243,.65); line-height: 1.6; min-width: 200px; }
.cookie-t a { color: var(--kupfer-h); text-decoration: underline; }
.cookie-b { display: flex; gap: .7rem; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   FUSS
═══════════════════════════════════════════════════════════ */
.fuss { background: var(--tanne); color: rgba(247,246,243,.5); }
.fuss-haupt { padding: 64px 0 48px; display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 3rem; border-bottom: 1px solid rgba(247,246,243,.1); }
.fuss-marke { display: flex; align-items: baseline; gap: .4rem; margin-bottom: 1rem; }
.fuss-marke-n { font-family: var(--ff-g); font-weight: 700; font-size: 1.4rem; color: var(--weiss); letter-spacing: -.02em; }
.fuss-marke-p { width: 6px; height: 6px; background: var(--kupfer); align-self: center; }
.fuss-claim { font-family: var(--ff-s); font-style: italic; font-weight: 300; font-size: .92rem; color: rgba(247,246,243,.45); line-height: 1.7; max-width: 250px; margin-bottom: 1.25rem; }
.fuss-koord { display: flex; flex-direction: column; gap: .5rem; }
.fuss-koord span { font-size: .82rem; font-weight: 400; color: rgba(247,246,243,.45); display: flex; align-items: center; gap: .5rem; }
.fuss-koord a { color: rgba(247,246,243,.55); }
.fuss-koord a:hover { color: var(--kupfer-h); }
.fuss-kt { font-family: var(--ff-g); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(247,246,243,.35); margin-bottom: 1.2rem; }
.fuss-liste { display: flex; flex-direction: column; gap: .5rem; }
.fuss-liste a { font-size: .83rem; font-weight: 400; color: rgba(247,246,243,.45); transition: all .2s; }
.fuss-liste a:hover { color: var(--kupfer-h); padding-left: 4px; }
.fuss-reg { font-size: .7rem; font-weight: 400; line-height: 1.85; color: rgba(247,246,243,.32); }
.fuss-reg strong { color: rgba(247,246,243,.5); font-weight: 500; }
.fuss-reg .num { font-feature-settings: 'tnum'; }
.fuss-unten { padding: 1.4rem 0; display: flex; justify-content: space-between; align-items: center; font-family: var(--ff-g); font-size: .72rem; font-weight: 400; color: rgba(247,246,243,.3); flex-wrap: wrap; gap: .5rem; }
.fuss-unten a { color: rgba(247,246,243,.4); }
.fuss-unten a:hover { color: var(--kupfer-h); }

/* ═══════════════════════════════════════════════════════════
   GRILLES NOMMÉES (remplacent les inline styles)
═══════════════════════════════════════════════════════════ */
.grid-bsp  { display:grid; grid-template-columns:1fr 1fr;   gap:5rem; align-items:center; }
.grid-cta  { display:grid; grid-template-columns:1fr auto;  gap:3rem; align-items:center; }
.grid-form { display:grid; grid-template-columns:1fr 340px; gap:3rem; align-items:start; }
.grid-kon  { display:grid; grid-template-columns:1fr 1fr;   gap:4rem; align-items:start; }
.grid-seite{ display:grid; grid-template-columns:1fr 1fr;   gap:3.5rem; align-items:start; }

/* ═══════════════════════════════════════════════════════════
   WHATSAPP — bouton flottant + bannière
═══════════════════════════════════════════════════════════ */
.wa-float {
  position: fixed; bottom: 28px; right: 28px; z-index: 8000;
  display: flex; align-items: center; gap: .75rem;
  background: #25d366; color: #fff; border-radius: 60px;
  padding: .85rem 1.4rem .85rem 1rem;
  font-family: var(--ff-g); font-size: .82rem; font-weight: 600;
  box-shadow: 0 6px 24px rgba(37,211,102,.35);
  transition: transform .25s var(--ease), box-shadow .25s;
  text-decoration: none; cursor: pointer;
  animation: waEin .6s .8s var(--ease) both;
}
@keyframes waEin { from { opacity:0; transform:translateY(20px) scale(.9); } to { opacity:1; transform:translateY(0) scale(1); } }
.wa-float:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(37,211,102,.45); color: #fff; }
.wa-float svg { width: 26px; height: 26px; flex-shrink: 0; fill: #fff; }
.wa-float-txt { white-space: nowrap; }

.wa-banner {
  display: flex; align-items: center; gap: 1rem;
  background: linear-gradient(135deg, #dcf8e8 0%, #e8faf0 100%);
  border: 1px solid #b8e6cc; border-left: 4px solid #25d366;
  padding: 1.1rem 1.4rem; margin-bottom: 1.5rem;
  border-radius: var(--r2);
}
.wa-banner-ic { font-size: 1.6rem; flex-shrink: 0; line-height: 1; }
.wa-banner-txt { flex: 1; }
.wa-banner-titre { font-family: var(--ff-g); font-size: .88rem; font-weight: 600; color: var(--tanne); margin-bottom: .2rem; }
.wa-banner-sous { font-family: var(--ff-g); font-size: .78rem; font-weight: 400; color: var(--grau); line-height: 1.5; }
.wa-banner .knopf-wa {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #25d366; color: #fff; padding: .6rem 1.2rem;
  font-family: var(--ff-g); font-size: .76rem; font-weight: 600;
  border-radius: var(--r2); white-space: nowrap;
  transition: background .2s; text-decoration: none; flex-shrink: 0;
}
.wa-banner .knopf-wa:hover { background: #1fb855; color: #fff; }
.wa-banner .knopf-wa svg { width: 16px; height: 16px; fill: #fff; }

/* ═══════════════════════════════════════════════════════════
   UTILS
═══════════════════════════════════════════════════════════ */
.tc { text-align: center; }
.mt1{margin-top:.5rem}.mt2{margin-top:1rem}.mt3{margin-top:1.5rem}.mt4{margin-top:2rem}.mt5{margin-top:2.5rem}
.mb2{margin-bottom:1rem}.mb3{margin-bottom:1.5rem}

/* ═══════════════════════════════════════════════════════════
   ANIMATION
═══════════════════════════════════════════════════════════ */
@keyframes auf { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.an1 { animation: auf .7s var(--ease) both; }
.an2 { animation: auf .7s .1s var(--ease) both; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media(max-width:1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-links { border-right: none; border-bottom: 1px solid var(--linie-d); min-height: auto; }
  .hero-links::before { display: none; }
  .leist-grid { grid-template-columns: repeat(2, 1fr); }
  .ablauf { grid-template-columns: 1fr 1fr; }
  .ablauf-s:nth-child(2) { border-right: none; }
  .ablauf-s { border-bottom: 1px solid var(--linie); padding: 1.75rem 0; }
  .ablauf-s + .ablauf-s { padding-left: 0; }
  .ablauf-s:nth-child(odd) { padding-right: 1.5rem; border-right: 1px solid var(--linie); padding-left: 0; }
  .ablauf-s:nth-child(even) { padding-left: 1.5rem; }
  .zahlen { grid-template-columns: repeat(2, 1fr); }
  .zahl:nth-child(2) { border-right: none; }
  .fuss-haupt { grid-template-columns: 1fr 1fr; }
  .grid-bsp { gap: 3rem; }
  .grid-form { grid-template-columns: 1fr 280px; gap: 2rem; }
}
@media(max-width:768px) {
  .nav, .kopf-cta .knopf:not(.burg) { display: none; }
  .burg { display: flex; }
  .hero h1 { font-size: 2.4rem; }
  h2.titel { font-size: 1.9rem; }
  .shero h1 { font-size: 2rem; }
  .leist-grid { grid-template-columns: 1fr; }
  .ablauf { grid-template-columns: 1fr; }
  .ablauf-s { border-right: none!important; padding-left: 0!important; padding-right: 0!important; }
  .zahlen { grid-template-columns: 1fr 1fr; }
  .fr { grid-template-columns: 1fr; }
  .fuss-haupt { grid-template-columns: 1fr; gap: 2rem; }
  .balken-r { display: none; }
  .pillen { display: flex; flex-direction: column; }
  .pille { border-right: none; border-bottom: 1px solid rgba(247,246,243,.15); }
  .blatt-z.gross .blatt-wert { font-size: 1.2rem; }
  .grid-bsp  { grid-template-columns: 1fr; gap: 2.5rem; }
  .grid-cta  { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
  .grid-cta .knopf { width: 100%; justify-content: center; }
  .grid-form { grid-template-columns: 1fr; }
  .grid-form > div:last-child { position: static !important; }
  .grid-kon  { grid-template-columns: 1fr; gap: 2.5rem; }
  .grid-seite{ grid-template-columns: 1fr; gap: 2rem; }
  .wa-banner { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .wa-float { bottom: 20px; right: 16px; padding: .75rem 1.1rem .75rem .85rem; font-size: .76rem; }
  .wa-float svg { width: 22px; height: 22px; }
  .absch { padding: 60px 0; }
  .wrap, .wrap-sm { padding: 0 20px; }
  .grid-form { gap: 1.5rem; }
  .formb { padding: 1.5rem; }
  .formk { padding: 1.2rem 1.5rem; }
  .form { border-left: none; border-right: none; }
  .box-warn, .box-kupfer, .box-tanne { padding: .85rem 1rem; font-size: .8rem; }
  .wa-banner { padding: .9rem 1rem; }
  .pflicht-in { flex-direction: column; gap: .5rem; }
  .pflicht p { font-size: .68rem; }
  .blatt-z { padding: .8rem 1.2rem; }
  .blatt-fuss { padding: .8rem 1.2rem; }
  .blatt-kopf { padding: 1rem 1.2rem; }
}
@media(max-width:480px) {
  .hero h1 { font-size: 2rem; }
  .hero-rate { font-size: 3.5rem; }
  .wrap, .wrap-sm { padding: 0 14px; }
  .formb { padding: 1rem; }
  .rechner { padding: 1.25rem; }
  .zahlen { grid-template-columns: 1fr; }
  .zahl { border-right: none; border-bottom: 1px solid var(--linie); }
  .hero-mini { grid-template-columns: 1fr; }
  .wa-float-txt { display: none; }
  .wa-float { padding: .9rem; border-radius: 50%; }
  .wa-float svg { width: 28px; height: 28px; }
  .shero { padding: 54px 0 36px; }
  .shero h1 { font-size: 1.7rem; }
  .shero-bgnum { font-size: 6rem; }
  .formk { padding: 1rem; }
  .formk h3 { font-size: .92rem; }
  .kon-w { font-size: .92rem; }
  .absch { padding: 40px 0; }
  .grid-form { gap: 1rem; }
  .kopf-in { height: 60px; }
  .mob { top: 60px; }
  .fz input, .fz select, .fz textarea { padding: .7rem .75rem; font-size: .85rem; }
  .zust { font-size: .78rem; }
  .knopf.k-gr { padding: .8rem 1.5rem; font-size: .8rem; }
  .wa-banner { padding: .75rem .85rem; gap: .6rem; }
  .wa-banner-titre { font-size: .82rem; }
  .wa-banner-sous { font-size: .74rem; }
  .box-warn, .box-kupfer, .box-tanne { padding: .75rem .85rem; font-size: .76rem; }
  .blatt-z { padding: .7rem 1rem; }
  .blatt-fuss { padding: .7rem 1rem; font-size: .65rem; }
  .blatt-kopf { padding: .85rem 1rem; }
  .blatt-titel { font-size: .85rem; }
  .cookie-in { padding: 0; gap: 1rem; }
  .cookie { padding: .9rem 1rem; }
}