/* ==========================================================
   S&D Sicherheit – Gestaltung (Version 2)
   Bildstark, dunkle Petrol-Flächen, kräftige Überschriften
   ========================================================== */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("../assets/schriften/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("../assets/schriften/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("../assets/schriften/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url("../assets/schriften/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("../assets/schriften/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("../assets/schriften/barlow-condensed-700.woff2") format("woff2"); }

:root {
  --nacht: #061b24;         /* dunkelste Fläche */
  --tief: #0a2e3d;          /* dunkle Fläche */
  --petrol: #16698a;        /* Firmenfarbe */
  --petrol-hell: #3aa7cf;   /* Leuchtfarbe auf Dunkel */
  --eis: #e4f1f6;           /* sehr helles Petrol */
  --nebel: #f2f7f9;         /* heller Hintergrund */
  --weiss: #ffffff;
  --tinte: #0b2430;         /* Text */
  --leise: #516b79;         /* Nebentext */
  --linie: #d7e3e9;
  --warn: #e3f23c;          /* Warnwesten-Gelb für die wichtigste Aktion */
  --warn-dunkel: #cfe01f;

  --schrift: "Barlow", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-eng: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;

  --rand: clamp(20px, 4.5vw, 56px);
  --breite: 1280px;
  --abstand: clamp(80px, 10vw, 150px);
  --rund: 26px;
  --schatten: 0 24px 60px -24px rgba(6, 27, 36, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--schrift); font-size: 1.125rem; line-height: 1.65; color: var(--tinte); background: var(--weiss); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--petrol); text-underline-offset: 0.18em; }
a:hover { color: var(--tief); }
:focus-visible { outline: 3px solid var(--petrol-hell); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--schrift-eng); font-weight: 700; line-height: 1.02; margin: 0; text-wrap: balance; letter-spacing: -0.005em; }
/* Silbentrennung nur für wirklich lange Wörter (ab 12 Zeichen, mindestens 5 Buchstaben vor und nach dem Strich),
   damit kurze Wörter wie „Sicherheit“ nicht zu „Si-cherheit“ getrennt werden. Zeilen gleichmäßig verteilen. */
h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; overflow-wrap: break-word; text-wrap: balance; }
h1 { font-size: clamp(3rem, 7.2vw, 6.4rem); line-height: 0.96; }
.fliesstext .kopfzeile h2 { font-size: clamp(2.1rem, 3.4vw, 3rem); }
h2 { font-size: clamp(2.3rem, 4.8vw, 4rem); }
h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 600; line-height: 1.12; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.gross { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.55; }
.leise { color: var(--leise); }
.rahmen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: 16px; top: 16px; z-index: 200; background: var(--weiss); padding: 10px 16px; border-radius: 8px; }
.symbol { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Schaltflächen ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; font: 600 1.05rem/1.2 var(--schrift); padding: 1.05em 1.6em; border-radius: 999px; border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: transform .2s, background-color .2s, color .2s, border-color .2s, box-shadow .2s; }
.knopf:hover { transform: translateY(-2px); }
.knopf-haupt { background: var(--warn); color: var(--tinte); box-shadow: 0 10px 30px -10px rgba(227, 242, 60, .7); }
.knopf-haupt:hover { background: var(--warn-dunkel); color: var(--tinte); }
/* In dunklen Bereichen sind Links weiß; der gelbe Knopf behält trotzdem dunkle Schrift */
.dunkel a.knopf-haupt, .dunkel a.knopf-haupt:hover, .hero a.knopf-haupt, .hero a.knopf-haupt:hover { color: var(--tinte); }
.knopf-haupt .symbol { transition: transform .2s; }
.knopf-haupt:hover .symbol { transform: translateX(4px); }
.knopf-glas { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); color: var(--weiss); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.knopf-glas:hover { background: var(--weiss); border-color: var(--weiss); color: var(--tief); }
.knopf-linie { border-color: var(--petrol); color: var(--petrol); background: transparent; }
.knopf-linie:hover { background: var(--petrol); color: var(--weiss); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.2rem; }
.textlink { display: inline-flex; align-items: center; gap: 0.5em; margin-top: 1.6rem; font-weight: 600; text-decoration: none; }
.textlink .symbol { transition: transform .2s; }
.textlink:hover .symbol { transform: translateX(5px); }

/* ---------- Kopfbereich ---------- */
.kopf { position: fixed; inset: 0 0 auto 0; z-index: 100; color: var(--weiss); transition: background-color .3s, box-shadow .3s, color .3s; background: linear-gradient(to bottom, rgba(6,27,36,.55), rgba(6,27,36,0)); }
.kopf-innen { display: flex; align-items: center; gap: 30px; height: 88px; transition: height .3s; }
.kopf.fest { background: rgba(255,255,255,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--tinte); box-shadow: 0 6px 30px -12px rgba(6,27,36,.25); }
.kopf.fest .kopf-innen { height: 72px; }

.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; margin-right: auto; }
.marke img { width: 40px; height: 51px; }
.marke .logo-farbe { display: none; }
.kopf.fest .marke .logo-farbe { display: block; }
.kopf.fest .marke .logo-weiss { display: none; }
.marke-name { font-weight: 700; font-size: 1.25rem; line-height: 1; letter-spacing: 0.01em; }
.marke-name small { display: block; font-weight: 400; font-size: 0.72rem; margin-top: 5px; opacity: .8; }
.kopf .marke:hover { color: inherit; }

.navi > ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.navi li { position: relative; }
.navi a { display: flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; font-weight: 500; font-size: 1.02rem; padding: 10px 14px; border-radius: 999px; transition: background-color .2s; }
.navi > ul > li > a:hover, .navi > ul > li > a[aria-current] { background: rgba(255,255,255,.16); }
.kopf.fest .navi > ul > li > a:hover, .kopf.fest .navi > ul > li > a[aria-current] { background: var(--eis); color: var(--petrol); }
.navi .winkel { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; }
.unter { position: absolute; top: calc(100% + 10px); left: -10px; min-width: 270px; list-style: none; margin: 0; padding: 10px; background: var(--weiss); color: var(--tinte); border-radius: 18px; box-shadow: var(--schatten); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; }
.unter::before { content: ""; position: absolute; inset: -12px 0 auto 0; height: 12px; }
.navi li:hover > .unter, .navi li:focus-within > .unter, .navi li.offen > .unter { opacity: 1; visibility: visible; transform: none; }
.navi li.zu > .unter { opacity: 0; visibility: hidden; transform: translateY(8px); }

/* Nach-oben-Knopf */
.nach-oben { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; background: var(--tief); color: var(--weiss); box-shadow: 0 10px 30px -10px rgba(6,27,36,.6); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s, transform .25s, visibility .25s, background-color .2s; }
.nach-oben.sichtbar { opacity: 1; visibility: visible; transform: none; }
.nach-oben:hover { background: var(--petrol); }
.nach-oben .symbol { width: 22px; height: 22px; transform: rotate(-90deg); }
.unter a { padding: 10px 14px; border-radius: 10px; font-size: 1rem; }
.unter a:hover { background: var(--eis); color: var(--petrol); }

.kopf-telefon { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: inherit; text-decoration: none; white-space: nowrap; }
.kopf-telefon:hover { color: var(--warn); }
.kopf.fest .kopf-telefon:hover { color: var(--petrol); }
.kopf .knopf { padding: 0.75em 1.25em; font-size: 0.98rem; box-shadow: none; }
.menue-knopf { display: none; background: none; border: 0; padding: 10px; margin-right: -10px; cursor: pointer; color: inherit; }
.menue-knopf svg { width: 30px; height: 30px; display: block; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; color: var(--weiss); background: var(--nacht); overflow: hidden; }
.hero-bild { position: absolute; inset: 0; z-index: -2; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(6,27,36,.84) 0%, rgba(6,27,36,.5) 46%, rgba(6,27,36,0) 100%), linear-gradient(to top, rgba(6,27,36,.7) 0%, rgba(6,27,36,0) 40%); }
.hero-innen { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(32px, 5vw, 80px); align-items: end; min-height: min(100svh, 960px); padding-block: 140px clamp(48px, 5vw, 72px); }
.hero:not(.klein) h1 { font-size: clamp(2.9rem, 6.4vw, 5.7rem); }
.hero h1 em { display: block; font-style: normal; color: var(--warn); } /* Slogan immer in eigener Zeile */
.hero .gross { margin-top: 1.7rem; max-width: 56ch; color: #dcecf2; }
.ortszeile { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 1.6rem; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 0.95rem; font-weight: 500; }
.ortszeile .symbol { color: var(--warn); }
.hero-vorteile { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 2.4rem 0 0; padding: 0; font-size: 1rem; color: #dcecf2; }
.hero-vorteile li { display: flex; align-items: center; gap: 8px; }
.hero-vorteile .symbol { color: var(--warn); }

/* Google-Bewertung */
.bewertung { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-weight: 600; text-decoration: none; color: inherit; }
.bewertung:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.sterne { color: #f5b700; letter-spacing: 1px; font-size: 1.05em; }
.hero .bewertung, .dunkel .bewertung { color: var(--weiss); }
.hero .sterne, .dunkel .sterne { color: var(--warn); }
.bewertung-zeile { margin-top: 1.4rem; font-size: 1rem; }

.hero-karten { display: grid; gap: 16px; }
.glaskarte { display: grid; grid-template-columns: 104px 1fr auto; gap: 18px; align-items: center; padding: 14px 18px 14px 14px; border-radius: 22px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: var(--weiss); text-decoration: none; transition: transform .25s, background-color .25s; }
.glaskarte:hover { transform: translateX(-6px); background: rgba(255,255,255,.18); color: var(--weiss); }
.glaskarte img { width: 104px; height: 104px; object-fit: cover; border-radius: 14px; }
.glaskarte strong { display: block; font-family: var(--schrift-eng); font-size: 1.6rem; font-weight: 600; line-height: 1.05; }
.glaskarte span { display: block; font-size: 0.95rem; color: #cfe3ea; margin-top: 4px; line-height: 1.35; }
.rundpfeil { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--warn); color: var(--tinte); flex: none; transition: transform .25s; }
.rundpfeil .symbol { width: 20px; height: 20px; }

/* Unterseiten-Hero */
.hero.klein .hero-innen { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 190px clamp(110px, 11vw, 150px); }
.hero.klein h1 { font-size: clamp(2.7rem, 6vw, 5.2rem); max-width: 17ch; }
/* Ein langes Wort (z. B. „Datenschutzerklärung“) nur trennen, wenn es wirklich nicht passt */
.hero.klein h1.ein-wort { max-width: none; }
.hero.schlicht .hero-innen { padding-block: 170px clamp(56px, 6vw, 80px); }
.brotkrumen { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 1.5rem; padding: 0; font-size: 0.95rem; color: #cfe3ea; }
.brotkrumen li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
.brotkrumen a { color: inherit; }

.fakten { position: relative; z-index: 2; margin-top: -64px; }
.fakten ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); background: var(--weiss); border-radius: var(--rund); box-shadow: var(--schatten); overflow: hidden; }
.fakten li { padding: 30px 32px; border-left: 1px solid var(--linie); }
.fakten li:first-child { border-left: 0; }
.fakten strong { display: block; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; font-family: var(--schrift-eng); font-size: clamp(1.6rem, 2vw, 2.2rem); font-weight: 700; line-height: 1; color: var(--petrol); }
.fakten span { display: block; margin-top: 8px; font-size: 0.98rem; color: var(--leise); line-height: 1.4; }

@media (prefers-reduced-motion: no-preference) {
  .hero-bild img { animation: zoomen 22s ease-out both; }
  @keyframes zoomen { from { transform: scale(1.12); } to { transform: scale(1); } }
  .hero [data-start] { animation: auftritt .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  @keyframes auftritt { from { opacity: 0; transform: translateY(26px); } }
}

/* ---------- Laufband ---------- */
.band { background: var(--warn); color: var(--tinte); overflow: hidden; padding: 16px 0; font-family: var(--schrift-eng); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.03em; white-space: nowrap; }
.band-spur { display: inline-flex; gap: 0; animation: laufen 40s linear infinite; }
.band-spur span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; }
.band-spur span::after { content: ""; width: 9px; height: 9px; background: var(--tinte); transform: rotate(45deg); }
@keyframes laufen { to { transform: translateX(-50%); } }

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: var(--abstand); position: relative; }
.abschnitt.eng { padding-block: calc(var(--abstand) * .62); }
.nebel { background: var(--nebel); }
.dunkel { background: var(--nacht); color: var(--weiss); isolation: isolate; overflow: hidden; }
.dunkel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 85% 0%, rgba(22,105,138,.55), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(22,105,138,.35), transparent 70%); }
.dunkel .leise { color: #a9c6d2; }
.dunkel a { color: var(--weiss); }
.wasserzeichen { position: absolute; right: -6%; top: 50%; width: min(52vw, 640px); transform: translateY(-50%); opacity: .05; z-index: -1; pointer-events: none; }

.kopfzeile { max-width: 50rem; margin-bottom: clamp(40px, 5vw, 72px); }
.kopfzeile.mitte { margin-inline: auto; text-align: center; }
.kopfzeile p { margin-top: 1.3rem; }
.kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 1.1rem; font-weight: 600; font-size: 0.98rem; color: var(--petrol); }
.kicker::before { content: ""; width: 34px; height: 3px; border-radius: 2px; background: var(--warn-dunkel); }
.dunkel .kicker { color: var(--petrol-hell); }
.dunkel .kicker::before, .hero .kicker::before { background: var(--warn); }

/* Große Leistungskarten mit Bild */
.leistungen { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.lkarte { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(480px, 46vw, 640px); padding: clamp(26px, 3.4vw, 46px); border-radius: var(--rund); overflow: hidden; color: var(--weiss); text-decoration: none; box-shadow: var(--schatten); }
.lkarte img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.lkarte::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6,27,36,.96) 0%, rgba(6,27,36,.6) 45%, rgba(6,27,36,.05) 80%); transition: opacity .4s; }
.lkarte:hover { color: var(--weiss); }
.lkarte:hover img { transform: scale(1.06); }
.lkarte h3 { font-size: clamp(2.1rem, 3.6vw, 3.1rem); font-weight: 700; }
.lkarte p { margin-top: 0.9rem; color: #d6e6ec; max-width: 44ch; }
.marken { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 1.3rem 0 0; padding: 0; }
.marken li { padding: 6px 14px; border-radius: 999px; font-size: 0.92rem; font-weight: 500; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); }
.lkarte .mehr { display: inline-flex; align-items: center; gap: 14px; margin-top: 1.7rem; font-weight: 600; }
.lkarte:hover .rundpfeil { transform: translateX(6px); }

/* Zahlen */
.zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.zahl-block { padding-top: 26px; border-top: 2px solid rgba(255,255,255,.18); }
.zahl { font-family: var(--schrift-eng); font-weight: 700; font-size: clamp(4.6rem, 10vw, 8.6rem); line-height: 0.9; background: linear-gradient(180deg, #ffffff 20%, var(--petrol-hell) 110%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zahl sup { font-size: 0.4em; color: var(--warn); -webkit-text-fill-color: var(--warn); vertical-align: top; margin-left: 0.08em; position: relative; top: 0.25em; }
.zahl-block h3 { margin-top: 1rem; }
.zahl-block p { margin-top: 0.6rem; color: #a9c6d2; font-size: 1.02rem; }
.quelle { margin-top: 2.6rem; font-size: 0.95rem; color: #a9c6d2; }

/* Normen-Karten */
.normen { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 18px; }
.nkarte { display: flex; flex-direction: column; min-height: 300px; padding: 28px; border-radius: 22px; background: var(--weiss); border: 1px solid var(--linie); color: var(--tinte); text-decoration: none; transition: transform .3s, background-color .3s, color .3s, box-shadow .3s, border-color .3s; }
.nkarte .code { font-family: var(--schrift-eng); font-weight: 700; font-size: 2.5rem; line-height: 1; color: var(--petrol); transition: color .3s; white-space: nowrap; }
.nkarte .thema { margin-top: 0.7rem; font-weight: 600; line-height: 1.3; }
.nkarte .kurz { margin-top: 0.7rem; font-size: 0.98rem; line-height: 1.5; color: var(--leise); transition: color .3s; }
.nkarte .mehr { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 1.4rem; font-weight: 600; font-size: 0.98rem; color: var(--petrol); transition: color .3s; }
.nkarte:hover { transform: translateY(-8px); background: linear-gradient(160deg, var(--petrol), var(--tief)); border-color: transparent; color: var(--weiss); box-shadow: var(--schatten); }
.nkarte:hover .code, .nkarte:hover .mehr { color: var(--warn); }
.nkarte:hover .kurz { color: #d6e6ec; }

/* Referenz-Logos */
.referenzen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.referenzen li { width: 168px; height: 126px; display: block; padding: 12px; overflow: hidden; border-radius: 18px; background: var(--weiss); border: 1px solid var(--linie); transition: transform .3s, box-shadow .3s, border-color .3s; }
.referenzen li:hover { transform: translateY(-5px); box-shadow: var(--schatten); border-color: transparent; }
.referenzen img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 600px) {
  .referenzen { gap: 10px; }
  .referenzen li { width: calc(50% - 5px); height: 112px; }
}

/* Bild + Text */
.bildtext { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.bildtext.umgekehrt > .bildseite { order: 2; }
.bildseite { position: relative; }
.bildseite > img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--rund); box-shadow: var(--schatten); }
.bildseite > img.hoch { aspect-ratio: 4 / 5; }
.bildseite .bild-klein { position: absolute; right: -4%; bottom: -9%; width: 46%; aspect-ratio: 1; object-fit: cover; border-radius: 22px; border: 6px solid var(--weiss); box-shadow: var(--schatten); }
.nebel .bildseite .bild-klein { border-color: var(--nebel); }
.plakette { position: absolute; left: -4%; top: 8%; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: var(--weiss); box-shadow: var(--schatten); font-weight: 600; font-size: 0.98rem; line-height: 1.3; color: var(--tinte); max-width: 250px; }
.plakette .symbol { width: 30px; height: 30px; color: var(--petrol); }
.textseite h2 + p, .textseite .kicker + h2 + p { margin-top: 1.4rem; }
.textseite p { max-width: 60ch; }

.haken { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 14px; }
.haken li { position: relative; padding-left: 42px; }
.haken li::before { content: ""; position: absolute; left: 0; top: 0.1em; width: 28px; height: 28px; border-radius: 50%; background: var(--eis) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316698a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7 10 16l-5-5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.dunkel .haken li::before { background-color: rgba(255,255,255,.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3f23c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7 10 16l-5-5'/%3E%3C/svg%3E"); }

/* Karten mit Symbol */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.karte { padding: 32px; border-radius: 22px; background: var(--nebel); border: 1px solid transparent; transition: transform .3s, box-shadow .3s, background-color .3s, border-color .3s; }
.nebel .karte { background: var(--weiss); }
.karte:hover { transform: translateY(-6px); background: var(--weiss); border-color: var(--linie); box-shadow: var(--schatten); }
.karte .zeichen { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(150deg, var(--petrol), var(--tief)); color: var(--warn); margin-bottom: 1.4rem; }
.karte .zeichen .symbol { width: 26px; height: 26px; }
.karten.zwei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.karte .haken { margin-top: 1.2rem; gap: 12px; }
.dunkel .karte .haken li { color: #dcecf2; }
.karte h3 { font-size: 1.5rem; }
.karte p { margin-top: 0.6rem; color: var(--leise); font-size: 1.02rem; }
.dunkel .karte { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); backdrop-filter: blur(6px); }
.dunkel .karte:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); }
.dunkel .karte p { color: #a9c6d2; }
.dunkel .karte .zeichen { background: var(--warn); color: var(--tinte); }

/* Ablauf */
.schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; position: relative; }
.schritte li { counter-increment: schritt; position: relative; padding-top: 86px; }
.schritte li::before { content: counter(schritt); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--warn); color: var(--tinte); font-family: var(--schrift-eng); font-weight: 700; font-size: 1.9rem; z-index: 1; }
.schritte li::after { content: ""; position: absolute; top: 30px; left: 62px; right: -28px; height: 2px; background: repeating-linear-gradient(to right, rgba(255,255,255,.35) 0 8px, transparent 8px 16px); }
.schritte li:last-child::after { display: none; }
.schritte p { margin-top: 0.6rem; color: #a9c6d2; font-size: 1.02rem; }
.abschnitt:not(.dunkel) .schritte li::before { background: var(--petrol); color: var(--weiss); }
.abschnitt:not(.dunkel) .schritte li::after { background: repeating-linear-gradient(to right, var(--linie) 0 8px, transparent 8px 16px); }
.abschnitt:not(.dunkel) .schritte p { color: var(--leise); }

/* Fließtext für ausführliche Abschnitte */
.fliesstext { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 96px); }
.fliesstext .inhalt > * + h3 { margin-top: 2.2rem; }
.fliesstext .inhalt h3 { margin-bottom: 0.6rem; }
.fliesstext .inhalt p { color: #2c4654; }
.fliesstext .inhalt ul { padding-left: 1.2em; margin: 0 0 1em; color: #2c4654; }
.fliesstext .inhalt li { margin-bottom: 0.4em; }
.fliesstext .kopfzeile { position: sticky; top: 120px; align-self: start; margin-bottom: 0; }

/* Verwandte Seiten */
.verweise { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.verweis { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 26px; border-radius: 20px; background: var(--weiss); border: 1px solid var(--linie); color: var(--tinte); text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; }
.verweis:hover { transform: translateY(-4px); box-shadow: var(--schatten); border-color: transparent; color: var(--tinte); }
.verweis strong { display: block; font-family: var(--schrift-eng); font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.verweis span span { display: block; font-size: 0.95rem; color: var(--leise); margin-top: 4px; line-height: 1.4; }
.verweis .rundpfeil { background: var(--eis); color: var(--petrol); transition: background-color .25s, color .25s; }
.verweis:hover .rundpfeil { background: var(--warn); color: var(--tinte); }

/* Häufige Fragen */
.fragen { display: grid; gap: 14px; max-width: 58rem; }
.fragen.mitte { margin-inline: auto; }
.fragen details { border-radius: 18px; background: var(--weiss); border: 1px solid var(--linie); transition: box-shadow .3s, border-color .3s; }
.fragen details[open] { box-shadow: var(--schatten); border-color: transparent; }
.fragen summary { cursor: pointer; list-style: none; position: relative; padding: 24px 76px 24px 28px; font-weight: 600; font-size: 1.18rem; line-height: 1.35; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: var(--eis) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316698a' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform .3s, background-color .3s; }
.fragen details[open] summary::after { transform: rotate(45deg); background-color: var(--warn); }
.fragen .antwort { padding: 0 28px 26px; color: var(--leise); max-width: 70ch; }

/* Region */
.region { position: relative; isolation: isolate; color: var(--weiss); overflow: hidden; }
.region > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.region::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6,27,36,.94) 0%, rgba(10,46,61,.8) 50%, rgba(10,46,61,.45) 100%); }
.orte { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 2rem 0 0; padding: 0; max-width: 46rem; }
.orte li { padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); backdrop-filter: blur(6px); font-weight: 500; }

/* Anfrage */
.anfrage { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.anfrage h2 + p { margin-top: 1.4rem; }
.telefon-gross { display: inline-flex; align-items: center; gap: 16px; margin-top: 2rem; font-family: var(--schrift-eng); font-weight: 700; font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1; color: var(--weiss); text-decoration: none; }
.telefon-gross .symbol { width: 0.8em; height: 0.8em; color: var(--warn); }
.telefon-gross:hover { color: var(--warn); }
.telefon-zusatz { display: block; margin-top: 0.8rem; font-size: 1rem; color: #a9c6d2; }

.formular { background: var(--weiss); color: var(--tinte); border-radius: var(--rund); padding: clamp(26px, 3.4vw, 44px); box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
.formular h3 { font-size: 1.6rem; }
.formular > p { margin-top: 0.5rem; font-size: 1rem; color: var(--leise); }
.kurzcode { display: block; margin: 1.3rem 0; padding: 16px 18px; background: var(--nebel); border: 2px dashed var(--petrol); border-radius: 12px; font-family: Consolas, "Courier New", monospace; font-size: 0.98rem; color: var(--tief); overflow-wrap: anywhere; }
.felder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 0.95rem; }
.felder li { padding: 13px 16px; border-radius: 10px; background: var(--nebel); border: 1px solid var(--linie); color: var(--leise); }
.felder li.breit { grid-column: 1 / -1; }
[role="tabpanel"][hidden] { display: none; }

/* Angaben, Galerie, Rechtstexte */
.angaben { margin: 0; }
.angaben div { display: grid; grid-template-columns: minmax(140px, 0.5fr) 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.angaben div:first-child { border-top: 1px solid var(--linie); }
.angaben dt { color: var(--leise); }
.angaben dd { margin: 0; font-weight: 500; }
.mentor { display: flex; align-items: center; gap: 20px; margin-top: 2.6rem; padding: 18px 24px 18px 18px; border-radius: 22px; background: var(--weiss); border: 1px solid var(--linie); max-width: 32rem; }
.mentor img { width: 88px; height: 88px; flex: none; border-radius: 50%; object-fit: cover; border: 4px solid var(--eis); }
.mentor strong { display: block; font-family: var(--schrift-eng); font-size: 1.4rem; font-weight: 600; line-height: 1.1; }
.mentor .rolle { display: block; margin-top: 2px; font-size: 0.92rem; font-weight: 600; color: var(--petrol); }
.mentor p { margin-top: 0.4rem; font-size: 0.98rem; line-height: 1.5; color: var(--leise); }
.galerie { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 18px; }
.galerie img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; }
.rechtstext { max-width: 46rem; }
.rechtstext h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin-top: 2.6rem; margin-bottom: 0.8rem; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext ul { padding-left: 1.3em; margin: 0 0 1em; }
.rechtstext li { margin-bottom: 0.35em; }
.entwurf ul { margin-top: 0.4em; }
.entwurf p + p { margin-top: 0.6em; }
.entwurf { border-left: 6px solid var(--warn-dunkel); background: var(--nebel); padding: 20px 24px; border-radius: 0 14px 14px 0; margin-bottom: 2.4rem; font-size: 1rem; }

/* ---------- Blog (nur in WordPress) ---------- */
.beitraege { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.beitrag-karte { display: flex; flex-direction: column; border-radius: var(--rund); overflow: hidden; background: var(--weiss); border: 1px solid var(--linie); color: var(--tinte); text-decoration: none; transition: transform .3s, box-shadow .3s, border-color .3s; }
.beitrag-karte:hover { transform: translateY(-6px); box-shadow: var(--schatten); border-color: transparent; color: var(--tinte); }
.beitrag-bild { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(150deg, var(--petrol), var(--tief)); }
.beitrag-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.beitrag-karte:hover .beitrag-bild img { transform: scale(1.05); }
.beitrag-bild img.platzhalter { width: 64px; height: auto; object-fit: contain; opacity: .45; }
.beitrag-text { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 24px 26px 26px; }
.beitrag-text time { font-size: 0.92rem; font-weight: 600; color: var(--petrol); }
.beitrag-text strong { font-family: var(--schrift-eng); font-size: 1.55rem; font-weight: 600; line-height: 1.15; hyphens: auto; -webkit-hyphens: auto; }
.beitrag-text .auszug { font-size: 1rem; line-height: 1.55; color: var(--leise); }
.beitrag-text .mehr { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-weight: 600; color: var(--petrol); }
.beitrag-text .mehr .symbol { transition: transform .2s; }
.beitrag-karte:hover .mehr .symbol { transform: translateX(5px); }

.hero h1.beitrag-titel { font-size: clamp(2rem, 3.6vw, 3.2rem); max-width: 32ch; line-height: 1.08; overflow-wrap: normal; word-break: normal; }
.brotkrumen li[aria-current] { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beitrag-meta { margin-top: 1.2rem; font-weight: 500; color: #cfe3ea; }
.beitrag-inhalt { max-width: 46rem; margin-inline: auto; overflow-wrap: break-word; }
.beitrag-inhalt h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 2em 0 0.6em; }
.beitrag-inhalt h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin: 1.6em 0 0.5em; }
.beitrag-inhalt h4 { font-family: var(--schrift-eng); font-size: 1.4rem; font-weight: 600; line-height: 1.2; margin: 1.6em 0 0.5em; }
.beitrag-inhalt > :first-child, .beitrag-inhalt .elementor > :first-child { margin-top: 0; }
.beitrag-inhalt ul, .beitrag-inhalt ol { padding-left: 1.3em; margin: 0 0 1em; }
.beitrag-inhalt li { margin-bottom: 0.4em; }
.beitrag-inhalt img { height: auto; border-radius: 18px; }
.beitrag-inhalt figure { margin: 1.6em 0; }
.beitrag-inhalt figcaption { margin-top: 0.5em; font-size: 0.92rem; color: var(--leise); }
.beitrag-inhalt blockquote { margin: 1.6em 0; padding: 18px 24px; border-left: 5px solid var(--warn-dunkel); border-radius: 0 14px 14px 0; background: var(--nebel); }
.beitrag-inhalt a { font-weight: 600; }
.beitrag-inhalt iframe, .beitrag-inhalt video { max-width: 100%; }
.beitrag-zurueck { max-width: 46rem; margin: 3rem auto 0; }

.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 48px; }
.pagination .page-numbers { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linie); font-weight: 600; color: var(--tinte); text-decoration: none; }
.pagination .page-numbers:hover { border-color: var(--petrol); color: var(--petrol); }
.pagination .page-numbers.current { background: var(--petrol); border-color: var(--petrol); color: var(--weiss); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.formular-wp { margin-top: 1.2rem; }

/* Formulare aus WordPress (Fluent Forms) im Design der Website.
   Der Zusatz .frm-fluent-form erhöht die Gewichtung, damit diese Regeln die Standard-Gestaltung des Plugins schlagen. */
.formular-wp .frm-fluent-form .ff-el-group { margin-bottom: 14px; }
.formular-wp .frm-fluent-form .ff-el-input--label { margin-bottom: 6px; }
.formular-wp .frm-fluent-form .ff-el-input--label label { font-family: var(--schrift); font-size: 0.95rem; font-weight: 600; color: var(--tinte); }
.formular-wp .frm-fluent-form .ff-el-is-required.asterisk-right label::after { color: #c0392b; }
.formular-wp .frm-fluent-form .ff-el-form-control {
  width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--linie); background: var(--nebel);
  font-family: var(--schrift); font-size: 1rem; line-height: 1.4; color: var(--tinte); box-shadow: none;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.formular-wp .frm-fluent-form .ff-el-form-control:focus { outline: none; background: var(--weiss); border-color: var(--petrol); box-shadow: 0 0 0 4px rgba(22, 105, 138, .15); }
.formular-wp .frm-fluent-form .ff-el-form-control::placeholder { color: #8aa0aa; opacity: 1; }
.formular-wp .frm-fluent-form textarea.ff-el-form-control { min-height: 84px; resize: vertical; }
.formular-wp .frm-fluent-form .ff-el-form-check-label { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; line-height: 1.5; color: var(--leise); cursor: pointer; }
.formular-wp .frm-fluent-form .ff-el-form-check-input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--petrol); }
/* Einwilligung: Fluent Forms baut die Zeile als Tabelle auf, hier als saubere Zeile mit Abstand */
.formular-wp .frm-fluent-form .ff-el-form-check-label.ff_tc_label { display: flex !important; align-items: flex-start; gap: 12px; }
.formular-wp .frm-fluent-form .ff_tc_checkbox { display: block !important; flex: none; padding: 0 !important; line-height: 1; }
.formular-wp .frm-fluent-form .ff_t_c { display: block !important; padding: 0 !important; margin: 0; }
.formular-wp .frm-fluent-form .ff_t_c a { color: var(--petrol); text-decoration: underline; text-underline-offset: 2px; }
.formular-wp .frm-fluent-form .ff_t_c a:hover { color: var(--tinte); }
/* Auswahl „Worum geht es?“ als schlanke Knöpfe nebeneinander (Radio-Kreis unsichtbar, aber per Tastatur bedienbar) */
.formular-wp .frm-fluent-form .ff-el-input--content:has(> .ff-el-form-check:not(.ff-el-tc)) { display: flex; flex-wrap: wrap; gap: 8px; }
.formular-wp .frm-fluent-form .ff-el-form-check:not(.ff-el-tc) { margin: 0; }
.formular-wp .frm-fluent-form .ff-el-form-check:not(.ff-el-tc) .ff-el-form-check-label {
  position: relative; display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--linie);
  background: var(--nebel); color: var(--tinte); font-size: 0.95rem; font-weight: 500; line-height: 1.3; transition: background-color .2s, border-color .2s, color .2s;
}
.formular-wp .frm-fluent-form .ff-el-form-check:not(.ff-el-tc) .ff-el-form-check-label:hover { border-color: var(--petrol); }
.formular-wp .frm-fluent-form .ff-el-form-check:not(.ff-el-tc) .ff-el-form-check-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.formular-wp .frm-fluent-form .ff-el-form-check:not(.ff-el-tc) .ff-el-form-check-label:has(input:checked) { border-color: var(--petrol); background: var(--petrol); color: var(--weiss); }
.formular-wp .frm-fluent-form .ff-el-form-check:not(.ff-el-tc) .ff-el-form-check-label:has(input:focus-visible) { outline: 3px solid var(--petrol); outline-offset: 2px; }
/* Kompakter: Name + Unternehmen und E-Mail + Telefon nebeneinander (auf schmalen Bildschirmen untereinander) */
.formular-wp .frm-fluent-form fieldset { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; min-width: 0; }
.formular-wp .frm-fluent-form fieldset > * { grid-column: 1 / -1; }
.formular-wp .frm-fluent-form fieldset > .ff-el-group:has(input[name="name"], input[name="unternehmen"], input[name="email"], input[name="telefon"]) { grid-column: auto; }
@media (max-width: 560px) {
  .formular-wp .frm-fluent-form fieldset > .ff-el-group:has(input[name="name"], input[name="unternehmen"], input[name="email"], input[name="telefon"]) { grid-column: 1 / -1; }
}
.formular-wp .frm-fluent-form .ff_submit_btn_wrapper { margin: 16px 0 0; }
.formular-wp .frm-fluent-form .ff-btn.ff-btn-submit {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 1.05em 1.8em; border: 0; border-radius: 999px;
  background: var(--warn); color: var(--tinte); font-family: var(--schrift); font-size: 1.05rem; font-weight: 600; line-height: 1.2;
  box-shadow: 0 10px 30px -10px rgba(207, 224, 31, .9); cursor: pointer; transition: background-color .2s, transform .2s;
}
.formular-wp .frm-fluent-form .ff-btn.ff-btn-submit:hover { background: var(--warn-dunkel); color: var(--tinte); transform: translateY(-2px); }
.formular-wp .frm-fluent-form .ff-btn.ff-btn-submit:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; }
.formular-wp .frm-fluent-form .ff-el-is-error .ff-el-form-control { border-color: #c0392b; background: #fff6f5; }
.formular-wp .frm-fluent-form .error, .formular-wp .frm-fluent-form .text-danger { margin-top: 6px; font-size: 0.88rem; color: #c0392b; }
.formular-wp .ff-message-success { padding: 22px 24px; border-radius: 16px; border: 1px solid var(--petrol); background: var(--eis); color: var(--tinte); font-weight: 500; box-shadow: none; }
.formular-wp .ff-errors-in-stack { margin-top: 14px; padding: 14px 18px; border-radius: 12px; background: #fff6f5; color: #c0392b; }

/* WordPress-Adminleiste (nur für angemeldete Nutzer sichtbar) */
.admin-bar .kopf { top: 32px; }
@media (max-width: 782px) { .admin-bar .kopf { top: 46px; } }
@media (max-width: 600px) { .admin-bar .kopf { top: 0; } }
/* Handy-Menü für angemeldete Nutzer unter die WordPress-Leiste schieben (unter 601 px scrollt die Leiste mit weg) */
@media (min-width: 783px) and (max-width: 980px) { .admin-bar .navi { top: 104px; } }
@media (min-width: 601px) and (max-width: 782px) { .admin-bar .navi { top: 118px; } }

/* ---------- Fußbereich ---------- */
.fuss { background: var(--nacht); color: #a9c6d2; padding-block: clamp(56px, 7vw, 96px) 28px; font-size: 1rem; }
.fuss a { color: #dcecf2; text-decoration: none; }
.fuss a:hover { color: var(--warn); }
.fuss-raster { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr 1fr; gap: 44px; }
.fuss .marke { color: var(--weiss); margin-bottom: 1.2rem; }
.fuss .marke .logo-weiss { display: block; }
.fuss h2 { font: 600 1rem var(--schrift); color: var(--weiss); margin-bottom: 1rem; letter-spacing: 0; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { padding: 4px 0; }
.fuss address { font-style: normal; line-height: 1.7; }
.fuss-ende { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: 0.92rem; }
.fuss-ende ul { display: flex; gap: 24px; }

.handy-leiste { display: none; }

/* ---------- Einblenden beim Scrollen (nur mit JavaScript) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-zeige] { opacity: 0; transform: translateY(18px); transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 60ms); }
  .js [data-zeige].sichtbar { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .band-spur { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ---------- Kleinere Bildschirme ---------- */
.kopf-innen > *, .navi a, .marke-name { white-space: nowrap; }

/* Platz im Kopf (fünf Menüpunkte in WordPress): Telefonnummer nur als Symbol, auf Tablets nur das Logo-Schild */
@media (max-width: 1320px) {
  .kopf-telefon span { display: none; }
}
@media (min-width: 981px) and (max-width: 1100px) {
  .marke-name { display: none; }
}

@media (max-width: 1180px) {
  .kopf-innen { gap: 18px; }
  .kopf-telefon span { display: none; }
  .navi > ul { gap: 2px; }
  .navi a { padding: 10px 9px; }
  .marke-name small { display: none; }
  .hero-innen { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .glaskarte { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; }
  .glaskarte img { width: 72px; height: 72px; }
  .glaskarte strong { font-size: 1.3rem; }
  .kopf .knopf { padding: 0.7em 1em; font-size: 0.95rem; }
}

/* Normen-Karten: auf mittleren Breiten ausgewogen statt einer einzelnen Karte in der letzten Reihe */
.normen.anzahl-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.normen.anzahl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nkarte .thema, .nkarte .kurz { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 1279px) {
  .normen.anzahl-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .normen.anzahl-5 .nkarte { grid-column: span 2; }
  .normen.anzahl-5 .nkarte:nth-child(4) { grid-column: 2 / 4; }
  .normen.anzahl-5 .nkarte:nth-child(5) { grid-column: 4 / 6; }
  .normen.anzahl-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .normen.anzahl-5 { grid-template-columns: repeat(2, 1fr); }
  .normen.anzahl-5 .nkarte, .normen.anzahl-5 .nkarte:nth-child(4) { grid-column: auto; }
  .normen.anzahl-5 .nkarte:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .normen.anzahl-5, .normen.anzahl-4 { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .menue-knopf { display: block; }
  .kopf .knopf, .kopf-telefon { display: none; }
  .navi { display: none; position: fixed; inset: 72px 0 0 0; overflow-y: auto; background: var(--nacht); color: var(--weiss); padding: 12px var(--rand) 120px; }
  /* Ohne backdrop-filter: Der Glas-Effekt der gescrollten Kopfleiste würde das feste Menü sonst auf die Höhe der Kopfleiste begrenzen */
  .kopf.menue-offen { background: var(--nacht); color: var(--weiss); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .kopf.menue-offen .kopf-innen { height: 72px; }
  .kopf.menue-offen .marke .logo-farbe { display: none; }
  .kopf.menue-offen .marke .logo-weiss { display: block; }
  .kopf.menue-offen .navi { display: block; }
  .navi > ul { flex-direction: column; gap: 0; }
  .navi > ul > li { border-bottom: 1px solid rgba(255,255,255,.12); }
  .navi > ul > li > a { font-family: var(--schrift-eng); font-size: 1.9rem; font-weight: 600; padding: 18px 0; border-radius: 0; }
  .navi > ul > li > a:hover, .navi > ul > li > a[aria-current], .kopf.fest .navi > ul > li > a:hover, .kopf.fest .navi > ul > li > a[aria-current] { background: none; color: var(--warn); }
  .navi .winkel { display: none; }
  .unter { position: static; opacity: 1; visibility: visible; transform: none; background: none; color: inherit; box-shadow: none; padding: 0 0 16px; min-width: 0; }
  .unter a { padding: 7px 0; color: #cfe3ea; }
  .unter a:hover { background: none; color: var(--warn); }

  /* Kopfleiste ist 88 px hoch: Inhalt beginnt knapp darunter statt mit großer Lücke */
  .hero-innen { grid-template-columns: 1fr; min-height: 0; padding-block: 112px 56px; }
  .hero.klein .hero-innen { padding-block: 112px 110px; }
  .leistungen, .bildtext, .anfrage, .fliesstext { grid-template-columns: 1fr; }
  .bildtext.umgekehrt > .bildseite { order: 0; }
  .fliesstext .kopfzeile { position: static; }
  .bildseite .bild-klein { right: 4%; }
  .plakette { left: 4%; }
  .zahlen { grid-template-columns: 1fr; }
  .schritte { grid-template-columns: 1fr 1fr; }
  .schritte li::after { display: none; }
  .galerie { grid-template-columns: 1fr 1fr; }
  .galerie img:first-child { grid-column: 1 / -1; }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .fakten li { border-left: 0; border-top: 1px solid var(--linie); padding: 22px 26px; }
  .fakten li:first-child { border-top: 0; }

  .nach-oben { bottom: 86px; right: 14px; width: 46px; height: 46px; }
  .handy-leiste { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; border-radius: 999px; overflow: hidden; box-shadow: 0 14px 40px -10px rgba(6,27,36,.6); }
  .handy-leiste a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 10px; font-weight: 600; text-decoration: none; }
  .handy-leiste .anrufen { background: var(--tief); color: var(--weiss); }
  .handy-leiste .anfragen { background: var(--warn); color: var(--tinte); }
  .fuss { padding-bottom: 110px; }
}

@media (max-width: 600px) {
  body { font-size: 1.06rem; }
  .schritte, .felder, .fuss-raster { grid-template-columns: 1fr; }
  .angaben div { grid-template-columns: 1fr; gap: 2px; }
  .knopfreihe .knopf { width: 100%; }
  .marke-name small { display: none; }
  .glaskarte { grid-template-columns: 76px 1fr auto; gap: 14px; }
  .glaskarte img { width: 76px; height: 76px; }
  .glaskarte strong { font-size: 1.35rem; }
  .lkarte { min-height: 520px; }
  .band { font-size: 1.1rem; padding: 12px 0; }
}

/* ==========================================================================
   Cookie-Banner (js/einwilligung.js, nur in WordPress)
   „Alle akzeptieren“ und „Nur notwendige“ sehen bewusst gleich aus (rechtlich gefordert: gleichwertige Wahl).
   ========================================================================== */
.einwilligung { position: fixed; left: 24px; bottom: 24px; z-index: 150; width: min(470px, calc(100vw - 48px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); display: flex; opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .35s; }
.einwilligung[hidden] { display: none; }
.einwilligung.ist-sichtbar { opacity: 1; transform: none; }
.einwilligung-karte { position: relative; overflow: auto; overscroll-behavior: contain; padding: 26px 26px 20px; border-radius: var(--rund); color: #dcecf2; background: radial-gradient(90% 70% at 100% 0%, rgba(22,105,138,.55), transparent 70%), linear-gradient(160deg, var(--tief), var(--nacht)); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 80px -20px rgba(6,27,36,.75); font-size: .98rem; line-height: 1.55; }
.einwilligung-karte::before { content: ""; position: absolute; left: 26px; top: 0; width: 64px; height: 4px; border-radius: 0 0 4px 4px; background: var(--warn); }
.einwilligung-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.einwilligung-titel { margin: 0; font: 700 1.7rem/1.1 var(--schrift-eng); color: var(--weiss); letter-spacing: .01em; }
.einwilligung-text { margin: 0; }
.einwilligung a { color: var(--weiss); text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.einwilligung a:hover { color: var(--warn); text-decoration-color: currentColor; }
.einwilligung-details { margin-top: 16px; display: grid; gap: 10px; }
.einwilligung-details[hidden] { display: none; }
.einwilligung-kategorie { padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.einwilligung-kategorie p { margin: 6px 0 0; font-size: .9rem; color: #b9d3dd; }
.einwilligung-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.einwilligung-name { font-weight: 600; color: var(--weiss); cursor: pointer; }
.einwilligung-immer { font-size: .85rem; font-weight: 600; color: var(--petrol-hell); }
.einwilligung-schalter { position: relative; flex: none; width: 50px; height: 28px; }
.einwilligung-schalter input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.einwilligung-schalter span { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.22); transition: background-color .2s; }
.einwilligung-schalter span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--weiss); transition: transform .2s; }
.einwilligung-schalter input:checked + span { background: var(--petrol-hell); }
.einwilligung-schalter input:checked + span::after { transform: translateX(22px); }
.einwilligung-schalter input:focus-visible + span { outline: 3px solid var(--warn); outline-offset: 2px; }
.einwilligung-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.einwilligung-knopf { width: 100%; padding: .85em 1em; font-size: 1rem; background: var(--weiss); color: var(--tinte); }
.einwilligung-knopf:hover { background: var(--warn); color: var(--tinte); }
.einwilligung-knopf[hidden], .einwilligung-mehr[hidden] { display: none; }
.einwilligung-knopf[data-aktion="speichern"] { grid-column: 1 / -1; background: var(--warn); }
.einwilligung-knopf[data-aktion="speichern"]:hover { background: var(--warn-dunkel); }
.einwilligung-mehr { grid-column: 1 / -1; justify-self: center; padding: 6px 10px; border: 0; background: none; color: var(--weiss); font: 600 .95rem var(--schrift); text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; cursor: pointer; }
.einwilligung-mehr:hover { color: var(--warn); }
.einwilligung :focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
.einwilligung-links { display: flex; justify-content: center; gap: 18px; margin: 12px 0 0; font-size: .85rem; }
.einwilligung-offen .nach-oben { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .einwilligung { transition: none; } }
@media (max-width: 980px) {
  .einwilligung { left: 12px; right: 12px; bottom: 12px; width: auto; max-height: calc(100dvh - 24px); }
  .einwilligung-offen .handy-leiste { display: none; }
}
@media (max-width: 380px) {
  .einwilligung-karte { padding: 22px 18px 16px; }
  .einwilligung-knoepfe { grid-template-columns: 1fr; }
}

/* YouTube-Platzhalter: Video lädt erst nach Klick */
.video-sperre { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: radial-gradient(80% 80% at 80% 0%, rgba(22,105,138,.6), transparent 70%), var(--nacht); color: #dcecf2; }
.video-sperre-innen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; overflow: auto; }
.video-sperre-symbol { width: 58px; height: auto; color: var(--warn); }
.video-sperre p { margin: 0; max-width: 520px; font-size: .92rem; line-height: 1.5; }
.video-sperre p.video-sperre-titel { margin: 0; font: 700 1.6rem/1.1 var(--schrift-eng); color: var(--weiss); }
.video-sperre a { color: var(--weiss); }
.video-sperre .knopf { padding: .8em 1.4em; font-size: 1rem; }
.video-sperre-link { font-size: .88rem; }
.video-sperre.ist-geladen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 600px) { .video-sperre { aspect-ratio: auto; min-height: 320px; } .video-sperre p { font-size: .86rem; } }