/* ==========================================================================
   Sportgeräte Prüfdienst — sportgeraete-pruefdienst.de
   Stylesheet, handgeschrieben, kein Framework.
   Reihenfolge: Tokens, Reset, Basis, Layout, Header, Nav, Mobile, Komponenten,
                Seitenbausteine, Formulare, Modal, Footer, Utilities, Print.
   ========================================================================== */

/* --- 1. Design-Tokens ---------------------------------------------------- */
:root {
  --ink:          #111111;
  --ink-soft:     #1a1a1a;
  --ink-muted:    #55605a;
  --ink-faint:    #626b65;   /* WCAG AA gegen #fff und #f5f6f5 */
  --paper:        #ffffff;
  --paper-2:      #f5f6f5;
  --paper-3:      #eceeec;
  --green:        #168b47;
  --green-dark:   #0f6534;
  --green-darker: #0b4c27;
  --green-soft:   #dce8e0;
  --green-tint:   #f2f7f3;
  --line:         #d7dbd7;
  --line-strong:  #b9c0ba;
  --warn:         #8a5a00;

  --font: "Helvetica Neue", Arial, Helvetica, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Inhaltsbreite. 1280 statt vormals 1200: rund einen Zentimeter mehr je
     Seite. Auf sehr breiten Bildschirmen wächst sie in zwei Stufen weiter,
     damit die Seite dort nicht als schmaler Streifen in der Mitte steht. */
  --wrap: 1280px;
  --wrap-narrow: 860px;
  --gutter: 20px;
  --gap: 24px;

  --radius: 3px;
  --radius-lg: 4px;

  --shadow-sm: 0 1px 2px rgba(17, 17, 17, .06);
  --shadow-md: 0 6px 24px rgba(17, 17, 17, .10);
  --shadow-lg: 0 18px 60px rgba(17, 17, 17, .22);

  --header-h: 82px;
  --topbar-h: 38px;
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

/* Bilder nicht versehentlich markieren oder auf den Schreibtisch ziehen.
   Das Logo bleibt ausgenommen, damit der Link darunter normal funktioniert. */
img:not(.logo img) {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.22;
  margin: 0 0 .55em;
  font-weight: 700;
  letter-spacing: -.012em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.85rem, 1.35rem + 2.1vw, 2.85rem); }
h2 { font-size: clamp(1.4rem,  1.18rem + .95vw, 1.95rem); margin-top: 0; }
h3 { font-size: clamp(1.09rem, 1.02rem + .34vw, 1.25rem); }
h4 { font-size: 1.02rem; }

p, ul, ol, dl, table, figure { margin: 0 0 1.05em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.25em; }
li { margin-bottom: .38em; }
li:last-child { margin-bottom: 0; }

a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--green-darker); }

strong, b { font-weight: 700; color: var(--ink); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }

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

::selection { background: var(--green-soft); color: var(--ink); }

/* --- 3. Layout ----------------------------------------------------------- */
/* Sehr schmale Geräte bekommen einen kleineren Rand, sehr breite einen
   größeren – die nutzbare Breite wächst dabei trotzdem durchgehend mit. */
@media (max-width: 359px)  { :root { --gutter: 15px; } }
@media (min-width: 1500px) { :root { --gutter: 28px; } }
@media (min-width: 1700px) { :root { --wrap: 1380px; } }
@media (min-width: 2100px) { :root { --wrap: 1460px; --gutter: 32px; } }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: calc(var(--wrap-narrow) + 2 * var(--gutter)); }

.section { padding-block: clamp(38px, 5vw, 68px); }
.section--tight { padding-block: clamp(28px, 3.4vw, 44px); }
.section--tinted { background: var(--paper-2); }
.section--green { background: var(--green-tint); }
.section--dark { background: var(--ink); color: #d9ded9; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark a { color: #a8dfbf; }

.section + .section--tinted,
.section--tinted + .section { border-top: 1px solid var(--line); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  text-decoration: none;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  color: #fff;
}

/* --- 4. Topbar & Header -------------------------------------------------- */
/* Infoleiste: auf schmalen Geräten ausgeblendet – die Kontaktdaten stehen
   dort im Menü und in der festen CTA-Leiste am unteren Rand. */
.topbar { display: none; }

@media (min-width: 900px) {
  .topbar {
    display: block;
    background: var(--ink);
    color: #b9c2bb;
    font-size: .82rem;
    /* Die Zeilenhöhe bestimmt auch die Höhe der Textmarkierung. Früher stand
       hier die volle Leistenhöhe – markierter Text bekam dadurch einen
       auffällig dicken Balken. Jetzt zentriert der Flexbox-Container. */
    line-height: 1.45;
    height: var(--topbar-h);
    border-bottom: 1px solid #2a2f2b;
  }
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; height: 100%; }
.topbar__claim { letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__meta { display: flex; gap: 22px; white-space: nowrap; }
.topbar a { color: #d5dcd6; text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header--scrolled { box-shadow: 0 2px 12px rgba(17,17,17,.07); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--header-h);
}

.logo { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; min-width: 0; }
.logo picture { display: block; }
/* Logo ein paar Prozent größer als zuvor (44 px). Auf schmalen Geräten wieder
   kleiner, sonst drängt es den Menüknopf über den Bildschirmrand. */
.logo img, .logo svg { height: 54px; width: auto; display: block; }
@media (max-width: 479px) { .logo img, .logo svg { height: 46px; } }
@media (max-width: 399px) { .logo img, .logo svg { height: 40px; } }
@media (max-width: 349px) { .logo img, .logo svg { height: 34px; } }

.header-spacer { flex: 1 1 auto; }

.header-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

/* Telefonnummer erst dort, wo wirklich Platz ist. Auf schmalen Geräten
   steht sie im Menü und in der CTA-Leiste am unteren Rand. */
.header-phone { display: none; }
@media (min-width: 1280px) {
  .header-phone {
    display: inline-block;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    font-size: .95rem;
    white-space: nowrap;
  }
  .header-phone:hover { color: var(--green-dark); }
}

/* CTA im Kopf nur ab mittlerer Breite – darunter übernimmt die feste Leiste.
   Höhere Spezifität, weil .btn weiter unten display: inline-flex setzt. */
.header-actions .header-cta { display: none; }
@media (min-width: 700px) { .header-actions .header-cta { display: inline-flex; } }

/* --- 5. Desktop-Navigation ----------------------------------------------- */
.mainnav { display: none; }

@media (min-width: 1060px) {
  .mainnav { display: block; }
  /* Abstand zur Telefonnummer und zum Knopf rechts: sonst steht der letzte
     Menüpunkt unmittelbar neben der Nummer und beides liest sich als eine
     Gruppe. Erst dort einsetzen, wo die Nummer überhaupt sichtbar wird. */
  @media (min-width: 1280px) { .mainnav { margin-right: 38px; } }
  .mainnav > ul {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .mainnav > ul > li { margin: 0; position: relative; }

  .mainnav > ul > li > a,
  .mainnav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    border-radius: var(--radius);
    line-height: 1.3;
  }
  .mainnav > ul > li > a:hover,
  .mainnav__toggle:hover { background: var(--paper-2); color: var(--green-dark); }
  .mainnav > ul > li > a[aria-current="page"] { color: var(--green-dark); box-shadow: inset 0 -2px 0 var(--green); }

  .mainnav__toggle svg { width: 15px; height: 15px; transition: transform .18s ease; flex: 0 0 auto; }
  .mainnav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .mainnav__toggle[aria-expanded="true"] { background: var(--paper-2); }

  .submenu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 290px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 2px solid var(--green);
    box-shadow: var(--shadow-md);
    padding: 8px;
    margin: 0;
    list-style: none;
    display: none;
    border-radius: 0 0 var(--radius) var(--radius);
  }
  .submenu[data-open="true"] { display: block; }
  .submenu li { margin: 0; }
  .submenu a {
    display: block;
    padding: 9px 12px;
    font-size: .92rem;
    color: var(--ink-soft);
    text-decoration: none;
    border-radius: var(--radius);
  }
  .submenu a:hover { background: var(--green-tint); color: var(--green-dark); }
  .submenu a[aria-current="page"] { color: var(--green-dark); font-weight: 700; }
  .submenu__sep { border-top: 1px solid var(--line); margin: 6px 4px; }

  /* Lange Listen zweispaltig. Das Feld hängt an seinem eigenen Menüpunkt;
     würde es rechts hinauslaufen, verschiebt site.js es nach links. */
  .submenu--breit[data-open="true"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(228px, 1fr));
    gap: 0 8px;
  }
  .submenu--breit { max-width: calc(100vw - 2 * var(--gutter)); }
  .submenu--breit .submenu__sep { grid-column: 1 / -1; }
}

/* Einstieg in einen Bereich (Übersichtsseite) etwas kräftiger als die
   Unterseiten darunter – sonst wirken Hub und Unterpunkte gleichwertig. */
.submenu a.submenu__hub { font-weight: 600; color: var(--ink); }
.submenu a.submenu__hub:hover { color: var(--green-dark); }
.submenu a.submenu__hub[aria-current="page"] { color: var(--green-dark); font-weight: 700; }

/* Im Schubfach liegen die Unterpunkte ohnehin bei Schriftstärke 500 – dort
   braucht der Einstieg etwas mehr Abstand, sonst ist der Unterschied nicht
   zu sehen. Zusätzlich bekommt sein Strich links mehr Gewicht. */
.drawer__panel a.submenu__hub { font-weight: 700; color: var(--ink); }
.drawer__panel a.submenu__hub::before { background: var(--ink); width: 10px; height: 2px; }
.drawer__panel a.submenu__hub:hover { color: var(--green-dark); }
.drawer__panel a.submenu__hub:hover::before { background: var(--green-dark); }
.drawer__panel a.submenu__hub[aria-current="page"] { color: var(--green-dark); }
.drawer__panel a.submenu__hub[aria-current="page"]::before { background: var(--green-dark); }

.burger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 9px 13px;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  min-height: 44px;
}
.burger:hover { border-color: var(--ink); }
.burger__bars { display: block; width: 19px; height: 13px; position: relative; }
.burger__bars span {
  position: absolute; left: 0; right: 0; height: 2px; background: var(--ink); border-radius: 2px;
}
.burger__bars span:nth-child(1) { top: 0; }
.burger__bars span:nth-child(2) { top: 5.5px; }
.burger__bars span:nth-child(3) { top: 11px; }

@media (min-width: 1060px) { .burger { display: none; } }

/* --- 6. Mobile-Drawer ---------------------------------------------------- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, .5);
  z-index: 110;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.drawer-backdrop[data-open="true"] { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(430px, 92vw);
  background: var(--paper);
  z-index: 120;
  transform: translateX(100%);
  transition: transform .24s ease;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.drawer[data-open="true"] { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.drawer__head .logo { display: flex; align-items: center; min-height: 46px; }
.drawer__head .logo img, .drawer__head .logo svg { height: 46px; width: auto; }

.drawer__close {
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  flex: 0 0 auto;
}
.drawer__close:hover { border-color: var(--ink); }
.drawer__close svg { width: 20px; height: 20px; }

.drawer__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }

.drawer nav ul { list-style: none; margin: 0; padding: 0; }
.drawer nav li { margin: 0; border-bottom: 1px solid var(--paper-3); }

.drawer nav > ul > li > a,
.drawer__acc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  min-height: 56px;
  font: inherit;
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.drawer nav > ul > li > a[aria-current="page"] {
  color: var(--green-dark);
  box-shadow: inset 3px 0 0 var(--green-dark);
}
.drawer__acc svg { width: 18px; height: 18px; flex: 0 0 auto; transition: transform .18s ease; color: var(--ink-muted); }
.drawer__acc[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--green-dark); }
.drawer__acc[aria-expanded="true"] {
  background: var(--paper-2);
  color: var(--green-dark);
  box-shadow: inset 3px 0 0 var(--green-dark);
}

.drawer__panel { display: none; background: var(--paper-2); padding: 2px 0 10px; }
.drawer__panel[data-open="true"] { display: block; }
.drawer nav .drawer__panel li { border: 0; }
.drawer__panel a {
  display: block;
  position: relative;
  padding: 12px 18px 12px 34px;
  min-height: 46px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
}
.drawer__panel a::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 6px;
  height: 1px;
  background: var(--line-strong);
}
.drawer__panel a:hover { color: var(--green-dark); }
.drawer__panel a:hover::before { background: var(--green-dark); }
.drawer__panel a[aria-current="page"] { color: var(--green-dark); font-weight: 700; }
.drawer__panel a[aria-current="page"]::before { background: var(--green-dark); width: 10px; height: 2px; }

.drawer__foot {
  flex: 0 0 auto;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--paper);
  display: grid;
  gap: 8px;
}
.drawer__foot .btn { min-height: 50px; }
.drawer__foot .btn--outline { font-weight: 600; letter-spacing: .01em; }
.drawer__foot .btn--outline svg { color: var(--green-dark); }
.drawer__foot-note {
  margin: 2px 0 0;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--ink-muted);
  text-align: center;
}

/* --- 7. Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  min-height: 48px;
  font: inherit;
  font-size: .96rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn--primary { background: var(--green-dark); color: #fff; border-color: var(--green-dark); }
.btn--primary:hover { background: var(--green-darker); border-color: var(--green-darker); color: #fff; }
.btn--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--dark:hover { background: #000; color: #fff; }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--outline:hover { border-color: var(--ink); background: var(--paper-2); color: var(--ink); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--ghost-light:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.btn--block { width: 100%; }
.btn--sm { padding: 9px 15px; min-height: 40px; font-size: .89rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
/* Symbole in Schaltflächen dürfen nie mitwachsen. */
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.btn--sm svg { width: 16px; height: 16px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- 8. Breadcrumbs ------------------------------------------------------ */
.breadcrumbs {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  font-size: .86rem;
}
.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 11px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--ink-muted);
}
.breadcrumbs li { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.breadcrumbs li + li::before { content: "›"; color: var(--line-strong); }
.breadcrumbs a { color: var(--ink-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--green-dark); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ink); }

/* --- 9. Hero ------------------------------------------------------------- */
.hero {
  background: var(--ink);
  color: #cfd6d0;
  border-bottom: 3px solid var(--green);
  padding-block: clamp(38px, 5.2vw, 76px);
}
.hero h1 { color: #fff; }
.hero__lead { font-size: clamp(1.03rem, .98rem + .3vw, 1.16rem); color: #cdd5ce; max-width: 62ch; }
.hero__grid { display: grid; gap: clamp(28px, 3.4vw, 46px); align-items: center; }
.hero__eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7fc99b;
  margin-bottom: 14px;
}
.hero .btn-row { margin-top: 26px; }
.hero__figure { margin: 0; }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.15fr .85fr; }
}

.hero--sub {
  background: var(--paper);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(30px, 3.6vw, 52px);
}
.hero--sub h1 { color: var(--ink); }
.hero--sub .hero__lead { color: var(--ink-muted); }
.hero--sub .hero__eyebrow { color: var(--green-dark); }

/* Trust-Leiste */
.trustbar { border-top: 1px solid #2c322d; margin-top: 32px; padding-top: 22px; }
.trustbar ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px 26px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.trustbar li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: #c3cbc4; margin: 0; }
.trustbar svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; color: var(--green); stroke-width: 2.4; }
.hero--sub .trustbar { border-top-color: var(--line); }
.hero--sub .trustbar li { color: var(--ink-muted); }
.hero--sub .trustbar svg { color: var(--green-dark); }


/* --- 9b. Kopfbereich mit Foto -------------------------------------------- */
/* Das Foto liegt als <img> hinter dem Text (nicht als CSS-Hintergrund), damit
   srcset und fetchpriority greifen. Darüber ein Verlauf, der den Text sicher
   lesbar hält – links kräftiger, rechts durchscheinender. */
.hero--photo {
  position: relative;
  isolation: isolate;
  background: var(--ink);       /* Rückfall, solange das Foto lädt */
  overflow: hidden;
}
.hero--photo .hero__bg,
.hero--photo .hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero--photo .hero__bg { z-index: -2; }
.hero--photo .hero__bg img { object-fit: cover; object-position: center 55%; }

.hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(9, 12, 10, .95) 0%,
      rgba(9, 12, 10, .92) 38%,
      rgba(9, 12, 10, .80) 66%,
      rgba(9, 12, 10, .66) 100%);
}
.hero--photo .hero__inner { position: relative; z-index: 1; }

/* Abzeichen oben rechts im Kopfbereich – auf schmalen Geräten ausgeblendet,
   dort fehlt der Platz. */
/* Das Abzeichen ist freigestellt (PNG mit Transparenz) – kein Blendmodus
   nötig, sonst würde der Pinselstrich aufgehellt. Der weiche Schatten löst es
   vom Foto, ohne einen sichtbaren Rand zu erzeugen. */
.hero__badge {
  position: absolute;
  top: clamp(18px, 3vw, 38px);
  right: clamp(18px, 4vw, 54px);
  width: clamp(96px, 11vw, 150px);
  height: auto;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45));
}
/* Auf schmalen Geräten ist im Kopfbereich zu wenig Platz – dort entfällt das
   Abzeichen. Gleiche Grenze wie beim Menü: sichtbar, solange die Hauptnavigation
   sichtbar ist. */
@media (max-width: 899px) { .hero__badge { display: none; } }

/* Kopfbereich mit dem Wandschriftzug. Gleiche Höhe wie alle anderen
   Kopfbereiche; der Ausschnitt ist so gelegt, dass der Schriftzug immer im
   Bild bleibt – oben und unten wird beschnitten, nicht links und rechts. */
.hero--marke { background: #282c2b; }
.hero--marke .hero__bg img { object-fit: cover; object-position: center 46%; }
/* Von oben klar, nach unten dicht – der Schriftzug bleibt lesbar, der Text
   darunter steht auf ruhigem Grund. */
.hero--marke::after {
  background: linear-gradient(180deg,
    rgba(9, 12, 10, .16) 0%,
    rgba(9, 12, 10, .28) 18%,
    rgba(9, 12, 10, .72) 46%,
    rgba(9, 12, 10, .93) 74%,
    rgba(9, 12, 10, .96) 100%);
}
.hero--marke .hero__inner { padding-top: clamp(18px, 5vw, 74px); }
.hero--photo .hero__lead { max-width: 56ch; }
.hero--photo .trustbar { border-top-color: rgba(255, 255, 255, .22); }

/* Auf schmalen Geräten steht der Text über dem gesamten Bild – dort wird
   gleichmäßig und etwas stärker abgedunkelt. */
@media (max-width: 899px) {
  .hero--photo::after {
    background: linear-gradient(180deg, rgba(9, 12, 10, .90), rgba(9, 12, 10, .95));
  }
}

/* --- 9c. Inhaltsfotos ---------------------------------------------------- */
figure.foto { margin: 0 0 1.05em; }
figure.foto picture {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
figure.foto img { transition: transform .35s ease; }
figure.foto:hover img { transform: scale(1.035); }
figure.foto img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--paper-2);
}
figure.foto figcaption {
  font-size: .84rem;
  color: var(--ink-faint);
  margin-top: 8px;
  line-height: 1.5;
}
.split > figure.foto { align-self: start; }

/* --- 10. Karten & Raster ------------------------------------------------- */
/* Grid-Kinder dürfen schmaler als ihr Inhalt werden – sonst sprengen breite
   Tabellen oder lange Wörter die Spalte und erzeugen horizontales Scrollen. */
.grid > *, .split > *, .hero__grid > *, .footer-grid > * { min-width: 0; }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 620px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  /* Leicht abgesetzter Grund und etwas kräftigerer Rand: Karten sollen sich
     vom Abschnitt abheben, ohne bunt zu wirken. */
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Auf hellem Abschnitt weiß, auf weißem Abschnitt leicht getönt. */
.section:not(.section--tinted):not(.section--green) .card { background: var(--paper-2); }
.section--tinted .card, .section--green .card { background: var(--paper); }
.card:hover {
  transform: translateY(-3px) scale(1.012);
  box-shadow: var(--shadow-md);
  border-color: var(--green);
}
.card:focus-within { border-color: var(--green); box-shadow: var(--shadow-md); }
.card h3 { margin: 0; font-size: 1.1rem; }
.card p { margin: 0; font-size: .95rem; color: var(--ink-muted); }
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--green-tint);
  color: var(--green-dark);
  flex: 0 0 auto;
}

/* Nach einem Kartenraster folgt nie unmittelbar die nächste Überschrift.
   Ohne diesen Abstand klebt sie an der Unterkante der Karten. */
.grid + h2, .grid + h3,
.cards + h2, .cards + h3,
.linkblock + h2, .split + h2, .split + h3,
.steps + h2, .steps + h3,
figure + h2, figure + h3,
.table-scroll + h2, table + h2 { margin-top: 44px; }
.grid + p, .steps + p, .split + p { margin-top: 30px; }

/* Symbol und Überschrift nebeneinander – auf jeder Bildschirmgröße gleich. */
.card__kopf {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.card__kopf h3 { margin: 0; min-width: 0; }
.card__icon svg { width: 23px; height: 23px; }
a.card:hover .card__icon { background: var(--green-soft); }
.section--tinted .card__icon { background: var(--green-tint); }
.card__link { margin-top: auto; padding-top: 6px; font-size: .92rem; font-weight: 700; }
.card__link a { text-decoration: none; }
.card__link a::after { content: " →"; }
.card__link a:hover { text-decoration: underline; }

a.card { text-decoration: none; color: inherit; transition: border-color .16s ease, box-shadow .16s ease; }
a.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }

.card--flat { background: var(--paper-2); border-color: transparent; }
.section--tinted .card--flat { background: var(--paper); border-color: var(--line); }

/* Nummerierte Ablaufliste */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 16px; }
/* Zweispaltig, wenn genug Platz ist – aus der langen Liste werden Karten. */
@media (min-width: 940px) { .steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.steps > li {
  counter-increment: step;
  position: relative;
  padding: 18px 20px 18px 66px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin: 0;
}
.section--tinted .steps > li { background: var(--paper); }
.steps > li {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.steps > li:hover,
.steps > li:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--green);
}
.steps > li::before {
  content: counter(step);
  transition: background-color .18s ease, transform .18s ease;
  position: absolute;
  left: 20px;
  top: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Die Zahl leuchtet grün auf – auch am Telefon, dort greift :active. */
.steps > li:hover::before,
.steps > li:focus-within::before,
.steps > li:active::before { background: var(--green); transform: scale(1.08); }

.steps h3 { font-size: 1.04rem; margin: 0 0 4px; }
.steps p { margin: 0; font-size: .95rem; color: var(--ink-muted); }

/* Merkmalliste mit Haken */
.checklist { list-style: none; margin: 0 0 1.05em; padding: 0; display: grid; gap: 11px; }
.checklist li { display: flex; gap: 11px; align-items: flex-start; margin: 0; }
.checklist svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 4px; color: var(--green-dark); stroke-width: 2.6; }

.cols-2 { columns: 1; }
@media (min-width: 700px) { .cols-2 { columns: 2; column-gap: 40px; } }
.cols-2 li { break-inside: avoid; }

/* Tag-Liste (Gerätearten o. Ä.) */
.taglist { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.05em; padding: 0; }
.taglist li { margin: 0; }
.taglist a, .taglist span {
  display: inline-block;
  padding: 7px 13px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .89rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.taglist a:hover { border-color: var(--green-dark); color: var(--green-dark); }

/* --- 11. Prosa-Bausteine ------------------------------------------------- */
/* Inhalte nutzen die volle Breite des Inhaltsbereichs (max. 1200 px inkl.
   Seitenrand). Tabellen, Listen und Fließtext richten sich damit einheitlich
   am linken und rechten Rand der Seite aus. */
.prose { max-width: none; }
.prose > * { max-width: none; }
.prose > h2 { margin-top: 2.1em; padding-top: 0; }
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { margin-top: 1.7em; }
/* Das erste Element einer Spalte startet ohne Vorlauf, sonst sitzt die rechte
   Spalte tiefer als die linke. */
.prose > :first-child,
.split > * > :first-child,
.sidebox > :first-child { margin-top: 0; }
.prose ul li::marker, .prose ol li::marker { color: var(--green-dark); }
@media (min-width: 1100px) {
  .prose > p, .prose > ul, .prose > ol { line-height: 1.72; }
}

.lead { font-size: 1.09rem; color: var(--ink-muted); }

.note {
  background: var(--paper-2);
  border-left: 3px solid var(--line-strong);
  padding: 17px 20px;
  font-size: .93rem;
  color: var(--ink-muted);
  border-radius: 0 var(--radius) var(--radius) 0;
  /* rund 1 cm Luft nach oben, damit der Hinweis nicht an den Karten klebt */
  margin-top: 38px;
}
/* Steht der Hinweis als erstes Element, ist der Abstand unnötig. */
.note:first-child { margin-top: 0; }
/* Direkt nach einer Überschrift gehört er dicht an den Text. */
h2 + .note, h3 + .note, p + .note { margin-top: 20px; }
.grid + .note, .cards + .note, .split + .note, figure + .note { margin-top: 38px; }
.note--legal { border-left-color: var(--warn); background: #fbf7ef; }
.note--green { border-left-color: var(--green); background: var(--green-tint); }
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--ink); }

.callout {
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: var(--radius-lg);
  padding: 24px;
  background: var(--paper);
}
.callout h2, .callout h3 { margin-top: 0; }

/* Tabellen */
.table-scroll { overflow-x: auto; margin: 0 0 1.05em; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; min-width: 520px; }
.table-scroll table { margin: 0; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--paper-2); font-weight: 700; color: var(--ink); }
@media (min-width: 900px) {
  table th:first-child, table td:first-child { width: 24%; }
}
tbody tr:last-child td { border-bottom: 0; }

/* Quellen */
.sources { font-size: .91rem; }
.sources ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.sources li { margin: 0; padding-left: 20px; position: relative; }
.sources li::before { content: "↗"; position: absolute; left: 0; color: var(--green-dark); }
.sources a { word-break: break-word; }

/* Bild-Platzhalter */
figure.ph { margin: 0 0 1.05em; }
figure.ph img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--paper-2); }
figure.ph figcaption { font-size: .82rem; color: var(--ink-faint); margin-top: 8px; }

/* Zwei-Spalten-Text mit Seitenspalte */
.split { display: grid; gap: clamp(26px, 3.4vw, 64px); }
@media (min-width: 940px) { .split { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.split--even { grid-template-columns: 1fr; }
@media (min-width: 940px) { .split--even { grid-template-columns: 1fr 1fr; } }
/* Textabschnitte mit Bild oder Liste daneben: die rechte Spalte rückt rund
   zwei Zentimeter weiter nach rechts. Die Spalte mit dem Formular bleibt
   ausgenommen, dort sollen beide Hälften exakt gleich breit sein. */
@media (min-width: 1180px) {
  .split--even:not(.split--gleich) {
    grid-template-columns: 1.24fr 1fr;
    column-gap: clamp(64px, 6.5vw, 108px);
  }
}

.sidebox {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  font-size: .94rem;
}
.section--tinted .sidebox { background: var(--paper); }
.sidebox h2, .sidebox h3 { font-size: 1.05rem; margin-top: 0; margin-bottom: 12px; }
/* In der Seitenspalte folgen mehrere kleine Blöcke aufeinander. Ohne diese
   Abstände klebt die nächste Überschrift an der Liste darüber. */
.sidebox > * + *,
.sidebox .linkblock + .linkblock { margin-top: 26px; }
.sidebox ul + h2, .sidebox ul + h3,
.sidebox p + h2, .sidebox p + h3,
.linkblock ul + h3 { margin-top: 26px; }
.sidebox > :first-child { margin-top: 0; }
/* Direkt nach einer Überschrift bleibt es eng – der große Abstand trennt
   Blöcke voneinander, nicht Überschrift und zugehörigen Text. */
.sidebox > h2 + *, .sidebox > h3 + *,
.linkblock > h3 + * { margin-top: 0; }
.sidebox ul, .sidebox p { margin-bottom: 0; }
.sidebox ul { padding-left: 1.1em; }
@media (min-width: 940px) { .sidebox--sticky { position: sticky; top: calc(var(--header-h) + 18px); } }

/* Spalte aus Bild und Kasten: das Bild steht über dem Kasten und ist genau
   so breit. Die Spalte als Ganzes bleibt beim Scrollen stehen, nicht nur der
   Kasten – sonst würde sich das Bild vom Kasten lösen. */
.split__spalte { display: block; }
.split__spalte > .foto { margin: 0 0 18px; }
.split__spalte > .foto img { border-radius: var(--radius-lg); }
@media (min-width: 940px) {
  .split__spalte { position: sticky; top: calc(var(--header-h) + 18px); }
}

/* Interner Linkblock */
.linkblock { margin-bottom: 0; }
.linkblock + .linkblock, .linkblock + h3, ul + .linkblock,
.split > * > .linkblock:not(:first-child) { margin-top: 26px; }
.linkblock ul { list-style: none; padding: 0; display: grid; gap: 10px; margin-bottom: 0; }
.linkblock li { margin: 0; }
.linkblock a { font-weight: 600; text-decoration: none; }
.linkblock a::before { content: "→ "; color: var(--green-dark); }
.linkblock a:hover { text-decoration: underline; }

/* --- 12. FAQ ------------------------------------------------------------- */
/* Steht der Fragenblock allein (ohne Bild daneben), rückt er samt Überschrift
   in die Mitte. Innerhalb einer Spalte bleibt alles, wie es ist, weil die
   Spalte ohnehin schmaler ist als der Höchstwert. */
.faqblock { max-width: 900px; margin-inline: auto; }
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 4px;
  min-height: 56px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.faq__q:hover { color: var(--green-dark); }
.faq__q svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 4px; color: var(--green-dark); transition: transform .18s ease; }
.faq__q[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Antwort fährt sanft auf: die Zeilenhöhe wird von 0fr auf 1fr animiert.
   Kein Sprung, keine feste Höhe, funktioniert mit beliebig langem Text. */
.faq__item { display: grid; grid-template-rows: auto 0fr; }
.faq__item.is-open { grid-template-rows: auto 1fr; }
.faq__a {
  overflow: hidden;
  min-height: 0;
  padding: 0 4px;
  max-width: 74ch;
  font-size: .97rem;
  color: var(--ink-muted);
  opacity: 0;
}
.faq__item.is-open > .faq__a { opacity: 1; }
.faq__a > :first-child { margin-top: 0; }
.faq__a > :last-child { margin-bottom: 20px; }
.faq__a[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .faq__item { transition: grid-template-rows .3s cubic-bezier(.4, 0, .2, 1); }
  .faq__a { transition: opacity .24s ease .04s; }
}

/* --- 13. Formulare ------------------------------------------------------- */
.form { display: grid; gap: 16px; }
.form__row { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 620px) { .form__row--pz { grid-template-columns: .5fr 1fr; } }

.field { display: grid; gap: 6px; }
.field > label { font-size: .89rem; font-weight: 600; color: var(--ink); }
.field .hint { font-size: .81rem; color: var(--ink-faint); }
.req { color: var(--green-dark); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="file"], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;   /* verhindert iOS-Zoom */
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 12px 13px;
  min-height: 48px;
}
textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2355605a' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px;
  padding-right: 38px;
}
input:focus, select:focus, textarea:focus { border-color: var(--green-dark); }
input::placeholder, textarea::placeholder { color: #9aa39c; }

.checkline { display: flex; gap: 11px; align-items: flex-start; font-size: .89rem; color: var(--ink-muted); }
.checkline input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--green-dark); }
.checkline label { font-size: .89rem; }

/* Honeypot: für Menschen und Screenreader unsichtbar, für Bots sichtbar */
.hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__status { font-size: .93rem; padding: 12px 14px; border-radius: var(--radius); display: none; }
.form__status[data-state="error"] { display: block; background: #fbeeee; border: 1px solid #e0bcbc; color: #7a2020; }
.form__status[data-state="busy"] { display: block; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-muted); }
.form__status[data-state="ok"] { display: block; background: var(--green-tint); border: 1px solid var(--green-soft); color: var(--green-darker); }

.formcard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 34px);
}

/* Kompaktes Formular: dichtere Abstände, flachere Felder, kürzeres Textfeld.
   Gedacht für Stellen, an denen das Formular neben einem kurzen Textblock
   steht und beide Spalten gleich hoch enden sollen. */
.form--kompakt { gap: 11px; }
.form--kompakt .form__row { gap: 11px; }
.form--kompakt .field { gap: 4px; }
.form--kompakt .field > label { font-size: .85rem; }
.form--kompakt input[type="text"],
.form--kompakt input[type="email"],
.form--kompakt input[type="tel"],
.form--kompakt input[type="number"],
.form--kompakt select,
.form--kompakt textarea {
  padding: 9px 12px;
  min-height: 42px;
}
.form--kompakt textarea { min-height: 74px; }
.form--kompakt select { background-position: right 12px center; }
.form--kompakt .checkline,
.form--kompakt .checkline label { font-size: .84rem; line-height: 1.45; }
.form--kompakt .btn { min-height: 44px; }
.formcard:has(.form--kompakt) { padding: clamp(18px, 2.2vw, 26px); }

/* Zwei Spalten, die unten auf gleicher Höhe enden. Der linke Block wird
   dafür gestreckt, das Formular bleibt oben bündig. */
@media (min-width: 940px) {
  .split--gleich { align-items: stretch; }
  .split--gleich > .prose,
  .split--gleich > .sidebox { display: flex; flex-direction: column; }
  .split--gleich > .prose > .callout,
  .split--gleich > .sidebox > .linkblock:last-child { margin-bottom: 0; }
  .split--gleich > .prose > .callout { flex: 1 1 auto; }
}

/* --- 14. Modal ----------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17,17,17,.55);
  z-index: 140;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal-backdrop[data-open="true"] { opacity: 1; visibility: visible; }

.modal {
  background: var(--paper);
  width: min(880px, 100%);
  max-height: min(90vh, 860px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  margin: auto;
  transform: translateY(10px);
  transition: transform .18s ease;
}
.modal-backdrop[data-open="true"] .modal { transform: translateY(0); }

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 26px 12px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.modal__head h2 { margin: 0; font-size: 1.22rem; }
.modal__head p { margin: 6px 0 0; font-size: .9rem; color: var(--ink-muted); }
.modal__close {
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  width: 44px; height: 44px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink);
}
.modal__close:hover { border-color: var(--ink); }
.modal__close svg { width: 20px; height: 20px; }
.modal__body { padding: 16px 26px 22px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 620px) {
  .modal-backdrop { padding: 0; }
  .modal { width: 100%; min-height: 100%; border-radius: 0; margin: 0; }
  .modal__head { position: sticky; top: 0; background: var(--paper); z-index: 2; }
  .modal__body { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
}

/* --- 15. CTA-Band -------------------------------------------------------- */
.ctaband { background: var(--ink); color: #cfd6d0; padding-block: clamp(34px, 4vw, 54px); }
.ctaband h2 { color: #fff; margin-bottom: .4em; }
.ctaband p { max-width: 62ch; color: #c3cbc4; }
.ctaband .btn-row { margin-top: 22px; }

/* Dezente mobile CTA-Leiste */
.mobilebar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: none;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobilebar a {
  flex: 1 1 50%;
  background: var(--paper);
  text-align: center;
  padding: 13px 8px;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  min-height: 50px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.mobilebar a.is-primary { background: var(--green-dark); color: #fff; }
.mobilebar svg { width: 17px; height: 17px; }
@media (max-width: 767px) {
  .mobilebar { display: flex; }
  body { padding-bottom: 52px; }
}

/* --- 16. Footer ---------------------------------------------------------- */
.site-footer { background: var(--ink); color: #a8b1aa; font-size: .92rem; padding-block: clamp(40px, 4.6vw, 62px) 0; }
.site-footer a[aria-current="page"] {
  color: #7fc99b;
  font-weight: 700;
}
.site-footer h2 { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.site-footer a { color: #c5cdc6; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.site-footer li { margin: 0; }

.footer-grid { display: grid; gap: 34px 26px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1.15fr; } }

.footer-brand .logo { display: inline-flex; margin-bottom: 22px; }
.footer-brand svg, .footer-brand img { height: 54px; width: auto; }
.footer-brand .logo:hover { opacity: .85; }
.footer-brand p { color: #98a19a; font-size: .9rem; max-width: 34ch; }
.footer-contact { margin-top: 16px; display: grid; gap: 6px; font-size: .9rem; }
.footer-contact strong { color: #fff; font-weight: 700; }

/* Einspaltige Fußzeile: alles mittig statt linksbündig mit viel Leerraum. */
@media (max-width: 619px) {
  .site-footer { text-align: center; }
  .footer-brand .logo,
  .footer-brand img,
  .footer-brand svg { margin-inline: auto; }
  .footer-brand p { max-width: 42ch; margin-inline: auto; }
  .footer-contact { justify-items: center; }
  .site-footer ul { padding: 0; list-style: none; }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-bottom ul { justify-content: center; }
  .footer-disclaimer { text-align: left; }
}

.footer-bottom {
  margin-top: 40px;
  border-top: 1px solid #2a302b;
  padding-block: 20px 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  color: #8a938c;
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-disclaimer { font-size: .8rem; color: #7d867f; max-width: none; line-height: 1.6; padding-bottom: 26px; }

.footer-cc {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-cc:hover { color: #fff; }

/* --- 16b. Cookie-Hinweis und -Einstellungen ------------------------------ */
.cc {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 130;
  padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  background: var(--ink);
  color: #d5dbd6;
  border-top: 3px solid var(--green);
  box-shadow: 0 -10px 34px rgba(0, 0, 0, .26);
}
@media (max-width: 767px) {
  /* über der mobilen Aktionsleiste bleiben */
  .cc { bottom: 52px; padding-bottom: 14px; }
}
.cc[hidden] { display: none; }
.cc__box {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  gap: 6px 30px;
  outline: none;
}
@media (min-width: 900px) {
  .cc__box {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 34px;
  }
  .cc__actions { grid-row: 1 / span 3; grid-column: 2; }
}
.cc h2 { font-size: 1.02rem; color: #fff; margin: 0; }
.cc p { margin: 0; font-size: .9rem; line-height: 1.55; max-width: 78ch; }
/* Im dunklen Hinweis heller Text, im hellen Dialog dunkler Text. */
.cc__meta { font-size: .82rem; color: var(--ink-faint); margin: 0; }
.cc__meta a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; }
.cc__meta a:hover { color: var(--green-darker); }
.cc .cc__meta { color: #b3bcb5; }
.cc .cc__meta a { color: #e2e8e3; }
.cc .cc__meta a:hover { color: #fff; }
.cc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
@media (min-width: 900px) { .cc__actions { margin-top: 0; } }
/* Annehmen und Ablehnen sind bewusst gleich groß und gleich auffällig. */
.cc__actions .btn { min-height: 46px; flex: 1 1 auto; }
@media (min-width: 560px) { .cc__actions .btn { flex: 0 0 auto; min-width: 178px; } }
/* Ablehnen ist bewusst genauso deutlich wie Annehmen: gleiche Größe,
   gleiche Schrift, gefüllte Fläche mit vergleichbarem Kontrast. Eine nur
   angedeutete Ablehnen-Schaltfläche wäre rechtlich angreifbar. */
.cc .btn--outline { background: #fff; color: var(--ink); border-color: #fff; }
.cc .btn--outline:hover { background: #e7eae7; color: var(--ink); border-color: #e7eae7; }
.cc__link {
  background: none;
  border: 0;
  padding: 8px 4px;
  font: inherit;
  font-size: .88rem;
  color: #c9d2cb;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 44px;
}
.cc__link:hover { color: #fff; }

.cc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgba(17, 17, 17, .58);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 40px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.cc-backdrop[data-open="true"] { opacity: 1; visibility: visible; }
.cc-modal {
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(680px, 100%);
  max-height: min(88vh, 820px);
  display: flex;
  flex-direction: column;
  transform: translateY(12px);
  transition: transform .2s ease;
}
.cc-backdrop[data-open="true"] .cc-modal { transform: none; }
.cc-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--line);
}
.cc-modal__head h2 { margin: 0 0 5px; font-size: 1.2rem; }
.cc-modal__head p { margin: 0; font-size: .9rem; color: var(--ink-muted); }
.cc-modal__body { padding: 6px 24px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cc-modal__foot {
  padding: 16px 24px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cc-modal__foot .btn { flex: 1 1 170px; min-height: 46px; }
.cc-modal__foot .btn--outline { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.cc-modal__foot .btn--outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.cc__kat { border-bottom: 1px solid var(--line); padding: 18px 0; }
.cc__kat:last-of-type { border-bottom: 0; }
.cc__kat > p { margin: 0 0 10px; font-size: .91rem; color: var(--ink-muted); line-height: 1.55; }
.cc__kat-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.cc__kat-titel { font-weight: 700; font-size: 1rem; color: var(--ink); cursor: pointer; }
.cc__state { font-size: .82rem; color: var(--ink-faint); flex: 0 0 auto; }
.cc__leer { font-size: .86rem; color: var(--ink-faint); font-style: italic; margin: 0; }

.cc__switch { position: relative; flex: 0 0 auto; width: 50px; height: 28px; }
.cc__switch input {
  position: absolute; inset: 0; margin: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer; z-index: 1;
}
.cc__slider {
  position: absolute; inset: 0;
  background: var(--line-strong);
  border-radius: 999px;
  transition: background-color .16s ease;
}
.cc__slider::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .16s ease;
}
.cc__switch input:checked + .cc__slider { background: var(--green-dark); }
.cc__switch input:checked + .cc__slider::after { transform: translateX(22px); }
.cc__switch input:focus-visible + .cc__slider { outline: 3px solid var(--green); outline-offset: 2px; }

.cc__kat details { margin-top: 4px; }
.cc__kat summary {
  cursor: pointer;
  font-size: .87rem;
  color: var(--green-dark);
  padding: 6px 0;
  min-height: 32px;
}
.cc__kat summary:hover { text-decoration: underline; }
.cc__dienste { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 12px; }
.cc__dienste > li {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: .86rem;
  margin: 0;
}
.cc__dienste dl { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; }
.cc__dienste dt { font-weight: 600; color: var(--ink); }
.cc__dienste dd { margin: 0; color: var(--ink-muted); }
@media (max-width: 479px) {
  .cc__dienste dl { grid-template-columns: 1fr; gap: 1px; }
  .cc__dienste dd { margin-bottom: 5px; }
}


/* Schaltfläche, die wie ein Link im Fließtext aussieht */
.linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linkbtn:hover { color: var(--green-darker); }

/* Markendarstellung mittig und nicht breiter als die Quelle hergibt */
.foto--marke { max-width: 900px; margin-inline: auto; }

/* Bildstreifen unter dem Kopfbereich. Alle drei Aufnahmen im selben
   Seitenverhältnis, damit die Reihe eine ruhige Linie bildet – unabhängig
   davon, wie die einzelnen Fotos beschnitten sind. */
.fotoband {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 620px) { .fotoband { grid-template-columns: repeat(3, 1fr); } }
/* Der Rahmen sitzt auf der Figur, nicht auf dem Bild: so kann das Bild beim
   Zeigen darüber hinauswachsen, ohne den Rahmen mitzuziehen. */
.fotoband figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.fotoband picture { display: block; }
.fotoband img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .35s ease;
}
.fotoband figure:hover img,
.fotoband figure:active img,
.fotoband figure:focus-within img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .fotoband img { transition: none; }
  .fotoband figure:hover img,
  .fotoband figure:active img,
  .fotoband figure:focus-within img { transform: none; }
}

/* Auf schmalen Geräten: eine große Aufnahme oben, darunter die beiden
   anderen nebeneinander und kleiner. Drei gleich große Blöcke untereinander
   würden den Text zu weit nach unten schieben. */
@media (max-width: 619px) {
  .fotoband { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fotoband figure:first-child { grid-column: 1 / -1; }
  .fotoband figure:first-child img { aspect-ratio: 16 / 9; }
  .fotoband figure:nth-child(n + 2) img { aspect-ratio: 4 / 3; }
}

/* --- 17. 404 ------------------------------------------------------------- */
.err { text-align: center; padding-block: clamp(56px, 8vw, 110px); }
.err__code { font-size: clamp(3.4rem, 9vw, 6rem); font-weight: 700; color: var(--green-soft); line-height: 1; margin: 0 0 8px; letter-spacing: -.03em; }
.err .btn-row { justify-content: center; }

/* --- 18. Utilities ------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-l { margin-top: 34px; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
body.is-locked { overflow: hidden; }

/* --- 19. Reduzierte Bewegung -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --- 20. Druck ----------------------------------------------------------- */
@media print {
  .topbar, .site-header, .mobilebar, .ctaband, .drawer, .drawer-backdrop,
  .modal-backdrop, .btn-row, .site-footer ul { display: none !important; }
  body { font-size: 11pt; color: #000; padding-bottom: 0; }
  .hero { background: #fff; color: #000; border-bottom: 1px solid #000; }
  .hero h1, .hero__lead { color: #000; }
  a { color: #000; text-decoration: underline; }
  .section { padding-block: 12pt; }
}