/* Horizon Service – Stil „Nachtblau Modern“ (Entwurf A, von Ben gewählt am 19.10.2026)
   Ganze Seite dunkelblau, Gold als metallischer Verlauf, Manrope selbst gehostet. */

@font-face { font-family: "Manrope"; src: url("../fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --tief: #060F22;
  --nacht: #0A1730;
  --flaeche: #0F2142;
  --flaeche-2: #142A52;
  --linie: rgba(214, 180, 102, .18);
  --linie-hell: rgba(255, 255, 255, .09);
  --gold-1: #F4DFA2;
  --gold-2: #D6B05C;
  --gold-3: #A9823A;
  --gold: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 45%, var(--gold-3) 100%);
  --auf-gold: #1A1406;
  --text: #F3F5FA;
  --leise: #A9B4CB;
  --sanft: #C9D2E3;
  --gold-v: #C9A24E;
  --gold-hell: #E3C57E;
  --gold-text: #8E6B22;
  --nacht-satt: #0B1A35;
  --papier: #F3F4F7;
  --tinte: #0B1A35;
  --tinte-leise: #4A5670;
  --linie-papier: #DCE0E8;
  --rot: #FF8A80;
  --gruen: #8FE3B0;
  --rand: clamp(18px, 4.5vw, 48px);
  --breite: 1240px;
  --abstand: clamp(84px, 11vw, 150px);
}

*, *::before, *::after { box-sizing: border-box; }
/* Kein seitliches Wischen auf Mobil: clip statt hidden, sonst klebt sticky nicht mehr. */
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { overflow-x: clip; margin: 0; background: var(--tief); color: var(--text); font-family: "Manrope", system-ui, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
a { color: inherit; text-decoration: none; }
p a, li a { overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
[id] { scroll-margin-top: 100px; }

.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rahmen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.springen { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--gold); color: var(--auf-gold); padding: 10px 18px; border-radius: 999px; font-weight: 700; }
.springen:focus { top: 12px; }

/* Platzhalter für fehlende Kundenangaben – vor dem Livegang darf keiner übrig sein. */
.platzhalter { background: rgba(214,176,92,.16); outline: 1px dashed var(--gold-2); border-radius: 4px; padding: 0 .25em; }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border-radius: 6px; border: 0; font: inherit; font-weight: 700; font-size: 16px; letter-spacing: -.005em; white-space: nowrap; cursor: pointer; transition: transform .2s, box-shadow .2s, background-color .2s; }
.knopf--gold { background: var(--gold-v); color: var(--auf-gold); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.knopf--gold:hover { background: #D8B464; }
.knopf .ico { width: 18px; height: 18px; }
.knopf[disabled] { opacity: .65; cursor: progress; transform: none; }
@media (prefers-reduced-motion: reduce) { .knopf, .leiste { transition: none !important; } }

/* ---------- Navigation: klassischer Kopf, über dem Hero transparent, beim Scrollen satt dunkelblau ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background-color .3s, box-shadow .3s; }
.nav__innen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; height: 88px; padding: 0 var(--rand); display: flex; align-items: center; gap: 40px; transition: height .3s; }
.nav.ist-gescrollt { background: rgba(8,20,40,.94); box-shadow: 0 1px 0 rgba(201,162,78,.28); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav.ist-gescrollt .nav__innen { height: 72px; }
.logo { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-right: auto; color: var(--text); }
.logo svg { width: auto; height: 28px; flex: none; color: var(--gold-v); }
.logo__name { white-space: nowrap; }
.logo__text { display: grid; line-height: 1; }
.logo__name { font-weight: 800; font-size: 21px; letter-spacing: -.02em; }
.logo__zusatz { margin-top: 5px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-v); }
.nav__links { display: flex; gap: 34px; font-size: 15px; font-weight: 500; color: rgba(243,245,250,.78); }
.nav__links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; transition: color .2s; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1.5px; background: var(--gold-v); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__tel { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; font-size: 15px; white-space: nowrap; }
.nav__tel .ico { width: 18px; height: 18px; color: var(--gold-v); }
.nav .knopf { min-height: 48px; padding: 0 22px; font-size: 15px; }
.menue-knopf { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: none; color: var(--text); cursor: pointer; place-items: center; }
.menue-knopf span, .menue-knopf span::before, .menue-knopf span::after { display: block; width: 18px; height: 1.6px; background: currentColor; border-radius: 2px; position: relative; transition: transform .25s, background-color .25s; }
.menue-knopf span::before, .menue-knopf span::after { content: ""; position: absolute; left: 0; }
.menue-knopf span::before { top: -6px; } .menue-knopf span::after { top: 6px; }
.menue-offen .menue-knopf span { background: transparent; }
.menue-offen .menue-knopf span::before { transform: translateY(6px) rotate(45deg); }
.menue-offen .menue-knopf span::after { transform: translateY(-6px) rotate(-45deg); }
.menue { display: none; }

/* ---------- Hero ---------- */
.held { position: relative; min-height: min(100svh, 980px); display: flex; align-items: flex-end; isolation: isolate; overflow: hidden; background: var(--tief); }
.held__bild { position: absolute; inset: 0; z-index: -2; }
.held__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; transform: scale(1.03); animation: ruhe 16s ease-out forwards; }
@keyframes ruhe { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .held__bild img { animation: none; transform: none; } }
.held::after { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(6,15,34,.86) 0%, rgba(6,15,34,.6) 34%, rgba(6,15,34,.08) 62%, rgba(6,15,34,0) 100%),
  linear-gradient(180deg, rgba(6,15,34,.6) 0%, rgba(6,15,34,0) 20%, rgba(6,15,34,0) 60%, rgba(6,15,34,.75) 100%); }
.held__innen { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 180px var(--rand) 104px; }
.held__ort { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 600; color: var(--gold-hell); }
.held__ort::before { content: ""; width: 36px; height: 1.5px; background: var(--gold-v); }
.held h1 { margin-top: 22px; font-size: clamp(42px, 6.6vw, 92px); line-height: 1; letter-spacing: -.04em; font-weight: 700; max-width: 16ch; text-wrap: balance; }
.held__text { margin-top: 24px; max-width: 470px; font-size: clamp(17px, 1.45vw, 19px); color: var(--sanft); }
.held__wege { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.textlink { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; }
.textlink .ico { width: 18px; height: 18px; color: var(--gold-v); }
.textlink span { border-bottom: 1.5px solid rgba(201,162,78,.55); padding-bottom: 2px; transition: border-color .2s; }
.textlink:hover span { border-color: var(--gold-v); }

/* KI-Kennzeichnung (Art. 50 KI-VO): im Bild, damit sie beim Weitergeben erhalten bleibt */
.ki { position: absolute; top: 14px; right: 14px; z-index: 2; font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 4px; background: rgba(8,20,42,.66); color: #E4E8F0; pointer-events: none; }
.held__bild .ki { top: auto; bottom: 18px; right: 20px; }

/* ---------- Zusagen-Band: volle Breite, trennt den dunklen Hero vom hellen Bereich ---------- */
.zusagen { position: relative; z-index: 3; background: linear-gradient(180deg, #0B1A35 0%, #081428 100%); }
.zusagen::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(201,162,78,0) 0%, rgba(201,162,78,.85) 22%, rgba(201,162,78,.85) 78%, rgba(201,162,78,0) 100%); }
.zusagen ul { list-style: none; margin: 0 auto; padding: 0 var(--rand); max-width: calc(var(--breite) + 2 * var(--rand)); display: grid; grid-template-columns: 1fr 1fr 1.15fr; }
.zusagen li { position: relative; padding: 44px 40px; display: flex; align-items: center; gap: 22px; }
.zusagen li:first-child { padding-left: 0; }
.zusagen li + li::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 1px; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.14), rgba(255,255,255,0)); }
.zusagen strong { font-size: clamp(40px, 4vw, 56px); line-height: 1; font-weight: 300; letter-spacing: -.04em; color: var(--gold-v); white-space: nowrap; }
.zusagen span { display: grid; gap: 4px; }
.zusagen b { font-size: 16px; font-weight: 700; }
.zusagen small { font-size: 14px; color: var(--leise); }

/* ---------- Helle Sektionen ---------- */
.hell { background: var(--papier); color: var(--tinte); }
.hell .kopfzeile p, .hell p { color: var(--tinte-leise); }
.oben-zeile, .hell .oben-zeile, .hell .kopfzeile .oben-zeile { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; color: var(--gold-text); margin-bottom: 18px; }
.abschnitt--dunkel .oben-zeile, .abschnitt--dunkel .kopfzeile .oben-zeile, .held .oben-zeile { color: var(--gold-hell); }
.oben-zeile::before { content: ""; width: 28px; height: 1.5px; background: currentColor; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: var(--abstand) 0; }
.abschnitt--flaeche { background: linear-gradient(180deg, var(--nacht), var(--tief)); border-top: 1px solid var(--linie-hell); }
.kopfzeile { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: clamp(36px, 5vw, 64px); }
.kopfzeile h2, .titel { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.04em; font-weight: 700; max-width: 15ch; text-wrap: balance; }
.kopfzeile p { max-width: 380px; color: var(--leise); }
h3 { font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }


/* ---------- Leistungen: Reiter auf dem Desktop, aufklappbar auf dem Handy ---------- */
.reiter { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; column-gap: clamp(32px, 5vw, 72px); align-items: start; }
.reiter__eintrag { display: contents; }
.reiter__knopf { grid-column: 1; display: flex; align-items: center; gap: 18px; width: 100%; padding: 22px 4px 22px 22px; border: 0; border-top: 1px solid var(--linie-papier); background: none; font: inherit; color: var(--tinte); text-align: left; cursor: pointer; position: relative; transition: background-color .2s; }
.reiter__eintrag:last-child .reiter__knopf { border-bottom: 1px solid var(--linie-papier); }
.reiter__knopf::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px; background: var(--gold-v); transform: scaleY(0); transition: transform .25s; }
.reiter__knopf .ico { width: 26px; height: 26px; color: var(--tinte-leise); transition: color .2s; }
.reiter__knopf span { display: grid; gap: 2px; }
.reiter__knopf b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.reiter__knopf small { font-size: 14px; color: var(--tinte-leise); }
.reiter__knopf:hover { background: rgba(11,26,53,.035); }
.reiter__knopf[aria-expanded="true"] { background: #fff; }
.reiter__knopf[aria-expanded="true"]::before { transform: scaleY(1); }
.reiter__knopf[aria-expanded="true"] .ico { color: var(--gold-text); }
.reiter__inhalt { grid-column: 2; grid-row: 1 / span 4; display: grid; grid-template-columns: 1.15fr 1fr; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 0 var(--linie-papier), 0 30px 60px -40px rgba(11,26,53,.35); animation: einblenden .35s ease; }
.reiter__inhalt[hidden] { display: none; }
@keyframes einblenden { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reiter__inhalt { animation: none; } .reiter__knopf::before { transition: none; } }
.reiter__bild { position: relative; min-height: 380px; }
.reiter__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reiter__text { padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; }
.reiter__text h3 { font-size: 26px; letter-spacing: -.03em; color: var(--tinte); }
.haken { list-style: none; padding: 0; margin: 22px 0 30px; display: grid; gap: 12px; }
.haken li { position: relative; padding-left: 30px; color: var(--tinte-leise); line-height: 1.45; }
.haken li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 12px; height: 7px; border-left: 2px solid var(--gold-v); border-bottom: 2px solid var(--gold-v); transform: rotate(-45deg); }
.reiter__text .knopf { margin-top: auto; align-self: flex-start; }
.knopf--dunkel { background: var(--tinte); color: #fff; }
.knopf--dunkel:hover { background: #142A52; }

/* ---------- Dunkle Sektionen ---------- */
.abschnitt--dunkel { background: linear-gradient(180deg, #081428 0%, var(--tief) 100%); color: var(--text); }
.abschnitt--dunkel .kopfzeile p { color: var(--leise); }

/* ---------- Vorher / Nachher: groß, mit goldenem Griff ---------- */
.vergleich-rahmen { margin: 0; }
.vergleich { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; background: var(--flaeche); }
.vergleich img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; pointer-events: none; }
.vergleich__nachher { clip-path: inset(0 0 0 var(--pos, 50%)); }
.vergleich input[type="range"] { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.vergleich__griff { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: var(--gold-v); pointer-events: none; }
.vergleich__griff svg { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; padding: 16px; border-radius: 50%; background: var(--gold-v); fill: none; stroke: var(--auf-gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.vergleich input[type="range"]:focus-visible ~ .vergleich__griff svg { outline: 3px solid #fff; outline-offset: 3px; }
.vergleich__schild { position: absolute; z-index: 1; top: 18px; padding: 6px 12px; border-radius: 4px; background: rgba(6,15,34,.72); font-size: 14px; font-weight: 700; pointer-events: none; }
.vergleich__schild--vorher { left: 18px; }
.vergleich__schild--nachher { right: 18px; }
.vergleich .ki { top: auto; bottom: 14px; right: 14px; }
.vergleich-rahmen figcaption { margin-top: 16px; font-size: 14px; color: var(--leise); }

/* ---------- Über uns: Foto mit Badge, Unterschrift ---------- */
@font-face { font-family: "Signatur"; src: url("../fonts/signatur.woff2") format("woff2"); font-display: swap; }
.ueber { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(48px, 7vw, 110px); align-items: center; }
.ueber__bild { position: relative; max-width: 460px; }
.ueber__foto { aspect-ratio: 4 / 5; border-radius: 6px; display: grid; place-content: center; justify-items: center; gap: 16px; background: linear-gradient(160deg, #142A52, #0B1A35); color: rgba(255,255,255,.35); }
.ueber__foto svg { width: 96px; height: 96px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.ueber__foto .platzhalter { color: #fff; font-size: 14px; }
.ueber__badge { position: absolute; right: -28px; bottom: 36px; display: grid; justify-items: start; gap: 2px; padding: 22px 26px; border-radius: 6px; background: var(--gold-v); color: var(--auf-gold); box-shadow: 0 24px 40px -20px rgba(11,26,53,.55); }
.ueber__badge svg { width: 34px; height: 21px; margin-bottom: 8px; }
.ueber__badge b { font-size: 20px; letter-spacing: -.02em; }
.ueber__badge small { font-size: 14px; font-weight: 600; opacity: .8; }
.ueber__text h2 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.06; letter-spacing: -.035em; font-weight: 700; color: var(--tinte); max-width: 18ch; text-wrap: balance; }
.ueber__text > p:not(.oben-zeile) { margin-top: 22px; font-size: 18px; max-width: 34em; }
.werte { list-style: none; padding: 0; margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.werte li { font-weight: 700; color: var(--tinte); font-size: 15px; }
.werte li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 9px 2px 0; border-radius: 50%; background: var(--gold-v); }
.unterschrift { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--linie-papier); display: flex; align-items: end; gap: 24px; flex-wrap: wrap; }
.unterschrift__name, .hell .unterschrift__name { font-family: "Signatur", cursive; font-size: 54px; line-height: .9; color: var(--gold-text); }
.hell .unterschrift__rolle { font-size: 14px; color: var(--tinte-leise); padding-bottom: 6px; }
.unterschrift__rolle b { color: var(--tinte); }

/* ---------- Ablauf: die goldene Horizontlinie verbindet die Schritte ---------- */
.horizont { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.horizont::before { content: ""; position: absolute; left: 0; right: 0; top: 33px; height: 1.5px; background: linear-gradient(90deg, rgba(201,162,78,.15) 0%, rgba(201,162,78,.6) 40%, var(--gold-v) 100%); }
.horizont li { position: relative; padding-right: 32px; }
.horizont__punkt { position: relative; z-index: 1; display: block; width: 16px; height: 16px; margin: 26px 0 30px; border-radius: 50%; background: var(--tief); border: 1.5px solid var(--gold-v); }
.horizont__ziel .horizont__punkt { width: 44px; height: 22px; margin: 12px 0 38px -14px; border: 0; border-radius: 44px 44px 0 0; background: radial-gradient(circle at 50% 100%, #F4DFA2 0%, var(--gold-v) 55%, #A9823A 100%); box-shadow: 0 -6px 30px rgba(201,162,78,.45); }
.horizont__nr { display: block; font-size: 15px; font-weight: 600; color: var(--gold-v); letter-spacing: .02em; }
.horizont h3 { margin-top: 8px; font-size: 24px; letter-spacing: -.025em; }
.horizont p { margin-top: 8px; color: var(--leise); max-width: 22em; }

/* ---------- Preise: Linien statt Karten, Preiszusage hervorgehoben ---------- */
.preisarten { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linie-papier); border-bottom: 1px solid var(--linie-papier); }
.preisart { padding: 40px 36px 44px; }
.preisart:first-child { padding-left: 0; }
.preisart + .preisart { border-left: 1px solid var(--linie-papier); }
.preisart .ico { width: 30px; height: 30px; color: var(--gold-text); }
.preisart h3 { margin-top: 22px; font-size: 24px; letter-spacing: -.025em; color: var(--tinte); }
.preisart p { margin-top: 8px; }
.preiszusage { margin-top: 36px; display: flex; align-items: flex-start; gap: 18px; padding: 26px 30px; border: 1px solid rgba(201,162,78,.55); border-left: 3px solid var(--gold-v); border-radius: 6px; background: #fff; }
.preiszusage .ico { width: 28px; height: 28px; color: var(--gold-text); margin-top: 2px; }
.hell .preiszusage p { color: var(--tinte-leise); font-size: 17px; max-width: 60em; }
.preiszusage b { color: var(--tinte); }

/* ---------- Kontakt: Wege links, Formular auf heller Karte ---------- */
.kontakt { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.kontakt__text h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.04em; font-weight: 700; max-width: 12ch; }
.kontakt__text > p:not(.oben-zeile) { margin-top: 20px; color: var(--leise); max-width: 28em; }
.kontaktwege { list-style: none; padding: 0; margin-top: 40px; border-top: 1px solid rgba(255,255,255,.1); }
.kontaktwege a, .kontaktwege__ohne { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.kontaktwege .ico { width: 22px; height: 22px; color: var(--gold-v); }
.kontaktwege span span, .kontaktwege a > span { display: grid; font-weight: 700; font-size: 17px; overflow-wrap: anywhere; }
.kontaktwege small { font-size: 14px; font-weight: 500; color: var(--leise); }
.kontaktwege a { transition: padding-left .2s; }
.kontaktwege a:hover { padding-left: 6px; }
.formular-karte { background: #fff; color: var(--tinte); border-radius: 8px; padding: clamp(28px, 3.5vw, 48px); border-top: 3px solid var(--gold-v); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.formular-karte h3 { font-size: 26px; letter-spacing: -.03em; }
.formular-karte > p { margin: 6px 0 28px; color: var(--tinte-leise); }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.feld { display: grid; gap: 7px; min-width: 0; align-content: start; }
.feld--breit { grid-column: 1 / -1; }
.feld label { font-weight: 700; font-size: 14px; color: var(--tinte); }
.optional { font-weight: 500; color: var(--tinte-leise); }
.feld input, .feld select, .feld textarea { width: 100%; min-width: 0; min-height: 52px; padding: 13px 16px; font: inherit; font-size: 16px; color: var(--tinte); background: var(--papier); border: 1px solid var(--linie-papier); border-radius: 6px; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.feld select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--tinte) 50%), linear-gradient(135deg, var(--tinte) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.feld textarea { min-height: 110px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; background-color: #fff; border-color: var(--gold-v); box-shadow: 0 0 0 3px rgba(201,162,78,.25); }
.feld [aria-invalid="true"] { border-color: #C0362C; }
.feld__fehler { color: #B3261E; font-size: 14px; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__hinweis { font-size: 14px; line-height: 1.5; color: var(--tinte-leise); }
.formular__hinweis a { text-decoration: underline; text-underline-offset: 2px; padding: 13px 0; }
.formular .knopf { width: 100%; min-height: 58px; }
.formular__meldung:empty { display: none; }
.formular__meldung { padding: 14px 16px; border-radius: 6px; font-weight: 600; font-size: 15px; }
.formular__meldung.ist-ok { background: #E8F5EC; color: #1E6B3A; }
.formular__meldung.ist-fehler { background: #FCEDEB; color: #9E2A20; }

/* ---------- Fuß ---------- */
.fuss { background: #040B1A; color: var(--leise); padding: 80px 0 40px; font-size: 15px; border-top: 1px solid rgba(201,162,78,.25); }
.fuss__oben { display: grid; grid-template-columns: 1.6fr 1.2fr 1fr 1fr; gap: 40px; }
.fuss__marke .logo { margin-bottom: 18px; }
.fuss__marke p { max-width: 24em; }
.fuss h3 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; letter-spacing: 0; }
.fuss ul { list-style: none; padding: 0; display: grid; gap: 0; }
.fuss li { min-height: 44px; display: flex; align-items: center; }
.fuss li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.fuss a:hover { color: var(--text); }
.fuss__unten { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-size: 14px; color: #7F8BA5; }
.fuss__ki { max-width: 640px; }

/* ---------- Schnellkontakt (nur Mobil) ---------- */
.leiste { display: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .nav__links, .nav__tel { display: none; }
  .menue-knopf { display: grid; }
  .menue { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 100px var(--rand) 40px; background: var(--tief); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .menue a { font-size: 30px; font-weight: 700; letter-spacing: -.03em; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .menue .menue__tel { margin-top: 28px; border: 0; font-size: 18px; color: var(--gold-v); }
  .menue-offen .menue { opacity: 1; visibility: visible; }
  .menue-offen { overflow: hidden; }
  .menue-offen .nav { background: var(--tief); }
}
@media (max-width: 960px) {
  .ueber { grid-template-columns: 1fr; }
  .ueber__bild { max-width: 420px; }
  .horizont { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .horizont::before { display: none; }
  .horizont li { padding-left: 0; }
  .reiter { grid-template-columns: minmax(0, 1fr); }
  .reiter__eintrag { display: block; }
  .reiter__inhalt { grid-template-columns: minmax(0, 1fr); margin: 0 0 18px; }
  .reiter__bild { min-height: 0; aspect-ratio: 16 / 10; }
  .reiter__knopf { padding-right: 52px; }
  .reiter__knopf::after { content: ""; position: absolute; right: 14px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid var(--tinte); border-bottom: 2px solid var(--tinte); transform: rotate(45deg); transition: transform .25s; }
  .reiter__knopf[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -2px; }
  .zusagen li { padding: 32px 24px; gap: 16px; }
  .zusagen li:first-child { padding-left: 0; }
  .kopfzeile { flex-direction: column; align-items: start; }
  .preisarten { grid-template-columns: 1fr; }
  .preisart, .preisart:first-child { padding: 30px 0; }
  .preisart + .preisart { border-left: 0; border-top: 1px solid var(--linie-papier); }
  .kontakt { grid-template-columns: 1fr; }
  .fuss__oben { grid-template-columns: 1fr 1fr; }
  .fuss__marke { grid-column: 1 / -1; }
}

/* ---------- Handy ---------- */
@media (max-width: 600px) {
  .vergleich { aspect-ratio: 4 / 3.4; }
  .vergleich__griff svg { width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 13px; }
  .ueber__badge { right: 12px; bottom: 16px; padding: 16px 18px; }
  .ueber__badge b { font-size: 17px; }
  .unterschrift__name { font-size: 46px; }
  .horizont { grid-template-columns: 1fr; row-gap: 0; padding-left: 34px; }
  .horizont::before { display: none; }
  /* Linie als Stücke von Punkt zu Punkt, damit sie genau an der Sonne endet */
  .horizont li:not(:last-child)::after { content: ""; position: absolute; left: -27px; top: 18px; bottom: -2px; width: 1.5px; background: linear-gradient(180deg, rgba(201,162,78,.35), var(--gold-v)); }
  .horizont li { padding: 0 0 34px; }
  .horizont__punkt { position: absolute; left: -34px; top: 2px; margin: 0; }
  .horizont__ziel .horizont__punkt { left: -45px; top: 0; margin: 0; width: 38px; height: 19px; }
  .horizont h3 { margin-top: 4px; }
  .nav .knopf { display: none; }
  .nav__innen { height: 72px; gap: 12px; }
  .logo svg { height: 24px; }
  .logo__name { font-size: 19px; }
  .held__innen { padding: 130px var(--rand) 56px; }
  .held__bild img { object-position: 76% 50%; }
  .held::after { background: linear-gradient(180deg, rgba(6,15,34,.55) 0%, rgba(6,15,34,.15) 25%, rgba(6,15,34,.55) 55%, rgba(6,15,34,.94) 100%); }
  .held__wege .knopf { width: 100%; }
  .held__bild .ki { bottom: auto; top: 84px; right: 14px; }
  .zusagen ul { grid-template-columns: 1fr; }
  .zusagen li + li::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.14), rgba(255,255,255,0)); }
  .reiter__text .knopf { width: 100%; }
  .zusagen li, .zusagen li:first-child { padding: 18px 0; gap: 14px; }
  .zusagen strong { flex: none; width: 82px; font-size: 32px; }
  .zusagen small { font-size: 14px; }
  .ueber__foto { place-content: start center; padding-top: 26%; }
  .fuss__oben { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .fuss__oben > div:nth-child(2) { grid-column: 1 / -1; }
  .fuss__unten { flex-direction: column; }
  .preiszusage { padding: 22px 20px; gap: 14px; }
  .formular { grid-template-columns: minmax(0, 1fr); }
  .formular-karte { padding: 26px 20px; }
  .reiter__text h3 { display: none; }
  .reiter__text .haken { margin-top: 0; }
  .knopfreihe .knopf { width: 100%; }

  /* Schnellkontakt als schwebende Glasleiste im Daumenbereich */
  .leiste { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 6px; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; padding: 6px; border-radius: 12px; background: rgba(8,20,42,.82); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 12px 30px -10px rgba(0,0,0,.6); }
  .leiste a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; border-radius: 8px; font-weight: 700; font-size: 14px; }
  .leiste .ico { width: 17px; height: 17px; }
  .leiste .leiste__gold { background: var(--gold-v); color: var(--auf-gold); }
  /* Erst nach dem Hero einblenden – dort stehen Anrufen und Anfragen schon groß im Bild */
  .js .leiste { transform: translateY(140%); opacity: 0; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s; }
  .js .leiste.ist-sichtbar { transform: none; opacity: 1; }
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* ---------- Unterseiten: Impressum, Datenschutz ---------- */
.unterseite { background: var(--papier); color: var(--tinte); }
.unterseite .nav { background: rgba(8,20,40,.96); }
.nav__zurueck { margin-left: auto; color: var(--text); font-size: 15px; }
.nav__zurueck .ico { transform: rotate(180deg); }
.rahmen--schmal { max-width: calc(760px + 2 * var(--rand)); }
.rechtstext { padding: calc(72px + clamp(56px, 8vw, 110px)) 0 clamp(72px, 10vw, 130px); }
.rechtstext h1 { font-size: clamp(36px, 6vw, 60px); line-height: 1.04; letter-spacing: -.04em; font-weight: 700; hyphens: manual; }
.rechtstext h2 { margin-top: 44px; font-size: 20px; letter-spacing: -.02em; font-weight: 700; }
.rechtstext p, .rechtstext li { margin-top: 12px; color: var(--tinte-leise); line-height: 1.7; }
.rechtstext a { color: var(--tinte); text-decoration: underline; text-decoration-color: var(--gold-v); text-underline-offset: 3px; overflow-wrap: anywhere; }
.rechtstext .haken { margin: 16px 0 0; }
.rechtstext__stand { margin-top: 20px; font-size: 15px; }
@media (max-width: 600px) { .nav__zurueck span { display: none; } .nav__zurueck { min-width: 44px; justify-content: center; } }
.rechtstext .oben-zeile { color: var(--gold-text); }
@media (max-width: 600px) { body.unterseite { padding-bottom: 0; } }

/* ===== Konzept „Hanse-Handwerk“ (19.10.2026) – überschreibt die Grundwerte oben =====
   1. Schmale, kräftige Überschriften (Archivo, Breite 75 %) wie eine Fahrzeugbeschriftung
   2. Messing statt Schmuck-Gold
   3. Arbeitskarten, Rostock-Siegel, Warnow-Karte */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2-variations"), url("../fonts/archivo.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
}

:root {
  --gold-v: #C7913A;      /* Messing: wärmer und erdiger als das bisherige #C9A24E */
  --gold-hell: #E4BC74;
  --gold-text: #8A5E1A;
  --gold-1: #E9C886;
  --gold-2: #C7913A;
  --gold-3: #9C6E26;
  --auf-gold: #1B1206;
  --kopf: "Archivo", "Manrope", system-ui, sans-serif;
}

/* ---------- Überschriften: schmal und kräftig ---------- */
.held h1, .kopfzeile h2, .titel, .einsatz h2, .reiter__text h3, .zusagen strong, .logo__name,
.ueber__text h2, .kontakt__text h2, .formular-karte h3, .horizont h3, .preisart h3, .horizont__nr, .ueber__badge b, .rechtstext h1 {
  font-family: var(--kopf);
  font-stretch: 75%;
  letter-spacing: -.01em;
}
.held h1 { font-weight: 800; font-size: clamp(46px, 7.6vw, 112px); line-height: .94; max-width: 16ch; }
.kopfzeile h2, .einsatz h2 { font-weight: 800; font-size: clamp(40px, 5.6vw, 76px); line-height: .96; max-width: 18ch; }
.zusagen strong { font-weight: 700; font-size: clamp(44px, 4.4vw, 62px); }
.logo__name { font-weight: 800; font-size: 23px; letter-spacing: 0; }

/* ---------- Hero bei Tageslicht ---------- */
.held--tag::after { background:
  linear-gradient(90deg, rgba(6,15,34,.88) 0%, rgba(6,15,34,.62) 32%, rgba(6,15,34,.1) 60%, rgba(6,15,34,0) 100%),
  linear-gradient(180deg, rgba(6,15,34,.55) 0%, rgba(6,15,34,0) 22%, rgba(6,15,34,0) 62%, rgba(6,15,34,.7) 100%); }
.held--tag .held__bild img { object-position: 60% 50%; animation: none; transform: none; }
.held__ort { font-family: var(--kopf); font-stretch: 85%; font-weight: 700; font-size: 16px; letter-spacing: .02em; }

/* Rostock-Siegel: Herkunft als Stempel, nicht als Satz */
.siegel-rund { position: absolute; z-index: 2; right: max(var(--rand), calc((100vw - var(--breite)) / 2)); bottom: 132px; width: 148px; height: 148px; color: var(--gold-hell); transform: rotate(-12deg); opacity: .92; }
.siegel-rund text { font-family: var(--kopf); font-stretch: 80%; font-weight: 700; font-size: 13.6px; letter-spacing: .14em; fill: currentColor; }

/* ---------- Leistungen als Arbeitskarten ---------- */
.reiter--karten .reiter__knopf .ico { width: 30px; height: 30px; stroke-width: 1.5; }
.reiter--karten .reiter__knopf b { font-family: var(--kopf); font-stretch: 80%; font-size: 22px; letter-spacing: 0; }
.reiter--karten .reiter__inhalt { border-radius: 4px; box-shadow: 0 1px 0 var(--linie-papier), 0 26px 50px -34px rgba(11,26,53,.45); }
.reiter--karten .reiter__text { position: relative; padding-top: 30px; }
/* Kartenkopf wie ein Auftragszettel: Lochung + gestrichelte Abrisskante */
.reiter--karten .reiter__text::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: radial-gradient(circle at 10px 0, var(--papier) 5px, transparent 5.5px) 0 0 / 20px 8px repeat-x; }
.reiter--karten .reiter__text h3 { font-weight: 800; font-size: 32px; line-height: 1; padding-bottom: 18px; border-bottom: 1.5px dashed var(--linie-papier); }
.checkliste { list-style: none; padding: 0; margin: 22px 0 30px; display: grid; gap: 14px; }
.checkliste li { position: relative; padding-left: 36px; color: var(--tinte); line-height: 1.4; font-weight: 500; }
.checkliste li::before { content: ""; position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border: 1.5px solid var(--gold-v); border-radius: 3px; }
.checkliste li::after { content: ""; position: absolute; left: 6px; top: 4px; width: 9px; height: 5px; border-left: 2px solid var(--gold-text); border-bottom: 2px solid var(--gold-text); transform: rotate(-45deg); }

/* ---------- Einsatzgebiet: die Warnow als roter Faden ---------- */
.einsatz__raster { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.einsatz__text > p:not(.oben-zeile) { margin-top: 20px; color: var(--leise); font-size: 18px; max-width: 26em; }
.einsatz__text .knopf { margin-top: 32px; }
.karte { margin: 0; }
.karte svg { display: block; width: 100%; height: auto; -webkit-mask-image: radial-gradient(ellipse 72% 78% at 52% 52%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 78% at 52% 52%, #000 62%, transparent 100%); }
.karte__see { fill: #10264A; }
.karte__see-name { fill: #6F86AC; font: italic 600 14px var(--kopf); letter-spacing: .2em; }
.karte__umkreis { fill: none; stroke: rgba(199,145,58,.45); stroke-width: 1.2; stroke-dasharray: 4 7; }
.karte__warnow { fill: none; stroke: var(--gold-v); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(199,145,58,.35)); }
.karte__fluss { fill: var(--gold-hell); font: italic 600 14px var(--kopf); letter-spacing: .14em; }
.ort circle { fill: var(--tief); stroke: #fff; stroke-width: 1.6; }
.ort text { fill: #DCE3EF; font: 600 14.5px "Manrope", sans-serif; }
.ort--gross circle { fill: var(--gold-v); stroke: none; }
.ort--gross text { fill: #fff; font-weight: 800; font-size: 16px; }
.ort--umland circle { stroke: #7F8BA5; stroke-dasharray: 2 2; }
.ort--umland text { fill: #9AA6BE; }
.karte figcaption { margin-top: 10px; font-size: 14px; color: #7F8BA5; text-align: right; }

/* Die Warnow zeichnet sich einmal ein, wenn die Karte ins Bild kommt – die einzige Bewegung der Seite */
.js .karte__warnow { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s cubic-bezier(.4,0,.2,1); }
.js .karte.ist-sichtbar .karte__warnow { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .js .karte__warnow { stroke-dashoffset: 0; transition: none; } }


@media (max-width: 960px) {
  .einsatz__raster { grid-template-columns: minmax(0, 1fr); }
  .siegel-rund { width: 116px; height: 116px; bottom: auto; top: 96px; }
}
@media (max-width: 600px) {
  .held h1 { font-size: clamp(42px, 12.5vw, 56px); }
  .siegel-rund { width: 92px; height: 92px; top: 84px; right: 14px; }
  .held--tag .ki { top: auto; bottom: 14px; }
  .held--tag::after { background: linear-gradient(180deg, rgba(6,15,34,.45) 0%, rgba(6,15,34,.1) 22%, rgba(6,15,34,.5) 50%, rgba(6,15,34,.95) 100%); }
  .reiter--karten .reiter__text h3 { display: block; font-size: 26px; }
  .ort text { font-size: 23px; }
  .ort--gross text { font-size: 25px; }
  .ort--neben text { display: none; }
  .karte__see-name, .karte__fluss { font-size: 22px; }
  .einsatz__text .knopf { width: 100%; }
  .siegel-rund { top: 104px; bottom: auto; right: 16px; width: 84px; height: 84px; }
  .karte__fluss { display: none; }
  .held--tag .ki { right: auto; left: 14px; }
}

/* ---------- Vorher-Nachher als Auftragsbeleg ---------- */
.beleg { margin-top: 0; padding: 22px 26px 20px; background: #0E1F3D; border: 1px solid rgba(199,145,58,.28); border-top: 1.5px dashed rgba(199,145,58,.6); border-radius: 0 0 6px 6px; }
.vn .vergleich { border-radius: 6px 6px 0 0; }
.beleg__titel { display: block; font-family: var(--kopf); font-stretch: 80%; font-weight: 800; font-size: 20px; color: var(--gold-hell); }
.beleg dl { margin: 14px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 24px; }
.beleg dt { font-size: 14px; color: var(--leise); }
.beleg dd { margin: 2px 0 0; font-weight: 700; font-size: 15px; color: var(--text); }
.beleg__hinweis { display: block; margin-top: 16px; font-size: 14px; color: var(--leise); }

/* ---------- Einsatzgebiet: Privat und Gewerbe als zwei Zeilen unter der Karte ---------- */
.fuerwen-zeilen { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.1); }
.fuerwen-zeile { display: flex; align-items: center; gap: 18px; min-height: 44px; padding: 26px 24px 26px 0; border-bottom: 1px solid rgba(255,255,255,.1); transition: background-color .2s; }
.fuerwen-zeile + .fuerwen-zeile { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.1); }
.fuerwen-zeile > .ico { width: 28px; height: 28px; color: var(--gold-v); }
.fuerwen-zeile span { display: grid; gap: 4px; flex: 1; }
.fuerwen-zeile b { font-family: var(--kopf); font-stretch: 80%; font-weight: 800; font-size: 22px; }
.fuerwen-zeile small { font-size: 15px; color: var(--leise); }
.fuerwen-zeile__pfeil { width: 20px; height: 20px; color: var(--gold-v); transition: transform .25s; }
.fuerwen-zeile:hover .fuerwen-zeile__pfeil { transform: translateX(4px); }

/* ---------- Ablauf an der Warnow: die Linie schlängelt sich durch die vier Schritte ---------- */
.horizont--warnow::before { display: none; }
.horizont__welle { position: absolute; left: 0; right: 0; top: 4px; width: 100%; height: 60px; overflow: visible; }
.horizont__welle path { fill: none; stroke: var(--gold-v); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.ablauf-sektion .horizont__punkt { background: var(--papier); border-width: 2px; }
.ablauf-sektion .horizont h3 { color: var(--tinte); }
.ablauf-sektion .horizont p { color: var(--tinte-leise); }
.ablauf-sektion .horizont__nr { color: var(--gold-text); font-weight: 800; font-size: 17px; }
.preise-sektion { padding-top: 0; }
.preise-sektion > .rahmen { border-top: 1px solid var(--linie-papier); padding-top: var(--abstand); }

/* ---------- Kontakt: Fotos per WhatsApp als stärkster Weg ---------- */
.kontaktwege__haupt a { margin: 0 0 6px; padding: 18px 20px; border: 1px solid var(--gold-v); border-radius: 6px; background: rgba(199,145,58,.1); }
.kontaktwege__haupt a:hover { padding-left: 26px; }
.kontaktwege__haupt small { color: var(--gold-hell); }

@media (max-width: 960px) {
  .beleg dl { grid-template-columns: 1fr 1fr; }
  .fuerwen-zeilen { grid-template-columns: 1fr; }
  .fuerwen-zeile + .fuerwen-zeile { padding-left: 0; border-left: 0; }
  .horizont__welle { display: none; }
}
@media (max-width: 600px) {
  .beleg { padding: 18px 18px 16px; }
  .fuerwen-zeile { padding: 22px 0; }
  .fuerwen-zeile b { font-size: 20px; }
  .ablauf-sektion .horizont li:not(:last-child)::after { background: var(--gold-v); width: 2px; }
}

/* Nachbesserung nach Sichtprüfung: Punkte sitzen mittig auf der Warnow-Linie, Sonne in Messing auf hellem Grund */
.horizont--warnow .horizont__punkt { margin-left: -8px; }
.horizont--warnow .horizont__ziel .horizont__punkt { margin-left: -22px; }
.ablauf-sektion .horizont__ziel .horizont__punkt { background: radial-gradient(circle at 50% 100%, #E4BC74 0%, #C7913A 55%, #9C6E26 100%); box-shadow: 0 -4px 18px rgba(199,145,58,.35); }
.kontakt__text h2 { max-width: 16ch; }
.fuerwen-zeile b { line-height: 1.12; }
@media (max-width: 960px) { .horizont--warnow .horizont__punkt, .horizont--warnow .horizont__ziel .horizont__punkt { margin-left: 0; } }
@media (max-width: 600px) { .horizont--warnow .horizont__ziel .horizont__punkt { margin-left: 0; } }
/* Sichtprüfung 320 px: Siegel darf Ortszeile und Überschrift nicht berühren, Text über dem Backstein braucht mehr Abdunklung */
@media (max-width: 600px) {
  .held--tag::after { background: linear-gradient(180deg, rgba(6,15,34,.5) 0%, rgba(6,15,34,.2) 18%, rgba(6,15,34,.62) 40%, rgba(6,15,34,.95) 100%); }
  .reiter--karten .reiter__knopf b { font-size: 20px; line-height: 1.15; }
}
@media (max-width: 400px) {
  .siegel-rund { top: 82px; width: 70px; height: 70px; right: 12px; }
}
.held--tag .held__ort { width: fit-content; }
@media (max-width: 340px) { .siegel-rund { top: auto; bottom: 18px; right: 12px; width: 64px; height: 64px; } .held--tag .ki { bottom: auto; top: 82px; } }
/* Mobil-Check 26.10.: Zahlen im Zusagen-Band ragten in den Text (die 44-px-Regel oben überschrieb die Handygröße) */
@media (max-width: 600px) { .zusagen strong { width: 96px; font-size: 40px; } }
/* Telefon und Mail auf den Rechtsseiten: 44 px Tippfläche, je Zeile eine */
.rechtstext a[href^="tel:"], .rechtstext a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
/* Karte auf Handys randlos: der Rand blendet ohnehin aus, die Ortsnamen werden dadurch rund 13 % größer.
   Größere Schrift allein ließ Brinckmansdorf mit Stadtmitte und Südstadt kollidieren. */
@media (max-width: 600px) {
  .karte { margin-inline: calc(-1 * var(--rand)); }
  .karte figcaption { padding-inline: var(--rand); }
  .ort--umland text { transform: translateX(16px); }
}
/* Tablet (601–960 px): Zusagen mit Zahl über dem Text statt daneben – drei Spalten quetschten den Text auf 5 Zeilen;
   Fuß in drei Spalten, damit „Rechtliches“ nicht allein in eine neue Zeile rutscht */
@media (min-width: 601px) and (max-width: 960px) {
  .zusagen li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 30px 22px; }
  .zusagen strong { font-size: 44px; }
  .fuss__oben { grid-template-columns: max-content 1fr 1fr; }
}
/* Mailadresse nie mitten im Namen umbrechen */
.fuss a[href^="mailto:"] { overflow-wrap: normal; white-space: nowrap; }

/* Logo auf sehr schmalen Handys: Zeichen kleiner, damit der Name in einer Zeile bleibt (02.11.2026) */
@media (max-width: 360px) {
  .logo { gap: 8px; }
  .logo svg { height: 19px; }
}

/* 11.11.2026 – echte Fotos von Levin + Karte Mecklenburg-Vorpommern */
.ueber__foto--echt { display: block; padding: 0; overflow: hidden; background: #0B1A35; }
.ueber__foto--echt img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.unterschrift__bild { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; align-self: center; box-shadow: 0 0 0 2px var(--gold-v); }
.karte--mv svg { -webkit-mask-image: none; mask-image: none; }
.karte__land { fill: #13294E; stroke: rgba(199,145,58,.6); stroke-width: 1.4; stroke-linejoin: round; }
.karte__wege path { fill: none; stroke: var(--gold-v); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .75; }
.js .karte__wege path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1); }
.js .karte.ist-sichtbar .karte__wege path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .js .karte__wege path { stroke-dashoffset: 0; transition: none; } }
@media (max-width: 600px) {
  .karte--mv .ort--waren, .karte--mv .weg--waren { display: none; }
  .unterschrift { gap: 10px 16px; align-items: center; }
  .unterschrift__bild { width: 56px; height: 56px; }
}