/* ==========================================================================
   Herbold Projekt & Consulting GmbH — herbold.css
   Template 3.0 · Mehrseitig · Liquid-Glass-Oberfläche
   CI: Logo-Rot #d6345c · Anthrazit · Hausschriften Oswald + Merriweather
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hausschriften
   -------------------------------------------------------------------------- */
@font-face { font-family:'Oswald'; src:url('../font/Oswald-Light.ttf')   format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Oswald'; src:url('../font/Oswald-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Oswald'; src:url('../font/Oswald-Medium.ttf')  format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Merriweather'; src:url('../font/Merriweather-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Merriweather'; src:url('../font/Merriweather-Bold.ttf')    format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

/* --------------------------------------------------------------------------
   2. Design-Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Marke */
  --red:        #d6345c;
  --red-deep:   #b31f45;
  --red-wash:   rgba(214, 52, 92, .10);
  --gold:       #ac8200;

  /* Neutrale Skala, leicht warm auf das Logo-Rot abgestimmt */
  --ink:        #262427;
  --ink-2:      #3b383b;
  --grey:       #6a6568;
  --grey-2:     #726c72;   /* 5,12:1 auf Weiß, 4,71:1 auf --tint — WCAG AA */
  --line:       #e4dfe1;
  --tint:       #f7f5f6;
  --tint-2:     #efebed;
  --white:      #ffffff;

  /* Liquid Glass */
  --glass:          rgba(255, 255, 255, .58);
  --glass-strong:   rgba(255, 255, 255, .76);
  --glass-edge:     rgba(255, 255, 255, .70);
  --glass-edge-low: rgba(38, 36, 39, .07);
  --glass-sheen:    rgba(255, 255, 255, .85);
  --glass-blur:     saturate(180%) blur(22px);
  --glass-blur-lg:  saturate(190%) blur(34px);

  --glass-dark:       rgba(30, 28, 31, .46);
  --glass-dark-edge:  rgba(255, 255, 255, .22);
  --glass-dark-sheen: rgba(255, 255, 255, .30);

  /* Typografie */
  --display: 'Oswald', 'Segoe UI', system-ui, sans-serif;
  --body:    'Merriweather', Georgia, 'Times New Roman', serif;

  --t--2: clamp(.70rem, .68rem + .10vw, .76rem);
  --t--1: clamp(.80rem, .77rem + .14vw, .88rem);
  --t-0:  clamp(.95rem, .92rem + .18vw, 1.05rem);
  --t-1:  clamp(1.10rem, 1.04rem + .28vw, 1.30rem);
  --t-2:  clamp(1.32rem, 1.20rem + .55vw, 1.72rem);
  --t-3:  clamp(1.60rem, 1.36rem + 1.05vw, 2.40rem);
  --t-4:  clamp(2.05rem, 1.60rem + 2.05vw, 3.60rem);

  /* Raster */
  --shell:   1180px;
  --shell-w: 1420px;
  --pad:     clamp(1.15rem, 4vw, 3rem);
  --band:    clamp(3.5rem, 7vw, 6.5rem);

  /* Konzentrische Radien */
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* Tiefe */
  --lift-1: 0 1px 2px rgba(38,36,39,.05), 0 4px 14px rgba(38,36,39,.06);
  --lift-2: 0 2px 6px rgba(38,36,39,.06), 0 14px 38px rgba(38,36,39,.09);
  --lift-3: 0 6px 18px rgba(38,36,39,.09), 0 34px 70px rgba(38,36,39,.14);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --spring: cubic-bezier(.34, 1.32, .48, 1);
  --head: 78px;
}

@media (max-width: 1000px) { :root { --head: 68px; } }
/* Auf sehr schmalen Geräten ist der Titelbereich hoch genug, dass die Köpfe
   nicht dicht unter die Kapsel rutschen — dort wird sie zusätzlich flacher. */
@media (max-width: 560px)  { :root { --head: 60px; } }

/* --------------------------------------------------------------------------
   3. Grundlagen
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head) + 24px);
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--white);
  color: var(--grey);
  font-family: var(--body);
  font-size: var(--t-0);
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Ruhiger Farbnebel, auf dem die Glasflächen überhaupt erst wirken */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58vw 58vw at 8% -12%,  rgba(214, 52, 92, .11), transparent 62%),
    radial-gradient(46vw 46vw at 98% 8%,   rgba(172, 130, 0, .08), transparent 60%),
    radial-gradient(70vw 46vw at 46% 108%, rgba(59, 56, 59, .09),  transparent 64%),
    var(--white);
}

img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--red); text-decoration: none; transition: color .2s var(--ease); }
a:hover, a:focus-visible { color: var(--red-deep); }

/* Links innerhalb von Fließtext werden unterstrichen. Rot gegen Textgrau
   ergibt nur 1,23:1 Kontrast, WCAG verlangt ohne zweites Merkmal 3:1. */
.prose a, .legal a, .consent a, .lede a, .checklist a,
.map-gate p a, .cta-strip p a, .step p a, .tile p a {
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: .07em;
}
.prose a:hover, .legal a:hover, .consent a:hover, .lede a:hover, .checklist a:hover,
.map-gate p a:hover, .cta-strip p a:hover, .step p a:hover, .tile p a:hover {
  text-decoration-thickness: .12em;
}

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .005em;
  line-height: 1.18;
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 { font-size: var(--t-4); font-weight: 300; letter-spacing: -.01em; }
h2 { font-size: var(--t-3); font-weight: 300; }
h3 { font-size: var(--t-2); font-weight: 400; }
h4 { font-size: var(--t-1); font-weight: 500; }
h5 { font-size: var(--t-0); font-weight: 500; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; color: var(--ink-2); }
ul { margin: 0 0 1.2em; padding: 0; list-style: none; }
figure, dl, dd, blockquote { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
::selection { background: var(--red); color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 3000;
  background: var(--red); color: #fff;
  padding: .8rem 1.3rem; border-radius: var(--r-pill);
  font-family: var(--display); font-size: var(--t--1);
  letter-spacing: .1em; text-transform: uppercase;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }
.shell--wide { max-width: var(--shell-w); }
.shell--narrow { max-width: 820px; }

.band { padding-block: var(--band); position: relative; }
.band--tight { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }
.band--tint { background: var(--tint); }

.stack > * + * { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.grid { display: grid; gap: clamp(1.25rem, 2.6vw, 2.25rem); }

/* --------------------------------------------------------------------------
   5. Typografische Bausteine
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--display); font-weight: 500;
  font-size: var(--t--1); letter-spacing: .24em; text-transform: uppercase;
  color: var(--red);
  margin: 0 0 1rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; flex: none; }

.lede { font-size: var(--t-1); line-height: 1.68; color: var(--grey); }

.prose { max-width: 68ch; }

/* Aufzählungen im Fließtext und in den Rechtstexten.
   Global gilt list-style: none — richtig für Navigation, Kacheln und
   Kontaktkarten, aber eine Aufzählung im Text sähe damit wie umgebrochener
   Fließtext aus. Der Strich in Logo-Rot ist zurückhaltender als ein Punkt und
   nimmt die Akzentlinie der Startseiten-Kacheln auf. */
.prose ul, .legal ul { padding: 0; }
.prose ul li, .legal ul li { position: relative; padding-left: 1.5em; margin: .45em 0; }
.prose ul li::before, .legal ul li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: .65em; height: 2px; background: var(--red); border-radius: 1px;
}
.prose p { text-align: justify; hyphens: auto; }
.prose h3, .prose h4 { margin-top: 2.2em; }
.prose > :first-child { margin-top: 0; }
@media (max-width: 640px) { .prose p { text-align: left; } }

.head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .eyebrow::after { content: ""; width: 26px; height: 2px; background: currentColor; flex: none; }

/* --------------------------------------------------------------------------
   6. Liquid Glass
   -------------------------------------------------------------------------- */
.glass {
  position: relative;
  isolation: isolate;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    inset 0 -1px 0 rgba(38,36,39,.05),
    var(--lift-2);
}

/* Spiegelnder Lichtlauf über der Kante */
.glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(148deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 26%, rgba(255,255,255,0) 52%),
    radial-gradient(120% 80% at 88% 4%, rgba(255,255,255,.42), transparent 58%);
}

.glass--strong { background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg); }
.glass--flush  { box-shadow: inset 0 1px 0 var(--glass-sheen), var(--lift-1); }

/* Dunkles Glas — über Bildmaterial */
.glass--dark {
  background: var(--glass-dark);
  border-color: var(--glass-dark-edge);
  color: rgba(255,255,255,.86);
  box-shadow:
    inset 0 1px 0 var(--glass-dark-sheen),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 10px 34px rgba(0,0,0,.28);
}
.glass--dark::before {
  background:
    linear-gradient(148deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,0) 55%),
    radial-gradient(120% 80% at 88% 2%, rgba(255,255,255,.20), transparent 60%);
}
.glass--dark h1, .glass--dark h2, .glass--dark h3,
.glass--dark h4, .glass--dark h5, .glass--dark strong { color: #fff; }

/* --------------------------------------------------------------------------
   7. Schaltflächen
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--display); font-weight: 500;
  font-size: var(--t--1); letter-spacing: .12em; text-transform: uppercase;
  line-height: 1;
  padding: 1.05rem 1.9rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  isolation: isolate;
  transition: transform .3s var(--spring), background-color .25s var(--ease),
              color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

.btn--primary {
  background: linear-gradient(180deg, #e04466 0%, var(--red) 55%, var(--red-deep) 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 6px 20px rgba(214,52,92,.34);
}
.btn--primary:hover, .btn--primary:focus-visible {
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 30px rgba(214,52,92,.42);
}

.btn--glass {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-edge);
  color: var(--ink);
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--lift-1);
}
.btn--glass:hover, .btn--glass:focus-visible { color: var(--red); box-shadow: inset 0 1px 0 var(--glass-sheen), var(--lift-2); }

.btn--onglass {
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: rgba(255,255,255,.34);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 8px 26px rgba(0,0,0,.22);
}
.btn--onglass:hover, .btn--onglass:focus-visible { background: rgba(255,255,255,.26); color: #fff; }

/* Kompakte Fassung für Schaltflächen in Seitenspalten */
.btn--tight { padding: .8rem 1.4rem; }

/* Inline statt Flex, damit der Pfeil dem letzten Wort folgt und bei
   mehrzeiligen Beschriftungen nicht rechts abseits steht. */
.arrow-link {
  display: inline;
  font-family: var(--display); font-weight: 500;
  font-size: var(--t--1); letter-spacing: .1em; text-transform: uppercase;
  color: var(--red);
  line-height: 1.5;
}
.arrow-link svg {
  display: inline-block; vertical-align: -.16em;
  margin-left: .5rem;
  width: 1em; height: 1em;
  transition: transform .3s var(--spring);
}
.arrow-link:hover svg, .arrow-link:focus-visible svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   8. Kopfbereich — schwebende Glaskapsel
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  padding: clamp(.6rem, 1.4vw, 1.1rem) 0;
  transition: padding .4s var(--ease);
}
.site-header.is-stuck { padding-top: clamp(.4rem, .9vw, .7rem); padding-bottom: clamp(.4rem, .9vw, .7rem); }

.nav-capsule {
  width: 100%;
  max-width: var(--shell-w);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: .4rem .5rem .4rem 1.35rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.42);
  -webkit-backdrop-filter: saturate(185%) blur(20px);
  backdrop-filter: saturate(185%) blur(20px);
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 22px rgba(38,36,39,.10);
  transition: background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
/* Über dem Titelbild dunkel getönt, damit das weiße Logo trägt */
.site-header.is-over-media .nav-capsule {
  background: rgba(28,26,29,.34);
  border-color: rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 26px rgba(0,0,0,.22);
}
/* Deckkräftiger als das übrige Glas: die Kapsel schwebt auch über dunklem
   Bildmaterial und muss die Schrift darauf tragen. */
.site-header.is-stuck .nav-capsule {
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: saturate(190%) blur(26px);
  backdrop-filter: saturate(190%) blur(26px);
  border-color: rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 26px rgba(38,36,39,.14);
}

/* Die Kapsel wird außen von den Rändern abgesetzt */
.site-header > .shell { padding-inline: var(--pad); }

.brand { display: block; flex: none; line-height: 0; }
.brand img { width: clamp(118px, 11.2vw, 152px); }
@media (max-width: 560px) { .brand img { width: 104px; } }
.brand__light { display: none; }
.site-header.is-over-media .brand__light { display: block; }
.site-header.is-over-media .brand__dark  { display: none; }

.mainnav > ul { display: flex; align-items: center; gap: clamp(.1rem, .7vw, .5rem); margin: 0; }
.mainnav a {
  position: relative;
  display: block;
  padding: .58rem clamp(.5rem, .95vw, .95rem);
  border-radius: var(--r-pill);
  font-family: var(--display); font-weight: 400;
  font-size: clamp(.71rem, .60rem + .27vw, .84rem);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.site-header.is-over-media .mainnav a { color: rgba(255,255,255,.9); }
.mainnav a:hover, .mainnav a:focus-visible { color: var(--red); background: var(--red-wash); }
.site-header.is-over-media .mainnav a:hover,
.site-header.is-over-media .mainnav a:focus-visible { color: #fff; background: rgba(255,255,255,.16); }

/* Der aktive Menüpunkt steht auf hellrosa Grund: --red käme dort nur auf
   4,13:1, --red-deep erreicht 5,82:1. */
.mainnav a[aria-current="page"] {
  color: var(--red-deep);
  background: var(--red-wash);
  box-shadow: inset 0 0 0 1px rgba(214,52,92,.18);
}
.site-header.is-over-media .mainnav a[aria-current="page"] {
  color: #fff;
  background: rgba(255,255,255,.20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}

.mainnav a.nav-cta {
  margin-left: .45rem;
  padding: .68rem 1.3rem;
  background: linear-gradient(180deg, #e04466, var(--red-deep));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 4px 14px rgba(214,52,92,.32);
}
.mainnav a.nav-cta:hover, .mainnav a.nav-cta:focus-visible,
.site-header.is-over-media .mainnav a.nav-cta { color: #fff; background: linear-gradient(180deg, #e04466, var(--red-deep)); }
.mainnav a.nav-cta[aria-current="page"] { box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 0 0 2px rgba(214,52,92,.28); }

.navtoggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; padding: 0; flex: none;
  border-radius: var(--r-pill);
}
.navtoggle span, .navtoggle span::before, .navtoggle span::after {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform .35s var(--spring), background-color .25s var(--ease), opacity .2s var(--ease);
}
.navtoggle span { position: relative; }
.navtoggle span::before, .navtoggle span::after { content: ""; position: absolute; left: 0; }
.navtoggle span::before { top: -7px; }
.navtoggle span::after  { top: 7px; }
.site-header.is-over-media .navtoggle span,
.site-header.is-over-media .navtoggle span::before,
.site-header.is-over-media .navtoggle span::after { background: #fff; }
.navtoggle[aria-expanded="true"] span { background: transparent !important; }
.navtoggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1000px) {
  .navtoggle { display: flex; }
  .nav-capsule { padding: .5rem .5rem .5rem 1.15rem; }
  .mainnav {
    position: absolute;
    top: calc(100% + .6rem); left: 0; right: 0;
    border-radius: var(--r-lg);
    background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: saturate(190%) blur(30px);
    backdrop-filter: saturate(190%) blur(30px);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), var(--lift-3);
    opacity: 0; visibility: hidden;
    transform: translateY(-10px) scale(.985);
    transform-origin: top center;
    transition: opacity .3s var(--ease), transform .35s var(--spring), visibility .35s;
    max-height: calc(100dvh - var(--head) - 2rem);
    overflow-y: auto;
  }
  .mainnav.is-open { opacity: 1; visibility: visible; transform: none; }
  .mainnav > ul { flex-direction: column; align-items: stretch; gap: .15rem; padding: .7rem; }
  .site-header .mainnav a,
  .site-header.is-over-media .mainnav a {
    color: var(--ink);
    padding: .95rem 1.1rem;
    font-size: .95rem;
    border-radius: var(--r-sm);
    text-align: left;
  }
  .site-header .mainnav a[aria-current="page"],
  .site-header.is-over-media .mainnav a[aria-current="page"] {
    color: var(--red-deep); background: var(--red-wash); box-shadow: none;
  }
  .site-header .mainnav a.nav-cta,
  .site-header.is-over-media .mainnav a.nav-cta {
    color: #fff; margin: .5rem 0 0; text-align: center; border-radius: var(--r-pill);
  }
}

/* --------------------------------------------------------------------------
   9. Titelbereich der Startseite
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
/* Der Verlauf von links trägt die Schrift: sie liegt über dem dunklen Anzug
   und dem hellen Pflaster, beides braucht Abstand zum Weiß. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(20,18,21,.80) 0%, rgba(20,18,21,.34) 38%, rgba(20,18,21,0) 68%),
    linear-gradient(to right, rgba(20,18,21,.60) 0%, rgba(20,18,21,.16) 44%, rgba(20,18,21,0) 70%),
    linear-gradient(to bottom, rgba(20,18,21,.42) 0%, rgba(20,18,21,0) 26%);
}
.hero__inner {
  width: 100%; max-width: var(--shell-w);
  margin-inline: auto;
  padding: 0 var(--pad) clamp(7rem, 15vh, 10rem);
}
.hero__claim { max-width: 34rem; }
.hero__eyebrow {
  font-family: var(--display); font-weight: 500;
  font-size: var(--t--1); letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.74);
  margin: 0 0 1.1rem;
}
.hero h1 {
  color: #fff; font-weight: 300;
  font-size: clamp(2.15rem, 1.3rem + 3.4vw, 4.15rem);
  line-height: 1.06; letter-spacing: -.02em;
  margin: 0 0 1.1rem;
  text-shadow: 0 2px 40px rgba(0,0,0,.45);
}
.hero__sub {
  color: rgba(255,255,255,.9);
  font-size: var(--t-1); line-height: 1.6;
  max-width: 40ch; margin: 0 0 2rem;
  text-shadow: 0 1px 20px rgba(0,0,0,.5);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Auf schmalen Bildschirmen wird der Titelbereich flacher: bei gleichem
   object-fit zeigt ein niedrigerer Ausschnitt mehr Bildbreite — sonst fällt
   eine der beiden Personen aus dem Anschnitt. */
@media (max-width: 760px) {
  .hero { min-height: 74svh; }
  .hero__media img { object-position: 50% 22%; }
  .hero__inner { padding-bottom: clamp(3.5rem, 9vh, 5.5rem); }
  .hero__claim { max-width: none; }
}

/* --------------------------------------------------------------------------
   10. Einstiegskarten — heben sich über die Bildkante
   -------------------------------------------------------------------------- */
.entry {
  position: relative;
  z-index: 2;
  margin-top: clamp(-6rem, -8vh, -4rem);
  padding-bottom: var(--band);
}
/* Vier Leistungsfelder in zwei Reihen: vier gleich schmale Spalten ließen die
   Karten dünn wirken, zwei mal zwei gibt jedem Feld Fläche. */
.entry__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
  align-items: stretch;
}
@media (max-width: 760px) { .entry__grid { grid-template-columns: 1fr; } }
/* Auf schmalen Bildschirmen nur leicht überlappen, sonst verdeckt die erste
   Karte die unterste Leistungs-Pille im Titelbereich. */
@media (max-width: 760px) { .entry { margin-top: -2rem; } }

/* Dieselbe Glasmischung wie die Leiste am Seitenkopf: 42 statt 58 Prozent
   Weiß, gleiche Unschärfe und Sättigung. Die Kacheln stehen damit im selben
   Verhältnis zum Hintergrund wie die Navigationskapsel. */
.tile {
  display: flex; flex-direction: column;
  padding: clamp(1.8rem, 2.8vw, 2.6rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(255,255,255,.42);
  -webkit-backdrop-filter: saturate(185%) blur(20px);
  backdrop-filter: saturate(185%) blur(20px);
  border-color: rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 22px rgba(38,36,39,.10);
  transition: transform .4s var(--spring), box-shadow .4s var(--ease), background-color .4s var(--ease);
}
/* Beim Überfahren tritt die Kachel hervor und wird etwas dichter. */
.tile:hover, .tile:focus-within {
  transform: translateY(-6px);
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 1px 0 var(--glass-sheen), inset 0 -1px 0 rgba(38,36,39,.05), var(--lift-3);
}
/* Akzentlinie läuft beim Überfahren über die obere Kante */
.tile::after {
  content: "";
  position: absolute; inset: 0 auto auto 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--red), var(--gold));
  transition: width .55s var(--ease);
}
.tile:hover::after, .tile:focus-within::after { width: 100%; }
.tile__mark {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 17px;
  margin-bottom: 1.35rem;
  background: linear-gradient(160deg, rgba(214,52,92,.16), rgba(214,52,92,.06));
  border: 1px solid rgba(214,52,92,.18);
  color: var(--red);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.tile__mark svg { width: 25px; height: 25px; }
.tile h2, .tile h3 { font-size: var(--t-2); margin-bottom: .6rem; }
.tile p { flex: 1; font-size: var(--t-0); }
.tile .arrow-link { margin-top: 1.6rem; }

/* Zweispalter — kollabieren auf schmalen Bildschirmen */
.split { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.split--text  { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.split--form  { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.split--media { align-items: center; }
@media (max-width: 900px) {
  .split, .split--text, .split--form { grid-template-columns: 1fr; }
}

/* Glasfläche mit Innenabstand */
.panel { padding: clamp(1.6rem, 3vw, 2.6rem); }

/* Bild mit weichen Ecken im Textfluss */
.figure-soft { width: 100%; border-radius: var(--r-lg); box-shadow: var(--lift-2); }

/* --------------------------------------------------------------------------
   11. Kopf der Unterseiten
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--head) + clamp(2.5rem, 6vw, 4.75rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
.page-head::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(45vw 40vw at 82% -30%, rgba(214,52,92,.14), transparent 62%),
    radial-gradient(40vw 34vw at 4% 130%, rgba(172,130,0,.09), transparent 60%),
    var(--tint);
}

/* Kopfbild: das Foto liegt hinter dem Verlauf, nicht daneben. Der Verlauf
   deckt links fast vollständig ab, damit die anthrazitfarbene Schrift ihren
   Kontrast behält, und öffnet sich nach rechts auf das Bild. */
/* Das Bildband ist immer gleich hoch und sitzt an der Unterkante. Würde es
   den ganzen Kopfbereich füllen, zeigte es je Seite einen anderen Ausschnitt:
   die Kopfhöhe hängt daran, wie viele Zeilen Überschrift und Vorspann
   brauchen — von 422 px bei „Partner" bis 526 px bei „Unternehmen". Bei
   gleichem Foto sähe der Anschnitt dann unterschiedlich aus.
   Die Maske blendet das Bild nach oben aus, damit an der Oberkante des Bandes
   keine Kante steht. min-height hält den Kopf mindestens so hoch wie das
   Band, sonst würde es oben angeschnitten. */
/* Alle Kopfbereiche mit Foto sind gleich hoch. Ohne feste Höhe richtet sich
   der Kopf nach dem Text und wird je Seite anders hoch — gemessen von 422 px
   bei „Partner" bis 526 px bei „Unternehmen", was neben dem gleichen Bild
   auffällt. Der Wert wächst mit der Fensterbreite, weil Schrift und Abstände
   das auch tun, und liegt überall über dem Bedarf der längsten Seite. */
.page-head--media {
  min-height: clamp(430px, calc(246px + 21.5vw), 534px);
  display: flex; align-items: flex-end;
}
.page-head--media > .shell { width: 100%; }
/* Das Band bleibt niedriger als der Kopf, sonst würde es oben angeschnitten
   und der Anschnitt wiche doch wieder ab. */
.page-head__media { position: absolute; inset: auto 0 0 0; height: 420px; z-index: -2; }
.page-head__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 38%;
  filter: saturate(.82);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
}
.page-head--media::after {
  background:
    linear-gradient(to right,
      var(--tint) 0%,
      rgba(247,245,246,.96) 40%,
      rgba(247,245,246,.86) 62%,
      rgba(247,245,246,.46) 84%,
      rgba(247,245,246,.24) 100%),
    linear-gradient(to bottom, rgba(247,245,246,.55) 0%, rgba(247,245,246,0) 34%),
    linear-gradient(to top, var(--tint) 0%, rgba(247,245,246,0) 26%);
}
/* Über dem Foto steht der Vorspann in --ink-2 statt --grey: auf dem hellsten
   Bildausschnitt käme --grey nur auf 2,6:1, WCAG verlangt 4,5:1. */
.page-head--media .lede { color: var(--ink-2); }

/* Auf schmalen Bildschirmen läuft die Schrift über die ganze Breite — dort
   deckt der Verlauf gleichmäßig ab, sonst stünde sie teils auf dem Foto. */
@media (max-width: 860px) {
  .page-head--media { min-height: 0; display: block; }
  /* Schmal deckt der Verlauf gleichmäßig ab; das Band darf hier den ganzen
     Kopfbereich füllen, ein einheitlicher Anschnitt fällt nicht auf. */
  .page-head__media { inset: 0; height: auto; }
  .page-head__media img { -webkit-mask-image: none; mask-image: none; }
  .page-head--media::after {
    background:
      linear-gradient(to right, var(--tint) 0%, rgba(247,245,246,.90) 55%, rgba(247,245,246,.78) 100%),
      linear-gradient(to top, var(--tint) 0%, rgba(247,245,246,.30) 40%);
  }
  .page-head__media img { object-position: 50% 30%; }
}

@media print { .page-head__media { display: none; } }
/* 22ch brachen den längsten Titel um: "Herbold Projekt & Consulting GmbH" hat
   33 Zeichen und stand dadurch auf zwei Zeilen. Die Grenze hält lange
   Überschriften lesbar, muss den Firmennamen aber tragen. Auf schmalen
   Bildschirmen bricht er weiter um — dort ist das richtig, und balance
   verteilt die Zeilen dann gleichmäßig statt ein Wort allein zu lassen. */
.page-head h1 { margin-bottom: .35em; max-width: 34ch; text-wrap: balance; }
.page-head .lede { max-width: 58ch; }
.page-head + .band { padding-top: clamp(2.25rem, 4.5vw, 3.75rem); }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 1.4rem;
  font-family: var(--display);
  font-size: var(--t--1); letter-spacing: .14em; text-transform: uppercase;
  color: var(--grey-2);
}
.crumbs a { color: var(--grey-2); }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--red); }
.crumbs li { display: flex; align-items: center; gap: .5rem; }
.crumbs li + li::before { content: "›"; color: var(--line); }
.crumbs [aria-current="page"] { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   12. Kontaktkanäle
   -------------------------------------------------------------------------- */
.channels { display: grid; gap: 1.35rem; margin: 0; }
.channel { display: flex; align-items: flex-start; gap: 1rem; }
.channel__icon {
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(214,52,92,.16), rgba(214,52,92,.06));
  border: 1px solid rgba(214,52,92,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  color: var(--red);
}
.channel__icon svg { width: 19px; height: 19px; }
.channel__label {
  display: block;
  font-family: var(--display); font-size: var(--t--1);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--grey-2); margin-bottom: .1rem;
}
.channel__value {
  font-family: var(--display); font-size: var(--t-1); font-weight: 400;
  color: var(--ink); line-height: 1.35; word-break: break-word;
}
a.channel__value:hover, a.channel__value:focus-visible { color: var(--red); }
.glass--dark .channel__icon { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); color: #f2879f; }
.glass--dark .channel__label { color: rgba(255,255,255,.6); }
.glass--dark .channel__value { color: #fff; }
.glass--dark a.channel__value:hover { color: #f2879f; }

/* Kontaktstreifen am Seitenfuß der Unterseiten */
.cta-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.75rem, 3.4vw, 2.75rem) clamp(1.75rem, 3.4vw, 3rem);
  border-radius: var(--r-xl);
}
.cta-strip h2 { font-size: var(--t-2); margin-bottom: .35rem; }
.cta-strip p { margin: 0; }
.cta-strip__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 820px) {
  .cta-strip { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   13. Projekte-Schaufenster
   -------------------------------------------------------------------------- */
/* Die Objektfotos liegen nur in 650 Pixel Breite vor. Über die ganze
   Textbreite gezogen würden sie fast auf das Doppelte hochgerechnet und
   wirkten unscharf — daher bleibt das Schaufenster schmal und steht mittig. */
.slider { position: relative; max-width: 660px; margin-inline: auto; }
.slider__viewport {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--tint-2);
  box-shadow: var(--lift-3);
}
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .65s var(--ease); }
.slide.is-active { position: relative; opacity: 1; visibility: visible; }
.slide__img { aspect-ratio: 4 / 3; width: 100%; }
.slide__img img { width: 100%; height: 100%; object-fit: cover; }
.slide__body {
  position: absolute;
  inset: auto clamp(.75rem, 2vw, 1.25rem) clamp(.75rem, 2vw, 1.25rem);
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.25rem, 2.4vw, 1.8rem);
  border-radius: var(--r);
  background: rgba(28,26,29,.42);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 10px 30px rgba(0,0,0,.26);
  color: rgba(255,255,255,.82);
}
.slide__body h3 { color: #fff; font-size: var(--t-1); margin-bottom: .6rem; }
.slide__facts { display: grid; gap: .2rem; font-family: var(--display); font-size: var(--t--1); letter-spacing: .04em; margin: 0; }
.slide__facts div { display: flex; justify-content: space-between; gap: 1rem; }
.slide__facts dt { color: rgba(255,255,255,.6); }
.slide__facts dd { margin: 0; color: #fff; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

.slider__controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.15rem; }
.slider__dots { display: flex; flex-wrap: wrap; gap: .45rem; }
.slider__dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line); cursor: pointer;
  transition: background-color .25s var(--ease), transform .3s var(--spring);
}
.slider__dots button.is-active { background: var(--red); transform: scale(1.4); }
.slider__nav { display: flex; gap: .5rem; }
.slider__nav button {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--lift-1);
  color: var(--ink); cursor: pointer;
  transition: color .25s var(--ease), transform .3s var(--spring), box-shadow .25s var(--ease);
}
.slider__nav button:hover, .slider__nav button:focus-visible { color: var(--red); transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--glass-sheen), var(--lift-2); }
.slider__nav svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   14. Vorteilsliste, Beispielrechnung, Ablaufschritte
   -------------------------------------------------------------------------- */
.quote {
  border-left: 3px solid var(--red);
  padding-left: clamp(1rem, 2.4vw, 1.6rem);
  margin-bottom: 2rem;
}
.quote h2, .quote h3 { margin-bottom: 0; font-weight: 300; font-style: italic; }

.checklist { display: grid; gap: .9rem; margin: 0; }
.checklist > li { display: flex; align-items: flex-start; gap: .9rem; line-height: 1.66; }
.checklist > li > svg { flex: none; width: 20px; height: 20px; margin-top: .32em; color: var(--red); }
.checklist ul { margin: .3rem 0 0; }
.checklist ul li { padding-left: 1rem; position: relative; }
.checklist ul li::before { content: "–"; position: absolute; left: 0; color: var(--grey-2); }

.calc { display: grid; margin: 0; }
.calc__row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .72rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--display); font-size: var(--t-0);
}
.calc__row dt { color: var(--grey); }
.calc__row dd { margin: 0; color: var(--ink); font-weight: 500; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc__row--total {
  border-bottom: 0; border-top: 2px solid var(--ink);
  margin-top: .3rem; padding-top: 1rem; font-size: var(--t-1);
}
.calc__row--total dt, .calc__row--total dd { color: var(--red); font-weight: 500; }
.calc__note { font-size: var(--t--1); color: var(--grey-2); margin: .8rem 0 0; }
@media (max-width: 430px) {
  .calc__row { flex-direction: column; gap: .05rem; }
  .calc__row dd { text-align: left; white-space: normal; }
  .slide__facts div { flex-direction: column; gap: 0; }
  .slide__facts dd { text-align: left; }
}

.steps { grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
.step { position: relative; text-align: center; padding: clamp(1.5rem, 2.6vw, 2.1rem); border-radius: var(--r-lg); }
.step__icon {
  width: 74px; height: 74px; margin: 0 auto 1.2rem;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,255,255,.45));
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 #fff, var(--lift-1);
  color: var(--red);
}
.step__icon svg { width: 30px; height: 30px; }
.step__num {
  display: block; font-family: var(--display); font-size: var(--t--1);
  letter-spacing: .22em; text-transform: uppercase; color: var(--red); margin-bottom: .35rem;
}
.step h3 { font-size: var(--t-1); margin-bottom: .7rem; }
.step p { text-align: center; font-size: var(--t--1); line-height: 1.72; }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   15. Team
   -------------------------------------------------------------------------- */
/* Die Spaltenzahl ergibt sich aus der Breite, nicht aus der Anzahl der
   Personen. Eine angebrochene letzte Reihe steht dadurch mittig statt links. */
.team-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 236px));
  justify-content: center;
}
@media (max-width: 520px) { .team-grid { grid-template-columns: minmax(0, 330px); } }

/* Die Karte dreht sich beim Anklicken und zeigt hinten die Kontaktdaten. */
.member {
  position: relative;
  perspective: 1400px;
  display: flex;
}
.member__inner {
  position: relative;
  flex: 1;
  display: flex;
  transform-style: preserve-3d;
  transition: transform .75s var(--ease);
}
.member.is-flipped .member__inner { transform: rotateY(180deg); }

.member__face {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: clamp(.85rem, 1.4vw, 1.15rem);
  border-radius: var(--r-lg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: box-shadow .4s var(--ease), visibility 0s linear .36s;
}
/* Die Rückseite liegt deckungsgleich über der Vorderseite und gibt der
   Karte keine eigene Höhe — die kommt von der Vorderseite mit dem Foto. */
.member__face--back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  visibility: hidden;
}
.member.is-flipped .member__face--back  { visibility: visible; }
.member.is-flipped .member__face--front { visibility: hidden; }

.member__photo {
  position: relative; overflow: hidden;
  border-radius: var(--r); aspect-ratio: 3 / 4;
  background: var(--tint-2);
  margin-bottom: 1.1rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.6), var(--lift-1);
}
.member__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform .7s var(--ease); }
.member:not(.is-flipped) .member__face--front:hover .member__photo img { transform: scale(1.045); }
.member h3 { font-size: var(--t-1); margin-bottom: .15rem; }
/* Lange Funktionsbezeichnungen wie „Geschäftsführender Gesellschafter" laufen
   über zwei Zeilen — daher engere Laufweite und ausgewogener Umbruch. */
.member small {
  display: block; font-family: var(--display); font-size: var(--t--1);
  letter-spacing: .1em; text-transform: uppercase; color: var(--red-deep);
  line-height: 1.45; text-wrap: balance;
}
.member__face--front small { margin-bottom: .9rem; }

/* Schaltfläche über der ganzen Vorderseite — die ganze Karte ist anklickbar. */
.member__toggle {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  border-radius: var(--r-lg);
}
.member__toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.member__hint {
  display: inline-flex; align-items: center; gap: .4rem;
  align-self: center;
  margin-top: auto;
  padding: .45rem 1rem;
  border-radius: var(--r-pill);
  background: var(--red-wash);
  border: 1px solid rgba(214,52,92,.18);
  font-family: var(--display); font-size: var(--t--1);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--red-deep);
  transition: background-color .3s var(--ease), transform .35s var(--spring);
}
.member__hint svg { width: .95em; height: .95em; }

.member__face--front:hover { box-shadow: inset 0 1px 0 var(--glass-sheen), var(--lift-3); }
.member__face--front:hover .member__hint,
.member__toggle:focus-visible ~ .member__hint { background: rgba(214,52,92,.18); transform: translateY(-2px); }

/* Rückseite */
.member__kontakt { display: grid; gap: .4rem; margin: 1.25rem 0 1.5rem; width: 100%; }

/* Die ganze Zeile ist die Schaltfläche, nicht nur die Textbreite: als reiner
   Textlink war das Ziel auf dem Handy nur 22 px hoch — man greift daneben und
   das Wählmenü öffnet sich nicht. WCAG 2.5.5 empfiehlt 44 px. */
.member__kontakt a {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; min-height: 48px;
  padding: .45rem .55rem;
  border-radius: var(--r-sm);
  font-family: var(--display);
  font-size: var(--t--1);
  line-height: 1.35;
  color: var(--ink);
  text-align: left;
  word-break: break-word;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.member__kontakt a:hover, .member__kontakt a:focus-visible { background: var(--red-wash); color: var(--red-deep); }

.member__kontakt-icon {
  flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 11px;
  background: linear-gradient(160deg, rgba(214,52,92,.16), rgba(214,52,92,.06));
  border: 1px solid rgba(214,52,92,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  color: var(--red);
}
.member__kontakt-icon svg { width: 16px; height: 16px; }

.member__close {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.2rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.6);
  border: 1px solid var(--line);
  font-family: var(--display); font-size: var(--t--1);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--grey);
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.member__close svg { width: .95em; height: .95em; }
.member__close:hover, .member__close:focus-visible { color: var(--red-deep); border-color: var(--red); }

/* Ohne 3D-Wunsch: die Rückseite blendet sich ein, statt sich zu drehen. */
@media (prefers-reduced-motion: reduce) {
  .member__inner, .member.is-flipped .member__inner { transform: none; }
  .member__face { -webkit-backface-visibility: visible; backface-visibility: visible; transition: none; }
  .member__face--back { transform: none; }
}

/* --------------------------------------------------------------------------
   16. Partner
   -------------------------------------------------------------------------- */
.partner-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: stretch; }
.partner-logo {
  display: grid; place-items: center;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border-radius: var(--r-lg);
  min-height: 170px;
  transition: transform .4s var(--spring), box-shadow .4s var(--ease);
}
.partner-logo img { max-height: 78px; width: auto; filter: grayscale(1); opacity: .62; transition: filter .4s var(--ease), opacity .4s var(--ease); }
.partner-logo:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 var(--glass-sheen), var(--lift-3); }
.partner-logo:hover img { filter: grayscale(0); opacity: 1; }

/* Negativlogo: dunkler Grund, sonst stünde Weiß auf Weiß. Sobald eine dunkle
   Fassung des Logos vorliegt, kann 'dunkel' in den Inhalten entfallen. */
.partner-logo--dark {
  background: var(--glass-dark);
  border-color: var(--glass-dark-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-dark-sheen),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 10px 34px rgba(0,0,0,.28);
}
.partner-logo--dark::before {
  background:
    linear-gradient(148deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,0) 55%),
    radial-gradient(120% 80% at 88% 2%, rgba(255,255,255,.20), transparent 60%);
}
/* Eine weiße Zeichnung braucht keine Entsättigung — nur die Deckkraft folgt
   dem Verhalten der übrigen Kacheln. */
.partner-logo--dark img { filter: none; opacity: .8; }
.partner-logo--dark:hover img { filter: none; opacity: 1; }

/* Gestapeltes Logo: Bildmarke über Schriftzug braucht mehr Höhe als ein
   einzeiliges Logo, sonst ist der Schriftzug darunter nicht mehr zu lesen. */
.partner-logo--tall { min-height: 200px; }
.partner-logo--tall img { max-height: 118px; }

/* --------------------------------------------------------------------------
   16a. Baum zum Zitat auf der Leibrenten-Seite
   -------------------------------------------------------------------------- */
.lebensbaum {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(214,52,92,.05), transparent 70%),
    radial-gradient(70% 40% at 50% 78%, rgba(172,130,0,.05), transparent 72%);
}
.lebensbaum svg { display: block; width: 100%; height: auto; max-height: 520px; margin-inline: auto; }

.lebensbaum__boden { stroke: var(--line); stroke-dasharray: 2 6; opacity: .9; }
.lebensbaum__ast    { stroke: var(--ink-2); opacity: .3; }
.lebensbaum__wurzel { stroke: var(--red);   opacity: .32; }
.lebensbaum__blatt  { fill: var(--red); opacity: .13; }

/* Ausgangszustand: die Linien sind noch nicht gezeichnet, die Blätter fehlen. */
.lebensbaum__ast, .lebensbaum__wurzel { stroke-dasharray: 100; stroke-dashoffset: 100; }
.lebensbaum__blatt { transform: scale(0); transform-box: fill-box; transform-origin: center; }

/* Gezeichnet wird erst, wenn der Abschnitt ins Bild kommt — .is-in setzt das
   Einblenden der Seite, daran hängt auch der Baum. */
.reveal.is-in .lebensbaum__ast,
.reveal.is-in .lebensbaum__wurzel { animation: baum-linie 1.5s var(--ease) forwards; }
.reveal.is-in .lebensbaum__blatt  { animation: baum-blatt .7s var(--spring) forwards; }

@keyframes baum-linie { to { stroke-dashoffset: 0; } }
@keyframes baum-blatt { from { transform: scale(0); } to { transform: scale(1); } }

/* Ohne Bewegungswunsch steht der Baum sofort fertig da. */
@media (prefers-reduced-motion: reduce) {
  .lebensbaum__ast, .lebensbaum__wurzel { stroke-dashoffset: 0; }
  .lebensbaum__blatt { transform: none; }
  .reveal.is-in .lebensbaum__ast,
  .reveal.is-in .lebensbaum__wurzel,
  .reveal.is-in .lebensbaum__blatt { animation: none; }
}

/* --------------------------------------------------------------------------
   16b. Bewertungen von ImmobilienScout24
   -------------------------------------------------------------------------- */
/* Breiter Streifen — dieselbe Proportion wie der Kontaktstreifen, damit die
   Startseite ihren Rhythmus behält. */
.reviews {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.75rem, 3.4vw, 2.75rem) clamp(1.75rem, 3.4vw, 3rem);
  border-radius: var(--r-xl);
}
.reviews h2 { font-size: var(--t-2); margin-bottom: .35rem; }
.reviews__text p:last-child { margin: 0; }
.reviews__widget { flex: none; }
@media (max-width: 820px) { .reviews { grid-template-columns: 1fr; } }

/* Seitenspalte, z. B. auf der Vermietungsseite: das Widget steht oben auf
   Augenhöhe mit dem Einstiegstext, statt erst unter dem Fließtext. */
.reviews--column {
  grid-template-columns: 1fr;
  align-content: start;
  gap: 1.4rem;
  border-radius: var(--r-lg);
}

/* Einwilligungsschranke: die Bewertungen laden erst auf Klick, vorher geht
   keine Anfrage an ImmobilienScout24. */
.reviews__gate { display: grid; justify-items: start; gap: .85rem; }
.reviews__note { font-size: var(--t--2); line-height: 1.6; color: var(--grey-2); margin: 0; max-width: 44ch; }
.reviews__gate.is-loaded { display: block; }
.reviews__gate iframe { border: 0; border-radius: var(--r-sm); display: block; }
@media (max-width: 820px) { .reviews__gate { justify-items: start; } }

/* --------------------------------------------------------------------------
   16c. Fachliche Hervorhebung einer Person
   -------------------------------------------------------------------------- */
.expert__body { display: flex; gap: clamp(1.2rem, 2.4vw, 1.9rem); align-items: flex-start; }
.expert__photo {
  flex: none; width: clamp(104px, 12vw, 138px);
  border-radius: var(--r); overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.6), var(--lift-1);
}
.expert__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 18%; }
.expert h2 { font-size: var(--t-2); margin-bottom: .1rem; }
.expert__role {
  display: block; font-family: var(--display);
  font-size: var(--t--1); letter-spacing: .16em; text-transform: uppercase;
  color: var(--red-deep); margin-bottom: 1rem;
}
.expert__kontakt { display: flex; flex-wrap: wrap; gap: .3rem .6rem; margin: 1rem 0 0; }
/* Auch hier trägt die Fläche den Klick, nicht nur die Textbreite — auf dem
   Handy wäre eine einzelne Textzeile ein zu kleines Ziel. */
.expert__kontakt a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: .4rem .8rem;
  margin-left: -.8rem;
  border-radius: var(--r-sm);
  font-family: var(--display); font-size: var(--t-0); color: var(--ink);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: .07em;
  text-decoration-color: rgba(214,52,92,.4);
  word-break: break-word;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.expert__kontakt a:hover, .expert__kontakt a:focus-visible {
  background: var(--red-wash);
  color: var(--red-deep);
  text-decoration-color: currentColor;
}
@media (max-width: 560px) { .expert__body { flex-direction: column; } }

/* --------------------------------------------------------------------------
   17. Formular
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.3rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: .42rem; }
.field > label, .fieldset > legend {
  font-family: var(--display); font-size: var(--t--1);
  letter-spacing: .13em; text-transform: uppercase; color: var(--grey-2); padding: 0;
}
.field input, .field textarea {
  width: 100%;
  font-family: var(--body); font-size: var(--t-0); color: var(--ink);
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .85rem 1rem;
  box-shadow: inset 0 1px 2px rgba(38,36,39,.04);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 132px; line-height: 1.66; }
.field input:hover, .field textarea:hover { border-color: var(--grey-2); }
.field input:focus, .field textarea:focus {
  background: #fff;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(214, 52, 92, .18);
}
/* Der Fokusring bleibt erhalten — vorher stand hier outline:none und als
   einzige Anzeige ein Schimmer mit 10 % Deckkraft. */
.field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}
.field input:user-invalid { border-color: #c0392b; }
.field__error { font-size: var(--t--1); color: #c0392b; }

.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .55rem; }
.choice-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span {
  display: block;
  font-family: var(--display); font-size: var(--t--1);
  letter-spacing: .08em; text-transform: uppercase; color: var(--grey);
  background: rgba(255,255,255,.6);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .7rem 1.3rem;
  transition: color .25s var(--ease), background-color .25s var(--ease),
              border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.choice input:checked + span { border-color: var(--red); color: var(--red); background: var(--red-wash); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.choice input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }

.consent { display: grid; gap: .85rem; }
.consent label { display: flex; align-items: flex-start; gap: .75rem; font-size: var(--t--1); line-height: 1.62; color: var(--grey); cursor: pointer; }
.consent input[type="checkbox"] {
  flex: none; appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; margin-top: .12em;
  border: 1px solid var(--line); border-radius: 6px;
  background: rgba(255,255,255,.7); cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.consent input[type="checkbox"]:checked {
  background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center / 13px no-repeat;
  border-color: var(--red);
}
.consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form__submit .btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.form__note { font-size: var(--t--1); color: var(--grey-2); margin: 0; }

.form-status { border-radius: var(--r-sm); padding: 1rem 1.2rem; font-size: var(--t--1); display: none; }
.form-status.is-visible { display: block; }
.form-status--error { background: rgba(192,57,43,.09); color: #a53125; }

.form-success { display: none; }
.form-success.is-visible { display: block; }
.form-success__mark {
  width: 62px; height: 62px; display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--red-wash); border: 1px solid rgba(214,52,92,.2);
  color: var(--red); margin-bottom: 1.4rem;
}
.form-success__mark svg { width: 28px; height: 28px; }

.map-frame { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--lift-2); line-height: 0; background: var(--tint-2); }
.map-frame iframe { width: 100%; height: clamp(300px, 40vw, 440px); border: 0; }

/* Einwilligungsschranke: die Karte lädt erst auf Klick, vorher geht keine
   Anfrage an Google. */
.map-gate {
  display: grid;
  place-items: center;
  min-height: clamp(300px, 40vw, 440px);
  padding: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.7;
  text-align: center;
  background:
    radial-gradient(50% 60% at 50% 0%, rgba(214,52,92,.07), transparent 70%),
    var(--tint);
}
.map-gate.is-loaded { display: block; min-height: 0; padding: 0; background: var(--tint-2); }
.map-gate__inner { max-width: 52ch; }
.map-gate__icon {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  margin: 0 auto 1.25rem;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(214,52,92,.16), rgba(214,52,92,.06));
  border: 1px solid rgba(214,52,92,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  color: var(--red);
}
.map-gate__icon svg { width: 24px; height: 24px; }
.map-gate h2 { font-size: var(--t-2); margin-bottom: .5rem; }
.map-gate p { font-size: var(--t--1); color: var(--grey); margin-bottom: 1.6rem; }
.map-gate__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* --------------------------------------------------------------------------
   17b. Geführter Dialog
   -------------------------------------------------------------------------- */
.dialog { position: fixed; right: var(--pad); bottom: var(--pad); z-index: 1200; }

/* Der Schalter tritt kurz nach dem Laden auf, damit er nicht mit dem Aufbau
   der Seite um Aufmerksamkeit ringt. Die Bewegung sitzt am Behälter, nicht am
   Schalter selbst: eine Animation auf transform würde dort das Anheben beim
   Überfahren blockieren. */
.dialog { animation: dialog-auftritt .7s var(--spring) 1.1s both; }
@keyframes dialog-auftritt {
  from { opacity: 0; transform: translateY(16px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

.dialog__launcher {
  position: relative;
  isolation: isolate;
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .95rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #e04466 0%, var(--red) 55%, var(--red-deep) 100%);
  color: #fff; cursor: pointer;
  font-family: var(--display); font-weight: 500;
  font-size: var(--t--1); letter-spacing: .12em; text-transform: uppercase;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 8px 26px rgba(214,52,92,.36);
  transition: transform .3s var(--spring), box-shadow .25s var(--ease);
}
.dialog__launcher svg { width: 1.15em; height: 1.15em; flex: none; }
.dialog__launcher:hover, .dialog__launcher:focus-visible { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 14px 34px rgba(214,52,92,.44); }
.dialog.is-open .dialog__launcher { display: none; }

/* Ein Ring läuft dreimal nach außen — genug, um den Blick zu holen, und
   danach ist Ruhe. Ein dauerhaft blinkendes Element am Bildrand stört beim
   Lesen. Der Ring liegt hinter dem Schalter, zu sehen ist nur, was über
   seinen Rand hinausläuft. */
.dialog__launcher::before {
  content: "";
  position: absolute; inset: -3px;
  z-index: -1;
  border-radius: inherit;
  border: 2px solid var(--red);
  opacity: 0;
  animation: dialog-ring 2.8s var(--ease) 2.6s 3;
}
@keyframes dialog-ring {
  0%       { opacity: 0;   transform: scale(.96); }
  18%      { opacity: .55; }
  60%, 100%{ opacity: 0;   transform: scale(1.5); }
}
/* Nach dem ersten Öffnen ist der Hinweis erledigt. */
.dialog.is-benutzt .dialog__launcher::before { animation: none; }

.dialog__panel {
  width: min(380px, calc(100vw - 2 * var(--pad)));
  max-height: min(620px, calc(100dvh - 2 * var(--pad)));
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  backdrop-filter: var(--glass-blur-lg);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--lift-3);
  overflow: hidden;
}
.dialog__panel[hidden] { display: none; }

.dialog__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.2rem .9rem;
  border-bottom: 1px solid var(--line);
}
.dialog__title {
  margin: 0;
  font-family: var(--display); font-size: var(--t-1); font-weight: 400;
  color: var(--ink); line-height: 1.2;
}
.dialog__sub { margin: .2rem 0 0; font-size: var(--t--2); color: var(--grey-2); }
.dialog__close {
  flex: none; width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--grey); cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.dialog__close svg { width: 17px; height: 17px; }
.dialog__close:hover, .dialog__close:focus-visible { background: var(--red-wash); color: var(--red-deep); }

/* Fortschritt: wie viele Fragen sind beantwortet */
.dialog__progress { height: 3px; background: var(--tint-2); flex: none; }
.dialog__progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--red), var(--gold));
  transition: width .45s var(--ease);
}

.dialog__log {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 1.1rem 1.2rem;
  display: grid; gap: .7rem;
  font-size: var(--t--1); line-height: 1.6;
  overscroll-behavior: contain;
}

/* Zwei Sprechblasen: die Frage links, die eigene Antwort rechts */
.dialog__msg { max-width: 88%; padding: .7rem .95rem; border-radius: var(--r); }
.dialog__msg--bot {
  justify-self: start;
  background: var(--tint);
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
  color: var(--ink-2);
}
.dialog__msg--user {
  justify-self: end;
  background: linear-gradient(180deg, #e04466, var(--red-deep));
  border-bottom-right-radius: 6px;
  color: #fff;
  font-family: var(--display); letter-spacing: .01em;
}
.dialog__msg strong { color: inherit; }

.dialog__foot {
  flex: none;
  padding: .9rem 1.2rem;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.6);
  display: grid; gap: .55rem;
}
/* Antwortmöglichkeiten */
.dialog__choices { display: grid; gap: .4rem; }
.dialog__choice {
  width: 100%; min-height: 44px;
  padding: .6rem .95rem;
  text-align: left;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.75);
  border: 1px solid var(--line);
  font-family: var(--display); font-size: var(--t--1); line-height: 1.4;
  color: var(--ink); cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.dialog__choice:hover, .dialog__choice:focus-visible { border-color: var(--red); background: var(--red-wash); color: var(--red-deep); }

/* Freie Eingabe */
.dialog__entry { display: flex; gap: .5rem; align-items: flex-end; }
.dialog__entry input, .dialog__entry textarea {
  flex: 1; min-width: 0;
  font-family: var(--body); font-size: var(--t--1); color: var(--ink);
  background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .7rem .85rem;
  min-height: 44px;
}
.dialog__entry textarea { resize: vertical; line-height: 1.55; }
.dialog__entry input:focus, .dialog__entry textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(214,52,92,.18); outline: none; }
.dialog__entry input:focus-visible, .dialog__entry textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.dialog__send {
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm);
  background: linear-gradient(180deg, #e04466, var(--red-deep));
  color: #fff; cursor: pointer;
}
.dialog__send svg { width: 17px; height: 17px; }
.dialog__send:disabled { opacity: .45; cursor: not-allowed; }

.dialog__skip {
  justify-self: start;
  background: none; border: 0; padding: .35rem 0;
  font-family: var(--display); font-size: var(--t--2);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--grey-2); cursor: pointer;
}
.dialog__skip:hover, .dialog__skip:focus-visible { color: var(--red-deep); }

/* Einwilligungen vor dem Absenden */
.dialog__consent { display: grid; gap: .55rem; }
.dialog__consent label { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--t--2); line-height: 1.55; color: var(--grey); cursor: pointer; }
.dialog__consent input[type="checkbox"] {
  flex: none; appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; margin-top: .1em;
  border: 1px solid var(--line); border-radius: 6px;
  background: #fff; cursor: pointer;
}
.dialog__consent input[type="checkbox"]:checked {
  background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center / 13px no-repeat;
  border-color: var(--red);
}
.dialog__consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.dialog__status { margin: 0; font-size: var(--t--2); line-height: 1.5; color: #a53125; }
.dialog__hint {
  flex: none; margin: 0;
  padding: .7rem 1.2rem .9rem;
  border-top: 1px solid var(--line);
  font-size: var(--t--2); line-height: 1.5; color: var(--grey-2);
}
.dialog__hint a { text-decoration: underline; text-underline-offset: .18em; }

/* Auf dem Handy füllt der Dialog den Bildschirm — 380 px Breite neben dem
   Rand wären dort zu schmal für die Antwortmöglichkeiten. */
@media (max-width: 560px) {
  .dialog { right: 0; bottom: 0; left: 0; }
  .dialog__launcher { position: absolute; right: 1rem; bottom: 1rem; }
  .dialog__panel {
    width: 100vw; max-height: 100dvh; height: 100dvh;
    border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
  }
}

/* Ohne Bewegungswunsch steht der Schalter still da. */
@media (prefers-reduced-motion: reduce) {
  .dialog { animation: none; }
  .dialog__launcher::before { animation: none; }
}

@media print { .dialog { display: none !important; } }

/* --------------------------------------------------------------------------
   18. Fußbereich
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-block: clamp(2rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  font-size: var(--t--1);
  color: var(--grey-2);
}
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.site-footer nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin: 0; }
.site-footer a, .site-footer button.linklike {
  color: var(--grey); font-family: var(--display);
  letter-spacing: .11em; text-transform: uppercase;
  background: none; border: 0; padding: 0; font-size: inherit; cursor: pointer;
}
.site-footer a:hover, .site-footer a:focus-visible,
.site-footer button.linklike:hover, .site-footer button.linklike:focus-visible { color: var(--red); }
.site-footer__legal { margin: 0; }

/* --------------------------------------------------------------------------
   19. Rechtstexte
   -------------------------------------------------------------------------- */
.legal { max-width: 76ch; }
.legal h1 { font-size: var(--t-3); margin-top: 3rem; }
.legal h2 { font-size: var(--t-2); margin-top: 2.6rem; }
.legal h3 { font-size: var(--t-1); margin-top: 1.9rem; }
.legal h4 { font-size: var(--t-0); margin-top: 1.4rem; text-transform: uppercase; letter-spacing: .1em; color: var(--grey); }
.legal > :first-child { margin-top: 0; }
.legal p, .legal li { font-size: var(--t--1); line-height: 1.85; }
.legal ul { margin-bottom: 1.2em; }
.legal ul li { padding-left: 1.3rem; position: relative; }
.legal ul li::before { content: ""; position: absolute; left: 0; top: .78em; width: 5px; height: 5px; background: var(--red); transform: rotate(45deg); }
.legal a { word-break: break-word; }
.legal > br { display: none; }
.legal hr { margin: 2.5rem 0; }

/* --------------------------------------------------------------------------
   20. Bewegung
   -------------------------------------------------------------------------- */
/* Die Einblendung ist eine Zugabe, keine Voraussetzung: verborgen wird nur,
   was JavaScript auch wieder sichtbar machen kann. Ohne das Kennzeichen
   html.hat-js — abgeschaltetes JavaScript, ein Skriptblocker, ein Fehler in
   herbold.js — stehen alle Inhalte sofort da. Ohne diese Absicherung bliebe
   jede Unterseite leer. */
.hat-js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.hat-js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hat-js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Kein Backdrop-Filter verfügbar: deckende Flächen statt unlesbarem Glas */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .nav-capsule, .btn--glass, .slider__nav button, .site-footer { background: rgba(255,255,255,.94); }
  .glass--dark, .slide__body, .partner-logo--dark { background: rgba(28,26,29,.82); }
  .site-header.is-over-media .nav-capsule { background: rgba(28,26,29,.78); }
}

/* --------------------------------------------------------------------------
   21. Druck
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .map-frame, .slider__controls, .form, .cta-strip { display: none !important; }
  body::before { display: none; }
  body { color: #000; font-size: 11pt; }
  .band { padding-block: 1.2rem; }
  .glass { background: none; border: 1px solid #ccc; box-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}