/* DX / Digital – Blaugrau, Orange und Creme. */


@font-face {
  font-family: "DM Sans";
  src: url(/fonts/dmsans.woff2) format("woff2-variations");
  font-weight: 100 1000;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  /* Farbpalette: Blaugrau, Orange und Creme */
  --grund: #f7f7f7;
  --flaeche: #f0ebe4;
  --karte: #ffffff;
  --tinte: #1c2532;
  --text: #384861;
  --leise: #5d6c7b;
  --linie: #dedbd6;
  --linie-stark: #c2c2c2;
  --gruen: #eb7636;
  --gruen-tief: #ab4616;
  --gruen-hauch: #f8eed8;
  --auf-dunkel: #f8eed8;
  --recht: #384861;

  --schrift: "DM Sans", "Segoe UI", Arial, sans-serif;
  --titel: "DM Sans", "Segoe UI", Arial, sans-serif;
  /* Schriftstärken: hier zentral anpassen */
  --gewicht-titel: 500;
  --gewicht-betont: 600;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--schrift);
}

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; }

h1, h2, h3 { color: var(--tinte); letter-spacing: -0.03em; }
b, strong { font-weight: var(--gewicht-betont); }
/* Zwischenüberschriften (Karten, Schritte, Zusagen): so leicht wie die großen Überschriften */
h3 { font-family: var(--titel); font-weight: var(--gewicht-titel); letter-spacing: -0.02em; }
/* Große Überschriften: DM Sans, leicht und ruhig */
h1, h2 { font-family: var(--titel); letter-spacing: -0.035em; }
h1 em, h2 em { font-style: normal; color: var(--gruen-tief); }

.rahmen { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 48rem) { .rahmen { padding: 0 2rem; } }

/* Kleine Pille über Überschriften */
.plakette {
  display: inline-block;
  max-width: 100%;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--linie-stark);
  border-radius: 99px;
  background: var(--karte);
  color: var(--tinte);
  font-size: 0.8rem;
  font-weight: var(--gewicht-betont);
  line-height: 1.4;
}
.plakette::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 0.5rem; border-radius: 50%; background: var(--gruen); vertical-align: 0.12em; }

/* Pillen-Buttons */
.pille {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.35rem;
  border-radius: 99px;
  background: var(--gruen);
  color: #fff;
  font-size: 0.95rem;
  font-weight: var(--gewicht-betont);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.pille:hover { background: var(--gruen-tief); }
.pille.leer { background: transparent; color: var(--tinte); border: 1px solid var(--linie-stark); }
.pille.leer:hover { border-color: var(--tinte); }
.pille svg { width: 1em; height: 1em; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 20; background: rgba(247, 247, 247, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); }
.kopf .rahmen { display: flex; justify-content: space-between; align-items: center; gap: 1rem; height: 4.25rem; transition: height 0.25s ease; }
.kopf { transition: box-shadow 0.25s ease, background 0.25s ease; }
.kopf.gescrollt { background: rgba(247, 247, 247, 0.96); box-shadow: 0 8px 24px -18px rgba(28, 37, 50, 0.45); }
.kopf.gescrollt .rahmen { height: 3.6rem; }
html { scroll-padding-top: 4.5rem; }
.marke { color: var(--tinte); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.035em; text-decoration: none; }
.wortmarke span { color: var(--gruen-tief); }
.marke { display: inline-flex; align-items: center; gap: 0.5rem; }
.marke .logo { flex: none; width: 1.75rem; height: 1.75rem; color: var(--gruen-tief); }
/* Handy: Kopfzeile kompakt, Button bleibt einzeilig */
@media (max-width: 35.99rem) {
  .kopf .marke { font-size: 1.15rem; gap: 0.4rem; }
  .kopf .marke .logo { width: 1.5rem; height: 1.5rem; }
  .kopf .pille { padding: 0.45rem 0.85rem; font-size: 0.82rem; white-space: nowrap; }
  .kopf .pille svg { display: none; }
}
.kopf nav { display: flex; align-items: center; gap: 1.75rem; font-size: 0.93rem; }
.kopf nav a:not(.pille) { color: var(--text); text-decoration: none; }
.kopf nav a:not(.pille):hover { color: var(--tinte); }
.kopf .pille { padding: 0.5rem 1rem; font-size: 0.88rem; }
.menue-links { display: flex; align-items: center; gap: 1.75rem; }
.menue-links a { position: relative; padding: 0.3rem 0; }
.menue-links a.aktiv { color: var(--tinte); }
.menue-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.1rem; height: 2px; border-radius: 2px; background: var(--gruen); transform: scaleX(0); transition: transform 0.25s ease; }
.menue-links a.aktiv::after { transform: scaleX(1); }
.menue-knopf { display: none; }
@media (max-width: 63.99rem) {
  .menue-links { display: none; }
  .js .menue-knopf { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; padding: 0; border: 1px solid var(--linie-stark); border-radius: 50%; background: transparent; cursor: pointer; }
  .menue-knopf span, .menue-knopf span::before, .menue-knopf span::after { display: block; width: 1rem; height: 2px; border-radius: 2px; background: var(--tinte); transition: transform 0.2s ease, opacity 0.2s ease; }
  .menue-knopf span { position: relative; }
  .menue-knopf span::before, .menue-knopf span::after { content: ""; position: absolute; left: 0; }
  .menue-knopf span::before { top: -5px; }
  .menue-knopf span::after { top: 5px; }
  .kopf.offen .menue-knopf span { background: transparent; }
  .kopf.offen .menue-knopf span::before { transform: translateY(5px) rotate(45deg); }
  .kopf.offen .menue-knopf span::after { transform: translateY(-5px) rotate(-45deg); }
  .menue-knopf:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }
  .kopf.offen .menue-links { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0.25rem 1rem 1rem; background: var(--grund); border-bottom: 1px solid var(--linie); box-shadow: 0 18px 30px -22px rgba(28, 37, 50, 0.5); }
  .kopf.offen .menue-links a { padding: 0.85rem 0; border-top: 1px solid var(--linie); color: var(--tinte); font-size: 1.05rem; }
  .kopf.offen .menue-links a:first-child { border-top: 0; }
  .kopf.offen .menue-links a::after { display: none; }
  .kopf.offen .menue-links a.aktiv { color: var(--gruen-tief); font-weight: var(--gewicht-betont); }
}
.kopf .anruf { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 1px solid var(--linie-stark); border-radius: 50%; color: var(--gruen-tief); }
.kopf .anruf svg { width: 1.1rem; height: 1.1rem; }
.kopf .anruf[hidden] { display: none; }
/* Sehr schmale Handys (unter 375 px): Logo, Knopf und Menü passen nebeneinander, ab 375 px bleibt alles wie gehabt */
@media (max-width: 23.4rem) {
  .kopf .rahmen, .kopf nav { gap: 0.5rem; }
  .kopf .marke { font-size: 1.05rem; }
  .kopf .pille { padding: 0.45rem 0.75rem; font-size: 0.8rem; }
}
.kopf .pille .kurz { display: none; }
/* Mit Anruf-Knopf in der Kopfzeile: auf Handys „Anfragen“ statt „Vorschau anfragen“, damit das Menü nicht abgeschnitten wird */
@media (max-width: 30rem) { .kopf .pille .lang { display: none; } .kopf .pille .kurz { display: inline; } }
@media (max-width: 63.99rem) { .kopf nav { gap: 0.5rem; } }

/* 1 · Einstieg */
/* Leichtes Leuchten hinter dem Einstieg: grüner Schimmer hinter dem Vorher/Nachher, zart oben links */
.einstieg { position: relative; overflow: hidden; isolation: isolate; }
.einstieg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(38rem 26rem at 78% 42%, rgba(235, 118, 54, 0.16), transparent 70%),
    radial-gradient(30rem 20rem at 92% 8%, rgba(248, 238, 216, 0.22), transparent 70%),
    radial-gradient(28rem 18rem at 4% 0%, rgba(248, 238, 216, 0.16), transparent 70%);
}
@media (max-width: 59.99rem) {
  .einstieg::before {
    background:
      radial-gradient(24rem 20rem at 70% 78%, rgba(235, 118, 54, 0.14), transparent 70%),
      radial-gradient(22rem 16rem at 0% 0%, rgba(248, 238, 216, 0.18), transparent 70%);
  }
}
.einstieg .rahmen { display: grid; gap: 3rem; align-items: center; padding-top: 4rem; padding-bottom: 5rem; }
@media (min-width: 60rem) { .einstieg .rahmen { grid-template-columns: 1.1fr 1fr; padding-top: 6.5rem; padding-bottom: 7rem; } }
.einstieg h1 { margin: 1.25rem 0 1.25rem; font-size: clamp(2.3rem, 5vw, 3.5rem); line-height: 1.03; font-weight: var(--gewicht-titel); }
.einstieg h1 em { display: block; }
.einstieg p { max-width: 32rem; margin: 0 0 2rem; font-size: 1.12rem; }
.einstieg .schmerz { margin: 1.4rem 0 0; color: var(--tinte); font-size: clamp(1.1rem, 2.2vw, 1.3rem); font-weight: var(--gewicht-betont); }
.einstieg .schmerz + h1 { margin-top: 0.5rem; }
.aktionen { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Admin-Vorschau: das eine Element, das über der Seite schwebt */
.fenster { border: 1px solid var(--linie-stark); border-radius: 16px; background: var(--karte); box-shadow: 0 34px 70px -36px rgba(28, 37, 50, 0.35); overflow: hidden; font-size: 0.88rem; }
.leiste { display: flex; align-items: center; gap: 6px; padding: 0.7rem 0.9rem; background: #f6f5f3; border-bottom: 1px solid var(--linie); color: var(--leise); font-size: 0.76rem; }
.leiste i { width: 9px; height: 9px; border-radius: 50%; background: #d6d2cb; }
.leiste b { margin-left: 0.6rem; font-weight: var(--gewicht-betont); }
.leiste small { margin-left: auto; padding: 0.1rem 0.55rem; border: 1px solid var(--linie-stark); border-radius: 99px; background: var(--karte); font-size: 0.68rem; }
.fenster-inhalt { padding: 1.1rem; }
.fenster-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.9rem; }
.fenster-kopf strong { color: var(--tinte); font-size: 1rem; }
.fenster-kopf span { color: var(--leise); font-size: 0.78rem; }
.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 0.9rem; }
.kennzahlen div { padding: 0.7rem; border: 1px solid var(--linie); border-radius: 10px; }
.kennzahlen span { display: block; color: var(--leise); font-size: 0.72rem; }
.kennzahlen b { color: var(--tinte); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.eintrag { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.65rem 0.75rem; border: 1px solid var(--linie); border-radius: 10px; margin-top: 0.5rem; color: var(--tinte); }
.eintrag div { line-height: 1.35; }
.eintrag small { display: block; color: var(--leise); font-size: 0.74rem; }
.marker { flex: none; padding: 0.15rem 0.55rem; border-radius: 99px; background: var(--gruen-hauch); color: var(--gruen-tief); font-size: 0.7rem; font-weight: var(--gewicht-betont); }
.marker.ruhig { background: var(--flaeche); color: var(--leise); }

/* Vorher / Nachher im Einstieg: Schieberegler */
.vergleich { margin: 0; }
.vergleich figcaption { margin-top: 0.8rem; font-size: 0.82rem; color: var(--leise); text-align: center; }
/* Seitenverhältnis wie das Vorschau-Foto, damit nichts beschnitten wird und das Logo mittig bleibt */
.buehne { position: relative; aspect-ratio: 1200 / 820; overflow: hidden; border-radius: 0 0 16px 16px; }
@media (max-width: 36rem) { .buehne { aspect-ratio: 920 / 836; } }
@media (min-width: 36.01rem) and (max-width: 59.99rem) { .vergleich { width: 100%; max-width: 34rem; margin-inline: auto; } }
.ebene { position: absolute; inset: 0; }
/* Ebenen-Reihenfolge: neue Seite unten, alte Seite darüber, Griff und Etiketten ganz oben */
.ebene.neu { z-index: 0; }
.ebene.alt { z-index: 1; }
.griff { z-index: 2; }
.regler { z-index: 3; }

/* Neue Seite (rechts, liegt unten) */
.ebene.neu { background: #f4ede4; }
.ebene.neu picture { display: block; height: 100%; }
.ebene.neu img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }


/* Alte Seite (links, liegt oben und wird am Regler abgeschnitten) */
.ebene.alt { display: flex; flex-direction: column; background: #fff; font: 10px/1.45 Arial, Helvetica, sans-serif; color: #777; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.alt-oben { padding: 3px 12px; background: #3a3a3a; color: #bbb; font-size: 9px; white-space: nowrap; }
.alt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-bottom: 3px solid #b0306a; white-space: nowrap; }
.alt-marke { color: #b0306a; font: italic 19px/1 "Brush Script MT", "Segoe Script", cursive; letter-spacing: 0; }
.alt-marke small { display: block; margin-top: 2px; color: #999; font: 8.5px/1.2 Arial, Helvetica, sans-serif; }
.alt-menue { color: #555; font-size: 8.5px; font-weight: bold; }
.alt-slider { position: relative; display: flex; align-items: center; justify-content: space-between; height: 92px; padding: 0 8px; background: #8a7d82 url("/bilder/friseur.webp") center 40% / cover; background-blend-mode: luminosity; }
.alt-slider b { color: #fff; font-size: 15px; font-weight: normal; line-height: 1.2; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.alt-pfeil { color: rgba(255, 255, 255, 0.92); font-size: 22px; line-height: 1; }
.alt-punkte { position: absolute; left: 50%; bottom: 6px; display: flex; gap: 4px; transform: translateX(-50%); }
.alt-punkte i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); }
.alt-punkte i:first-child { background: #fff; }
.alt-inhalt { display: grid; grid-template-columns: 1fr 30%; gap: 12px; padding: 10px 12px; }
.alt-inhalt b { display: block; margin-bottom: 3px; color: #b0306a; font-size: 12px; font-weight: normal; }
.alt-seite { padding: 6px 8px; background: #f2f2f2; border-left: 3px solid #b0306a; }
.alt-seite b { font-size: 10.5px; }
.alt-cookie { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px 2.6rem; background: rgba(34, 34, 34, 0.92); color: #ddd; font-size: 9.5px; }
.alt-cookie span { display: inline-block; margin-left: 4px; padding: 1px 8px; background: #b0306a; color: #fff; }
@media (max-width: 36rem) {
  .alt-menue { display: none; }
  .alt-inhalt { grid-template-columns: 1fr; }
  .alt-seite { display: none; }
}

/* Griff und unsichtbarer Regler darüber */
.griff { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; pointer-events: none; }
.griff::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(28, 37, 50, 0.2); }
.griff span { position: absolute; top: 50%; left: 0; width: 2.6rem; height: 2.6rem; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 6px 18px -4px rgba(28, 37, 50, 0.45); }
.griff span::before, .griff span::after { content: ""; position: absolute; top: 50%; width: 0.45rem; height: 0.45rem; border: solid var(--gruen); border-width: 0 0 2px 2px; }
.griff span::before { left: 0.65rem; transform: translateY(-50%) rotate(45deg); }
.griff span::after { right: 0.65rem; transform: translateY(-50%) rotate(-135deg); }
.regler { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.buehne:has(.regler:focus-visible) .griff span { outline: 3px solid var(--gruen); outline-offset: 2px; }
.etikett-vorher, .etikett-neu { position: absolute; bottom: 0.6rem; z-index: 2; padding: 0.2rem 0.7rem; border-radius: 99px; font-size: 0.72rem; font-weight: var(--gewicht-betont); pointer-events: none; }
.etikett-vorher { left: 0.7rem; background: #fff; border: 1px solid var(--linie-stark); color: var(--leise); }
.etikett-neu { right: 0.7rem; background: #fff; color: var(--gruen-tief); }
@media (max-width: 36rem) {
  .plakette .lang { display: none; }
}

/* Fakten-Band */
.fakten { background: var(--tinte); color: var(--auf-dunkel); }
.fakten .rahmen { display: grid; gap: 0; padding-top: 1rem; padding-bottom: 1rem; }
@media (min-width: 48rem) { .fakten .rahmen { grid-template-columns: repeat(2, 1fr); row-gap: 1.75rem; padding-top: 2.5rem; padding-bottom: 2.5rem; } }
.fakten .rahmen > div { display: grid; grid-template-columns: 7.2rem 1fr; align-items: center; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid rgba(216, 230, 224, 0.14); }
.fakten .rahmen > div:last-child { border-bottom: 0; }
@media (min-width: 48rem) {
  .fakten .rahmen > div { grid-template-columns: 1fr; align-items: start; align-content: start; gap: 0.35rem; padding: 0 2rem; border-bottom: 0; border-left: 1px solid rgba(216, 230, 224, 0.18); }
  .fakten .rahmen > div:first-child { padding-left: 0; border-left: 0; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) { .fakten .rahmen > div:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (min-width: 64rem) { .fakten .rahmen { grid-template-columns: repeat(4, 1fr); } }
.fakten b { color: #f8eed8; font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: var(--gewicht-betont); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.fakten span { font-size: 0.98rem; line-height: 1.4; }

/* Handy: Fakten als 2 x 2, Zahl über dem Text */
@media (max-width: 47.99rem) {
  .fakten .rahmen { grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; padding-top: 1.75rem; padding-bottom: 1.75rem; }
  .fakten .rahmen > div { grid-template-columns: 1fr; align-items: start; align-content: start; gap: 0.3rem; padding: 0; border: 0; }
  .fakten b { font-size: 1.9rem; }
  .fakten span { font-size: 0.84rem; }
}

/* Selbsttest */
.test-raster { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 60rem) { .test-raster { grid-template-columns: 1fr 1.35fr; gap: 4rem; } }
.test { padding: 0.5rem 1.5rem 1.5rem; border: 1px solid var(--linie-stark); border-radius: 18px; background: var(--karte); }
.frage { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 1.5rem; margin: 0; padding: 1.1rem 0; border: 0; border-bottom: 1px solid var(--linie); }
.frage legend { float: left; display: flex; gap: 0.75rem; max-width: 30rem; padding: 0; color: var(--tinte); font-weight: var(--gewicht-betont); line-height: 1.45; }
.frage legend span { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--gruen-hauch); color: var(--gruen-tief); font-size: 0.8rem; font-weight: var(--gewicht-betont); }
.wahl { display: flex; gap: 0.4rem; margin-left: 2.35rem; }
@media (min-width: 36rem) { .wahl { margin-left: auto; } }
.wahl label { position: relative; min-width: 4.2rem; padding: 0.5rem 0.9rem; border: 1px solid var(--linie-stark); border-radius: 99px; text-align: center; font-size: 0.9rem; font-weight: var(--gewicht-betont); color: var(--tinte); cursor: pointer; }
.wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahl label:has(input:checked) { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.wahl label:has(input[value="ja"]:checked) { background: var(--gruen); border-color: var(--gruen-tief); }
.wahl label:has(input:focus-visible) { outline: 2px solid var(--gruen); outline-offset: 2px; }
.test-stand { margin: 1rem 0 0; font-size: 0.85rem; color: var(--leise); }
.test-ergebnis { margin-top: 1.25rem; padding: 1.5rem; border-radius: 14px; background: var(--flaeche); }
.test-ergebnis[hidden] { display: none; }
.punkte { display: flex; gap: 0.35rem; margin-bottom: 1rem; }
.punkte i { flex: 1; height: 0.45rem; border-radius: 99px; background: var(--linie-stark); }
.punkte i.an { background: var(--gruen); }
.test-ergebnis h3 { margin: 0 0 0.4rem; font-size: 1.2rem; line-height: 1.3; }
.test-ergebnis .urteil { margin: 0 0 0.8rem; }
.maengel { margin: 0 0 1.25rem; padding: 0; list-style: none; }
.maengel:empty { display: none; }
.maengel li { position: relative; padding: 0.3rem 0 0.3rem 1.4rem; color: var(--tinte); }
.maengel li::before { content: ""; position: absolute; left: 0.2rem; top: 0.95rem; width: 0.55rem; height: 2px; background: #a13a1c; }

/* Handy: Ablauf als Zeitleiste (Nummer-Kreise mit Verbindungslinie), Szenen nur am Computer */
@media (max-width: 47.99rem) {
  .ablauf { gap: 0; }
  .ablauf li { position: relative; display: grid; grid-template-columns: 2.4rem 1fr; column-gap: 0.9rem; padding-bottom: 1.6rem; }
  .ablauf li:last-child { padding-bottom: 0; }
  ol.ablauf li::before { content: counter(schritt); grid-row: span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin: 0; border-radius: 50%; background: var(--gruen); color: #fff; font-size: 1rem; letter-spacing: 0; text-transform: none; }
  ol.ablauf li:not(:last-child)::after { content: ""; position: absolute; left: 1.15rem; top: 2.6rem; bottom: 0.2rem; width: 2px; background: var(--linie-stark); }
  .ablauf .szene { display: none; }
  .ablauf h3 { margin: 0.45rem 0 0.3rem; font-size: 1.15rem; }
  .ablauf p { font-size: 0.95rem; }
}

/* Gezeichnete Szenen im Ablauf */
.szene { position: relative; display: grid; align-content: center; gap: 0.5rem; height: 8.5rem; margin-bottom: 1.25rem; padding: 0.9rem; border-radius: 14px; background: var(--flaeche); font-size: 0.75rem; overflow: hidden; }
.sz-anruf { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: #fff; box-shadow: 0 6px 16px -10px rgba(28, 37, 50, 0.4); }
.sz-anruf b { display: block; color: var(--tinte); }
.sz-anruf small { color: var(--leise); }
.sz-punkt { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E") center / 55% no-repeat; }
.sz-blase { justify-self: end; max-width: 85%; padding: 0.45rem 0.65rem; border-radius: 10px 10px 2px 10px; background: var(--tinte); color: var(--auf-dunkel); line-height: 1.35; }
.sz-browser { width: 82%; border-radius: 8px; background: #fff; box-shadow: 0 6px 16px -10px rgba(28, 37, 50, 0.4); overflow: hidden; }
.sz-leiste { display: flex; gap: 3px; padding: 0.3rem 0.4rem; background: #f6f5f3; }
.sz-leiste i { width: 5px; height: 5px; border-radius: 50%; background: #d6d2cb; }
.sz-held { height: 2.6rem; background: linear-gradient(135deg, #1c2532, #eb7636); }
.sz-zeilen { display: grid; gap: 0.3rem; padding: 0.45rem; }
.sz-zeilen i { height: 0.35rem; border-radius: 99px; background: var(--linie); }
.sz-zeilen i:last-child { width: 60%; }
.sz-uhr { position: absolute; right: 0.8rem; bottom: 0.8rem; padding: 0.3rem 0.6rem; border-radius: 99px; background: var(--gruen); color: #fff; font-weight: var(--gewicht-betont); }
.sz-kalender { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem; text-align: center; color: var(--leise); }
.sz-kalender i { height: 1.5rem; border-radius: 6px; background: #fff; font-style: normal; font-size: 0.65rem; line-height: 1.5rem; }
.sz-kalender i.an { background: var(--gruen); color: #fff; font-weight: var(--gewicht-betont); }
.sz-termin { padding: 0.4rem 0.6rem; border-radius: 8px; background: #fff; color: var(--tinte); font-weight: var(--gewicht-betont); }
.sz-adresse { display: flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.7rem; border-radius: 99px; background: #fff; color: var(--tinte); font-weight: var(--gewicht-betont); }
.sz-adresse small { margin-left: auto; color: var(--gruen-tief); font-weight: var(--gewicht-betont); }
.sz-live { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #eb7636; box-shadow: 0 0 0 3px #eb763633; }
.sz-wahl { display: flex; gap: 0.35rem; }
.sz-wahl span { flex: 1; padding: 0.4rem; border: 1px solid var(--linie-stark); border-radius: 99px; background: #fff; text-align: center; color: var(--leise); }
.sz-wahl .ja { background: var(--gruen); border-color: var(--gruen-tief); color: #fff; font-weight: var(--gewicht-betont); }

/* Szenen auf mintgrünem Abschnitt: Kasten weiß, Inhalte mintgrün, damit nichts verschwimmt */
.flaeche .szene { background: var(--karte); border: 1px solid var(--linie); }
.flaeche .szene :is(.sz-anruf, .sz-browser, .sz-termin, .sz-adresse, .sz-kalender i:not(.an), .sz-wahl span:not(.ja)) { background: var(--flaeche); }
.flaeche .szene .sz-leiste { background: #f0ebe4; }

/* Mini-Vorschauen auf den Branchen-Karten */
.mini { display: grid; align-content: center; gap: 0.45rem; height: 6.5rem; margin: -0.4rem -0.4rem 1rem; padding: 0.75rem; border-radius: 12px; background: var(--flaeche); font-size: 0.72rem; color: var(--tinte); overflow: hidden; }
.mini b { font-size: 0.78rem; }
.mini small { color: var(--leise); }
.m-knopf { justify-self: start; padding: 0.3rem 0.65rem; border-radius: 99px; background: var(--gruen); color: #fff; font-weight: var(--gewicht-betont); }
.m-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; }
.m-slots i { padding: 0.3rem 0; border-radius: 6px; background: #fff; font-style: normal; text-align: center; }
.m-slots i.an { background: var(--gruen); color: #fff; font-weight: var(--gewicht-betont); }
.m-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; }
.m-fotos i { height: 2.4rem; border-radius: 6px; background: linear-gradient(135deg, #d6d2cb, #b9b2a8); }
.m-fotos i:nth-child(2) { background: linear-gradient(135deg, #eb7636, #eb7636); }
.m-projekt { display: flex; gap: 0.5rem; align-items: center; }
.m-projekt i { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 6px; background: repeating-linear-gradient(0deg, #b9b2a8 0 4px, #d6d2cb 4px 8px); }
.m-projekt b, .m-projekt small { display: block; }
.m-fortschritt { height: 0.4rem; border-radius: 99px; background: #fff; }
.m-fortschritt i { display: block; width: 68%; height: 100%; border-radius: 99px; background: var(--gruen); }
.m-team { display: flex; }
.m-team i { width: 1.7rem; height: 1.7rem; margin-right: -0.4rem; border: 2px solid var(--flaeche); border-radius: 50%; background: #b9b2a8; }
.m-team i:nth-child(2) { background: #eb7636; }
.m-team i:nth-child(3) { background: #d6d2cb; }
.m-liste { display: grid; gap: 0.25rem; }
.m-liste span { display: flex; justify-content: space-between; padding: 0.3rem 0.5rem; border-radius: 6px; background: #fff; }
.m-liste span::after { content: "›"; color: var(--gruen-tief); font-weight: var(--gewicht-betont); }
.m-auto { background: var(--tinte); color: #f8eed8; }
.m-auto svg { width: 100%; height: 2.6rem; }
.m-auto b { color: var(--auf-dunkel); }
.m-kanzlei { grid-template-columns: auto 1fr; align-items: center; column-gap: 0.7rem; }
.m-par { grid-row: span 2; color: var(--gruen-tief); font-size: 2.2rem; font-weight: 300; line-height: 1; }
.m-zeilen { display: grid; gap: 0.3rem; }
.m-zeilen i { height: 0.35rem; border-radius: 99px; background: #d6d2cb; }
.m-zeilen i:nth-child(2) { width: 80%; }
.m-zeilen i:nth-child(3) { width: 55%; }

/* Branchen-Symbole auf den Beispiel-Karten */
.symbol { display: grid; place-items: center; height: 6.5rem; margin: -0.4rem -0.4rem 1rem; border-radius: 12px; background: var(--flaeche); color: var(--gruen-tief); }
.symbol svg { width: 3.6rem; height: 3.6rem; }
.beispiele article:hover .symbol { background: var(--gruen-hauch); }

/* Branchen-Fotos und Vorteile auf den Beispiel-Karten */
.beispiele .foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; margin: 0 0 1rem; object-fit: cover; border-radius: 12px; background: var(--flaeche); }
.beispiele article:hover .foto { filter: brightness(1.04); }
.vorteile { margin: 0 0 1rem; padding: 0; list-style: none; }
.vorteile li { position: relative; padding: 0.15rem 0 0.15rem 1.35rem; font-size: 0.86rem; line-height: 1.4; color: var(--tinte); }
.vorteile li::before { content: ""; position: absolute; left: 0.1rem; top: 0.55rem; width: 0.6rem; height: 0.32rem; border-left: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen); transform: rotate(-45deg); }
.beispiele .funktion { margin-bottom: 0.6rem; }
/* Kartentexte immer einzeilig */
.beispiele .funktion, .vorteile li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beispiele .ihre .funktion { white-space: normal; overflow: visible; }

/* Einblenden beim Scrollen (nur wenn das Skript die Klasse setzt) */
.einblenden { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.einblenden.sichtbar { opacity: 1; transform: none; }

/* Handy: Bausteine gekürzt */
.mehr-bausteine { display: none; font: inherit; font-weight: var(--gewicht-betont); cursor: pointer; }
@media (max-width: 35.99rem) {
  .js .bausteine:not(.offen) div:nth-child(n+5) { display: none; }
  .js .mehr-bausteine { display: inline-flex; margin-top: 1rem; }
  .js .bausteine.offen + .mehr-bausteine { display: none; }
}

/* Handlungsaufruf am Ende eines Abschnitts */
.cta-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--linie); }
.cta-zeile span { font-size: 0.92rem; color: var(--leise); }
/* Folgt der Aufruf auf eine Liste, die schon mit einer Linie endet: keine zweite Linie */
.bausteine ~ .cta-zeile, .zusagen-raster + .cta-zeile { border-top: 0; padding-top: 0; }

/* Anfrage Schritt für Schritt */
.formular fieldset { display: grid; gap: 1rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.formular legend { margin-bottom: 1rem; padding: 0; color: var(--tinte); font-family: var(--titel); font-size: 1.15rem; font-weight: var(--gewicht-titel); }
.form-kopf, .form-balken { display: none; }
.schrittweise-form .form-kopf { display: flex; justify-content: space-between; align-items: center; min-height: 1.8rem; }
.schrittweise-form .form-balken { display: block; height: 0.3rem; margin: 0.2rem 0 0.6rem; border-radius: 99px; background: var(--linie); overflow: hidden; }
.form-zaehler { margin-left: auto; font-size: 0.85rem; color: var(--leise); }
.schrittweise-form .form-schritt { display: none; }
.schrittweise-form .form-schritt.aktiv { display: grid; animation: frage-rein 0.25s ease; }
.form-aktionen { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.form-aktionen [hidden] { display: none; }
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.kacheln label { position: relative; display: block; padding: 0.75rem 0.85rem; border: 1px solid var(--linie-stark); border-radius: 12px; background: var(--grund); font-size: 0.92rem; font-weight: 400; line-height: 1.3; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.kacheln label:hover { border-color: var(--gruen-tief); }
.kacheln input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.kacheln label:has(input:checked) { border-color: var(--gruen-tief); background: var(--gruen-hauch); color: var(--gruen-tief); }
.kacheln label:has(input:focus-visible) { outline: 2px solid var(--gruen); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .schrittweise-form .form-schritt.aktiv { animation: none; } }

/* Verwaltungsbereich: Text links, Mitmach-Demo rechts */
.verwaltung { display: grid; gap: 2rem; align-items: center; margin-bottom: 4rem; }
@media (min-width: 52rem) { .verwaltung { grid-template-columns: 1fr 1.15fr; gap: 4rem; } }
.verwaltung h3 { margin: 0 0 0.8rem; font-size: clamp(1.35rem, 2.6vw, 1.6rem); line-height: 1.25; }
.verwaltung h3 .gruen { color: var(--gruen-tief); }
.verwaltung p { margin: 0; max-width: 30rem; }
.verwaltung .leise { margin: 1.5rem 0 0; font-size: 0.9rem; color: var(--leise); }
/* Drei Schritte als eine ruhige Zeile: 1 Einloggen, 2 Ändern, 3 Speichern */
.drei-schritte { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; max-width: 30rem; margin: 1.75rem 0 0; padding: 1.1rem 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); list-style: none; counter-reset: s; }
.drei-schritte li { counter-increment: s; display: flex; align-items: center; gap: 0.5rem; color: var(--tinte); font-weight: var(--gewicht-betont); }
.drei-schritte li::before { content: counter(s); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--gruen-hauch); color: var(--gruen-tief); font-size: 0.8rem; }
.drei-schritte li:not(:last-child)::after { content: "→"; margin-left: 0.4rem; color: var(--leise); font-weight: 400; }
@media (max-width: 35.99rem) {
  .drei-schritte { gap: 0.4rem 0.45rem; margin-top: 1.25rem; font-size: 0.9rem; }
  .drei-schritte li { gap: 0.35rem; }
  .drei-schritte li:not(:last-child)::after { margin-left: 0.1rem; }
  .verwaltung .leise { display: none; }
  .verwaltung { gap: 1.5rem; margin-bottom: 2.5rem; }
}
.demo { display: grid; gap: 0.9rem; }
.demo-hinweis { margin: 0 !important; font-size: 0.9rem; font-weight: var(--gewicht-betont); color: var(--gruen-tief); }
.demo-zeile { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--linie); color: var(--tinte); font-size: 0.92rem; }
.zeitfelder { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--leise); }
.demo-zeile input.zeit { width: 4.4rem; text-align: center; }
.demo-status.fehler { color: #a13a1c; }
.demo-zeile input { width: 9.5rem; padding: 0.45rem 0.6rem; border: 2px solid var(--gruen); border-radius: 8px; background: #fff; font: inherit; color: var(--tinte); text-align: right; }
.demo-zeile input:focus { outline: 3px solid var(--gruen-hauch); }
.demo-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: 0.9rem; }
.demo-aktion .pille { padding: 0.5rem 1.1rem; border: 0; font: inherit; font-weight: var(--gewicht-betont); cursor: pointer; }
.demo-status { font-size: 0.85rem; color: var(--gruen-tief); }
.demo-verwaltung .fenster-kopf { flex-wrap: wrap; gap: 0.2rem 1rem; }
.demo-seite .fenster-inhalt strong { display: block; margin-bottom: 0.3rem; font-family: var(--titel); font-weight: var(--gewicht-titel); }
.demo-seite.blitz { animation: blitz 1.2s ease; }
@keyframes blitz { 0% { box-shadow: 0 0 0 0 rgba(235, 118, 54, 0.55); } 100% { box-shadow: 0 0 0 14px rgba(235, 118, 54, 0); } }
@media (prefers-reduced-motion: reduce) { .demo-seite.blitz { animation: none; } }

/* Gefunden werden (Local SEO in Alltagssprache) */
.gefunden { display: grid; gap: 2rem; margin-bottom: 4rem; padding: 2rem; border: 1px solid var(--linie-stark); border-radius: 18px; background: var(--karte); }
@media (min-width: 60rem) { .gefunden { grid-template-columns: 1fr 1.3fr; gap: 3rem; padding: 2.5rem; } }
.gefunden h3 { margin: 0 0 0.75rem; font-size: 1.5rem; line-height: 1.2; }
.gefunden-text p { margin: 0 0 1rem; }
.gefunden .ehrlich { margin: 0; padding: 0.9rem 1rem; border-left: 3px solid var(--gruen); border-radius: 0 10px 10px 0; background: var(--flaeche); font-size: 0.92rem; }
.gefunden-punkte { display: grid; gap: 1.25rem; }
.gefunden-punkte { grid-template-columns: 1fr 1fr; }
@media (max-width: 35.99rem) { .gefunden { padding: 1.4rem; } .gefunden-punkte { gap: 1rem 0.9rem; } .gefunden-punkte h3 { font-size: 0.95rem; } .gefunden-punkte p { font-size: 0.85rem; } }
.gefunden-punkte svg { width: 1.6rem; height: 1.6rem; padding: 0.35rem; border-radius: 10px; background: var(--gruen-hauch); color: var(--gruen-tief); box-sizing: content-box; }
.gefunden-punkte h3 { margin: 0.6rem 0 0.25rem; color: var(--tinte); font-family: var(--titel); font-size: 1.02rem; font-weight: var(--gewicht-titel); }
.gefunden-punkte p { margin: 0; font-size: 0.93rem; line-height: 1.5; }

/* Zusagen: Titel als Knopf; am Computer nur Text, auf dem Handy Aufklapp-Liste */
.zusage-knopf { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: default; }
@media (max-width: 35.99rem) {
  .js .zusagen-raster div { padding: 0.95rem 0 0.95rem 2.4rem; }
  .js .zusagen-raster div::before { top: 0.95rem; }
  .js .zusagen-raster div::after { top: 1.33rem; }
  .js .zusagen-raster h3 { margin: 0; font-size: 1.02rem; }
  .js .zusage-knopf { position: relative; padding-right: 1.6rem; cursor: pointer; }
  .js .zusage-knopf::after { content: "+"; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%); color: var(--gruen-tief); font-weight: var(--gewicht-betont); }
  .js .zusagen-raster div.offen .zusage-knopf::after { content: "–"; }
  .js .zusage-knopf:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; border-radius: 4px; }
  .js .zusagen-raster div:not(.offen) p { display: none; }
  .js .zusagen-raster div.offen p { margin-top: 0.4rem; font-size: 0.93rem; }
}

/* Lokal gefunden werden: eigener Abschnitt mit Google-Beispiel */
.lokal-raster { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 60rem) { .lokal-raster { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.lokal-text .ehrlich { margin: 1.75rem 0 0; padding: 0.9rem 1rem; border-left: 3px solid var(--gruen); border-radius: 0 10px 10px 0; background: var(--karte); font-size: 0.92rem; }
.google { margin: 0; }
.google figcaption { margin-top: 0.7rem; font-size: 0.8rem; color: var(--leise); text-align: center; }
.g-fenster { overflow: hidden; border: 1px solid var(--linie-stark); border-radius: 16px; background: #fff; box-shadow: 0 30px 60px -34px rgba(28, 37, 50, 0.4); font-family: Arial, Helvetica, sans-serif; font-size: 0.8rem; color: #3c4043; }
.g-suche { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1rem; border-bottom: 1px solid #ecedef; }
.g-logo { color: #4d5156; font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em; }
.g-feld { display: flex; flex: 1; justify-content: space-between; align-items: center; padding: 0.5rem 0.9rem; border: 1px solid #dfe1e5; border-radius: 99px; color: #202124; box-shadow: 0 1px 4px rgba(32, 33, 36, 0.12); }
.g-feld svg { width: 1rem; height: 1rem; color: #4285f4; }
.g-karte { position: relative; height: 6.5rem; background:
  linear-gradient(90deg, transparent 38%, #fff 38% 41%, transparent 41%),
  linear-gradient(0deg, transparent 55%, #fff 55% 60%, transparent 60%),
  linear-gradient(120deg, transparent 70%, #fff 70% 72%, transparent 72%),
  linear-gradient(160deg, #e8f0e6, #dfe8ef); }
.g-pin { position: absolute; width: 0.9rem; height: 0.9rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #b8c0c8; }
.g-pin.an { left: 36%; top: 30%; width: 1.3rem; height: 1.3rem; background: #ea4335; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); }
.g-pin.p2 { left: 64%; top: 24%; }
.g-pin.p3 { left: 18%; top: 58%; }
.g-treffer { display: grid; gap: 0.2rem; margin: 0.6rem 0.8rem; padding: 0.7rem 0.8rem; border-radius: 12px; }
.g-treffer.an { border: 2px solid var(--gruen); background: #fbf5eb; }
.g-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.3rem 0.6rem; }
.g-kopf b { color: #1a0dab; font-size: 0.98rem; font-weight: 400; }
.g-etikett { padding: 0.1rem 0.5rem; border-radius: 99px; background: var(--gruen); color: #fff; font-family: var(--schrift); font-size: 0.66rem; font-weight: var(--gewicht-betont); }
.g-offen { color: #188038; }
.g-knoepfe { display: flex; gap: 0.35rem; margin-top: 0.4rem; }
.g-knoepfe span { padding: 0.28rem 0.7rem; border: 1px solid #dadce0; border-radius: 99px; color: #1558b0; font-size: 0.72rem; }
.g-knoepfe .voll { border-color: #1a73e8; background: #1a73e8; color: #fff; }
/* Weitere (erfundene) Suchergebnisse: blass, damit der eigene Treffer heraussticht */
.g-organisch { gap: 0.1rem; margin-top: 0; padding-top: 0.55rem; padding-bottom: 0.55rem; border-top: 1px solid #ecedef; border-radius: 0; opacity: 0.45; }
.g-fenster.g-anim.g-ergebnis .g-organisch { opacity: 0.72; }
.g-domain { display: flex; align-items: center; gap: 0.4rem; color: #4d5156; font-size: 0.7rem; }
.g-domain i { width: 0.95rem; height: 0.95rem; border-radius: 50%; background: #dadce0; }
.g-organisch b { color: #1a0dab; font-size: 0.92rem; font-weight: 400; }
.g-organisch span:last-child { font-size: 0.74rem; color: #4d5156; }
@media (max-width: 35.99rem) {
  .g-karte { height: 4.6rem; }
  .g-organisch:last-child { display: none; }
  .lokal-raster { gap: 1.5rem; }
  /* Handy: bei den vier Punkten nur Symbol + Titel, als kompakte 2x2-Kacheln */
  #lokal .gefunden-punkte { gap: 0.6rem; }
  #lokal .gefunden-punkte > div { display: flex; align-items: center; gap: 0.55rem; padding: 0.7rem; border-radius: 12px; background: var(--karte); }
  #lokal .gefunden-punkte svg { flex: none; width: 1.2rem; height: 1.2rem; padding: 0.3rem; }
  #lokal .gefunden-punkte h3 { margin: 0; font-size: 0.86rem; line-height: 1.25; }
  #lokal .gefunden-punkte p { display: none; }
  #lokal .ehrlich { margin-top: 1rem; font-size: 0.85rem; }
}

/* Google-Beispiel: Tipp-Animation */
.g-eingabe { display: inline-flex; align-items: center; min-height: 1.2em; }
.g-cursor { display: none; width: 1px; height: 1.05em; margin-left: 1px; background: #202124; }
.g-anim.g-tippt .g-cursor { display: inline-block; animation: g-blinken 0.9s steps(1) infinite; }
@keyframes g-blinken { 50% { opacity: 0; } }
.g-anim .g-feld svg { transition: transform 0.2s, color 0.2s; }
.g-anim.g-suchen .g-feld svg { transform: scale(1.25); color: #1a73e8; }
.g-anim .g-karte, .g-anim .g-treffer { opacity: 0; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.45s ease; }
.g-anim.g-ergebnis .g-karte, .g-anim.g-ergebnis .g-treffer { opacity: 1; transform: none; }
.g-anim.g-ergebnis .g-treffer.an { transition-delay: 0.35s; }
.g-anim.g-ergebnis .g-treffer:nth-child(4) { transition-delay: 0.6s; }
.g-anim.g-ergebnis .g-treffer:nth-child(5) { transition-delay: 0.75s; }
.g-anim.g-ergebnis .g-pin.an { animation: g-pin 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.15s both; }
@keyframes g-pin { from { opacity: 0; translate: 0 -18px; } to { opacity: 1; translate: 0 0; } }

/* Gemessene Qualität: Karten mit kleinen Kreisen */
.messwerte { display: grid; gap: 0.8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 60rem) { .messwerte { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.messwerte > div { padding: 1.1rem 1.2rem; border: 1px solid var(--linie); border-radius: 14px; background: var(--karte); }
.messwerte h3 { margin: 0.8rem 0 0.15rem; font-size: 0.98rem; }
.messwerte p { margin: 0; font-size: 0.84rem; color: var(--leise); line-height: 1.45; }
@media (max-width: 23.4rem) { .messwerte > div { padding: 1rem 0.9rem; } }
.ring { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; background: radial-gradient(closest-side, var(--karte) 84%, transparent 86%), conic-gradient(var(--gruen) calc(var(--wert) * 1%), var(--linie) 0); }
.ring b { color: var(--tinte); font-size: 0.95rem; font-weight: var(--gewicht-betont); font-variant-numeric: tabular-nums; }
.zahl { display: flex; align-items: center; height: 3.1rem; color: var(--gruen-tief); font-size: 1.6rem; font-weight: var(--gewicht-betont); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.messhinweis { max-width: 46rem; margin: 1.1rem 0 0; font-size: 0.82rem; color: var(--leise); }
.zusagen-raster a { color: var(--gruen-tief); }

/* Selbsttest Schritt für Schritt (nur mit JS; ohne JS stehen alle Fragen untereinander) */
.test-kopf, .test-balken { display: none; }
.schrittweise .test-kopf { display: flex; justify-content: space-between; align-items: center; min-height: 2.2rem; padding-top: 0.9rem; }
.schrittweise .test-balken { display: block; height: 0.3rem; margin: 0.6rem 0 1.4rem; border-radius: 99px; background: var(--linie); overflow: hidden; }
.test-balken i { display: block; width: 0; height: 100%; border-radius: 99px; background: var(--gruen); transition: width 0.3s ease; }
.test-zaehler { margin-left: auto; font-size: 0.85rem; font-weight: 400; color: var(--leise); }
.zurueck, .neustart { padding: 0.3rem 0; border: 0; background: none; font: inherit; font-size: 0.88rem; color: var(--gruen-tief); cursor: pointer; }
.zurueck:hover, .neustart:hover { text-decoration: underline; }
.neustart { display: block; margin-top: 0.9rem; }
.schrittweise .frage { display: none; border-bottom: 0; padding: 0.4rem 0 0.4rem; }
.schrittweise .frage.aktiv { display: block; animation: frage-rein 0.25s ease; }
.schrittweise .frage legend { float: none; max-width: none; margin-bottom: 1.25rem; font-size: 1.02rem; font-weight: 500; line-height: 1.5; }
.schrittweise .wahl { margin-left: 2.35rem; }
.schrittweise .wahl label { min-width: 5rem; padding: 0.5rem 1.1rem; font-size: 0.95rem; font-weight: 400; }
.schrittweise .test-stand { display: none; }
@keyframes frage-rein { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .schrittweise .frage.aktiv { animation: none; } .test-balken i { transition: none; } }

/* Abschnitte */
.abschnitt { padding: 5rem 0; border-top: 1px solid var(--linie); }
.abschnitt.flaeche { background: var(--flaeche); }
.kopfzeile { margin-bottom: 2.75rem; }
.kopfzeile h2 { margin: 1rem 0 0.9rem; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.08; font-weight: var(--gewicht-titel); max-width: 20ch; }
.kopfzeile p { max-width: 38rem; margin: 0; font-size: 1.08rem; }

/* 4 · Ablauf */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: schritt; }
@media (min-width: 40rem) { .ablauf { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (min-width: 64rem) { .ablauf { grid-template-columns: repeat(4, 1fr); } }
.ablauf li { counter-increment: schritt; }
.ablauf li::before { content: "Schritt " counter(schritt); display: block; margin-bottom: 0.9rem; color: var(--gruen-tief); font-size: 0.8rem; font-weight: var(--gewicht-betont); letter-spacing: 0.05em; text-transform: uppercase; }
.ablauf h3 { margin: 0 0 0.4rem; font-size: 1.3rem; }
.ablauf p { margin: 0; }

/* 5 · Unsere Zusagen */
.zusagen-raster { display: grid; gap: 0 3rem; border-top: 1px solid var(--linie-stark); }
@media (min-width: 48rem) { .zusagen-raster { grid-template-columns: 1fr 1fr; } }
.zusagen-raster div { position: relative; padding: 1.4rem 0 1.4rem 2.4rem; border-bottom: 1px solid var(--linie); }
.zusagen-raster div::before { content: ""; position: absolute; left: 0; top: 1.5rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--gruen-hauch); }
.zusagen-raster div::after { content: ""; position: absolute; left: 0.45rem; top: 1.88rem; width: 0.6rem; height: 0.32rem; border-left: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen); transform: rotate(-45deg); }
.zusagen-raster h3 { margin: 0 0 0.3rem; font-size: 1.1rem; }
.zusagen-raster p { margin: 0; }

/* Hinweis unter den Buttons */
.einstieg .hinweis { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 1.1rem 0 0; padding: 0; list-style: none; font-size: 0.88rem; color: var(--text); }
.einstieg .hinweis li { position: relative; padding-left: 1.3rem; }
/* Vier Haken: passen sie nicht in eine Zeile, stehen sie als 2 × 2 statt 3 + 1 */
.hinweis-rahmen { container-type: inline-size; }
@container (max-width: 32.5rem) { .einstieg .hinweis, .hinweis-rahmen .br-haken { display: grid; grid-template-columns: repeat(2, max-content); } }
.einstieg .hinweis li::before { content: ""; position: absolute; left: 0.15rem; top: 0.42em; width: 0.65rem; height: 0.36rem; border-left: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen); transform: rotate(-45deg); }

/* 2 · Beispiele je Branche */
.beispiele { display: grid; gap: 1rem; }
@media (min-width: 36rem) { .beispiele { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .beispiele { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.beispiele article { display: flex; flex-direction: column; min-height: 13rem; padding: 1.4rem; border: 1px solid var(--linie); border-radius: 16px; background: var(--karte); }
.beispiele .branche { color: var(--gruen-tief); font-size: 0.75rem; font-weight: var(--gewicht-betont); letter-spacing: 0.06em; text-transform: uppercase; }
.beispiele h3 { margin: 0.6rem 0 0.4rem; font-size: 1.12rem; line-height: 1.3; }
.beispiele p { margin: 0 0 1rem; font-size: 0.93rem; line-height: 1.55; }
.beispiele .branche-titel { margin: 0.2rem 0 0.35rem; font-size: clamp(1rem, 1.55vw, 1.2rem); line-height: 1.2; white-space: nowrap; }
@media (max-width: 35.99rem) { .beispiele .branche-titel { font-size: 1.12rem; } }
.beispiele .funktion { margin: 0 0 1rem; font-size: 0.92rem; color: var(--leise); }
.beispiele .ihre .branche-titel { color: #fff; }
.beispiele .ihre .funktion { color: var(--auf-dunkel); }
.beispiele .status { margin-top: auto; align-self: flex-start; padding: 0.15rem 0.6rem; border: 1px dashed var(--linie-stark); border-radius: 99px; color: var(--leise); font-size: 0.75rem; }
.beispiele .ihre { background: var(--tinte); border-color: var(--tinte); }
.beispiele .ihre .branche { color: #c6dad1; }
.beispiele .ihre h3 { color: #fff; }
.beispiele .ihre p { color: var(--auf-dunkel); }
.beispiele .ihre .pille { margin-top: auto; align-self: flex-start; padding: 0.55rem 1rem; font-size: 0.88rem; background: #fff; color: var(--gruen-tief); }

/* Handy: Beispiele als Wischleiste statt acht Karten untereinander */
@media (max-width: 35.99rem) {
  .beispiele {
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1rem;
    margin: 0 -1rem;
    padding: 0.25rem 1rem 1rem;
    scrollbar-width: none;
  }
  .beispiele::-webkit-scrollbar { display: none; }
  .beispiele article { min-height: 0; scroll-snap-align: start; }
  .wischhinweis { display: block; }
}
.wischhinweis { display: none; margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--leise); }

/* 4 · Leistungen: zwei Wege */

.unterzeile { margin: 0 0 1.25rem; font-size: 1.25rem; }
.bausteine { display: grid; gap: 0 2rem; grid-template-columns: 1fr; border-top: 1px solid var(--linie-stark); }
@media (min-width: 40rem) { .bausteine { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .bausteine { grid-template-columns: repeat(3, 1fr); } }
.bausteine div { padding: 0.95rem 0; border-bottom: 1px solid var(--linie); }
.bausteine b { display: block; color: var(--tinte); font-weight: var(--gewicht-betont); }
.bausteine span { font-size: 0.93rem; color: var(--leise); }

/* 6 · Fragen */
.fragen-raster { display: grid; gap: 1rem; }
@media (min-width: 60rem) { .fragen-raster { grid-template-columns: 1fr 1.6fr; gap: 4rem; } }
.fragen details { border-bottom: 1px solid var(--linie-stark); }
.fragen details:first-of-type { border-top: 1px solid var(--linie-stark); }
.fragen-gruppe + .fragen-gruppe { margin-top: 2.2rem; }
.fragen-thema { margin: 0 0 0.7rem; color: var(--gruen-tief); font-size: 0.8rem; font-weight: var(--gewicht-betont); letter-spacing: 0.05em; text-transform: uppercase; }
.fragen summary { cursor: pointer; padding: 1.1rem 0; color: var(--tinte); font-weight: var(--gewicht-betont); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: '+'; color: var(--gruen-tief); font-weight: var(--gewicht-betont); }
.fragen details[open] summary::after { content: '–'; }
.fragen details p { margin: 0 0 1.1rem; max-width: 40rem; }

/* 7 · Abschluss */
.abschluss { padding: 5.5rem 0; background: var(--tinte); color: var(--auf-dunkel); }
.abschluss h2 { max-width: 22ch; margin: 0 0 1rem; color: #fff; font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.08; font-weight: var(--gewicht-titel); }
.abschluss h2 em { color: #f8eed8; }
.ansprechpartner { display: flex; gap: 1rem; align-items: center; max-width: 30rem; margin-top: 1.8rem; padding: 1rem 1.1rem; border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; background: rgba(255,255,255,0.04); }
.portraet { flex: none; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: linear-gradient(135deg, #eb7636, #f8eed8); color: #fff; font-size: 1.5rem; font-weight: var(--gewicht-betont); overflow: hidden; }
.portraet img { width: 100%; height: 100%; object-fit: cover; }
.abschluss .ansprechpartner p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.ansprechpartner b { display: block; margin-bottom: 0.15rem; color: #fff; font-weight: var(--gewicht-betont); }
.abschluss p { max-width: 38rem; margin: 0 0 2rem; font-size: 1.08rem; }
.abschluss .pille { background: #fff; color: var(--gruen-tief); }
.abschluss .pille:hover { background: var(--gruen-hauch); }
.abschluss-raster { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 60rem) { .abschluss-raster { grid-template-columns: 1fr 1.05fr; gap: 4rem; } }
.zusagen { margin: 0; padding: 0; list-style: none; }
.zusagen li { position: relative; padding: 0.45rem 0 0.45rem 1.6rem; color: var(--auf-dunkel); }
.zusagen li::before { content: ''; position: absolute; left: 0.1rem; top: 0.85rem; width: 0.75rem; height: 0.4rem; border-left: 2px solid #f8eed8; border-bottom: 2px solid #f8eed8; transform: rotate(-45deg); }
/* Direkt anrufen oder per WhatsApp (Kontaktbereich, dunkler Hintergrund) */
.direkt { display: flex; flex-wrap: wrap; gap: 0.6rem; max-width: 30rem; margin-top: 1.2rem; }
.direkt-knopf { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.55rem 1.05rem; border: 1px solid rgba(255,255,255,0.32); border-radius: 99px; color: #fff; font-weight: var(--gewicht-betont); text-decoration: none; transition: background 0.2s, border-color 0.2s; }
.direkt-knopf:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.direkt-knopf.wa { border-color: #f8eed8; background: #f8eed8; color: var(--tinte); }
.direkt-knopf.wa:hover { background: #f0dcc4; border-color: #f0dcc4; }
.direkt-knopf svg { width: 1.15rem; height: 1.15rem; flex: none; }
.abschluss .direkt-text { flex-basis: 100%; margin: 0.1rem 0 0; font-size: 0.86rem; color: var(--auf-dunkel); }
.zusagen a { color: #fff; }

/* Formular: die eine Karte, die über dem grünen Grund liegt */
.formular { display: grid; gap: 1rem; padding: 1.75rem; border-radius: 18px; background: var(--karte); color: var(--tinte); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45); }
.zeile2 { display: grid; gap: 1rem; }
@media (min-width: 36rem) { .zeile2 { grid-template-columns: 1fr 1fr; } }
.formular label { display: grid; gap: 0.35rem; font-size: 0.88rem; font-weight: var(--gewicht-betont); }
.formular input, .formular textarea { width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--linie-stark); border-radius: 10px; background: var(--grund); color: var(--tinte); font: 400 1rem/1.4 var(--schrift); }
.formular textarea { resize: vertical; }
.formular input:focus, .formular textarea:focus { outline: 2px solid var(--gruen); outline-offset: 1px; border-color: var(--gruen-tief); background: #fff; }
.formular .pille { justify-self: start; border: 0; cursor: pointer; background: var(--gruen); color: #fff; font-family: inherit; }
.formular .pille:hover { background: var(--gruen-tief); }
.formular .topf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.datenschutz-hinweis, .abschluss .formular .datenschutz-hinweis { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--leise); }
.datenschutz-hinweis a { color: var(--gruen-tief); }

/* Fuß */
.fuss { border-top: 1px solid var(--linie); background: var(--flaeche); }
.fuss .rahmen { padding-top: 3.5rem; padding-bottom: 1.75rem; color: var(--text); font-size: 0.92rem; }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.5rem 1.5rem; }
.fuss-marke, .fuss-kontakt { grid-column: 1 / -1; }
.fuss .marke { color: var(--tinte); font-size: 1.2rem; }
.fuss .marke .logo { width: 1.6rem; height: 1.6rem; }
.fuss-satz { max-width: 19rem; margin: 1rem 0 0.35rem; color: var(--tinte); font-size: 1.05rem; font-weight: var(--gewicht-titel); line-height: 1.4; }
.fuss-ort { margin: 0 0 1.4rem; color: var(--leise); }
.fuss h2 { margin: 0 0 0.9rem; color: var(--tinte); font-size: 0.78rem; font-weight: var(--gewicht-betont); letter-spacing: 0.08em; text-transform: uppercase; }
.fuss ul { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.fuss a { color: var(--recht); text-decoration: none; }
.fuss ul a:hover, .fuss-unten a:hover { color: var(--gruen-tief); text-decoration: underline; text-underline-offset: 3px; }
.fuss a.pille { color: #fff; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--linie-stark); color: var(--leise); font-size: 0.85rem; }
.fuss-unten nav { display: flex; gap: 1.5rem; }
@media (min-width: 48rem) {
  .fuss-raster { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1fr); gap: 2rem; }
  .fuss-marke, .fuss-kontakt { grid-column: auto; }
}

/* Rechtstexte */
.recht { padding-top: 3.5rem; padding-bottom: 4.5rem; }
.recht > * { max-width: 44rem; }
.recht h1 { margin: 1rem 0 2rem; font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.1; font-weight: var(--gewicht-titel); }
.recht h2 { margin: 2.25rem 0 0.5rem; font-size: 1.15rem; color: var(--recht); letter-spacing: -0.01em; }
.recht p, .recht ul { margin: 0 0 0.9rem; }
.recht ul { padding-left: 1.2rem; }
.recht address { font-style: normal; }
.recht a { color: var(--gruen-tief); }

/* Leistungen: Aufgabenteilung "Das übernehmen wir / Das machen Sie" */
.aufteilung { display: grid; gap: 1rem; margin-bottom: 4rem; }
@media (min-width: 75rem) { .aufteilung { grid-template-columns: 1.85fr 1fr; } }
.aufteilung h3 { margin: 0 0 1.1rem; font-size: 1.35rem; }
.aufteilung .wir { padding: 1.8rem 1.6rem; border: 1px solid var(--linie-stark); border-radius: 18px; background: var(--karte); }
.phasen { display: grid; gap: 1.5rem 1.6rem; }
@media (min-width: 44rem) { .phasen { grid-template-columns: 1fr 1fr; } }
.phasen .art { display: inline-block; margin-bottom: 0.6rem; padding: 0.2rem 0.7rem; border-radius: 99px; background: var(--gruen-hauch); color: var(--gruen-tief); font-size: 0.78rem; font-weight: var(--gewicht-betont); }
.phasen ul { margin: 0; padding: 0; list-style: none; }
.phasen li { position: relative; padding: 0.55rem 0 0.55rem 1.75rem; border-top: 1px solid var(--linie); color: var(--tinte); }
.phasen li::before { content: ""; position: absolute; left: 0.15rem; top: 0.95rem; width: 0.8rem; height: 0.45rem; border-left: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen); transform: rotate(-45deg); }
.aufteilung .sie { display: flex; flex-direction: column; padding: 1.8rem 1.6rem; border-radius: 18px; background: var(--tinte); color: var(--auf-dunkel); }
.aufteilung .sie h3 { color: #fff; }
.sie ol { margin: 0; padding: 0; list-style: none; counter-reset: sie; }
.sie li { position: relative; padding: 0.6rem 0 0.6rem 2.4rem; border-top: 1px solid rgba(255, 255, 255, 0.12); color: #fff; counter-increment: sie; }
.sie li::before { content: counter(sie); position: absolute; left: 0; top: 0.55rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(248, 238, 216, 0.18); color: #f8eed8; font-size: 0.85rem; font-weight: var(--gewicht-betont); }
.sie p { margin: auto 0 0; padding-top: 1.2rem; color: #f8eed8; font-weight: var(--gewicht-betont); }
@media (max-width: 35.99rem) {
  .aufteilung { margin-bottom: 3rem; }
  .aufteilung .wir, .aufteilung .sie { padding: 1.4rem; }
  .phasen li, .sie li { padding-top: 0.45rem; padding-bottom: 0.45rem; font-size: 0.93rem; }
  .phasen li::before { top: 0.85rem; }
  .sie li::before { top: 0.4rem; }
  .phasen { gap: 1.2rem; }
}

/* Handy: kürzer durch weniger Leerraum und gekürzte Fragenliste */
.alle-fragen { display: none; }
@media (max-width: 35.99rem) {
  .abschnitt { padding: 3.5rem 0; }
  .abschluss { padding: 3.75rem 0; }
  .kopfzeile { margin-bottom: 2rem; }
  .js .fragen:not(.alle) .fragen-gruppe:nth-child(n+2) { display: none; }
  .js .alle-fragen { display: inline-flex; justify-self: start; margin-top: 0.5rem; }
}

.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Verwaltung: Beispiel-Benachrichtigung wie auf dem Handy */
.meldung { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem; border: 1px solid var(--linie); border-radius: 16px; background: #fff; box-shadow: 0 14px 30px -16px rgba(28, 37, 50, 0.45); }
.meldung-bild { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 9px; background: #15304d; color: #fff; font-size: 0.72rem; font-weight: 700; }
.meldung-text { flex: 1; min-width: 0; color: var(--leise); font-size: 0.84rem; line-height: 1.35; }
.meldung-text b, .meldung-text span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.meldung-text b { color: var(--tinte); font-weight: var(--gewicht-betont); }
.meldung small { align-self: flex-start; color: var(--leise); font-size: 0.72rem; }
/* Stapel: neueste Meldung vorne, ältere rutschen nach hinten und schauen unten heraus */
.meldungen { position: relative; height: 4.9rem; }
.meldungen .meldung { position: absolute; top: 0; left: 0; right: 0; transform-origin: 50% 100%; transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.45s ease; }
.meldungen .meldung[data-pos="0"] { z-index: 3; }
.meldungen .meldung[data-pos="1"] { z-index: 2; transform: translateY(9px) scale(0.95); opacity: 0.8; }
.meldungen .meldung[data-pos="2"] { z-index: 1; transform: translateY(18px) scale(0.9); opacity: 0.5; }
.meldungen .meldung[data-pos="3"] { z-index: 0; transform: translateY(24px) scale(0.86); opacity: 0; }
.meldungen .meldung[data-pos="1"] > *, .meldungen .meldung[data-pos="2"] > *, .meldungen .meldung[data-pos="3"] > * { opacity: 0; transition: opacity 0.3s ease; }
.meldungen .meldung.rein { transform: translateY(-16px) scale(0.98); opacity: 0; }
.js .meldungen { opacity: 0; transform: translateY(-10px); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.js .meldungen.da { opacity: 1; transform: none; }
.fenster-kopf span b { font-weight: inherit; color: inherit; border-radius: 4px; }
.fenster-kopf span b.plus { animation: zaehler-plus 1.2s ease; }
@keyframes zaehler-plus { 0%, 40% { background: var(--gruen-hauch); color: var(--gruen-tief); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .js .meldungen { opacity: 1; transform: none; transition: none; } }

/* Ablauf Schritt 1: Gesicht des Ansprechpartners */
.ablauf .direkt { grid-column: 2; display: flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; color: var(--tinte); font-size: 0.92rem; font-weight: var(--gewicht-betont); }
.ablauf .direkt img { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--karte), 0 0 0 3px var(--gruen-hauch); }

/* Ablauf: Schritt-Überschrift und Text kleiner und ruhiger */
.ablauf h3 { margin: 0 0 0.35rem; font-size: 1.1rem; line-height: 1.3; }
.ablauf li > p:not(.direkt) { font-size: 0.92rem; line-height: 1.6; color: var(--leise); }
.ablauf .direkt { margin-top: 0.7rem; font-size: 0.85rem; }
.ablauf .direkt img { width: 1.9rem; height: 1.9rem; }
@media (max-width: 47.99rem) { .ablauf h3 { margin-top: 0.5rem; font-size: 1.08rem; } }

/* Kontakt: So geht es weiter */
.danach { display: grid; gap: 0.7rem; margin: 0 0 1.6rem; padding: 0; list-style: none; counter-reset: danach; }
.danach li { position: relative; padding-left: 2.4rem; color: var(--auf-dunkel); font-size: 0.95rem; line-height: 1.4; counter-increment: danach; }
.danach li::before { content: counter(danach); position: absolute; left: 0; top: 0.05rem; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: rgba(248, 238, 216, 0.18); color: #f8eed8; font-size: 0.85rem; font-weight: var(--gewicht-betont); }
.danach b { display: block; color: #fff; font-weight: var(--gewicht-betont); }
/* Formular: beste Anrufzeit */
.anrufzeit { margin: 0; padding: 0; border: 0; min-width: 0; }
.anrufzeit legend { margin-bottom: 0.4rem; padding: 0; font-size: 0.9rem; font-weight: var(--gewicht-betont); color: var(--tinte); }
.kacheln.drei, .formular .kacheln.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kacheln.drei label { padding: 0.6rem 0.5rem; text-align: center; font-size: 0.88rem; }
@media (max-width: 35.99rem) { .kacheln.drei label { padding: 0.6rem 0.2rem; font-size: 0.8rem; } }
.antwort-zusage, .abschluss .formular .antwort-zusage { margin: 0; font-size: 0.85rem; font-weight: var(--gewicht-betont); color: var(--gruen-tief); }

/* Geschwindigkeit: Abschnitte unterhalb des ersten Bildschirms erst berechnen, wenn man in ihre Nähe kommt */
main > section.abschnitt { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* Handy: geschätzte Höhen = echte Höhen (gemessen bei 412 px Breite), damit beim Nachberechnen nichts verrutscht */
@media (max-width: 35.99rem) {
  #beispiele { contain-intrinsic-size: auto 682px; }
  #lokal { contain-intrinsic-size: auto 1284px; }
  #ablauf { contain-intrinsic-size: auto 1034px; }
  #ueber { contain-intrinsic-size: auto 922px; }
  #selbsttest { contain-intrinsic-size: auto 515px; }
  #leistungen { contain-intrinsic-size: auto 2393px; }
  #qualitaet { contain-intrinsic-size: auto 970px; }
  #zusagen { contain-intrinsic-size: auto 813px; }
  #fragen { contain-intrinsic-size: auto 714px; }
}
/* Beim Springen über Menü oder Link die ganze Seite berechnen, damit das Ziel genau stimmt */
.alles main > section.abschnitt { content-visibility: visible; }
/* Startseite: auch Anfrage-Bereich erst berechnen, wenn er in die Nähe kommt (spart beim Laden über 130 Elemente) */
.startseite main > #kontakt { content-visibility: auto; contain-intrinsic-size: auto 1702px; }
.alles.startseite main > #kontakt, html.alles .startseite main > #kontakt { content-visibility: visible; }

/* Handy-Durchgang 28.09.: Formular früher, größere Tippflächen */
@media (max-width: 59.99rem) {
  /* Kontakt: Formular direkt nach „So geht es weiter“, Zusagen und Ansprechpartner danach */
  .abschluss-raster { gap: 0; }
  .abschluss-raster > div:first-child { display: contents; }
  .abschluss-raster .formular { order: 1; margin: 0.4rem 0 2rem; }
  .abschluss-raster ul.zusagen, .abschluss-raster .ansprechpartner, .abschluss-raster .direkt { order: 2; }
}
@media (max-width: 35.99rem) {
  .js .zusage-knopf { margin: -0.55rem 0; padding-top: 0.55rem; padding-bottom: 0.55rem; }
  .fuss ul a, .fuss-unten a, .fuss-unten .fuss-link { display: inline-block; padding: 0.2rem 0; }
}

/* Branchen-Karten am Computer: gleich breite Spalten, etwas weniger Innenabstand, Problem-Frage darf umbrechen statt „…“ */
@media (min-width: 64rem) {
  .beispiele article { padding: 1.2rem; }
  .beispiele .funktion { white-space: normal; overflow: visible; }
}

/* Aktiv-Status: grüner Punkt mit ruhigem Puls, grau wenn gerade nicht erreichbar */
.einstieg-oben { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.status { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--gruen-tief); font-size: 0.85rem; font-weight: 400; }
.status-punkt { position: relative; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #eb7636; }
.status-punkt::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #eb7636; animation: status-puls 2.6s ease-out infinite; }
@keyframes status-puls { 0% { transform: scale(1); opacity: 0.45; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.status-punkt.ruhig { background: #a8a8a8; }
.status-punkt.ruhig::after { display: none; }
.formular .erreichbar { margin: 0 0 0.9rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--linie); color: var(--tinte); font-size: 0.82rem; line-height: 1.4; }
.abschluss .formular .erreichbar { font-size: 0.82rem; }
@media (prefers-reduced-motion: reduce) { .status-punkt::after { animation: none; display: none; } }
.einstieg-oben .plakette::before { display: none; }

/* Wer hinter WebAusbau steht */
.ueber-raster { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 52rem) { .ueber-raster { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; } }
.ueber-bild { position: relative; margin: 0; max-width: 24rem; }
.ueber-bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; background: var(--flaeche); }
.ueber-bild figcaption { position: absolute; left: 1rem; bottom: 1rem; padding: 0.6rem 0.9rem; border-radius: 12px; background: rgba(255, 255, 255, 0.94); color: var(--leise); font-size: 0.82rem; line-height: 1.35; box-shadow: 0 10px 24px -16px rgba(28, 37, 50, 0.5); }
.ueber-bild figcaption b { display: block; color: var(--tinte); font-size: 0.95rem; font-weight: var(--gewicht-betont); }
.ueber-text h2 { margin: 1rem 0 1rem; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; font-weight: var(--gewicht-titel); max-width: 22ch; }
.ueber-text h2 em { font-style: normal; color: var(--gruen-tief); }
.ueber-text p { max-width: 38rem; margin: 0 0 1rem; }
.ueber-punkte { display: grid; gap: 0.6rem 1.5rem; margin: 1.5rem 0 1.8rem; padding: 1.2rem 0 0; border-top: 1px solid var(--linie); list-style: none; }
@media (min-width: 36rem) { .ueber-punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ueber-punkte li { position: relative; padding-left: 1.6rem; color: var(--leise); font-size: 0.88rem; line-height: 1.4; }
.ueber-punkte li::before { content: ""; position: absolute; left: 0.15rem; top: 0.35rem; width: 0.65rem; height: 0.36rem; border-left: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen); transform: rotate(-45deg); }
.ueber-punkte b { display: block; color: var(--tinte); font-weight: var(--gewicht-betont); font-size: 0.95rem; }
@media (max-width: 51.99rem) {
  /* Handy: kleines Foto mit Name daneben */
  .ueber-raster { gap: 1.4rem; }
  .ueber-bild { display: flex; align-items: center; gap: 1rem; max-width: none; }
  .ueber-bild img { flex: none; width: 6.5rem; border-radius: 16px; }
  .ueber-bild figcaption { position: static; padding: 0; background: none; box-shadow: none; font-size: 0.9rem; }
  .ueber-bild figcaption b { font-size: 1.1rem; }
}

/* Formular Schritt 1: Branchen mit Linien-Symbol im Grünton */
.kacheln label:has(.kachel-icon) { display: flex; align-items: center; gap: 0.6rem; }
.kachel-icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--gruen-tief); }
.kacheln label:has(input:checked) .kachel-icon { color: var(--gruen-tief); }
.kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kacheln label span { min-width: 0; }
@media (max-width: 35.99rem) {
  .kacheln label:has(.kachel-icon) { flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 0.7rem 0.6rem; font-size: 0.88rem; }
  .kachel-icon { width: 1.1rem; height: 1.1rem; }
}

/* Ablauf Schritt 4: Hinweis, dass erst hier bezahlt wird */
.ablauf li > p.ab-hier { grid-column: 2; display: inline-block; justify-self: start; margin-top: 0.8rem; padding: 0.4rem 0.7rem; border-radius: 8px; background: var(--gruen-hauch); color: var(--gruen-tief); font-size: 0.85rem; line-height: 1.4; }

.ueber-thema { margin: 1.6rem 0 0; color: var(--gruen-tief); font-size: 0.8rem; font-weight: var(--gewicht-betont); letter-spacing: 0.05em; text-transform: uppercase; }
.ueber-thema + .ueber-punkte { margin-top: 0.8rem; }

/* Leistungen: dritter Block „Auf Wunsch zusätzlich“ über beide Spalten */
.phasen .zusatz { grid-column: 1 / -1; }
@media (min-width: 44rem) { .phasen .zusatz ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; } }

/* Über mich: Werdegang als vier Kacheln, Leistungen als kurze Liste */
.ueber-fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.ueber-fakten li { padding: 0.75rem 0.85rem; border: 1px solid var(--linie); border-radius: 12px; background: var(--karte); color: var(--leise); font-size: 0.82rem; line-height: 1.35; }
.ueber-fakten b { display: block; margin-bottom: 0.15rem; color: var(--gruen-tief); font-size: 1rem; font-weight: var(--gewicht-betont); }
.ueber-punkte.kurz { gap: 0.55rem 1.5rem; }
.ueber-punkte.kurz li { color: var(--tinte); font-size: 0.95rem; font-weight: var(--gewicht-betont); }
.ueber-punkte.kurz li::before { top: 0.4rem; }

/* Handy: Selbsttest ausblenden (spart fast einen Bildschirm), am Computer bleibt er */
@media (max-width: 35.99rem) { #selbsttest { display: none; } }

/* Sofort-Check unter den Messwerten */
.check { display: none; }
.js .check { display: grid; gap: 1rem 2rem; margin-top: 2rem; padding: 1.6rem; border: 1px solid var(--linie-stark); border-radius: 18px; background: var(--karte); }
@media (min-width: 52rem) { .js .check { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; } }
.check-text h3 { margin: 0 0 0.35rem; font-size: 1.25rem; }
.check-text p { margin: 0; font-size: 0.92rem; color: var(--leise); }
.check-form { display: flex; gap: 0.5rem; }
.check-form input { flex: 1; min-width: 0; padding: 0.75rem 1rem; border: 1px solid var(--linie-stark); border-radius: 99px; background: var(--grund); color: var(--tinte); font: inherit; font-size: 1rem; }
.check-form input:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }
.check-form .pille { flex: none; }
.check-form .pille:disabled { opacity: 0.6; cursor: progress; }
.check-ergebnis:empty { display: none; }
.check-ergebnis { grid-column: 1 / -1; }
.check-ergebnis p { margin: 0; font-size: 0.92rem; }
.check-balken { height: 4px; margin-top: 0.7rem; border-radius: 4px; background: var(--flaeche); overflow: hidden; }
.check-balken i { display: block; height: 100%; width: 0; background: var(--gruen); animation: check-laden 28s cubic-bezier(0.2, 0.6, 0.3, 1) forwards; }
@keyframes check-laden { to { width: 95%; } }
.check-tabelle { display: grid; gap: 0; margin-bottom: 1rem; border-top: 1px solid var(--linie); }
.check-zeile { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0.5rem; padding: 0.6rem 0; border-bottom: 1px solid var(--linie); font-size: 0.92rem; }
.check-zeile b { font-size: 1.1rem; font-weight: var(--gewicht-betont); text-align: right; font-variant-numeric: tabular-nums; }
.check-zeile.kopf b { font-size: 0.78rem; color: var(--leise); }
.check-zeile .gut { color: var(--gruen-tief); }
.check-zeile .mittel { color: #9a6700; }
.check-zeile .schlecht { color: #b3261e; }
.check-urteil { margin-bottom: 1rem !important; color: var(--tinte); font-weight: var(--gewicht-betont); }
.check-quelle { margin-top: 0.8rem !important; font-size: 0.8rem !important; color: var(--leise); }
.check-ergebnis.fehler p { color: #b3261e; }
@media (max-width: 35.99rem) {
  .js .check { padding: 1.2rem; }
  .check-form { flex-direction: column; }
  .check-form .pille { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .check-balken i { animation: none; width: 60%; } }

/* Unterseiten: Link zur Startseite im Kopf, Danke/Fehler/404 */
.kopf-zurueck { color: var(--text); font-size: 0.9rem; text-decoration: none; }
.kopf-zurueck::before { content: "← "; }
.kopf-zurueck:hover { color: var(--tinte); }
.unterseite { min-height: 60vh; }
.unterseite .einleitung { font-size: 1.08rem; color: var(--text); }
.haken { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-bottom: 1.2rem; border-radius: 50%; background: var(--gruen-hauch); color: var(--gruen-tief); }
.haken svg { width: 1.6rem; height: 1.6rem; }
.weiter-schritte { display: grid; gap: 0.9rem; margin: 1.4rem 0 2rem; padding: 0; list-style: none; counter-reset: weiter; }
.recht .weiter-schritte { padding-left: 0; }
.weiter-schritte li { position: relative; padding-left: 2.6rem; color: var(--leise); line-height: 1.45; counter-increment: weiter; }
.weiter-schritte li::before { content: counter(weiter); position: absolute; left: 0; top: 0.05rem; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--gruen); color: #fff; font-size: 0.85rem; font-weight: var(--gewicht-betont); }
.weiter-schritte b { display: block; color: var(--tinte); font-weight: var(--gewicht-betont); }
.persoenlich { display: flex; align-items: center; gap: 1rem; margin: 0 0 2rem; padding: 1rem 1.2rem; border: 1px solid var(--linie); border-radius: 14px; background: var(--karte); }
.persoenlich img { flex: none; width: 3.6rem; height: 3.6rem; border-radius: 50%; object-fit: cover; }
.recht .persoenlich p { margin: 0; color: var(--leise); font-size: 0.95rem; line-height: 1.5; }
.persoenlich b { display: block; color: var(--tinte); font-weight: var(--gewicht-betont); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem !important; }
.recht .knoepfe a.pille { color: #fff; text-decoration: none; }
.recht .knoepfe a.pille.leer { color: var(--tinte); }
.ausweg { margin-top: 1.4rem !important; font-size: 0.92rem; color: var(--leise); }

/* Formular: Hinweise direkt am Feld und unter dem Knopf */
.feld-fehler, .abschluss .formular .feld-fehler { margin: -0.35rem 0 0.2rem; color: #b3261e; font-size: 0.82rem; line-height: 1.4; }
.formular [aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 1px #b3261e; }
.form-meldung, .abschluss .formular .form-meldung { margin: 0; padding: 0.7rem 0.9rem; border-radius: 10px; background: #fbeceb; color: #8c1d18; font-size: 0.88rem; line-height: 1.45; }
.form-meldung a { color: inherit; }
.formular .senden:disabled { opacity: 0.7; cursor: progress; }

/* Startseite: Branchen-Karte mit Link auf die Branchenseite (ganze Karte klickbar) */
.beispiele article { position: relative; }
.karte-link { margin-top: auto; padding-top: 0.8rem; color: var(--gruen-tief); font-size: 0.9rem; font-weight: var(--gewicht-betont); text-decoration: none; }
.karte-link::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.beispiele article:has(.karte-link):hover { border-color: var(--gruen-tief); }
.karte-link:focus-visible { outline: none; }
.beispiele article:has(.karte-link:focus-visible) { outline: 2px solid var(--gruen); outline-offset: 2px; }

/* Branchenseiten */
.br-nav { display: flex; align-items: center; gap: 1.2rem; }
@media (max-width: 35.99rem) { .br-nav .kopf-zurueck { display: none; } }
.br-held { padding: 3.5rem 0 4rem; }
.br-held-raster { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 52rem) { .br-held-raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3.5rem; } }
.br-held h1 { margin: 1rem 0 1rem; font-size: clamp(2.2rem, 5vw, 3.3rem); line-height: 1.05; font-weight: var(--gewicht-titel); }
.br-held h1 em { display: block; color: var(--gruen-tief); font-style: normal; }
.br-held p { max-width: 32rem; margin: 0 0 1.8rem; font-size: 1.08rem; }
.br-haken { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 1.1rem 0 0; padding: 0; list-style: none; font-size: 0.88rem; }
.br-haken li { position: relative; padding-left: 1.3rem; }
.br-haken li::before { content: ""; position: absolute; left: 0.15rem; top: 0.42em; width: 0.65rem; height: 0.36rem; border-left: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen); transform: rotate(-45deg); }
.br-foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(28, 37, 50, 0.45); }
.br-paare { display: grid; gap: 1rem; }
.br-paar { display: grid; border: 1px solid var(--linie); border-radius: 18px; background: var(--karte); overflow: hidden; }
@media (min-width: 52rem) { .br-paar { grid-template-columns: 1fr 1fr; } }
.br-problem { display: flex; gap: 0.9rem; padding: 1.3rem 1.4rem; }
.br-icon { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: #f6ecea; color: #9c3a31; }
.br-icon svg { width: 1.25rem; height: 1.25rem; }
.br-problem b, .br-loesung b { display: block; margin-bottom: 0.25rem; color: var(--tinte); font-weight: var(--gewicht-betont); }
.br-problem p, .br-loesung p { margin: 0; font-size: 0.93rem; color: var(--leise); }
.br-loesung { padding: 1.3rem 1.4rem; background: var(--gruen-hauch); border-top: 1px solid var(--linie); }
@media (min-width: 52rem) { .br-loesung { border-top: 0; border-left: 1px solid var(--linie); } }
.br-loesung b { color: var(--gruen-tief); }
.br-loesung p { color: var(--tinte); }
.br-marke { display: block; margin-bottom: 0.35rem; color: var(--gruen-tief); font-size: 0.75rem; font-weight: var(--gewicht-betont); letter-spacing: 0.05em; text-transform: uppercase; }
.br-funktionen { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .br-funktionen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .br-funktionen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.br-funktionen li, .br-punkte li { position: relative; padding: 1.1rem 1.2rem 1.1rem 3rem; border: 1px solid var(--linie); border-radius: 14px; background: var(--karte); color: var(--leise); font-size: 0.93rem; line-height: 1.45; }
.br-funktionen li::before, .br-punkte li::before { content: ""; position: absolute; left: 1.2rem; top: 1.45rem; width: 0.75rem; height: 0.4rem; border-left: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen); transform: rotate(-45deg); }
.br-funktionen b, .br-punkte b { display: block; margin-bottom: 0.2rem; color: var(--tinte); font-weight: var(--gewicht-betont); }
.br-punkte { display: grid; gap: 1rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
@media (min-width: 52rem) { .br-punkte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.br-gefunden .ehrlich { max-width: 44rem; margin: 0; padding: 0.9rem 1.1rem; border-left: 3px solid var(--gruen); background: var(--karte); font-size: 0.9rem; color: var(--leise); }
.br-abschluss > * { max-width: 46rem; }
.br-abschluss p { margin: 0 0 1.8rem; }
@media (max-width: 35.99rem) { .br-held { padding: 2rem 0 3rem; } }
.br-demo { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 52rem) { .br-demo { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3.5rem; } }
.br-demo .kopfzeile { margin: 0; }
.br-demo .kopfzeile p { margin: 0 0 1.2rem; }
.br-drin { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.br-drin li { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border: 1px solid var(--linie-stark); border-radius: 99px; background: var(--karte); color: var(--tinte); font-size: 0.84rem; }
.br-drin li::before { content: ""; width: 0.55rem; height: 0.3rem; margin-top: -0.15rem; border-left: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen); transform: rotate(-45deg); }
/* Branchenseite: Anfrage direkt auf der Seite */
.abschluss .formular .br-form-titel { margin: 0 0 0.2rem; color: var(--tinte); font-size: 1.3rem; font-weight: var(--gewicht-titel); line-height: 1.2; }
.br-form-zusagen { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0; padding: 0; list-style: none; color: var(--tinte); font-size: 0.84rem; font-weight: var(--gewicht-betont); }
.br-form-zusagen li { display: flex; align-items: center; gap: 0.4rem; }
.br-form-zusagen li::before { content: ""; width: 0.55rem; height: 0.3rem; margin-top: -0.15rem; border-left: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen); transform: rotate(-45deg); }
.abschluss .br-fakten { margin: 1.2rem 0 0; color: #dfd7cc; font-size: 0.88rem; }
.rechner-hinweis { margin: 1rem 0 0; color: var(--leise); font-size: 0.86rem; }
.br-leiste { display: none; }
@media (max-width: 55.99rem) {
  .br-leiste { position: fixed; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 30; display: block; transform: translateY(160%); visibility: hidden; transition: transform 0.35s ease, visibility 0s linear 0.35s; }
  .br-leiste.zeigen { transform: none; visibility: visible; transition: transform 0.35s ease; }
  .br-leiste .pille { justify-content: center; width: 100%; box-shadow: 0 16px 34px -14px rgba(28, 37, 50, 0.7); }
  .branchenseite .fuss { padding-bottom: 5.5rem; }
}
@media (prefers-reduced-motion: reduce) { .br-leiste { transition: none; } }

/* Branchenseite: Google-Suche mit zwei Beispielen */
.g-wahl { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 0.9rem; }
.g-wahl button { padding: 0.4rem 0.9rem; border: 1px solid var(--linie-stark); border-radius: 99px; background: var(--karte); color: var(--tinte); font: inherit; font-size: 0.84rem; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.g-wahl button:hover { border-color: var(--gruen-tief); }
.g-wahl button[aria-pressed="true"] { border-color: var(--gruen-tief); background: var(--gruen); color: #fff; }
.br-gefunden .g-anim .g-karte { opacity: 1; transform: none; }
.br-gefunden .g-organisch, .br-gefunden .g-anim.g-ergebnis .g-organisch { opacity: 1; }
.br-gefunden .g-organisch b { color: #5566b0; }
.br-gefunden .g-organisch .g-domain, .br-gefunden .g-organisch span:last-child { color: #4d5156; }
.br-gefunden .lokal-text .br-punkte { grid-template-columns: 1fr; margin-bottom: 1.2rem; }

/* Branchenseite: Schmerzpunkte zum Anklicken */
.schmerz-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: -1rem 0 1.6rem; }
.schmerz-filter button { padding: 0.5rem 1.05rem; border: 1px solid var(--linie-stark); border-radius: 99px; background: var(--karte); color: var(--tinte); font: inherit; font-size: 0.9rem; font-weight: var(--gewicht-betont); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.schmerz-filter button:hover { border-color: var(--gruen-tief); }
.schmerz-filter button[aria-pressed="true"] { border-color: var(--gruen-tief); background: var(--gruen); color: #fff; }
.schmerz-raster { display: grid; gap: 1rem; }
@media (min-width: 56rem) { .schmerz-raster { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 1.5rem; align-items: stretch; } }
.schmerz-liste { display: grid; gap: 0.5rem; align-content: start; }
.schmerz-tab { display: flex; gap: 0.9rem; align-items: flex-start; width: 100%; padding: 0.9rem 1.1rem; border: 1px solid var(--linie); border-radius: 14px; background: var(--karte); color: var(--tinte); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.schmerz-tab:hover { border-color: var(--linie-stark); transform: translateX(3px); }
.schmerz-tab[aria-selected="true"] { border-color: var(--gruen-tief); box-shadow: inset 0 0 0 1px var(--gruen), 0 18px 32px -26px rgba(28, 37, 50, 0.55); transform: none; }
.schmerz-tab:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }
.schmerz-tab .br-icon { width: 2.2rem; height: 2.2rem; }
.schmerz-tab b { display: block; font-weight: var(--gewicht-betont); line-height: 1.35; }
.schmerz-tab .kurz { display: none; }
.schmerz-tab small { display: block; margin-top: 0.3rem; color: var(--leise); font-size: 0.88rem; line-height: 1.45; }
.js .schmerz-tab[aria-selected="false"] small { display: none; }
.schmerz-panels { display: grid; }
.schmerz-panel { display: grid; gap: 1.5rem; align-items: center; padding: 1.6rem; border: 1px solid var(--linie); border-radius: 20px; background: var(--gruen-hauch); }
.schmerz-panel + .schmerz-panel { margin-top: 1rem; }
.js .schmerz-panel { margin-top: 0; }
.js .schmerz-panel:not(.aktiv) { display: none; }
.js .schmerz-panel.aktiv { animation: panel-rein 0.35s ease; }
@keyframes panel-rein { from { opacity: 0; transform: translateY(8px); } }
@media (min-width: 40rem) { .schmerz-panel { grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; padding: 2rem; } }
.sp-problem { margin: 0 0 1.2rem; padding: 0 0 1rem; border-bottom: 1px solid var(--linie-stark); color: var(--tinte); font-size: 0.92rem; }
.sp-problem b { color: #9c3a31; font-weight: var(--gewicht-betont); }
@media (min-width: 56rem) { .sp-problem { display: none; } }
.schmerz-panel h3 { margin: 0.2rem 0 0.6rem; color: var(--gruen-tief); font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.2; font-weight: var(--gewicht-titel); }
.schmerz-panel .sp-text > p:last-child { margin: 0; color: var(--tinte); }
.mini-handy { justify-self: center; display: grid; align-content: start; gap: 0.45rem; width: 12.5rem; min-height: 17rem; padding: 0.8rem 0.6rem 1rem; border: 6px solid #16171a; border-radius: 30px; background: #f4ede4; box-shadow: 0 26px 40px -24px rgba(28, 37, 50, 0.6); color: #2b221d; font-size: 0.74rem; line-height: 1.4; }
.mh-kopf { display: flex; justify-content: space-between; padding: 0 0.3rem 0.3rem; color: #5c5049; font-size: 0.66rem; font-weight: 700; }
.mh-karte { display: block; padding: 0.6rem 0.7rem; border-radius: 12px; background: #fff; box-shadow: 0 8px 16px -12px rgba(0, 0, 0, 0.35); }
.mh-karte b { display: block; margin-bottom: 0.15rem; font-size: 0.8rem; }
.mh-klein { display: block; color: #5c5049; }
.mh-neu { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.2rem; color: #2f5f3a; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.mh-neu::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #3f9a5c; }
.mh-knoepfe { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.mh-knoepfe span { padding: 0.2rem 0.6rem; border: 1px solid #2b221d; border-radius: 99px; font-size: 0.68rem; font-weight: 700; }
.mh-knoepfe span.voll { background: #2b221d; color: #fff; }
.mh-zeile { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px dashed #e2d6c7; }
.mh-zeile span:last-child { font-weight: 700; }
/* Nichts darf über den Handyrahmen ragen: eine Spalte in Handybreite, lange Wörter trennen, Wert rutscht als Ganzes in die nächste Zeile, wenn er nicht neben die Bezeichnung passt */
.mini-handy { grid-template-columns: minmax(0, 1fr); }
.mini-handy > * { min-width: 0; }
.mh-karte { overflow-wrap: break-word; }
.mh-zeile { flex-wrap: wrap; row-gap: 0; }
.mh-zeile > span:first-child { flex: 1 0 auto; max-width: 100%; }
.mh-zeile > span:last-child { margin-left: auto; max-width: 100%; text-align: right; }
@media (max-width: 55.99rem) {
  .schmerz-liste { display: flex; gap: 0.4rem; overflow-x: auto; margin: 0 -1rem; padding: 0.2rem 1rem 0.4rem; scroll-padding-inline: 1rem; scroll-snap-type: x proximity; scrollbar-width: none; }
  .schmerz-liste::-webkit-scrollbar { display: none; }
  .schmerz-tab { flex: none; align-items: center; gap: 0.5rem; width: auto; padding: 0.4rem 0.9rem 0.4rem 0.4rem; border-radius: 99px; scroll-snap-align: start; }
  .schmerz-tab:hover { transform: none; }
  .schmerz-tab .br-icon { width: 1.9rem; height: 1.9rem; border-radius: 50%; }
  .schmerz-tab .lang, .schmerz-tab small { display: none; }
  .schmerz-tab .kurz { display: block; white-space: nowrap; }
  /* Handy: Filter und Themen-Schalter kompakt, jeweils in einer wischbaren Reihe */
  .schmerz-filter { flex-wrap: nowrap; overflow-x: auto; margin: -1rem -1rem 1rem; padding: 0.1rem 1rem; scrollbar-width: none; }
  .schmerz-filter::-webkit-scrollbar { display: none; }
  .schmerz-filter { gap: 0.3rem; }
  .schmerz-filter button { flex: none; padding: 0.35rem 0.7rem; font-size: 0.78rem; white-space: nowrap; }
  .schmerz-tab { gap: 0.4rem; padding: 0.25rem 0.75rem 0.25rem 0.25rem; font-size: 0.84rem; }
  .schmerz-tab .br-icon { width: 1.6rem; height: 1.6rem; }
  .schmerz-tab .br-icon svg { width: 1rem; height: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .js .schmerz-panel.aktiv { animation: none; } .schmerz-tab { transition: none; } }

/* Branchenseite: Rechner „leerer Stuhl“ */
.rechner-karte { display: grid; gap: 1.5rem; padding: 1.4rem; border: 1px solid var(--linie-stark); border-radius: 20px; background: var(--karte); }
@media (min-width: 52rem) { .rechner-karte { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 3rem; padding: 2.2rem; align-items: center; } }
.rechner-regler { display: grid; gap: 0.55rem; margin-bottom: 1.5rem; color: var(--tinte); font-size: 0.95rem; font-weight: var(--gewicht-betont); }
.rechner-regler:last-child { margin-bottom: 0; }
.rechner-regler span { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.rechner-regler output { color: var(--gruen-tief); font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rechner-regler input { width: 100%; margin: 0; accent-color: var(--gruen-tief); cursor: pointer; }
.rechner-ergebnis { padding: 1.6rem; border-radius: 16px; background: linear-gradient(150deg, #1c2532, #262f3b); color: #f8eed8; }
.rechner-ergebnis small { display: block; color: #ead8bd; font-size: 0.75rem; font-weight: var(--gewicht-betont); letter-spacing: 0.08em; text-transform: uppercase; }
.rechner-ergebnis b { display: block; margin: 0.3rem 0 0.7rem; color: #fff; font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: var(--gewicht-titel); line-height: 1.05; font-variant-numeric: tabular-nums; }
.rechner-ergebnis p { margin: 0 0 1.3rem; color: #f0e4d1; font-size: 0.95rem; }
.rechner-ergebnis .pille { background: #fff; color: var(--gruen-tief); }
.br-rechner .ehrlich { max-width: 44rem; margin: 1.4rem 0 0; padding: 0.9rem 1.1rem; border-left: 3px solid var(--gruen); background: var(--karte); color: var(--leise); font-size: 0.9rem; }
.br-zusagen a { color: var(--gruen-tief); }
#br-ueber .weiter-schritte { margin: 0.8rem 0 1.8rem; }

/* Einstieg der Branchenseite: Demo als Browserfenster mit Handy davor */
.br-geraete { position: relative; display: block; padding: 0 1.6rem 3.4rem 0; color: inherit; text-decoration: none; }
.br-laptop { display: block; overflow: hidden; border: 1px solid var(--linie); border-radius: 14px; background: #fff; box-shadow: 0 30px 60px -30px rgba(28, 37, 50, 0.45); transition: transform 0.3s ease; }
.br-laptop img { display: block; width: 100%; height: auto; }
.br-adresse { margin-left: 0.6rem; padding: 0.05rem 0.8rem; border-radius: 99px; background: var(--flaeche); color: var(--leise); font-size: 0.7rem; line-height: 1.5; }
.br-handy { position: absolute; right: 0; bottom: 0; width: 27%; overflow: hidden; border: 5px solid #16171a; border-radius: 24px; background: #16171a; box-shadow: 0 34px 50px -22px rgba(28, 37, 50, 0.6); transition: transform 0.3s ease; }
.br-handy::before { content: ""; position: absolute; top: 5px; left: 50%; z-index: 1; width: 30%; height: 9px; border-radius: 99px; background: #16171a; transform: translateX(-50%); }
.br-handy img { display: block; width: 100%; height: auto; border-radius: 19px; }
.br-geraete:hover .br-laptop { transform: translateY(-3px); }
.br-geraete:hover .br-handy { transform: translateY(-7px); }
.br-geraete-hinweis { display: inline-flex; align-items: center; gap: 0.55rem; position: absolute; left: 0; bottom: 0; padding: 0.45rem 1rem 0.45rem 0.85rem; border: 1.5px solid var(--gruen); border-radius: 99px; background: #fff; color: var(--gruen-tief); font-size: 0.82rem; font-weight: var(--gewicht-betont); box-shadow: 0 10px 22px -14px rgba(235, 118, 54, 0.55); transition: background 0.2s; }
.br-geraete:hover .br-geraete-hinweis { background: var(--gruen-hauch); }
.br-geraete-hinweis i { position: relative; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #eb7636; box-shadow: 0 0 8px 2px rgba(235, 118, 54, 0.65); }
.br-geraete-hinweis i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #eb7636; animation: live-puls 1.8s ease-out infinite; }
@keyframes live-puls { from { transform: scale(1); opacity: 0.8; } to { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .br-geraete-hinweis i::after { animation: none; } }
@media (max-width: 35.99rem) { .br-geraete { padding: 0 0.8rem 3rem 0; } .br-handy { width: 30%; border-width: 4px; border-radius: 17px; } .br-handy img { border-radius: 13px; } .br-geraete-hinweis { font-size: 0.78rem; } }
@media (prefers-reduced-motion: reduce) { .br-laptop, .br-handy { transition: none; } }
.br-demo-bild { display: block; overflow: hidden; border: 1px solid var(--linie); border-radius: 14px; background: var(--karte); box-shadow: 0 30px 60px -30px rgba(28, 37, 50, 0.4); transition: transform 0.25s; }
.br-demo-bild:hover { transform: translateY(-3px); }
.br-demo-bild img { display: block; width: 100%; height: auto; }
.br-browser { display: flex; gap: 0.35rem; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--linie); }
.br-browser i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--linie); }

/* Startseite: weiche Farbflächen. Eine Ebene hinter allen Abschnitten, damit die Verläufe über die Grenzen fließen
   und nirgends abgeschnitten werden. Mint und warmes Sand im Wechsel, keine Muster, keine Bewegung mit der Maus. */
:is(.startseite, .branchenseite) main { position: relative; isolation: isolate; }
.farbflaechen { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.farbflaechen i { position: absolute; width: 72rem; height: 58rem; border-radius: 50%; background: radial-gradient(closest-side, var(--f), transparent); transform: translate(-50%, -50%); }
.farbflaechen i:nth-child(1) { top: 12%; left: 96%; --f: rgba(240, 200, 142, 0.38); }
.farbflaechen i:nth-child(2) { top: 19%; left: 2%; --f: rgba(248, 238, 216, 0.42); }
.farbflaechen i:nth-child(3) { top: 29%; left: 98%; --f: rgba(248, 238, 216, 0.42); }
.farbflaechen i:nth-child(4) { top: 38%; left: 0%; --f: rgba(240, 200, 142, 0.38); }
.farbflaechen i:nth-child(5) { top: 49%; left: 100%; --f: rgba(240, 200, 142, 0.38); }
.farbflaechen i:nth-child(6) { top: 58%; left: 3%; --f: rgba(248, 238, 216, 0.42); }
.farbflaechen i:nth-child(7) { top: 67%; left: 97%; --f: rgba(248, 238, 216, 0.42); }
.farbflaechen i:nth-child(8) { top: 76%; left: 1%; --f: rgba(240, 200, 142, 0.38); }
.farbflaechen i:nth-child(9) { top: 85%; left: 99%; --f: rgba(240, 200, 142, 0.38); }
@media (max-width: 59.99rem) { .farbflaechen i { width: 34rem; height: 30rem; } }
/* Abschnitte ohne harte Linien: helle Flächen laufen oben und unten weich aus */
:is(.startseite, .branchenseite) .abschnitt { border-top-color: transparent; }
:is(.startseite, .branchenseite) .abschnitt.flaeche { background: none; }
:is(.startseite, .branchenseite) .abschnitt.flaeche::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(240, 235, 228, 0.72);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9rem, #000 calc(100% - 9rem), transparent); mask-image: linear-gradient(to bottom, transparent, #000 9rem, #000 calc(100% - 9rem), transparent); }
.startseite #fragen::before { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9rem); mask-image: linear-gradient(to bottom, transparent, #000 9rem); }
:is(.startseite, .branchenseite) .abschnitt { position: relative; }
/* Einstieg: warmer Schimmer links unten zum Grün rechts */
.startseite .einstieg::after { content: ""; position: absolute; left: -16rem; bottom: -22rem; z-index: -1; width: 60rem; height: 44rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(240, 200, 142, 0.34), transparent); pointer-events: none; }
/* dunkle Bereiche: weicher Schimmer von innen, läuft vor den Kanten aus */
.startseite .fakten { background-image: radial-gradient(46rem 11rem at 82% 50%, rgba(235, 118, 54, 0.16), transparent 72%), radial-gradient(30rem 10rem at 8% 60%, rgba(240, 200, 142, 0.08), transparent 72%); }
:is(.startseite, .branchenseite) .abschluss { background-image: radial-gradient(52rem 24rem at 18% 48%, rgba(235, 118, 54, 0.15), transparent 72%), radial-gradient(40rem 22rem at 88% 70%, rgba(240, 200, 142, 0.07), transparent 72%); }
/* Farbflächen treiben sehr langsam und zeitversetzt (nur transform, ruht bei „Bewegung reduzieren“) */
@keyframes treiben-a { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(calc(-50% + 6vw), calc(-50% - 7rem)) scale(1.08); } 100% { transform: translate(calc(-50% - 3vw), calc(-50% + 5rem)) scale(0.95); } }
@keyframes treiben-b { 0% { transform: translate(-50%, -50%) scale(1.04); } 50% { transform: translate(calc(-50% - 7vw), calc(-50% + 6rem)) scale(0.94); } 100% { transform: translate(calc(-50% + 4vw), calc(-50% - 4rem)) scale(1.07); } }
@keyframes treiben-c { 0% { transform: translate(-50%, -50%) scale(0.97); } 50% { transform: translate(calc(-50% + 4vw), calc(-50% + 8rem)) scale(1.05); } 100% { transform: translate(calc(-50% - 5vw), calc(-50% - 3rem)) scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .farbflaechen i { animation: treiben-a 46s ease-in-out infinite alternate; }
  .farbflaechen i:nth-child(3n + 2) { animation-name: treiben-b; animation-duration: 58s; }
  .farbflaechen i:nth-child(3n) { animation-name: treiben-c; animation-duration: 52s; }
  .farbflaechen i:nth-child(2) { animation-delay: -12s; }
  .farbflaechen i:nth-child(3) { animation-delay: -30s; }
  .farbflaechen i:nth-child(4) { animation-delay: -21s; }
  .farbflaechen i:nth-child(5) { animation-delay: -38s; }
  .farbflaechen i:nth-child(6) { animation-delay: -7s; }
  .farbflaechen i:nth-child(7) { animation-delay: -44s; }
  .farbflaechen i:nth-child(8) { animation-delay: -17s; }
  .farbflaechen i:nth-child(9) { animation-delay: -33s; }
}
/* Vorher-Ebene Salon: rosa Kopf wie um 2010 */
.ebene.alt .alt-kopf { background: linear-gradient(#fff, #fbe4ee); }
.ebene.alt .alt-slider b { font-family: "Comic Sans MS", "Comic Sans", cursive; }
/* Friseur-Seite: eigene Lage der Farbflächen (kürzere Seite, Einstieg ohne dunkles Band darunter) */
.branchenseite .farbflaechen i:nth-child(1) { top: 4%; left: 94%; --f: rgba(248, 238, 216, 0.42); }
.branchenseite .farbflaechen i:nth-child(2) { top: 10%; left: 3%; --f: rgba(240, 200, 142, 0.38); }
.branchenseite .farbflaechen i:nth-child(3) { top: 24%; left: 98%; --f: rgba(240, 200, 142, 0.38); }
.branchenseite .farbflaechen i:nth-child(4) { top: 37%; left: 1%; --f: rgba(248, 238, 216, 0.42); }
.branchenseite .farbflaechen i:nth-child(5) { top: 51%; left: 99%; --f: rgba(248, 238, 216, 0.42); }
.branchenseite .farbflaechen i:nth-child(6) { top: 64%; left: 2%; --f: rgba(240, 200, 142, 0.38); }
.branchenseite .farbflaechen i:nth-child(7) { top: 77%; left: 97%; --f: rgba(240, 200, 142, 0.38); }
.branchenseite .farbflaechen i:nth-child(8) { top: 89%; left: 4%; --f: rgba(248, 238, 216, 0.42); }
/* Branchenseite Handwerk: Fotos und Vorher/Nachher im kleinen Handy */
.mh-fotos { display: flex; gap: 0.3rem; margin-top: 0.45rem; }
.mh-fotos i { width: 2.1rem; height: 2.1rem; border-radius: 6px; background: #d9d2c6 url("/bilder/hw-anfrage-1.webp") center / cover; }
.mh-fotos i:nth-child(2) { background-image: url("/bilder/hw-anfrage-2.webp"); }
.mh-fotos i:nth-child(3) { background-image: url("/bilder/hw-anfrage-3.webp"); }
.mh-vorher { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; margin-top: 0.45rem; }
.mh-vorher i { display: grid; place-items: end start; height: 4.2rem; padding: 0.3rem; border-radius: 8px; background: linear-gradient(transparent 45%, rgba(0, 0, 0, 0.55)), #8c857b url("/bilder/hw-vorher.webp") center / cover; color: #fff; font-size: 0.6rem; font-style: normal; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.mh-vorher i:last-child { background: linear-gradient(transparent 45%, rgba(0, 0, 0, 0.55)), #b7c8cf url("/bilder/hw-nachher.webp") center / cover; }
/* Vorher/Nachher: Umschalter Friseur / Handwerk über dem Fenster */
.wahl { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.8rem; font-size: 0.85rem; }
.wahl span { margin-right: 0.3rem; color: var(--leise); font-weight: var(--gewicht-betont); }
.wahl button { min-height: 2.4rem; padding: 0.35rem 1rem; border: 1px solid var(--linie-stark); border-radius: 99px; background: var(--karte); color: var(--tinte); font: inherit; font-weight: var(--gewicht-betont); cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.wahl button:hover { border-color: var(--tinte); }
.wahl button[aria-pressed="true"] { border-color: var(--tinte); background: var(--tinte); color: #fff; cursor: default; }
.wahl button:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }
/* Knopfreihe richtet sich nach der Breite des Vergleichsfensters: schmaler ohne das Wort „Beispiel“, ganz schmal als Raster vier oben und drei unten */
.vergleich { container-type: inline-size; }
/* Computer: Fenster so breit wie mit fünf Knöpfen (31,65 rem), damit die Überschrift links genau wie vorher umbricht */
@media (min-width: 60rem) { .vergleich { min-width: 31.65rem; } }
@container (max-width: 36.5rem) {
  .vergleich .wahl { justify-content: flex-end; margin-left: 0; }
  .vergleich .wahl span { display: none; }
  .vergleich .wahl button { padding: 0.35rem 0.55rem; }
}
@container (max-width: 30.5rem) {
  .vergleich .wahl { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .vergleich .wahl button { grid-column: span 3; min-width: 0; padding: 0.35rem 0.3rem; font-size: 0.82rem; }
  .vergleich .wahl button:nth-last-child(-n+3) { grid-column: span 4; }
}
.ebene[hidden] { display: none; }
/* Vorher-Ebene Handwerk: blau-gelb, Serifenschrift, Besucherzähler */
.ebene.alt.alt-hw { color: #555; }
.ebene.alt.alt-hw .alt-oben { background: #ffcc00; color: #1c3f94; font-weight: bold; }
.ebene.alt.alt-hw .alt-kopf { border-bottom-color: #1c3f94; background: linear-gradient(#fff, #dfe8fb); }
.alt-hw .alt-marke { color: #1c3f94; font: bold 17px/1 "Times New Roman", Times, serif; letter-spacing: 0.02em; }
.alt-hw .alt-menue { color: #1c3f94; }
.alt-hw .alt-slider { background-color: #5d6b82; background-image: url("/bilder/hw-vorher.webp"); background-position: center 55%; }
.ebene.alt.alt-hw .alt-slider b { color: #ffcc00; font-family: "Times New Roman", Times, serif; font-size: 16px; font-weight: bold; text-shadow: 1px 1px 0 #000, 0 0 6px rgba(0, 0, 0, 0.9); }
.alt-hw .alt-inhalt b { color: #1c3f94; font-weight: bold; }
.alt-hw .alt-seite { border-left-color: #ffcc00; background: #eef2fa; }
.alt-hw .alt-seite u { padding: 0 3px; background: #000; color: #3f3; font-family: "Courier New", monospace; text-decoration: none; }
.alt-hw .alt-cookie { background: rgba(28, 63, 148, 0.92); color: #fff; }
/* Branchenseiten ohne Demo: Handy mit eingehenden Nachrichten im Einstieg */
.br-eingang { position: relative; display: grid; justify-items: center; padding: 0.5rem 0 1rem; }
.br-eingang-handy { width: 15.5rem; min-height: 21rem; font-size: 0.82rem; }
.br-eingang-handy .mh-karte b { font-size: 0.86rem; }
.br-eingang-notiz { position: absolute; left: 50%; bottom: 0; display: grid; margin-left: 4.5rem; padding: 0.55rem 0.9rem; border: 1px solid var(--linie); border-radius: 12px; background: var(--karte); color: var(--leise); font-size: 0.78rem; line-height: 1.35; box-shadow: 0 18px 34px -20px rgba(28, 37, 50, 0.45); }
.br-eingang-notiz b { color: var(--tinte); font-size: 0.86rem; }
@media (max-width: 36rem) { .br-eingang-notiz { left: auto; right: 0; margin-left: 0; } }
/* Bau: Baustellenfotos als ruhige Flächen, Projektbild, Zahlen aus der Branche */
.mh-fotos.bau i { background: #b8b2a8 url("/bilder/bau-rohbau.webp") 0% 50% / cover; }
.mh-fotos.bau i:nth-child(2) { background-position: 55% 50%; }
.mh-fotos.bau i:nth-child(3) { background-position: 100% 50%; }
.mh-bild { display: block; height: 5.4rem; margin-top: 0.45rem; border-radius: 8px; background: #c9c2b6 url("/bilder/bau-haus.webp") center 40% / cover; }
.mh-bild.halle { background-color: #9fb2c4; background-image: url("/bilder/bau-halle.webp"); background-position: 60% 60%; }
.br-zahlen { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--linie); }
.br-zahlen-titel { margin: 0 0 1.2rem; color: var(--tinte); font-size: 1.05rem; font-weight: var(--gewicht-betont); }
.br-zahlen ul { display: grid; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .br-zahlen ul { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.br-zahlen li { display: grid; gap: 0.35rem; align-content: start; }
.br-zahlen b { color: var(--gruen-tief); font-family: var(--titel); font-size: 2rem; font-weight: var(--gewicht-titel); line-height: 1.1; }
.br-zahlen span { color: var(--text); font-size: 0.95rem; line-height: 1.5; }
.br-zahlen small { color: var(--leise); font-size: 0.8rem; }
.br-zahlen small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.br-zahlen small a:hover { color: var(--tinte); }
/* Vorher-Ebene Bau: grau-rot, Verdana, Stand 2011 */
.ebene.alt.alt-bau { color: #555; font-family: Verdana, Geneva, sans-serif; }
.ebene.alt.alt-bau .alt-oben { background: #8b1a1a; color: #f3d9d9; }
.ebene.alt.alt-bau .alt-kopf { border-bottom-color: #8b1a1a; background: linear-gradient(#f4f4f4, #cfcfcf); }
.alt-bau .alt-marke { color: #8b1a1a; font: bold 18px/1 Impact, "Arial Black", sans-serif; letter-spacing: 0.04em; }
.alt-bau .alt-marke small { color: #666; font-family: Verdana, Geneva, sans-serif; }
.alt-bau .alt-menue { color: #333; }
.alt-bau .alt-slider { background-color: #6b6b6b; background-image: url("/bilder/bau.webp"); background-position: center 35%; }
.ebene.alt.alt-bau .alt-slider b { color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 16px; font-weight: bold; text-shadow: 2px 2px 0 #8b1a1a, 0 0 6px rgba(0, 0, 0, 0.9); }
.alt-bau .alt-inhalt b { color: #8b1a1a; font-weight: bold; }
.alt-bau .alt-seite { border-left-color: #8b1a1a; background: #eee; }
.alt-bau .alt-seite u { color: #1a0dab; }
.alt-bau .alt-cookie { background: rgba(60, 60, 60, 0.94); color: #eee; }
.ebene.alt.alt-zahn { color: #4a5a5a; font-family: "Trebuchet MS", Tahoma, sans-serif; }
.ebene.alt.alt-zahn .alt-oben { background: #0b8f8f; color: #e4fbfb; }
.ebene.alt.alt-zahn .alt-kopf { border-bottom-color: #0b8f8f; background: linear-gradient(#ffffff, #d6f2f2); }
.alt-zahn .alt-marke { color: #0b7a7a; font: bold 15px/1.1 "Trebuchet MS", Tahoma, sans-serif; }
.alt-zahn .alt-marke small { color: #6a8a8a; }
.alt-zahn .alt-menue { color: #0b7a7a; }
.alt-zahn .alt-slider { background-color: #7fb8b8; background-image: url("/beispiel/zahnarzt-hoelscher/bilder/raum-behandlung.webp"); background-position: center 45%; }
.ebene.alt.alt-zahn .alt-slider b { color: #fff; font-family: "Comic Sans MS", "Trebuchet MS", sans-serif; font-size: 16px; font-weight: bold; text-shadow: 2px 2px 0 #0b7a7a, 0 0 6px rgba(0, 0, 0, 0.85); }
.alt-zahn .alt-inhalt b { color: #0b7a7a; font-weight: bold; }
.alt-zahn .alt-seite { border-left-color: #0b8f8f; background: #e8f6f6; }
.alt-zahn .alt-seite u { color: #1a0dab; }
.alt-zahn .alt-cookie { background: rgba(11, 110, 110, 0.93); color: #fff; }
.ebene.alt.alt-aesth { color: #666; font-family: Tahoma, Verdana, sans-serif; }
.ebene.alt.alt-aesth .alt-oben { background: #d6247a; color: #ffe3f0; }
.ebene.alt.alt-aesth .alt-kopf { border-bottom-color: #d6247a; background: linear-gradient(#ffffff, #ffd6ea); }
.alt-aesth .alt-marke { color: #c2185b; font: 18px/1 "Monotype Corsiva", "Brush Script MT", "Segoe Script", cursive; }
.alt-aesth .alt-marke small { color: #888; font-family: Tahoma, Verdana, sans-serif; }
.alt-aesth .alt-menue { color: #c2185b; }
.alt-aesth .alt-slider { background-color: #e7a3c3; background-image: url("/beispiel/aesthetik-hoyerstedt/bilder/raum-behandlung.webp"); background-position: center 50%; }
.ebene.alt.alt-aesth .alt-slider b { color: #fff; font-family: "Monotype Corsiva", "Brush Script MT", "Segoe Script", cursive; font-size: 18px; font-weight: normal; text-shadow: 2px 2px 0 #c2185b, 0 0 8px rgba(0, 0, 0, 0.8); }
.alt-aesth .alt-inhalt b { color: #c2185b; font-weight: bold; }
.alt-aesth .alt-seite { border-left-color: #d6247a; background: #fff0f7; }
.alt-aesth .alt-seite u { color: #1a0dab; }
.alt-aesth .alt-cookie { background: rgba(60, 60, 60, 0.94); color: #fff; }
/* Vorher-Ebene Auto: Schwarz-Rot mit Chromkopf, Impact, um 2012 */
.ebene.alt.alt-auto { background: #1b1b1b; color: #bbb; font-family: Verdana, Geneva, sans-serif; }
.ebene.alt.alt-auto .alt-oben { background: #c40000; color: #ffe0e0; }
.ebene.alt.alt-auto .alt-kopf { border-bottom-color: #c40000; background: linear-gradient(#f2f2f2, #9a9a9a 55%, #cfcfcf); }
.alt-auto .alt-marke { color: #c40000; font: 18px/1 Impact, "Arial Black", sans-serif; letter-spacing: 0.03em; text-shadow: 1px 1px 0 #fff; }
.alt-auto .alt-marke small { color: #333; font-family: Verdana, Geneva, sans-serif; text-shadow: none; }
.alt-auto .alt-menue { color: #222; }
.alt-auto .alt-slider { background-color: #333; background-image: url("/beispiel/ellerbrock-aufbereitung/bilder/folie-dunkel.webp"); background-position: center 55%; }
.ebene.alt.alt-auto .alt-slider b { color: #fff; font-family: Impact, "Arial Black", sans-serif; font-size: 18px; font-weight: normal; text-shadow: 2px 2px 0 #c40000, 0 0 8px rgba(0, 0, 0, 0.9); }
.alt-auto .alt-inhalt b { color: #ff3333; font-weight: bold; }
.alt-auto .alt-seite { border-left-color: #c40000; background: #2a2a2a; }
.alt-auto .alt-seite u { color: #ffcc00; }
.alt-auto .alt-cookie { background: rgba(196, 0, 0, 0.92); color: #fff; }
/* Vorher-Ebene Kanzlei: Dunkelgrün und Gold, Times, Justitia, um 2008 */
.ebene.alt.alt-kanzlei { color: #4a4a3a; font-family: "Times New Roman", Times, serif; }
.ebene.alt.alt-kanzlei .alt-oben { background: #0f3d2a; color: #e8d9a8; }
.ebene.alt.alt-kanzlei .alt-kopf { border-bottom-color: #b8963e; background: linear-gradient(#fbf6ea, #e6d8b4); }
.alt-kanzlei .alt-marke { color: #0f3d2a; font: bold 18px/1 "Times New Roman", Times, serif; letter-spacing: 0.02em; }
.alt-kanzlei .alt-marke small { color: #7a6a3a; font-style: normal; }
.alt-kanzlei .alt-menue { color: #0f3d2a; }
.alt-kanzlei .alt-slider { background-color: #556b5a; background-image: url("/bilder/kanzlei.webp"); background-position: center 40%; }
.ebene.alt.alt-kanzlei .alt-slider b { color: #f4e3a6; font-family: "Times New Roman", Times, serif; font-size: 17px; font-weight: bold; text-shadow: 1px 1px 0 #000, 0 0 8px rgba(0, 0, 0, 0.9); }
.alt-kanzlei .alt-inhalt b { color: #0f3d2a; font-weight: bold; }
.alt-kanzlei .alt-seite { border-left-color: #b8963e; background: #f6f0df; }
.alt-kanzlei .alt-seite u { color: #1a0dab; }
.alt-kanzlei .alt-cookie { background: rgba(15, 61, 42, 0.94); color: #f4e3a6; }

/* Cookie-Abfrage (zustimmung.js): unten, fest, ohne die Seite zu verschieben. Ablehnen und Annehmen gleich groß. */
.zustimmung { position: fixed; left: 50%; bottom: 1rem; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; width: min(46rem, calc(100% - 2rem)); padding: 1rem 1.15rem; border: 1px solid var(--linie-stark); border-radius: 14px; background: var(--karte); color: var(--tinte); box-shadow: 0 18px 40px -18px rgba(28, 37, 50, 0.45); transform: translateX(-50%); }
.zustimmung p { flex: 1 1 18rem; margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--text); }
.zustimmung a { color: var(--gruen-tief); }
.zustimmung-knoepfe { display: flex; gap: 0.5rem; }
.zustimmung-knoepfe button { min-width: 7.5rem; min-height: 2.75rem; padding: 0.55rem 1rem; border: 1.5px solid var(--gruen); border-radius: 99px; background: var(--karte); color: var(--gruen-tief); font: inherit; font-size: 0.9rem; font-weight: var(--gewicht-betont); cursor: pointer; }
.zustimmung-knoepfe button:hover { background: var(--gruen-hauch); }
.zustimmung-knoepfe button[data-wahl="ja"] { background: var(--gruen); color: #fff; }
.zustimmung-knoepfe button[data-wahl="ja"]:hover { border-color: var(--gruen-tief); background: var(--gruen-tief); }
.zustimmung-knoepfe button:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }
@media (max-width: 35.99rem) { .zustimmung { bottom: 0.5rem; gap: 0.65rem; width: calc(100% - 1rem); padding: 0.8rem 0.85rem 0.85rem; } .zustimmung p { font-size: 0.8rem; line-height: 1.45; } .zustimmung-knoepfe { width: 100%; } .zustimmung-knoepfe button { flex: 1; min-height: 2.75rem; padding-top: 0.45rem; padding-bottom: 0.45rem; } }
.fuss-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.fuss-link:hover { color: var(--tinte); text-decoration: underline; }

/* Team statt Ahmet allein (14.10.2026): drei kleine runde Fotos und Team-Karten wie auf der Landingpage */
.team-reihe { display: flex; flex: none; }
.team-reihe > i.team-reihe-foto { display: block; overflow: hidden; width: 2.8rem; height: 2.8rem; border: 2px solid var(--tinte); border-radius: 50%; background: var(--gruen-hauch); }
.team-reihe > i.team-reihe-foto + i { margin-left: -0.6rem; }
.team-reihe > i.team-reihe-foto > img { display: block; width: 100%; height: 100%; border-radius: 0; box-shadow: none; object-fit: cover; object-position: center 22%; }
.persoenlich .team-reihe > i.team-reihe-foto, .ablauf .team-reihe > i.team-reihe-foto { border-color: var(--karte); }
.team-reihe.klein > i.team-reihe-foto { width: 2.2rem; height: 2.2rem; }
.team-reihe.klein > i.team-reihe-foto + i { margin-left: -0.5rem; }
.team-karten { display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.team-karte { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.15rem 1.2rem; border: 1px solid var(--linie); border-radius: 20px; background: var(--karte); box-shadow: 0 18px 36px -28px rgba(28, 37, 50, 0.45); }
.team-karte-foto { display: block; overflow: hidden; width: 3.1rem; height: 3.1rem; border-radius: 14px; background: var(--gruen-hauch); }
.team-karte-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.team-karte p { max-width: none; margin: 0; }
.team-karte-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.55rem; }
.team-karte-name b { color: var(--tinte); font-size: 1.12rem; font-weight: var(--gewicht-titel); letter-spacing: -0.01em; }
.team-karte-name span { padding: 0.12rem 0.6rem; border-radius: 999px; background: var(--gruen-hauch); color: var(--gruen-tief); font-size: 0.74rem; font-weight: var(--gewicht-betont); }
.team-karte .team-karte-aufgabe { margin-top: 0.2rem; color: var(--gruen-tief); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.team-karte .team-karte-satz { margin-top: 0.4rem; color: var(--text); font-size: 0.92rem; line-height: 1.5; }
.ueber-raster { align-items: start; }
@media (max-width: 51.99rem) { .ueber-raster .team-karten { order: 2; } }
@media (max-width: 40rem) {
  .team-karte { gap: 0.85rem; padding: 1rem; grid-template-columns: 2.7rem minmax(0, 1fr); }
  .team-karte-foto { width: 2.7rem; height: 2.7rem; border-radius: 12px; }
  .team-reihe > i.team-reihe-foto { width: 2.4rem; height: 2.4rem; }
}

/* Solange der Cookie-Hinweis offen ist, bleibt unten Platz, damit nichts dauerhaft darunter verschwindet (16.10.2026) */
html.zustimmung-offen body { padding-bottom: var(--zustimmung-hoehe, 0); }

/* Zurückhaltende Akzente für den persönlichen Freelancer-Auftritt. */
h2 em { color: inherit; }
.farbflaechen { opacity: 0.22; }

/* Palette nach jonasarleth.com/service: #1c2532, #eb7636, #f8eed8, #f0ebe4. */
.kopf, .kopf.gescrollt { background: #1c2532; border-color: #364353; color: #f8eed8; }
.kopf .marke, .kopf nav a:not(.pille), .kopf nav a:not(.pille):hover { color: #f8eed8; }
.kopf .wortmarke span { color: #eb7636; }
.kopf .anruf { color: #f8eed8; border-color: #5d6c7b; }
.kopf .menue-knopf span, .kopf .menue-knopf span::before, .kopf .menue-knopf span::after { background: #f8eed8; }
.kopf.offen .menue-knopf span { background: transparent; }
.kopf.offen .menue-links { background: #1c2532; border-color: #364353; }
.kopf.offen .menue-links a { border-color: #364353; }
.einstieg { background: #1c2532; color: #f8eed8; }
.einstieg::before, .startseite .einstieg::after { display: none; }
.einstieg h1, .einstieg .schmerz { color: #f8eed8; }
.einstieg h1 em { color: #eb7636; }
.einstieg .hinweis, .einstieg .wahl > span { color: #f8eed8; }
.einstieg .plakette { background: #262f3b; border-color: #5d6c7b; color: #f8eed8; }
.einstieg .wahl button { background: #262f3b; border-color: #5d6c7b; color: #f8eed8; }
.einstieg .wahl button[aria-pressed="true"] { background: #f8eed8; border-color: #f8eed8; color: #1c2532; }
.pille:not(.leer) { color: #1c2532; }
.pille:not(.leer):hover { background: #f29a6a; }
.wahl label:has(input[value="ja"]:checked), ol.ablauf li::before, .sz-uhr, .kacheln label:has(input:checked) { color: #1c2532; }
.farbflaechen { opacity: 0.12; }

/* Zweiter Link im Einstieg führt zu Daniels bestehendem Portfolio. */
.einstieg .aktionen { align-items: center; gap: 1rem 1.5rem; }
.einstieg .hero-projekte { color: #f8eed8; font-size: 0.95rem; font-weight: 500; text-decoration: underline; text-underline-offset: 0.3em; }
.einstieg .hero-projekte:hover { color: #eb7636; }
@container (max-width: 32.5rem) { .einstieg .hinweis { grid-template-columns: 1fr; } }

/* Vier klare Zeilen halten die längere Botschaft im Hero ruhig und lesbar. */
.einstieg h1 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -0.035em; margin: 1.35rem 0 1.5rem; }
.einstieg h1 .hero-zeile { display: block; }
.einstieg h1 em { margin-bottom: 0.16em; }

/* Persönlicher handschriftlicher Akzent, lokal geladene Schrift. */
@font-face { font-family: "Caveat"; src: url("/fonts/caveat-600.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
.einstieg .hero-handschrift { display: inline-block; font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-size: 1.5em; font-weight: 600; line-height: 0.85; color: #eb7636; transform: rotate(-5deg); transform-origin: center; }

/* Anpassungen aus den Seitenkommentaren: Kontraststreifen, Profil und klare Zusagen. */
.startseite .fakten { background: #f0ebe4; background-image: none; color: #384861; border-bottom: 1px solid #dedbd6; }
.startseite .fakten b { color: #1c2532; }
.startseite .fakten .rahmen > div { border-color: #c8c1b7; }
#ueber .team-karte { grid-template-columns: 5.25rem minmax(0, 1fr); }
#ueber .profilbild { margin: 0; min-width: 0; }
#ueber .team-karte-foto { width: 100%; height: 6.55rem; border-radius: 12px; }
#ueber .team-karte-foto img { object-position: center 25%; }
#ueber .profilbild figcaption { margin-top: 0.35rem; color: #5d6c7b; font-size: 0.64rem; line-height: 1.3; text-align: center; }
#ueber .team-karte-name { flex-wrap: nowrap; gap: 0.55rem; }
#ueber .team-karte-name span { flex: none; }
.aufteilung .sie { align-self: start; }
.aufteilung .sie .technik-zusage { display: grid; gap: 0.3rem; margin: 1.5rem 0 0; padding-top: 1.1rem; border-top: 1px solid #5d6c7b; font-size: 1rem; line-height: 1.45; font-weight: 400; }
.technik-zusage strong { color: #f8eed8; font-weight: 600; }
.technik-zusage span { color: #dbe1ea; }
#fragen h2 .faq-akzent { color: #ab4616; }
@media (max-width: 25rem) { #ueber .team-karte { grid-template-columns: 4rem minmax(0, 1fr); gap: 0.8rem; } #ueber .team-karte-foto { height: 5rem; } }

/* Gewünschte Überschriftenteile mit dem gut lesbaren Orange hervorheben. */
:is(#zusagen, #leistungen, #selbsttest, #ablauf, #lokal, #beispiele) h2 em { color: var(--gruen-tief); }

/* Branchenvorteile: Häkchen in eigener Spalte, an der ersten Textzeile ausgerichtet. */
#beispiele .vorteile li { display: grid; grid-template-columns: 1em minmax(0, 1fr); align-items: start; column-gap: 0.5em; padding: 0.15rem 0; white-space: normal; overflow: visible; text-overflow: clip; }
#beispiele .vorteile li::before { content: ""; position: static; display: block; width: 1em; height: 1em; margin: 0.2em 0 0; border: 0; transform: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8l3 3 7-7' stroke='%23ab4616' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
#beispiele .vorteile li > span { min-width: 0; }

/* Neue Bildpaare in den unveränderten Vergleichsebenen. */
.vergleich .ebene.beispiel-bild { display: block; padding: 0; background: #fff; }
.vergleich .ebene.beispiel-bild picture { display: block; width: 100%; height: 100%; }
.vergleich .ebene.beispiel-bild img { display: block; width: 100%; height: 100%; object-fit: fill; }
.vergleich .ebene.beispiel-bild[hidden] { display: none; }

/* Einheitliche Wortmarke ohne Signet. */
.marke .wortmarke, .marke .wortmarke span, .kopf .wortmarke span { color: #f8eed8; }
.fuss .marke { background: #1c2532; padding: .3rem .7rem; border-radius: .35rem; }
/* Drei Vorteile auf einer Desktop-Zeile; kleine Ansichten dürfen umbrechen. */
@media (min-width: 60rem) {
 .einstieg .hinweis { display: flex; flex-wrap: nowrap; gap: .65rem; font-size: clamp(.65rem, .76vw, .82rem); }
 .einstieg .hinweis li { white-space: nowrap; padding-left: 1.05rem; }
}
.cookie-dialog { width: min(36rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; margin: auto; padding: clamp(1.2rem, 4vw, 2rem); border: 1px solid #5d6c7b; border-radius: 1rem; background: #1c2532; color: #f8eed8; box-shadow: 0 24px 90px #0006; }
.cookie-dialog::backdrop { background: #10172299; }
.cookie-dialog h2 { color: #f8eed8; margin: .6rem 0 1rem; font-size: 2rem; }
.cookie-dialog p { font-size: .95rem; line-height: 1.6; }
.cookie-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #f1a579; }
.cookie-schliessen { border: 0; background: transparent; color: #f8eed8; font-size: 1.7rem; padding: .2rem .65rem; cursor: pointer; }
.cookie-dialog summary { padding: .8rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: .25em; }
.cookie-kategorie { border-top: 1px solid #5d6c7b; padding: .8rem 0; }
.cookie-kategorie label { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .95rem; }
.cookie-kategorie small { color: #dccfb9; margin-left: auto; }
.cookie-kategorie p { margin: .5rem 0 0; font-size: .85rem; }
.cookie-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1.2rem; }
.cookie-aktion { border: 1px solid #f8eed8; border-radius: 99px; padding: .75rem 1rem; background: #f8eed8; color: #1c2532; font: 600 .9rem var(--schrift); cursor: pointer; }
.cookie-aktion:hover { background: #f0d9b4; }
.cookie-dialog :focus-visible { outline: 3px solid #eb7636; outline-offset: 4px; }
.cookie-dialog .cookie-fuss { font-size: .78rem; margin: 1rem 0 0; color: #dccfb9; }
@media (max-width: 25rem) { .cookie-aktionen { grid-template-columns: 1fr; } }
/* Footer: ruhigere Wortmarke und eigener typografischer Slogan. */
.fuss .marke { background: #4a5b6f; border-radius: .45rem; padding: .35rem .75rem; }
.fuss .fuss-slogan { margin: 1.25rem 0 1.6rem; max-width: 23rem; }
.fuss-slogan > span { display: block; margin-bottom: .45rem; color: #5d6c7b; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.fuss-slogan strong { display: block; color: #384861; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.4; font-weight: 500; letter-spacing: -.025em; }
.fuss-slogan em { color: #ab4616; font-style: normal; }
/* Kompakter Cookie-Dialog, unten mittig auf allen Seiten. */
.cookie-dialog { position: fixed; inset: auto 0 max(1rem, env(safe-area-inset-bottom)); margin: 0 auto; width: min(31rem, calc(100% - 1.5rem)); max-height: calc(100dvh - 2rem); padding: 1rem 1.2rem; border-radius: .9rem; box-shadow: 0 12px 45px #0004; }
.cookie-dialog::backdrop { background: #10172244; }
.cookie-dialog .cookie-kopf { font-size: .7rem; line-height: 1.2; }
.cookie-dialog .cookie-schliessen { font-size: 1.35rem; padding: .2rem .5rem; min-width: 2rem; min-height: 2rem; }
.cookie-dialog h2 { margin: .15rem 0 .6rem; font-size: 1.4rem; line-height: 1.2; }
.cookie-dialog > p { margin: .5rem 0; font-size: .82rem; line-height: 1.5; }
.cookie-dialog summary { padding: .55rem 0; font-size: .8rem; }
.cookie-dialog .cookie-aktionen { gap: .6rem; margin-top: .6rem; }
.cookie-dialog .cookie-aktion { min-height: 2.6rem; padding: .6rem .9rem; font-size: .8rem; }
.cookie-dialog .cookie-fuss { margin: .75rem 0 0; font-size: .68rem; line-height: 1.5; }
.cookie-dialog .cookie-kategorie { padding: .65rem 0; }
.cookie-dialog .cookie-kategorie label { font-size: .82rem; }
.cookie-dialog .cookie-kategorie p { font-size: .75rem; }
@media (max-width: 25rem) { .cookie-dialog { padding: .9rem; bottom: max(.75rem, env(safe-area-inset-bottom)); }.cookie-dialog .cookie-aktionen { grid-template-columns: 1fr 1fr; }.cookie-dialog .cookie-aktion { padding: .6rem .5rem; font-size: .75rem; } }
/* Noch kompaktere erste Ebene; Details bleiben aufklappbar. */
.cookie-dialog { width: min(29rem, calc(100% - 1.5rem)); padding: .8rem 1rem; }
.cookie-dialog .cookie-kopf { float: right; margin: -.2rem -.35rem 0 .5rem; }
.cookie-dialog .cookie-kopf > span { display: none; }
.cookie-dialog h2 { margin: 0 0 .4rem; font-size: 1.1rem; line-height: 1.4; }
.cookie-dialog > p { margin: .35rem 0; font-size: .78rem; line-height: 1.45; }
.cookie-dialog summary { padding: .35rem 0; font-size: .75rem; }
.cookie-dialog .cookie-aktionen { margin-top: .35rem; gap: .5rem; }
.cookie-dialog .cookie-aktion { min-height: 2.5rem; padding: .5rem .75rem; font-size: .78rem; }
.cookie-dialog .cookie-fuss { margin: .5rem 0 0; font-size: .65rem; line-height: 1.4; }
@media (max-width: 25rem) { .cookie-dialog { padding: .75rem .85rem; } }
/* Flache Consent-Leiste nach der Nutzerreferenz. */
.cookie-dialog { width: min(66rem, calc(100% - 2rem)); padding: 1rem 1.5rem; background: #fff; color: #384861; border: 1px solid #d2d6d5; border-radius: 1rem; box-shadow: 0 8px 30px #1c25321a; }
.cookie-dialog[open] { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .75rem 1.5rem; align-items: center; }
.cookie-dialog::backdrop { background: transparent; }
.cookie-dialog .cookie-kopf { display: none; }
.cookie-dialog h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; margin: 0; }
.cookie-dialog > #cookie-text { grid-column: 1; grid-row: 1; margin: 0; font-size: .95rem; line-height: 1.55; }
.cookie-dialog #cookie-text a { color: #ab4616; white-space: nowrap; }
.cookie-dialog .cookie-aktionen { grid-column: 2; grid-row: 1; display: flex; gap: .65rem; margin: 0; }
.cookie-dialog .cookie-aktion { min-width: 8.5rem; min-height: 3rem; padding: .65rem 1.2rem; border: 1.5px solid #ab4616; border-radius: 99px; background: #fff; color: #ab4616; font: 600 .95rem var(--schrift); }
.cookie-dialog .cookie-aktion[data-cookie="akzeptieren"] { background: #ab4616; color: #fff; }
.cookie-dialog .cookie-aktion:hover { background: #f8eed8; }
.cookie-dialog .cookie-aktion[data-cookie="akzeptieren"]:hover { background: #8d3b15; }
.cookie-dialog .cookie-fuss { display: none; }
.cookie-dialog details { grid-column: 1 / -1; grid-row: 2; }
.cookie-dialog details:not([open]) { display: none; }
.cookie-dialog .cookie-kategorie { border-color: #dedbd6; }
.cookie-dialog .cookie-kategorie small { color: #5d6c7b; }
.cookie-dialog .cookie-kategorie p { color: #5d6c7b; }
@media (max-width: 48rem) { .cookie-dialog { width: calc(100% - 1.5rem); padding: 1rem; }.cookie-dialog[open] { grid-template-columns: minmax(0,1fr); gap: .8rem; }.cookie-dialog > #cookie-text { font-size: .85rem; }.cookie-dialog .cookie-aktionen { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; }.cookie-dialog .cookie-aktion { min-width: 0; font-size: .85rem; min-height: 2.8rem; }.cookie-dialog details { grid-row: 3; } }
/* Referenz-Proportionen: kompakte Leiste, Details erst auf ausdrücklichen Klick. */
.cookie-dialog { width: min(48rem, calc(100% - 1.5rem)); padding: .65rem .9rem; border-radius: .7rem; bottom: max(.75rem, env(safe-area-inset-bottom)); }
.cookie-dialog[open] { gap: .4rem .9rem; }
.cookie-dialog > #cookie-text { font-size: .78rem; line-height: 1.45; }
.cookie-dialog .cookie-aktionen { gap: .5rem; }
.cookie-dialog .cookie-aktion { min-width: 6.7rem; min-height: 2.45rem; padding: .45rem .85rem; font-size: .8rem; }
.cookie-dialog .cookie-mehr { display: inline; border: 0; padding: 0; background: none; color: #ab4616; font: inherit; text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.cookie-dialog:has(details[open]) .cookie-fuss { display: block; grid-column: 1 / -1; }
@media (min-width: 36rem) { .cookie-dialog[open] { grid-template-columns: minmax(0,1fr) auto; }.cookie-dialog .cookie-aktionen { grid-column: 2; grid-row: 1; display: flex; }.cookie-dialog details { grid-row: 2; } }
@media (max-width: 35.99rem) { .cookie-dialog { padding: .7rem .85rem; }.cookie-dialog .cookie-aktion { min-height: 2.5rem; }.cookie-dialog > #cookie-text { font-size: .75rem; } }
/* Hero-Vorteile: echte SVG-Symbole gemeinsam mit der Textzeile zentrieren. */
.einstieg .hinweis { align-items: center; }
.einstieg .hinweis li { display: inline-flex; align-items: center; gap: .45rem; padding-left: 0; line-height: 1.5; }
.einstieg .hinweis li::before { content: none; display: none; }
.einstieg .hinweis li > svg { display: block; flex: 0 0 1.15em; width: 1.15em; height: 1.15em; color: #eb7636; }
.einstieg .hinweis li > span { display: block; }
/* Footer-Kontakt: eindeutige Beschriftung über der klickbaren Angabe. */
.fuss .fuss-kontakt li:has(.fuss-kontakt-link) { margin-bottom: .9rem; }
.fuss .fuss-kontakt-link { display: inline-flex; flex-direction: column; gap: .12rem; text-decoration: none; max-width: 100%; }
.fuss-kontakt-label { color: #5d6c7b; font-size: .67rem; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.fuss-kontakt-wert { color: #384861; font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; }
.fuss .fuss-kontakt-link:hover .fuss-kontakt-wert { color: #ab4616; text-decoration: underline; text-underline-offset: .2em; }
/* Klarer Footer-Markenblock ohne doppelte Absender und konkurrierende Slogans. */
.fuss .fuss-marke { display: flex; flex-direction: column; align-items: flex-start; }
.fuss .fuss-marke .marke { padding: .35rem .65rem; font-size: 1.15rem; }
.fuss .fuss-marke .fuss-slogan { margin: 1.15rem 0 .65rem; }
.fuss .fuss-marke .fuss-slogan strong { font-size: clamp(1.15rem, 1.45vw, 1.4rem); line-height: 1.35; font-weight: 500; letter-spacing: -.03em; }
.fuss-persoenlich { margin: 0 0 1.25rem; font-size: .83rem; line-height: 1.6; color: #5d6c7b; }
.fuss .fuss-marke > .pille { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; padding: .65rem 1rem; min-height: 2.8rem; font-size: .8rem; line-height: 1.3; max-width: 100%; color: #1c2532; }
/* Persönlicher Akzent: ruhige Handschrift mit feiner Signaturlinie. */
.einstieg .hero-handschrift { position: relative; font-size: 1.22em; font-weight: 600; line-height: 1; color: #f8eed8; transform: none; padding: 0 .08em .08em; margin-left: .06em; vertical-align: baseline; }
.einstieg .hero-handschrift::after { content: ''; position: absolute; left: .06em; right: .02em; bottom: -.06em; height: .16em; border-bottom: 1.5px solid #eb7636; border-radius: 0 0 50% 35%; opacity: .9; }

/* Expliziter Kontrast im geöffneten mobilen Menü, auch für aktive Links. */
.kopf.offen .menue-links a:not(.pille),
.kopf.offen .menue-links a:not(.pille):visited { color:#f8eed8; }
.kopf.offen .menue-links a:not(.pille):hover,
.kopf.offen .menue-links a:not(.pille):focus-visible,
.kopf.offen .menue-links a.aktiv:not(.pille) { color:#eb7636; }
/* Einheitliche Rückmeldung für Navigationslinks auf allen Seiten. */
.kopf nav a:not(.pille){position:relative;transition:color .2s ease}
.kopf nav a:not(.pille)::after{content:"";position:absolute;left:0;right:0;bottom:-.1rem;height:2px;border-radius:2px;background:#eb7636;transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.kopf nav a:not(.pille):hover,.kopf nav a:not(.pille):focus-visible{color:#eb7636}
.kopf nav a:not(.pille):hover::after,.kopf nav a:not(.pille):focus-visible::after,.kopf nav a.aktiv:not(.pille)::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.kopf nav a:not(.pille),.kopf nav a:not(.pille)::after{transition:none}}
.gefunden-punkte>div>svg{display:block;width:1.8rem;height:1.8rem;padding:0;margin-bottom:1rem;border-radius:0;background:none;color:#ab4616;stroke-width:1.7;box-shadow:none}

.kopf nav a.anruf::after{display:none}

/* Positive Kennzeichnung und einheitliche Kontakt- und Footer-Ausrichtung. */
.vergleich .etikett-neu{background:#e6f4e9;color:#24643c}
.abschluss .direkt{justify-content:center}
.abschluss .direkt-text{text-align:center;max-width:none}
.fuss-unten .fuss-link{color:var(--recht);font:inherit;line-height:inherit;letter-spacing:inherit;vertical-align:baseline;text-decoration:none}
.fuss-unten .fuss-link:hover,.fuss-unten .fuss-link:focus-visible{color:var(--gruen-tief);text-decoration:underline;text-underline-offset:3px}

.einstieg h1 .hero-standort{display:block;font:500 clamp(.95rem,1.4vw,1.1rem)/1.5 var(--schrift);letter-spacing:.015em;color:#f8eed8;margin-bottom:1rem}

.einstieg h1.hero-haupttitel{margin-top:0}.einstieg h1 .hero-seo-plakette{display:table;width:fit-content;max-width:100%;font:500 .75rem/1.4 var(--schrift);letter-spacing:normal;margin-bottom:1.35rem}.einstieg h1 .hero-seo-plakette::before{display:none}

.einstieg h1 .hero-ortszeile{display:flex;align-items:center;gap:.7rem;margin:0 0 1.5rem;padding:0;border:0;background:none;color:#d9dfe6;font:500 clamp(.8rem,1.2vw,.95rem)/1.5 var(--schrift);letter-spacing:.06em}.einstieg h1 .hero-ortszeile::before{content:"";display:block;flex:0 0 1.6rem;height:2px;border-radius:2px;background:#eb7636}

@media(min-width:60rem){.einstieg h1 .hero-ortszeile{transform:translateY(.9rem)}}


/* Compact homepage navigation: retain one-line branding and a short CTA. */
@media (max-width: 63.99rem) {
 .startseite .kopf .anruf { display: grid; flex-shrink: 0; width: 44px; height: 44px; }
 .startseite .kopf .pille .lang { display: none; }
 .startseite .kopf .pille .kurz { display: inline; }
 .startseite .kopf .marke { flex-shrink: 0; white-space: nowrap; }
 .startseite .kopf nav { flex-shrink: 0; gap: .65rem; }
 .startseite .kopf .rahmen { gap: .75rem; }
 .startseite .kopf .pille { white-space: nowrap; }
}


/* Navigation: full-width underline and borderless menu controls. */
.kopf.branchen-kopf .branchen-nav > a:not(.pille)::after { left: 0; right: 0; width: auto; }
.kopf.branchen-kopf .branchen-menue,
.startseite .kopf .menue-knopf {
 border: 0; border-radius: 0; background: transparent; box-shadow: none; min-width: 44px; min-height: 44px;
}

/* Branch navigation uses the homepage hover color and underline animation. */
.kopf.branchen-kopf nav.branchen-nav > a:not(.pille) { transition: color .2s ease; }
.kopf.branchen-kopf nav.branchen-nav > a:not(.pille):hover,
.kopf.branchen-kopf nav.branchen-nav > a:not(.pille):focus-visible { color: #eb7636; }
.kopf.branchen-kopf nav.branchen-nav > a:not(.pille)::after {
 left: 0; right: 0; width: auto; height: 2px; background: #eb7636; transform-origin: left; transition: transform .2s ease;
}
@media (prefers-reduced-motion: reduce) {
 .kopf.branchen-kopf nav.branchen-nav > a:not(.pille),
 .kopf.branchen-kopf nav.branchen-nav > a:not(.pille)::after { transition: none; }
}
/* Match the homepage's open mobile menu: color feedback without a line. */
@media (max-width: 70rem) {
 .kopf.branchen-kopf nav.branchen-nav > a:not(.pille)::after { display: none; }
 .kopf.branchen-kopf nav.branchen-nav > a:not(.pille):hover,
 .kopf.branchen-kopf nav.branchen-nav > a:not(.pille):focus-visible,
 .kopf.branchen-kopf nav.branchen-nav > a.aktiv:not(.pille) { color: #eb7636; }
}
/* Keep direct calling accessible on narrow phones as well. */
@media (max-width: 23.4rem) {
 .startseite .kopf nav { gap: .35rem; }
 .startseite .kopf .rahmen { gap: .4rem; }
 .startseite .kopf .pille { font-size: .75rem; padding: .45rem .55rem; }
 .startseite .kopf .pille > svg { display: none; }
}
/* Direct calling on every branch page, beside the mobile menu. */
.kopf.branchen-kopf .branchen-anruf { display: none; }
@media (max-width: 70rem) {
 .kopf.branchen-kopf .rahmen { gap: .65rem; }
 .kopf.branchen-kopf .marke { white-space: nowrap; flex-shrink: 0; }
 .kopf.branchen-kopf .branchen-anruf { display: grid; width: 44px; height: 44px; flex-shrink: 0; margin-left: auto; }
 .kopf.branchen-kopf .branchen-menue { flex-shrink: 0; }
}
/* Quiet direct-call action: no circle, with a desktop label. */
.kopf a.anruf {
 display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
 width: auto; min-width: 44px; min-height: 44px; height: auto;
 padding: .35rem .25rem; border: 0; border-radius: 0;
 background: transparent; color: #f8eed8; text-decoration: none;
}
.kopf a.anruf:hover, .kopf a.anruf:focus-visible { color: #eb7636; }
.kopf a.anruf .anruf-text { font-size: .85rem; }
.kopf a.anruf::after { display: none; }
@media (max-width: 63.99rem) {
 .startseite .kopf a.anruf .anruf-text { display: none; }
 .startseite .kopf a.anruf { display: inline-flex; width: 44px; height: 44px; padding: 0; }
}
@media (max-width: 70rem) {
 .kopf.branchen-kopf a.branchen-anruf { display: inline-flex; width: 44px; height: 44px; padding: 0; border: 0; }
 .kopf.branchen-kopf a.branchen-anruf .anruf-text { display: none; }
}
@media (min-width: 70.01rem) {
 .kopf.branchen-kopf a.branchen-anruf { display: none; }
}
/* Consent: no initial link highlight; keyboard focus remains visible. */
.cookie-dialog { z-index: 10000; }
.cookie-dialog:focus { outline: none; }
.cookie-dialog .cookie-mehr { text-decoration: none; }
.cookie-dialog .cookie-mehr:hover { text-decoration: underline; }
.cookie-dialog .cookie-mehr:focus,
.cookie-dialog .cookie-mehr:focus-visible { outline: none; box-shadow: none; }
.cookie-dialog .cookie-mehr:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; }