/* ============================================================
   Graef Webdesign: Ergänzungen zum Design-System der AI-Seite.
   style.css bleibt unverändert (Kopie von Homepage/css/style.css),
   damit spätere Änderungen am Grundsystem übernommen werden können.
   ============================================================ */

/* ---------- Hero mit Beispiel (zweispaltig) ---------- */
.hero-split {
  background:
    radial-gradient(900px 520px at 85% 0%, rgba(227,255,204,.14), transparent 60%),
    var(--petrol);
  color: var(--on-dark);
  padding-block: clamp(56px, 7vw, 120px) clamp(48px, 6vw, 96px);
}
.hero-split__inner {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero-split h1 { font-size: clamp(2.3rem, 1.5rem + 2.8vw, 3.7rem); line-height: 1.08; letter-spacing: -.02em; margin-top: 18px; }
.hero-split h1 .hl { color: var(--lime); }
.hero-split__lead { font-size: var(--fs-lead); color: var(--on-dark-soft); margin-top: 22px; max-width: 56ch; }
.hero-split__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero-split__media { position: relative; }
.hero-split__note { margin-top: 12px; font-size: var(--fs-xs); color: var(--on-dark-mute); text-align: center; }
@media (max-width: 920px) {
  .hero-split__inner { grid-template-columns: 1fr; }
  .hero-split h1 { font-size: var(--fs-h1); }
}

/* ---------- Platzhalter-Varianten ---------- */
.ph--16x10 { aspect-ratio: 16 / 10; min-height: 0; }
.ph--4x3   { aspect-ratio: 4 / 3; min-height: 0; }
.ph--4x5   { aspect-ratio: 4 / 5; min-height: 0; }
.ph--tall  { aspect-ratio: 3 / 5; min-height: 0; }
.ph--og    { aspect-ratio: 1200 / 630; min-height: 0; }
.ph--phone { aspect-ratio: 9 / 18; min-height: 0; max-width: 220px; margin-inline: auto; border-radius: 28px; }

/* ---------- Beispiel-Block (Startseite) ---------- */
.example { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(24px, 3.5vw, 48px); align-items: center; }
.example__side { display: grid; gap: 18px; }
.example__text { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--r-lg); padding: 26px 26px; }
.example__text h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.example__text p { color: var(--muted-on-light); font-size: var(--fs-sm); }
.example__text p + p { margin-top: 8px; }
.example__text .link-arrow { margin-top: 14px; }
.example__label {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--petrol); background: var(--lime); padding: 4px 11px; border-radius: var(--r-pill); margin-bottom: 12px;
}
@media (max-width: 860px) { .example { grid-template-columns: 1fr; } }

/* ---------- Fünf Prüfpunkte mit Markern ---------- */
.marks { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.marklist { list-style: none; counter-reset: m; display: grid; gap: 16px; }
.marklist li {
  counter-increment: m; position: relative; padding: 20px 22px 20px 70px;
  background: var(--charcoal-600); border: 1px solid var(--border-dark); border-radius: var(--r-md);
}
.marklist li::before {
  content: counter(m); position: absolute; left: 22px; top: 20px;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lime); color: var(--petrol); font-weight: 800; font-size: .95rem;
}
.marklist h3 { font-size: 1.1rem; color: var(--on-dark); margin-bottom: 5px; }
.marklist p { color: var(--on-dark-soft); font-size: var(--fs-sm); }
.marks__note { margin-top: 26px; color: var(--on-dark-soft); font-size: var(--fs-body); }
.marks__note a { color: var(--lime); font-weight: 700; }
@media (max-width: 860px) { .marks { grid-template-columns: 1fr; } }

/* ---------- Preis-Kacheln (wie in der Kurzauswertung) ---------- */
.price-tiles { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.price-tile {
  border: 1px solid var(--border-light); border-radius: var(--r-lg); padding: 30px 30px;
  background: var(--white); display: flex; flex-direction: column; gap: 4px;
}
.price-tile--main { background: var(--petrol); border-color: var(--petrol); color: var(--on-dark); }
.price-tile__amount { font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.price-tile--main .price-tile__amount { color: var(--lime); }
.price-tile__kind { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-on-light); }
.price-tile--main .price-tile__kind { color: var(--on-dark-soft); }
.price-tile p { margin-top: 12px; font-size: var(--fs-sm); color: var(--ink-soft); }
.price-tile--main p { color: var(--on-dark-soft); }
.price-tile ul { list-style: none; margin-top: 16px; display: grid; gap: 8px; }
.price-tile li { position: relative; padding-left: 26px; font-size: var(--fs-sm); color: var(--ink-soft); }
.price-tile--main li { color: var(--on-dark-soft); }
.price-tile li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 5px; background: var(--petrol);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3FFCC' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
  background-size: 11px; background-repeat: no-repeat; background-position: center;
}
.price-tile--main li::before { background-color: var(--lime); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23142F32' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.price-note { margin-top: 22px; font-size: var(--fs-sm); color: var(--muted-on-light); }
.price-note a { color: var(--petrol); font-weight: 700; }
@media (max-width: 640px) { .price-tiles { grid-template-columns: 1fr; } }

/* ---------- Zusatzleistungen (Tabelle auf Hell) ---------- */
.addons { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--border-light); border-radius: var(--r-lg); overflow: hidden; }
.addons th, .addons td { text-align: left; padding: 16px 20px; font-size: var(--fs-sm); border-bottom: 1px solid var(--border-light); vertical-align: top; }
.addons thead th { background: var(--offwhite-2); color: var(--ink); font-weight: 800; letter-spacing: .02em; }
.addons tbody th { color: var(--ink); font-weight: 700; width: 32%; }
.addons tbody td { color: var(--ink-soft); }
.addons tbody td.amount { white-space: nowrap; font-weight: 800; color: var(--petrol); width: 18%; }
.addons tbody tr:last-child th, .addons tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
  .addons thead { display: none; }
  .addons tbody tr { display: grid; }
  .addons tbody th, .addons tbody td { width: auto; border-bottom: 0; padding-block: 6px; }
  .addons tbody tr { border-bottom: 1px solid var(--border-light); padding-block: 10px; }
}

/* ---------- Zwei Spalten mit Prüfliste (Leistungsseite) ---------- */
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); align-items: start; }
.twocol .riskbox h2 { margin-bottom: 14px; }
.twocol .riskbox p.sub { color: var(--muted-on-light); font-size: var(--fs-sm); margin-bottom: 16px; }
.plainlist { list-style: none; display: grid; gap: 10px; }
.plainlist li { position: relative; padding-left: 26px; color: var(--ink-soft); font-size: var(--fs-sm); }
.plainlist li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 3px; background: var(--grayblue); opacity: .5; }
@media (max-width: 760px) { .twocol { grid-template-columns: 1fr; } }

/* ---------- Ablauf: Zusatz-Hinweis ---------- */
.steps-note {
  margin-top: 34px; padding: 22px 26px; border-radius: var(--r-md);
  background: var(--white); border-left: 4px solid var(--lime); color: var(--ink); font-size: var(--fs-body);
}
.steps-note a { color: var(--petrol); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Person ---------- */
.person { display: grid; grid-template-columns: .55fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.person__photo { width: 100%; height: auto; border-radius: var(--r-xl); display: block; box-shadow: var(--shadow-md); }
.person h2 { margin-bottom: 14px; }
.person p { color: var(--ink-soft); }
.person p + p { margin-top: 12px; }
.person__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.person__facts li { font-size: var(--fs-xs); font-weight: 700; color: var(--petrol); background: var(--offwhite-2); padding: 7px 13px; border-radius: var(--r-pill); }
@media (max-width: 760px) { .person { grid-template-columns: 1fr; } .person__photo { max-width: 360px; } }

/* ---------- FAQ (Akkordeon) ---------- */
.faq { max-width: var(--maxw-narrow); display: grid; gap: 12px; }
.faq details { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--r-md); overflow: hidden; }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px; font-weight: 700; color: var(--ink); font-size: var(--fs-body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--offwhite-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23142F32' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");
  background-size: 13px; background-repeat: no-repeat; background-position: center; transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary { border-bottom: 1px solid var(--border-light); }
.faq .faq__body { padding: 16px 22px 20px; color: var(--ink-soft); font-size: var(--fs-sm); }
.faq .faq__body p + p { margin-top: 8px; }

/* ---------- Formulare ---------- */
.form { display: grid; gap: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--fs-sm); font-weight: 700; color: var(--on-dark); }
.field .opt { font-weight: 500; color: var(--on-dark-mute); }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: var(--fs-body); color: var(--ink);
  background: var(--white); border: 1.5px solid transparent; border-radius: 12px; padding: 13px 15px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 4px rgba(227,255,204,.25); }
.field textarea { min-height: 120px; resize: vertical; }
.form .consent { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-xs); color: var(--on-dark-mute); }
.form .consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--lime); flex: none; }
.form .consent a { color: var(--lime); text-decoration: underline; text-underline-offset: 2px; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 6px; }
.form__hint { font-size: var(--fs-xs); color: var(--on-dark-mute); }
.form--light .field label { color: var(--ink); }
.form--light .field .opt { color: var(--muted-on-light); }
.form--light .field input, .form--light .field textarea { border-color: var(--border-light); background: var(--white); }
.form--light .field input:focus, .form--light .field textarea:focus { border-color: var(--petrol); box-shadow: 0 0 0 4px rgba(20,47,50,.08); }
.form--light .consent { color: var(--muted-on-light); }
.form--light .consent a { color: var(--petrol); }
.form--light .consent input { accent-color: var(--petrol); }
.form--light .form__hint { color: var(--muted-on-light); }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

/* Kontakt-Block (dunkel, zweispaltig) */
.contact-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.contact-split__info h2 { color: var(--on-dark); margin-bottom: 14px; }
.contact-split__info p { color: var(--on-dark-soft); }
.contact-split__info p + p { margin-top: 12px; }
.contact-lines { list-style: none; display: grid; gap: 12px; margin-top: 26px; }
.contact-lines li { color: var(--on-dark-soft); font-size: var(--fs-sm); }
.contact-lines b { color: var(--on-dark); }
.contact-lines a { color: var(--lime); font-weight: 700; }
.contact-split__promise { margin-top: 26px; padding: 18px 20px; border-radius: var(--r-md); border: 1px solid var(--border-dark); color: var(--on-dark-soft); font-size: var(--fs-sm); }
.contact-split__form { background: var(--petrol-600); border: 1px solid var(--border-dark); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 36px); }
@media (max-width: 860px) { .contact-split { grid-template-columns: 1fr; } }

/* ---------- Beispiele-Seite ---------- */
.example-full { display: grid; gap: 20px; }
.example-full__views { display: grid; grid-template-columns: 1.4fr 1.4fr .7fr; gap: 16px; align-items: start; }
.example-full__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.example-full__meta article { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--r-lg); padding: 24px 26px; }
.example-full__meta h3 { font-size: 1.1rem; margin-bottom: 8px; }
.example-full__meta p { color: var(--muted-on-light); font-size: var(--fs-sm); }
.example-soon { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.example-soon article { background: var(--white); border: 1px dashed var(--border-light); border-radius: var(--r-lg); padding: 24px 26px; }
.example-soon h3 { font-size: 1.1rem; margin-bottom: 6px; }
.example-soon p { color: var(--muted-on-light); font-size: var(--fs-sm); }
@media (max-width: 860px) { .example-full__views { grid-template-columns: 1fr 1fr; } .example-full__views > :last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .example-full__views, .example-full__meta, .example-soon { grid-template-columns: 1fr; } }

/* ---------- Website-Check-Seite ---------- */
.check-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.check-grid .form-card { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 36px); }
.check-grid .form-card h2 { font-size: var(--fs-h3); margin-bottom: 6px; }
.check-grid .form-card > p { color: var(--muted-on-light); font-size: var(--fs-sm); margin-bottom: 22px; }
@media (max-width: 860px) { .check-grid { grid-template-columns: 1fr; } }

/* ---------- Kleinigkeiten ---------- */
.section--charcoal .section__title, .section--charcoal h2, .section--charcoal h3 { color: var(--on-dark); }
.section--charcoal .lead { color: var(--on-dark-soft); }
.tagline-row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; }
.tagline-row span { font-size: var(--fs-sm); font-weight: 700; color: var(--on-dark-soft); display: inline-flex; align-items: center; gap: 8px; }
.tagline-row span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.nav__links a[aria-current="page"]:not(.btn) { color: var(--petrol); font-weight: 800; }

/* ---------- Gerätrahmen für Screenshots der Musterseiten ---------- */
.geraete { position: relative; display: block; padding-right: 9%; padding-bottom: 7%; text-decoration: none; }
.geraete .geraet-handy { position: absolute; right: 0; bottom: 0; width: 25%; max-width: none; }
.geraete:hover .geraet-browser { transform: translateY(-3px); }
.geraet-browser { margin: 0; background: #1b1d22; border-radius: 14px; padding: 0 6px 6px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.65); transition: transform .25s var(--ease); }
.geraet-browser__leiste { display: flex; gap: 6px; padding: 9px 6px; }
.geraet-browser__leiste i { width: 9px; height: 9px; border-radius: 50%; background: #3a3d45; }
.geraet-browser__leiste i:first-child { background: #e3675a; }
.geraet-browser__leiste i:nth-child(2) { background: #e3b14a; }
.geraet-browser__leiste i:nth-child(3) { background: #69b65e; }
.geraet-browser img { width: 100%; height: auto; border-radius: 0 0 9px 9px; display: block; }
.geraet-handy { margin: 0 auto; width: 100%; max-width: 230px; background: #111317; border-radius: 30px; padding: 8px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.08); }
.geraet-handy img { width: 100%; height: auto; border-radius: 23px; display: block; }
.section--offwhite .geraet-browser, .section--light .geraet-browser { box-shadow: 0 26px 60px -30px rgba(20,47,50,.5); }
.example__side .geraet-handy { max-width: 210px; }
.example-full__views .geraet-handy { max-width: 220px; }

/* ---------- Ganze Seite mit Prüfpunkt-Markern ---------- */
.ganzseite { position: relative; scroll-behavior: smooth; max-height: 680px; overflow-y: auto; border-radius: var(--r-lg); background: #1b1d22; padding: 8px; scrollbar-width: thin; scrollbar-color: var(--lime) transparent; box-shadow: 0 30px 70px -30px rgba(0,0,0,.65); }
.ganzseite:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.ganzseite__bild { position: relative; }
.ganzseite__bild img { width: 100%; height: auto; display: block; border-radius: 10px; }
.marker {
  position: absolute; left: 10px; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%;
  background: var(--lime); color: var(--petrol); font: inherit; font-weight: 800; font-size: .95rem; border: 3px solid var(--petrol);
  box-shadow: 0 0 0 4px rgba(227,255,204,.35); cursor: pointer; display: grid; place-items: center; transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.marker:hover, .marker.aktiv { transform: translateY(-50%) scale(1.15); box-shadow: 0 0 0 8px rgba(227,255,204,.45); }
.marklist--klick li { cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.marklist--klick li:hover, .marklist--klick li.aktiv { border-color: var(--lime); background: var(--petrol-600); }
.marks__hinweis { margin-top: 12px; font-size: var(--fs-xs); color: var(--on-dark-mute); }
@media (max-width: 860px) { .ganzseite { max-height: 520px; } }

/* ---------- Hero, Fassung 07.10.: eine Handlung, eigene Zahl ---------- */
.hero-split__wer { font-size: var(--fs-sm); font-weight: 700; color: var(--lime); letter-spacing: .01em; }
.hero-split__lead strong { color: var(--lime); font-weight: 800; }
.hero-split__body { color: var(--on-dark-mute); margin-top: 14px; max-width: 56ch; }
.hero-split__actions { align-items: center; }
.hero-split__sicher { font-size: var(--fs-sm); color: var(--on-dark-soft); max-width: 26ch; line-height: 1.45; }
.hero-split__neben { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-weight: 700; font-size: var(--fs-sm); color: var(--on-dark); text-decoration: underline; text-decoration-color: rgba(227,255,204,.45); text-underline-offset: 4px; }
.hero-split__neben svg { width: 16px; height: 16px; }
.hero-split__neben:hover { color: var(--lime); }
.hero-split__quelle { margin-top: 26px; font-size: var(--fs-xs); color: var(--on-dark-mute); max-width: 60ch; }
/* Ohne Etikett darüber braucht die Überschrift keinen Abstand nach oben */
.section__title:first-child, .page-hero h1:first-child, .cta-block h2:first-child { margin-top: 0; }

/* Hero kompakter: Knopf und Sicherheitssatz müssen ohne Scrollen sichtbar sein */
.hero-split { padding-block: clamp(40px, 5vw, 76px) clamp(44px, 5vw, 80px); }
.hero-split h1 { font-size: clamp(2.2rem, 1.4rem + 2.5vw, 3.3rem); margin-top: 12px; }
.hero-split__lead { margin-top: 18px; }
.hero-split__actions { margin-top: 26px; }
.hero-split__sicher { max-width: 32ch; }

/* Überschriften einzeilig am Desktop: Kopf breiter, Einleitung bleibt schmal */
.section__head { max-width: 1000px; }
.section__head .section__intro { max-width: 62ch; }
.section__head--center .section__intro { margin-inline: auto; }

/* Footer: alle Kontaktzeilen in einer Größe */
.footer__col li { font-size: var(--fs-sm); line-height: 1.6; color: var(--on-dark-soft); }
.nobr { white-space: nowrap; }

/* Prüfpunkt-Marker in einem eigenen Rand links, damit sie keinen Text verdecken */
.ganzseite { padding-left: 46px; }
.marker { left: -40px; }

/* Hero, Fassung 07.10. nachmittags: Preis als eigene ruhige Zeile */
.hero-split__preis { margin-top: 18px; color: var(--on-dark-soft); font-size: var(--fs-body); }
.hero-split__preis strong { color: var(--lime); font-weight: 800; }
.marklist h3 { font-size: 1.05rem; }

/* ---------- Hero mit Bild (Fassung 07.10. abends) ----------
   Weißer Grund wie der Bildrand (#fefefe), Text links im freien Raum,
   Motiv rein dekorativ. Ein Verlauf hält den Text auch bei mittleren
   Breiten lesbar, wenn das Motiv nach links rückt. */
.hero-bild { position: relative; background: #fefefe; overflow: hidden; display: flex; align-items: center; min-height: clamp(520px, 76vh, 760px); }
.hero-bild__motiv { position: absolute; inset: 0; display: block; }
.hero-bild__motiv img { width: 100%; height: 100%; object-fit: contain; object-position: right center; display: block; }
.hero-bild::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, #fefefe 0%, #fefefe 32%, rgba(254,254,254,.82) 44%, rgba(254,254,254,0) 58%); }
.hero-bild__inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(48px, 6vw, 88px); }
.hero-bild__text { max-width: 540px; }
.hero-bild h1 { color: var(--petrol); font-size: clamp(2.5rem, 1.4rem + 3.2vw, 4.3rem); line-height: 1.05; letter-spacing: -.025em; }
.hero-bild__sub { margin: 24px 0 34px; font-size: var(--fs-lead); color: var(--ink-soft); max-width: 34ch; }
@media (max-width: 860px) {
  .hero-bild { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero-bild::before { display: none; }
  .hero-bild__inner { order: 1; padding-block: 44px 8px; }
  .hero-bild__motiv { order: 2; position: relative; inset: auto; }
  .hero-bild__motiv img { height: auto; object-fit: contain; }
  .hero-bild h1 { font-size: clamp(2.2rem, 1.2rem + 5vw, 3rem); }
}

/* ---------- Hero-Bühne mit Trust-Leiste: am Desktop genau ein Bildschirm ---------- */
@media (min-width: 861px) {
  .hero-buehne { display: flex; flex-direction: column; min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); }
  .hero-buehne .hero-bild { flex: 1 1 auto; min-height: 480px; }
}
.vertrauen { background: var(--petrol); color: var(--on-dark); position: relative; z-index: 3; }
.vertrauen__liste { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-block: 26px; }
.vertrauen__punkt { display: flex; align-items: center; gap: 14px; min-width: 0; }
.vertrauen__punkt + .vertrauen__punkt { border-left: 1px solid var(--border-dark); padding-left: 24px; }
.vertrauen__icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(227,255,204,.1); color: var(--lime); }
.vertrauen__icon svg { width: 22px; height: 22px; }
.vertrauen__text { display: flex; flex-direction: column; font-size: var(--fs-sm); color: var(--on-dark-soft); line-height: 1.35; }
.vertrauen__text b { color: var(--on-dark); font-weight: 800; font-size: 1rem; margin-bottom: 2px; }
@media (max-width: 1180px) {
  .vertrauen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .vertrauen__punkt:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 520px) {
  .vertrauen__liste { grid-template-columns: 1fr; gap: 16px; }
  .vertrauen__punkt + .vertrauen__punkt { border-left: 0; padding-left: 0; }
}

/* Hero, Feinschliff 07.10.: Bild rund 14 % kleiner und an den rechten Rand,
   damit die Überschrift Luft hat; Knopf in Limette hebt sich vom Petrol ab. */
@media (min-width: 861px) {
  .hero-bild__motiv { inset: auto 0 auto auto; top: 50%; transform: translateY(-50%); height: 86%; width: auto; max-width: 78%; }
  .hero-bild__motiv img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: right center; }
  .hero-bild::before { background: linear-gradient(90deg, #fefefe 0%, #fefefe 36%, rgba(254,254,254,.7) 46%, rgba(254,254,254,0) 56%); }
}
.hero-bild__knopf { box-shadow: 0 10px 26px -12px rgba(20,47,50,.45), inset 0 0 0 1px rgba(20,47,50,.08); }
.hero-bild__knopf:hover { background: var(--lime-deep); }
@media (min-width: 861px) {
  /* untere Bildkante weich auslaufen lassen */
  .hero-bild__motiv img { -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); }
}
@media (min-width: 1181px) {
  /* Spalten nach Inhalt, damit jeder Punkt zweizeilig bleibt */
  .vertrauen__liste { grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .vertrauen__text { white-space: nowrap; }
}

/* ---------- Abschnitt „Damit aus Besuchern Anfragen werden" ----------
   Hell und ruhig wie der Hero (#fefefe = Bildgrund), Punkte ohne Karten,
   Bild vollständig, ohne eigenen Rahmen oder Schatten (bringt beides mit). */
.anfragen { background: #fefefe; }
.anfragen__titel { margin-bottom: clamp(24px, 3vw, 36px); }
.anfragen__raster { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.anfragen__text .lead { color: var(--ink-soft); max-width: 54ch; }
.anfragen__liste { list-style: none; display: grid; gap: 22px; margin-top: 32px; }
.anfragen__punkt { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
.anfragen__icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--offwhite-2); color: var(--petrol); }
.anfragen__icon svg { width: 20px; height: 20px; }
.anfragen__punkt h3 { font-size: 1.08rem; color: var(--ink); margin-bottom: 4px; }
.anfragen__punkt p { color: var(--muted-on-light); font-size: var(--fs-sm); line-height: 1.55; max-width: 48ch; }
.anfragen__bild img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
  .anfragen__raster { grid-template-columns: 1fr; }
}

/* ---------- Abschnitt „Was zu einer Website von mir gehört" (hell) ----------
   Statisches Bild mit eingezeichneten Nummern 1 bis 5 links, Liste rechts.
   Nummernkreise in Limette wie die Markierungen im Bild. */
.bestandteile { background: #fefefe; border-top: 1px solid var(--border-light); }
.bestandteile__raster { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 4.5vw, 60px); align-items: center; }
.bestandteile__bild img { width: 100%; height: auto; display: block; }
.bestandteile__liste { list-style: none; counter-reset: punkt; display: grid; gap: 0; }
.bestandteile__liste li { counter-increment: punkt; display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--border-light); }
.bestandteile__liste li:first-child { padding-top: 0; }
.bestandteile__liste li:last-child { border-bottom: 0; }
.bestandteile__liste li::before {
  content: counter(punkt); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lime); color: var(--petrol); font-weight: 800; font-size: 1.15rem;
  box-shadow: inset 0 0 0 1px rgba(20,47,50,.08);
}
.bestandteile__liste h3 { font-size: 1.1rem; color: var(--ink); margin: 10px 0 6px; }
.bestandteile__liste p { color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.6; max-width: 46ch; }
@media (max-width: 900px) {
  .bestandteile__raster { grid-template-columns: 1fr; }
  .bestandteile__bild { max-width: 520px; margin-inline: auto; }
}

/* ---------- Hintergründe 08.10.: weiß, Salbei, weiß ---------- */
.anfragen { background: #ffffff; }
.bestandteile { background: #F2F5EF; border-top: 0; }
/* Gartenraum-Bild hat weißen Grund: per Multiplizieren nimmt er die Salbeifarbe an, Schatten bleiben */
.bestandteile__bild img { mix-blend-mode: multiply; }
.bestandteile__liste li { border-bottom-color: #dfe5d8; }
.preis { background: #ffffff; }

/* ---------- Preisbereich: Bezeichnungen, Pluszeichen, gemeinsamer Knopf ---------- */
.price-tiles--plus { grid-template-columns: 1.3fr auto 1fr; align-items: stretch; gap: 20px; }
.price-tile__label { display: block; font-size: var(--fs-sm); font-weight: 800; color: var(--ink); margin-bottom: 14px; }
.price-tile--main .price-tile__label { color: var(--on-dark); }
.price-plus {
  align-self: center; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--petrol);
  background: #ffffff; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);
}
.preis__aktion { margin-top: 40px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.preis__kostenlos { margin-top: 12px; font-size: var(--fs-sm); color: var(--muted-on-light); }
.preis__aktion .price-note { margin-top: 26px; max-width: 62ch; font-size: var(--fs-sm); color: var(--ink-soft); }
@media (max-width: 760px) {
  .price-tiles--plus { grid-template-columns: 1fr; gap: 12px; }
  .price-plus { justify-self: center; }
}

/* ---------- 08.10.: Knopf in der 700-Euro-Karte, kompakterer Preisbereich ---------- */
.price-tile__knopf { align-self: flex-start; margin-top: 28px; }
.preis__aktion { margin-top: 28px; }
.preis__aktion .price-note { margin-top: 0; }

/* ---------- Persönliche Vorstellung mit Arbeitsfoto (4:5, ungeschnitten) ---------- */
.person { grid-template-columns: .8fr 1fr; }
.person__photo { border-radius: 22px; box-shadow: var(--shadow-sm); }
.person p { font-size: var(--fs-body); line-height: 1.7; max-width: 58ch; }
@media (max-width: 760px) { .person { grid-template-columns: 1fr; } .person__photo { max-width: 100%; } }

/* ---------- 08.10.: Abschluss Startseite (statt Kontaktformular) ---------- */
.abschluss__inner { max-width: 720px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.abschluss .section__title { color: var(--on-dark); }
.abschluss .lead { color: var(--on-dark-soft); margin: 14px 0 30px; }
.abschluss__direkt { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; font-size: var(--fs-sm); color: var(--on-dark-mute); }
.abschluss__direkt a { color: var(--on-dark); font-weight: 700; }
.abschluss__direkt a:hover { color: var(--lime); }

/* ---------- Website-Check: Prüfpunkte neben dem Formular ---------- */
.check-grid { align-items: start; }
.check-punkte h2 { font-size: var(--fs-h3); margin-bottom: 6px; }
.check-punkte__intro { color: var(--muted-on-light); font-size: var(--fs-sm); margin-bottom: 22px; }
.check-punkte__liste li { padding: 16px 0; grid-template-columns: 40px 1fr; gap: 14px; }
.check-punkte__liste li::before { width: 36px; height: 36px; font-size: 1rem; }
.check-punkte__liste h3 { font-size: 1.02rem; margin: 6px 0 4px; }
.check-punkte__liste p { font-size: var(--fs-sm); }

/* ---------- Kontaktseite ---------- */
.kontakt-raster { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.kontakt-direkt { display: grid; gap: 14px; }
.kontakt-direkt__weg { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--border-light); color: var(--ink); text-decoration: none; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.kontakt-direkt__weg:hover { border-color: var(--petrol); transform: translateY(-2px); }
.kontakt-direkt__icon { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--petrol); color: var(--lime); }
.kontakt-direkt__icon svg { width: 22px; height: 22px; }
.kontakt-direkt__weg small { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-on-light); }
.kontakt-direkt__weg b { font-size: 1.15rem; font-weight: 800; color: var(--petrol); word-break: break-word; }
.kontakt-direkt__zeile { margin-top: 8px; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6; padding-left: 4px; }
.kontakt-form { background: var(--white); border: 1px solid var(--border-light); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 36px); }
@media (max-width: 860px) { .kontakt-raster { grid-template-columns: 1fr; } }

/* ---------- Navigation 08.10.: Kontakt als hervorgehobener Knopf, aktive Seite nur fett ---------- */
.nav__links a[aria-current="page"]:not(.btn) { background: transparent; }
.nav__links .btn--primary { background: var(--lime); color: var(--petrol); border-color: transparent; box-shadow: 0 6px 18px -10px rgba(20,47,50,.45), inset 0 0 0 1px rgba(20,47,50,.08); }
.nav__links .btn--primary:hover, .nav__links .btn--primary[aria-current="page"] { background: var(--lime-deep); color: var(--petrol); }

/* Hinweis nach dem Absenden (Übergangslösung per E-Mail-Programm) */
.form__status { margin-top: 14px; padding: 14px 16px; border-radius: var(--r-md); background: var(--offwhite-2); color: var(--ink); font-size: var(--fs-sm); }
.form__status a { color: var(--petrol); font-weight: 700; text-decoration: underline; }

/* Formular-Versand: Lockfeld, Fehlerhinweis, Dank */
.form__falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__status--fehler { background: #fbeceb; color: #7a2119; }
.form__status--fehler a { color: #7a2119; }
.form__danke { padding: 28px 30px; border-radius: var(--r-md); background: var(--lime); color: var(--petrol); font-size: var(--fs-lead); font-weight: 600; line-height: 1.5; outline: none; }
.form__danke p { margin: 0; }
button[aria-busy="true"] { opacity: .7; cursor: progress; }