/* Kennwert · Website kennwert.ai (KEN-317 / G-10).
   Marke wie App-Icon und Instagram: Nacht #06090A, Glut #0E3A40, Mint #7CF0BD. Hell und dunkel nach Systemeinstellung,
   Systemschrift (keine externen Schriften), keine Skripte. Kontraste nach WCAG AA geprüft (Docs/BETRIEB/WEBSITE.md). */

:root {
  color-scheme: light dark;
  --nacht: #06090A;
  --glut: #0E3A40;
  --mint: #7CF0BD;
  --buehne-text: #EEF3F1;
  --buehne-leise: #A9B8B5;

  --grund: #F5F7F6;
  --flaeche: #FFFFFF;
  --flaeche-2: #EDF2F0;
  --text: #0D1719;
  --leise: #4A575A;
  --linie: #D6DFDC;
  --akzent: #08654F;
  --akzent-text: #FFFFFF;
  --fokus: #08654F;
  --schatten: 0 1px 2px rgb(6 9 10 / 6%), 0 8px 24px rgb(6 9 10 / 6%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #06090A;
    --flaeche: #0E1517;
    --flaeche-2: #121C1E;
    --text: #EEF3F1;
    --leise: #A3B1AE;
    --linie: #223032;
    --akzent: #7CF0BD;
    --akzent-text: #06090A;
    --fokus: #7CF0BD;
    --schatten: none;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

a { color: var(--akzent); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }

.huelle { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 48rem) { .huelle { padding: 0 2rem; } }

.sprung {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--mint); color: var(--nacht); padding: 0.75rem 1rem; border-radius: 0.5rem; font-weight: 700;
}
.sprung:focus { top: 1rem; }

/* Kopf (immer dunkel, Markenband) */
.kopf { background: var(--nacht); color: var(--buehne-text); border-bottom: 1px solid rgb(124 240 189 / 10%); }
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.marke {
  display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem;
  color: var(--buehne-text); text-decoration: none; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em;
}
.marke img { width: 2.25rem; height: 2.25rem; border-radius: 0.55rem; }
.navi ul { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.navi a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; border-radius: 0.5rem;
  color: var(--buehne-text); text-decoration: none; font-weight: 600; font-size: 0.975rem;
}
.navi a:hover { background: rgb(124 240 189 / 12%); }
.navi a:focus-visible { outline-color: var(--mint); }
.navi .breit { display: none; }
@media (min-width: 40rem) { .navi .breit { display: list-item; } }

/* Bühne der Startseite (immer dunkel) */
.buehne {
  background:
    radial-gradient(60rem 36rem at 85% -10%, rgb(14 58 64 / 95%), transparent 70%),
    radial-gradient(40rem 30rem at -10% 110%, rgb(10 36 40 / 90%), transparent 70%),
    var(--nacht);
  color: var(--buehne-text);
  padding: 2.5rem 0 3.5rem;
}
.buehne .huelle { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 56rem) { .buehne .huelle { grid-template-columns: 1.15fr 0.85fr; } .buehne { padding: 4rem 0 5rem; } }
.buehne a { color: var(--mint); }
.buehne a:focus-visible { outline-color: var(--mint); }
.plakette {
  display: inline-block; border: 1.5px solid var(--mint); color: var(--mint); border-radius: 999px;
  padding: 0.25rem 0.875rem; font-weight: 700; font-size: 0.9375rem; margin: 0 0 1.25rem;
}
.buehne h1 {
  font-size: clamp(2.25rem, 1.4rem + 4vw, 3.75rem); line-height: 1.08; letter-spacing: -0.025em; font-weight: 800; margin: 0 0 1.25rem;
  hyphens: manual;
}
.buehne h1 span { color: var(--mint); }
.buehne .lead { font-size: 1.1875rem; color: var(--buehne-leise); max-width: 36rem; margin: 0 0 2rem; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.75rem 1.375rem;
  border-radius: 0.75rem; font-weight: 700; text-decoration: none; border: 1.5px solid transparent;
}
.buehne .knopf.voll { background: var(--mint); color: var(--nacht); }
.buehne .knopf.voll:hover { background: #9BF5CF; }
.buehne .knopf.rand { border-color: rgb(238 243 241 / 35%); color: var(--buehne-text); }
.buehne .knopf.rand:hover { border-color: var(--mint); }
.buehne .hinweis { margin: 1.5rem 0 0; font-size: 0.9375rem; color: var(--buehne-leise); }

.telefon {
  justify-self: center; width: min(17.5rem, 78vw); border-radius: 2.25rem; padding: 0.5rem;
  background: #1A2426; box-shadow: 0 0 0 1px rgb(124 240 189 / 18%), 0 30px 80px rgb(0 0 0 / 55%), 0 0 120px rgb(14 58 64 / 90%);
}
.telefon img { display: block; border-radius: 1.8rem; width: 100%; }

/* Abschnitte */
.abschnitt { padding: 4rem 0; }
.abschnitt.getoent { background: var(--flaeche-2); }
.abschnitt h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.75rem; }
.abschnitt .einleitung { color: var(--leise); max-width: 42rem; margin: 0 0 2.5rem; font-size: 1.125rem; }

.raster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 1rem; padding: 1.5rem; box-shadow: var(--schatten);
}
.karte h3 { font-size: 1.1875rem; line-height: 1.3; margin: 0 0 0.5rem; }
.karte p { margin: 0; color: var(--leise); }
.karte .zeichen {
  display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; margin: 0 0 1rem;
  background: var(--nacht); color: var(--mint); font-weight: 800; font-size: 1.05rem;
}

.ansichten { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.ansichten figure { margin: 0; text-align: center; }
.ansichten img {
  width: min(15rem, 100%); border-radius: 1.75rem; border: 6px solid #1A2426; background: #1A2426;
  box-shadow: var(--schatten);
}
.ansichten figcaption { margin-top: 0.875rem; color: var(--leise); font-size: 0.9375rem; }
.fussnote { color: var(--leise); font-size: 0.875rem; margin: 1.75rem 0 0; }

.zweispaltig { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .zweispaltig { grid-template-columns: 1fr 1fr; } }
.liste { margin: 0; padding: 0; list-style: none; }
.liste li { position: relative; padding: 0.375rem 0 0.375rem 1.75rem; }
.liste li::before { content: "✓"; position: absolute; left: 0.125rem; top: 0.375rem; color: var(--akzent); font-weight: 800; }
.liste.nein li::before { content: "–"; color: var(--leise); }

.kontakt { text-align: center; }
.kontakt .einleitung { margin-left: auto; margin-right: auto; }
.kontakt .knopf.voll { background: var(--akzent); color: var(--akzent-text); }
.kontakt .knopf.voll:hover { filter: brightness(1.08); }

.hinweisband {
  border-left: 4px solid var(--akzent); background: var(--flaeche); border-radius: 0.5rem; padding: 1rem 1.25rem; margin: 2rem 0 0;
  color: var(--text);
}

/* Rechtstexte */
.rechtstext { padding: 2.5rem 0 4rem; }
.rechtstext .huelle { max-width: 48rem; }
.rechtstext h1 { font-size: clamp(1.875rem, 1.4rem + 2vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.rechtstext h2 { font-size: 1.5rem; line-height: 1.25; margin: 2.75rem 0 0.5rem; }
.rechtstext h3 { font-size: 1.1875rem; line-height: 1.3; margin: 2rem 0 0.5rem; }
.rechtstext h2 + h3, .rechtstext .stand + h3 { margin-top: 1.25rem; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p, .rechtstext ul { margin: 0 0 1rem; }
.rechtstext ul { padding-left: 1.25rem; }
.rechtstext li { margin: 0 0 0.5rem; }
.stand { color: var(--leise); font-size: 0.9375rem; margin: 0 0 1.5rem; }
.teil {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 1rem; padding: 1.5rem 1.25rem; margin: 2rem 0;
  box-shadow: var(--schatten);
}
@media (min-width: 40rem) { .teil { padding: 2rem; } }
.teil > h2:first-child { margin-top: 0; }
.inhaltsverzeichnis {
  background: var(--flaeche-2); border-radius: 0.75rem; padding: 1rem 1.25rem; margin: 0 0 2rem; font-size: 0.975rem;
}
.inhaltsverzeichnis h2 { font-size: 1rem; margin: 0 0 0.5rem; }
.inhaltsverzeichnis ul { margin: 0; padding: 0; list-style: none; }
.inhaltsverzeichnis ul ul { padding-left: 1rem; margin-top: 0.25rem; }
.inhaltsverzeichnis li { margin: 0 0 0.25rem; }
.inhaltsverzeichnis a { display: inline-block; padding: 0.125rem 0; }

/* Fuß */
.fuss {
  background: var(--nacht); color: var(--buehne-leise); padding: 2.5rem 0; font-size: 0.9375rem;
  border-top: 1px solid rgb(124 240 189 / 14%);
}
.fuss .huelle { display: grid; gap: 1.25rem; }
.fuss nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; margin: 0; padding: 0; }
.fuss a { color: var(--buehne-text); display: inline-flex; align-items: center; min-height: 2.75rem; }
.fuss a:focus-visible { outline-color: var(--mint); }
.fuss p { margin: 0; }

/* 404 */
.leer { padding: 5rem 0 6rem; text-align: center; }
.leer h1 { font-size: 2rem; margin: 0 0 1rem; }
.leer p { color: var(--leise); max-width: 32rem; margin: 0 auto 1.5rem; }
.leer .knopf.voll { background: var(--akzent); color: var(--akzent-text); }

@media print {
  .kopf, .fuss, .sprung, .inhaltsverzeichnis { display: none; }
  body { background: #fff; color: #000; }
  .teil { border: 0; box-shadow: none; padding: 0; }
}