/* =========================================================
   Tom Schoof – Finanzberatung
   Gemeinsames Stylesheet für alle Seiten
   Mobile First | Breakpoints: 768px (Tablet), 1200px (Desktop)
   ========================================================= */

/* ---------- 0. Schriften ----------
   Die Schriftdateien liegen lokal im Ordner "fonts" und werden NICHT von
   Google geladen. Dadurch wird beim Seitenaufruf keine IP-Adresse an Google
   übertragen, und es ist kein Hinweis dazu in der Datenschutzerklärung nötig.
   Der Ordner "fonts" muss also mit hochgeladen werden.
   font-display: swap zeigt sofort eine Ersatzschrift, damit nichts wartet. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lora-400.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/lora-500.woff2") format("woff2");
}

/* ---------- 1. Design-Tokens (hier zentral anpassen) ---------- */
:root {
  /* Farben */
  --bg:            #FAF7F2;  /* Seitenhintergrund, Creme */
  --surface:       #FFFFFF;  /* Karten */
  --surface-alt:   #F4EFE8;  /* zweite Fläche */
  --greige:        #E5DDD1;  /* Sekundärton */
  --line:          #D8CFC2;  /* feine Trennlinien */
  --text:          #33302B;  /* Fließtext, warmes Anthrazit */
  --text-muted:    #6B655C;  /* Sekundärtext (kontraststark genug) */
  --heading:       #1E2A3A;  /* Überschriften / Marke, dezentes Navy */
  --accent:        #B08D57;  /* Gold/Bronze – nur Linien, Buttons, Hover */
  --accent-ink:    #8A6A3C;  /* dunklere Gold-Variante für Text (Kontrast AA) */
  --accent-soft:   #F0E7D8;  /* sehr helle Gold-Fläche, z. B. Platzhalter */

  /* Typografie */
  --font-head: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Abstände */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6rem;

  /* Sonstiges */
  --maxw: 1140px;
  --radius: 3px;
  --shadow-sm: 0 1px 2px rgba(30, 42, 58, 0.04);
  --shadow-md: 0 8px 24px rgba(30, 42, 58, 0.07);
  --transition: 180ms ease;

  /* Bewegung (siehe Abschnitt 10a) */
  --anim-dauer: 900ms;
  --anim-kurve: cubic-bezier(0.16, 1, 0.3, 1);
  --anim-weg: 30px;
  /* Ungefähre Höhe des Kopfbereichs. Wird nur dafür genutzt, dass
     Sprungmarken (z. B. #bank) nicht unter dem Sticky-Header landen. */
  --header-h: 150px;
}

/* ---------- 2. Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Abstand für Sprungmarken – auf dem Handy scrollt der Kopf mit,
     dort genügt ein kleiner Abstand (Desktop-Wert siehe Breakpoint). */
  scroll-padding-top: var(--space-2);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--heading);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.175rem; }

p { margin: 0 0 var(--space-2); max-width: 68ch; }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--transition); }
a:hover { color: var(--heading); }

ul, ol { padding-left: 1.25rem; }
li { margin-bottom: 0.35rem; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-5) 0; }

/* Sichtbarer Fokus für Tastaturbedienung (Barrierefreiheit) */
:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Nur für Screenreader */
.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;
}

/* "Zum Inhalt springen" */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--heading); color: var(--bg);
  padding: 0.75rem 1.25rem; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- 3. Layout-Helfer ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.section { padding-block: var(--space-5); }
.section--alt { background: var(--surface-alt); border-block: 1px solid var(--line); }
.section--tight { padding-block: var(--space-4); }

.section-head { margin-bottom: var(--space-4); }
.section-head p { color: var(--text-muted); }

/* kleine Überzeile über Überschriften */
.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 var(--space-1);
  font-weight: 600;
}

.lead { font-size: 1.075rem; color: var(--text-muted); }

/* feine Goldlinie als Zierelement */
.rule-accent {
  width: 56px; height: 1px;
  background: var(--accent);
  border: 0; margin: var(--space-3) 0;
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.9rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}

/* Akzent-Button (Gold, Navy-Text = ausreichender Kontrast) */
.btn--accent { background: var(--accent); color: var(--heading); border-color: var(--accent); }
.btn--accent:hover, .btn--accent:focus-visible { background: var(--heading); color: var(--bg); border-color: var(--heading); }

/* Beim Überfahren wächst der Button zusätzlich leicht an.
   Nur auf Geräten mit echtem Mauszeiger, damit auf dem Handy nach dem
   Antippen nichts vergrößert stehen bleibt. */
@media (hover: hover) {
  .btn--accent:hover, .btn--accent:focus-visible { transform: scale(1.04); }
}

/* Ruhiger Umriss-Button */
.btn--ghost { background: transparent; color: var(--heading); border-color: var(--line); }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--accent); color: var(--accent-ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-3); }

/* QR-Code (WhatsApp) – ohne Kasten, steht frei auf dem Seitenhintergrund.
   Der Code selbst hat keine eigene Hintergrundfläche; der Ruhebereich um ihn
   herum ist transparent, sodass immer der Untergrund durchscheint. */
.qr {
  display: inline-flex; align-items: center; gap: var(--space-2);
  text-decoration: none;
  transition: color var(--transition);
}
.qr__code {
  width: 88px; height: 88px;
  display: block; flex: 0 0 auto;
  transition: transform var(--transition);
}
.qr:hover .qr__code, .qr:focus-visible .qr__code { transform: scale(1.03); }
.qr:hover .qr__label, .qr:focus-visible .qr__label { color: var(--accent-ink); }
.qr__label {
  font-size: 0.875rem; font-weight: 600; line-height: 1.35;
  color: var(--heading);
  transition: color var(--transition);
}
.qr__hint { display: block; font-weight: 400; font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }

/* Textlink mit Pfeil */
.link-arrow { font-weight: 600; text-decoration: none; }
.link-arrow::after { content: " \2192"; transition: transform var(--transition); display: inline-block; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- 5. Header / Navigation ---------- */
/* Auf schmalen Displays scrollt der Kopfbereich mit: Mit fünf Reitern
   braucht er dort zwei Zeilen und würde als fixierter Balken zu viel
   Bildschirm dauerhaft belegen. Zurück nach oben führt der Button unten.
   Ab 768px (siehe Breakpoint) bleibt er wie gehabt oben stehen. */
.site-header {
  position: relative; z-index: 100;
  background: rgba(250, 247, 242, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}

/* Namenszug oben links in der Ecke, darunter die Reiter.
   Kein Hamburger-Menü – die Reiter stehen auf allen Bildschirmgrößen offen da
   und brechen auf schmalen Displays einfach in die nächste Zeile um. */
.header-inner {
  position: relative;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  gap: var(--space-2);
  padding-block: 0.85rem;
  transition: padding var(--transition);
}

/* Markenzeile: Bildzeichen links, Schriftzug daneben */
.brand {
  text-decoration: none;
  display: flex; align-items: center;
  gap: 0.7rem;
  line-height: 1.15;
}
.brand__zeichen {
  width: auto; height: 34px;
  flex: 0 0 auto;
  transition: height var(--transition);
}
.brand__text { display: block; }
.brand__name {
  display: block;
  font-family: var(--font-head);
  font-size: 1.2rem;
  color: var(--heading);
  letter-spacing: 0.01em;
  /* Beim Scrollen fährt der Name zu, weil das Monogramm daneben ohnehin
     für den Namen steht. Zugefahren wird über die Höhe, nicht nur
     ausgeblendet, damit der Kopfbereich dabei wirklich flacher wird. */
  overflow: hidden;
  max-height: 1.6em;
  transition: max-height var(--transition), opacity var(--transition);
}
.brand__sub {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
  /* Bleibt beim Scrollen stehen und übernimmt dann die Markenzeile,
     deshalb wird sie dort etwas größer und dunkler. */
  transition: font-size var(--transition), color var(--transition),
              margin-top var(--transition), letter-spacing var(--transition);
}

/* Navigationsreihe – umbruchfähig, auf jeder Bildschirmgröße sichtbar */
.main-nav {
  width: 100%;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: flex-start;
  gap: 0.7rem var(--space-2);
}

.main-nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.25rem var(--space-2);
}
.main-nav__list li { position: relative; margin: 0; }

.main-nav__link {
  display: block;
  padding: 0.3rem 0;
  font-size: 0.9rem;
  color: var(--heading);
  text-decoration: none;
  transition: color var(--transition), transform var(--transition);
}
.main-nav__link:hover { color: var(--accent-ink); }
/* aktive Seite dezent markiert */
.main-nav__link[aria-current="page"] { color: var(--accent-ink); }

/* Feine Goldlinie: liegt auf dem <li>, damit sie ruhig an ihrer Stelle bleibt,
   während sich die Schrift beim Überfahren anhebt. */
.main-nav__list li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--transition);
}
.main-nav__list li:hover::after,
.main-nav__list li:focus-within::after,
.main-nav__list li:has(> [aria-current="page"])::after { transform: scaleX(1); }

.nav-cta { padding: 0.55rem 1.1rem; font-size: 0.825rem; }

/* ---------- 5b. Kopfbereich schrumpft beim Scrollen ----------
   script.js setzt die Klasse "ist-kompakt", sobald man ein Stück gescrollt
   hat. Dann fährt der Namenszug zu und nur noch Monogramm und
   "Finanzberatung" bleiben stehen: Das TS steht ja für den Namen.
   Nur ab 768px, weil der Kopf auf dem Handy ohnehin mitscrollt und dort
   nichts zu schrumpfen gibt. */
@media (min-width: 768px) {
  .site-header.ist-kompakt .brand__name {
    max-height: 0;
    opacity: 0;
  }
  /* Die Unterzeile trägt jetzt allein die Marke, deshalb etwas größer,
     dunkler und ohne den Abstand nach oben. */
  .site-header.ist-kompakt .brand__sub {
    font-size: 0.82rem;
    letter-spacing: 0.24em;
    color: var(--heading);
    margin-top: 0;
  }
  .site-header.ist-kompakt .header-inner {
    padding-block: 0.6rem;
  }
  .site-header.ist-kompakt .brand__zeichen {
    height: 30px;
  }
}

/* Hover-Animation: Schrift hebt sich leicht an – nur auf Geräten mit
   echtem Mauszeiger, damit auf dem Handy nichts springt. */
@media (hover: hover) {
  .main-nav__link:hover,
  .main-nav__link:focus-visible { transform: translateY(-3px); color: var(--accent-ink); }
}

/* ---------- 6. Hero ---------- */
.hero { padding-block: var(--space-5); }
.hero__grid { display: grid; gap: var(--space-4); align-items: center; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.1rem); margin-bottom: var(--space-2); }
.hero__claim { font-size: 1.1rem; color: var(--text-muted); max-width: 46ch; }

/* Portrait. Das Seitenverhältnis ist fest vorgegeben, das Bild füllt den
   Rahmen und wird dabei mittig beschnitten (object-fit). Dadurch bleibt das
   Layout gleich, auch wenn später ein Foto mit anderen Maßen kommt.
   object-position schiebt den Ausschnitt leicht nach oben, damit bei einem
   Hochformat der Kopf im Bild bleibt und nicht der untere Rand. */
.portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 28%;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  background: var(--surface-alt);
}
.portrait--wide { aspect-ratio: 3 / 4; }

/* ---------- 7. Karten / Raster ---------- */
.grid { display: grid; gap: var(--space-3); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

/* Werte-Block („Warum ich") – nur eine feine Goldlinie, keine Karte */
.value { border-top: 1px solid var(--accent); padding-top: var(--space-2); }
.value h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.value p { color: var(--text-muted); margin-bottom: 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.card h3 { margin-bottom: var(--space-1); }
.card p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: var(--space-2); }

/* Karte ohne Verlinkung, mit feiner Goldlinie oben (Themenkarten) */
.card--plain { border-top: 2px solid var(--accent); }
.card--plain p:last-child { margin-bottom: 0; }

/* ganze Karte klickbar */
a.card { display: block; text-decoration: none; color: inherit; }
a.card:hover, a.card:focus-visible { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.card__icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-2);
  color: var(--accent);
}
.card__icon svg { width: 26px; height: 26px; }

/* Leistungs-Blöcke (Detailseite) */
.service {
  display: grid; gap: var(--space-2);
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
}
.service:first-of-type { border-top: 0; padding-top: var(--space-2); }
.service__icon { color: var(--accent); }
.service__icon svg { width: 34px; height: 34px; }

/* Ablauf-Schritte */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); counter-reset: step; }
.steps li {
  margin: 0;
  padding-left: 3.25rem;
  position: relative;
}
.steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0.1rem;
  font-family: var(--font-head);
  font-size: 1rem;
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  border-radius: 50%;
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
}
.steps h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.steps p { color: var(--text-muted); margin: 0; }

/* Vertrauens-/Zitatabschnitt */
.quote {
  border-left: 2px solid var(--accent);
  padding-left: var(--space-3);
  font-family: var(--font-head);
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--heading);
}

/* ---------- 7b. Häufige Fragen (aufklappbar, ohne JavaScript) ---------- */
.faq { border-bottom: 1px solid var(--line); }
.faq:first-of-type { border-top: 1px solid var(--line); }

.faq > summary {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  cursor: pointer;
  list-style: none;                 /* Standard-Dreieck ausblenden */
  font-family: var(--font-head);
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--heading);
  transition: color var(--transition);
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary:hover { color: var(--accent-ink); }
.faq[open] > summary { color: var(--accent-ink); }

/* Plus-Zeichen, das beim Aufklappen zum Minus wird */
.faq__zeichen {
  position: relative;
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: 0.35rem;
}
.faq__zeichen::before,
.faq__zeichen::after {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 16px; height: 1.5px;
  background: var(--accent);
  transition: transform var(--transition), opacity var(--transition);
}
.faq__zeichen::after { transform: rotate(90deg); }
.faq[open] .faq__zeichen::after { transform: rotate(0deg); opacity: 0; }

.faq p {
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  padding-right: var(--space-4);
}

/* Der Antworttext steckt in einem eigenen Behälter, damit script.js seine
   Höhe weich auf- und zufahren kann. Ohne JavaScript klappt das Element wie
   gewohnt sofort auf, overflow:hidden stört dabei nicht. */
.faq__inhalt { overflow: hidden; }

/* Während der Bewegung gleitet der Text leicht mit nach unten, das wirkt
   natürlicher als eine Fläche, die nur größer wird. */
.faq__inhalt > * {
  transition: opacity 260ms ease, transform 260ms ease;
}
.faq.faehrt-zu .faq__inhalt > *,
.faq:not([open]) .faq__inhalt > * {
  opacity: 0;
  transform: translateY(-6px);
}
.faq[open]:not(.faehrt-zu) .faq__inhalt > * {
  opacity: 1;
  transform: none;
}

/* ---------- 8. Kontakt ---------- */
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li {
  display: flex; gap: var(--space-2); align-items: flex-start;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list__label {
  flex: 0 0 6.5rem;
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); padding-top: 0.35rem;
}
.contact-list a { font-weight: 500; }

/* Hervorgehobener Terminbuchungs-Block */
.booking {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
}
.booking p { color: var(--text-muted); }
.booking__hint { font-size: 0.8rem; }

/* Karten-Platzhalter */
.map-placeholder {
  background: var(--surface-alt);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  min-height: 220px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--space-3);
  color: var(--text-muted); font-size: 0.875rem;
}

/* ---------- 9. Formular ---------- */
.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); box-shadow: var(--shadow-sm); }
.form__field { margin-bottom: var(--space-3); }
.form label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--heading); margin-bottom: 0.4rem; }
.form .req { color: var(--accent-ink); }

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
  width: 100%;
  font-family: inherit; font-size: 1rem; color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  transition: border-color var(--transition), background-color var(--transition);
}
.form textarea { min-height: 160px; resize: vertical; }
.form input:hover, .form textarea:hover { border-color: var(--greige); }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.14); }

.form__consent { display: flex; gap: 0.7rem; align-items: flex-start; margin-bottom: var(--space-3); }
.form__consent input { margin-top: 0.45rem; width: 1rem; height: 1rem; accent-color: var(--accent-ink); flex: 0 0 auto; }
.form__consent label { font-weight: 400; font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; margin: 0; }

.form__note { font-size: 0.8rem; color: var(--text-muted); margin-top: var(--space-2); }

/* Honigtopf für den Spam-Schutz: aus dem Sichtfeld geschoben statt
   ausgeblendet, weil manche Spam-Programme display:none erkennen. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Bestätigungs-/Fehlermeldung (per JS eingeblendet) */
.form-status {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: 0.925rem;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status--ok { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--heading); }
.form-status--error { background: #FBEDE9; border: 1px solid #C97B62; color: #7A3520; }

/* ---------- 10. Rechtstexte ---------- */
.legal { max-width: 72ch; }
.legal h2 { font-size: 1.25rem; margin-top: var(--space-4); }
.legal h3 { font-size: 1.05rem; margin-top: var(--space-3); }
.legal p, .legal li { color: var(--text); }

/* Deutlich markierter Platzhalter – muss ersetzt werden */
.todo {
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  border-radius: 2px;
  color: var(--accent-ink);
  padding: 0.1rem 0.4rem;
  font-size: 0.9em;
}

/* Hinweisbox */
.notice {
  background: var(--surface-alt);
  border-left: 3px solid var(--accent);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  font-size: 0.925rem;
}
.notice p:last-child { margin-bottom: 0; }
.notice strong { color: var(--heading); }

/* ---------- 9b. Fakten-Band ----------
   Drei kurze Aussagen direkt unter dem Einstieg. Alle drei stehen so
   auch an anderer Stelle auf der Website. */
.facts {
  border-block: 1px solid var(--line);
  background: var(--surface-alt);
  padding-block: var(--space-3);
}
.facts__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: var(--space-2);
  text-align: center;
}
.facts__list li {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- 9c. Wegweiser ----------
   Einstieg nach Anliegen statt nach Produktnamen. */
.wegweiser { margin-top: var(--space-4); }
.wegweiser__frage {
  font-family: var(--font-head);
  font-size: 1.15rem;
  color: var(--heading);
  margin-bottom: var(--space-2);
}
.wegweiser__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-2);
}
.wegweiser__liste li { margin: 0; }
.wegweiser__liste a { font-size: 0.95rem; }

/* ---------- 9d. Kontaktleiste am unteren Rand (nur Handy) ----------
   Erscheint ab der Hälfte der Seite, zusammen mit dem Nach-oben-Feld.
   Ab 768px komplett ausgeblendet, dort ist der Kopfbereich sichtbar. */
.mobilbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 94;
  display: flex;
  background: rgba(250, 247, 242, 0.97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--transition), visibility var(--transition);
}
.mobilbar.is-visible { transform: none; visibility: visible; }
.mobilbar a {
  flex: 1 1 0;
  padding: 0.85rem 0.4rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--heading);
  text-decoration: none;
  border-left: 1px solid var(--line);
  transition: color var(--transition), background-color var(--transition);
}
.mobilbar a:first-child { border-left: 0; }
.mobilbar a:active { background: var(--surface-alt); color: var(--accent-ink); }

@media (max-width: 767px) {
  /* Platz für die Leiste, damit sie den Fußbereich nicht überdeckt */
  body { padding-bottom: 3.25rem; }
}
@media (min-width: 768px) {
  .mobilbar { display: none; }
}

/* ---------- 10a. Bewegung: Einfahren, Aufdecken, Linien ----------

   Handschrift: langsam, mit einer Kurve, die zügig losschießt und lange
   sanft ausläuft. Die Werte stehen als Variablen oben in Abschnitt 1:
     --anim-dauer  Dauer der Bewegung
     --anim-kurve  Beschleunigungsverlauf
     --anim-weg    Strecke, aus der Elemente hereinkommen

   Drei Sicherungen, damit nie Inhalt unsichtbar hängen bleibt:
   1. Der unsichtbare Grundzustand gilt nur, wenn <html> die Klasse
      "bewegung" trägt. Die setzt eine Zeile im Kopf jeder Seite. Ohne
      JavaScript ist also alles sofort da.
   2. Der Einstiegsabschnitt wird notfalls nach zwei Sekunden von selbst
      sichtbar, auch wenn script.js gar nicht läuft (siehe @keyframes unten).
   3. Bei "Bewegung reduzieren" ist alles abgeschaltet, siehe Abschnitt 14.

   Die Klassen setzt script.js, in der Regel erst dann, wenn ein Abschnitt
   noch unterhalb des Bildschirmrands liegt. Sichtbares wird nie angefasst.
   -------------------------------------------------------------------- */

/* --- Grundformen --- */
html.bewegung .anim-auf   { opacity: 0; transform: translateY(var(--anim-weg)); }
html.bewegung .anim-zoom  { opacity: 0; transform: scale(1.06); }
html.bewegung .anim-linie { transform: scaleX(0); transform-origin: left center; }
.anim-maske { overflow: hidden; }
html.bewegung .anim-maske__innen { transform: translateY(105%); }
.anim-maske__innen { display: block; }

html.bewegung .anim-auf,
html.bewegung .anim-zoom,
html.bewegung .anim-linie,
html.bewegung .anim-maske__innen {
  transition: opacity var(--anim-dauer) var(--anim-kurve) var(--anim-verzug, 0ms),
              transform var(--anim-dauer) var(--anim-kurve) var(--anim-verzug, 0ms);
  will-change: opacity, transform;
}

/* --- Aufgedeckter Zustand --- */
html.bewegung .anim-auf.ist-da,
html.bewegung .anim-zoom.ist-da,
html.bewegung .anim-linie.ist-da { opacity: 1; transform: none; }
html.bewegung .anim-maske.ist-da .anim-maske__innen { transform: none; }

/* Grafikspeicher nach der Bewegung wieder freigeben */
html.bewegung .ist-da,
html.bewegung .ist-da .anim-maske__innen { will-change: auto; }

/* --- Goldlinien, die in die Breite wachsen ---
   Bei den Karten liegt die Linie als eigene Fläche über dem Rahmen, damit
   sie sich aufziehen lässt. Ohne die Klasse anim-linie bleibt alles wie
   vorher, die Linie ist dann einfach sofort da. */
.card--plain { position: relative; }
.card--plain::before {
  content: "";
  position: absolute;
  left: -1px; right: -1px; top: -1px;
  height: 2px;
  background: var(--accent);
}
html.bewegung .card--plain.anim-linie-karte::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--anim-dauer) var(--anim-kurve) var(--anim-verzug, 0ms);
}
html.bewegung .card--plain.anim-linie-karte.ist-da::before { transform: none; }

.value { position: relative; }
html.bewegung .value.anim-linie-karte { border-top-color: transparent; }
html.bewegung .value.anim-linie-karte::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--anim-dauer) var(--anim-kurve) var(--anim-verzug, 0ms);
}
html.bewegung .value.anim-linie-karte.ist-da::before { transform: none; }

/* --- Einstieg beim Laden ---
   Der erste Abschnitt wird kurz verhüllt, damit script.js die Elemente
   vorbereiten kann, ohne dass etwas aufblitzt. Danach fährt er ein.
   Das @keyframes ist die Notbremse: Sollte script.js nicht laufen, wird der
   Abschnitt nach zwei Sekunden auch ohne Zutun sichtbar. */
html.bewegung main > section:first-of-type {
  opacity: 0;
  animation: notfallSichtbar 1ms linear 2s forwards;
}
html.bewegung main > section:first-of-type.bereit {
  opacity: 1;
  animation: none;
  transition: opacity 200ms linear;
}
@keyframes notfallSichtbar { to { opacity: 1; } }

/* ---------- 10b. Zurück nach oben ----------
   Taucht erst auf, wenn man am Seitenende angekommen ist (siehe script.js). */
.to-top {
  position: fixed;
  left: 50%; bottom: var(--space-3);
  z-index: 95;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  font-family: var(--font-body);
  font-size: 0.85rem; font-weight: 600; line-height: 1;
  background: var(--surface);
  color: var(--heading);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  /* Ausgangszustand: unsichtbar und nicht fokussierbar.
     translateX(-50%) sorgt für die waagerechte Mitte und muss deshalb
     in beiden Zuständen mitgeführt werden. */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px) scale(0.94);
  transition: opacity var(--transition), transform var(--transition),
              visibility var(--transition), border-color var(--transition),
              color var(--transition);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%); }
.to-top:hover, .to-top:focus-visible { border-color: var(--accent); color: var(--accent-ink); }
.to-top svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Auf dem Handy sitzt unten die Kontaktleiste, deshalb rutscht das
   Nach-oben-Feld darüber. Diese Regel muss NACH der Grundeinstellung von
   .to-top stehen, sonst gewinnt der Grundwert von weiter oben. */
@media (max-width: 767px) {
  .to-top { bottom: 4.25rem; }
}

@media (min-width: 768px) {
  .to-top { bottom: var(--space-4); }
}

/* ---------- 11. Footer ---------- */
.site-footer {
  background: var(--surface-alt);
  border-top: 1px solid var(--line);
  padding-block: var(--space-4);
  margin-top: var(--space-6);
  font-size: 0.875rem;
}
.site-footer__grid { display: grid; gap: var(--space-3); }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { color: var(--accent-ink); text-decoration: underline; }
.site-footer__brand { font-family: var(--font-head); font-size: 1.05rem; color: var(--heading); }
.site-footer__logo {
  width: auto; height: 68px;
  display: block;
  margin-bottom: var(--space-2);
}
.site-footer__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.site-footer__nav li { margin: 0; }
.site-footer__meta { color: var(--text-muted); border-top: 1px solid var(--line); padding-top: var(--space-2); margin-top: var(--space-2); }
.site-footer__meta p { margin: 0; font-size: 0.8rem; max-width: none; }

/* ---------- 12. Breakpoints ---------- */
@media (min-width: 768px) {
  /* zwei Zeilen: Namenszug, darunter Reiter + Terminbutton */
  :root { --header-h: 136px; }

  /* Ab hier bleibt der Kopfbereich beim Scrollen stehen */
  .site-header { position: sticky; top: 0; }
  html { scroll-padding-top: calc(var(--header-h) + 1rem); }

  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.875rem; }

  .container { padding-inline: var(--space-4); }
  .section { padding-block: var(--space-6); }
  .hero { padding-block: var(--space-6); }

  /* Namenszug etwas größer, Reiter luftiger gesetzt */
  .brand__name { font-size: 1.6rem; }
  .brand__sub { font-size: 0.72rem; letter-spacing: 0.22em; }
  .header-inner { gap: var(--space-3); padding-block: var(--space-2); }
  /* Der Namenszug fährt hier zu. Etwas Luft in der Höhe, damit bei der
     größeren Schrift nichts beschnitten wird. */
  .brand__name { max-height: 1.7em; }
  .main-nav { gap: var(--space-2) var(--space-4); }
  .main-nav__list { gap: var(--space-4); }
  .main-nav__link { font-size: 0.95rem; padding: 0.35rem 0; }
  .nav-cta { padding: 0.7rem 1.25rem; font-size: 0.9rem; }

  /* Fakten nebeneinander, getrennt durch feine Goldlinien */
  .facts__list { flex-direction: row; justify-content: center; gap: 0; }
  .facts__list li { padding-inline: var(--space-4); border-left: 1px solid var(--accent); }
  .facts__list li:first-child { border-left: 0; }

  .wegweiser__liste { grid-template-columns: repeat(2, 1fr); gap: var(--space-2) var(--space-4); }

  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  .hero__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-5); }
  .split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-5); align-items: start; }
  .split--reverse { grid-template-columns: 1.15fr 0.85fr; }

  .service { grid-template-columns: 3rem 1fr; column-gap: var(--space-3); }

  .site-footer__grid { grid-template-columns: 1fr auto; align-items: start; }
}

@media (min-width: 1200px) {
  /* Ab hier passt alles in eine Zeile: Namenszug links in der Ecke,
     Reiter und Terminbutton rechts daneben. Dadurch ist der Kopfbereich
     nur noch halb so hoch wie zuvor. */
  .header-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .main-nav { width: auto; justify-content: flex-end; flex-wrap: nowrap; }

  h1 { font-size: 2.75rem; }
  .section { padding-block: var(--space-7); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .hero__grid { gap: var(--space-6); }
}

/* ---------- 13. Druckansicht ----------
   Beim Ausdrucken fallen Navigation, Buttons und Zierelemente weg.
   Bei Links wird die Adresse hinter den Text gesetzt, sonst weiß man
   auf dem Papier nicht, wohin sie führten. */
@media print {
  .site-header,
  .to-top,
  .mobilbar,
  .btn,
  .qr,
  .skip-link,
  .portrait,
  .map-placeholder,
  .notice { display: none !important; }

  /* Beim Drucken darf nichts wegen der Animationen fehlen */
  html.bewegung main > section:first-of-type { opacity: 1 !important; animation: none !important; }
  html.bewegung .anim-auf,
  html.bewegung .anim-zoom,
  html.bewegung .anim-linie,
  html.bewegung .anim-maske__innen { opacity: 1 !important; transform: none !important; }
  html.bewegung .card--plain.anim-linie-karte::before,
  html.bewegung .value.anim-linie-karte::before { transform: none !important; }
  html.bewegung .value.anim-linie-karte { border-top-color: var(--accent); }
  .anim-maske { overflow: visible !important; }
  body { padding-bottom: 0 !important; }

  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.5; }
  .container { max-width: none; padding: 0; }
  .section { padding-block: 0.5cm; }
  .section--alt { background: none; border: 0; }

  h1, h2, h3 { color: #000; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  /* Aufgeklappte Fragen drucken vollständig: Höhe und Einblendung, die die
     Animation setzt, werden zurückgesetzt. Zugeklappte Fragen bleiben
     zugeklappt, gedruckt wird also das, was auf dem Schirm zu sehen war. */
  .faq__inhalt { height: auto !important; overflow: visible !important; }
  .faq[open] .faq__inhalt > * { opacity: 1 !important; transform: none !important; }

  a { color: #000; text-decoration: underline; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  main a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 9pt; }

  .site-footer { background: none; border-top: 1px solid #999; margin-top: 1cm; }
}

/* ---------- 14. Reduzierte Bewegung ----------
   Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat, bekommt die
   Seite ohne jede Animation. Wichtig dabei: Die unsichtbaren Grundzustände
   aus Abschnitt 10a müssen mit abgeschaltet werden, sonst bliebe Inhalt
   verborgen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  html.bewegung main > section:first-of-type { opacity: 1 !important; animation: none !important; }
  html.bewegung .anim-auf,
  html.bewegung .anim-zoom,
  html.bewegung .anim-linie,
  html.bewegung .anim-maske__innen { opacity: 1 !important; transform: none !important; }
  html.bewegung .card--plain.anim-linie-karte::before,
  html.bewegung .value.anim-linie-karte::before { transform: none !important; }
  html.bewegung .value.anim-linie-karte { border-top-color: var(--accent); }
}