/* Layout: linksbündig, Hero als Text-Slideshow über Foto, Abschnitte als ruhige Bänder.
   Schrift liegt im Ordner fonts/ (selbst gehostet, keine Verbindung zu Google, DSGVO-freundlich). */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
:root {
  /* Öko-Palette: kräftiges Dunkelgrün als Hauptfarbe, Knallgrün als Akzent für Knöpfe, Neutraltöne leicht grünstichig */
  --paper:   #F1F6F1;
  --surface: #FFFFFF;
  --ink:     #0D1F14;
  --muted:   #4F6455;
  --line:    #CFE0D3;
  --green:   #007A38;
  --green-soft: #DCF2E2;
  --signal:  #22D35E;
  --on-green: #FFFFFF;
  --mark:    #FFF1C2;
  --focus:   #007A38;

  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-label: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --radius: 0;
  --wrap: 1120px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #06140B; --surface: #0B1E12; --ink: #E2F2E6; --muted: #92AE9A; --line: #1B3A25;
    --green: #3DDC72; --green-soft: #0F3019; --signal: #3DDC72; --on-green: #04140A; --mark: #4A3B0E; --focus: #3DDC72;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #06140B; --surface: #0B1E12; --ink: #E2F2E6; --muted: #92AE9A; --line: #1B3A25;
  --green: #3DDC72; --green-soft: #0F3019; --signal: #3DDC72; --on-green: #04140A; --mark: #4A3B0E; --focus: #3DDC72;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--green); }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Platzhalter: alles in [eckigen Klammern] mit eigenen Daten ersetzen. Wenn fertig, diese Regel löschen. */
.ph { background: var(--mark); color: #03200E; border-radius: 0; padding: 0 .2em; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.8rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -0.03em; }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
p { margin: 0; }

.label {
  font: 600 0.75rem/1 var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}

.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .8em 1.3em;
  border-radius: 0;
  font: 600 1rem/1 var(--font-body);
  text-decoration: none;
  border: 2px solid var(--green);
}
.btn-primary { background: var(--green); color: var(--on-green); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost { color: var(--green); background: transparent; }
.btn-ghost:hover { background: var(--green-soft); }

/* Sprung-Link: erscheint nur bei Tastatur-Fokus */
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--green); color: var(--on-green); padding: 12px 16px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
a, button { touch-action: manipulation; }

/* Kopfzeile in zwei Stufen (wie bei großen Anbietern):
   oben dunkelgrüner Balken mit Logo, Telefon und "Über uns", darunter weißes Menü */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; }
.topbar { background: #03200E; color: #FFFFFF; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.topbar-meta { display: flex; align-items: center; gap: 28px; }
.topbar-meta a { color: #FFFFFF; text-decoration: none; font-weight: 500; }
.topbar-meta a:hover { color: #C6FAD4; }
.topbar-meta a:focus-visible, .menu-toggle:focus-visible { outline: 3px solid #4BEA7E; outline-offset: 3px; }
.topbar-phone { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.topbar-phone svg { width: 18px; height: 18px; fill: currentColor; }
.topbar-link[aria-current="page"] { color: #C6FAD4; box-shadow: inset 0 -2px 0 #4BEA7E; }

/* Logo: KEKO mit Kabel-O, Rechner und Stecker (auf dunklem Balken hell) */
.brand { display: flex; align-items: center; text-decoration: none; color: #FFFFFF; }
.brand-logo { display: block; height: 36px; width: auto; overflow: visible; }
.brand-logo .lg-cable { stroke: #4BEA7E; }
.brand-logo .lg-plug { fill: var(--signal); }
.brand-logo .lg-prong { stroke: var(--signal); }
.brand-logo .lg-screen { fill: var(--signal); stroke: #4BEA7E; }
@media (max-width: 380px) { .brand-logo { height: 30px; } }

.mainbar { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 8px 18px -16px rgba(3, 32, 14, .45); }
.nav-links { display: flex; align-items: stretch; gap: 4px; }
.nav-links a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; color: var(--ink); text-decoration: none; font-weight: 600; }
.nav-links a:first-child { margin-left: -16px; }
.nav-links a:hover { background: var(--green-soft); }
.nav-links a[aria-current="page"] { background: var(--green-soft); color: var(--green); box-shadow: inset 0 -2px 0 var(--green); }
.nav-links a:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
/* Menü-Knopf "Kostenloser Entwurf": rechts im Menü, grün hervorgehoben */
.nav-links a.nav-cta { margin-left: auto; align-self: center; min-height: 40px; background: var(--green); color: var(--on-green); }
.nav-links a.nav-cta:hover { background: #00672F; }
.nav-links a.nav-cta[aria-current="page"] { background: #03200E; color: #FFFFFF; box-shadow: none; }
.nav { width: 100%; }
.nav-mobile-only { display: none !important; }
.menu-toggle { display: none; }

/* Handy: oben Logo, Telefon-Symbol und Menü-Knopf; das Menü klappt darunter auf */
@media (max-width: 760px) {
  .topbar .wrap { padding-block: 10px; }
  .topbar-meta { gap: 8px; }
  .topbar-link { display: none; }
  .topbar-phone { width: 44px; height: 44px; justify-content: center; border: 1px solid rgba(255, 255, 255, .3); }
  .topbar-phone span { display: none; }
  .menu-toggle {
    display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer;
    background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: #FFFFFF;
  }
  .menu-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  .mainbar { border: 0; box-shadow: none; }
  .mainbar .wrap { padding: 0; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .35);
    padding: 4px max(20px, env(safe-area-inset-right, 0px)) 12px max(20px, env(safe-area-inset-left, 0px));
  }
  .nav-links.is-open { display: flex; }
  .nav-links a, .nav-links a:first-child { margin: 0; padding: 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links a:hover { background: none; color: var(--green); }
  .nav-links a[aria-current="page"] { background: none; box-shadow: none; font-weight: 800; }
  .nav-mobile-only { display: flex !important; }
  .nav-links a.nav-cta { margin: 12px 0 0; justify-content: center; align-self: stretch; min-height: 48px; border-bottom: 0; }
  .nav-links a.nav-cta:hover { color: var(--on-green); }
}

/* Kopfbereich hell: weißer Grund mit grünem Lichtschein und feinem Punktmuster */
.hero {
  --hero-ink: var(--ink);
  --hero-muted: var(--muted);
  --hero-accent: var(--green);
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--surface);
  color: var(--hero-ink);
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: radial-gradient(color-mix(in srgb, var(--green) 22%, transparent) 1.2px, transparent 1.7px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 80%); mask-image: linear-gradient(100deg, transparent 35%, #000 80%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 80% 45%, color-mix(in srgb, var(--signal) 24%, transparent), transparent 40%),
    radial-gradient(circle at 5% 100%, color-mix(in srgb, var(--green) 10%, transparent), transparent 40%);
}
/* Startseite: Kabel-Verbindungen im Hintergrund, unten weicher Übergang ohne Linie in den nächsten Bereich */
.hero-net {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, .25) 25%, #000 62%); mask-image: linear-gradient(100deg, rgba(0, 0, 0, .25) 25%, #000 62%);
}
.net-lines path, .net-pulse { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.net-lines path { stroke: color-mix(in srgb, var(--green) 26%, transparent); stroke-width: 4; }
.net-nodes circle { fill: var(--surface); stroke: color-mix(in srgb, var(--green) 45%, transparent); stroke-width: 3; }
.net-plug rect { fill: color-mix(in srgb, var(--signal) 55%, transparent); }
.net-plug path { fill: none; stroke: color-mix(in srgb, var(--signal) 55%, transparent); stroke-width: 3; stroke-linecap: round; }
.net-pulse { stroke: var(--signal); stroke-width: 4; stroke-dasharray: .07 2; stroke-dashoffset: .07; opacity: .9; animation: net-pulse 6s linear infinite; }
.net-pulse:nth-child(2) { animation-duration: 7.5s; animation-delay: 1.8s; }
.net-pulse:nth-child(3) { animation-duration: 6.8s; animation-delay: 3.2s; }
.net-pulse:nth-child(4) { animation-duration: 8s; animation-delay: 4.6s; }
@keyframes net-pulse { 0% { stroke-dashoffset: .07; } 55%, 100% { stroke-dashoffset: -1; } }
.hero-fade { position: absolute; inset: auto 0 0; height: 140px; background: linear-gradient(to bottom, color-mix(in srgb, var(--surface) 0%, transparent), var(--surface)); pointer-events: none; }
.hero[data-slideshow] { border-bottom: 0; }
.hero[data-slideshow] + .band-alt { border-top: 0; }
@media (max-width: 860px) { .hero-net { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .net-pulse { animation: none; opacity: 0; } }

.hero .label { color: var(--hero-accent); }
.hero .hero-text .lead { color: var(--hero-muted); }
.hero .hero-title em { color: var(--hero-accent); }
/* Hero als Slideshow: alle Folien liegen im selben Grid-Feld übereinander, nur die aktive ist sichtbar */
.hero .wrap { padding-block: 104px 56px; }
.slides { display: grid; }
.slide {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: minmax(0, 720px); align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
.slide .hero-text { transform: translateY(10px); transition: transform .6s ease; }
.slide.is-active .hero-text { transform: none; }
.hero-text { display: grid; gap: 22px; min-width: 0; align-content: center; }
.hero-text .lead { font-size: 1.25rem; color: var(--muted); max-width: 46ch; }
.hero-title { font-size: clamp(2.3rem, 5.4vw, 3.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; }
.hero-title em { font-style: normal; color: var(--green); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 860px) {
  .hero .wrap { padding-block: 56px 36px; }
  .slide { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .slide, .slide.is-active, .slide .hero-text { transition: none; transform: none; }
}

/* Folien-Steuerung: Pfeil links, Reiter mit Fortschrittsbalken (5 Sekunden), Pfeil rechts */
.slide-controls { display: flex; align-items: center; gap: 16px; margin-top: 44px; }
.slide-tabs { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.slide-tab {
  min-height: 44px; align-content: end;
  display: grid; gap: 8px; padding: 0 0 4px; text-align: left; cursor: pointer;
  background: none; border: 0; color: var(--hero-muted); font: 600 .84rem/1.2 var(--font-label); letter-spacing: -.005em;
}
.slide-tab:hover, .slide-tab.is-active { color: var(--hero-ink); }
.slide-tab:focus-visible, .slide-arrow:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 0; }
.slide-tab i { display: block; height: 3px; border-radius: 0; background: var(--line); overflow: hidden; }
.slide-tab i::after { content: ""; display: block; height: 100%; width: 0; background: var(--green); }
.slide-tab.is-active i::after { animation: slide-progress 5s linear forwards; }
.hero:hover .slide-tab.is-active i::after,
.hero:has(:focus-visible) .slide-tab.is-active i::after { animation-play-state: paused; }
@keyframes slide-progress { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .slide-tab.is-active i::after { animation: none; width: 100%; } }
.slide-arrow {
  flex: none; width: 44px; height: 44px; border-radius: 0; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--hero-ink); display: grid; place-items: center;
}
.slide-arrow:hover { background: var(--green-soft); border-color: var(--green); }
.slide-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: square; }
@media (max-width: 480px) { .slide-tab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .slide-tabs { gap: 8px; } .slide-tab { align-content: center; } }

/* Abschnitte */
section { scroll-margin-top: 124px; }
@media (max-width: 760px) { section { scroll-margin-top: 76px; } }
.band { padding-block: 84px; }
.band-alt { background: var(--surface); border-block: 1px solid var(--line); }
.section-head { display: grid; gap: 12px; max-width: 640px; margin-bottom: 44px; }
.section-head p { color: var(--muted); font-size: 1.08rem; }
@media (max-width: 600px) { .band { padding-block: 60px; } }

/* Leistungen */
/* Farbige Icon-Kacheln: weißes Symbol auf Farbverlauf */
.ico { flex: none; width: 56px; height: 56px; display: grid; place-items: center; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 10px 22px -12px var(--c2); }
.ico svg { width: 32px; height: 32px; fill: #FFFFFF; }
.ico--sm { width: 40px; height: 40px; box-shadow: 0 8px 16px -10px var(--c2); }
.ico--sm svg { width: 24px; height: 24px; }
.ico--green  { --c1: #34D670; --c2: #00873E; }
.ico--blue   { --c1: #4F9BFF; --c2: #1D5FD6; }
.ico--teal   { --c1: #2DD4BF; --c2: #0E7C70; }
.ico--violet { --c1: #A78BFA; --c2: #6D3BD8; }
.ico--amber  { --c1: #FFC94A; --c2: #E07A00; }

/* Leistungen als Karten */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.service {
  display: grid; gap: 12px; align-content: start; padding: 30px 28px;
  background: var(--paper); border: 1px solid var(--line);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.service .ico { margin-bottom: 6px; }
.service p { color: var(--muted); }
.service:hover { border-color: var(--green); transform: translateY(-3px); box-shadow: 0 20px 40px -26px rgba(3, 32, 14, .5); }
@media (max-width: 760px) { .services { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .service { transition: none; } .service:hover { transform: none; } }

/* Pakete */
/* Zwei Pakete: einmalige Webseite (hervorgehoben) und monatliche Pflege */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; max-width: 860px; }
.plan { background: var(--paper); border: 1px solid var(--line); border-radius: 0; padding: 28px 26px; display: grid; gap: 16px; }
.plan.featured { background: var(--surface); border: 2px solid var(--green); }
.price { font: 750 2.3rem/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price small { font: 500 .95rem/1 var(--font-body); color: var(--muted); letter-spacing: 0; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.plan li { padding-left: 1.5em; position: relative; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.plan .btn { justify-content: center; }
.plan-head { display: flex; align-items: center; gap: 14px; }
.plan-note { font-size: .88rem; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--line); }
.price small:first-child { margin-right: .1em; }
.plans-note { margin-top: 24px; font-size: .9rem; color: var(--muted); }
@media (max-width: 700px) { .plans { grid-template-columns: 1fr; max-width: 520px; } }

/* Über uns */
.about { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: center; }
/* Solange es kein Foto gibt: Text über die volle Breite */
.about:not(:has(.portrait)) { grid-template-columns: minmax(0, 1fr); }
/* Porträt im Hochformat, Ausschnitt mit Blick auf Gesicht und verschränkte Arme */
.portrait {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%;
  background: var(--paper); border-bottom: 4px solid var(--green);
}
.about-text { display: grid; gap: 16px; max-width: 62ch; min-width: 0; }
.about-name { font: 700 1.3rem/1.3 var(--font-display); display: grid; gap: 4px; }
.about-name span { font: 500 .8rem/1.3 var(--font-label); letter-spacing: .04em; color: var(--muted); }
/* Kennzahlen nebeneinander mit Trennlinien */
.creds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 4px 0; border-block: 1px solid var(--line); }
.creds div { padding: 18px 16px 18px 0; display: grid; gap: 6px; align-content: start; }
.creds .ico { margin-bottom: 6px; }
.creds div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.creds dt { font: 700 1.25rem/1.1 var(--font-display); color: var(--green); }
.creds dd { margin: 0; font-size: .88rem; color: var(--muted); }
@media (max-width: 480px) {
  .creds { grid-template-columns: 1fr; }
  .creds div, .creds div + div { padding: 12px 0; border-left: 0; }
  .creds div + div { border-top: 1px solid var(--line); }
}
@media (max-width: 700px) { .about { grid-template-columns: 1fr; gap: 28px; } .portrait { max-width: 280px; } }

/* Kontakt: dunkles Grün, damit die farbigen Original-Icons leuchten */
.contact { background: #03200E; color: #FFFFFF; }
.contact .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding-block: 84px; }
.contact h2 { color: #FFFFFF; }
.contact .label { color: #4BEA7E; }
.contact p { color: #B6D6BF; }
.social-wrap { display: grid; gap: 18px; justify-items: start; }
.social { display: flex; flex-wrap: wrap; gap: 18px; }
.social-btn { display: grid; justify-items: center; gap: 8px; color: #FFFFFF; text-decoration: none; }
.social-icon {
  width: 68px; height: 68px; display: grid; place-items: center;
  background: var(--bg);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6);
  transition: transform .2s ease, box-shadow .2s ease;
}
.social-icon svg { width: 34px; height: 34px; }
.social-btn:hover .social-icon { transform: translateY(-4px); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .7); }
.social-btn:focus-visible { outline: 3px solid #4BEA7E; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .social-icon { transition: none; } }

/* Seite Kontakt: links alle Daten als ruhige Liste, rechts dunkle Karte mit den farbigen Knöpfen */
.contact-page { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 64px; align-items: start; }
.contact-page-title { margin-bottom: 20px; }
.contact-list { margin: 0; border-top: 2px solid var(--green); }
.contact-list div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-list dt { font-weight: 700; color: var(--muted); }
.contact-list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.contact-list a { color: var(--green); }
.contact-card { display: grid; gap: 18px; padding: 36px 32px; background: #03200E; color: #FFFFFF; }
.contact-card h2 { color: #FFFFFF; font-size: 1.5rem; }
.contact-card p { color: #B6D6BF; }
.social-label { font-size: .88rem; font-weight: 700; color: #FFFFFF; }
.contact-card-cta { display: grid; gap: 12px; justify-items: start; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .15); }
.contact-card .btn-primary { background: var(--signal); border-color: var(--signal); color: #032010; }
@media (max-width: 860px) { .contact-page { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .contact-list div { grid-template-columns: minmax(0, 1fr); } .contact-card { padding: 28px 22px; } }
@media (max-width: 800px) { .contact .wrap { grid-template-columns: 1fr; padding-block: 60px; gap: 32px; } }
@media (max-width: 420px) { .social { gap: 12px; } .social-icon { width: 60px; height: 60px; } .social-icon svg { width: 30px; height: 30px; } }


/* Kopfbereich der Unterseiten: gleiches Foto wie die Startseite, aber niedriger */
.hero--page .wrap { padding-block: 72px 64px; }
.hero--page .hero-text { max-width: 720px; }
@media (max-width: 860px) { .hero--page .wrap { padding-block: 48px 40px; } }

/* Startseite: drei Kacheln, die zu den Unterseiten führen */
.teasers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.teaser {
  display: grid; gap: 12px; align-content: start; padding: 28px 26px;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.teaser p { color: var(--muted); }
.teaser .ico { margin-bottom: 6px; }
.teaser-more { margin-top: 6px; font-weight: 700; color: var(--green); }
.teaser:hover { border-color: var(--green); transform: translateY(-3px); }
.teaser:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 860px) { .teasers { grid-template-columns: minmax(0, 1fr); } }

/* Kontakt-Fenster */
.contact-dialog {
  border: 0; padding: 0; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  background: #03200E; color: #FFFFFF;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
}
.contact-dialog::backdrop { background: rgba(3, 20, 10, .62); backdrop-filter: blur(3px); }
.contact-dialog[open] { animation: dialog-in .22s cubic-bezier(.16, .84, .3, 1); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.dialog-inner { position: relative; display: grid; gap: 14px; padding: 36px 32px 34px; }
.dialog-inner .label { color: #4BEA7E; }
.dialog-inner h2 { color: #FFFFFF; font-size: clamp(1.5rem, 4vw, 1.9rem); padding-right: 40px; }
.dialog-inner p { color: #B6D6BF; }
.dialog-inner .social { margin-top: 8px; }
.dialog-close {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; cursor: pointer;
  display: grid; place-items: center; background: transparent; border: 1px solid rgba(255, 255, 255, .25); color: #FFFFFF;
}
.dialog-close:hover { background: rgba(255, 255, 255, .1); }
.dialog-close:focus-visible { outline: 3px solid #4BEA7E; outline-offset: 2px; }
.dialog-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .contact-dialog[open] { animation: none; } .teaser { transition: none; } }

/* Leistungen: Rundum-Service (100 %) */
.allin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.allin-head { display: grid; gap: 14px; }
.allin-head > p:last-child { color: var(--muted); font-size: 1.08rem; max-width: 46ch; }
.allin-big { font: 800 clamp(3.4rem, 9vw, 5.6rem)/.9 var(--font-display); letter-spacing: -.045em; color: var(--green); font-variant-numeric: tabular-nums; }
.allin-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 2px solid var(--green); }
.allin-list li { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.allin-list b { font-weight: 700; font-size: 1.08rem; }
.allin-list span { color: var(--muted); }
@media (max-width: 860px) { .allin { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
/* Anfrage-Formular: Auswahl-Kacheln links, Zusammenfassung rechts (mitlaufend) */
/* Anfrage-Bereich zweigeteilt: links Formular, rechts eine dunkelgrüne Fläche bis zum Bildschirmrand */
.wish-section { padding-block: 0; --edge: max(20px, calc((100vw - var(--wrap)) / 2 + 20px)); }
.wish { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 42%); gap: 0; align-items: stretch; }
.wish-main { min-width: 0; padding: 84px 56px 84px 0; }
.wish-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.wish-group { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; align-content: start; }
.wish-wide { grid-column: 1 / -1; }
.wish-group legend { padding: 0; margin-bottom: 12px; font-weight: 700; font-size: 1.05rem; }
.wish-group legend small { font-weight: 500; color: var(--muted); font-size: .85rem; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts-style { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt span {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: .95rem;
  transition: border-color .15s ease, background .15s ease;
}
.opt:hover span { border-color: var(--green); }
.opt input:checked + span { border-color: var(--green); background: var(--green-soft); box-shadow: inset 0 0 0 1px var(--green); }
.opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: .95rem; }
.check input { width: 20px; height: 20px; accent-color: var(--green); }

.wish-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .95rem; }
.req { color: var(--green); }
.opt-hint { font-weight: 400; color: var(--muted); font-size: .85rem; }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 0;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); }
.field input[aria-invalid="true"] { border-color: #C62828; }
.field-error { color: #B71C1C; font-size: .88rem; font-weight: 600; }
/* Spam-Falle: für Menschen unsichtbar, Roboter füllen sie aus */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wish-group .opt-hint a { color: var(--green); }

/* Auswahl rechts: dunkelgrüne Karte mit leuchtender Kante, Live-Vorschau und Auswahl-Kacheln */
.wish-summary {
  margin-right: calc(-1 * var(--edge)); padding-right: var(--edge);
  background:
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px) 0 0 / 16px 16px,
    radial-gradient(circle at 80% 10%, rgba(34, 211, 94, .22), transparent 45%),
    linear-gradient(165deg, #074A24 0%, #03200E 55%, #021509 100%);
  color: #FFFFFF;
}
.ws-inner { display: grid; gap: 18px; max-width: 540px; padding: 84px 0 84px 48px; }
@media (min-width: 961px) and (min-height: 860px) { .wish-summary .ws-inner { position: sticky; top: calc(116px + env(safe-area-inset-top, 0px)); } }
.ws-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ws-head h3 { color: #FFFFFF; font-size: 1.15rem; }
.ws-live { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 5px 9px; font: 700 .66rem/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: #4BEA7E; border: 1px solid rgba(75, 234, 126, .45); }
.ws-live i { width: 7px; height: 7px; border-radius: 50%; background: #4BEA7E; box-shadow: 0 0 0 0 rgba(75, 234, 126, .7); animation: ws-pulse 1.8s ease-out infinite; }
@keyframes ws-pulse { 0% { box-shadow: 0 0 0 0 rgba(75, 234, 126, .7); } 100% { box-shadow: 0 0 0 9px rgba(75, 234, 126, 0); } }

/* Mini-Webseite. Farben je nach gewähltem Stil */
.wp {
  --wp-bg: #FFFFFF; --wp-ink: #111827; --wp-hero: linear-gradient(135deg, #374151, #111827); --wp-btn: #FFFFFF; --wp-img: linear-gradient(135deg, #E5E7EB, #9CA3AF);
  background: #F1F3F2; box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .8); border: 1px solid rgba(255, 255, 255, .18);
}
.wp[data-stil="Natürlich und warm"] { --wp-bg: #F7EEE2; --wp-ink: #5B3417; --wp-hero: linear-gradient(135deg, #D29A5B, #7E4A22); --wp-btn: #F7EEE2; --wp-img: linear-gradient(135deg, #E6CBA8, #A9774A); }
.wp[data-stil="Edel und dunkel"]   { --wp-bg: #141414; --wp-ink: #E9DFC7; --wp-hero: linear-gradient(135deg, #2B2B2B, #0A0A0A); --wp-btn: #C9A45C; --wp-img: linear-gradient(135deg, #3A3A3A, #1C1C1C); }
.wp[data-stil="Bunt und fröhlich"] { --wp-bg: #FFF6FA; --wp-ink: #7A1E45; --wp-hero: linear-gradient(135deg, #FF6FA3, #FFC93C); --wp-btn: #FFFFFF; --wp-img: linear-gradient(135deg, #8EE3F5, #B79CFF); }
.wp-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #E4E8E6; }
.wp-dots { display: flex; gap: 4px; }
.wp-dots i { width: 7px; height: 7px; border-radius: 50%; background: #EE6A5F; }
.wp-dots i:nth-child(2) { background: #F5BF4F; } .wp-dots i:nth-child(3) { background: #61C554; }
.wp-url { flex: 1; min-width: 0; padding: 3px 7px; background: #FFFFFF; color: #374151; font: 600 .66rem/1.2 var(--font-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-page { display: grid; gap: 8px; padding: 10px; background: var(--wp-bg); transition: background .35s ease; }
.wp-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wp-logo { width: 16px; height: 16px; background: var(--wp-ink); transition: background .35s ease, box-shadow .35s ease; }
.wp.has-logo .wp-logo { background: #22D35E; box-shadow: 0 0 0 3px rgba(34, 211, 94, .35); }
.wp-links { display: flex; gap: 5px; }
.wp-links i { width: 16px; height: 4px; background: var(--wp-ink); opacity: .4; }
.wp-hero { position: relative; display: grid; gap: 6px; align-content: center; min-height: 78px; padding: 10px 12px; background: var(--wp-hero); transition: background .35s ease; }
.wp-h1 { width: 62%; height: 8px; background: rgba(255, 255, 255, .92); }
.wp-h2 { width: 42%; height: 5px; background: rgba(255, 255, 255, .6); }
.wp-btn { width: 40px; height: 11px; margin-top: 3px; background: var(--wp-btn); }
.wp-slides { position: absolute; right: 10px; bottom: 8px; display: none; gap: 4px; }
.wp-slides i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.wp-slides i:first-child { background: #FFFFFF; }
.wp.has-slides .wp-slides { display: flex; }
.wp-imgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.wp-imgs:empty { display: none; }
.wp-imgs i { aspect-ratio: 4 / 3; background: var(--wp-img); transition: background .35s ease; animation: wp-pop .3s ease-out both; }
@keyframes wp-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }

/* Auswahl als Kacheln */
.ws-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ws-list div { display: grid; gap: 3px; min-width: 0; padding: 9px 11px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.ws-list div.ws-wide { grid-column: 1 / -1; }
.ws-list dt { font: 700 .64rem/1.2 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: #9FD8B3; }
.ws-list dd { margin: 0; font-weight: 700; font-size: .92rem; overflow-wrap: anywhere; }
.ws-extras { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-extras span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; font-size: .78rem; font-weight: 700; color: #C6FAD4; background: rgba(75, 234, 126, .14); border: 1px solid rgba(75, 234, 126, .4); }
.ws-extras span::before { content: "✓"; color: #4BEA7E; }
.ws-extras .ws-none { color: #9FD8B3; background: transparent; border-style: dashed; border-color: rgba(255, 255, 255, .2); }
.ws-extras .ws-none::before { content: none; }

.wish-note { color: #B6D6BF; font-size: .86rem; }
.wish-actions { display: grid; gap: 10px; }
.wish-actions .btn { justify-content: center; cursor: pointer; }
.wish-summary .btn-primary { background: var(--signal); border-color: var(--signal); color: #032010; }
.wish-summary .btn-primary:hover { filter: brightness(1.08); }
.wish-summary .btn-ghost { color: #FFFFFF; border-color: rgba(255, 255, 255, .5); }
.wish-summary .btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.wish-status { color: #4BEA7E; font-size: .9rem; font-weight: 600; min-height: 1.2em; }
@media (prefers-reduced-motion: reduce) { .ws-live i, .wp-imgs i { animation: none; } .wp-page, .wp-hero, .wp-logo, .wp-imgs i { transition: none; } }
@media (max-width: 960px) {
  .wish { grid-template-columns: minmax(0, 1fr); }
  .wish-main { padding: 60px 0 44px; }
  .wish-summary {
    margin-inline: calc(-1 * max(20px, env(safe-area-inset-left, 0px))) calc(-1 * max(20px, env(safe-area-inset-right, 0px)));
    padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px));
  }
  .ws-inner { max-width: 620px; padding: 48px 0 60px; }
}
@media (max-width: 600px) { .wish-fields { grid-template-columns: minmax(0, 1fr); } .opts-style { grid-template-columns: minmax(0, 1fr); } }

/* Helfer-Figur "Keko" in der Live-Vorschau */
.ws-inner { position: relative; }
.buddy {
  position: absolute; left: 0; top: 0; z-index: 5; width: 72px; pointer-events: none;
  transform: translate(var(--bx, 0px), var(--by, 0px));
  transition: transform .75s cubic-bezier(.34, 1.25, .5, 1);
}
.buddy-body { display: block; width: 72px; height: auto; overflow: visible; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); animation: buddy-bob 2.4s ease-in-out infinite; }
.buddy.is-flipped .buddy-body { scale: -1 1; }
.buddy.is-walking .buddy-body { animation: buddy-walk .18s ease-in-out infinite alternate; }
.buddy-eyes { transform-box: fill-box; transform-origin: center; animation: buddy-blink 4.2s infinite; }
.buddy-arm { transform-box: view-box; transform-origin: 8px 30px; transform: rotate(-55deg); transition: transform .3s ease; }
.buddy.is-pointing .buddy-arm { transform: rotate(0deg); animation: buddy-point .45s ease-in-out 3 alternate; }
.buddy-feet rect { transform-box: fill-box; transform-origin: center; }
.buddy.is-walking .buddy-feet rect:first-child { animation: buddy-step .18s ease-in-out infinite alternate; }
.buddy.is-walking .buddy-feet rect:last-child { animation: buddy-step .18s ease-in-out infinite alternate-reverse; }

.buddy-bubble {
  position: absolute; right: calc(100% - 4px); bottom: 58%; width: max-content; max-width: 210px;
  padding: 9px 12px; background: #FFFFFF; color: #03200E; font: 700 .8rem/1.35 var(--font-body);
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(6px) scale(.94); transform-origin: bottom right;
  transition: opacity .25s ease, transform .25s ease;
}
.buddy-bubble::after { content: ""; position: absolute; right: -7px; bottom: 10px; border: 7px solid transparent; border-left-color: #FFFFFF; border-right: 0; }
.buddy.is-flipped .buddy-bubble { right: auto; left: calc(100% - 4px); transform-origin: bottom left; }
.buddy.is-flipped .buddy-bubble::after { right: auto; left: -7px; border-left-color: transparent; border-right: 7px solid #FFFFFF; border-left: 0; }
.buddy.is-talking .buddy-bubble { opacity: 1; transform: none; }

/* Kurzes Aufleuchten der Stelle, auf die der Helfer zeigt */
.w-flash { animation: w-flash 1.1s ease-out; }

@keyframes buddy-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes buddy-walk { from { translate: 0 0; rotate: -4deg; } to { translate: 0 -5px; rotate: 4deg; } }
@keyframes buddy-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes buddy-point { from { transform: rotate(0deg); } to { transform: rotate(-14deg); } }
@keyframes buddy-step { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes w-flash { 0% { box-shadow: 0 0 0 0 rgba(34, 211, 94, .95); } 100% { box-shadow: 0 0 0 12px rgba(34, 211, 94, 0); } }

@media (prefers-reduced-motion: reduce) {
  .buddy { transition: none; }
  .buddy-body, .buddy-eyes, .buddy.is-walking .buddy-body, .buddy.is-pointing .buddy-arm, .buddy-feet rect, .w-flash { animation: none !important; }
}
@media (max-width: 480px) { .buddy, .buddy-body { width: 60px; } .buddy-bubble { max-width: 170px; font-size: .76rem; } }

/* Keko auf der Startseite: schwebt unten rechts, lässt sich ziehen und schütteln */
.keko-float {
  position: fixed; z-index: 60; width: 76px;
  right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.keko-btn { display: block; width: 76px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.keko-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.keko-btn .buddy-body { width: 76px; }
.keko-float.is-dragging .keko-btn { cursor: grabbing; }
.keko-float.is-dragging .buddy-body { animation: none; scale: 1.08; }
.keko-float.is-dizzy .buddy-body { animation: buddy-shake .09s linear infinite alternate; }
.buddy-dizzy, .buddy-o { display: none; }
.is-dizzy .buddy-eyes, .is-dizzy .buddy-smile { display: none; }
.is-dizzy .buddy-dizzy, .is-dizzy .buddy-o { display: inline; }
.keko-float.is-left .buddy-body { scale: -1 1; }
.keko-float.is-left.is-dragging .buddy-body { scale: -1.08 1.08; }

.keko-bubble {
  position: absolute; right: 8px; bottom: calc(100% + 4px); width: max-content; max-width: 240px;
  display: grid; gap: 6px; padding: 10px 13px; background: #FFFFFF; color: #03200E;
  font: 700 .84rem/1.35 var(--font-body); box-shadow: 0 14px 30px -12px rgba(3, 32, 14, .55);
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.94); transform-origin: bottom right;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.keko-bubble::after { content: ""; position: absolute; right: 22px; bottom: -7px; border: 7px solid transparent; border-top-color: #FFFFFF; border-bottom: 0; }
.keko-float.is-left .keko-bubble { right: auto; left: 8px; transform-origin: bottom left; }
.keko-float.is-left .keko-bubble::after { right: auto; left: 22px; }
.keko-float.is-low .keko-bubble { bottom: auto; top: calc(100% + 4px); }
.keko-float.is-low .keko-bubble::after { bottom: auto; top: -7px; border-top-color: transparent; border-bottom: 7px solid #FFFFFF; border-top: 0; }
.keko-float.is-talking .keko-bubble { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s; }
.keko-link { color: var(--green); font-weight: 800; text-decoration: none; }
.keko-link:hover { text-decoration: underline; }

@keyframes buddy-shake { from { rotate: -14deg; translate: -2px 0; } to { rotate: 14deg; translate: 2px 0; } }
@media (prefers-reduced-motion: reduce) { .keko-float.is-dizzy .buddy-body, .keko-btn .buddy-body { animation: none; } .keko-bubble { transition: none; } }
@media (max-width: 480px) { .keko-float, .keko-btn, .keko-btn .buddy-body { width: 62px; } .keko-bubble { max-width: 210px; font-size: .8rem; } }

/* Preise: ruhiger Hinweis unter den Paketen, führt zur Seite "Wie sich der Preis zusammensetzt" */
.price-hint {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px;
  max-width: 860px; margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--line);
}
.price-hint > div { flex: 1 1 380px; }
.price-hint h2 { font-size: 1.3rem; margin-bottom: 6px; }
.price-hint p { color: var(--muted); max-width: 56ch; }

/* Seite "Wie sich der Preis zusammensetzt": schlicht, Text statt bunter Kacheln */
.start-price { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.start-price-amount { margin: 10px 0 6px; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; letter-spacing: -.02em; }
.start-price-amount small { font-size: .38em; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.start-price-sub { color: var(--muted); }
.start-price h3 { margin-bottom: 14px; }
.start-price ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.start-price li { padding-left: 1.6em; position: relative; }
.start-price li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }

.factor-list { margin: 0; padding: 0; list-style: none; counter-reset: factor; max-width: 980px; }
.factor-row {
  counter-increment: factor; display: grid; grid-template-columns: 56px minmax(0, 4fr) minmax(0, 7fr); gap: 8px 32px;
  padding-block: 28px; border-top: 1px solid var(--line);
}
.factor-row:last-child { border-bottom: 1px solid var(--line); }
.factor-row::before { content: counter(factor, decimal-leading-zero); font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; padding-top: 2px; }
.factor-row h3 { font-size: 1.15rem; }
.factor-row p { color: var(--muted); }
.factor-row .examples { margin-top: 8px; color: var(--ink); }
.factor-row .examples b { font-weight: 700; }

.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.case { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 3px solid var(--ink); }
.case.is-more { border-top-color: var(--green); }
.case-level { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.case p { color: var(--muted); }

.price-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 64px; max-width: 980px; }
.price-note h3 { margin-bottom: 6px; }
.price-note p { color: var(--muted); }
.price-cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
@media (max-width: 860px) {
  .start-price, .cases { grid-template-columns: minmax(0, 1fr); }
  .cases { gap: 32px; }
  .factor-row { grid-template-columns: 32px minmax(0, 1fr); gap: 8px 12px; }
  .factor-row > div:last-child { grid-column: 2; }
}
@media (max-width: 600px) { .price-notes { grid-template-columns: minmax(0, 1fr); } }
/* Riesen-Keko auf der Startseite: Körper hinter den Kacheln, Arme (per Skript gezeichnet) davor */
.hugger { position: relative; height: 170px; margin: 0 0 -22px; pointer-events: none; }
.teasers { position: relative; z-index: 1; }
.hug-bot {
  position: absolute; z-index: 0; left: 50%; top: 0; width: 220px; height: 200px;
  translate: -50% 0; overflow: visible;
  filter: drop-shadow(0 18px 24px rgba(3, 32, 14, .25));
}
.hug-pupil { transition: transform .15s ease-out; }
.hug-eye { transform-box: fill-box; transform-origin: center; animation: buddy-blink 5s infinite; }

/* Arme: geschwungen aus den Seiten des Körpers bis zu den Fäusten auf den äußeren Kacheln */
.hug-arms { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hug-arm-path { fill: none; stroke: #03200E; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hug-joint { fill: #03200E; }
.js-reveal .hugger:not(.is-landed) .hug-joint { opacity: 0; }
.hugger.is-landed .hug-joint { transition: opacity .2s ease .95s; }
.hug-fist { fill: #22D35E; stroke: #03200E; stroke-width: 5; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 5px 6px rgba(3, 32, 14, .35)); }

@media (max-width: 860px) {
  .hugger { height: 132px; margin-bottom: -18px; }
  .hug-bot { top: 0; width: 170px; height: 155px; }
  .hug-arm-path { stroke-width: 6; }
}
@media (prefers-reduced-motion: reduce) {
  .hug-eye { animation: none; }
  .hug-pupil { transition: none; }
}
/* Großer Keko in der Slideshow (nur auf breiten Bildschirmen, rechts neben dem Text) */
.hero .wrap { position: relative; }
/* Handy: Keko steht klein unter dem Text, rechtsbündig */
.hero-keko { display: grid; justify-items: end; margin-top: 12px; pointer-events: none; }
.hero-keko .hk-bot { width: 170px; }
.hero-keko .hk-say { justify-self: end; margin: 0 40px -2px 0; }
.hero-keko .hk-msg { font-size: .88rem; }
/* Ab Tablet: Keko steht rechts neben dem Text */
@media (min-width: 700px) {
  .hero[data-slideshow] .slides { max-width: calc(100% - 250px); }
  .hero-keko {
    position: absolute; right: max(20px, env(safe-area-inset-right, 0px)); bottom: 100px; margin: 0;
    width: 230px; justify-items: center;
  }
  .hero-keko .hk-bot { width: 230px; }
  .hero-keko .hk-say { justify-self: start; margin: 0 0 -4px -40px; }
  .hero-keko .hk-msg { font-size: .95rem; }
}
/* Breite Bildschirme: Keko groß */
@media (min-width: 1100px) {
  .hero[data-slideshow] .slides { max-width: calc(100% - 340px); }
  .hero-keko { width: 300px; }
  .hero-keko .hk-bot { width: 300px; }
  .hero-keko .hk-msg { font-size: 1rem; }
}
.hk-bot { display: block; height: auto; overflow: visible; filter: drop-shadow(0 22px 26px rgba(3, 32, 14, .22)); animation: hk-bob 3.2s ease-in-out infinite; }
.hk-wave { transform-box: view-box; transform-origin: 30px 112px; animation: hk-wave 2.6s ease-in-out infinite; }
.hk-feet rect { transform-box: fill-box; transform-origin: center; }

.hk-say { display: grid; justify-self: start; margin: 0 0 -4px -40px; }
.hk-msg {
  grid-area: 1 / 1; position: relative; display: inline-flex; align-items: center; gap: 10px; width: max-content;
  padding: 9px 16px 9px 9px; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  font-weight: 800; font-size: 1rem; box-shadow: 0 16px 30px -18px rgba(3, 32, 14, .45);
  opacity: 0; transform: translateY(10px) scale(.94); transform-origin: bottom left;
  transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.4, .5, 1);
}
.hk-msg::after { content: ""; position: absolute; left: 70px; bottom: -8px; width: 14px; height: 14px; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.hk-msg.is-on { opacity: 1; transform: none; }
.hk-msg .ico { width: 34px; height: 34px; }
.hk-msg .ico svg { width: 20px; height: 20px; }

@keyframes hk-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes hk-wave { 0%, 60%, 100% { rotate: 0deg; } 70% { rotate: -16deg; } 80% { rotate: 6deg; } 90% { rotate: -12deg; } }
@media (prefers-reduced-motion: reduce) { .hk-bot, .hk-wave { animation: none; } .hk-msg { transition: none; } }

/* Keko tanzt in der Slideshow: wippen, dann zwei Hüpfer mit Wackeln */
.hk-bot { animation: hk-dance 5.5s ease-in-out infinite; }
.hk-feet rect:first-child { animation: hk-tap 5.5s ease-in-out infinite; }
.hk-feet rect:last-child { animation: hk-tap 5.5s ease-in-out infinite .12s; }
@keyframes hk-dance {
  0%, 52%, 100% { translate: 0 0; rotate: 0deg; scale: 1; }
  26% { translate: 0 -6px; }
  58% { translate: 0 -22px; rotate: -7deg; scale: 1; }
  64% { translate: 0 0; rotate: 5deg; scale: 1.06 .94; }
  70% { translate: 0 -18px; rotate: 7deg; scale: 1; }
  76% { translate: 0 0; rotate: -4deg; scale: 1.05 .95; }
  84% { translate: 0 -4px; rotate: 2deg; scale: 1; }
}
@keyframes hk-tap { 0%, 56%, 100% { transform: translateY(0); } 62%, 74% { transform: translateY(-5px); } 68%, 80% { transform: translateY(0); } }

/* Springt weg, sobald er unten bei den Kacheln landet, und kommt zurück, wenn man wieder hochscrollt */
.hero-keko { transition: opacity .35s ease, transform .5s cubic-bezier(.5, -0.3, .7, 1); }
.hero-keko.is-away { opacity: 0; transform: translateY(180px) rotate(14deg) scale(.8); }
.hero-keko.is-back { transition: opacity .3s ease, transform .6s cubic-bezier(.34, 1.5, .5, 1); }

/* Riesen-Keko: wartet unsichtbar oben und fliegt rein, wenn die Kacheln ins Bild kommen */
.js-reveal .hugger:not(.is-landed) .hug-bot { opacity: 0; translate: -50% -340px; rotate: -30deg; scale: .6; animation: none; }
.js-reveal .hugger:not(.is-landed) .hug-arm-path { stroke-dashoffset: 1; }
.js-reveal .hugger:not(.is-landed) .hug-fist { opacity: 0; transform: scale(.2); }
.js-reveal .hugger:not(.is-landed) .hug-say { opacity: 0; transform: translateY(10px) scale(.9); }
.hugger.is-landed .hug-bot { animation: hug-fly-in 1.15s cubic-bezier(.3, .7, .4, 1) both; }
.hugger.is-landed .hug-arm-path { transition: stroke-dashoffset .6s ease-out .95s; }
.hugger.is-landed .hug-fist { transition: opacity .2s ease 1.45s, transform .4s cubic-bezier(.34, 1.8, .5, 1) 1.45s; }
.hug-say { transition: opacity .2s ease, transform .2s ease; }
.hugger.is-landed .hug-say { transition: opacity .35s ease 1.5s, transform .45s cubic-bezier(.34, 1.5, .5, 1) 1.5s; }
@keyframes hug-fly-in {
  0%   { opacity: 0; translate: -50% -340px; rotate: -30deg; scale: .6; }
  15%  { opacity: 1; }
  50%  { translate: -50% -60px; rotate: 18deg; scale: .92; }
  70%  { translate: -50% 10px; rotate: -5deg; scale: 1.1 .9; }
  85%  { translate: -50% -8px; rotate: 2deg; scale: .98 1.02; }
  100% { opacity: 1; translate: -50% 0; rotate: 0deg; scale: 1; }
}


/* Sprechblase rechts neben seinem Kopf */
.hug-say {
  position: absolute; z-index: 3; left: calc(50% + 124px); top: 6px; width: max-content; max-width: 260px;
  padding: 11px 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  font-weight: 700; font-size: .95rem; line-height: 1.35; box-shadow: 0 16px 30px -18px rgba(3, 32, 14, .45);
}
.hug-say b { color: var(--green); }
.hug-say::after { content: ""; position: absolute; left: -8px; top: 22px; width: 14px; height: 14px; background: var(--surface); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
@media (max-width: 860px) {
  .hugger { margin-top: 70px; }
  .hug-say { left: 50%; top: -66px; translate: -50% 0; max-width: min(300px, 90%); font-size: .86rem; text-align: center; }
  .hug-say::after { left: calc(50% - 7px); top: auto; bottom: -8px; transform: rotate(-45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hk-bot, .hk-feet rect, .hugger.is-landed .hug-bot { animation: none; }
  .hero-keko, .hug-say, .hugger.is-landed .hug-arm-path, .hugger.is-landed .hug-fist { transition: none; }
}

/* Reinfliegen beim Scrollen. Greift nur, wenn das Skript die Klasse "js-reveal" setzt;
   ohne Skript oder bei "Bewegung reduzieren" ist alles sofort sichtbar. */
main { overflow-x: clip; }
.js-reveal [data-reveal] {
  opacity: 0;
  transition: opacity .7s ease, transform .8s cubic-bezier(.16, .84, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-reveal [data-reveal="left"]  { transform: translateX(-48px); }
.js-reveal [data-reveal="right"] { transform: translateX(48px); }
.js-reveal [data-reveal="up"]    { transform: translateY(32px); }
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

/* Fußzeile */
.site-footer { padding-block: 28px; font-size: .9rem; color: var(--muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.site-footer nav { display: flex; gap: 20px; }
.site-footer a { color: var(--muted); display: inline-block; padding-block: 12px; }

/* Rechtstexte (Impressum, Datenschutz) */
.legal { padding-block: 56px 80px; }
.legal .wrap > div { max-width: 70ch; display: grid; gap: 14px; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 12px; }
.legal h2 { font-size: 1.25rem; margin-top: 22px; }
.legal address { font-style: normal; }
.legal-date { margin-top: 24px; color: var(--muted); font-size: .9rem; }
.legal .hint { color: #03200E; background: var(--mark); border-radius: 0; padding: 14px 16px; font-size: .92rem; }