/* =========================================================
   Kodevo – Stylesheet (Neugestaltung 2026-10)
   Aufbau: Schriften · Farben · Basis · Layout · Kopf · Knöpfe · Hero ·
   Kurzer Check & Vergleich · Pakete & Reiter · Social Media & Kombi-Vorteil · Paket-Helfer · Extras ·
   Ablauf · Über mich · Referenzen · FAQ · Kontakt · Anruf-Knopf · Fuß · Unterseite ·
   Einblenden · Bewegung reduzieren · Druck
   Regeln: Ohne JavaScript ist alles sichtbar (Effekte nur unter .js).
   Bei prefers-reduced-motion gibt es keine Bewegung.
   ========================================================= */

/* ---------- Schriften (selbst gehostet, OFL) ---------- */
@font-face { font-family: "Familjen Grotesk"; src: url("../fonts/familjen-grotesk-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* ---------- Farben ----------
   Hell ist die Grundeinstellung; Dunkel nach Systemeinstellung oder per Umschalter (data-thema). */
:root {
  --grund: #F4F7F6;
  --flaeche: #FFFFFF;
  --flaeche-2: #E9F0EE;
  --text: #10201E;
  --gedaempft: #4F605D;
  --linie: #D3DEDB;
  --gruen: #0E6B62;
  --gruen-stark: #0A4F48;
  --auf-gruen: #FFFFFF;
  --gelb: #E8A91C;
  --auf-gelb: #10201E;
  --raster: rgb(14 107 98 / 0.13);
  --schein: rgb(14 107 98 / 0.12);
  --schatten: 0 1px 2px rgb(16 32 30 / 0.05), 0 12px 32px -16px rgb(16 32 30 / 0.22);
  --kopf-grund: rgb(244 247 246 / 0.88);
  --fuss: #0A2421;
  --fuss-text: #D5E2DF;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund: #0D1716;
    --flaeche: #13211F;
    --flaeche-2: #182A27;
    --text: #E8F0EE;
    --gedaempft: #A1B4B0;
    --linie: #263835;
    --gruen: #3FB3A6;
    --gruen-stark: #6DD0C4;
    --auf-gruen: #0D1716;
    --gelb: #F0BB3E;
    --auf-gelb: #0D1716;
    --raster: rgb(63 179 166 / 0.12);
    --schein: rgb(63 179 166 / 0.14);
    --schatten: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px -20px rgb(0 0 0 / 0.7);
    --kopf-grund: rgb(13 23 22 / 0.86);
    --fuss: #081110;
    color-scheme: dark;
  }
}
:root[data-thema="dunkel"] {
  --grund: #0D1716;
  --flaeche: #13211F;
  --flaeche-2: #182A27;
  --text: #E8F0EE;
  --gedaempft: #A1B4B0;
  --linie: #263835;
  --gruen: #3FB3A6;
  --gruen-stark: #6DD0C4;
  --auf-gruen: #0D1716;
  --gelb: #F0BB3E;
  --auf-gelb: #0D1716;
  --raster: rgb(63 179 166 / 0.12);
  --schein: rgb(63 179 166 / 0.14);
  --schatten: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px -20px rgb(0 0 0 / 0.7);
  --kopf-grund: rgb(13 23 22 / 0.86);
  --fuss: #081110;
  color-scheme: dark;
}

:root {
  --titel: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --schrift: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --breite: 72rem;
  --rand: clamp(1rem, 4vw, 2rem);
  --radius: 14px;
  --radius-klein: 8px;
  --abstand: clamp(4rem, 9vw, 7.5rem);
  --kopf-hoehe: 4rem;
  --weich: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--titel);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: clamp(2.6rem, 8vw, 5rem); letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); letter-spacing: -0.03em; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--gruen); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--gruen-stark); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--gelb); color: var(--auf-gelb); }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--rand); top: -5rem; z-index: 200;
  background: var(--gelb); color: var(--auf-gelb);
  padding: 0.6rem 1rem; border-radius: var(--radius-klein); font-weight: 600;
}
.skip-link:focus { top: 0.75rem; }

/* ---------- Layout ---------- */
.rahmen {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}
.abschnitt { padding-block: var(--abstand); position: relative; }
.abschnitt--flaeche { background: var(--flaeche); }
.abschnitt--knapp { padding-block: clamp(3rem, 6vw, 5rem); }
.kopfzeile { max-width: 42rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
.kopfzeile > p:last-child { color: var(--gedaempft); font-size: 1.125rem; margin: 0; }

/* Pixel-Marke über Abschnittstiteln */
.kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin: 0 0 1rem;
  font-family: var(--mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gedaempft);
}
.kicker::before {
  content: ""; width: 0.6rem; height: 0.6rem; flex: none;
  background: var(--gruen);
  box-shadow: 0.8rem 0 0 var(--gelb);
  margin-right: 0.8rem;
}

/* Haken-Liste mit Pixel-Quadraten */
.haken { list-style: none; padding: 0; margin: 0; }
.haken li { position: relative; padding-left: 1.4rem; margin-bottom: 0.45rem; }
.haken li::before {
  content: ""; position: absolute; left: 0; top: 0.58em;
  width: 0.5rem; height: 0.5rem; background: var(--gruen);
}

/* ---------- Kopf (fixiert) ---------- */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--kopf-hoehe);
  background: var(--kopf-grund);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}
@supports (backdrop-filter: blur(1px)) {
  @media (hover: hover) and (pointer: fine) {
    .kopf { backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); }
  }
}
.kopf.ist-gescrollt { border-bottom-color: var(--linie); box-shadow: 0 6px 24px -18px rgb(0 0 0 / 0.5); }
body { padding-top: var(--kopf-hoehe); }
.kopf__innen { height: 100%; display: flex; align-items: center; gap: 1rem; }
.logo { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--text); text-decoration: none; margin-right: auto; border-radius: 6px; }
.logo:hover { color: var(--text); }
.logo__marke { width: 2.1rem; height: 2.1rem; }
.logo__wort { font-family: var(--titel); font-weight: 700; font-size: 1.45rem; letter-spacing: -0.03em; line-height: 1; }

.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
.nav a {
  position: relative; display: block;
  padding: 0.5rem 0.75rem; border-radius: 999px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.95rem;
  transition: background-color 0.2s, color 0.2s;
}
.nav a:hover { background: var(--flaeche-2); }
.nav a[aria-current] { color: var(--gruen); }
.nav a[aria-current]::after {
  content: ""; position: absolute; left: 50%; bottom: 0.15rem;
  width: 0.35rem; height: 0.35rem; margin-left: -0.175rem; background: var(--gelb);
}
.kopf__aktionen { display: flex; align-items: center; gap: 0.5rem; }

/* Desktop-Menü kompakt, damit es ab 1024 px in eine Zeile passt; bis 1280 px heißt der Button nur „Erstgespräch“ */
@media (min-width: 64rem) {
  .nav__liste { gap: 0; }
  .nav__liste > li > a, .nav .nav__auf { padding: 0.45rem 0.6rem; font-size: 0.9rem; white-space: nowrap; }
  .nav .nav__auf { gap: 0.3rem; }
}
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .kopf__innen { gap: 0.6rem; }
  .kopf__cta-lang { display: none; }
  .nav__liste > li > a, .nav .nav__auf { padding-inline: 0.45rem; font-size: 0.88rem; }
  .logo__wort { font-size: 1.3rem; }
}

/* Untermenüs (Websites, Apps, Social Media, Beispiele): Knopf mit aria-expanded, Liste darunter */
.nav__auf {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.75rem; border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--text); font: 600 0.95rem var(--schrift); position: relative;
  transition: background-color 0.2s, color 0.2s;
}
.nav__auf:hover, .nav__auf[aria-expanded="true"] { background: var(--flaeche-2); }
.nav__pfeil { width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.25s var(--weich); }
.nav__auf[aria-expanded="true"] .nav__pfeil { transform: translateY(1px) rotate(-135deg); }
.nav__gruppe.ist-aktuell > .nav__auf { color: var(--gruen); }
.nav__gruppe.ist-aktuell > .nav__auf::after {
  content: ""; position: absolute; left: 50%; bottom: 0.15rem;
  width: 0.35rem; height: 0.35rem; margin-left: -0.175rem; background: var(--gelb);
}
.nav .nav__unter { display: none; flex-direction: column; gap: 0.1rem; }
.js .nav__gruppe.ist-offen > .nav__unter { display: flex; }
html:not(.js) .nav__gruppe:is(:hover, :focus-within) > .nav__unter { display: flex; }
.nav__unter a { font-weight: 500; }
.nav__unter small { display: block; font: 400 0.8rem/1.3 var(--schrift); color: var(--gedaempft); }
.nav .nav__unter a[aria-current] { color: var(--gruen); background: var(--flaeche-2); }
.nav .nav__unter a[aria-current]::after { display: none; }
@media (min-width: 64rem) {
  .nav__liste { align-items: center; }
  .nav__gruppe { position: relative; }
  .nav .nav__unter {
    position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 10; min-width: 15rem;
    padding: 0.4rem; background: var(--flaeche); border: 1px solid var(--linie);
    border-radius: var(--radius); box-shadow: var(--schatten);
  }
  /* Brücke über die Lücke, damit das Menü beim Hinfahren mit der Maus offen bleibt */
  .nav .nav__unter::before { content: ""; position: absolute; left: 0; right: 0; top: -0.6rem; height: 0.6rem; }
  .nav__unter a { border-radius: var(--radius-klein); padding: 0.55rem 0.75rem; }
}


.thema-knopf, .menue-knopf {
  display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid var(--linie); border-radius: 999px;
  background: transparent; color: var(--text); cursor: pointer;
  transition: background-color 0.2s, transform 0.2s var(--weich);
}
.thema-knopf:hover, .menue-knopf:hover { background: var(--flaeche-2); }
.thema-knopf svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.thema-knopf__mond { fill: currentColor !important; stroke: none !important; }
.thema-knopf__sonne { display: none !important; }
:root[data-thema="dunkel"] .thema-knopf__sonne { display: block !important; }
:root[data-thema="dunkel"] .thema-knopf__mond { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .thema-knopf__sonne { display: block !important; }
  :root:not([data-thema="hell"]) .thema-knopf__mond { display: none !important; }
}
.menue-knopf__icon { display: grid; gap: 4px; width: 18px; }
.menue-knopf__icon i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.25s var(--weich), opacity 0.2s; }
.menue-knopf[aria-expanded="true"] .menue-knopf__icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-knopf__icon i:nth-child(2) { opacity: 0; }
.menue-knopf[aria-expanded="true"] .menue-knopf__icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Kleine Bildschirme: Navigation als Menü (mit JS) bzw. als Zeile unter dem Kopf (ohne JS) */
@media (max-width: 63.99rem) {
  .nav { position: absolute; top: 100%; left: 0; right: 0; }
  html:not(.js) .nav { background: var(--kopf-grund); border-bottom: 1px solid var(--linie); overflow-x: auto; }
  html:not(.js) .nav ul { padding: 0.25rem var(--rand); }
  html:not(.js) body { padding-top: calc(var(--kopf-hoehe) + 3rem); }
  .js .nav {
    background: var(--grund);
    border-bottom: 1px solid var(--linie);
    box-shadow: 0 24px 48px -24px rgb(0 0 0 / 0.45);
    padding: 0.5rem var(--rand) 1.25rem;
    visibility: hidden; opacity: 0; transform: translateY(-0.5rem);
    transition: opacity 0.2s, transform 0.25s var(--weich), visibility 0s 0.25s;
  }
  .js .nav.ist-offen { visibility: visible; opacity: 1; transform: none; transition: opacity 0.2s, transform 0.25s var(--weich); }
  .js .nav ul { flex-direction: column; gap: 0; }
  .js .nav a { font-family: var(--titel); font-size: 1.6rem; padding: 0.7rem 0; border-radius: 0; border-bottom: 1px solid var(--linie); }
  .js .nav a:hover { background: none; }
  .js .nav a[aria-current]::after { left: auto; right: 0.25rem; top: 50%; bottom: auto; margin: -0.2rem 0 0; width: 0.5rem; height: 0.5rem; }
  .js .nav { max-height: calc(100dvh - var(--kopf-hoehe)); overflow-y: auto; overscroll-behavior: contain; }
  .js .nav__auf {
    width: 100%; justify-content: space-between; padding: 0.7rem 0; border-radius: 0; background: none;
    font: 700 1.6rem var(--titel); border-bottom: 1px solid var(--linie);
  }
  .js .nav__auf:hover, .js .nav__auf[aria-expanded="true"] { background: none; }
  .js .nav__gruppe.ist-aktuell > .nav__auf::after { left: auto; right: 2rem; top: 50%; bottom: auto; margin: -0.2rem 0 0; width: 0.5rem; height: 0.5rem; }
  .js .nav .nav__unter { padding: 0.25rem 0 0.5rem 1rem; border-bottom: 1px solid var(--linie); }
  .js .nav .nav__unter a { font: 500 1.1rem var(--schrift); padding: 0.55rem 0; border: 0; }
  .js .nav .nav__unter a[aria-current] { background: none; }
  .js .nav__unter small { display: inline; margin-left: 0.4rem; }
  html:not(.js) .nav__gruppe { position: relative; }
  html:not(.js) .nav .nav__unter { position: absolute; top: 100%; left: 0; background: var(--flaeche); border: 1px solid var(--linie); padding: 0.25rem; }
}
@media (min-width: 64rem) {
  .menue-knopf { display: none !important; }
}
@media (max-width: 63.99rem) {
  .kopf__aktionen > .thema-knopf { display: none !important; }
}
@media (min-width: 64rem) { .nav__thema { display: none; } }
.nav__thema .thema-knopf { width: auto; height: auto; border: 0; border-radius: 0; gap: 0.64rem; display: flex; padding: 1rem 0 0; font: 600 1rem var(--schrift); background: none; }
@media (max-width: 30rem) {
  .kopf__innen { gap: 0.5rem; }
  .logo__wort { font-size: 1.25rem; }
  .logo__marke { width: 1.9rem; height: 1.9rem; }
  .kopf__cta { padding-inline: 0.64rem !important; font-size: 0.8rem !important; min-height: 2.5rem; }
}
@media (max-width: 22.5rem) { .logo__wort { display: none; } }

/* ---------- Knöpfe ---------- */
.knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.knopf {
  --knopf-grund: var(--gruen);
  --knopf-text: var(--auf-gruen);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.75rem 1.4rem;
  border: 2px solid var(--knopf-grund); border-radius: 999px;
  background: var(--knopf-grund); color: var(--knopf-text);
  font: 600 1rem/1.2 var(--schrift); text-decoration: none; text-align: center;
  cursor: pointer;
  transition: transform 0.2s var(--weich), box-shadow 0.2s, background-color 0.2s, color 0.2s;
}
.knopf:hover { color: var(--knopf-text); transform: translateY(-2px); box-shadow: 0 10px 24px -12px var(--knopf-grund); }
.knopf:active { transform: translateY(0) scale(0.98); }
.knopf--gelb { --knopf-grund: var(--gelb); --knopf-text: var(--auf-gelb); }
.knopf--rahmen { background: transparent; color: var(--text); border-color: var(--linie); }
.knopf--rahmen:hover { color: var(--text); border-color: var(--gruen); box-shadow: none; }
.knopf--klein { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.92rem; }
/* Glanz, der beim Darüberfahren durchläuft */
.knopf::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.35) 50%, transparent 65%);
  transform: translateX(-120%);
}
@media (prefers-reduced-motion: no-preference) {
  .knopf:hover::after { transform: translateX(120%); transition: transform 0.7s var(--weich); }
}
.knopf--rahmen::after { display: none; }
.mehr {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 600; text-decoration: none;
}
.mehr::after { content: "→"; transition: transform 0.2s var(--weich); }
.mehr:hover::after { transform: translateX(4px); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(2.5rem, 8vw, 6.5rem) clamp(3.5rem, 9vw, 7rem);
  border-bottom: 1px solid var(--linie);
}
/* Pixel-Raster, das mit der Maus mitleuchtet (Spotlight). Am Handy steht es still. */
.hero__raster {
  position: absolute; inset: 0; pointer-events: none;
  --mx: 72%; --my: 45%;
  background-image:
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(28rem circle at var(--mx) var(--my), #000 0%, rgb(0 0 0 / 0.35) 45%, transparent 75%);
  mask-image: radial-gradient(28rem circle at var(--mx) var(--my), #000 0%, rgb(0 0 0 / 0.35) 45%, transparent 75%);
}
.hero__raster::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(22rem circle at var(--mx) var(--my), var(--schein), transparent 70%);
}
.hero__innen { position: relative; display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 56rem) { .hero__innen { grid-template-columns: 1.35fr 1fr; gap: 4rem; } }
.hero__neu { color: var(--gruen); }
#hero-titel { font-size: clamp(2.3rem, 4.4vw, 3.6rem); }
#hero-titel .hero__neu { display: block; }
.hero__satz { font-size: clamp(1.1rem, 2.2vw, 1.3rem); color: var(--gedaempft); max-width: 36rem; margin-bottom: 2rem; }
/* Zwei gleich große Einstiege: Website | Social Media */
.einstiege { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; max-width: 40rem; }
@media (min-width: 36rem) { .einstiege { grid-template-columns: 1fr 1fr; } }
.einstieg {
  height: 100%; display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.1rem;
  border: 2px solid var(--gruen); border-radius: var(--radius); background: var(--flaeche);
  color: var(--text); font-weight: 700; font-size: 1.05rem; line-height: 1.3; text-decoration: none;
  transition: background-color 0.2s, transform 0.2s var(--weich), box-shadow 0.2s;
}
.einstieg:hover { background: color-mix(in srgb, var(--gruen) 10%, var(--flaeche)); transform: translateY(-2px); box-shadow: var(--schatten); color: var(--text); }
.einstieg__symbol { display: grid; grid-template-columns: repeat(2, 0.6rem); gap: 3px; flex: none; }
.einstieg__symbol i { width: 0.6rem; height: 0.6rem; background: var(--gruen); }
.einstieg__symbol i:nth-child(2) { background: var(--gelb); }
.einstieg__symbol--social i { border-radius: 50%; }
.einstieg__symbol--social i:nth-child(2) { background: var(--gruen); }
.einstieg__symbol--social i:nth-child(3) { background: var(--gelb); }
.einstieg__text { flex: 1; }
.einstieg__pfeil { color: var(--gruen); transition: transform 0.2s var(--weich); }
.einstieg:hover .einstieg__pfeil { transform: translateX(3px); }
.hero__oder { margin: 1rem 0 0; color: var(--gedaempft); }
.chips { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.85rem 0.35rem 0.7rem;
  border: 1px solid var(--linie); border-radius: 999px;
  background: var(--flaeche);
  font-size: 0.9rem; color: var(--text);
}
.chips li::before { content: ""; width: 0.45rem; height: 0.45rem; background: var(--gelb); flex: none; }
.hero__bild { justify-self: center; width: min(100%, 22rem); }
@media (max-width: 55.99rem) {
  .hero__bild { order: -1; justify-self: start; width: 4.5rem; margin-bottom: -1rem; }
  .chips li { font-size: 0.85rem; }
  .hero .knoepfe .knopf { flex: 1 1 14rem; }
}

/* Das Pixel-„k“: Die 7 Pixel fliegen zusammen, dann zündet der Funke (einmalig, ca. 1,4 s) */
.pixel-k { width: 100%; overflow: visible; filter: drop-shadow(0 30px 40px rgb(14 107 98 / 0.28)); }
.pixel-k__grund { fill: #0E6B62; }
.pixel-k .px { fill: #fff; transform-box: fill-box; transform-origin: center; }
.pixel-k .funke { fill: #E8A91C; transform-box: fill-box; transform-origin: center; }
.pixel-k .funke-schein { fill: #F0BB3E; opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .js .pixel-k__grund { animation: k-grund 0.6s var(--weich) both; transform-box: fill-box; transform-origin: center; }
  .js .pixel-k .px { animation: k-einfliegen 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.15) both; animation-delay: calc(80ms + var(--i) * 55ms); }
  .js .pixel-k .funke { animation: k-funke 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 0.95s both; }
  .js .pixel-k .funke-schein { animation: k-schein 0.7s ease-out 1.05s both; }
}
@keyframes k-grund { from { opacity: 0; transform: scale(0.92); } }
@keyframes k-einfliegen {
  from { opacity: 0; transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px)) rotate(var(--r)) scale(0.5); }
  60% { opacity: 1; }
}
@keyframes k-funke { from { opacity: 0; transform: scale(0); } }
@keyframes k-schein { 0% { opacity: 0; transform: scale(0.3); } 35% { opacity: 0.55; } 100% { opacity: 0; transform: scale(1.6); } }

/* ---------- Kurzer Check & Vorher/Nachher ---------- */
/* Kurzer Check: zwei gleich große Spalten (Website | Social Media), darunter der Vorher/Nachher-Vergleich */
.kurzcheck { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 4rem); }
.kurzcheck .vergleich { width: 100%; max-width: 38rem; justify-self: center; }
.kopf__cta { gap: 0; }
.anzeichen-spalten { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .anzeichen-spalten { grid-template-columns: 1fr 1fr; gap: 2rem 3rem; } }
.anzeichen-spalte { padding: 1.5rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.anzeichen__titel {
  display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1.25rem; padding-bottom: 0.9rem;
  border-bottom: 1px dashed var(--linie); font-size: 1.25rem;
}
.anzeichen__titel::before { content: ""; width: 0.6rem; height: 0.6rem; background: var(--gelb); flex: none; }
.anzeichen { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; counter-reset: anzeichen; }
.anzeichen li { counter-increment: anzeichen; }
.anzeichen h4 { font-size: 1.05rem; margin-bottom: 0.25rem; display: flex; gap: 0.6rem; align-items: baseline; }
.anzeichen h4::before { content: "0" counter(anzeichen); font-family: var(--mono); font-size: 0.8rem; font-weight: 500; color: var(--gruen); }
.anzeichen p { color: var(--gedaempft); margin: 0; font-size: 0.98rem; }
.schlusssatz { margin: 1.75rem 0 0; font-weight: 600; }

.vergleich { margin: 0; }
.vergleich__buehne {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3.4;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  box-shadow: var(--schatten);
  container-type: inline-size;
  user-select: none; -webkit-user-select: none;
  touch-action: pan-y;
  background: #fff;
}
@media (min-width: 36rem) { .vergleich__buehne { aspect-ratio: 16 / 11; } }
.js .vergleich__buehne { cursor: ew-resize; }
.mini { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: 3.4cqi; }
.mini--neu { clip-path: inset(0 0 0 var(--pos)); }
.mini__leiste {
  display: flex; align-items: center; gap: 0.6em; flex: none;
  padding: 0.55em 0.9em; font: 500 0.8em/1.2 var(--mono);
  white-space: nowrap; overflow: hidden;
}
.mini__seite { flex: 1; overflow: hidden; }

/* Alt: absichtlich veraltet */
.mini--alt { background: #D4D0C8; color: #000; font-family: "Times New Roman", Times, serif; }
.mini--alt .mini__leiste { background: #ECE9D8; border-bottom: 2px solid #808080; color: #333; }
.mini__warnung { color: #B00020; font-weight: 700; }
.mini__warnung::before { content: "⚠ "; }
.mini--alt .mini__seite { padding: 0.8em; background: repeating-linear-gradient(45deg, #E8E4DA 0 6px, #DED9CC 6px 12px); }
.alt__laufschrift { margin: 0 0 0.6em; color: #C00000; font-weight: 700; text-align: center; font-size: 0.95em; background: #FFFF99; border: 1px dashed #C00000; padding: 0.2em; white-space: nowrap; overflow: hidden; }
.alt__spalten { display: grid; grid-template-columns: 30% 1fr; gap: 0.8em; }
.alt__menue { list-style: square; margin: 0; padding: 0.4em 0.4em 0.4em 1.4em; background: #000080; color: #FFFF00; font-size: 0.85em; text-decoration: underline; }
.alt__menue li { margin-bottom: 0.3em; }
.alt__titel { font-size: 1.6em; color: #000080; font-style: italic; margin: 0 0 0.2em; text-shadow: 2px 2px 0 #9999FF; }
.mini--alt p { margin: 0 0 0.5em; font-size: 0.82em; line-height: 1.25; }
.alt__bau { background: repeating-linear-gradient(-45deg, #FFD700 0 8px, #222 8px 16px); color: #fff; font-weight: 700; text-align: center; padding: 0.25em; text-shadow: 1px 1px 0 #000; }
.alt__klein { font-size: 0.6em !important; color: #555; }
.alt__zaehler span { font-family: "Courier New", monospace; background: #000; color: #39FF14; padding: 0 0.3em; letter-spacing: 0.15em; }

/* Neu: dieselbe Seite, modern */
.mini--neu { background: #FBFAF7; color: #1D1B18; font-family: var(--schrift); }
.mini--neu .mini__leiste { background: #F0EEE9; color: #4A4640; }
.mini__schloss { width: 0.7em; height: 0.8em; border-radius: 2px; background: #1F7A4D; position: relative; }
.mini__schloss::before { content: ""; position: absolute; left: 0.12em; right: 0.12em; bottom: 0.55em; height: 0.45em; border: 0.12em solid #1F7A4D; border-bottom: 0; border-radius: 0.3em 0.3em 0 0; }
.mini--neu .mini__seite { padding: 1em 1.4em; display: flex; flex-direction: column; }
.neu__kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.4em; }
.neu__logo { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; font-size: 0.95em; }
.neu__logo i { width: 0.9em; height: 0.9em; background: #B5562B; border-radius: 0.2em; }
.neu__knopf { background: #1D1B18; color: #fff; border-radius: 999px; padding: 0.35em 0.9em; font-size: 0.75em; font-weight: 600; }
.neu__titel { font-family: var(--titel); font-weight: 700; font-size: 2.3em; letter-spacing: -0.03em; line-height: 1; margin: 0 0 0.3em; }
.neu__satz { font-size: 0.95em; color: #5A554D; margin: 0 0 0.9em; }
.neu__chips { display: flex; flex-wrap: wrap; gap: 0.4em; margin-bottom: auto; }
.neu__chips span { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.75em; font-weight: 600; border: 1px solid #DDD8CF; border-radius: 999px; padding: 0.25em 0.75em; background: #fff; }
.neu__chips i { width: 0.5em; height: 0.5em; border-radius: 50%; background: #1F9D55; }
.neu__chips span:last-child { background: #B5562B; border-color: #B5562B; color: #fff; }
.neu__karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; margin-top: 1em; }
.neu__karten span { background: #fff; border: 1px solid #E6E1D8; border-radius: 0.5em; padding: 0.5em 0.6em; font-size: 0.75em; color: #5A554D; }
.neu__karten b { display: block; color: #1D1B18; font-size: 1.1em; }

.vergleich__griff {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; pointer-events: none;
}
.vergleich__griff::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--gelb); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.15); }
.vergleich__griff span {
  position: absolute; top: 50%; left: 0; width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem;
  border-radius: 999px; background: var(--gelb); box-shadow: 0 6px 18px rgb(0 0 0 / 0.3);
  display: grid; place-items: center;
}
.vergleich__griff span::before { content: "‹ ›"; font: 700 1.1rem/1 var(--schrift); color: var(--auf-gelb); letter-spacing: 0.15em; margin-left: 0.15em; }
.vergleich.ist-fokussiert .vergleich__griff span { outline: 3px solid var(--text); outline-offset: 3px; }
.vergleich__marke {
  position: absolute; bottom: 0.75rem; padding: 0.2rem 0.6rem; border-radius: 999px;
  font: 500 0.72rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.06em;
  background: rgb(0 0 0 / 0.72); color: #fff; pointer-events: none;
}
.vergleich__marke--alt { left: 0.75rem; }
.vergleich__marke--neu { right: 0.75rem; }
.vergleich__regler { margin-top: 1rem; }
.vergleich__regler label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.vergleich__regler input { width: 100%; accent-color: var(--gruen); height: 1.75rem; cursor: pointer; }
.vergleich figcaption { margin-top: 0.75rem; font-size: 0.88rem; color: var(--gedaempft); }
@media (prefers-reduced-motion: no-preference) {
  .vergleich.ist-hinweis .mini--neu, .vergleich.ist-hinweis .vergleich__griff { transition: clip-path 0.9s var(--weich), left 0.9s var(--weich); }
}

/* ---------- Pakete & Reiter ---------- */
.reiter__leiste { margin-bottom: 2rem; }
.reiter__liste {
  list-style: none; margin: 0; padding: 0.3rem;
  display: inline-flex; gap: 0.25rem; max-width: 100%;
  background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 999px;
  position: relative;
}
.reiter__tab {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 0.55rem 1.25rem; border-radius: 999px;
  color: var(--text); text-decoration: none; font-weight: 600; line-height: 1.2;
  transition: color 0.25s;
}
.reiter__tab span { font: 500 0.72rem/1.3 var(--mono); color: var(--gedaempft); transition: color 0.25s; }
.reiter__tab:hover { color: var(--gruen); }
.reiter__tab[aria-selected="true"] { color: var(--auf-gruen); }
.reiter__tab[aria-selected="true"] span { color: var(--auf-gruen); opacity: 0.85; }
/* Wandernde Markierung unter dem aktiven Reiter (Position setzt das Script) */
.reiter__marke {
  position: absolute; z-index: 0; top: 0.3rem; bottom: 0.3rem; left: 0;
  border-radius: 999px; background: var(--gruen);
  transition: transform 0.4s var(--weich), width 0.4s var(--weich);
}
/* Ohne JS: Reiter-Leiste dient als Sprungnavigation, Panels stehen untereinander */
.reiter__panel + .reiter__panel { margin-top: clamp(3rem, 7vw, 4.5rem); }
.panel__kopf { max-width: 40rem; margin-bottom: 1.5rem; }
.panel__kopf h3 { font-size: 1.5rem; margin-bottom: 0.3rem; }
.panel__kopf p { color: var(--gedaempft); margin: 0; }
.panel__fuss, .panel__demo { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.panel__demo { color: var(--gedaempft); gap: 0.4rem; }
/* Demo der Kunden-App: gut sichtbarer Hinweis im Reiter Apps und auf der Kunden-App-Seite */
.demo-hinweis {
  margin-top: 1.75rem; padding: 1.25rem 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--gruen) 45%, var(--linie)); border-radius: var(--radius);
  background: color-mix(in srgb, var(--gruen) 8%, var(--flaeche));
}
.demo-hinweis > div { flex: 1 1 18rem; }
.demo-hinweis p { margin: 0; color: var(--gedaempft); }
.demo-hinweis .demo-hinweis__titel { font: 700 1.15rem var(--titel); color: var(--text); margin-bottom: 0.2rem; }
.demo-hinweis__pixel { display: grid; grid-template-columns: repeat(2, 0.7rem); gap: 3px; flex: none; }
.demo-hinweis__pixel i { width: 0.7rem; height: 0.7rem; background: var(--gruen); }
.demo-hinweis__pixel i:nth-child(4) { background: var(--gelb); }

/* Mit JS: Panels liegen nebeneinander und lassen sich wischen */
.js .reiter__leiste { display: flex; justify-content: flex-start; }
@media (max-width: 51.99rem) {
  .js .reiter__leiste {
    position: sticky; top: var(--kopf-hoehe); z-index: 5;
    margin-inline: calc(var(--rand) * -1); padding: 0.5rem var(--rand);
    background: var(--grund); border-bottom: 1px solid transparent;
  }
  .reiter__liste { display: flex; width: 100%; }
  .reiter__liste li { flex: 1; }
  .reiter__tab { padding-inline: 0.35rem; font-size: 0.9rem; text-align: center; }
  .reiter__tab span { font-size: 0.66rem; }
  .reiter__mon { display: none; }
  /* Sprung zu einer Karte: Platz für die klebende Reiter-Leiste unter dem Kopf */
  .js .reiter__panel :is(.paket, .kombi-vorteil) { scroll-margin-top: 5.5rem; }
}
.js .reiter__buehne {
  position: relative;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin-inline: calc(var(--rand) * -1);
  align-items: flex-start;
  transition: height 0.4s var(--weich);
}
.js .reiter__buehne::-webkit-scrollbar { display: none; }
.js .reiter__panel {
  position: relative;
  flex: 0 0 100%; min-width: 0;
  padding-inline: var(--rand); padding-bottom: 1rem;
  scroll-snap-align: start; scroll-snap-stop: always;
}
.js .reiter__panel + .reiter__panel { margin-top: 0; }

.pakete { display: grid; gap: 1.25rem; padding-top: 0.75rem; }
@media (min-width: 52rem) { .pakete { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.paket {
  --gx: 50%; --gy: 0%;
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius);
  transition: transform 0.35s var(--weich), box-shadow 0.35s, border-color 0.35s;
}
/* Glühen, das dem Mauszeiger folgt */
.paket::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(18rem circle at var(--gx) var(--gy), var(--schein), transparent 65%);
  opacity: 0; transition: opacity 0.35s;
}
.paket:hover { box-shadow: var(--schatten); border-color: color-mix(in srgb, var(--gruen) 45%, var(--linie)); }
.paket:hover::before { opacity: 1; }
.paket--hervor { border-color: color-mix(in srgb, var(--gruen) 55%, var(--linie)); }
.paket__badge {
  position: absolute; top: -0.75rem; left: 1.5rem;
  padding: 0.2rem 0.7rem; border-radius: 999px;
  background: var(--gelb); color: var(--auf-gelb);
  font: 500 0.72rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.06em;
}
.paket__name { margin-bottom: 0.35rem; }
.paket__fuer { color: var(--gedaempft); font-size: 0.97rem; margin-bottom: 1rem; }
.paket__preis {
  font: 500 1.75rem/1.1 var(--mono); letter-spacing: -0.03em; margin: 0 0 1.25rem;
  padding-bottom: 1.25rem; border-bottom: 1px dashed var(--linie);
}
.paket__preis small { font: 400 0.85rem var(--schrift); letter-spacing: 0; color: var(--gedaempft); }
.paket .haken { font-size: 0.97rem; margin-bottom: 1.25rem; }
.paket__ehrlich { font-size: 0.92rem; color: var(--gedaempft); font-style: italic; }
.paket__fuss { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }

/* „Beliebt“: animierter Rand */
@property --winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.paket--beliebt {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--flaeche), var(--flaeche)) padding-box,
    conic-gradient(from var(--winkel), var(--gruen) 0deg, var(--gelb) 60deg, var(--gruen) 140deg, var(--gruen) 360deg) border-box;
}
@media (prefers-reduced-motion: no-preference) {
  .paket--beliebt { animation: rand-drehen 6s linear infinite; }
}
@keyframes rand-drehen { to { --winkel: 360deg; } }

/* ---------- Paket-Helfer ---------- */
.finder {
  margin-bottom: 2rem; border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche); overflow: hidden;
}
.finder__start {
  width: 100%; display: flex; align-items: center; gap: 1rem; text-align: left;
  padding: 1rem 1.25rem; background: none; border: 0; color: var(--text); cursor: pointer;
  font: inherit;
}
.finder__start:hover { background: var(--flaeche-2); }
.finder__start strong { font-family: var(--titel); font-size: 1.15rem; }
.finder__sub { color: var(--gedaempft); font-size: 0.92rem; display: block; }
@media (min-width: 36rem) { .finder__sub { display: inline; margin-left: 0.5rem; } }
.finder__pixel { display: grid; grid-template-columns: repeat(2, 0.55rem); gap: 3px; flex: none; }
.finder__pixel i { width: 0.55rem; height: 0.55rem; background: var(--gruen); }
.finder__pixel i:nth-child(2) { background: var(--gelb); }
.finder__pfeil { margin-left: auto; width: 0.7rem; height: 0.7rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform 0.3s var(--weich); flex: none; }
.finder__start[aria-expanded="true"] .finder__pfeil { transform: rotate(-135deg) translateY(-3px); }
.finder__inhalt { padding: 0.5rem 1.25rem 1.25rem; border-top: 1px solid var(--linie); }
.finder__frage { border: 0; margin: 0; padding: 0.75rem 0 0; }
.finder__frage legend { font-weight: 600; font-size: 1.1rem; margin-bottom: 0.75rem; padding: 0; }
.finder__nr { display: block; font: 500 0.75rem/1.4 var(--mono); color: var(--gedaempft); text-transform: uppercase; letter-spacing: 0.06em; }
.finder__frage label {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; margin-bottom: 0.5rem;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  cursor: pointer; transition: border-color 0.2s, background-color 0.2s, transform 0.2s var(--weich);
}
@media (min-width: 48rem) {
  .finder__frage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .finder__frage legend { grid-column: 1 / -1; }
  .finder__frage label { margin: 0; }
}
.finder__frage label:hover { border-color: var(--gruen); background: var(--flaeche-2); }
.finder__frage label:has(input:checked) { border-color: var(--gruen); background: var(--flaeche-2); }
.finder__frage input { accent-color: var(--gruen); width: 1.1rem; height: 1.1rem; flex: none; margin: 0; }
.finder__ergebnis { padding: 1rem 0 0.25rem; outline: none; }
.finder__ergebnis h4 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.finder__ergebnis .finder__preis { font-family: var(--mono); color: var(--gruen); margin-bottom: 0.5rem; }
.finder__ergebnis p { margin-bottom: 0.75rem; }
.finder__ergebnis .finder__laufend { font-size: 0.92rem; color: var(--gedaempft); }
.finder__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.75rem; }
.finder__zurueck { background: none; border: 0; padding: 0.4rem 0; color: var(--gruen); font: 600 0.95rem var(--schrift); cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; }
.finder__hinweis { margin: 0 0 0 auto; font-size: 0.82rem; color: var(--gedaempft); }
@media (prefers-reduced-motion: no-preference) {
  .finder__frage:not([hidden]), .finder__ergebnis:not([hidden]) { animation: hereinschieben 0.35s var(--weich); }
}
@keyframes hereinschieben { from { opacity: 0; transform: translateX(1rem); } }
/* Kurzes Aufleuchten der empfohlenen Karte */
.ist-empfohlen { box-shadow: 0 0 0 3px var(--gelb), var(--schatten); border-radius: var(--radius-klein); }
.paket.ist-empfohlen { border-radius: var(--radius); }

/* ---------- Social Media & Kombi-Vorteil ---------- */
/* Plattformen nur als Text, keine fremden Logos */
.plattformen { list-style: none; margin: -0.25rem 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.plattformen li {
  font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem; border-radius: 999px;
  background: var(--flaeche-2); color: var(--text); border: 1px solid var(--linie);
}
.einmalig { margin-top: 2.5rem; }
.einmalig__titel, .extras__gruppe {
  font: 500 0.78rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gedaempft); margin: 0 0 0.25rem;
}
.extras__gruppe + .extras__liste, .einmalig__titel + .extras__liste { border-top: 1px solid var(--linie); }
.extras__liste + .extras__gruppe { margin-top: 2rem; }
.paket__preis:has(+ .paket__laufend) { margin-bottom: 0.5rem; padding-bottom: 0; border-bottom: 0; }
.paket__laufend {
  font-size: 0.9rem; color: var(--gedaempft); margin: 0 0 1.25rem; padding-bottom: 1.25rem;
  border-bottom: 1px dashed var(--linie);
}

/* Kombi-Vorteil: Website und Social Media zusammen (einmalig und monatlich getrennt) */
.kombi-vorteil {
  margin-top: 2rem; padding: 1.5rem; display: grid; gap: 1rem 2.5rem;
  border: 1px dashed color-mix(in srgb, var(--gelb) 70%, var(--linie)); border-radius: var(--radius);
  background: color-mix(in srgb, var(--gelb) 9%, var(--flaeche));
}
.kombi-vorteil__marke { font: 500 0.75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gedaempft); margin: 0 0 0.25rem; }
.kombi-vorteil__kopf :is(h2, h4) { font-size: 1.3rem; margin: 0 0 0.35rem; }
.kombi-vorteil__kopf p:last-child { margin: 0; color: var(--gedaempft); }
.kombi-vorteil__liste { margin: 0; display: grid; gap: 0.75rem; }
.kombi-vorteil__liste div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--linie); }
.kombi-vorteil__liste dt { font: 500 0.78rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--gedaempft); }
.kombi-vorteil__liste dd { margin: 0; }
.kombi-vorteil__fuss { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.kombi-vorteil__fuss small { color: var(--gedaempft); }
@media (max-width: 30rem) { .kombi-vorteil__liste div { grid-template-columns: 1fr; gap: 0.2rem; } }
@media (min-width: 56rem) {
  .kombi-vorteil { grid-template-columns: 1fr 1.4fr; padding: 1.75rem 2rem; }
  .kombi-vorteil__fuss { grid-column: 1 / -1; }
}

/* Laufende Betreuung direkt beim Website-Preis (Hosting & Wartung, erstes Jahr) */
.paket__laufend a { color: inherit; }

/* Premium-Paket „Werbekonzept“: breite Karte unter den Monatspaketen */
.paket--premium {
  margin-top: 2rem; border: 2px solid var(--gruen);
  background: linear-gradient(140deg, color-mix(in srgb, var(--gruen) 9%, var(--flaeche)), var(--flaeche) 55%);
}
.paket--premium .paket__badge { background: var(--gruen); color: var(--auf-gruen); }
.premium__kopf { display: grid; gap: 0 2rem; align-items: end; }
.premium__kopf .paket__preis { margin-bottom: 1.25rem; }
.premium__inhalt { display: grid; gap: 0.5rem 2rem; }
.premium__inhalt :is(h4, h5) { font: 500 0.75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gedaempft); margin: 0 0 0.5rem; }
.premium__inhalt .haken { margin-bottom: 1.25rem; }
.premium__ohne { font-size: 0.95rem; color: var(--gedaempft); margin: 0 0 1.25rem; }
@media (min-width: 52rem) {
  .paket--premium { padding: 2rem 2.25rem 1.75rem; }
  .premium__kopf { grid-template-columns: 1.4fr 1fr; }
  .premium__inhalt { grid-template-columns: 1fr 1fr; }
}

/* ---------- Extras ---------- */
.extras { margin-top: clamp(3.5rem, 8vw, 5rem); }
.extras__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin-bottom: 1rem; }
.extras__kopf h3 { font-size: 1.5rem; margin: 0; }
.extras__kopf p { margin: 0; color: var(--gedaempft); }
.extras__liste { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 3rem; }
@media (min-width: 56rem) { .extras__liste { grid-template-columns: 1fr 1fr; } }
.extras__liste li {
  display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem;
  padding: 0.9rem 0; border-bottom: 1px solid var(--linie);
}
.extra__name { font-weight: 600; }
.extra__preis { font-family: var(--mono); font-weight: 500; white-space: nowrap; color: var(--gruen); grid-row: 1; grid-column: 2; }
.extra__preis small { display: block; font: 400 0.78rem/1.3 var(--schrift); color: var(--gedaempft); text-align: right; }
.extra__text { grid-column: 1 / -1; font-size: 0.92rem; color: var(--gedaempft); }
.steuerhinweis {
  margin: 2.5rem 0 0; padding: 1rem 1.25rem;
  border-left: 4px solid var(--gelb); background: var(--flaeche-2); border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  font-weight: 600;
}

/* ---------- Ablauf als Zeitleiste ---------- */
.ablauf { display: grid; gap: 2rem; }
@media (min-width: 56rem) {
  .ablauf { grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start; }
  .ablauf__kopf { position: sticky; top: calc(var(--kopf-hoehe) + 2rem); }
}
.zeitleiste { list-style: none; margin: 0; padding: 0; position: relative; }
.zeitleiste::before, .zeitleiste::after {
  content: ""; position: absolute; left: 1.2rem; top: 1.25rem; bottom: 1.25rem; width: 2px; margin-left: -1px;
  background: var(--linie);
}
.zeitleiste::after { background: var(--gruen); transform-origin: top; transform: scaleY(var(--fortschritt)); }
.schritt { position: relative; padding: 0 0 2.5rem 3.75rem; }
.schritt:last-child { padding-bottom: 0; }
.schritt__punkt {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border-radius: 8px; border: 2px solid var(--gruen);
  background: var(--gruen); color: var(--auf-gruen);
  font: 500 1rem var(--mono);
  transition: background-color 0.4s, color 0.4s, transform 0.4s var(--weich), border-color 0.4s;
}
.schritt h3 { padding-top: 0.35rem; margin-bottom: 0.35rem; }
.schritt p { color: var(--gedaempft); margin: 0; }
.js .zeitleiste.ist-aktiv .schritt:not(.ist-erreicht) .schritt__punkt { background: var(--flaeche); color: var(--gedaempft); border-color: var(--linie); transform: scale(0.9); }
.schritt:last-child .schritt__punkt { box-shadow: 0.55rem -0.55rem 0 -0.3rem var(--gelb); }

/* ---------- Über mich ---------- */
.ueber { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 56rem) { .ueber { grid-template-columns: 1fr 1.1fr; } }
@media (max-width: 55.99rem) { .ueber__text { order: -1; } }
.ueber__grafik {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: calc(var(--radius) + 6px);
  padding: clamp(1.25rem, 4vw, 2rem); box-shadow: var(--schatten);
}
.berg { width: 100%; margin-bottom: 1.5rem; }
.berg__saeule { fill: var(--gruen); transform-box: fill-box; transform-origin: bottom; }
.berg__gipfel { fill: color-mix(in srgb, var(--gruen) 40%, var(--flaeche)); }
.berg__drau { fill: color-mix(in srgb, var(--gruen) 30%, var(--flaeche)); }
.berg__sonne { fill: var(--gelb); transform-box: fill-box; transform-origin: center; }
.berg__fuge { fill: none; stroke: var(--flaeche); stroke-width: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .js .ueber__grafik:not(.ist-sichtbar) .berg__saeule, .js .ueber__grafik:not(.ist-sichtbar) .berg__gipfel { transform: scaleY(0); }
  .js .ueber__grafik:not(.ist-sichtbar) .berg__sonne { transform: scale(0); }
  .js .berg__saeule { transition: transform 0.6s var(--weich); transition-delay: calc(200ms + var(--i) * 30ms); }
  .js .berg__gipfel { transition: transform 0.5s var(--weich) 0.9s; transform-box: fill-box; transform-origin: bottom; }
  .js .berg__sonne { transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 1.1s; }
}
.steckbrief { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius-klein); overflow: hidden; }
.steckbrief div { background: var(--flaeche); padding: 0.75rem 1rem; }
.steckbrief dt { font: 500 0.72rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--gedaempft); }
.steckbrief dd { margin: 0; font-weight: 600; }
.ueber__text p:not(.kicker) { font-size: 1.08rem; }

/* ---------- Referenzen ---------- */
.referenzen { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56rem) { .referenzen { grid-template-columns: 1fr 1.2fr; gap: 4rem; } }
.referenzen h2 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); }
.referenzen p { color: var(--gedaempft); margin: 0; }
.platzhalter { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.platzhalter li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center;
  padding: 0.9rem 1rem; border: 1px dashed var(--linie); border-radius: var(--radius-klein);
  color: var(--gedaempft); font-size: 0.92rem;
}
.platzhalter strong { color: var(--text); display: block; font-size: 1rem; }
.platzhalter--beispiel { position: relative; border-style: solid !important; border-color: var(--gruen) !important; background: var(--flaeche); }
.platzhalter--beispiel a { text-decoration: none; color: inherit; }
.platzhalter--beispiel a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.platzhalter--beispiel a strong { color: var(--gruen-stark); text-decoration: underline; text-underline-offset: .2em; }
.platzhalter--beispiel a:hover strong { text-decoration-thickness: 2px; }
.platzhalter--beispiel a:focus-visible { outline: none; }
.platzhalter--beispiel:has(a:focus-visible) { outline: 2px solid var(--gruen); outline-offset: 3px; }
.platzhalter__pixel { grid-row: span 2; width: 2.5rem; height: 2.5rem; border-radius: 6px; background:
  linear-gradient(var(--gruen) 0 0) 0 0 / 33% 33% no-repeat,
  linear-gradient(var(--gelb) 0 0) 100% 0 / 33% 33% no-repeat,
  linear-gradient(var(--linie) 0 0) 50% 50% / 33% 33% no-repeat,
  linear-gradient(var(--linie) 0 0) 0 100% / 33% 33% no-repeat,
  var(--flaeche-2); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .faq { grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: start; } }
.fragen { border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1.15rem 3rem 1.15rem 0;
  font-weight: 600; font-size: 1.1rem;
  transition: color 0.2s;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary:hover { color: var(--gruen); }
.fragen summary::before, .fragen summary::after {
  content: ""; position: absolute; right: 0.6rem; top: 50%; width: 14px; height: 2px; margin-top: -1px;
  background: var(--gruen); transition: transform 0.3s var(--weich);
}
.fragen summary::after { transform: rotate(90deg); }
.fragen details[open] summary::after { transform: rotate(0deg); }
.antwort { padding: 0 3rem 1.25rem 0; color: var(--gedaempft); }
.antwort p:last-child { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .fragen details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.35s var(--weich), content-visibility 0.35s allow-discrete; }
  .fragen details[open]::details-content { block-size: auto; }
  @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
}

/* ---------- Kontakt ---------- */
.kontakt { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .kontakt { grid-template-columns: 1.6fr 1fr; gap: 3rem; align-items: start; } }
.formular {
  display: grid; gap: 1.1rem 1.25rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius);
}
@media (min-width: 40rem) { .formular { grid-template-columns: 1fr 1fr; } }
.feld--breit, .check, .formular__meldung, .formular__fuss { grid-column: 1 / -1; }
.feld label { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.95rem; }
.optional { font-weight: 400; color: var(--gedaempft); }
.feld input, .feld select, .feld textarea {
  width: 100%; padding: 0.75rem 0.9rem;
  font: inherit; font-size: 1rem; color: var(--text);
  background: var(--flaeche); border: 1.5px solid var(--linie); border-radius: var(--radius-klein);
  transition: border-color 0.2s, box-shadow 0.25s var(--weich);
}
.feld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gedaempft) 50%), linear-gradient(135deg, var(--gedaempft) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.8rem) 50%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; padding-right: 2.25rem; }
.feld textarea { resize: vertical; min-height: 8rem; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: color-mix(in srgb, var(--gruen) 50%, var(--linie)); }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--gruen); box-shadow: 0 0 0 4px var(--schein); }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--gelb); outline-offset: 1px; }
.feld input[aria-invalid="true"], .feld select[aria-invalid="true"] { border-color: #C2410C; }
.feld__hilfe { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--gedaempft); }
.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.check { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.95rem; cursor: pointer; }
.check input { accent-color: var(--gruen); width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; flex: none; }
.formular__meldung { margin: 0; min-height: 0; font-weight: 600; color: var(--gruen); }
.formular__meldung:empty { display: none; }
.formular__meldung.fehler { color: #B42318; }
:root[data-thema="dunkel"] .formular__meldung.fehler { color: #FF8A7A; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) .formular__meldung.fehler { color: #FF8A7A; } }
.formular__meldung.ist-erfolg {
  position: relative; padding: 1rem 1rem 1rem 3.25rem; border-radius: var(--radius-klein);
  background: var(--flaeche-2); color: var(--text);
}
.formular__meldung a { color: inherit; }
.formular__fuss { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; }
.formular__fuss small { color: var(--gedaempft); }
.lader { display: none; gap: 3px; }
.lader i { width: 6px; height: 6px; background: currentColor; }
.knopf.laedt .lader { display: inline-flex; }
@media (prefers-reduced-motion: no-preference) {
  .lader i { animation: lader 0.9s infinite ease-in-out both; }
  .lader i:nth-child(2) { animation-delay: 0.15s; }
  .lader i:nth-child(3) { animation-delay: 0.3s; }
}
@keyframes lader { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.7); } 40% { opacity: 1; transform: none; } }

/* Erfolg: kleine Funken-Explosion */
.funken { position: absolute; left: 1.6rem; top: 50%; width: 0; height: 0; }
.funken::before { content: ""; position: absolute; width: 0.9rem; height: 0.9rem; margin: -0.45rem; background: var(--gelb); }
.funken i { position: absolute; width: 0.4rem; height: 0.4rem; margin: -0.2rem; background: var(--gelb); opacity: 0; }
.funken i:nth-child(even) { background: var(--gruen); }
@media (prefers-reduced-motion: no-preference) {
  .funken::before { animation: k-funke 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
  .funken i { animation: funke-fliegen 0.8s var(--weich) 0.1s both; }
}
@keyframes funke-fliegen {
  0% { opacity: 1; transform: rotate(var(--w)) translateX(0.3rem) scale(1); }
  100% { opacity: 0; transform: rotate(var(--w)) translateX(2.2rem) scale(0.4); }
}

.direkt { display: grid; gap: 1rem; }
.direkt__karte { padding: 1.25rem 1.5rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--grund); }
.direkt__karte h3 { font: 500 0.75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--gedaempft); margin-bottom: 0.35rem; }
.direkt__karte p { margin: 0.25rem 0 0; color: var(--gedaempft); font-size: 0.95rem; }
.direkt__wert { font-family: var(--titel); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.6rem); letter-spacing: -0.02em; text-decoration: none; overflow-wrap: anywhere; }
.direkt__karte--telefon { background: var(--gruen); border-color: var(--gruen); }
.direkt__karte--telefon h3, .direkt__karte--telefon p, .direkt__karte--telefon .direkt__wert { color: var(--auf-gruen); }
.direkt__karte--telefon p { opacity: 0.9; }
.direkt__kopieren { user-select: all; -webkit-user-select: all; font-family: var(--mono); font-size: 0.9em; }

/* ---------- Anrufen-Knopf (nur am Handy) ---------- */
.anruf-knopf {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 90;
  width: 3.5rem; height: 3.5rem; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--gelb); color: var(--auf-gelb);
  box-shadow: 0 10px 28px -8px rgb(0 0 0 / 0.45);
  transition: transform 0.3s var(--weich), opacity 0.3s;
}
.anruf-knopf svg { fill: currentColor; }
.anruf-knopf:hover { color: var(--auf-gelb); transform: scale(1.06); }
.anruf-knopf.ist-weg { transform: translateY(150%); opacity: 0; pointer-events: none; }
@media (min-width: 48rem) { .anruf-knopf { display: none; } }

/* ---------- Fuß ---------- */
.fuss { background: var(--fuss); color: var(--fuss-text); padding-block: 4rem 2rem; font-size: 0.95rem; }
@media (max-width: 47.99rem) { .fuss { padding-bottom: 6rem; } }
.fuss a { color: #fff; text-decoration-color: rgb(255 255 255 / 0.4); }
.fuss a:hover { color: #F0BB3E; }
.fuss__raster { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) { .fuss__raster { grid-template-columns: 2fr 1fr 1fr; } }
.fuss__raster img { margin-bottom: 1rem; }
.fuss__raster p { margin-bottom: 0.4rem; }
.fuss h2 { font: 500 0.75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: #9DB5B0; margin-bottom: 1rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 0.45rem; }
.fuss .fuss__slogan { font: 700 1.15rem/1.3 var(--titel); color: #fff; margin: 1rem 0 0.25rem; }
.fuss__unten { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / 0.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; color: #A9BFBA; font-size: 0.85rem; }
.fuss__unten p { margin: 0; }

/* ---------- Paketseiten (Website, Apps, Betreuung) ---------- */
.paket-kopf { border-bottom: 1px solid var(--linie); }
.paket-kopf__raster { position: relative; display: grid; gap: 2rem; align-items: end; }
@media (min-width: 56rem) { .paket-kopf__raster { grid-template-columns: 1.5fr 1fr; gap: 4rem; } }
.paket-kopf h1 { margin-bottom: 0.25em; }
.paket-kopf__preis { font: 500 clamp(1.6rem, 4vw, 2.1rem)/1.2 var(--mono); letter-spacing: -0.02em; margin: 0 0 1.25rem; }
.paket-kopf__preis small { font: 400 1rem/1.4 var(--schrift); color: var(--gedaempft); letter-spacing: 0; }
.paket-kopf__preis:has(+ .paket-kopf__laufend) { margin-bottom: 0.4rem; }
.paket-kopf__laufend { color: var(--gedaempft); margin: 0 0 1.25rem; max-width: 38rem; }
.paket-kopf__fuer { font-size: 1.15rem; max-width: 38rem; margin: 0; }
.paket-kopf__fuer strong { display: block; font: 500 0.78rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gedaempft); margin-bottom: 0.35rem; }
.paket-kopf__box { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--schatten); }
.paket-kopf__box dl { margin: 0 0 1.25rem; display: grid; gap: 0.6rem; }
.paket-kopf__box dl div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--linie); padding-bottom: 0.6rem; }
.paket-kopf__box dt { color: var(--gedaempft); }
.paket-kopf__box dd { margin: 0; font-weight: 600; text-align: right; }
.paket-kopf__box .knoepfe { flex-direction: column; }
.paket-kopf__box .knopf { width: 100%; }
/* Inhaltsverzeichnis */
.sprung { position: relative; display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 2.5rem 0 0; }
.sprung a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.3rem 0.9rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); color: var(--text); font-size: 0.9rem; text-decoration: none; }
.sprung a:hover { border-color: var(--gruen); color: var(--gruen); }
/* Abschnitt mit Nummer links (am Desktop mitlaufend) */
.detail { display: grid; gap: 1.5rem; }
.detail > * { min-width: 0; }
@media (min-width: 56rem) {
  .detail { grid-template-columns: 16rem 1fr; gap: 4rem; }
  .detail > h2 { position: sticky; top: calc(var(--kopf-hoehe) + 2rem); align-self: start; }
}
.detail > h2 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin: 0; }
.detail > h2 .nr { display: block; font: 500 0.8rem/1 var(--mono); letter-spacing: 0.08em; color: var(--gruen); margin-bottom: 0.75rem; }
.detail__inhalt { max-width: 46rem; }
.detail__inhalt > :last-child { margin-bottom: 0; }
.leistungen { list-style: none; padding: 0; margin: 0; }
.leistungen li { display: grid; grid-template-columns: 0.6rem 1fr; gap: 0 1rem; padding: 1rem 0; border-bottom: 1px solid var(--linie); }
.leistungen li:first-child { padding-top: 0; }
.leistungen li::before { content: ""; width: 0.6rem; height: 0.6rem; background: var(--gruen); margin-top: 0.55rem; }
.leistungen strong { display: block; font-size: 1.05rem; }
.leistungen span { color: var(--gedaempft); }
.leistungen--minus li::before { background: transparent; border: 2px solid var(--gedaempft); }
.beispiel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--schatten); }
.abschnitt--flaeche .beispiel { background: var(--grund); box-shadow: none; }
.beispiel__marke { display: inline-block; background: var(--gelb); color: var(--auf-gelb); font: 500 0.72rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; padding: 0.4rem 0.6rem; border-radius: 4px; margin-bottom: 1rem; }
.beispiel p:last-child { margin-bottom: 0; }
.hinweis { background: color-mix(in srgb, var(--gruen) 9%, var(--flaeche)); border-left: 4px solid var(--gruen); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.25rem 1.4rem; margin: 0 0 2rem; }
.hinweis h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.hinweis p:last-child, .hinweis ul:last-child { margin-bottom: 0; }
.hinweis--gelb { background: color-mix(in srgb, var(--gelb) 16%, var(--flaeche)); border-left-color: var(--gelb); }
.zeitplan { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--linie); }
.zeitplan li { position: relative; padding: 0 0 1.4rem 1.5rem; }
.zeitplan li:last-child { padding-bottom: 0; }
.zeitplan li::before { content: ""; position: absolute; left: -7px; top: 0.35rem; width: 12px; height: 12px; background: var(--gruen); }
.zeitplan li:last-child::before { background: var(--gelb); }
.zeitplan__wann { display: block; font: 500 0.8rem/1.6 var(--mono); letter-spacing: 0.04em; color: var(--gruen); }
.zeitplan strong { display: block; }
.zeitplan span:not(.zeitplan__wann) { color: var(--gedaempft); }
.tabelle--vergleich table { min-width: 34rem; }
.tabelle--vergleich tbody th { font-weight: 400; width: 34%; }
.tabelle--vergleich thead a { color: inherit; }
.tabelle--vergleich .aktiv { background: var(--flaeche-2); }
.tabelle--vergleich thead .aktiv { box-shadow: inset 0 3px 0 var(--gruen); }
.tabelle--vergleich .preis { font-family: var(--mono); font-weight: 500; white-space: nowrap; }
.ja::before, .nein::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.45rem; vertical-align: 0.05em; background: var(--gruen); }
.nein { color: var(--gedaempft); }
.nein::before { background: transparent; border: 1.5px solid var(--gedaempft); }
.anfrage { display: grid; gap: 1.5rem; align-items: center; padding: clamp(1.75rem, 5vw, 3rem); border-radius: var(--radius); background: var(--gruen); color: var(--auf-gruen); position: relative; overflow: hidden; }
.anfrage::before { content: ""; position: absolute; right: 1.5rem; top: 1.5rem; width: 0.9rem; height: 0.9rem; background: var(--gelb); }
@media (min-width: 48rem) { .anfrage { grid-template-columns: 1fr auto; } }
.anfrage h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 0.3rem; }
.anfrage p { margin: 0; }
.weitere__titel { font-size: 1.5rem; }
.weitere { display: grid; gap: 0.75rem; list-style: none; padding: 0; margin: 0; }
@media (min-width: 40rem) { .weitere { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .weitere { grid-template-columns: repeat(3, 1fr); } }
.weitere a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--grund); color: var(--text); font-weight: 600; text-decoration: none; transition: border-color 0.2s, transform 0.2s var(--weich); }
.weitere a:hover { border-color: var(--gruen); color: var(--gruen); transform: translateY(-2px); }
.weitere .preis { font: 500 0.88rem/1.4 var(--mono); color: var(--gedaempft); white-space: nowrap; text-align: right; }
.weitere .preis small { display: block; font: 400 0.78rem/1.3 var(--schrift); text-align: right; white-space: normal; }
/* Betreuungs-Tarife */
.tarife { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .tarife { grid-template-columns: repeat(3, 1fr); } }
.tarife .karte { padding: 1.4rem 1.25rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--grund); }
.tarife .karte h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.karte__preis { font: 500 1.25rem/1.3 var(--mono); margin: 0 0 0.9rem; }
.karte__preis small { font: 400 0.9rem/1.4 var(--schrift); color: var(--gedaempft); }
.karte__preis:has(+ .karte__laufend) { margin-bottom: 0.3rem; }
.karte__laufend { font-size: 0.88rem; color: var(--gedaempft); margin: 0 0 0.9rem; }

/* ---------- Textseiten (Impressum, Datenschutz) und 404 ---------- */
.textseite { max-width: 46rem; }
.textseite h1 { font-size: clamp(2.2rem, 6vw, 3.5rem); }
.textseite h2 { font-size: 1.5rem; margin-top: 2.5rem; }
.textseite h3 { font-size: 1.15rem; margin-top: 1.75rem; }
.textseite ul { padding-left: 1.2rem; }
.textseite li { margin-bottom: 0.4rem; }
.textseite dl { margin: 0; }
.textseite dl div { display: grid; gap: 0.15rem 1.5rem; padding: 0.8rem 0; border-bottom: 1px solid var(--linie); }
@media (min-width: 40rem) { .textseite dl div { grid-template-columns: 14rem 1fr; } }
.textseite dt { color: var(--gedaempft); }
.textseite dd { margin: 0; }
.textseite__stand { color: var(--gedaempft); font-size: 0.92rem; }
.fehlerseite { padding-block: clamp(2rem, 8vw, 5rem); }
.fehlerseite .pixel-k { width: 7rem; margin-bottom: 2rem; }
.pixel-k .grund { fill: var(--gruen); }
.pixel-k .px { fill: #fff; }
.pixel-k .funke { fill: var(--gelb); }
.pixel-k .px, .pixel-k .funke { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .pixel-k .px { animation: kachel 0.45s var(--weich) backwards; animation-delay: calc(var(--i) * 60ms + 100ms); }
  .pixel-k .funke { animation: kachel 0.5s cubic-bezier(0.3, 1.8, 0.5, 1) backwards 0.6s; }
}

/* ---------- Demo Stempelkarte ---------- */
.demo-band { margin: 0; background: var(--gelb); color: var(--auf-gelb); font-size: 0.9rem; font-weight: 600; text-align: center; padding: 0.6rem var(--rand); }
.demo-band a { color: inherit; }
.demo-band a:hover { color: inherit; }
.demo { max-width: 26rem; margin: 0 auto; padding: 2rem var(--rand) 4rem; }
.demo__app { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 24px; overflow: hidden; box-shadow: var(--schatten); }
.demo__kopf { background: #6B3F2A; color: #FFF6EC; padding: 1.5rem 1.4rem 1.25rem; }
.demo__kopf p { margin: 0; opacity: 0.85; font-size: 0.9rem; }
.demo__kopf h1 { font-size: 1.6rem; margin: 0.15rem 0 0; letter-spacing: -0.01em; }
.demo__inhalt { padding: 1.4rem; }
.demo__zaehler { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.demo__zaehler strong { font: 500 1.4rem/1.2 var(--mono); white-space: nowrap; }
.stempel { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; }
.stempel li { aspect-ratio: 1; border: 2px dashed var(--linie); border-radius: 10px; display: grid; place-items: center; font: 500 0.8rem/1 var(--mono); color: var(--gedaempft); }
.stempel li.voll { border: 2px solid #6B3F2A; background: #6B3F2A; color: #FFF6EC; animation: stempeln 0.35s cubic-bezier(0.3, 1.6, 0.6, 1); }
.stempel li.voll svg { width: 60%; }
.stempel li:last-child:not(.voll) { border-color: var(--gelb); color: var(--text); }
@keyframes stempeln { from { transform: scale(1.6) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.demo__aktionen { display: grid; gap: 0.6rem; }
.demo__aktionen .knopf { width: 100%; }
.demo__belohnung { display: none; text-align: center; padding: 1.25rem; margin-bottom: 1.25rem; border-radius: 14px; background: var(--gelb); color: var(--auf-gelb); }
.demo__belohnung.sichtbar { display: block; animation: belohnung 0.6s cubic-bezier(0.3, 1.6, 0.6, 1); }
.demo__belohnung h2 { font-size: 1.4rem; margin: 0.6rem 0 0.25rem; }
.demo__belohnung p { margin: 0; }
.konfetti { display: flex; justify-content: center; gap: 6px; }
.konfetti i { width: 10px; height: 10px; background: currentColor; animation: hops 0.8s ease-in-out infinite alternate; }
.konfetti i:nth-child(2n) { animation-delay: 0.15s; }
.konfetti i:nth-child(3n) { animation-delay: 0.3s; }
@keyframes hops { to { transform: translateY(-8px); } }
@keyframes belohnung { from { transform: scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
.demo__qr { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; align-items: center; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); font-size: 0.9rem; color: var(--gedaempft); }
.demo__qr p { margin: 0; }
.demo__qr svg { width: 7rem; background: #fff; padding: 6px; border-radius: 8px; border: 1px solid var(--linie); }
.push { position: fixed; top: calc(var(--kopf-hoehe) + 0.75rem); left: 50%; z-index: 120; width: min(24rem, calc(100% - 1.5rem)); transform: translate(-50%, -200%); display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.75rem; align-items: center; padding: 0.8rem 1rem; background: color-mix(in srgb, var(--flaeche) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--text); border: 1px solid var(--linie); border-radius: 16px; box-shadow: var(--schatten); transition: transform 0.4s cubic-bezier(0.3, 1.3, 0.6, 1); }
.push.sichtbar { transform: translate(-50%, 0); }
.push__icon { width: 2.5rem; height: 2.5rem; border-radius: 9px; background: #6B3F2A; display: grid; place-items: center; color: #FFF6EC; font-family: var(--titel); font-weight: 700; }
.push p { margin: 0; font-size: 0.9rem; line-height: 1.35; }
.push small { color: var(--gedaempft); }
.demo__erklaerung { margin-top: 2rem; font-size: 0.95rem; color: var(--gedaempft); }
.demo__erklaerung h2 { font-size: 1.2rem; color: var(--text); }

/* ---------- Einblenden beim Scrollen (nur mit JS und ohne reduzierte Bewegung) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .zeige:not(.ist-sichtbar) { opacity: 0; transform: translateY(1.25rem); }
  .js .zeige { transition: opacity 0.7s var(--weich), transform 0.7s var(--weich); transition-delay: calc(var(--v, 0) * 80ms); }
  .js .zeige.paket { transition: opacity 0.7s var(--weich) calc(var(--v, 0) * 80ms), transform 0.35s var(--weich), box-shadow 0.35s, border-color 0.35s; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Druck ---------- */
@media print {
  .kopf, .anruf-knopf, .finder, .vergleich, .formular, .skip-link, .sprung, .push, .demo__aktionen { display: none !important; }
  body { padding: 0; background: #fff; color: #000; }
  .js .reiter__buehne { display: block; overflow: visible; height: auto !important; }
  .js .zeige { opacity: 1 !important; transform: none !important; }
}

/* ---------- Unterseite (z. B. Social Media) ---------- */
.seitenkopf { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem); position: relative; overflow: hidden; }
.seitenkopf__innen { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56rem) { .seitenkopf__innen { grid-template-columns: 1.4fr 1fr; gap: 4rem; } }
.seitenkopf h1 { font-size: clamp(2.2rem, 6vw, 3.75rem); }
.seitenkopf .hero__satz { margin-bottom: 1.75rem; }
.brotkrumen ol { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: 0.88rem; color: var(--gedaempft); }
.brotkrumen li + li::before { content: "/"; margin-right: 0.5rem; color: var(--linie); }
.feed { width: min(100%, 18rem); justify-self: center; }
.feed__rahmen { fill: var(--flaeche); stroke: var(--linie); stroke-width: 2; }
.feed__kachel { fill: var(--gruen); }
.feed__kachel--hell { fill: color-mix(in srgb, var(--gruen) 35%, var(--flaeche)); }
.feed__funke { fill: var(--gelb); }
.feed__linie { fill: var(--linie); }
.tabelle { position: relative; overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.tabelle table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.95rem; }
.tabelle caption { text-align: left; padding: 1rem 1.25rem 0; color: var(--gedaempft); font-size: 0.9rem; }
.tabelle th, .tabelle td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
.tabelle tbody tr:last-child > * { border-bottom: 0; }
.tabelle thead th { font-family: var(--titel); font-size: 1.05rem; }
.tabelle thead th small { display: block; font: 500 0.72rem/1.4 var(--mono); color: var(--gedaempft); text-transform: uppercase; letter-spacing: 0.06em; }
.tabelle tbody th { font-weight: 600; color: var(--gedaempft); width: 24%; }
.tabelle .tabelle__hervor { background: var(--flaeche-2); }
.mitbringen { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 48rem) { .mitbringen { grid-template-columns: 1fr 1fr; } }
.mitbringen li { padding: 1.25rem 1.5rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.mitbringen strong { display: block; margin-bottom: 0.25rem; }
.mitbringen span { color: var(--gedaempft); font-size: 0.97rem; }
.abschluss { text-align: center; }
.abschluss .kopfzeile { margin-inline: auto; }
.abschluss .knoepfe { justify-content: center; }
.feed__kachel { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .feed .feed__kachel[style] { animation: kachel 0.5s var(--weich) backwards; animation-delay: calc(var(--i) * 70ms + 150ms); }
}
@keyframes kachel { from { opacity: 0; transform: scale(0.6); } }