/* ═══════════════════════════════════════════════════════════════════════
   BORN FOR HORSES · Vorschaltseite (bis zum Livegang der Hauptseite)
   Tokens 1:1 aus website/css/style.css — keine neuen Farben.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --creme: #FAF7EF;
  --petrol-700: #1A5560;
  --petrol-800: #14404A;
  --petrol-900: #0F3138;
  --champagner: #D6BB8E;
  --champagner-hell: #EBDDBE;
  --champagner-text: #816539;
  --ivory-soft: #EDE5D3;
  --text: #24424A;
  --text-soft: #4A6167;
  --linie: rgba(129, 101, 57, .22);
  --linie-dark: rgba(235, 221, 190, .22);
  --gut-x: clamp(20px, 5vw, 72px);
  --measure: 48ch;
  --spalte: 52ch;          /* eine Breite für Text und Trennlinien der Startseite */
}

@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/EBGaramond-400.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/EBGaramond-600.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/EBGaramond-italic-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Montserrat-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 96%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 108%; ascent-override: 96%; descent-override: 25%; line-gap-override: 0%; }
:root { --serif: "EB Garamond", "EB Garamond Fallback", Georgia, serif; --sans: "Montserrat", "Montserrat Fallback", Arial, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font: 400 1rem/1.65 var(--sans); color: var(--text); background: var(--creme); }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--champagner); color: var(--petrol-900); }
:focus-visible { outline: 2px solid var(--champagner); outline-offset: 3px; border-radius: 2px; }

/* Links: Unterstreichung in der Linkfarbe, 2 px; Rufnummer ohne */
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; text-decoration-color: currentColor; }
a:hover { text-decoration-thickness: 3px; }
a.tel { text-decoration: none; }

.eyebrow { font: 500 .74rem/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; }

/* ── Startseite: Petrol, wie die OG-Karte ───────────────────────────────── */
.vs { background: var(--petrol-800); color: var(--ivory-soft); min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.vs main { flex: 1; display: grid; align-items: center; gap: clamp(28px, 5vw, 88px);
  width: 100%; max-width: 1240px; margin: 0 auto; padding: clamp(32px, 6vh, 80px) var(--gut-x) clamp(28px, 5vh, 60px); }
.vs main > div { max-width: var(--spalte); }
@media (min-width: 900px) { .vs main { grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); } }

.siegel { width: clamp(168px, 44vw, 440px); aspect-ratio: 1; }
@media (min-width: 900px) { .siegel { width: 100%; } }

/* Hinweisband: macht klar, dass es eine Übergangsseite ist. Petrol 900 auf Champagner = 7,5 : 1 */
.vorab { background: var(--champagner); color: var(--petrol-900); }
.vorab-in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; max-width: 1240px; margin: 0 auto; padding: 10px var(--gut-x); font: 500 .86rem/1.45 var(--sans); }
.vorab b { font: 600 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 6px 10px; border: 1px solid var(--petrol-900); border-radius: 2px; }
.status-kicker { display: block; margin-bottom: 8px; font: 600 clamp(1.05rem, 1.6vw, 1.3rem)/1.3 var(--sans); font-style: normal; letter-spacing: .3em; text-transform: uppercase; color: var(--champagner); }

.vs .eyebrow { color: var(--champagner); margin-bottom: 14px; }
.vs h1 { font: 600 clamp(2.6rem, 6.4vw, 5rem)/1.04 var(--serif); color: var(--creme); letter-spacing: -.005em; text-wrap: balance; }
.lead { margin-top: 18px; font-size: clamp(1.02rem, 1.35vw, 1.16rem); color: var(--ivory-soft); }

.status { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--linie-dark);
  font: italic 500 clamp(1.3rem, 2.3vw, 1.75rem)/1.3 var(--serif); color: var(--creme); text-wrap: balance; }

.kontakt { margin-top: 22px; }
.kontakt .tel { display: inline-flex; align-items: center; min-height: 48px; font: 600 clamp(1.9rem, 3.6vw, 2.7rem)/1.1 var(--serif); color: var(--champagner); letter-spacing: .01em; }
.kontakt .tel:hover { color: var(--champagner-hell); }
.kontakt .mail { display: inline-flex; align-items: center; min-height: 48px; font: 600 clamp(1.45rem, 2.6vw, 2rem)/1.15 var(--serif); color: var(--champagner); overflow-wrap: anywhere; }
.kontakt .mail:hover { color: var(--champagner-hell); }
.kontakt .zeile { margin-top: 6px; font-size: .92rem; color: var(--ivory-soft); }

.hinweis { margin-top: 22px; font-size: .9rem; color: var(--ivory-soft); }

.sprachen { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--linie-dark); display: grid; gap: 10px; font-size: .88rem; color: var(--ivory-soft); }
@media (min-width: 700px) { .sprachen { grid-template-columns: 1fr 1fr; gap: 28px; } }
.sprachen b { display: block; font: 500 .7rem/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--champagner); margin-bottom: 2px; }

.fuss { border-top: 1px solid var(--linie-dark); }
.fuss-in { max-width: 1240px; margin: 0 auto; padding: 14px var(--gut-x) 18px; display: flex; flex-wrap: wrap; gap: 4px 28px; align-items: center; justify-content: space-between; }
.fuss-in > * { font-size: .84rem; }
.fuss nav { display: flex; gap: 4px 24px; flex-wrap: wrap; }
.fuss a { display: inline-flex; align-items: center; min-height: 44px; }
.vs .fuss a { color: var(--champagner-hell); }
.vs .fuss small { color: var(--ivory-soft); font-size: inherit; }

/* ── Rechtsseiten: Creme ────────────────────────────────────────────────── */
.recht .kopf { background: var(--petrol-800); }
.recht .kopf-in { max-width: 1240px; margin: 0 auto; padding: 12px var(--gut-x); display: flex; align-items: center; gap: 16px; }
.recht .kopf a { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; text-decoration: none; color: var(--creme); }
.recht .kopf img { width: 56px; height: 56px; }
.recht .kopf .wm { font: 600 1.45rem/1 var(--serif); }
.recht .kopf .wm small { display: block; margin-top: 5px; font: 500 .66rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--champagner); }

/* Kopf, Inhalt und Fuß teilen eine Breite = Textmaß, damit Trennlinien nicht über den Text laufen */
.recht .kopf-in, .recht main, .recht .fuss-in { max-width: calc(var(--measure) + 2 * var(--gut-x)); }
.recht main { margin: 0 auto; padding: clamp(36px, 6vw, 72px) var(--gut-x) clamp(48px, 7vw, 88px); }
.recht h1 { font: 600 clamp(2.2rem, 5vw, 3.4rem)/1.08 var(--serif); color: var(--petrol-700); hyphens: manual; }
.recht h2 { margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--linie); font: 600 1.45rem/1.2 var(--serif); color: var(--petrol-700); }
.recht p, .recht ul, .recht address { margin-top: 12px; font-style: normal; }
.recht ul { padding-left: 1.2em; }
.recht li + li { margin-top: 4px; }
.recht a { color: var(--petrol-700); }
.recht .intro { margin-top: 16px; font-size: 1.06rem; color: var(--text-soft); }
.recht .stand { margin-top: 38px; font-size: .88rem; color: var(--text-soft); }
.recht .fuss { background: var(--petrol-800); color: var(--ivory-soft); border-top: 0; }
.recht .fuss a { color: var(--champagner-hell); }
.recht .fuss small { font-size: inherit; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print { .vs { background: #fff; color: #000; } .vs h1, .status { color: #000; } }

/* ── Einwilligung (Google Analytics) ────────────────────────────────────────
   Creme-Karte mit Haarlinie, unten fixiert. Beide Knöpfe gleich gestaltet –
   „Ablehnen" darf nicht schwächer aussehen als „Zustimmen". */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 400; padding: 0 12px 12px; pointer-events: none; }
.consent[hidden] { display: none; }
.consent-in { pointer-events: auto; max-width: 980px; margin: 0 auto; background: var(--creme); color: var(--text);
  border: 1px solid var(--champagner); border-radius: 3px; box-shadow: 0 10px 40px rgba(15, 49, 56, .35);
  padding: 20px clamp(18px, 3vw, 28px); display: grid; gap: 16px 32px; align-items: center; }
@media (min-width: 760px) { .consent-in { grid-template-columns: minmax(0, 1fr) auto; } }
.consent-titel { font: 600 1.3rem/1.2 var(--serif); color: var(--petrol-700); margin-bottom: 6px; }
.consent-text p:last-child { font-size: .88rem; line-height: 1.6; max-width: 70ch; }
.consent a { color: var(--petrol-700); }
.consent-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.consent-btn { flex: 1 1 140px; min-height: 48px; padding: 0 22px; border: 1px solid var(--petrol-700); border-radius: 2px;
  background: var(--petrol-700); color: var(--creme); font: 600 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.consent-btn:hover { background: var(--petrol-900); border-color: var(--petrol-900); }
.consent-btn:focus-visible { outline: 2px solid var(--champagner-text); outline-offset: 3px; }

.linkbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .84rem; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; }
.linkbtn[hidden] { display: none; }
.vs .fuss .linkbtn, .recht .fuss .linkbtn { color: var(--champagner-hell); }
.linkbtn:hover { text-decoration-thickness: 3px; }
@media print { .consent, .linkbtn { display: none !important; } }
.recht .linkbtn.inline { display: inline; min-height: 0; font-size: inherit; color: var(--petrol-700); }
.recht code { font-size: .92em; }
.consent-in:focus { outline: none; }