/*
  Lukas Vogel – Basis-Stylesheet.
  Farben direkt an der Live-WordPress-Seite gemessen (getComputedStyle auf
  echte Nav-/Button-Elemente), keine Schaetzung:
  --green (Neon-Gruen, Links/Hover/Akzente)   rgb(182,227,136) #B6E388
  --green-light (Hover/aktiv)                 rgb(188,245,142) #BCF58E
  --green-dark (Rand)                         rgb(148,193,102) #94C166
  --footer-bg                                 rgb(52,58,64)    #343A40
  --text (Body)                               rgb(68,68,68)    #444444
  --heading                                   rgb(52,58,64)    #343A40
  Schriften Raleway (Headlines) / Open Sans (Body), lokal eingebunden
  (SIL Open Font License, Selbsthosten erlaubt), Dateien identisch zu
  fit-mit-lukas.de uebernommen.
*/

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/opensans-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/opensans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/raleway-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/raleway-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --green: #B6E388;
  --green-light: #BCF58E;
  --green-dark: #94C166;
  --green-text: #3F5F17;
  --green-08: rgba(148, 193, 102, .12);
  --green-16: rgba(148, 193, 102, .22);
  --footer-bg: #343A40;
  --heading: #343A40;
  --text: #444444;
  --muted: #6b7075;
  --border: #e5e7eb;
  --bg: #ffffff;
  --bg-soft: #f7f9f5;
  --shadow-sm: 0 1px 2px rgba(31,31,31,.04), 0 2px 8px rgba(31,31,31,.04);
  --shadow-md: 0 2px 4px rgba(31,31,31,.04), 0 12px 28px rgba(31,31,31,.08);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --radius: 12px;
  --wide-width: 1310px;
  --gutter: 24px;
  font-size: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 1.125rem;
}
h1, h2, h3, h4 {
  font-family: 'Raleway', Helvetica, Arial, sans-serif;
  color: var(--heading);
  font-weight: 700;
  line-height: 1.2;
  margin: 1.4em 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin-top: 0; letter-spacing: -.3px; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--green-text); text-decoration-color: var(--green); }
a:hover { color: var(--green-dark); }
img { max-width: 100%; height: auto; display: block; }
svg { width: 1em; height: 1em; flex-shrink: 0; }
ul { padding-left: 1.3em; }
li { margin-bottom: .4em; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--green); color: var(--heading);
  padding: 10px 16px; z-index: 100; font-weight: 700;
}
.skip-link:focus { left: 10px; top: 10px; }

.container { max-width: var(--wide-width); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: 64px 0; }
@media (max-width: 700px) { section { padding: 44px 0; } }
.section--soft { background: var(--bg-soft); }
.section-head { max-width: 780px; margin: 0 auto 40px; text-align: center; }
.section-head--left { margin-left: 0; text-align: left; max-width: none; }
.section-head h2 { margin-top: 0; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--footer-bg);
}
.site-header__inner {
  max-width: var(--wide-width); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  min-height: 108px;
}
.site-logo { display: flex; align-items: center; flex: 0 0 auto; }
.site-logo img { height: 80px; width: auto; display: block; }
.site-nav > ul { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.site-nav > ul > li { position: relative; }
.site-nav a {
  display: inline-block; padding: 10px 16px; border-radius: 8px;
  color: #fff; text-decoration: none; font-weight: 600; font-size: 1.15rem;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--green); background: rgba(255,255,255,.1); }
.site-nav a[aria-current="page"] { color: var(--green); background: rgba(255,255,255,.1); }

.hat-dropdown .dropdown {
  list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; left: 0;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md); min-width: 230px; opacity: 0; visibility: hidden;
  transform: translateY(6px); transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.hat-dropdown:hover .dropdown, .hat-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.hat-dropdown .dropdown a {
  display: block; padding: 9px 12px; font-size: .98rem; color: var(--heading); background: transparent;
}
.hat-dropdown .dropdown a:hover, .hat-dropdown .dropdown a:focus-visible {
  color: var(--green-text); background: var(--green-08);
}

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex: 0 0 auto;
  background: none; border: 1px solid rgba(255,255,255,.3); border-radius: 8px;
  color: #fff; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--green); color: var(--green); }
.nav-toggle__icon { display: flex; }
.nav-toggle__icon svg { width: 22px; height: 22px; }
.nav-toggle__icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--menu { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close { display: flex; }

@media (max-width: 980px) {
  .site-header__inner { min-height: 88px; }
  .site-logo img { height: 64px; }
}
@media (max-width: 760px) {
  .site-header__inner { position: relative; }
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #2b3035; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 16px 32px rgba(0,0,0,.35);
    max-height: 0; overflow: hidden; transition: max-height .3s var(--ease);
  }
  .site-nav.ist-offen { max-height: 480px; overflow-y: auto; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 2px; padding: 10px var(--gutter) 14px; }
  .site-nav > ul > li { position: static; border-bottom: 1px solid rgba(255,255,255,.08); }
  .site-nav > ul > li:last-child { border-bottom: none; }
  .site-nav > ul > li > a { padding-top: 14px; padding-bottom: 14px; }
  .hat-dropdown .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    background: transparent; border: none; margin-top: 2px; padding-left: 10px;
  }
  .hat-dropdown .dropdown a { color: rgba(255,255,255,.85); }
  .hat-dropdown .dropdown a:hover { color: var(--green); }
}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.page-head {
  position: relative; padding: 64px 0 56px; background: var(--bg-soft);
  border-bottom: 1px solid var(--border); overflow: hidden;
}
.page-head::after {
  content: ""; position: absolute; right: -110px; top: -80px;
  width: 380px; height: 380px; border-radius: 50%; background: var(--green-08); pointer-events: none;
}
.page-head > .container { position: relative; z-index: 1; }
.page-head h1 { max-width: 1000px; margin-bottom: .3em; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700;
  letter-spacing: 2.2px; text-transform: uppercase; color: var(--green-text); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--green); flex: 0 0 auto; }
.lead { font-size: 1.15rem; color: var(--muted); margin: 0; max-width: 760px; text-wrap: balance; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px;
  border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid transparent;
  font-size: 1rem; cursor: pointer;
}
.btn--primary {
  /* Nur die beiden hellen Gruentoene (Luminanz jeweils > 0.36): dunkler
     Text bleibt damit an jeder Stelle des Verlaufs AA-konform (>= 5,8:1),
     anders als bei den dunkleren Verlaufsstopps weiter unten im Chat. */
  background: linear-gradient(90deg, var(--green) 0%, #8cc970 100%);
  color: var(--heading); border-color: transparent;
}
.btn--primary:hover { background: #8cc970; color: var(--heading); }
.btn--outline { background: transparent; color: var(--heading); border-color: var(--border); }
.btn--outline:hover { border-color: var(--green-dark); color: var(--green-text); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.8); }
.btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Hero (Startseite) ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: 90vh;
  background: var(--heading);
  background-size: cover; background-position: center top;
  /* "top" statt "center": Gesichter im Hero-Foto sitzen im oberen Drittel,
     bei "center" wuerden sie auf niedrigen/breiten Viewports abgeschnitten.
     Hero bewusst hoch (min-height statt fester Innenabstaende) und Inhalt
     unten ausgerichtet (align-items: flex-end), damit der Text im unteren
     Drittel sitzt und die Gesichter oben frei bleiben, wie im Original. */
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,26,20,0) 35%, rgba(20,26,20,.82) 100%);
  pointer-events: none;
}
.hero__inner {
  position: relative; z-index: 1; padding-top: 40px; padding-bottom: 76px; width: 100%;
  /* width:100% noetig, weil .hero ein Flex-Container ist: ohne das wuerde
     dieses Flex-Item nur so breit wie sein Inhalt (der h1 mit
     max-width:800px), nicht die volle Breite bis max-width:1310px, und
     margin:auto haette es dann wieder in die Bildmitte zentriert. */
  /* Kein eigenes max-width/margin hier: .hero__inner traegt schon die
     Klasse .container (max-width var(--wide-width)=1310px, margin:auto,
     padding:0 var(--gutter)) und bleibt damit innerhalb desselben,
     zentrierten Content-Fensters wie Header/Logo/restliche Sektionen. Ein
     zusaetzliches, engeres max-width hier wuerde die Box ein zweites Mal
     zentrieren und den Text in die Bildmitte schieben, genau dorthin, wo
     die zwei Personen im Foto stehen; margin:0 wuerde sie stattdessen an
     den nackten Viewport-Rand kleben statt an den Content-Rand. */
}
.hero h1 { color: #fff; max-width: 1050px; }
.hero p.lead { color: rgba(255,255,255,.9); font-size: 1.2rem; margin-bottom: 2em; max-width: 620px; }
@media (max-width: 700px) {
  .hero { min-height: 74vh; }
  .hero__inner { padding-top: 32px; padding-bottom: 52px; }
  /* Auf schmalen, kurzen Viewports zeigt background-size:cover einen
     anderen (meist groesseren) Ausschnitt des Fotos als am Desktop, dadurch
     kann der Text naeher an die Gesichter ruecken oder sie ueberlagern.
     Staerkerer, frueher einsetzender Verlauf sorgt dafuer, dass der Text
     unabhaengig vom sichtbaren Bildausschnitt lesbar bleibt. */
  .hero::before {
    background: linear-gradient(180deg, rgba(20,26,20,0) 15%, rgba(20,26,20,.92) 85%);
  }
}

/* ---------- USP-Kacheln (3 Icons) ---------- */
.usp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 820px) { .usp-grid { grid-template-columns: 1fr; } }
.usp-card { text-align: center; padding: 8px; min-width: 0; }
.usp-card img { width: 96px; height: 96px; margin: 0 auto 18px; }
.usp-card h3 { margin-top: 0; }
.usp-card p { color: var(--muted); margin-bottom: 0; }

/* ---------- Coaching-Stil-Karten (Über Mich) ---------- */
.coaching-style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 820px) { .coaching-style-grid { grid-template-columns: 1fr; } }
.coaching-style-card {
  background: #fff; border-radius: var(--radius); padding: 32px 24px;
  text-align: center; box-shadow: var(--shadow-sm); min-width: 0;
}
.coaching-style-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--green-08); color: var(--green-text); margin-bottom: 18px;
}
.coaching-style-card__icon svg { width: 30px; height: 30px; }
.coaching-style-card h3 { margin-top: 0; }
.coaching-style-card p { color: var(--muted); margin-bottom: 0; }

/* ---------- Leistungsübersicht-Karten (Ernährungsberatung) ---------- */
.service-item-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 820px) { .service-item-grid { grid-template-columns: 1fr; } }
.service-item {
  background: #fff; border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-sm);
  min-width: 0; overflow-wrap: break-word;
}
.service-item__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--green-08); color: var(--green-text); margin-bottom: 14px;
}
.service-item__icon svg { width: 22px; height: 22px; }
.service-item h3 { margin: 0 0 8px; font-size: 1.05rem; }
.service-item p { margin: 0; color: var(--muted); font-size: .96rem; }

/* ---------- Angebots-Karten ---------- */
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .offer-grid { grid-template-columns: 1fr; } }
.offer-card {
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: #fff; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); min-width: 0;
}
.offer-card__media { aspect-ratio: 4/3; overflow: hidden; }
.offer-card__media img { width: 100%; height: 100%; object-fit: cover; }
.offer-card__placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
}
.offer-card__placeholder img { width: 64px; height: 64px; filter: brightness(0) invert(1); opacity: .92; }
.offer-card--flat { border-top: 4px solid var(--green); }
.offer-card__body { padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.offer-card__body h3 { margin: 0; }
.offer-card__body p { color: var(--muted); flex: 1; }
.offer-card__body .btn { align-self: flex-start; }

/* ---------- Prozess-/Ablaufschritte ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: 28px 20px 20px; background: var(--bg-soft); border-radius: var(--radius); min-width: 0; }
.step::before {
  counter-increment: step; content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--green); color: var(--heading);
  font-family: 'Raleway', sans-serif; font-weight: 700; margin-bottom: 14px;
}
.step h3 { font-size: 1.05rem; margin: 0 0 .4em; }
.step p { color: var(--muted); margin: 0; font-size: .96rem; }

/* ---------- Über-Mich-Teaser (Startseite) ---------- */
.about-teaser { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: stretch; }
@media (max-width: 860px) { .about-teaser { grid-template-columns: 1fr; } }
.about-teaser__media { height: 100%; }
.about-teaser__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); }
@media (max-width: 860px) { .about-teaser__media img { height: auto; aspect-ratio: 4/5; } }
.about-teaser ul { list-style: none; padding: 0; margin: 1.2em 0; }
.about-teaser ul li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: .5em; }
.about-teaser ul li::before {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--green-dark);
}

/* ---------- CTA-Sektion ---------- */
.cta-section {
  text-align: center; background: var(--footer-bg); color: #fff; border-radius: var(--radius);
  padding: 56px var(--gutter);
}
.cta-section h2, .cta-section p { color: #fff; }
.cta-section .btn-row { justify-content: center; }

/* ---------- Kachel-Listen (Kurzvorteile / Für wen geeignet / Ergebnisse) ---------- */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.check-list li:last-child { border-bottom: none; }
.check-list li svg { color: var(--green-dark); margin-top: 3px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.two-col > * { min-width: 0; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }
.two-col--intro { grid-template-columns: 1.4fr .6fr; align-items: center; }
@media (max-width: 820px) { .two-col--intro { grid-template-columns: 1fr; } }
.two-col--intro__media img { width: 100%; max-width: 340px; margin: 0 auto; display: block; }
.two-col--center { align-items: center; }

/* ---------- Leistungs-Bloecke (Leistungen-Uebersicht) ---------- */
.service-block { max-width: 1000px; }
.service-block .check-list { max-width: 700px; margin-bottom: 24px; }
.service-block__subhead { font-weight: 700; color: var(--heading); font-size: 1.1rem; }

/* ---------- Über-Mich-Seite: Qualifikationen/Zeitleiste ---------- */
.timeline { display: grid; gap: 20px; }
.timeline-item {
  display: grid; grid-template-columns: 90px 1fr auto; gap: 18px; align-items: center;
  padding: 18px; border: 1px solid var(--border); border-radius: var(--radius);
}
@media (max-width: 640px) { .timeline-item { grid-template-columns: 60px 1fr; } .timeline-item img { display: none; } }
.timeline-item__year { font-family: 'Raleway', sans-serif; font-weight: 700; color: var(--green-text); font-size: 1.4rem; }
.timeline-item h3 { margin: 0 0 4px; font-size: 1.05rem; }
.timeline-item p { margin: 0; color: var(--muted); font-size: .92rem; }
.timeline-item img { width: 88px; height: 88px; object-fit: contain; }

.membership-grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 620px; margin: 0 auto; }
.membership-card { display: flex; align-items: center; gap: 20px; padding: 20px 24px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); min-width: 0; }
.membership-card img { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; }
.membership-card h3 { margin: 0 0 2px; font-size: 1.05rem; }
.membership-card p { margin: 0; font-size: .92rem; }

/* ---------- Kontaktformular ---------- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info p { margin-bottom: .5em; }
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--heading); }
.form-field input:not([type="checkbox"]):not([type="radio"]), .form-field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px;
  font-family: inherit; font-size: 1rem; color: var(--text); background: #fff;
}
.form-field input:not([type="checkbox"]):not([type="radio"]):focus, .form-field textarea:focus { outline: 2px solid var(--green-dark); outline-offset: 1px; }
.form-field textarea { min-height: 140px; resize: vertical; }
.form-consent { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; color: var(--muted); }
.form-consent input[type="checkbox"] {
  width: 18px; height: 18px; flex: 0 0 auto; margin: 3px 0 0; accent-color: var(--green-dark);
}
.form-hint { font-size: .85rem; color: var(--muted); margin-top: 24px; }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-notice { padding: 14px 18px; border-radius: 8px; margin-bottom: 24px; font-weight: 600; }
.form-notice--success { background: var(--green-08); color: var(--green-text); border: 1px solid var(--green-dark); }
.form-notice--error { background: #fdecea; color: #a12622; border: 1px solid #f2b8b5; }

.field-error { margin: 8px 0 0; font-size: .88rem; color: #c0392b; font-weight: 600; }
.form-field.form-field--error input:not([type="checkbox"]):not([type="radio"]),
.form-field.form-field--error textarea {
  border-color: #e6a29c; background: #fdf3f2;
}
.form-field--error .choices .choice { border-color: #e6a29c; }
.form-field--error input[type="checkbox"] { outline: 2px solid #e6a29c; outline-offset: 2px; }

/* ---------- Kontakt: Schnellkontakt-Kacheln ---------- */
.quick-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px) { .quick-contact { grid-template-columns: 1fr; } }
.quick-contact__item {
  display: flex; align-items: center; gap: 14px; padding: 20px 22px;
  border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none;
  color: var(--heading); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.quick-contact__item:hover { border-color: var(--green-dark); box-shadow: var(--shadow-sm); color: var(--heading); }
.quick-contact__item svg { width: 26px; height: 26px; color: var(--green-dark); flex-shrink: 0; }
.quick-contact__item span { display: flex; flex-direction: column; gap: 2px; font-size: .92rem; color: var(--muted); }
.quick-contact__item strong { color: var(--heading); font-size: 1rem; }

/* ---------- Kontakt: Anfrage-Assistent (Wizard) ----------
   Muster von webprojekt-donauwoerth.de/kontakt uebernommen: echte
   Schritt-fuer-Schritt-Fuehrung per JS (assets/js/main.js), ohne JS sind
   alle drei <fieldset>-Schritte gleichzeitig sichtbar und das Formular
   funktioniert unveraendert (siehe .wizard:not(.is-enhanced) unten). */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.wizard { max-width: 900px; margin: 32px 0 0; }
.wizard__head { margin-bottom: 30px; }
.wizard__count { font-size: .88rem; color: var(--muted); margin: 0 0 10px; font-weight: 600; }
.wizard__bar { height: 4px; background: var(--border); border-radius: 100px; overflow: hidden; }
.wizard__bar span {
  display: block; height: 100%; background: var(--green-dark);
  transform-origin: left; transform: scaleX(0);
  transition: transform .4s var(--ease);
}
.wizard:not(.is-enhanced) .wizard__head,
.wizard:not(.is-enhanced) .wizard__nav { display: none; }

.wizard__step { border: 0; padding: 0; margin: 0; min-width: 0; }
.wizard__step + .wizard__step { margin-top: 52px; }
.wizard.is-enhanced .wizard__step + .wizard__step { margin-top: 0; }
.wizard__step h3 { font-size: 1.45rem; margin: 0 0 .3em; }
.wizard__step h3:focus { outline: none; }
.wizard__hilfe { color: var(--muted); font-size: .98rem; }

.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 26px; }
.choices--kompakt { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .choices, .choices--kompakt { grid-template-columns: 1fr; } }
.choice {
  display: flex; align-items: center; gap: 16px; text-align: left; width: 100%; min-width: 0;
  padding: 20px 22px; background: #fff; cursor: pointer;
  border: 2px solid var(--border); border-radius: var(--radius);
  font-family: 'Open Sans', sans-serif;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.choice:hover { border-color: var(--green-dark); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.choice[aria-pressed="true"] { border-color: var(--green-dark); background: var(--green-08); }
.choice__icon {
  flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--green-08); color: var(--green-text); border-radius: var(--radius);
}
.choice__icon svg { width: 21px; height: 21px; }
.choice__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.choice__body strong { font-family: 'Raleway', sans-serif; font-size: 1.02rem; color: var(--heading); }
.choice__body span { font-size: .9rem; color: var(--muted); line-height: 1.45; }

.wizard__nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 30px; }

.notice { padding: 20px 24px; border-radius: var(--radius); margin-bottom: 28px; }
.notice h2 { margin-top: 0; font-size: 1.3rem; }
.notice p { margin: 0; }
.notice--ok { background: var(--green-08); border: 1px solid var(--green-dark); }
.notice--error { background: #fdecea; border: 1px solid #f2b8b5; color: #a12622; }

/* ---------- Kontakt: FAQ ---------- */
.faq-list { max-width: 800px; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 22px; background: #fff; }
.faq-item summary {
  cursor: pointer; padding: 16px 0; font-weight: 700; font-family: 'Raleway', sans-serif;
  color: var(--heading); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--green-dark); flex-shrink: 0; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding-bottom: 18px; margin: 0; color: var(--muted); }

/* ---------- Philosophie-Zitat (Über Mich) ---------- */
.philosophy-quote {
  max-width: 760px; margin: 0 auto; text-align: center; padding: 36px 32px;
  border-top: 3px solid var(--green); border-bottom: 3px solid var(--green);
}
.philosophy-quote__main {
  font-family: 'Raleway', sans-serif; font-weight: 700; color: var(--heading);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.4; margin: 0 0 18px; text-wrap: balance;
}
.philosophy-quote__sub { color: var(--muted); margin: 0; }

/* ---------- Legal-Text-Seiten ---------- */
/* Kein max-width auf .legal-body selbst: es traegt bereits .container
   (max-width var(--wide-width), margin:auto) und bleibt damit am selben
   linken Rand wie die H1 im .page-head. Die schmalere Lesebreite gilt nur
   fuer die Kindelemente, sonst wuerde ein zusaetzliches max-width hier die
   Box ein zweites Mal zentrieren (derselbe Bug wie beim Hero-Text). */
.legal-body > * { max-width: 800px; overflow-wrap: anywhere; }
.legal-body h2 { margin-top: 1.8em; }
.legal-body h3 { margin-top: 1.2em; }

/* ---------- Einleitungstext auf Leistungs-Unterseiten ---------- */
/* Wie .legal-body ohne eigenes max-width (kein Doppel-Zentrierungs-Bug),
   aber ohne die schmale 800px-Lesebreite: die Leistungsseiten sind keine
   Gesetzestexte und sollen die volle Containerbreite nutzen. */
.intro-text > * { max-width: 1000px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer-bg); color: #fff; }
.site-footer__inner {
  max-width: var(--wide-width); margin: 0 auto; padding: 56px var(--gutter) 40px;
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px;
}
@media (max-width: 760px) { .site-footer__inner { grid-template-columns: 1fr; gap: 32px; } }
.site-footer__heading {
  display: inline-block; min-width: min(300px, 100%); font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 1.25rem;
  color: var(--green); border-top: 1px solid var(--green); border-bottom: 1px solid var(--green);
  padding: 10px 28px 10px 0; margin-bottom: 26px;
}
.site-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.site-footer a:hover { color: var(--green); }
.site-footer p { margin: 0 0 .4em; color: rgba(255,255,255,.85); }
.site-footer__contact-line {
  display: flex; align-items: center; gap: 10px;
}
.site-footer__contact-line svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--green); }
.site-footer__social { display: flex; gap: 12px; margin-top: 26px; }
.site-footer__social a {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(255,255,255,.1);
}
.site-footer__social a:hover { background: var(--green); color: var(--heading); }
.site-footer__social svg { width: 18px; height: 18px; }
.site-footer__sitemap, .site-footer__recht { display: flex; flex-direction: column; gap: 10px; }