/* =====================================================================
   Der Putzteufel · Glas- & Gebäudereinigung, Wittmund
   Gestaltung „Präzision“: ruhig, engineered, vertrauenswürdig.
   Eine Schriftfamilie (Archivo, Breitenachse), kühle Neutraltöne,
   ein einziger Akzent (Klinkerrot), rechtwinklige Formen, wenig Bewegung.
   ===================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-italic-latin.woff2') format('woff2');
}

:root {
  --ink: #0e161d;
  --ink-2: #16222b;
  --ink-3: #2b3944;
  --text: #1a242c;
  --muted: #5e6a74;
  --bg: #ffffff;
  --bg-2: #f3f5f7;
  --bg-3: #e6ebef;
  --line: rgba(14, 22, 29, .13);
  --line-strong: rgba(14, 22, 29, .28);
  --line-hell: rgba(255, 255, 255, .16);
  --steel: #3d5d72;
  --steel-hell: #9db4c2;
  --rot: #b2382b;
  --rot-dunkel: #8e2b21;
  --rot-hell: #d4574a;

  --font: 'Archivo', 'Segoe UI', Arial, sans-serif;
  --w: min(100% - 2.5rem, 78rem);
  --w-narrow: min(100% - 2.5rem, 48rem);
  --sect: clamp(4rem, 9vw, 8rem);
  --radius: 2px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
@media (min-width: 48em) { :root { --w: min(100% - 5rem, 78rem); --w-narrow: min(100% - 5rem, 48rem); } }

/* Eigenständige Leistungsseiten: vorhandene Schrift, Farben und echte Arbeitsbilder. */
.seo-hero { padding-top: 8.5rem; padding-bottom: 3rem; display: grid; gap: 2rem; align-items: center; }
.seo-hero .crumbs, .seo-region-hero .crumbs { color: var(--muted); flex-wrap: wrap; }
.seo-hero-copy > .t-lead { margin-top: 1.5rem; }
.seo-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1.6rem; }
.seo-actions .btn { line-height: 1.35; text-align: left; }
.seo-actions .btn-ghost { background: #fff; }
.seo-hero-photo { margin: 0; min-width: 0; }
.seo-hero-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.seo-hero-photo figcaption { padding-top: .6rem; font-size: .8rem; color: var(--muted); }
/* Regler im Kopf der Leistungsseite. Hochformat bleibt schmaler, damit der Vergleich auf dem
   Desktop nicht höher als der Bildschirm wird. */
.seo-hero-vergleich { min-width: 0; }
.seo-hero-vergleich.hoch { max-width: 26rem; justify-self: center; width: 100%; }
.seo-hero-vergleich .vergleich-cap { font-size: .82rem; }
@media (max-width: 47.99em) { .seo-hero-vergleich.hoch { max-width: 22rem; } }
.seo-vergleich { padding-bottom: 3rem; }
.seo-vergleich h2 { margin-bottom: 1rem; }
/* Die unteren Abschnitte der Leistungsseite sind kurz und brauchen nicht den großen Abstand
   der Startseite. */
.sect.seo-weitere, .sect.seo-weiter { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.seo-weitere h2, .seo-weiter h2 { margin-bottom: .25rem; }
.seo-weitere .seo-gallery.galerie { margin-block: 1.25rem 0; }
.seo-weiter .seo-related-list { margin-block: 1rem 1.5rem; }
.seo-weiter .t-small { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; }
.seo-weiter .t-small a { padding-block: .3rem; }
.vergleich-mehr { margin-top: 1.5rem; }
.seo-body { display: grid; gap: 2.5rem; padding-bottom: 4rem; align-items: start; }
.seo-article { min-width: 0; }
.seo-article section { padding-block: 1.8rem; border-top: 1px solid var(--line); }
.seo-article h2 { margin-bottom: 1rem; }
.seo-article a > svg { display: inline-block; width: 1em; height: 1em; vertical-align: middle; }
.seo-request { background: var(--bg-2); padding: clamp(1.25rem, 3vw, 2rem); border-top: 3px solid var(--rot); }
.seo-request ul { padding-left: 1.15rem; }
.seo-request li { padding-bottom: .6rem; }
.seo-request .btn { width: 100%; white-space: normal; line-height: 1.4; }
.seo-request .t-small { margin-top: 1.2rem; }
.seo-faq { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.seo-faq details { border-bottom: 1px solid var(--line); }
.seo-faq summary { cursor: pointer; padding: 1.1rem .25rem; font-weight: 600; }
.seo-faq details p { padding: 0 .25rem 1.2rem; margin: 0; }
.seo-gallery.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block: 2rem 1rem; }
@media (min-width: 60em) { .seo-gallery.galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Spaltenzahl nach Bildanzahl: ein einzelnes Bild steht groß, zwei oder drei füllen die Zeile. */
.seo-gallery.galerie[data-anzahl="1"] { grid-template-columns: minmax(0, 30rem); }
@media (min-width: 60em) {
  .seo-gallery.galerie[data-anzahl="2"] { grid-template-columns: repeat(2, minmax(0, 23rem)); }
  .seo-gallery.galerie[data-anzahl="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.seo-weitere .vergleich-solo { margin-block: 1.25rem 2rem; }
.seo-gallery.galerie figure { margin: 0; min-width: 0; }
.seo-gallery.galerie figcaption { padding-top: .55rem; font-size: .82rem; line-height: 1.45; color: var(--muted); }
.seo-gallery.galerie a, .seo-gallery.galerie a:first-child { display: block; overflow: hidden; grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
.seo-gallery.galerie img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.seo-related-list { display: grid; gap: 0 2rem; margin-block: 2rem; }
.seo-related { border-bottom: 1px solid var(--line-strong); padding: 1.2rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-decoration: none; font-weight: 600; }
.seo-related:hover { color: var(--rot); }
.seo-related svg, .seo-town-list svg { width: 1.15rem; height: 1.15rem; flex: none; }
.seo-region-hero { padding-top: 8.5rem; padding-bottom: 3rem; }
.seo-region-hero .t-h1 { max-width: 20ch; margin-bottom: 1.5rem; }
.seo-region-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding-top: 1rem; }
.seo-region-nav a { padding-block: .6rem; }
.seo-regions > section { display: grid; gap: 1.5rem; padding-block: 3rem; border-top: 1px solid var(--line); }
.seo-regions h2 { margin-bottom: 1rem; }
.seo-town-list { list-style: none; padding: 0; margin: 0; }
.seo-town-list li { display: flex; gap: 1rem; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-block: .25rem; }
.seo-town-list li > span { min-width: 0; overflow-wrap: anywhere; }
.seo-town-list a { display: inline-flex; gap: .5rem; align-items: center; padding-block: .7rem; font-size: .9rem; }
@media (min-width: 48em) { .seo-related-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .seo-regions > section { grid-template-columns: 1fr 1fr; gap: 4rem; } }
@media (min-width: 64em) { .seo-hero { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; padding-bottom: 4rem; } .seo-body { grid-template-columns: 1.4fr 1fr; gap: 5rem; } .seo-request { position: sticky; top: 7rem; } }
@media (max-width: 47.99em) { .seo-hero, .seo-region-hero { padding-top: 6.8rem; } .seo-hero-photo img { aspect-ratio: 4 / 3; } .seo-hero .t-h1 { font-size: clamp(2rem, 8.5vw, 3rem); } }

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font); font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--rot); }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font); font-stretch: 90%; font-weight: 600; line-height: 1.05; letter-spacing: -.012em; margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
/* Sprungmarken landen unterhalb der festen Kopfzeile */
[id] { scroll-margin-top: 5.5rem; }
p { margin: 0 0 1em; max-width: 60ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
::selection { background: var(--ink); color: #fff; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: var(--radius); }
.skip:focus { top: 1rem; }
.wrap { width: var(--w); margin-inline: auto; }
.wrap-narrow { width: var(--w-narrow); margin-inline: auto; }

/* Typo-Skala */
.t-h1 { font-stretch: 88%; font-weight: 600; font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.2rem); line-height: 1.02; letter-spacing: -.015em; }
.t-h2 { font-stretch: 88%; font-weight: 600; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); line-height: 1.06; letter-spacing: -.012em; }
.t-h3 { font-stretch: 92%; font-weight: 600; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); line-height: 1.15; }
.t-lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem); line-height: 1.55; color: var(--ink-3); }
.t-kicker { display: block; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--muted); margin-bottom: .9rem; }
.t-kicker::before { content: ''; display: inline-block; width: .45rem; height: .45rem; background: var(--rot); margin-right: .65rem; vertical-align: .05em; }
.t-small { font-size: .875rem; color: var(--muted); }
.rot { color: var(--rot); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .9rem 1.4rem; border-radius: var(--radius); border: 1px solid transparent; font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer; line-height: 1; transition: background .2s, color .2s, border-color .2s; }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn-rot { background: var(--rot); color: #fff; }
.btn-rot:hover { background: var(--rot-dunkel); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--ink-3); }
.btn-ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-hell { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn-hell:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.btn-lg { padding: 1.05rem 1.7rem; font-size: 1rem; }
.link { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .15rem; }
.link svg { width: 1em; height: 1em; transition: transform .3s var(--ease); }
.link:hover svg { transform: translateX(3px); }

/* ---------- Header ---------- */
.header { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .3s, box-shadow .3s, transform .35s var(--ease); }
.header-in { width: var(--w); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4.5rem; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 2.4rem; width: auto; }
.brand .logo-hell { display: block; }
.brand .logo-dunkel { display: none; }
.nav { display: none; align-items: center; gap: 1.8rem; }
.nav a { color: #fff; text-decoration: none; font-weight: 500; font-size: .92rem; padding: .4rem 0; border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav a:hover, .nav a[aria-current="page"] { border-color: currentColor; }
.header-cta { display: none; align-items: center; gap: 1.2rem; }
.header-tel { color: #fff; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; min-height: 1.75rem; font-size: .92rem; font-variant-numeric: tabular-nums; }
.header-tel svg { width: 1em; height: 1em; }
.header .btn { padding: .75rem 1.1rem; font-size: .9rem; }
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 2.75rem; height: 2.75rem; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, .4); background: transparent; cursor: pointer; padding: 0; align-items: center; }
.burger span { display: block; width: 1.15rem; height: 1.5px; background: #fff; }
.header.solid, .header.hell { background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.header.solid .nav a, .header.hell .nav a, .header.solid .header-tel, .header.hell .header-tel { color: var(--text); }
.header.solid .brand .logo-hell, .header.hell .brand .logo-hell { display: none; }
.header.solid .brand .logo-dunkel, .header.hell .brand .logo-dunkel { display: block; }
.header.solid .burger, .header.hell .burger { border-color: var(--line-strong); }
.header.solid .burger span, .header.hell .burger span { background: var(--ink); }
.header.hidden { transform: translateY(-100%); }
@media (min-width: 64em) { .nav, .header-cta { display: flex; } .burger { display: none; } .brand img { height: 2.8rem; } }
@media (min-width: 80em) { .brand img { height: 3.1rem; } }

/* Mobiles Menü */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--ink); color: #fff; display: grid; grid-template-rows: auto 1fr auto; padding: 1rem 1.25rem; transform: translateY(-100%); transition: transform .45s var(--ease); visibility: hidden; }
.menu.open { transform: none; visibility: visible; }
.menu-top { display: flex; justify-content: space-between; align-items: center; height: 2.5rem; }
.menu-top img { height: 2.4rem; width: auto; }
.menu-close { width: 2.75rem; height: 2.75rem; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; }
.menu-close svg { width: 1.1rem; height: 1.1rem; }
.menu-links { list-style: none; margin: 0; padding: 2.5rem 0 0; display: flex; flex-direction: column; }
.menu-links a { font-stretch: 88%; font-weight: 600; font-size: clamp(1.7rem, 7vw, 2.4rem); text-decoration: none; display: flex; align-items: baseline; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line-hell); opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.menu-links a small { font-size: .78rem; letter-spacing: .12em; color: var(--steel-hell); font-weight: 600; font-stretch: 100%; min-width: 1.7rem; }
.menu.open .menu-links a { opacity: 1; transform: none; }
.menu.open .menu-links li:nth-child(2) a { transition-delay: .04s; } .menu.open .menu-links li:nth-child(3) a { transition-delay: .08s; } .menu.open .menu-links li:nth-child(4) a { transition-delay: .12s; } .menu.open .menu-links li:nth-child(5) a { transition-delay: .16s; }
.menu-foot { display: grid; gap: .6rem; padding-bottom: .5rem; }
.menu-foot p { color: rgba(255, 255, 255, .6); font-size: .85rem; text-align: center; }

/* ---------- HERO „Die Scheibe“ ---------- */
/* Grundsatz: Ohne JavaScript ist die erste Szene sauber und vollständig sichtbar; Text und Schaltflächen
   stehen sofort. Erst html.js schaltet Reel und Wischer frei, erst .hero.animiert startet die Bewegung.
   Der Wischer arbeitet ausschließlich mit Transformationen (keine clip-path-Animation, kein Live-Blur),
   weil Safari auf dem iPad sonst Ebenen stehen lässt und der Schleier sichtbar hängen bleibt. */
.hero { position: relative; min-height: 100svh; background: var(--ink); color: #fff; overflow: hidden; contain: paint; isolation: isolate; }
.hero-stage { position: absolute; inset: 0; overflow: hidden; }
.scene { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease); }
.scene:first-child { opacity: 1; }
.js .scene { opacity: 0; }
.scene.active, .js .scene.active { opacity: 1; }
.scene picture { display: contents; }
.scene img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos-m, var(--pos, 50% 50%)); }
@media (min-width: 48em) { .scene img { object-position: var(--pos, 50% 50%); } }
.br-d { display: none; }
@media (min-width: 48em) { .br-d { display: inline; } }

/* Verschmutzte Ebene: vorgerendertes, kleines Bild plus feine Schlieren. Nur sichtbar, solange gewischt wird. */
.scene-schmutz { position: absolute; inset: 0; display: none; }
.hero.animiert .scene-schmutz { display: block; }
.scene-schmutz::after {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(94deg, rgba(255, 255, 255, 0) 0 9px, rgba(255, 255, 255, .06) 9px 10px, rgba(255, 255, 255, 0) 10px 23px, rgba(0, 0, 0, .08) 23px 25px),
    radial-gradient(ellipse 60% 40% at 30% 20%, rgba(255, 255, 255, .12), transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(0, 0, 0, .3), transparent 70%);
  opacity: .9;
}
/* Klare Ebene: seitlich verbreitert, damit die schräge Kante nie eine Lücke zeigt.
   Außenrahmen wird verschoben (Maske), Innenrahmen gleicht die Verschiebung wieder aus. */
.scene-klar { position: absolute; top: 0; bottom: 0; left: -12%; right: -12%; overflow: hidden; }
.scene-klar-inner { position: absolute; top: 0; bottom: 0; left: 9.6774%; right: 9.6774%; }
.hero.reduced .scene-schmutz { display: none; }
@media (min-width: 64em) and (hover: hover) {
  .hero.animiert .scene.active .scene-klar-inner img { animation: kenburns 14s linear both; }
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.05) translate3d(-.6%, .3%, 0); } }
@media (prefers-reduced-motion: reduce) {
  .scene-schmutz, .blade { display: none !important; }
  .scene-klar, .scene-klar-inner { transform: none !important; }
  .scene.active .scene-klar-inner img { animation: none !important; }
}

/* Abzieher: schmal, präzise, ohne Glüheffekt */
.blade { position: absolute; top: -6%; bottom: -6%; left: 0; width: 0; pointer-events: none; z-index: 3; transform: translate3d(0, 0, 0) rotate(2.05deg); transform-origin: 50% 0; }
.blade-water { position: absolute; top: 0; bottom: 0; left: 2px; width: 70px; background: linear-gradient(to right, rgba(255, 255, 255, .45), rgba(255, 255, 255, .14) 40%, rgba(255, 255, 255, 0)); filter: blur(4px); mix-blend-mode: screen; }
.blade-edge { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 1) 90%, transparent); box-shadow: 0 0 16px 3px rgba(255, 255, 255, .32); }
.blade-lip { position: absolute; top: 0; bottom: 0; left: -8px; width: 7px; background: linear-gradient(to right, rgba(30, 6, 4, .95), var(--rot-dunkel) 50%, var(--rot)); box-shadow: -6px 0 14px rgba(0, 0, 0, .3); }
.blade-drips { position: absolute; left: -10px; top: 0; bottom: 0; width: 16px; }
.blade-drips i { position: absolute; left: 6px; width: 3px; height: 40px; border-radius: 3px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55)); animation: drip 2.6s ease-in infinite; opacity: 0; }
.blade-drips i:nth-child(1) { top: 24%; animation-delay: .2s; } .blade-drips i:nth-child(2) { top: 58%; animation-delay: 1.3s; } .blade-drips i:nth-child(3) { display: none; }
@keyframes drip { 0% { transform: translateY(0) scaleY(.4); opacity: 0; } 20% { opacity: .8; } 100% { transform: translateY(160px) scaleY(1.4); opacity: 0; } }
.hero:not(.wiping) .blade { opacity: 0; transition: opacity .5s; }
.hero.wiping .blade { opacity: 1; }
.hero.reduced .blade, .hero:not(.animiert) .blade { display: none; }

/* Overlay: unten und links kontrolliert abgedunkelt, damit das Bild oben rechts lebendig bleibt */
.hero-shade { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(to top, rgba(14, 22, 29, .92) 0%, rgba(14, 22, 29, .55) 30%, rgba(14, 22, 29, .1) 58%, rgba(14, 22, 29, 0) 72%), linear-gradient(to right, rgba(14, 22, 29, .55), rgba(14, 22, 29, .1) 48%, rgba(14, 22, 29, 0) 64%), linear-gradient(to bottom, rgba(14, 22, 29, .55), rgba(14, 22, 29, 0) 18%); }
.hero-in { position: relative; z-index: 5; width: var(--w); margin-inline: auto; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding-top: 5.5rem; padding-bottom: 1.2rem; }
.hero-slate { display: flex; gap: 1rem; align-items: center; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .72); font-weight: 600; }
.hero-slate .dot, .hero-slate .slate-sep { display: none; }
.hero-slate .slate-2 { display: none; }
@media (min-width: 48em) { .hero-slate .slate-2 { display: inline; } .hero-slate .slate-2::before { content: '·'; margin-right: 1rem; opacity: .6; } }
/* Komposition: Aussage links unten, rechte Bildhälfte bleibt frei für das Motiv; Vertrauensleiste als Fußzeile */
.hero-body { align-self: end; display: grid; padding-block: 2.4rem 1.6rem; }
.hero-copy { max-width: 54rem; min-width: 0; }
@media (max-width: 39.99em) { .hero-actions .btn { width: 100%; padding-inline: 1.1rem; } }
.hero-title { font-stretch: 86%; font-weight: 600; font-size: clamp(2.6rem, 1rem + 6vw, 6.6rem); line-height: .96; letter-spacing: -.02em; margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
.hero-title .line { display: block; }
.hero-title .line.wir { color: rgba(255, 255, 255, .74); }
.hero-sub { margin-top: 1.3rem; max-width: 34rem; font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); line-height: 1.5; color: rgba(255, 255, 255, .88); text-wrap: pretty; }
.hero-actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.hero-actions .link { color: #fff; border-color: rgba(255, 255, 255, .55); }
/* Vertrauensleiste: Fakten von der bisherigen Website, ruhiges Linienraster in der Fußzeile des Heros */
.hero-trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-width: 0; }
.hero-trust li { padding: .15rem 1rem .1rem 0; font-size: .95rem; line-height: 1.35; color: #fff; min-width: 0; border-right: 1px solid rgba(255, 255, 255, .18); }
.hero-trust li + li { padding-left: 1rem; }
.hero-trust li:last-child, .hero-trust li:nth-child(2) { border-right: 0; }
.hero-trust b { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .62); font-weight: 600; margin-bottom: .15rem; }
.hero-trust li.nur-breit { display: none; }
@media (min-width: 48em) { .hero-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hero-trust li.nur-breit { display: block; } .hero-trust li:nth-child(2) { border-right: 1px solid rgba(255, 255, 255, .18); } .hero-trust li:last-child { border-right: 0; } }
/* Einblendungen nur mit JavaScript, Inhalte stehen ohne Skript sofort */
.js .hero-title .line, .js .hero-sub, .js .hero-actions, .js .hero-foot, .js .hero-slate { animation: hero-rise .9s var(--ease) both; }
.js .hero-foot { animation-delay: .5s; }
.js .hero-title .line:nth-child(2) { animation-delay: .1s; }
.js .hero-sub { animation-delay: .25s; }
.js .hero-actions { animation-delay: .38s; }
.js .hero-trust { animation-delay: .5s; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-foot { display: grid; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .22); }
.hero-reel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hero-caption { font-size: .85rem; color: rgba(255, 255, 255, .72); display: none; gap: .8rem; align-items: baseline; min-width: 0; }
.hero-caption b { color: #fff; font-weight: 600; }
@media (min-width: 48em) { .hero-caption { display: flex; } }
@media (min-width: 64em) { .hero-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2.5rem; } .hero-reel { flex-direction: column; align-items: flex-end; gap: .5rem; } .hero-caption { display: none; } }
@media (min-width: 80em) { .hero-caption { display: flex; } }
.hero-progress { display: flex; gap: .35rem; }
.hero-progress button { width: 2.4rem; height: 2rem; background: none; border: 0; padding: 0; cursor: pointer; display: grid; align-items: center; }
.hero-progress button span { display: block; height: 1.5px; background: rgba(255, 255, 255, .28); position: relative; overflow: hidden; }
.hero-progress button span::after { content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.hero-progress button.active span::after { animation: bar var(--dur, 8s) linear both; }
.hero.paused .hero-progress button.active span::after { animation-play-state: paused; }
@keyframes bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-hint { font-size: .8rem; color: rgba(255, 255, 255, .6); display: none; align-items: center; gap: .45rem; }
.hero-hint svg { width: 1rem; height: 1rem; }
@media (min-width: 64em) { .hero-hint { display: inline-flex; } }
.hero-scroll { display: none; }
.hero.dragging { cursor: ew-resize; user-select: none; }
.hero-drag { position: absolute; inset: 0; z-index: 4; cursor: ew-resize; }
@media (hover: none) { .hero-drag { cursor: default; } }

/* Faktenleiste unter dem Hero */
.fakten-leiste { border-bottom: 1px solid var(--line); background: var(--bg); }
.fakten-leiste ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fakten-leiste li { padding: 1.1rem 1rem 1.1rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.fakten-leiste li:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 1rem; }
.fakten-leiste li:nth-child(even) { padding-left: 1rem; }
.fakten-leiste li:nth-last-child(-n+2) { border-bottom: 0; }
.fakten-leiste b { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: .2rem; }
@media (min-width: 48em) { .fakten-leiste ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fakten-leiste li { border-bottom: 0; padding: 1.3rem 1.4rem 1.3rem 0; } .fakten-leiste li:nth-child(odd), .fakten-leiste li:nth-child(even) { padding-left: 1.4rem; border-right: 1px solid var(--line); } .fakten-leiste li:first-child { padding-left: 0; } .fakten-leiste li:last-child { border-right: 0; } }

/* ---------- Sektionen ---------- */
.sect { padding-block: var(--sect); position: relative; }
.sect-2 { background: var(--bg-2); }
.sect-dunkel { background: var(--ink); color: #fff; }
.sect-dunkel .t-lead { color: rgba(255, 255, 255, .75); }
.sect-dunkel .t-kicker { color: var(--steel-hell); }
.sect-dunkel .t-small { color: rgba(255, 255, 255, .55); }
.sect-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem); padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.sect-dunkel .sect-head { border-color: var(--line-hell); }
@media (min-width: 64em) { .sect-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 3rem; } }
.wipe-line { display: none; }

/* Anspruch */
.manifest { display: grid; gap: 2.5rem; }
@media (min-width: 64em) { .manifest { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: start; } }
.manifest-big { font-stretch: 88%; font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); line-height: 1.15; letter-spacing: -.012em; }
.manifest-big em { font-style: normal; }
.fakten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.fakten li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); align-items: start; overflow-wrap: anywhere; }
.fakten svg { width: 1.5rem; height: 1.5rem; color: var(--steel); margin-top: .1rem; }
.fakten b { display: block; font-stretch: 92%; font-size: 1.05rem; margin-bottom: .2rem; font-weight: 600; }
.fakten p { color: var(--ink-3); font-size: .95rem; }
@media (min-width: 48em) { .fakten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2rem; } }

/* Leistungen: 3 × 3, flach */
.leistungen { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); counter-reset: l; }
@media (min-width: 64em) { .leistungen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; } }
.leistung { display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit; counter-increment: l; }
.leistung-bild { aspect-ratio: 4 / 3; position: relative; overflow: hidden; background: var(--bg-3); border-radius: var(--radius); }
.leistung-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.leistung:hover .leistung-bild img { transform: scale(1.03); }
.leistung-body { padding: 1rem 0 0; display: grid; gap: .4rem; align-content: start; border-top: 1px solid var(--line); margin-top: 1rem; }
.leistung-num { font-size: .78rem; letter-spacing: .12em; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.leistung-num::before { content: counter(l, decimal-leading-zero); }
.leistung h3 { font-size: 1.2rem; }
.leistung p { font-size: .93rem; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.leistung .mehr { margin-top: .5rem; font-weight: 600; font-size: .88rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--ink); }
.leistung .mehr svg { width: 1em; height: 1em; transition: transform .3s var(--ease); }
.leistung:hover .mehr svg { transform: translateX(3px); }
.leistung:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
@media (max-width: 39.99em) { .leistung { grid-template-rows: auto; grid-template-columns: 36% 1fr; gap: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; } .leistung-bild { aspect-ratio: 1; } .leistung-body { border-top: 0; margin-top: 0; padding-top: 0; } .leistung h3 { font-size: 1.05rem; } .leistung p { font-size: .86rem; -webkit-line-clamp: 2; } }

/* Vorher / Nachher
   Zwei Darstellungen: „regler“ blendet zwei deckungsgleiche Aufnahmen ineinander, „paar“ stellt zwei
   Aufnahmen nebeneinander, wenn der Bildausschnitt nicht deckungsgleich ist. Der Schieberegler nimmt
   auf Telefonen nur einen 3 rem hohen Streifen ein, damit senkrechtes Scrollen möglich bleibt. */
.vergleich-grid { display: grid; gap: 1.5rem; }
@media (min-width: 64em) { .vergleich-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.vergleich { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--ink-2); user-select: none; --p: 50%; }
.vergleich img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vergleich .vorher { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.vergleich-griff { position: absolute; top: 0; bottom: 0; left: var(--p); width: 0; z-index: 2; pointer-events: none; }
.vergleich-griff::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff; }
.vergleich-griff .knopf { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.9rem; height: 2.9rem; border-radius: var(--radius); background: var(--ink); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .35); }
.vergleich-griff .knopf svg { width: 1.3rem; height: 1.3rem; }
.vergleich-griff .lippe { display: none; }
.vergleich input[type="range"] { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 3rem; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; touch-action: pan-y; }
.vergleich input[type="range"]:focus-visible ~ .vergleich-griff .knopf { outline: 3px solid var(--rot); outline-offset: 2px; }
.vergleich .tag { position: absolute; top: .8rem; z-index: 2; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: .35rem .6rem; border-radius: var(--radius); pointer-events: none; }
.vergleich .tag-vorher { left: .8rem; background: rgba(14, 22, 29, .78); color: #fff; }
.vergleich .tag-nachher { right: .8rem; background: rgba(255, 255, 255, .94); color: var(--ink); }
.vergleich-cap { margin-top: .7rem; font-size: .88rem; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; }
.vergleich-cap b { color: var(--text); font-weight: 600; }
.vergleich-grid .vergleich-cap { flex-direction: column; gap: .15rem; }
.vergleich-hinweis { font-size: .82rem; color: var(--muted); margin-top: .35rem; display: flex; align-items: center; gap: .4rem; }
.vergleich-hinweis svg { width: 1em; height: 1em; }
/* Nebeneinander, wenn die Blickwinkel sich unterscheiden. Dann wäre ein Regler eine Behauptung,
   die die Aufnahmen nicht hergeben. */
.vergleich-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
.vergleich-paar .vp { position: relative; }
.vergleich-paar img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--bg-3); }
.vergleich-paar .tag, .galerie .tag { position: absolute; z-index: 1; top: .6rem; left: .6rem; max-width: calc(100% - 1.2rem); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding: .3rem .55rem; border-radius: var(--radius); background: rgba(14, 22, 29, .78); color: #fff; }
.vergleich-paar .tag-nachher, .galerie .tag-nachher { background: rgba(255, 255, 255, .94); color: var(--ink); }
/* Einzelner Vergleich auf einer Leistungsseite, mittig und nicht über die volle Spaltenbreite */
.vergleich-solo, .vergleich-einzeln { max-width: 46rem; margin: 2rem 0; }
.vergleich-einzeln img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--bg-3); }
.aufnahmen { margin-top: 2rem; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.aufnahme { margin: 0; }
.aufnahme img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--bg-3); }
.aufnahme figcaption { padding-top: .7rem; font-size: .88rem; color: var(--muted); }
.aufnahme figcaption b { display: block; color: var(--text); font-weight: 600; }

/* Region / Karte */
.region { display: grid; gap: 2.5rem; }
@media (min-width: 64em) { .region { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 5rem; align-items: center; } }
.karte { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bg-3); border: 1px solid var(--line); }
.karte svg { width: 100%; height: auto; }
.karte .see { fill: var(--bg-3); }
.karte .welle { display: none; }
.karte .land { fill: #fff; stroke: var(--steel-hell); stroke-width: 1.2; }
.karte .insel { fill: #fff; stroke: var(--steel-hell); stroke-width: 1; }
.karte .ort circle { fill: var(--ink); r: 4.5; }
.karte .ort text { font-family: var(--font); font-size: 14px; font-weight: 500; fill: var(--text); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.karte .ort.hq circle { fill: var(--rot); r: 7; }
.karte .ort.hq text { font-weight: 700; font-size: 17px; }
.karte .ring { fill: none; stroke: var(--steel); stroke-width: 1; opacity: .35; stroke-dasharray: 3 5; }
.karte .puls { display: none; }
.karte .legende { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; fill: var(--muted); font-family: var(--font); }
.orte { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2rem; border-top: 1px solid var(--line); }
.orte li { padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; min-width: 0; overflow-wrap: anywhere; }
.orte li.hq { font-weight: 600; }
.orte li.hq::after { content: 'Büro'; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--rot); font-weight: 600; }

/* Team */
.team { display: grid; gap: 2rem; }
@media (min-width: 64em) { .team { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 5rem; align-items: center; } }
.team-bild { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bg-3); margin: 0; }
.team-bild img { width: 100%; height: auto; }
.team-bild figcaption { padding: .8rem 0 0; font-size: .88rem; color: var(--muted); background: var(--bg); }
.team-bild figcaption b { color: var(--text); font-weight: 600; display: block; }
.werte { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; border-top: 1px solid var(--line); }
.werte li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .8rem; align-items: start; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.werte .n { font-size: .8rem; letter-spacing: .1em; color: var(--muted); font-weight: 600; padding-top: .3rem; font-variant-numeric: tabular-nums; }
.werte b { display: block; font-stretch: 92%; font-size: 1.05rem; margin-bottom: .15rem; font-weight: 600; }
.werte p { color: var(--ink-3); font-size: .95rem; }

/* Ablauf */
.ablauf { display: grid; gap: 0; counter-reset: s; border-top: 1px solid var(--line); }
@media (min-width: 48em) { .ablauf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.schritt { position: relative; padding: 1.6rem 0 1.8rem; border-bottom: 1px solid var(--line); counter-increment: s; }
@media (min-width: 48em) { .schritt { padding: 2rem 2rem 2.2rem 0; border-bottom: 0; border-right: 1px solid var(--line); } .schritt + .schritt { padding-left: 2rem; } .schritt:last-child { border-right: 0; padding-right: 0; } }
.schritt::before { content: counter(s, decimal-leading-zero); display: block; font-size: .8rem; letter-spacing: .12em; color: var(--rot); font-weight: 700; margin-bottom: 1rem; font-variant-numeric: tabular-nums; }
.schritt h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.schritt p { color: var(--ink-3); font-size: .95rem; }
.schritt .kanaele { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.schritt .kanaele a { font-size: .84rem; padding: .45rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius); text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; font-weight: 500; }
.schritt .kanaele a:hover { border-color: var(--ink); }
.schritt .kanaele svg { width: 1em; height: 1em; }

/* Kundenstimmen */
.stimmen { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
@media (min-width: 64em) { .stimmen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stimme { margin: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 1rem; padding: 1.6rem 1.6rem 1.4rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.stimme .sterne { display: inline-flex; gap: .12rem; color: var(--rot); }
.stimme .sterne svg { width: .9rem; height: .9rem; }
.stimme blockquote { margin: 0; }
.stimme blockquote p { font-size: 1.02rem; line-height: 1.55; color: var(--text); }
.stimme figcaption { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; color: var(--muted); padding-top: .9rem; border-top: 1px solid var(--line); }
.stimme figcaption b { color: var(--text); font-weight: 600; }

/* Redaktionshinweis: eindeutig als fehlender Inhalt markiert */
.hinweis { border: 1px dashed var(--rot); border-radius: var(--radius); padding: .9rem 1.1rem; background: rgba(178, 56, 43, .04); font-size: .9rem; color: var(--ink-3); display: block; }
.hinweis b { display: block; margin-bottom: .3rem; color: var(--rot); letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
.hinweis code { font-size: .88em; background: var(--bg-2); padding: .1em .3em; border-radius: 2px; }

/* Kontakt / Formular */
.kontakt { display: grid; gap: 2.5rem; }
@media (min-width: 64em) { .kontakt { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 5rem; align-items: start; } }
.kanal-liste { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; border-top: 1px solid var(--line); }
.kanal { display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.kanal:hover b { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.kanal .ico { width: 2.5rem; height: 2.5rem; border-radius: var(--radius); display: grid; place-items: center; background: var(--bg-2); color: var(--ink); }
.sect-2 .kanal .ico { background: var(--bg); }
.kanal .ico svg { width: 1.2rem; height: 1.2rem; }
.kanal.wa .ico { background: var(--ink); color: #fff; }
.kanal b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.kanal small { color: var(--muted); font-size: .84rem; }
.kanal .pfeil { width: 1.1rem; height: 1.1rem; color: var(--muted); }
.info-block { margin-top: 1.6rem; display: grid; gap: 1rem; font-size: .95rem; overflow-wrap: anywhere; }
.check a { padding-block: .3rem; }
.info-block dt { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .25rem; font-weight: 600; }
.info-block dd { margin: 0; }
.info-block dl { margin: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.form { display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); position: relative; }
.form-row { display: grid; gap: 1rem; }
@media (min-width: 40em) { .form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.feld { display: grid; gap: .35rem; }
.feld label { font-weight: 600; font-size: .9rem; }
.feld label span { color: var(--muted); font-weight: 400; }
.feld input, .feld select, .feld textarea { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: .8rem .9rem; width: 100%; transition: border-color .2s, box-shadow .2s; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(14, 22, 29, .08); }
.feld textarea { min-height: 5.5rem; resize: vertical; }
.form-hinweis { margin-top: .2rem; }
.feld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%230e161d' stroke-width='1.6'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.4rem; }
.feld .fehler { color: var(--rot); font-size: .84rem; display: none; }
.feld.invalid .fehler { display: block; }
.feld.invalid input, .feld.invalid textarea, .feld.invalid select { border-color: var(--rot); }
.check { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: .88rem; color: var(--ink-3); }
.check input { width: 1.3rem; height: 1.3rem; margin-top: .1rem; accent-color: var(--ink); }
.check.invalid { color: var(--rot); }
.check .fehler { grid-column: 2; color: var(--rot); font-size: .84rem; display: none; }
.check.invalid .fehler { display: block; }
.check label a { color: inherit; }
/* Datenschutz im Anfrageformular: kurzer Klartext plus Bestätigung */
.form-datenschutz { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; display: grid; gap: .8rem; font-size: .88rem; line-height: 1.55; color: var(--ink-3); }
.form-datenschutz p { margin: 0; }
.form-datenschutz b { color: var(--text); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-top: .4rem; }
.form-foot .t-small { max-width: 26rem; }
.form-status { display: none; padding: .9rem 1rem; border-radius: var(--radius); font-size: .92rem; }
.form-status.ok { display: block; background: #e9f2ea; color: #23512b; border: 1px solid #b7d3ba; }
.form-status.err { display: block; background: rgba(178, 56, 43, .06); color: var(--rot-dunkel); border: 1px solid rgba(178, 56, 43, .35); }
.form-status a { font-weight: 600; }
.form-done { display: grid; gap: 1rem; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--ink); color: #fff; border-radius: var(--radius); }
.form-done .t-h3 { font-size: 1.7rem; }
.form-done p { color: rgba(255, 255, 255, .8); }
.form-done .t-kicker { color: var(--steel-hell); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* Maße und Foto-Upload im Formular */
.feldgruppe { border: 0; border-top: 1px solid var(--line); padding: 1rem 0 0; margin: .3rem 0 0; display: grid; gap: .8rem; min-width: 0; }
.feldgruppe legend { font-weight: 600; font-size: .9rem; padding: 0; float: left; width: 100%; margin-bottom: .1rem; }
.feldgruppe > .t-small { margin: 0 0 .2rem; }
.feld-upload { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: .3rem; }
.form-row-3 { grid-template-columns: 1fr; }
@media (min-width: 40em) { .form-row-3 { grid-template-columns: 1fr 1fr 1fr; } }
.upload { display: grid; gap: .7rem; position: relative; }
.upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.upload-zone { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; padding: 1rem 1.1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--bg-2); cursor: pointer; transition: border-color .2s, background .2s; }
.upload-zone:hover, .upload-zone.drag { border-color: var(--ink); background: var(--bg-3); }
.upload input:focus-visible ~ .upload-zone { outline: 2px solid var(--rot); outline-offset: 2px; }
.upload-zone svg { width: 1.7rem; height: 1.7rem; color: var(--steel); }
.upload-zone b { display: block; font-weight: 600; font-size: .95rem; }
.upload-zone span { display: block; font-size: .84rem; color: var(--muted); }
.upload-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
.upload-liste:empty { display: none; }
.upload-liste li { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-2); }
.upload-liste img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.upload-liste .warte { aspect-ratio: 1; display: grid; place-items: center; font-size: .78rem; color: var(--muted); text-align: center; padding: .5rem; }
.upload-liste .meta { font-size: .78rem; color: var(--muted); padding: .35rem .45rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload-liste button { position: absolute; top: .3rem; right: .3rem; width: 1.7rem; height: 1.7rem; border-radius: var(--radius); border: 0; background: rgba(14, 22, 29, .82); color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; }
.upload-liste button svg { width: .9rem; height: .9rem; }
.form-progress { height: 3px; background: var(--bg-3); border-radius: 2px; overflow: hidden; display: none; }
.form-progress.show { display: block; }
.form-progress i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .2s; }

/* Schluss-CTA */
.cta-band { background: var(--ink-2); color: #fff; }
.cta-band .wrap { display: grid; gap: 1.5rem; }
@media (min-width: 64em) { .cta-band .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3rem; } }
.cta-band .t-h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .78); }

/* Footer */
.footer { background: var(--ink); color: rgba(255, 255, 255, .72); padding-block: 3.5rem 7rem; font-size: .9rem; }
@media (min-width: 64em) { .footer { padding-bottom: 3rem; } }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 48em) { .footer-grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }
.footer .footer-h { color: #fff; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .9rem; font-weight: 600; max-width: none; }
.footer a, .recht a, .form-foot a, .form-done a, .t-small a { padding-block: .3rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
/* Freistehender Verweis am Ende eines Abschnitts: als Zeile antippbar, nicht nur die Schrifthöhe. */
.zeilen-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 1.8rem; padding-block: .25rem; }
.zeilen-link svg { width: 1.1em; height: 1.1em; }
/* Mindesthöhe zum Antippen: 24 Pixel, auch wenn die Zeile kurz ist. */
.footer a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 1.6rem; padding: .12rem 0; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer .brand-foot img { width: min(18rem, 100%); height: auto; margin-bottom: 1.1rem; }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.3rem; border-top: 1px solid var(--line-hell); display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; justify-content: space-between; font-size: .82rem; color: rgba(255, 255, 255, .58); }

/* Mobile Aktionsleiste */
.aktion { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; background: var(--ink); border-top: 1px solid var(--line-hell); padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform .4s var(--ease); }
.aktion.show { transform: none; }
.aktion a { display: flex; align-items: center; justify-content: center; gap: .4rem; min-width: 0; padding: .8rem .3rem; font-size: .84rem; font-weight: 600; line-height: 1; white-space: nowrap; color: #fff; text-decoration: none; border-radius: var(--radius); background: rgba(255, 255, 255, .08); }
.aktion a svg { width: 1.05rem; height: 1.05rem; flex: none; }
@media (max-width: 23.4em) { .aktion a { font-size: .8rem; gap: .32rem; } .aktion a svg { width: .95rem; height: .95rem; } }
.aktion a.rot { background: var(--rot); }
@media (min-width: 64em) { .aktion { display: none; } }

/* Handy: Startseite und Footer gestrafft (Desktop und Tablet unverändert) */
.nur-mobil { display: none; }
@media (max-width: 47.99em) {
  .nur-mobil { display: block; }
  .nur-desktop { display: none !important; }
  .kontakt-weiter { display: grid; gap: .6rem; margin-top: 1.2rem; }
  .kontakt-weiter .btn { width: 100%; }
  .manifest .fakten { display: none; }
  .leistung p { display: none; }
  .leistung { grid-template-columns: 30% 1fr; }
  .aufnahmen { display: none; }
  .region-start .karte { display: none; }
  .team .werte { display: none; }
  .stimme-mehr { display: none; }
  .cta-start { display: none; }
  .footer { padding-block: 2.5rem 6.5rem; }
  .footer-col-leistungen, .footer-col-mehr { display: none; }
  .footer-grid { gap: 1.5rem; }
  .footer .brand-foot p { font-size: .88rem; }
  .footer .footer-recht { display: flex; gap: 1.2rem; margin-top: 1rem; }
  .footer-bottom { margin-top: 1.6rem; padding-top: 1rem; }
}

/* Scroll-Reveal, dezent */
.rv { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; }

/* ---------- Unterseiten ---------- */
.seite-kopf { background: var(--ink); color: #fff; padding: 8rem 0 3.5rem; position: relative; overflow: hidden; }
.seite-kopf-bild { position: absolute; inset: 0; opacity: .5; }
.seite-kopf-bild img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
@media (max-width: 47.99em) { .seite-kopf-bild img { object-position: var(--pos-m, var(--pos, 50% 50%)); } }
.seite-kopf-bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--ink) 5%, rgba(14, 22, 29, .45) 60%, rgba(14, 22, 29, .7)); }
.seite-kopf .wrap { position: relative; }
.seite-kopf .t-lead { color: rgba(255, 255, 255, .8); margin-top: 1.1rem; max-width: 40rem; }
.seite-kopf .t-kicker { color: var(--steel-hell); }
.crumbs { display: flex; align-items: baseline; gap: .5rem; font-size: .8rem; color: rgba(255, 255, 255, .6); margin-bottom: 1.2rem; list-style: none; padding: 0; }
.crumbs a { text-decoration: none; display: inline-block; padding: .3rem 0; }
.crumbs li + li::before { content: '/'; margin-right: .5rem; opacity: .5; }

/* Leistungs-Detail */
.sprung { position: sticky; top: var(--kopf-h, 4.5rem); transition: top .35s var(--ease); z-index: 30; background: #fff; border-bottom: 1px solid var(--line); }
.sprung ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; width: var(--w); margin-inline: auto; }
.sprung ul::-webkit-scrollbar { display: none; }
html.kopf-weg .sprung { top: 0; }
@media (max-width: 63.99em) { .sprung ul { mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent); padding-right: 3rem; } }
.sprung a { display: block; white-space: nowrap; padding: .9rem .8rem; font-size: .86rem; font-weight: 500; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; }
.sprung a:hover, .sprung a.active { color: var(--ink); border-color: var(--ink); }
.detail { padding-block: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line); scroll-margin-top: 8rem; }
.detail-grid { display: grid; gap: 1.6rem; }
@media (min-width: 64em) { .detail-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4rem; } .detail:nth-child(even) .detail-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } .detail:nth-child(even) .detail-text { order: 2; } }
@media (min-width: 64em) { .detail-text { position: sticky; top: calc(var(--kopf-h, 4.5rem) + 5rem); align-self: start; transition: top .35s var(--ease); } html.kopf-weg .detail-text { top: 5rem; } }
.detail-text .t-h2 { margin-bottom: 1rem; }
.detail-text .btn { margin-top: 1.2rem; }
.galerie { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48em) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.galerie a { display: block; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--bg-3); aspect-ratio: 1; }
.galerie a:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
/* Übersicht: auf dem Telefon das erste Bild quer über beide Spalten, ab Tablet genau so hoch wie die
   zwei kleinen Bilder daneben. Das Bild liegt absolut, damit ein Hochformat die Zeilen nicht streckt. */
.detail .galerie a:first-child { grid-row: auto; aspect-ratio: 4 / 3; }
@media (min-width: 48em) { .detail .galerie a:first-child { grid-row: span 2; aspect-ratio: auto; } .detail .galerie a:first-child img { position: absolute; inset: 0; } }
/* Nur ein Bild (Treppenhaus): über die volle Breite, quadratisch, damit die Treppe als Treppe erkennbar bleibt. */
.detail .galerie a:only-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 1 / 1; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.galerie a:hover img { transform: scale(1.03); }
.galerie .mehr-tag { position: absolute; right: .6rem; bottom: .6rem; background: rgba(14, 22, 29, .8); color: #fff; font-size: .78rem; padding: .3rem .55rem; border-radius: var(--radius); font-weight: 600; }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 80; background: rgba(14, 22, 29, .96); display: none; align-items: center; justify-content: center; padding: 1rem; }
.lb.open { display: flex; }
.lb img { max-width: min(100%, 90rem); max-height: 86vh; object-fit: contain; border-radius: var(--radius); }
.lb button { position: absolute; width: 2.75rem; height: 2.75rem; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; display: grid; place-items: center; }
.lb button svg { width: 1.2rem; height: 1.2rem; }
.lb button:hover { background: rgba(255, 255, 255, .16); }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lb-cap { position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); color: rgba(255, 255, 255, .75); font-size: .85rem; white-space: nowrap; }

/* Über uns */
.zitat { font-stretch: 88%; font-weight: 600; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); line-height: 1.2; letter-spacing: -.012em; border-left: 2px solid var(--rot); padding-left: 1.3rem; }
.zwei { display: grid; gap: 2rem; }
@media (min-width: 64em) { .zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: center; } }
.bildraster { display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bildraster img { border-radius: var(--radius); width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }

/* Rechtstexte */
.recht { padding-block: 3.5rem 5rem; overflow-wrap: anywhere; }
.recht h2 { font-size: 1.45rem; margin: 2.4rem 0 .7rem; }
.recht h3 { font-size: 1.1rem; margin: 1.6rem 0 .5rem; }
.recht p, .recht li { color: var(--ink-3); }
.recht ul { padding-left: 1.2rem; }
.recht address { font-style: normal; }
.recht .hinweis { margin: 1rem 0; }
.recht .crumbs { color: var(--muted); }

@media print { .header, .aktion, .menu, .hero-progress, .lb { display: none !important; } .hero { min-height: auto; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .rv { opacity: 1; transform: none; }
}

/* Ferienwohnungen & Ferienhäuser (Erweiterung 19.09.2026): dunkler Abschnitt, ruhiger Horizont als einziges Küstenmotiv */
.fewo { background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 58%, #122431 100%); overflow: hidden; }
.fewo-grid { display: grid; gap: 2.5rem; }
@media (min-width: 64em) { .fewo-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: start; } }
.fewo .t-h2 { color: #fff; }
.fewo-intro .t-lead { margin-top: 1.2rem; max-width: 34rem; }
.fewo-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.8rem; }
.fewo .fewo-mehr { color: rgba(255, 255, 255, .85); font-weight: 600; font-size: .95rem; }
.fewo .fewo-mehr:hover { color: #fff; }
@media (max-width: 39.99em) { .fewo-cta { width: 100%; padding-inline: 1.1rem; } }
.fewo-h3 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--steel-hell); margin: 0 0 .4rem; line-height: 1.5; max-width: none; }
.fewo-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-hell); }
.fewo-liste li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .9rem; align-items: start; padding: .95rem 0; border-bottom: 1px solid var(--line-hell); color: rgba(255, 255, 255, .88); font-size: 1rem; overflow-wrap: anywhere; }
.fewo-liste svg { width: 1.25rem; height: 1.25rem; color: var(--steel-hell); margin-top: .1rem; }
.fewo-region { margin-top: clamp(3rem, 6vw, 4.5rem); position: relative; }
.fewo-horizont { height: 1px; background: linear-gradient(90deg, rgba(157, 180, 194, 0) 0%, rgba(157, 180, 194, .55) 18%, rgba(157, 180, 194, .55) 82%, rgba(157, 180, 194, 0) 100%); margin-bottom: 1.6rem; }
.fewo-region-text { font-stretch: 92%; font-weight: 600; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); color: #fff; margin: 0; }
.fewo-orte { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem 0; font-size: .95rem; letter-spacing: .02em; color: rgba(255, 255, 255, .6); }
.fewo-orte li:not(:last-child)::after { content: '·'; margin: 0 .6rem; color: var(--steel-hell); }
.fewo-orte .fewo-umgebung { color: rgba(255, 255, 255, .45); }

/* Formular: Zusatzfelder für Ferienwohnungen, nur sichtbar bei dieser Auswahl */
.fewo-felder[hidden], .form .feld[hidden] { display: none; }
.fewo-turnus { gap: .45rem; }
.fewo-label { font-weight: 600; font-size: .9rem; }
.fewo-label span { color: var(--muted); font-weight: 400; }
.fewo-turnus .fewo-wahl { display: flex; align-items: center; gap: .6rem; font-weight: 400; font-size: .95rem; cursor: pointer; }
.fewo-turnus .fewo-wahl input { width: 1.2rem; height: 1.2rem; accent-color: var(--ink); margin: 0; padding: 0; border: 0; box-shadow: none; flex: none; }

/* Zehnte Leistung: drei Spalten gehen nicht mehr auf. Ab 64em steht die letzte Kachel quer über die ganze
   Breite (Bild über zwei Spalten, Text in der dritten), darunter zwei Spalten statt eines losen Rests. */
@media (min-width: 40em) and (max-width: 63.99em) { .leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .leistungen > .leistung:last-child:nth-child(3n+1) { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: subgrid; align-items: stretch; }
  .leistungen > .leistung:last-child:nth-child(3n+1) .leistung-bild { grid-column: span 2; aspect-ratio: 21 / 8; }
  .leistungen > .leistung:last-child:nth-child(3n+1) .leistung-body { margin-top: 0; align-content: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.2rem 0; }
}