/*
  brennglas.ch: eine CSS-Datei für alle Seiten.
  Stand: 1. November 2026.
  Teil 1: Tokens aus website-vorschlag/tokens.css (Design-Audit vom 1. November).
  Teil 2: Bausteine nach Brennglas-Website-Uebergabe.md, Abschnitt 7.
  Später gehören die Tokens ins Design System «Brennglas» für App und Website.
*/

/* ================= Teil 1: Tokens ================= */

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
}

:root {
  --papier: #F5F4F0;
  --flaeche: #FFFFFF;
  --stein: #EDEBE5;
  --linie: #DEDBD3;

  --tanne: #1F3A33;
  --tanne-hover: #2C5047;
  --tanne-zart: #E6EEEA;
  --auf-tanne: #F5F4F0;
  --auf-tanne-leise: #C9D4CF;
  --rand-auf-tanne: #8AA69C;

  --tinte: #141820;
  --stein-text: #57534B;
  --stein-leise: #6B675F;
  --stein-rand: #85806F;
  --stein-titel: #8C877C;

  --licht: #F0905E;
  --licht-text: #A9471F;
  --licht-zart: #FCE9DE;
  --offen-grund: #F8ECD6;

  --schweiz: #D52B1E;

  --schrift: Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-groesse: clamp(44px, 5.4vw, 68px);
  --titel-1-groesse: clamp(32px, 3.6vw, 44px);

  --abschnitt: clamp(64px, 8vw, 112px);
  --container: 1200px;
  --seitenrand: 24px;
  --textbreite: 640px;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-knopf: 12px;
  --radius-l: 16px;
  --radius-xl: 20px;

  --schatten-1: 0 1px 2px rgba(20, 24, 32, 0.06);
  --schatten-fokus: 0 1px 2px rgba(20, 24, 32, 0.06), 0 30px 60px -24px rgba(31, 58, 51, 0.32);
  --schatten-hervorgehoben: 0 0 0 1px var(--tanne), 0 30px 60px -32px rgba(31, 58, 51, 0.35);
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3 { color: var(--tanne); font-weight: 600; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }

a {
  color: var(--tanne);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
a:hover { color: var(--tinte); }

:focus-visible {
  outline: 2px solid var(--licht-text);
  outline-offset: 3px;
  border-radius: var(--radius-m);
}
.dunkel :focus-visible { outline-color: var(--licht); }

.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;
}

.springen {
  position: absolute; left: 16px; top: -100px; z-index: 50;
  padding: 10px 16px; border-radius: var(--radius-m);
  background: var(--tanne); color: var(--auf-tanne);
}
.springen:focus { top: 12px; color: var(--auf-tanne); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ================= Teil 2: Schriftstufen ================= */

.display {
  font-size: var(--display-groesse);
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.display .leise { color: var(--stein-titel); }
.titel-1 {
  font-size: var(--titel-1-groesse);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.titel-2 { font-size: 28px; line-height: 34px; letter-spacing: -0.02em; }
.titel-3 { font-size: 20px; line-height: 28px; letter-spacing: -0.01em; }
.einleitung { font-size: 18px; line-height: 28px; color: var(--stein-text); }
.text { font-size: 16px; line-height: 24px; }
.klein { font-size: 15px; line-height: 22px; }
.beschriftung { font-size: 13px; line-height: 18px; }
.nebentext { color: var(--stein-text); }
.leise { color: var(--stein-leise); }

/* ================= Raster ================= */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--seitenrand);
}
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt-oben { padding-top: var(--abschnitt); }
.band { background: var(--stein); }
.stapel { display: flex; flex-direction: column; }
.abschnittskopf {
  max-width: var(--textbreite);
  display: flex; flex-direction: column; gap: 16px;
}

/* ================= Kopfzeile ================= */

.kopf { position: relative; z-index: 20; }
.kopf-innen {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 76px; padding-block: 16px;
}
.marke {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--tanne); text-decoration: none;
  font-weight: 600; font-size: 20px; letter-spacing: -0.03em;
}
.marke:hover { color: var(--tanne); }
.hauptnav { display: flex; align-items: center; gap: 4px; }
.navlink {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: var(--radius-m);
  color: var(--tinte); text-decoration: none;
  font-size: 15px; line-height: 22px;
}
.navlink:hover { background: var(--stein); color: var(--tinte); }
.navlink[aria-current="page"], .navlink.aktiv {
  background: var(--stein); color: var(--tanne); font-weight: 500;
}
.kopf-rechts { display: flex; align-items: center; gap: 6px; }

.menue-knopf {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--radius-m);
  background: transparent; color: var(--tanne); cursor: pointer;
}
.menue-knopf:hover { background: var(--stein); }
.menue-knopf .zu { display: none; }
.menue-knopf[aria-expanded="true"] .auf { display: none; }
.menue-knopf[aria-expanded="true"] .zu { display: block; }

.menue {
  display: none;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  background: var(--papier);
}
.menue ul { list-style: none; margin: 0 auto; padding: 8px 12px 16px; }
.menue a {
  display: flex; align-items: center; min-height: 48px; padding: 0 12px;
  border-radius: var(--radius-m);
  color: var(--tinte); text-decoration: none; font-size: 16px;
}
.menue a:hover, .menue a[aria-current="page"] { background: var(--stein); color: var(--tanne); }
.menue a[aria-current="page"] { font-weight: 500; }
.menue .trennung { border-top: 1px solid var(--linie); margin-top: 8px; padding-top: 8px; }

/* ================= Knöpfe ================= */

.knopf, .knopf-rand, .knopf-hell, .knopf-rand-dunkel {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px;
  border-radius: var(--radius-knopf);
  font-size: 16px; line-height: 24px; font-weight: 500;
  text-decoration: none; text-align: center;
  cursor: pointer;
}
.knopf { background: var(--tanne); color: var(--auf-tanne); border: 1px solid var(--tanne); }
.knopf:hover { background: var(--tanne-hover); color: var(--auf-tanne); }
.knopf-rand { background: transparent; color: var(--tanne); border: 1px solid var(--tanne); }
.knopf-rand:hover { background: var(--tanne-zart); color: var(--tanne); }
.knopf-klein {
  min-height: 44px; padding: 0 16px;
  border-radius: var(--radius-m);
  font-size: 15px; line-height: 22px;
  white-space: nowrap;
}
.knopf-hell { background: var(--auf-tanne); color: var(--tanne); border: 1px solid var(--auf-tanne); }
.knopf-hell:hover { background: #FFFFFF; color: var(--tanne); }
.knopf-rand-dunkel { background: transparent; color: var(--auf-tanne); border: 1px solid var(--rand-auf-tanne); }
.knopf-rand-dunkel:hover { background: var(--tanne-hover); color: var(--auf-tanne); }
.knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.knoepfe-eng { display: flex; flex-wrap: wrap; gap: 12px; }

/* Link, der allein steht: Ziel mindestens 44 px */
.ziel {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 500;
}

/* ================= Kleine Bausteine ================= */

.beta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 14px 5px 5px; border-radius: 999px;
  background: var(--stein); color: var(--stein-text);
  font-size: 13px; line-height: 18px; font-weight: 500;
}
.beta-marke {
  padding: 2px 10px; border-radius: 999px;
  background: var(--tanne); color: var(--auf-tanne);
}

.beweis {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-size: 15px; line-height: 22px; color: var(--stein-leise);
  list-style: none; padding: 0;
}
.beweis li { display: inline-flex; align-items: center; gap: 8px; }
.beweis li + li::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: #B3AEA2; margin-right: 6px;
}

.kreuz { flex: none; }

.bald {
  white-space: nowrap;
  display: inline-flex; align-items: center;
  padding: 1px 8px; border-radius: 999px;
  background: var(--stein); color: var(--stein-text);
  font-size: 13px; line-height: 18px; font-weight: 500;
  letter-spacing: 0; vertical-align: middle;
}
.band .bald { background: var(--papier); }

.offen {
  background: var(--offen-grund); color: var(--tinte);
  padding: 1px 6px; border-radius: 4px;
  outline: 1px dashed #8A5710; outline-offset: -1px;
}

/* ================= Einstieg mit Fokus-Bild ================= */

.einstieg { padding: clamp(24px, 5vw, 64px) 0 clamp(72px, 9vw, 120px); }
.einstieg-innen {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 5vw, 64px);
}
.einstieg-text {
  flex: 1 1 420px; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 28px;
}
.einstieg-text .einleitung { max-width: 31em; }

.fokusbild {
  flex: 1 1 520px; min-width: 0;
  position: relative;
  min-height: clamp(470px, 44vw, 560px);
  display: flex; align-items: center; justify-content: center;
}
.fokusbild-hintergrund {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 76% 74% at 50% 50%, #000 52%, transparent 100%);
  mask-image: radial-gradient(ellipse 76% 74% at 50% 50%, #000 52%, transparent 100%);
}
.schein {
  position: absolute; left: 50%; top: 50%;
  width: min(96%, 600px); aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240,144,94,0.20), rgba(240,144,94,0.07) 55%, rgba(240,144,94,0) 100%);
}
.schwebend {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px;
  font-size: 14px; color: var(--tinte); white-space: nowrap;
}
.punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }

.fokus-stapel {
  position: relative; z-index: 2;
  width: min(100%, 460px);
  display: flex; flex-direction: column; gap: 12px;
}
.fokus-fortschritt {
  align-self: center;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 999px;
  font-size: 13px; line-height: 18px; color: var(--stein-text);
  box-shadow: var(--schatten-1);
}
.fokus-fortschritt strong { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--tinte); }
.schritte { display: inline-flex; gap: 3px; }
.schritte span { width: 16px; height: 4px; border-radius: 2px; background: var(--linie); }
.schritte .fertig { background: var(--tanne); }
.schritte .jetzt { background: var(--licht); }

.fokus-karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius-l); overflow: hidden;
  box-shadow: var(--schatten-fokus);
}
.fokus-inhalt { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 12px; }
.fokus-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  font-size: 13px; line-height: 18px; color: var(--stein-text);
}
.fokus-meta > span { display: inline-flex; align-items: center; gap: 7px; }
.laeuft { color: var(--licht-text); font-weight: 500; }
.laeuft .punkt { background: var(--licht); box-shadow: 0 0 0 4px var(--licht-zart); }
.chip-heute { padding: 2px 8px; border-radius: var(--radius-s); background: var(--licht-zart); color: var(--tinte); }
.fokus-titel {
  font-size: clamp(22px, 2.2vw, 26px); line-height: 1.2; letter-spacing: -0.025em;
  font-weight: 600; color: var(--tinte); text-wrap: balance;
}
.fokus-notiz { font-size: 15px; line-height: 22px; color: var(--stein-text); }
.darum {
  margin-top: 4px;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: var(--radius-m);
  background: var(--papier);
  font-size: 13px; line-height: 18px; color: var(--stein-text);
}
.darum strong { font-weight: 600; color: var(--licht-text); }

.fokus-knoepfe {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 8px;
  font-size: 15px; font-weight: 500;
}
.fokus-knoepfe > span {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; border-radius: 12px;
  background: var(--flaeche); border: 1px solid var(--linie); color: var(--tinte);
}
.fokus-knoepfe > .haupt { background: var(--tanne); border-color: var(--tanne); color: var(--auf-tanne); }
.taste {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 4px; border: 1px solid currentColor;
  font-size: 11px; line-height: 1; opacity: .7;
}

/* ================= Funktionskarten ================= */

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
}
.funktion {
  display: flex; flex-direction: column;
  background: var(--stein); border-radius: var(--radius-xl); padding: 10px;
}
.funktion-bild {
  height: 248px; border-radius: 14px; background: var(--papier);
  display: flex; align-items: center; justify-content: center;
  padding: 20px 24px; overflow: hidden;
}
.funktion-text {
  padding: 20px 14px 14px;
  display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto;
}
.funktion-text h3 { display: block; }
.funktion-text p { color: var(--stein-text); }

/* Kleine Nachbauten in den Karten */
.mini {
  width: 100%; max-width: 290px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px;
  box-shadow: 0 16px 32px -18px rgba(31,58,51,0.35);
}
.mini-gruppe { width: 100%; max-width: 290px; display: flex; flex-direction: column; gap: 8px; }
.mini-zeile { font-size: 12px; line-height: 16px; color: var(--stein-text); display: inline-flex; align-items: center; gap: 6px; }
.mini-titel { font-size: 14px; line-height: 19px; font-weight: 600; color: var(--tinte); }

/* ================= Vergleich ================= */

.vergleich {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 16px; align-items: stretch;
}
.vergleich-karte { border-radius: var(--radius-xl); padding: 28px 28px 8px; background: var(--papier); }
.vergleich-karte.brennglas { background: var(--flaeche); box-shadow: var(--schatten-hervorgehoben); }
.vergleich-kopf {
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; line-height: 22px; font-weight: 600; color: var(--stein-text);
}
.brennglas .vergleich-kopf { color: var(--tanne); }
.vergleich dl > div { padding: 16px 0; border-top: 1px solid var(--linie); }
.vergleich dt { font-size: 13px; line-height: 18px; color: var(--stein-leise); }
.brennglas dt { color: var(--stein-text); }
.vergleich dd { margin-top: 4px; font-size: 18px; line-height: 28px; color: var(--stein-text); }
.brennglas dd { font-weight: 500; color: var(--tanne); }

/* ================= Preise ================= */

.preise-kopf {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px;
}
.preise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px;
}
.preis {
  border-radius: var(--radius-l); padding: 24px 24px 26px;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--flaeche); border: 1px solid var(--linie);
}
.preis.hervorgehoben { border-color: transparent; box-shadow: 0 0 0 1.5px var(--tanne); }
.preis.bald-karte { background: var(--papier); border: 1px dashed #C9C4B8; }
.preis-name { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--tanne); }
.preis-betrag {
  font-size: var(--titel-1-groesse); line-height: 1.08; letter-spacing: -0.035em;
  font-weight: 600; color: var(--tinte);
}
.bald-karte .preis-betrag { color: var(--stein-titel); }
.preis-text { font-size: 15px; line-height: 22px; color: var(--stein-text); }

/* ================= Über ================= */

.ueber-innen { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 5vw, 72px); }
.foto {
  border-radius: var(--radius-xl);
  object-fit: cover;
}
.foto-hoch {
  flex: 0 1 340px; width: 340px; max-width: 100%;
  aspect-ratio: 4 / 5; height: auto;
  object-position: center 22%;
}
.ueber-text {
  flex: 1 1 400px; min-width: 0; max-width: 580px;
  display: flex; flex-direction: column; gap: 18px;
}
.ueber-text p { font-size: 18px; line-height: 28px; }
.ueber-text .bereich { font-size: 15px; line-height: 22px; color: var(--stein-text); }
.links-reihe { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 4px; }

/* ================= Schlussband ================= */

.schlussband { background: var(--tanne); color: var(--auf-tanne); }
.schlussband-innen {
  padding-block: clamp(72px, 9vw, 112px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px;
}
.schlussband-text { flex: 1 1 480px; max-width: 640px; display: flex; flex-direction: column; gap: 20px; }
.schlussband h2 { color: var(--auf-tanne); }
.schlussband p { font-size: 18px; line-height: 28px; color: var(--auf-tanne-leise); }
.schlussband .knoepfe-eng { margin-top: 8px; }
.schlussband-marke { flex: 0 1 300px; height: auto; }

.kontaktfeld {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  padding: 28px 32px; background: var(--stein); border-radius: var(--radius-xl);
}
.kontaktfeld-text { display: flex; flex-direction: column; gap: 4px; }
.kontaktfeld-text p { color: var(--stein-text); }

/* ================= Fusszeile ================= */

.fuss { padding: 64px 0 40px; }
.fuss-innen { display: flex; flex-direction: column; gap: 40px; }
.fuss-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 32px;
}
.fuss-marke { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.fuss-marke p { font-size: 15px; line-height: 22px; color: var(--stein-text); max-width: 24em; }
.fuss-nav { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 22px; }
.fuss-nav strong { font-weight: 600; color: var(--tanne); margin-bottom: 6px; }
.fusslink {
  display: inline-flex; align-items: center; min-height: 32px;
  color: var(--stein-text); text-decoration: none;
}
.fusslink:hover { color: var(--tanne); text-decoration: underline; }
.fuss-unten {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px;
  padding-top: 20px; border-top: 1px solid var(--linie);
  font-size: 13px; line-height: 18px; color: var(--stein-leise);
}
.fuss-unten .fusslink { color: var(--stein-leise); }
.herkunft { display: inline-flex; align-items: center; gap: 8px; color: var(--tinte); }

/* ================= Unterseiten ================= */

.seite { padding: clamp(32px, 6vw, 72px) 0 var(--abschnitt); }
.seite-innen { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px); }
.seitenkopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 32px clamp(32px, 5vw, 64px);
}
.seitenkopf-text {
  flex: 1 1 520px; min-width: 0; max-width: 720px;
  display: flex; flex-direction: column; gap: 16px;
}
.seitenkopf-text .bereich { font-size: 15px; line-height: 22px; color: var(--stein-text); }
.seitenkopf-text .einleitung { max-width: var(--textbreite); }
.seitenkopf-bild { flex: 1 1 360px; min-width: 0; max-width: 460px; }
.seitenkopf-bild img { width: 100%; height: auto; aspect-ratio: 7 / 5; }

.inhalt { max-width: var(--textbreite); display: flex; flex-direction: column; gap: 20px; }
.inhalt p { font-size: 18px; line-height: 28px; }
.inhalt h2 + p { margin-top: -4px; }
.abschnitte { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 72px); }

.punkte { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.punkte li {
  position: relative; padding-left: 22px;
  font-size: 18px; line-height: 28px;
}
.punkte li::before {
  content: ""; position: absolute; left: 2px; top: 12px;
  width: 6px; height: 6px; border-radius: 2px; background: var(--stein-rand);
}
.punkte strong { font-weight: 600; }

.zitat {
  max-width: 760px; padding: 32px; border-radius: var(--radius-xl);
  background: var(--flaeche); border: 1px solid var(--linie);
  display: flex; flex-direction: column; gap: 12px;
}
.zitat blockquote { font-size: 28px; line-height: 34px; letter-spacing: -0.01em; color: var(--tanne); }
.zitat figcaption { font-size: 15px; line-height: 22px; color: var(--stein-text); }

.dunkle-box {
  max-width: 760px; padding: 28px 32px; border-radius: var(--radius-xl);
  background: var(--tanne); color: var(--auf-tanne);
  display: flex; flex-direction: column; gap: 10px;
}
.dunkle-box figcaption { font-size: 15px; line-height: 22px; color: var(--auf-tanne-leise); }
.dunkle-box blockquote { font-size: 28px; line-height: 34px; letter-spacing: -0.01em; }

.zwei-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 24px;
}
.karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-l);
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
}
.karte.betont { border: 1.5px solid var(--tanne); }
.karte p { color: var(--stein-text); }
.karte .punkte li { font-size: 16px; line-height: 24px; }
.karte .punkte li::before { top: 9px; }

.bereiche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
}
@media (min-width: 761px) {
  .bereiche { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
}
.bereich-karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-l);
  padding: 24px; display: flex; flex-direction: column; gap: 8px;
}
.bereich-karte h3 { display: flex; align-items: center; gap: 8px; }
.bereich-karte p { color: var(--stein-text); }
.bereich-karte.wartet { border: 1.5px solid var(--tanne); }
.bereich-karte.wartet .punkt { background: var(--licht); }

.branchen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
}
.branche {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-l);
  padding: 24px; display: flex; flex-direction: column; gap: 8px;
}
.branche p { color: var(--stein-text); }

/* Fragen */
.fragen-raster { display: flex; flex-wrap: wrap; gap: 32px clamp(32px, 6vw, 96px); align-items: flex-start; }
.themen { flex: 1 1 200px; max-width: 260px; display: flex; flex-direction: column; gap: 2px; }
.themen a {
  display: flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: var(--radius-m); color: var(--tinte); text-decoration: none;
  font-size: 15px; line-height: 22px;
}
.themen a:hover { background: var(--stein); }
.fragen-spalte { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 48px; }
.fragen-gruppe { display: flex; flex-direction: column; scroll-margin-top: 24px; }
.fragen-gruppe h2 { margin-bottom: 8px; }
.frage { border-top: 1px solid var(--linie); }
.frage:last-child { border-bottom: 1px solid var(--linie); }
.frage summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 64px; padding: 14px 0;
  list-style: none; cursor: pointer;
  font-size: 18px; line-height: 28px; font-weight: 500; color: var(--tinte);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary:hover { color: var(--tanne); }
.frage .zeichen { flex: none; transition: transform .2s ease; }
.frage[open] .zeichen { transform: rotate(45deg); }
.frage .antwort { padding: 0 40px 22px 0; max-width: 62ch; color: var(--stein-text); }
.frage .antwort p + p { margin-top: 12px; }

/* Rechtliches */
.rechtlich { max-width: 720px; display: flex; flex-direction: column; gap: 20px; }
.rechtlich h2 { margin-top: 20px; }
.rechtlich p, .rechtlich li { font-size: 16px; line-height: 24px; }

/* ================= Handy ================= */

@media (max-width: 760px) {
  .nur-desktop { display: none !important; }
  .menue-knopf { display: inline-flex; }
  .menue.offen-menue { display: block; }
  .hauptnav, .kopf .anmelden { display: none; }

  .beweis { flex-direction: column; align-items: flex-start; gap: 6px; }
  .beweis li + li::before { display: none; }

  .fokus-knoepfe { grid-template-columns: 1fr 1fr; }
  .fokus-knoepfe > :first-child { grid-column: 1 / -1; }
  .taste { display: none; }

  .fusslink { min-height: 44px; }
  .fuss-unten { gap: 0 20px; }
  .themen { max-width: none; }
  .frage .antwort { padding-right: 0; }
  .kontaktfeld { padding: 24px; }
  .zitat, .dunkle-box { padding: 24px; }
}
@media (min-width: 761px) {
  .nur-handy { display: none !important; }
}

/* ================= Ergänzungen: Abstände, Nachbauten ================= */

.abstand-24 { gap: 24px; }
.abstand-32 { gap: 32px; }
.abstand-40 { gap: 40px; }
.abstand-48 { gap: 48px; }
.links-start { align-self: flex-start; }
.zwei-spalten.eng { max-width: 880px; }

/* Farben der Kunden in den Nachbauten (Label-Palette der App) */
.punkt.see { background: #3F7F8C; }
.punkt.ziegel { background: #B5532F; }
.punkt.stein { background: #8A857A; }
.punkt.lavendel { background: #7D6FAE; }
.punkt.salbei { background: #6F8F6A; }
.punkt.pflaume { background: #8E4F6E; }
.punkt.senf { background: #D1AC4E; }
.punkt.licht { background: var(--licht); }
.punkt.klein { width: 7px; height: 7px; }

/* Schwebende Aufgaben hinter dem Fokus-Bild: Lage und Unschärfe */
.schwebend:nth-child(2)  { top: 5%;  left: 8%;  filter: blur(2.5px); opacity: .82; transform: rotate(-2deg); }
.schwebend:nth-child(3)  { top: 2%;  left: 56%; filter: blur(4.5px); opacity: .67; transform: rotate(3deg); }
.schwebend:nth-child(4)  { top: 19%; left: -3%; filter: blur(5.5px); opacity: .62; transform: rotate(-4deg); }
.schwebend:nth-child(5)  { top: 17%; left: 72%; filter: blur(3px);   opacity: .77; transform: rotate(-1deg); }
.schwebend:nth-child(6)  { top: 47%; left: -9%; filter: blur(6px);   opacity: .57; transform: rotate(2deg); }
.schwebend:nth-child(7)  { top: 50%; left: 84%; filter: blur(6px);   opacity: .57; transform: rotate(-3deg); }
.schwebend:nth-child(8)  { bottom: 17%; left: 0; filter: blur(3.5px); opacity: .72; transform: rotate(3deg); }
.schwebend:nth-child(9)  { bottom: 4%;  left: 14%; filter: blur(2.5px); opacity: .82; transform: rotate(-2deg); }
.schwebend:nth-child(10) { bottom: 1%;  left: 58%; filter: blur(5px); opacity: .62; transform: rotate(2deg); }
.schwebend:nth-child(11) { bottom: 15%; left: 70%; filter: blur(3px); opacity: .77; transform: rotate(-3deg); }

/* Kleine Nachbauten in den Funktionskarten */
.mini-fokus { overflow: hidden; }
.mini-innen { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.mini-gross { font-size: 16px; line-height: 21px; font-weight: 600; letter-spacing: -0.01em; color: var(--tinte); }
.mini-darum { font-size: 12px; line-height: 16px; color: var(--licht-text); font-weight: 500; }
.mini-knoepfe { display: grid; grid-template-columns: 1.4fr 1fr; gap: 6px; padding: 0 16px 14px; font-size: 13px; font-weight: 500; }
.mini-knoepfe span {
  display: flex; align-items: center; justify-content: center; min-height: 34px;
  border-radius: 8px; border: 1px solid var(--linie); color: var(--tinte);
}
.mini-knoepfe .haupt { background: var(--tanne); border-color: var(--tanne); color: var(--auf-tanne); }
.mini-mail { padding: 11px 14px; display: flex; flex-direction: column; gap: 3px; box-shadow: none; }
.mini-absender { display: flex; justify-content: space-between; font-size: 11px; line-height: 16px; color: var(--stein-leise); }
.mini-auszug { font-size: 12px; line-height: 17px; color: var(--stein-text); }
.mini-mitte { align-self: center; }
.mini-aufgabe { border-color: var(--tanne); padding: 11px 14px; display: flex; flex-direction: column; gap: 6px; }
.mini-chips { display: flex; gap: 6px; font-size: 11px; line-height: 16px; }
.mini-chips span { padding: 1px 6px; border-radius: 4px; background: var(--stein); color: var(--tinte); }
.mini-chips .leise { color: var(--stein-text); }
.mini-projekt { max-width: 270px; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.mini-klein { font-size: 11px; line-height: 16px; color: var(--stein-leise); }
.mini-projekt .mini-gross { font-size: 15px; line-height: 20px; }
.mini-fortschritt { display: flex; flex-direction: column; gap: 4px; font-size: 11px; line-height: 14px; color: var(--stein-text); }
.mini-fortschritt .balken { height: 5px; border-radius: 3px; background: var(--stein); overflow: hidden; }
.mini-fortschritt .balken span { display: block; width: 64%; height: 5px; background: var(--tanne); }
.mini-bereich {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--linie); border-radius: 10px; padding: 7px 10px;
  font-size: 13px; line-height: 18px; color: var(--tinte);
}
.mini-bereich.wartet { border: 1.5px solid var(--tanne); }
.mini-bereich-name { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; line-height: 15px; font-weight: 600; color: var(--stein-text); }
.wartet .mini-bereich-name { color: var(--tanne); }
.ohne-umbruch { white-space: nowrap; }
.titel-3 .bald { line-height: 16px; vertical-align: 3px; }

/* ================= Kontakt: Formulare ================= */

.formulare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 24px; align-items: start; }
.formular-karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-l, 16px);
  padding: 28px; display: flex; flex-direction: column; gap: 12px;
}
.formular-karte > p { color: var(--stein-text); }
.formular { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld label { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--tinte); }
.feld input, .feld textarea {
  font: inherit; font-size: 16px; line-height: 24px; color: var(--tinte);
  background: var(--papier); border: 1px solid var(--stein-rand); border-radius: 10px;
  padding: 11px 14px; min-height: 48px; width: 100%;
}
.feld textarea { resize: vertical; min-height: 144px; }
.feld input:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--licht-text); outline-offset: 2px; border-color: var(--tanne); }
.formular .knopf { align-self: flex-start; cursor: pointer; font-family: inherit; }
.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulare + .nebentext { margin-top: 8px; }
@media (max-width: 760px) {
  .formular-karte { padding: 20px; }
  .formular .knopf { align-self: stretch; }
}