/* =====================================================================
   Basis & Komponenten — funktionales, barrierefreies Grundgerüst (Mobile-First).
   Das eigentliche Design entsteht in Phase 2 über tokens.css + projektspezifische Regeln.
   Keine Inline-Styles im HTML (CSP).
   ===================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem); /* Fokus/Anker nicht unter Sticky-Header */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, li, figcaption { max-width: 70ch; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
  hyphens: auto;          /* lange deutsche Komposita */
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { text-wrap: pretty; }
a { color: var(--color-primary); text-underline-offset: 0.2em; }
a:hover { color: var(--color-primary-hover); }
ul[class], ol[class] { list-style: none; padding: 0; }
[hidden] { display: none !important; } /* sonst überschreiben display-Regeln (.btn …) das hidden-Attribut */

/* ---------- Fokus & Hilfsklassen ---------- */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -100%;
  z-index: 1000;
  padding: var(--space-2xs) var(--space-s);
  background: var(--color-primary); color: var(--color-primary-contrast);
  border-radius: var(--radius-s);
}
.skip-link:focus { top: 1rem; }

/* ---------- Layout ---------- */
.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2rem, var(--container-narrow)); }
.section { padding-block: var(--space-2xl); }
.section--alt { background: var(--color-surface); }
.section > .container > * + *,
.prose > * + * { margin-top: var(--space-s); }
.prose h2 { margin-top: var(--space-xl); }
.prose h3 { margin-top: var(--space-l); }
.prose ul, .prose ol { padding-left: 1.25em; }
.lead { font-size: var(--step-1); color: var(--color-text-muted); }
.eyebrow {
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent);
}
.meta { font-size: var(--step--1); color: var(--color-text-muted); }

.grid { display: grid; gap: var(--space-m); }
@media (min-width: 48rem) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--contact { grid-template-columns: 3fr 2fr; align-items: start; }
}
@media (min-width: 64rem) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 44px; min-width: 44px;
  padding: 0.65em 1.25em;
  border: 2px solid transparent; border-radius: var(--radius-s);
  font-weight: 700; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}
.btn--primary { background: var(--color-primary); color: var(--color-primary-contrast); }
.btn--primary:hover { background: var(--color-primary-hover); color: var(--color-primary-contrast); }
.btn--secondary { background: transparent; color: var(--color-primary); border-color: currentColor; }
.btn--secondary:hover { background: var(--color-surface); }
.btn--lg { font-size: var(--step-1); padding: 0.75em 1.5em; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.link-button {
  background: none; border: 0; padding: 0;
  color: var(--color-primary); text-decoration: underline; text-underline-offset: 0.2em;
  cursor: pointer; min-height: 44px;
}

/* ---------- Header & Navigation (Mobile-First) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-s);
  min-height: var(--header-h);
}
.site-header__logo { margin-right: auto; display: inline-flex; min-height: 44px; align-items: center; }
.site-header__logo img { width: auto; height: 40px; }
.site-header__phone { display: none; font-weight: 700; text-decoration: none; }
.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0 0.75rem;
  background: none; border: 1px solid var(--color-border); border-radius: var(--radius-s);
  cursor: pointer;
}
.nav-toggle__icon, .nav-toggle__icon::before, .nav-toggle__icon::after {
  display: block; width: 20px; height: 2px; background: currentColor;
  transition: transform var(--duration-fast);
}
.nav-toggle__icon { position: relative; }
.nav-toggle__icon::before, .nav-toggle__icon::after { content: ""; position: absolute; left: 0; }
.nav-toggle__icon::before { top: -6px; }
.nav-toggle__icon::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav {
  display: none;
  position: absolute; inset: 100% 0 auto 0;
  max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  padding: var(--space-s) 1rem var(--space-m);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-m);
}
.site-nav.is-open { display: block; }
.site-nav__list a {
  display: flex; align-items: center; min-height: 48px;
  font-weight: 600; text-decoration: none; color: var(--color-text);
}
.site-nav__list a[aria-current="page"] { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: 2px; }
.site-nav__cta { margin-top: var(--space-s); width: 100%; }
.lang-switch { display: flex; gap: var(--space-xs); margin-top: var(--space-xs); }
.lang-switch a { display: inline-flex; min-height: 44px; align-items: center; }
.lang-switch a[aria-current="true"] { font-weight: 700; }

@media (min-width: 64rem) {
  .site-header__phone { display: inline-flex; min-height: 44px; align-items: center; }
  .nav-toggle { display: none; }
  .site-nav {
    display: flex; align-items: center; gap: var(--space-m);
    position: static; padding: 0; max-height: none; overflow: visible;
    border: 0; box-shadow: none; background: none;
  }
  .site-nav__list { display: flex; gap: var(--space-m); }
  .site-nav__cta { margin-top: 0; width: auto; }
  .lang-switch { margin-top: 0; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb { padding-top: var(--space-s); font-size: var(--step--1); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; padding: 0; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 0.25rem; color: var(--color-text-muted); }
.breadcrumb a { display: inline-block; padding-block: 0.6rem; }
.breadcrumb [aria-current] { color: var(--color-text-muted); padding-block: 0.6rem; display: inline-block; }

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-xl) var(--space-2xl); }
.hero__inner { display: grid; gap: var(--space-l); align-items: center; }
.hero__content > * + * { margin-top: var(--space-s); }
.hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); margin-top: var(--space-m); }
.hero__risk { font-size: var(--step--1); color: var(--color-text-muted); }
.trust-list { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); font-size: var(--step--1); font-weight: 600; }
@media (min-width: 64rem) {
  .hero__inner { grid-template-columns: 1.1fr 1fr; }
}

/* ---------- Inhaltsbausteine ---------- */
.card {
  position: relative;
  padding: var(--space-m);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.card > * + * { margin-top: var(--space-2xs); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* ganze Karte klickbar, ein Link */
.card:hover { box-shadow: var(--shadow-m); transform: translateY(-2px); }
.card:focus-within { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.card__title a:focus-visible { outline: none; }

.check-list li { position: relative; padding-left: 1.75em; }
.check-list li + li { margin-top: var(--space-2xs); }
.check-list li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--color-success); }

.steps { counter-reset: step; display: grid; gap: var(--space-s); }
.steps > li { counter-increment: step; position: relative; padding-left: 3rem; min-height: 2.25rem; }
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; background: var(--color-primary); color: var(--color-primary-contrast); font-weight: 700;
}
@media (min-width: 64rem) { .steps { grid-template-columns: repeat(4, 1fr); } }

.testimonial { padding: var(--space-m); background: var(--color-bg); border-radius: var(--radius-m); border: 1px solid var(--color-border); }
.testimonial blockquote { font-size: var(--step-1); }
.testimonial figcaption { margin-top: var(--space-xs); font-weight: 700; }

.cta-band { background: var(--color-text); color: var(--color-bg); text-align: center; }
.cta-band .container > * { margin-inline: auto; }
.cta-band a:not(.btn) { color: inherit; }

.img-placeholder {
  display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, var(--color-surface) 0 12px, var(--color-bg) 12px 24px);
  border: 2px dashed var(--color-border); border-radius: var(--radius-m);
  color: var(--color-text-muted); font-weight: 700;
}
.img-placeholder--4x3 { aspect-ratio: 4 / 3; }
.img-placeholder--16x9 { aspect-ratio: 16 / 9; }

/* ---------- FAQ ---------- */
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 56px; padding-block: var(--space-xs);
  font-weight: 700; cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 1.5em; line-height: 1; transition: transform var(--duration-fast); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding-bottom: var(--space-s); }
.faq__answer > * + * { margin-top: var(--space-2xs); }

/* ---------- Formulare ---------- */
.form { display: grid; gap: var(--space-s); margin-top: var(--space-m); }
.form__field { display: grid; gap: var(--space-3xs); }
.form label { font-weight: 600; }
.form input, .form textarea, .form select {
  width: 100%; min-height: 48px;
  padding: 0.65em 0.8em;
  background: var(--color-bg);
  border: 2px solid var(--color-border); border-radius: var(--radius-s);
}
.form input:focus-visible, .form textarea:focus-visible { border-color: var(--color-focus); outline-offset: 1px; }
.form textarea { resize: vertical; }
.form input:user-invalid, .form textarea:user-invalid { border-color: var(--color-error); }
.form__optional, .form__note, .form__privacy { font-size: var(--step--1); color: var(--color-text-muted); font-weight: 400; }
.req { color: var(--color-error); }
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__status { padding: var(--space-xs) var(--space-s); border-radius: var(--radius-s); border-left: 4px solid; font-weight: 600; }
.form__status--ok { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.form__status--error { background: var(--color-error-bg); border-color: var(--color-error); color: var(--color-error); }
.form .btn { justify-self: start; }

.contact-aside { padding: var(--space-m); background: var(--color-surface); border-radius: var(--radius-m); }
.contact-aside > * + * { margin-top: var(--space-xs); }
.contact-list a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 700; }
.legal-list > div { display: grid; gap: 0 var(--space-s); padding-block: var(--space-2xs); border-bottom: 1px solid var(--color-border); }
.legal-list dt { font-weight: 700; }
@media (min-width: 48rem) { .legal-list > div { grid-template-columns: 16rem 1fr; } }

/* ---------- 2-Klick-Einbettungen ---------- */
.embed { position: relative; overflow: hidden; border-radius: var(--radius-m); background: var(--color-surface); }
.embed--16x9 { aspect-ratio: 16 / 9; }
.embed--4x3 { aspect-ratio: 4 / 3; }
.embed--1x1 { aspect-ratio: 1; }
.embed--map { aspect-ratio: 4 / 3; }
@media (min-width: 48rem) { .embed--map { aspect-ratio: 16 / 7; } }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed__placeholder {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: var(--space-xs);
  padding: var(--space-s); text-align: center; font-size: var(--step--1);
}

/* ---------- AdSense (Platz reservieren gegen CLS) ---------- */
.ad-slot { margin-block: var(--space-l); text-align: center; }
.ad-slot__label { display: block; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-3xs); }
.ad-slot .adsbygoogle { display: block; }
.ad-slot--display .adsbygoogle { min-height: 280px; }
.ad-slot--in-article .adsbygoogle { min-height: 250px; }
.ad-slot--footer .adsbygoogle { min-height: 100px; }
.ad-slot--sidebar { display: none; }
@media (min-width: 64rem) {
  .ad-slot--sidebar { display: block; position: sticky; top: calc(var(--header-h) + 1rem); }
  .ad-slot--sidebar .adsbygoogle { min-height: 600px; }
}

/* ---------- Footer ---------- */
.site-footer { margin-top: var(--space-2xl); padding-block: var(--space-xl) var(--space-m); background: var(--color-surface); font-size: var(--step--1); }
.site-footer__grid { display: grid; gap: var(--space-l); }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.site-footer__name, .site-footer__heading { font-weight: 700; font-size: var(--step-0); margin-bottom: var(--space-2xs); }
.site-footer address { font-style: normal; }
.site-footer address a, .site-footer__nav a, .site-footer__social a { display: inline-flex; min-height: 44px; align-items: center; }
.site-footer dl > div { display: flex; gap: var(--space-xs); }
.site-footer dt { font-weight: 600; min-width: 6rem; }
.site-footer__bottom { margin-top: var(--space-l); padding-top: var(--space-s); border-top: 1px solid var(--color-border); color: var(--color-text-muted); }

/* ---------- Mobile Sticky-CTA ---------- */
.sticky-cta {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: flex; gap: var(--space-2xs);
  padding: var(--space-2xs) 1rem calc(var(--space-2xs) + env(safe-area-inset-bottom));
  background: var(--color-bg); border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgb(16 24 40 / 0.08);
}
.sticky-cta .btn { flex: 1; }
.has-sticky-cta { padding-bottom: 5rem; }
@media (min-width: 64rem) {
  .sticky-cta { display: none; }
  .has-sticky-cta { padding-bottom: 0; }
}

/* ---------- Consent-Banner (nicht blockierend, fixed → kein CLS) ---------- */
.consent {
  position: fixed; inset: auto 0 0 0; z-index: 100;
  max-height: 85vh; overflow-y: auto;
  padding: var(--space-m) 1rem calc(var(--space-m) + env(safe-area-inset-bottom));
  background: var(--color-bg); color: var(--color-text);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 32px rgb(16 24 40 / 0.16);
}
.consent[hidden] { display: none; }
.consent__inner { width: min(100%, var(--container)); margin-inline: auto; display: grid; gap: var(--space-xs); }
.consent__title { font-family: var(--font-body); font-size: var(--step-1); }
.consent__text, .consent__links { font-size: var(--step--1); max-width: none; }
.consent__links a { display: inline-block; padding-block: 0.5rem; }
.consent__prefs fieldset { border: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.consent__option { display: flex; gap: var(--space-xs); align-items: flex-start; font-size: var(--step--1); min-height: 44px; }
.consent__option input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; flex: none; }
/* Mobil: Ablehnen | Akzeptieren nebeneinander (gleichwertig), Einstellungen darunter */
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs); }
.consent__actions [data-consent-action="reject"] { order: 1; }
.consent__actions [data-consent-action="accept"] { order: 2; }
.consent__actions [data-consent-action="settings"],
.consent__actions [data-consent-action="save"] { order: 3; grid-column: 1 / -1; }
@media (min-width: 48rem) {
  .consent__actions { grid-template-columns: repeat(4, auto); justify-content: end; }
  .consent__actions [data-consent-action="settings"] { order: 0; grid-column: auto; }
  .consent__actions [data-consent-action="save"] { order: 3; grid-column: auto; }
}
.consent { padding-top: var(--space-s); }
.consent__inner { gap: var(--space-2xs); }
/* Akzeptieren und Ablehnen gleichwertig (keine Dark Patterns) */
.btn--consent { background: var(--color-primary); color: var(--color-primary-contrast); }
.btn--consent:hover { background: var(--color-primary-hover); color: var(--color-primary-contrast); }
.btn--consent-ghost { background: transparent; color: var(--color-primary); border-color: currentColor; }
.btn--consent-ghost:hover { background: var(--color-surface); color: var(--color-primary); }

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

/* ---------- Druck ---------- */
@media print {
  .site-header, .site-footer__nav, .sticky-cta, .consent, .ad-slot, .nav-toggle, .skip-link { display: none !important; }
  body { padding: 0 !important; color: #000; background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}