/* Sichtvoll Webdesign — Stilgrundlage
   Systemschriften, keine Webfonts, keine externen Verbindungen. */

:root{
  --sand:#F1F1EC;
  --sand-2:#E3E3DD;
  --white:#FFFFFF;
  --ink:#1B1C1A;
  --ink-2:#54554F;
  --ink-3:#6F7169; /* 21.08.: von #8A8B83 angehoben — 3,3:1 war fuer 13-px-Text zu wenig, jetzt ~5:1 */
  --line:#DBDBD4;
  --line-soft:#EAEAE4;
  --green:#14503F;
  --green-2:#0E3C2E;
  --green-soft:#E5EEEA;

  /* Der dunkle Kopfbereich — Grundton, Lichtakzent, Schrift darauf */
  --tief:#0C3A2C;
  --lime:#8FBF3F;
  --auf-tief:#EAF0EC;
  /* Heller als vorher (#A9BDB3). Auf dem dunklen Grund war der Kontrast
     grenzwertig — jetzt deutlich über dem Mindestwert. */
  --auf-tief-2:#C6D6CD;
  --tief-linie:rgba(255,255,255,.14);

  --wrap:1120px;
  --r:6px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.7;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.narrow{max-width:760px}

h1,h2,h3,h4{font-weight:700;letter-spacing:-0.028em;line-height:1.08;color:var(--ink)}
h1{font-size:clamp(2.6rem,5.8vw,4.4rem);font-weight:800;letter-spacing:-0.038em}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-0.032em}
h3{font-size:1.25rem;line-height:1.3;letter-spacing:-0.015em}
h4{font-size:1.0625rem;letter-spacing:-0.01em}
p{max-width:38em}
p + p{margin-top:1.1rem}

a{color:var(--green);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}

.label{
  font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:12px;margin-bottom:1.4rem;
}
.label::after{content:"";flex:1;height:1px;background:var(--line);max-width:80px}
.lead{font-size:1.3125rem;line-height:1.6;color:var(--ink-2);max-width:34em}
.small{font-size:.9375rem;color:var(--ink-2)}
.tiny{font-size:.8125rem;color:var(--ink-3)}

.btn{
  display:inline-block;background:var(--green);color:#fff;font-size:1rem;font-weight:500;
  padding:15px 30px;border-radius:var(--r);border:1px solid var(--green);cursor:pointer;
  font-family:inherit;line-height:1.2;transition:background .15s ease;
}
.btn:hover{background:var(--green-2);border-color:var(--green-2);text-decoration:none;color:#fff}
.btn-line{
  display:inline-block;background:transparent;color:var(--ink);font-size:1rem;font-weight:500;
  padding:15px 30px;border-radius:var(--r);border:1px solid var(--line);line-height:1.2;
}
.btn-line:hover{border-color:var(--ink);text-decoration:none}
.arrow{font-weight:500;display:inline-flex;align-items:center;gap:8px}
.arrow::after{content:"→";transition:transform .15s ease;display:inline-block}
.arrow:hover::after{transform:translateX(3px)}

section{padding:104px 0}
.pad-s{padding:72px 0}
.rule{height:1px;background:var(--line);border:none}

/* Sandflaeche mit feinem Korn und weichem Lichtschein.
   Beides steckt inline in dieser Datei — keine Bilddatei, kein externer Aufruf. */
.sand{
  background-color:var(--sand);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='0.13'/%3E%3C/svg%3E"),
    radial-gradient(1100px 420px at 10% 0%,#FBFBF9 0%,rgba(251,251,249,0) 62%),
    radial-gradient(900px 380px at 92% 100%,#E4E7E2 0%,rgba(228,231,226,0) 65%);
  background-repeat:repeat,no-repeat,no-repeat;
}

/* Kopfzeile — liegt auf dem dunklen Kopfbereich und bleibt beim Scrollen dunkel,
   damit sie auch über hellen Abschnitten lesbar ist. */
.site-head{position:sticky;top:0;z-index:50;background:rgba(12,58,44,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--tief-linie)}
.head-in{display:flex;justify-content:space-between;align-items:center;gap:24px;max-width:var(--wrap);margin:0 auto;padding:0 28px;min-height:72px;flex-wrap:wrap}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand img{height:41px;width:auto;display:block}

.nav-toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0 9px;border:1px solid var(--tief-linie);border-radius:var(--r);cursor:pointer;background:transparent}
.nav-burger span{display:block;height:1.5px;background:#EAF0EC;border-radius:2px}
.nav-toggle:focus-visible + .nav-burger{border-color:var(--lime);box-shadow:0 0 0 3px rgba(143,191,63,.25)}

.site-nav{margin-left:auto}
.site-nav > ul{list-style:none;display:flex;align-items:stretch;gap:4px}
.site-nav > ul > li{position:relative;display:flex;align-items:center}
.site-nav > ul > li > a{
  display:flex;align-items:center;gap:6px;color:var(--auf-tief-2);font-size:.9375rem;font-weight:500;
  padding:25px 14px;border-bottom:2px solid transparent;white-space:nowrap;
}
.site-nav > ul > li > a:hover{color:#fff;text-decoration:none}
.site-nav > ul > li > a.on{color:#fff;border-bottom-color:var(--lime)}
.has-sub > a::after{
  content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);opacity:.55;transition:transform .15s ease;
}
.has-sub:hover > a::after,.has-sub:focus-within > a::after{transform:rotate(225deg) translate(-2px,-2px);opacity:1}
.has-sub:hover > a,.has-sub:focus-within > a{color:#fff}

.sub{
  position:absolute;top:100%;left:-6px;min-width:310px;background:var(--white);
  border:1px solid var(--line);border-radius:10px;padding:10px;
  box-shadow:0 12px 32px rgba(27,28,26,.09),0 2px 6px rgba(27,28,26,.05);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.has-sub:hover > .sub,.has-sub:focus-within > .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub ul{list-style:none}
.sub a{display:block;padding:11px 14px;border-radius:var(--r);color:var(--ink)}
.sub a:hover{background:var(--sand);text-decoration:none}
.sub .t{display:block;font-size:.9375rem;font-weight:500;line-height:1.35}
.sub .d{display:block;font-size:.8125rem;color:var(--ink-3);line-height:1.45;margin-top:2px}
.sub-foot{margin-top:6px;padding:12px 14px;border-top:1px solid var(--line-soft)}
.sub-foot a{padding:0;font-size:.875rem;font-weight:500;color:var(--green)}
.sub-foot a:hover{background:transparent;text-decoration:underline}

.head-cta{font-size:.9375rem;font-weight:600;padding:11px 22px;white-space:nowrap;margin-left:18px;
  background:#fff;color:var(--tief);border-color:#fff}
.head-cta:hover{background:var(--lime);border-color:var(--lime);color:var(--tief)}
/* Telefon im Kopf (21.08.): Desktop Nummer mit Hoerer, Handy nur der Hoerer neben dem Menueknopf. */
.head-tel{display:inline-flex;align-items:center;gap:8px;margin-left:auto;color:var(--lime);font-weight:600;font-size:.9375rem;white-space:nowrap;padding:8px 4px}
.head-tel:hover{color:#fff;text-decoration:none}
.head-tel svg{flex:0 0 auto}
.site-nav ~ .head-tel{margin-left:18px}

/* ─────────────────────────────────────────────────────────────
   Der dunkle Kopfbereich. Grundton, zwei Lichtscheine und feines
   Korn — alles aus dieser Datei, keine Bilddatei, kein fremder
   Server. Der Lichtschein wandert ganz langsam; wer im System
   weniger Bewegung eingestellt hat, sieht ihn stillstehen.
   ───────────────────────────────────────────────────────────── */
.tief{
  position:relative;overflow:hidden;color:var(--auf-tief);
  border-bottom:1px solid var(--tief-linie);
  /* Korn und Randabdunklung sitzen jetzt am Element selbst. Dadurch werden
     BEIDE Pseudo-Elemente fuer Licht frei — und erst wenn sich zwei Ebenen
     unterschiedlich schnell und gegenlaeufig bewegen, wandert das Licht
     wirklich, statt nur zu atmen. Die Abdunklung bewegt sich nicht; sie
     gibt der Flaeche Tiefe. */
  background-color:var(--tief);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='0.08'/%3E%3C/svg%3E"),
    radial-gradient(124% 108% at 52% 38%, rgba(0,0,0,0) 46%, rgba(0,0,0,.28) 100%);
  background-repeat:repeat,no-repeat;
}

/* Lichtschein 1 — gross und langsam: oben rechts und unten links.
   ACHTUNG bei den Prozentwerten: die Ebene ist wegen inset:-30% rund
   160 % so gross wie der Abschnitt. Sichtbar ist nur 18,75 % bis 81,25 %.
   Ein Punkt bei 72 % 20 % landet also oben rechts IM Bild — frueher standen
   die Werte ausserhalb, deshalb war vom Licht kaum etwas zu sehen. */
.tief::before{
  content:"";position:absolute;inset:-30%;pointer-events:none;
  background:
    radial-gradient(680px 520px at 72% 20%, rgba(143,191,63,.26), transparent 62%),
    radial-gradient(600px 480px at 22% 80%, rgba(255,255,255,.11), transparent 64%);
  animation:schein 26s ease-in-out infinite;
}

/* Lichtschein 2 — anderer Takt, andere Richtung: links auf halber Hoehe,
   unten in der Mitte und ein kuehler Punkt rechts unten. */
.tief::after{
  content:"";position:absolute;inset:-30%;pointer-events:none;
  background-image:
    radial-gradient(460px 440px at 20% 48%, rgba(143,191,63,.17), transparent 66%),
    radial-gradient(660px 380px at 49% 80%, rgba(143,191,63,.13), transparent 68%),
    radial-gradient(440px 400px at 79% 70%, rgba(255,255,255,.08), transparent 70%);
  animation:schein-2 41s ease-in-out infinite;
}

.tief > *{position:relative;z-index:1}
@keyframes schein{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-6.5%,4.5%,0) scale(1.17)}
}
@keyframes schein-2{
  0%,100%{transform:translate3d(0,0,0) scale(1.04)}
  34%{transform:translate3d(7%,-5%,0) scale(1.16)}
  67%{transform:translate3d(-5.5%,6%,0) scale(1.07)}
}
@media (prefers-reduced-motion:reduce){.tief::before,.tief::after{animation:none}}

.tief h1,.tief h2,.tief h3,.tief h4{color:#fff}
.tief h1 em,.tief h2 em{font-style:normal;color:var(--lime)}
.tief .lead{color:var(--auf-tief-2)}
.tief p{color:var(--auf-tief-2)}
.tief .label{color:var(--lime)}
.tief .label::after{background:var(--tief-linie)}
.tief a{color:#fff}
.tief .btn{background:#fff;color:var(--tief);border-color:#fff}
.tief .btn:hover{background:var(--lime);border-color:var(--lime);color:var(--tief)}
.tief .btn-line{color:#fff;border-color:rgba(255,255,255,.32)}
.tief .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.tief .tiny{color:#8FA298}
.tief .checks li{color:var(--auf-tief-2);border-bottom-color:rgba(255,255,255,.10)}
.tief .checks li::before{background:var(--lime)}
.tief .checks strong{color:#fff}
.tief .arrow{color:var(--lime)}

/* Kennzahlenleiste am Fuß des dunklen Kopfbereichs */
.tief-fakten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  margin-top:64px;border-top:1px solid var(--tief-linie)}
.tief-fakten div{padding:22px 26px 4px 0}
.tief-fakten b{display:block;color:#fff;font-weight:700;font-size:1.0625rem;letter-spacing:-.022em;margin-bottom:3px}
/* Die Beschreibungen waren mit 14px in #8FA298 kaum zu lesen — besonders auf
   einem Foto. Groesser, heller, etwas kraeftiger. */
.tief-fakten span{font-size:.9375rem;color:#C6D6CD;line-height:1.55;display:block;font-weight:500}

/* Kopfbereich der Unterseiten */
.page-head{padding:88px 0 80px}
.page-head h1{font-size:clamp(2.3rem,4.8vw,3.5rem);margin-bottom:1.2rem}

/* Start */
.hero{padding:104px 0 96px}
.hero h1{margin-bottom:1.5rem}
.hero .lead{margin-bottom:2.4rem}
.actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .wrap{max-width:1260px}
.hero .tief-fakten{margin-top:60px}
/* Das Geraetebild (.hero-grid / .hero-bild, 15.08.) ist seit dem 21.08. ausgebaut,
   die Regeln dazu sind entfernt. */
@media (max-width:860px){
  .hero .wrap{max-width:var(--wrap)}
  .hero .tief-fakten{margin-top:44px}
}

/* Der helle Dreier direkt unter dem dunklen Kopfbereich.
   Die Fläche geht über die volle Breite, der Text steht im selben Raster
   wie alle übrigen Abschnitte — sonst klebt er auf dem Handy am Rand. */
.anschluss{display:block;background:var(--sand);border-bottom:1px solid var(--line)}
.anschluss-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
/* Vier Zielgruppen statt drei — schmalere Spalten, deshalb weniger Innenabstand. */
.anschluss-raster.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.anschluss-raster.vier > div{padding:36px 22px 40px}
.anschluss-raster.vier b{font-size:1.0625rem}
.anschluss-raster.vier p{font-size:.9375rem}
.anschluss-raster > div{padding:40px 32px 44px}
.anschluss-raster > div + div{border-left:1px solid var(--line)}
.anschluss-raster > div:first-child{padding-left:0}
.anschluss-raster > div:last-child{padding-right:0}
.anschluss b{display:block;font-size:1.1875rem;font-weight:700;letter-spacing:-.025em;margin-bottom:.6rem}
.anschluss p{font-size:1rem;color:var(--ink-2);max-width:34em}
.anschluss .arrow{display:inline-flex;margin-top:1rem;font-size:.9375rem}
.photo{background:var(--sand-2);border:1px solid var(--line);border-radius:10px;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}
.photo span{color:var(--ink-3);font-size:.875rem}
.photo-wide{aspect-ratio:16/10}

/* Raster */
.grid{display:grid;gap:28px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1fr 1.35fr;gap:64px}

.card{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:32px;display:flex;flex-direction:column}
.card.on-sand{background:var(--white)}
.card h3{margin-bottom:.6rem}
.card p{font-size:1rem;color:var(--ink-2)}

.tile{border-top:1px solid var(--line);padding-top:22px}
.tile .n{font-size:.75rem;font-weight:600;letter-spacing:.12em;color:var(--green);display:block;margin-bottom:.9rem}
.tile h3{margin-bottom:.5rem}
.tile p{font-size:1rem;color:var(--ink-2)}

/* Schrittfolge */
.steps{counter-reset:s;border-top:1px solid var(--line)}
.steps li{list-style:none;counter-increment:s;display:grid;grid-template-columns:64px 1fr;gap:28px;padding:34px 0;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);font-size:.9375rem;font-weight:600;color:var(--green);letter-spacing:.06em;padding-top:4px}
.steps h3{margin-bottom:.5rem}
.steps p{font-size:1.0625rem;color:var(--ink-2)}

/* ─────────────────────────────────────────────────────────────
   Preiskarten. Dunkelgrün auf sandfarbener Fläche — dadurch bekommt
   der Preisblock Gewicht, ohne dass der halbe Abschnitt dunkel wird.
   Das mittlere Paket ist mit Lime abgesetzt.
   ───────────────────────────────────────────────────────────── */
.price{
  position:relative;overflow:hidden;background:var(--tief);color:var(--auf-tief);
  border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:34px 30px;
  display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.price::before{
  content:"";position:absolute;inset:-30%;pointer-events:none;
  background:radial-gradient(420px 320px at 82% 0%, rgba(143,191,63,.16), transparent 64%);
}
.price > *{position:relative;z-index:1}
.price h3{color:#fff;font-size:1.4rem}
.price p{color:var(--auf-tief-2)}
.price.featured{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}
.price.featured::before{background:radial-gradient(460px 340px at 82% 0%, rgba(143,191,63,.26), transparent 64%)}

.tag{display:inline-block;background:rgba(143,191,63,.16);color:var(--lime);font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:20px;align-self:flex-start;margin-bottom:16px}
.price.featured .tag{background:var(--lime);color:var(--tief)}
/* Preisangabe. Der Listenpreis stand vorher klein und blass daneben — man
   konnte weder die Zahl lesen noch den Strich erkennen. Jetzt eigene Zeile,
   deutlich größer, und der Strich in Lime statt in derselben Farbe wie die
   Schrift. */
.amount{font-size:2.75rem;font-weight:800;letter-spacing:-0.04em;margin:.2rem 0 .3rem;line-height:1;color:#fff}
.amount small{font-size:.9375rem;font-weight:500;color:#AFC2B8;letter-spacing:0}
.vorher-zeile{display:flex;align-items:baseline;gap:9px;margin-top:1.2rem;font-size:.8125rem;
  letter-spacing:.1em;text-transform:uppercase;color:#8FA298;font-weight:600}
.amount .vorher,.vorher-zeile .vorher{
  font-size:1.5rem;font-weight:600;color:#DCE7E1;letter-spacing:-.02em;
  text-transform:none;
  text-decoration:line-through;
  text-decoration-color:var(--lime);
  text-decoration-thickness:3px;
  text-underline-offset:0;
}
.price > p.small{margin-bottom:1.6rem;color:var(--auf-tief-2)}
.feat{list-style:none;margin-bottom:2rem}
.feat li{font-size:.9375rem;color:var(--auf-tief-2);padding:10px 0 10px 24px;position:relative;border-bottom:1px solid rgba(255,255,255,.11)}
.feat li:last-child{border-bottom:none}
.feat li::before{content:"";position:absolute;left:0;top:19px;width:10px;height:1px;background:var(--lime)}
.feat strong{color:#fff;font-weight:600}
.price .btn{margin-top:auto;text-align:center;background:var(--lime);color:var(--tief);border-color:var(--lime)}
.price .btn:hover{background:#A3D14E;border-color:#A3D14E;color:var(--tief)}
.price .btn-line{margin-top:auto;text-align:center;color:#fff;border-color:rgba(255,255,255,.30)}
.price .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.07)}

/* Unter dem Mauszeiger hebt sich die Karte leicht an. Nur auf Geräten
   mit echtem Zeiger — auf dem Handy gibt es kein Hover. */
@media (hover:hover) and (pointer:fine){
  .price:hover{transform:translateY(-6px) scale(1.015);
    box-shadow:0 22px 46px rgba(12,58,44,.28);border-color:rgba(143,191,63,.55)}
  .price.featured:hover{box-shadow:0 0 0 1px var(--lime),0 22px 50px rgba(12,58,44,.34)}
  .card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  .card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(27,28,26,.10);border-color:var(--ink-3)}
}
@media (prefers-reduced-motion:reduce){
  .price,.card{transition:border-color .18s ease}
  .price:hover,.price.featured:hover,.card:hover{transform:none;box-shadow:none}
  .price.featured:hover{box-shadow:0 0 0 1px var(--lime)}
}

/* Aufzählung mit Häkchen */
.checks{list-style:none}
.checks li{padding:16px 0 16px 34px;position:relative;border-bottom:1px solid var(--line);font-size:1.0625rem;max-width:46em}
.checks li:last-child{border-bottom:none}
.checks li::before{content:"";position:absolute;left:2px;top:25px;width:9px;height:9px;border-radius:50%;background:var(--green)}
.checks strong{font-weight:600}

/* Aussage */
.pull{border-left:2px solid var(--green);padding:4px 0 4px 28px;max-width:32em}
.pull p{font-size:1.5rem;line-height:1.4;font-weight:500;letter-spacing:-0.018em;color:var(--ink)}

/* Fragen und Antworten */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:24px 0;font-size:1.125rem;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:24px;align-items:baseline;letter-spacing:-0.012em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--green);font-weight:500;font-size:1.375rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details > p{padding:0 0 26px;color:var(--ink-2);max-width:44em}

/* Formular */
form{max-width:34em}
.field{margin-bottom:20px}
label{display:block;font-size:.9375rem;font-weight:500;margin-bottom:7px}
input,textarea,select{width:100%;font-family:inherit;font-size:1rem;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);color:var(--ink);line-height:1.5}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
textarea{min-height:140px;resize:vertical}
.hint{font-size:.875rem;color:var(--ink-3);margin-top:7px}
.hp{position:absolute;left:-9999px}
.pflicht{color:#B33A2B;font-weight:600;margin-left:2px}

/* Hinweis, wenn das Formular unvollständig abgeschickt wurde.
   kontakt.php leitet dazu auf /kontakt/#fehler — die Meldung wird ohne
   JavaScript allein über :target sichtbar. */
.fehler{display:none;background:#FBEDEA;border:1px solid #E7C3BC;border-left:3px solid #B33A2B;
  border-radius:var(--r);padding:18px 22px;margin-bottom:28px;max-width:34em}
.fehler strong{display:block;color:#8E2B20;font-weight:600;margin-bottom:.3rem}
.fehler p{font-size:.9375rem;color:var(--ink-2);margin:0}
#fehler:target{display:block}

/* Kontaktangaben */
.contact-list{list-style:none;border-top:1px solid var(--line)}
.contact-list li{padding:18px 0;border-bottom:1px solid var(--line)}
.contact-list .lbl{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);font-weight:600;margin-bottom:3px}

/* Abschluss-Banner — derselbe dunkle Grundton wie der Kopfbereich,
   damit die Seite oben und unten von derselben Farbe gerahmt wird. */
.cta-band{position:relative;overflow:hidden;background:var(--tief);color:#fff;padding:96px 0}
.cta-band::before{
  content:"";position:absolute;inset:-25%;pointer-events:none;
  background:radial-gradient(720px 480px at 82% 100%, rgba(143,191,63,.20), transparent 62%),
             radial-gradient(560px 420px at 4% 0%, rgba(255,255,255,.08), transparent 64%);
}
.cta-band > *{position:relative;z-index:1}
.cta-band h2{color:#fff;margin-bottom:1rem;font-size:clamp(2rem,4vw,3rem)}
.cta-band p{color:var(--auf-tief-2);font-size:1.1875rem;max-width:34em;margin-bottom:2rem}
.cta-band .btn{background:#fff;color:var(--green-2);border-color:#fff}
.cta-band .btn:hover{background:var(--sand);border-color:var(--sand);color:var(--green-2)}

/* eRecht24-Partnersiegel */
.siegel{display:block;width:100%;max-width:280px;height:auto}
.siegel-block{margin-top:2rem}
.siegel-block .tiny{margin-top:.9rem;max-width:34em}
.foot-siegel{margin-top:1.6rem}
.foot-siegel img{width:100%;max-width:236px;height:auto;border-radius:8px}

/* Fußzeile */
.site-foot{background:var(--ink);color:#A9A69D;padding:72px 0 40px;font-size:.9375rem}
.site-foot a{color:#A9A69D}
.site-foot a:hover{color:#fff}
.foot-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding-bottom:44px;border-bottom:1px solid #34342F}
.foot-top h4{color:#fff;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;font-weight:600}
.foot-top ul{list-style:none}
.foot-top li{padding:5px 0}
.foot-brand{display:block;height:auto;width:100%;max-width:186px;margin-bottom:1.1rem}
.foot-bottom{padding-top:26px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:.8125rem;color:#78766F}

@media(max-width:960px){
  .foot-top{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Vier Spalten werden hier zu schmal — zwei mal zwei. */
  .anschluss-raster.vier{grid-template-columns:repeat(2,minmax(0,1fr))}
  .anschluss-raster.vier > div{padding:32px 26px 34px;border-top:1px solid var(--line)}
  .anschluss-raster.vier > div:nth-child(-n+2){border-top:none}
  .anschluss-raster.vier > div:nth-child(odd){padding-left:0;border-left:none}
  .anschluss-raster.vier > div:nth-child(even){padding-right:0}
}
@media(max-width:1000px){
  .site-nav > ul > li > a{padding:25px 10px;font-size:.875rem}
  .head-cta{margin-left:10px;padding:10px 16px}
}

@media(max-width:860px){
  body{font-size:16px}
  .split,.g2,.g3{grid-template-columns:1fr;gap:36px}
  .hero{padding:56px 0 64px}
  section{padding:64px 0}
  .pad-s{padding:48px 0}
  .page-head{padding:52px 0 46px}
  .photo{aspect-ratio:3/2;max-width:440px}
  .steps li{grid-template-columns:1fr;gap:8px}
  .foot-top{grid-template-columns:1fr;gap:28px}

  .head-in{min-height:0;padding-top:14px;padding-bottom:14px;gap:12px}
  .nav-burger{display:flex;order:2}
  .head-cta{display:none}
  .head-tel,.site-nav ~ .head-tel{order:1;margin-left:auto;margin-right:0;width:42px;height:42px;justify-content:center;padding:0;border:1px solid var(--tief-linie);border-radius:var(--r)}
  .head-tel span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .site-nav{order:3;flex-basis:100%;margin-left:0;display:none;padding-bottom:10px}
  .nav-toggle:checked ~ .site-nav{display:block}
  .site-nav > ul{flex-direction:column;align-items:stretch;gap:0}
  .site-nav > ul > li{display:block;border-top:1px solid var(--tief-linie)}
  .site-nav > ul > li > a{padding:15px 2px;font-size:1rem;color:#EAF0EC;border-bottom:none;justify-content:space-between}
  .site-nav > ul > li > a.on{color:var(--lime)}
  .has-sub > a::after{display:none}
  .sub{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;
    background:transparent;padding:0 0 12px;min-width:0;
  }
  .sub a{padding:9px 2px 9px 16px;border-left:1px solid var(--tief-linie);color:var(--auf-tief-2)}
  .sub a:hover{background:transparent;color:#fff}
  .sub .t{color:inherit}
  .sub .d{display:none}
  .sub-foot{padding:10px 2px 0 16px;border-top:none}
  .sub-foot a{color:var(--lime)}
  .tief-fakten{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:44px}
  .tief-fakten div{padding:18px 18px 4px 0}
  /* Auf dem Handy ohne Trennlinien — untereinander wirken sie unruhig.
     Der Abstand trennt ausreichend. */
  .anschluss-raster,.anschluss-raster.vier{grid-template-columns:1fr}
  .anschluss-raster > div,.anschluss-raster.vier > div{padding:26px 0 28px;border-left:none;border-top:none}
  .anschluss-raster > div + div{border-left:none;border-top:none}
  .anschluss-raster > div:first-child{padding-top:36px}
  .anschluss-raster > div:last-child{padding-bottom:40px}
  .page-head{padding:54px 0 56px}
}

/* ── Rechtstexte ──────────────────────────────────────────────────────
   Das Markup von Impressum und Datenschutzerklaerung kommt unveraendert
   aus den eRecht24-Generatoren. Deshalb steht die Gestaltung vollstaendig
   hier und nicht als Formatierungsangabe im Text. Beim naechsten Update
   wird der Quelltext einfach ersetzt.                                   */
.rechtstext-seite{padding:88px 0 104px}
.rechtstext h1{font-size:clamp(2.3rem,4.8vw,3.5rem);margin-top:1.2rem}
.rechtstext h1 + h2{margin-top:3rem}
.rechtstext > h2{margin-top:3.4rem;padding-top:2.6rem;border-top:1px solid var(--line)}
.rechtstext > h2:first-child{margin-top:0;padding-top:0;border-top:none}
.rechtstext h3{margin-top:2.4rem}
.rechtstext h4{margin-top:1.6rem}
.rechtstext h2 + p,
.rechtstext h3 + p,
.rechtstext h4 + p{margin-top:.8rem}
.rechtstext ul{margin-top:1rem;padding-left:1.25rem;list-style:disc}
.rechtstext li{margin-top:.6rem;max-width:44em}
.rechtstext li::marker{color:var(--green)}
.rechtstext ul + p{margin-top:1.2rem}
.rechtstext .siegel-block{margin-top:3.6rem;padding-top:2.4rem;border-top:1px solid var(--line)}

/* ─────────────────────────────────────────────────────────────
   QR-Seite — /qr/
   Ziel jedes gedruckten Codes. Wer scannt, steht meistens draußen,
   hält das Handy in einer Hand und will eine Entscheidung treffen.
   Deshalb: kein Menü, kein Fußbereich, zwei große Flächen zum
   Antippen, beide gleich wichtig. Erbt den dunklen Grund samt
   Lichtschein und Korn von .tief.
   ───────────────────────────────────────────────────────────── */
.qr-seite{
  min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:48px 24px;border-bottom:0;
}
.qr-in{width:100%;max-width:420px;text-align:center}
.qr-logo{height:38px;width:auto;margin:0 auto 42px;display:block}
.qr-seite h1{font-size:clamp(1.9rem,7vw,2.4rem);letter-spacing:-.03em;margin-bottom:.7rem}
.qr-lead{margin:0 auto 2.4rem;max-width:26em;font-size:1.0625rem}
.qr-wahl{display:grid;gap:14px}

/* Fingergroß: 18px oben und unten ergeben rund 60px Höhe. Darunter
   wird auf dem Handy danebengetippt. */
.qr-btn{
  display:flex;align-items:center;justify-content:center;gap:11px;
  width:100%;padding:18px 24px;font-size:1.0625rem;font-weight:600;
}
.qr-btn svg{flex:none}

/* WhatsApp bekommt die Limette. Zwei gleichwertige Wege, die sich auch
   bei Sonne auf dem Display klar unterscheiden lassen. */
.tief .qr-btn-wa{background:var(--lime);border-color:var(--lime);color:var(--tief)}
.tief .qr-btn-wa:hover{background:#9ECF4A;border-color:#9ECF4A;color:var(--tief)}

.qr-hinweis{margin:1.6rem auto 0;max-width:30em;font-size:.8125rem;line-height:1.55;color:#8FA298}
.qr-fuss{margin:2.6rem auto 0;font-size:.8125rem;color:#8FA298}
.tief .qr-fuss a{color:#8FA298;text-decoration:underline;text-decoration-color:rgba(255,255,255,.28)}
.tief .qr-fuss a:hover{color:#fff}

@media (max-width:420px){
  .qr-seite{padding:36px 20px}
  .qr-logo{margin-bottom:34px}
  /* Auf 320px-Geräten brach "Auf WhatsApp schreiben" sonst auf zwei Zeilen
     und das Symbol stand allein daneben. Etwas kleiner, dann passt es. */
  .qr-btn{padding:17px 16px;font-size:1rem;gap:9px}
}


/* ────────────────────────────────────────────────────────────
   BILDER — 21.08.2026
   Bühnenbild im Kopfbereich, Bildkacheln im Zielgruppen-Streifen,
   Fotos neben dem Text auf den Unterseiten.

   Grundsatz aus der Bildregel: Fotos werden skaliert, nicht beschnitten.
   Wo doch ein Ausschnitt nötig ist — auf dem Handy in den Kacheln —,
   wird der Bildpunkt bewusst gesetzt (--fokus im HTML) und nicht dem
   Zufall überlassen.
   ──────────────────────────────────────────────────────────── */

/* ── Bühnenbild (Startseite) ── */
.buehne{position:relative}
/* Die wandernden Lichtscheine von .tief kämpfen mit einem Foto — auf der
   Bühne bleiben sie aus. In allen anderen dunklen Abschnitten laufen sie
   weiter. */
.buehne::before,.buehne::after{display:none}

.buehne > .buehne-bild{position:absolute;inset:0;z-index:0;overflow:hidden}
.buehne-bild picture{display:block;width:100%;height:100%}
.buehne-bild img{width:100%;height:100%;object-fit:cover;object-position:64% 46%;display:block}

/* Der Schleier über dem Foto. Links kräftig, damit die Schrift auf jedem
   Bildpunkt lesbar bleibt; nach rechts hin klar, dort steht der Bildschirm,
   der zu sehen sein soll. Oben und unten je ein Zusatz, damit Kopfzeile und
   Kennzahlenleiste nicht im Hellen liegen. */
.buehne-bild::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,38,29,.58) 0%,rgba(8,38,29,0) 24%),
    linear-gradient(0deg,rgba(8,38,29,.55) 0%,rgba(8,38,29,.30) 14%,rgba(8,38,29,0) 32%),
    linear-gradient(90deg,rgba(8,38,29,.96) 0%,rgba(8,38,29,.93) 24%,rgba(8,38,29,.80) 36%,rgba(8,38,29,.34) 48%,rgba(8,38,29,.12) 66%,rgba(8,38,29,.08) 100%);
}
.buehne > .wrap{position:relative;z-index:1}

/* Auf der Buehne steht der Text nicht in der Mitte, sondern nah am linken
   Rand — sonst klafft auf breiten Bildschirmen eine Luecke zwischen
   Fensterrand und Schrift. Der Abstand waechst mit dem Bildschirm mit, hoert
   aber bei 92px auf; auf dem Handy bleiben es dieselben 28px wie ueberall. */
.hero.buehne{padding:128px 0 0}
.hero.buehne > .wrap,.fakten-band > .wrap{max-width:none;
  padding-left:clamp(28px,2.4vw,48px);padding-right:clamp(28px,2.4vw,48px)}
.buehne-text{max-width:40rem}
/* Etwas kleiner als vorher — sonst reicht die laengste Zeile bis in den
   Bildschirm im Foto hinein, und dann ist beides schlecht zu sehen. */
.hero.buehne h1{font-size:clamp(2.3rem,3.9vw,3.35rem);margin-bottom:1.4rem}
/* Heller als der uebliche Fliesstext auf dunklem Grund — auf einem Foto
   reicht #C6D6CD nicht aus. */
.hero.buehne .lead{font-size:1.1875rem;max-width:27em;margin-bottom:2.2rem;color:#EDF3EF}

/* Handy: das Hochformat füllt den Bildschirm. Oben bleibt Platz frei, damit
   man den Bildschirm im Foto sieht; der Text steht auf dem dunkleren unteren
   Teil. Umschaltpunkt 700px — derselbe wie beim <source> im HTML. */
@media (max-width:700px){
  /* Das Hochformat wird NICHT beschnitten: volle Breite, natuerliche Hoehe,
     oben angesetzt. Darunter laeuft der dunkle Grund des Abschnitts weiter.
     Genau das verlangt die Bildregel — ein cover-Ausschnitt haette hier bis
     zu 37 % der Breite weggeschnitten und den Bildschirm mittendurch. */
  .buehne-bild picture{height:auto}
  .buehne-bild img{width:100%;height:auto;object-fit:fill}

  /* Der Text beginnt unterhalb der Tischkante. Das Handy-Bild ist oben und
     unten zugeschnitten und jetzt 1.161 x so hoch wie breit (943 x 1095) —
     vorher 1.769. Deshalb faengt der Text bei 0.85 statt bei 1.12
     Bildschirmbreiten an, und alles rutscht rund 105 Bildpunkte nach oben. */
  .hero.buehne{padding:calc(100vw * .85) 0 0}

  /* Der Verlauf rechnet in Bildschirmbreiten statt in Prozent. Dadurch sitzt
     er unabhaengig davon, wie lang der Text unten wird, immer an derselben
     Stelle im Bild — und er ist deckend, bevor das Bild endet. Deshalb ist
     der Uebergang zum Grund darunter nicht zu sehen. */
  .buehne-bild::after{
    background:linear-gradient(180deg,
      rgba(12,58,44,.40) 0,
      rgba(12,58,44,.06) calc(100vw * .175),
      rgba(12,58,44,.10) calc(100vw * .545),
      rgba(12,58,44,.30) calc(100vw * .70),
      rgba(12,58,44,.90) calc(100vw * .83),
      rgba(12,58,44,1)   calc(100vw * 1.05),
      rgba(12,58,44,1)   100%);
  }
  .hero.buehne h1{font-size:clamp(1.6rem,7.4vw,2.6rem)}
  .hero.buehne .lead{font-size:1.0625rem;margin-bottom:1.8rem}
}

/* ── Kennzahlenband am unteren Rand der Buehne ──
   Frueher standen die fuenf Angaben mitten im Bild und lagen mal auf einer
   hellen, mal auf einer dunklen Stelle — der Punkt ueber dem Buerostuhl war
   praktisch nicht zu lesen. Jetzt sitzen sie in einem eigenen Band ganz
   unten, das die ganze Breite abdeckt und leicht hinterlegt ist. Damit ist
   der Grund unter der Schrift ueberall gleich, egal was das Foto dort zeigt. */
.fakten-band{
  position:relative;z-index:1;margin-top:100px;
  background:rgba(8,38,29,.60);
  border-top:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.tief-fakten.fuenf{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 30px;
  margin-top:0;border-top:none}
.tief-fakten.fuenf div{padding:22px 0 24px}
.fakten-band b{color:#fff;font-size:1.0625rem;margin-bottom:4px}
.fakten-band span{color:#E4EDE8;font-weight:500}

@media (max-width:1100px){
  .tief-fakten.fuenf{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 26px}
  .tief-fakten.fuenf div{padding:16px 0 18px}
}
@media (max-width:700px){
  .fakten-band{margin-top:44px}
  .tief-fakten.fuenf{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
}
@media (max-width:460px){
  .tief-fakten.fuenf{grid-template-columns:1fr}
  .tief-fakten.fuenf div + div{border-top:1px solid rgba(255,255,255,.10)}
}

/* ── Bildkacheln im Zielgruppen-Streifen (Startseite) ──
   Mit Bildern ergeben die senkrechten Trennlinien keinen Sinn mehr —
   stattdessen Abstand zwischen den Spalten. */
.anschluss-raster.mit-bild{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.anschluss-raster.mit-bild > div,
.anschluss-raster.mit-bild > div + div{padding:44px 0 52px;border-left:none}
/* Die Texte sind unterschiedlich lang. Ohne das hier stehen die vier Pfeile
   auf vier verschiedenen Hoehen und die Reihe wirkt unruhig. */
.anschluss-raster.mit-bild > div{display:flex;flex-direction:column;align-items:flex-start}
.anschluss-raster.mit-bild .arrow{margin-top:auto;padding-top:1.1rem}
.kachel-bild{display:block;width:100%;height:auto;border-radius:10px;
  margin-bottom:20px;background:var(--sand-2)}

/* ── Foto neben dem Text (Für-wen-Seiten, Über uns, Leistungen) ── */
.hero-zwei{display:grid;grid-template-columns:1.25fr .8fr;gap:56px;align-items:center}
.hero-zwei.quer{grid-template-columns:1fr 1fr}
.hero-zwei h1{font-size:clamp(2.2rem,3.6vw,3.05rem)}
.hero-zwei .lead{max-width:32em}
.hero-foto img{display:block;width:100%;height:auto;border-radius:12px}

/* Zweispaltiges Formularraster — nur auf breiten Bildschirmen. Bewusst in
   einer min-width-Abfrage, damit auf dem Handy die normale Regel „eine
   Spalte" gilt und nichts ueberschrieben werden muss. */
@media (min-width:861px){
  .split.formular{grid-template-columns:1.15fr 1fr}
}

/* ── Einzelnes Bild im Textfluss ── */
.bild-block{display:block;width:100%;height:auto;border-radius:12px}
.bild-figur{margin:0}
.bild-figur img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
.bild-figur figcaption{margin-top:12px;font-size:.8125rem;color:var(--ink-3);max-width:44em}

@media (max-width:860px){
  .hero-zwei,.hero-zwei.quer{grid-template-columns:1fr;gap:34px}
  /* Ohne das bricht "Menschen buchen Sie," auf dem Handy mitten im Satz um. */
  .hero-zwei h1{font-size:clamp(2rem,7.4vw,2.7rem)}
  .anschluss-raster.mit-bild{grid-template-columns:1fr;gap:0}
  .anschluss-raster.mit-bild > div,
  .anschluss-raster.mit-bild > div + div{padding:30px 0 34px}
  .anschluss-raster.mit-bild > div:first-child{padding-top:36px}
  .anschluss-raster.mit-bild > div:last-child{padding-bottom:44px}
  /* Auf dem Handy wird die Kachel flacher. Welcher Ausschnitt bleibt, steht
     je Bild als --fokus im HTML — sonst nimmt der Browser die Mitte und
     schneidet bei einem Hochformat genau das Motiv weg. */
  .kachel-bild{aspect-ratio:4/3;object-fit:cover;object-position:var(--fokus,50% 50%);margin-bottom:16px}

  /* Nicht Teil der Bildarbeit, aber beim Pruefen aufgefallen: der Viererblock
     auf /leistungen/ blieb auf dem Handy vierspaltig und lief seitlich aus dem
     Bildschirm heraus. Bisher wurden nur .g2 und .g3 umgestellt. */
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .g4{grid-template-columns:1fr}
}

/* Referenzen: Bildschirmfoto als Karte, Stand 2026-08-21 */
.referenz-bild{display:block;margin-bottom:26px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--sand-2)}
.referenz-bild img{display:block;width:100%;height:auto}

/* Kopfzeile: der Weichzeichner ist auf schwachen Handys der haeufigste Ruckelgrund
   beim Scrollen. Unter 860px deckend statt unscharf. Stand 2026-08-21 */
@media (max-width:860px){
  .site-head{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(12,58,44,.98)}
}

/* Ueber uns: "Wer dahintersteht" — Foto links, Text rechts. Stand 2026-08-21 */
.split.person{grid-template-columns:.8fr 1.2fr;align-items:center}
.person-foto{margin:0;max-width:420px}
.person-foto img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
@media (max-width:860px){
  .split.person{grid-template-columns:1fr}
  .person-foto{max-width:360px}
}

/* Sehr schmale Handys: Logo etwas kleiner, damit Hoerer und Menue neben ihm Platz haben. */
@media (max-width:400px){
  .brand img{height:34px}
}

/* Startseite gestrafft (21.08.): "Warum" mit Bild daneben, Rechenbeispiel unter den Preisen. */
.warum-kacheln .tile{padding:20px}
.warum-kacheln .tile p{font-size:.9375rem}
.vergleich{margin-top:2.6rem;padding-top:2.2rem;border-top:1px solid var(--line)}
.vergleich h3{font-size:1.35rem;margin-top:.4rem}
.vergleich h4{font-size:1.0625rem;margin-bottom:.5rem}
@media (max-width:1000px){
  .warum-kacheln{grid-template-columns:1fr}
}

/* Handy-Menue (21.08. abends): Das aufgeklappte Menue war hoeher als der Bildschirm, die klebende
   Kopfzeile konnte nicht scrollen, und unter dem Menue scrollte die Seite weiter. Jetzt: bei
   offenem Menue bekommt die Kopfzeile die volle Hoehe und scrollt selbst, die Seite dahinter
   steht still. Dazu kompakter: Unterpunkte enger, Menue beginnt direkt unter der Leiste. */
@media (max-width:860px){
  .site-head:has(.nav-toggle:checked){max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  body:has(.nav-toggle:checked){overflow:hidden}
  .nav-toggle:checked ~ .site-nav{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .site-nav > ul > li > a{padding:13px 2px}
  .sub{padding:0 0 8px}
  .sub a{padding:7px 2px 7px 16px;font-size:.9375rem}
  .sub-foot{padding-top:6px}
}

/* ══════════════════════════════════════════════════════════════════
   Stand 22.08.2026 — Startseite mobil gestrafft, Handy-Menue kompakt
   ══════════════════════════════════════════════════════════════════ */

/* ── Zielgruppen-Kacheln sind jetzt Links (ganze Kachel antippbar) ── */
.anschluss-raster.mit-bild > a.kachel{display:flex;flex-direction:column;align-items:flex-start;padding:44px 0 52px;color:var(--ink);text-decoration:none}
.anschluss-raster.mit-bild > a.kachel:hover{text-decoration:none}
.anschluss-raster.mit-bild > a.kachel:hover b{color:var(--green)}
.kachel-text{display:flex;flex-direction:column;flex:1 1 auto}
.kachel-text b{display:block;font-size:1.0625rem;font-weight:700;letter-spacing:-.025em;margin-bottom:.6rem}
.kachel-text p{font-size:.9375rem;color:var(--ink-2);max-width:34em}
.kachel-text .arrow{margin-top:auto;padding-top:1.1rem;font-size:.9375rem;color:var(--green)}
@media (max-width:860px){
  /* Auf dem Handy: flache Zeile, Bild links klein, Text rechts. */
  .anschluss-raster.mit-bild > a.kachel{flex-direction:row;align-items:center;gap:18px;padding:16px 0}
  .anschluss-raster.mit-bild > a.kachel + a.kachel{border-top:1px solid var(--line)}
  .anschluss-raster.mit-bild > a.kachel:first-child{padding-top:22px}
  .anschluss-raster.mit-bild > a.kachel:last-child{padding-bottom:26px}
  .anschluss-raster.mit-bild .kachel-bild{flex:0 0 96px;width:96px;height:96px;aspect-ratio:1/1;margin:0;border-radius:10px}
  .kachel-text b{margin-bottom:.2rem;font-size:1rem}
  .kachel-text p{font-size:.875rem;line-height:1.5}
  .kachel-text .arrow{display:none}
}

/* ── Website-Check als Streifen ── */
.check-streifen-in{display:grid;grid-template-columns:1.6fr auto;gap:40px;align-items:center}
.check-streifen h2{font-size:clamp(1.6rem,2.8vw,2.2rem)}
.check-streifen .lead{font-size:1.0625rem;max-width:38em}
@media (max-width:860px){
  .check-streifen-in{grid-template-columns:1fr;gap:22px}
}

/* ── Preiskarten auf dem Handy kompakter ── */
@media (max-width:860px){
  .preise-kurz .price{padding:26px 22px 24px}
  .preise-kurz .amount{font-size:2.25rem}
  .preise-kurz .feat{margin-bottom:1.4rem}
  .preise-kurz .feat li{padding:7px 0 7px 22px}
  .preise-kurz .vorher-zeile{margin-top:.8rem}
  .preise-kurz .price > p.small{margin-bottom:1rem}
  .grid.preise-kurz{gap:18px}
}

/* ── Handy-Menue: Unterpunkte zugeklappt, Kontakt als letzte Zeile ── */
.sub-toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.sub-pfeil{display:none}
.site-nav > ul > li.nav-kontakt{display:none}
/* Zeilenumbruch in Ueberschriften nur auf breiten Bildschirmen */
.nur-desktop{display:inline}
@media (max-width:860px){
  .nur-desktop{display:none}
  .site-nav > ul > li.has-sub{display:grid;grid-template-columns:1fr 48px;align-items:center}
  .site-nav > ul > li.has-sub > a{grid-column:1}
  .sub-pfeil{display:flex;align-items:center;justify-content:center;grid-column:2;width:48px;height:48px;cursor:pointer;
    color:#EAF0EC;border-left:1px solid var(--tief-linie)}
  .sub-pfeil::before{content:"";width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s ease}
  .sub-toggle:checked ~ .sub-pfeil::before{transform:rotate(225deg) translate(-1px,-1px)}
  .sub-toggle:focus-visible ~ .sub-pfeil{color:var(--lime)}
  .site-nav > ul > li.has-sub > .sub{grid-column:1 / -1;display:none}
  .site-nav > ul > li.has-sub > .sub-toggle:checked ~ .sub{display:block}
  .has-sub:hover > .sub,.has-sub:focus-within > .sub{opacity:1;visibility:visible}
  .sub-foot{display:none}
  .site-nav > ul > li.nav-kontakt{display:block}
  .nav-kontakt > a{color:var(--lime);font-weight:600}
}

/* ─────────────────────────────────────────────────────────────
   Stand 24.08.2026 — Chat „Website breit"

   1) Zielgruppen-Hero kompakter (.hero.kompakt auf /handwerk/,
      /kfz-werkstatt/, /coaching/, /selbststaendige/): weniger dunkle
      Flaeche oben und unten, das Hochformat-Bild wird auf dem Desktop
      gedeckelt und auf dem Handy beschnitten, damit die Startansicht
      nicht mehrere Bildschirmhoehen dunkel ist.
   2) Beispielprojekte: hoehere Bildschirmfotos (1440x1600) in zwei
      Spalten — .referenz-bild zeigt sie vollstaendig, kein Beschnitt. */
.hero.kompakt{padding:72px 0 60px}
.hero.kompakt .hero-zwei{align-items:center}
.hero.kompakt .hero-foto img{max-height:520px;width:100%;object-fit:cover;object-position:center}
@media (max-width:860px){
  .hero.kompakt{padding:56px 0 48px}
  .hero.kompakt .hero-foto img{max-height:380px}
}
/* 3) Kopfzeile: sieben Punkte plus Telefon und Kontakt-Knopf brauchen
   engere Abstaende, sonst bricht die Zeile in eine zweite um. */
@media (min-width:1001px){
  .head-in{gap:16px}
  .site-nav > ul{gap:2px}
  .site-nav > ul > li > a{padding:25px 10px}
  .head-cta{margin-left:10px;padding:11px 18px}
  .site-nav ~ .head-tel{margin-left:10px}
}
@media (min-width:861px) and (max-width:1000px){
  .head-in{gap:12px}
  .site-nav > ul{gap:0}
  .site-nav > ul > li > a{padding:25px 5px;font-size:.8125rem}
  .head-tel span{display:none}
  .site-nav ~ .head-tel{margin-left:4px}
  .head-cta{margin-left:6px;padding:10px 14px;font-size:.875rem}
}