/* Gedanken Pflanzen — Grundaussehen. Übernommen aus der Lebensbaum-Startseite (git 1f3cb9a, web/index.html):
   Farben, Schriften, Knöpfe, Kopf, Bento-Hero, Wir, Trust, Fuß. Gilt für ALLE Seiten dieses Ordners. */
:root{
  --bg:#d6bd98; --bg-2:#c8ab7f; --bg-3:#c2a274;
  --card:rgba(255,255,255,.55); --card-2:rgba(255,255,255,.8);
  --hairline:rgba(26,54,54,.14); --hairline-strong:rgba(26,54,54,.26);
  --ink:#40534c; --ink-body:#55685f; --ink-muted:#677d6a; --ink-faint:#8a9587;
  --brand:#677d6a; --brand-deep:#40534c; --brand-bright:#8aa08e;
  --amber:#a15c0a;
  --gutter:clamp(20px, 5vw, 64px);
  --maxw:1400px;
  --r-pill:12px; --r-s:10px; --r:16px; --r-l:24px;
  --shadow-lg:0 24px 70px rgba(0,0,0,.5);
  --zeit:200ms; --zeit-lang:420ms; --kurve:cubic-bezier(.16,.8,.24,1);
  --font-sans:"Jost","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  background:var(--bg); color:var(--ink-body); line-height:1.55; font-size:clamp(15px, .45vw + 13.4px, 17.5px);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
h1,h2,h3{margin:0; line-height:1.08; letter-spacing:-.03em; text-wrap:balance; font-weight:700; font-family:var(--font-display); color:var(--ink)}
p{margin:0}
a{color:inherit}
:focus-visible{outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 45%, transparent); border-radius:6px}

.band{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}

/* Abschnitts-Marke über den Überschriften.
   Bewusst KEIN leuchtender Punkt und keine Schreibmaschinenschrift — diese
   Kombination ist das Erkennungszeichen jeder zweiten KI-Startup-Seite und
   lässt ein deutsches Handwerks-Produkt beliebig wirken. Stattdessen ein
   kurzer Strich wie in einer technischen Unterlage: ruhig und eigen. */
.auge{
  display:inline-flex; align-items:center; gap:12px; font-size:12.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--brand-deep);
}
.auge::before{content:""; width:26px; height:2px; background:var(--brand); flex:none}

/* ---------- Knöpfe ---------- */
.btn{
  font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--r-pill); padding:11px 22px; min-height:44px; white-space:nowrap;
  transition:transform var(--zeit) var(--kurve), box-shadow var(--zeit) var(--kurve),
             background var(--zeit) var(--kurve), border-color var(--zeit) var(--kurve), color var(--zeit) var(--kurve);
}
/* Knöpfe tragen IMMER weiße Schrift. Deshalb sind beide Fassungen kräftig
   gefüllt: helles Grün mit weißer Schrift wäre zu blass zum Lesen
   (Kontrast 3,7:1 — nötig sind 4,5:1). Mit diesem Verlauf sind es 6,2:1
   bis 10:1, also auch bei Sonne auf dem Handy noch klar lesbar. */
.btn.primaer{
  background:linear-gradient(180deg, var(--brand-bright), var(--brand));
  color:#fff; border:1px solid var(--brand-deep);
  box-shadow:0 4px 18px -6px color-mix(in srgb, var(--brand-deep) 70%, transparent);
}
.btn.primaer:hover{
  background:linear-gradient(180deg, var(--brand-bright), var(--brand));
  transform:translateY(-2px); box-shadow:0 8px 26px -6px color-mix(in srgb, var(--brand-deep) 85%, transparent);
}
/* Zweite Wahl: dunkel gefüllt statt Umriss — ein Umriss-Knopf könnte keine
   weiße Schrift tragen, sie stünde auf hellem Grund. */
.btn.gegen{background:var(--ink); color:#fff; border:1px solid var(--ink)}
.btn.gegen:hover{background:var(--brand-deep); border-color:var(--brand-deep); color:#fff; transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* ---------- Kopfzeile ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:40; padding:18px 0;
  transition:background var(--zeit) var(--kurve), padding var(--zeit) var(--kurve), border-color var(--zeit) var(--kurve);
  border-bottom:1px solid transparent;
}
header .inner{display:flex; align-items:center; gap:20px; flex-wrap:wrap; row-gap:10px}
header.tief{
  padding:12px 0; background:rgba(247,242,227,.82);
  backdrop-filter:blur(16px) saturate(1.3); border-bottom-color:var(--hairline);
}
/* Die Marke: Lebensbaum freistehend (kein App-Kästchen — ehrwürdig wie ein
   Siegel), daneben LOHMANN / KONTOR untereinander in gesperrten
   Serifen-Versalien — die Anmutung einer Münzprägung. Georgia/Times sind auf
   jedem Gerät vorhanden: kein Download, kein Datenschutz-Thema. */
.marke{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); min-height:44px}
.marke .zeichen{display:grid; place-items:center}
.marke .zeichen img{width:40px; height:40px; border-radius:50%; display:block}
.wortmarke{display:flex; flex-direction:column; line-height:1.18}
.wortmarke b, .wortmarke span{
  font-family:Georgia, "Times New Roman", serif; font-weight:600;
  font-size:13.5px; letter-spacing:.24em; text-transform:uppercase;
}
.wortmarke b{color:var(--ink)}
.wortmarke span{color:var(--brand-deep)}
nav.hauptnav{display:flex; gap:26px; font-size:clamp(13px,.3vw + 12px,14.5px); font-weight:500; color:var(--ink-muted)}
nav.hauptnav a{text-decoration:none; transition:color var(--zeit) var(--kurve)}
nav.hauptnav a:hover{color:var(--ink)}
@media (max-width:900px){ nav.hauptnav{display:none} }
@media (max-width:420px){ .marke .zusatz{display:none} }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; padding:78px 0 24px;  /* kompakt: alles auf einen Schirm */
  background:radial-gradient(1200px 700px at 15% -15%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%),
             radial-gradient(900px 550px at 100% 5%, color-mix(in srgb, var(--brand-bright) 12%, transparent), transparent 55%);
}
.hero .grid{
  max-width:1180px; position:relative; display:grid; gap:clamp(32px,4vw,60px);
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:center;
}
@media (max-width:1000px){ .hero .grid{grid-template-columns:1fr; max-width:820px} }
.hero h1{
  font-size:clamp(30px, 4.4vw, 50px); margin-top:18px; letter-spacing:-.03em;
  line-height:1.14; max-width:20ch;
}
.hero .unter{
  font-size:clamp(16px, 1.9vw, 19px); color:var(--ink-body); max-width:46ch;
  margin-top:22px; line-height:1.65;
}
.hero .knoepfe{display:flex; gap:14px; flex-wrap:wrap; margin-top:36px}
.hero .beweis{display:flex; gap:24px; flex-wrap:wrap; margin-top:44px; font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint)}
.hero .beweis span{display:flex; align-items:center; gap:8px}
.hero .beweis b{color:var(--brand-bright); font-weight:500}

/* Das CSS der früheren Hero-Bühne ist entfallen (26.08.) — siehe .mock */

/* ---------- Abschnitte ---------- */
/* Großzügiger Abstand zwischen den Abschnitten — Ruhe statt Gedränge
   (Gestaltungssprache nach docunite-Vorbild, Farbwelt bleibt unsere). */
/* Bernd 26.08.: die Abstände sollen überall knapp sein. Von 84–140px auf
   32–56px — die Seite trägt sich über die Inhalte, nicht über Leerraum. */
section{padding:clamp(24px, 3.2vw, 44px) 0}
@media (max-width:640px){ section{padding:76px 0} }
.kopf-abschnitt{max-width:640px}
.kopf-abschnitt h2{font-size:clamp(26px, 3.6vw, 40px); margin-top:14px}
.kopf-abschnitt .einleitung{color:var(--ink-muted); font-size:17px; margin-top:16px; line-height:1.65}

.reveal{opacity:0; transform:translateY(18px); transition:opacity var(--zeit-lang) var(--kurve), transform var(--zeit-lang) var(--kurve)}
.reveal.zu-sehen{opacity:1; transform:none}

/* ---------- Bento-Raster (Cockpit) ---------- */
.hero .band.hero-bento{max-width:none}
.trust .band{max-width:none}
.bento{display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:1fr; gap:14px; margin-top:52px}
@media (max-width:900px){ .bento{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .bento{grid-template-columns:1fr} }
.bento .karte{
  background:var(--card); border:1px solid var(--hairline); border-radius:var(--r);
  padding:26px; transition:transform var(--zeit) var(--kurve), border-color var(--zeit) var(--kurve), background var(--zeit) var(--kurve);
}
.bento .karte:hover{transform:translateY(-4px); border-color:var(--brand); background:var(--card-2)}
.bento .gross{grid-column:span 2; grid-row:span 2; background:linear-gradient(160deg, color-mix(in srgb, var(--brand) 16%, transparent), var(--card))}
@media (max-width:900px){ .bento .gross{grid-column:span 2} }
@media (max-width:560px){ .bento .gross{grid-column:span 1} }
.bento .gross:hover{border-color:var(--brand-bright)}
.ic-badge{
  width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-size:19px;
  background:var(--card-2); border:1px solid var(--hairline); margin-bottom:16px;
}
.karte .nm{font-family:var(--font-display); font-weight:700; font-size:16.5px; margin-bottom:8px; letter-spacing:-.01em; color:var(--ink)}
.karte .ds{font-size:14px; color:var(--ink-muted); line-height:1.6}

/* ---------- Video-Sektion ---------- */
.video-rahmen{
  margin-top:44px; max-width:860px; margin-left:auto; margin-right:auto; aspect-ratio:16/9;
  border-radius:var(--r-l); overflow:hidden; border:1px solid var(--hairline); position:relative;
  background:var(--card); box-shadow:var(--shadow-lg);
}
.video-rahmen video, .video-rahmen iframe{width:100%; height:100%; display:block; border:0}
.video-platzhalter{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--brand) 12%, transparent), var(--card-2));
}
.video-spielen{
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center; font-size:20px;
  background:var(--card-2); border:1px solid var(--hairline-strong); color:var(--brand-deep);
}
.video-text{font-size:14px; color:var(--ink-muted); font-weight:600}
.video-einwilligung{
  max-width:44ch; text-align:center; font-size:12.5px; line-height:1.55;
  color:var(--ink-muted); margin:0 20px;
}
.video-einwilligung b{color:var(--ink)}
.video-einwilligung a{color:var(--brand-deep)}

/* ---------- Über uns / Storyboard ---------- */
/* Die beiden Köpfe: Kürzel statt Foto — zurückhaltend und altert nicht. */
.koepfe{display:flex; gap:34px; flex-wrap:wrap; margin-bottom:34px}
.kopf-person{display:flex; align-items:center; gap:13px}
.kopf-person .kuerzel{
  width:46px; height:46px; flex:none; border-radius:50%; background:var(--brand-deep);
  color:#fff; display:grid; place-items:center;
  font-family:var(--font-display); font-size:16px; font-weight:700;
}
.kopf-person b{display:block; font-size:16px; color:var(--ink)}
.kopf-person small{display:block; font-size:13px; color:var(--ink-faint); line-height:1.45; margin-top:2px}
@media (max-width:560px){ .koepfe{gap:18px; flex-direction:column} }

.wir{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:52px; align-items:center; margin-top:44px;
}
@media (max-width:820px){ .wir{grid-template-columns:1fr; gap:30px} }
.wir-zahl{
  font-family:var(--font-display); font-size:clamp(64px,9vw,110px); font-weight:700;
  letter-spacing:-.05em; color:var(--brand-deep); line-height:.95;
}
.wir-zahl small{display:block; font-size:15px; letter-spacing:0; font-family:var(--font-sans);
  font-weight:600; color:var(--ink-muted); margin-top:10px}
.wir-text p{font-size:16.5px; line-height:1.75; color:var(--ink-body); margin-bottom:16px}
.wir-text p:last-child{margin-bottom:0}
.wir-text strong{color:var(--ink)}
.wir-kern{
  font-family:var(--font-display); font-size:clamp(19px,2.6vw,24px); font-weight:700;
  letter-spacing:-.02em; color:var(--ink); line-height:1.4; margin:20px 0;
  padding-left:18px; border-left:3px solid var(--brand);
}

/* ---------- Kapitel-Leiste rechts (Scrollspy) ----------
   Wie ein seichtes Inhaltsverzeichnis in einer geführten Demo: sehr blass,
   nur das Kapitel, in dem der Besucher gerade steht, tritt hervor.
   Nur auf großen Bildschirmen — auf kleinen wäre sie im Weg. */
.kapitel{
  position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:30;
  display:none; flex-direction:column; gap:14px;
}
@media (min-width:1360px){ .kapitel{display:flex} }
/* Erst ab dem zweiten Fold — im Bento-Hero hat die Leiste nichts zu suchen.
   Sichtbarkeit statt display, damit der Wechsel weich laeuft. */
.kapitel{opacity:0; visibility:hidden; transition:opacity var(--zeit) var(--kurve), visibility var(--zeit) var(--kurve)}
.kapitel.sichtbar{opacity:1; visibility:visible}
.kapitel a{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  font-size:11.5px; font-weight:600; color:var(--ink-faint);
  opacity:.55; transition:opacity var(--zeit) var(--kurve), color var(--zeit) var(--kurve);
}
.kapitel a::before{
  content:""; width:14px; height:2px; border-radius:2px; background:currentColor; flex:none;
  transition:width var(--zeit) var(--kurve);
}
.kapitel a:hover{opacity:.9}
.kapitel a.aktiv{opacity:1; color:var(--brand-deep)}
.kapitel a.aktiv::before{width:24px}

/* ============ Bento-Hero (24.08.) ============ */
.hero-bento{display:grid; grid-template-columns:repeat(12,1fr); gap:16px; align-items:stretch}
.hero-bento .kachel{background:var(--card-2); border:1px solid var(--hairline);
  border-radius:26px; padding:clamp(18px,2.4vw,34px); position:relative; overflow:hidden}
/* Die Textkachel ist nur so hoch wie ihr Inhalt und sitzt unten bündig —
   sie soll den Text tragen, nicht Fläche füllen (Bernd 26.08.). */
.hero-bento .kachel.gross{
  grid-column:span 4; display:flex; flex-direction:column; justify-content:flex-end;
  align-self:end; padding:clamp(20px, 2.2vw, 30px);
}
.hero-bento .kachel.gross h1{font-size:clamp(21px,1.6vw + 12px,30px); line-height:1.15; margin-top:12px}
.hero-bento .kachel.gross .unter{font-size:clamp(13px,.4vw + 11.5px,15px)}
.hero-bento .kachel.gross .knoepfe{margin-top:14px; gap:10px}
.hero-bento .kachel.gross .knoepfe .btn{padding:10px 18px; font-size:13.5px; min-height:0}
.hero-bento .kachel.mock-kachel{grid-column:span 8}
.hero-bento .kachel.buehne{grid-column:span 8;
  display:flex; flex-direction:column; padding:0; overflow:hidden;
  background:var(--card-2); border:1px solid var(--hairline-strong);
  box-shadow:var(--shadow-lg)}
.hero-bento .kachel.buehne .hb-buehne{flex:1}
/* Programm-Kopfzeile wie im echten Hub: Logo, Wortmarke, Modulname, Adresse */
.hero-bento .kachel.buehne .hb-kopf{margin:0; padding:10px 16px;
  background:var(--bg-2); border-bottom:1px solid var(--hairline-strong);
  font-family:var(--font-sans); font-size:12.5px; color:var(--ink); letter-spacing:0}
.hero-bento .kachel.buehne .hb-kopf img{width:22px; height:22px; border-radius:50%}
.hero-bento .kachel.buehne .hb-kopf .hbk-marke{font-family:var(--font-display); font-weight:700}
.hero-bento .kachel.buehne .hb-kopf .hbk-modul{color:var(--ink-muted)}
.hero-bento .kachel.buehne .hb-kopf .hbk-adresse{margin-left:auto; font-family:var(--font-mono);
  font-size:11px; color:var(--ink-faint); background:var(--bg); border:1px solid var(--hairline);
  border-radius:12px; padding:3px 10px}
.hero-bento .kachel.buehne .hb-buehne, .hero-bento .kachel.buehne .hb-leiste{margin:0 16px}
.hero-bento .kachel.buehne .hb-leiste{margin-bottom:12px}
.hero-bento .kachel.klein{grid-column:span 12; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; background:transparent; border:0; padding:0}
.hero-bento .mini{background:var(--card-2); border:1px solid var(--hairline); border-radius:18px;
  padding:clamp(11px,1vw,16px)}
.hero-bento .mini b{display:block; color:var(--ink); font-size:clamp(12.5px,.3vw + 11.5px,14px); margin-bottom:3px}
.hero-bento .mini span{font-size:clamp(11px,.25vw + 10px,12.5px); color:var(--ink-muted); line-height:1.45}
.hero-bento .mini .mzeile{display:flex; align-items:center; gap:8px; margin-bottom:6px}

@media(max-width:900px){
  .hero-bento .kachel.gross,.hero-bento .kachel.buehne,.hero-bento .kachel.mock-kachel,.hero-bento .kachel.klein{grid-column:span 12}
  .hero-bento .kachel.buehne{grid-row:auto}
  .hero-bento .kachel.klein{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){ .hero-bento .kachel.klein{grid-template-columns:1fr} }

/* Funktions-Kacheln im Bento: 3 Spalten, klickbar, Mini-Vorschauen einmalig */
.hero-bento .kachel.klein.funktionen{grid-template-columns:repeat(6,1fr)}
.bv-vor{font-size:11.5px; line-height:1.45; color:var(--ink-muted); margin:4px 0 8px}
.bv-nach{font-size:11px; line-height:1.4; color:var(--ink-faint); margin-top:8px}
@media(max-width:1200px){ .hero-bento .kachel.klein.funktionen{grid-template-columns:repeat(3,1fr)} }
@media(max-width:900px){ .hero-bento .kachel.klein.funktionen{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .hero-bento .kachel.klein.funktionen{grid-template-columns:1fr} }
.hero-bento a.mini{text-decoration:none; display:block; transition:transform var(--zeit) var(--kurve), box-shadow var(--zeit) var(--kurve)}
.hero-bento a.mini:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.bv-zeilen{display:flex; flex-direction:column; gap:7px; margin:10px 0}
.bv-z{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-body)}
.bv-av{width:24px; height:24px; border-radius:50%; background:var(--brand); color:#fff; flex:none;
  display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700}
.bv-t{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bv-status{font-style:normal; font-size:11px; color:var(--brand-deep); border:1px solid var(--hairline-strong);
  border-radius:10px; padding:1px 8px; opacity:0; transform:translateX(6px);
  transition:opacity .4s var(--kurve), transform .4s var(--kurve)}
.bv-status.warn{color:var(--amber)}
.vorschau.spielt .bv-status{opacity:1; transform:none}
.vorschau.spielt .bv-z:nth-child(2) .bv-status{transition-delay:.35s}
.vorschau.spielt .bv-z:nth-child(3) .bv-status{transition-delay:.7s}
/* Heller Beleg mit dunkler Schrift — vorher stand dunkle Flaeche gegen
   helle Schrift, das war zu schwer (Bernd 26.08.). */
.bv-beleg{position:relative; background:#e9dcc0; border:1px solid var(--hairline); border-radius:12px;
  padding:10px 12px 12px; margin:10px 0; overflow:hidden}
/* Spezifisch genug, um .hero-bento .mini span zu schlagen. */
.hero-bento .mini span.bv-dok{font-family:var(--font-mono); font-size:11px; color:#40534c}
.bv-scan{position:absolute; left:0; right:0; top:8px; height:2px; background:var(--brand); opacity:0}
.vorschau.spielt .bv-scan{animation:bvScan .9s var(--kurve) forwards}
@keyframes bvScan{0%{top:8px; opacity:1} 90%{opacity:1} 100%{top:92%; opacity:0}}
.bv-chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.hero-bento .mini .bv-chips span{font-size:11px; color:#40534c; border:1px solid var(--hairline-strong);
  border-radius:10px; padding:2px 8px; opacity:0; transform:translateY(4px);
  transition:opacity .35s var(--kurve), transform .35s var(--kurve)}
.vorschau.spielt .bv-chips span:nth-child(1){transition-delay:.5s}
.vorschau.spielt .bv-chips span:nth-child(2){transition-delay:.7s}
.vorschau.spielt .bv-chips span:nth-child(3){transition-delay:.9s}
.vorschau.spielt .bv-chips span{opacity:1; transform:none}
.bv-mehr{display:none}
.bv-zahl{font-family:var(--font-display); font-weight:700; color:var(--ink);
  font-size:clamp(26px,2vw,36px); line-height:1; margin-bottom:6px}
.bv-zahl small{font-size:.4em; font-weight:600; color:var(--ink-muted)}

/* ============ Trust-Abschluss + riesiges KONTOR ============ */
.trust{background:var(--bg-2); border-top:1px solid var(--hairline); padding:clamp(26px,3.4vw,44px) 0 0}
.trust .baum{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:clamp(28px,4vw,48px)}
.trust .baum img{width:64px; height:64px; border-radius:50%; box-shadow:0 0 0 1px var(--hairline-strong)}
.trust .baum span{font-size:clamp(12px,.3vw + 11px,13.5px); color:var(--ink-muted); letter-spacing:.14em; text-transform:uppercase}
.trust-gitter{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:clamp(30px,4vw,54px)}
@media(max-width:900px){ .trust-gitter{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .trust-gitter{grid-template-columns:1fr} }
.trust-karte{background:var(--card-2); border:1px solid var(--hairline); border-radius:20px; padding:18px 20px}
.trust-karte b{display:flex; align-items:center; gap:9px; color:var(--ink);
  font-size:clamp(13px,.35vw + 12px,14.5px); margin-bottom:5px}
.trust-karte .ik{width:19px; height:19px; stroke:var(--brand); flex:none}
.trust-karte span{font-size:clamp(12.5px,.3vw + 10.5px,13px); color:var(--ink-muted); line-height:1.5}
.trust-spalten{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(20px,3vw,44px);
  padding-bottom:clamp(30px,4vw,50px); font-size:clamp(12.5px,.3vw + 11.5px,14px)}
@media(max-width:980px){ .trust-spalten{grid-template-columns:1fr 1fr} }
@media(max-width:620px){ .trust-spalten{grid-template-columns:1fr} }
.trust-spalten h4{font-family:var(--font-display); color:var(--ink); font-size:clamp(13px,.35vw + 12px,15px);
  margin:0 0 10px; letter-spacing:.06em; text-transform:uppercase}
.trust-spalten a{display:block; color:var(--ink-muted); text-decoration:none; padding:3px 0}
.trust-spalten a:hover{color:var(--brand-deep)}
/* Am Handy 44px-Trefferfläche (Phase 12); am Desktop bleibt der Footer kompakt */
@media (max-width: 48rem){ .trust-spalten a{min-height:44px; display:flex; align-items:center; padding-block:4px} }
.trust-spalten p{color:var(--ink-muted); line-height:1.6; margin:0 0 8px}

/* Das Wort verschwimmt über der Grenze beider Sektionen: obere Hälfte auf
   Sand, untere auf Eclipse — Verlauf zu transparent + leichte Unschärfe. */
.kontor-band{position:relative; height:0; z-index:1; pointer-events:none}
.kontor-riese{position:absolute; left:50%; top:0; transform:translate(-50%,-52%);
  font-family:var(--font-display); font-weight:700; line-height:.8; margin:0;
  font-size:clamp(90px, 17.5vw, 250px); letter-spacing:.06em; white-space:nowrap;
  background:linear-gradient(180deg, rgba(64,83,76,.34) 0%, rgba(64,83,76,.16) 46%,
             rgba(214,189,152,.34) 54%, rgba(214,189,152,.05) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:blur(1.2px); user-select:none}
.fuss-final{background:#1a3636; color:#d6bd98; padding:clamp(38px,5vw,72px) 0 22px; position:relative}
.fuss-zeiten{font-size:12.5px; color:var(--ink-faint); margin-top:10px; line-height:1.5}
.fuss-kanaele{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px}
.fuss-kanaele a{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; min-height:44px;
  color:#d6bd98; font-size:13.5px; padding:9px 15px; border-radius:12px;
  border:1px solid rgba(214,189,152,.28); background:rgba(214,189,152,.06);
  transition:background var(--zeit) var(--kurve), border-color var(--zeit) var(--kurve);
}
.fuss-kanaele a:hover{background:rgba(214,189,152,.13); border-color:rgba(214,189,152,.5)}
.fuss-kanaele .ik{width:16px; height:16px; flex:none}
.fuss-fein{margin-top:12px; padding-top:12px; border-top:1px solid rgba(214,189,152,.16);
  font-size:12.5px; opacity:.75}
.fuss-fein a{color:#d6bd98; text-decoration:none; margin-left:16px}
.fuss-fein a:hover{text-decoration:underline}
@media(max-width:720px){
  .fuss-kanaele a span{font-size:12.5px}
  .fuss-fein{flex-wrap:wrap; gap:6px}
}
.fuss-final .zeilen{display:flex; gap:18px; flex-wrap:wrap; align-items:center;
  font-size:clamp(11.5px,.3vw + 10.5px,13px); color:#8aa08e}
.fuss-final a{color:#d6bd98; text-decoration:none}
.fuss-final a:hover{text-decoration:underline}

/* ---------- Ergänzungen Gedanken Pflanzen ---------- */
.ik{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.korb-knopf{position:relative; display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:50%;
  color:var(--ink); text-decoration:none; border:1px solid var(--hairline); background:var(--card)}
.korb-knopf:hover{border-color:var(--brand)}
.korb-knopf b{position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; border-radius:10px; padding:0 5px;
  background:var(--amber); color:#fff; font-size:12px; display:grid; place-items:center}
main.seite{padding-top:96px}
.kopf-abschnitt.mitte{margin:0 auto; text-align:center}
.kopf-abschnitt.mitte .auge{justify-content:center}
.karte{background:var(--card-2); border:1px solid var(--hairline); border-radius:var(--r-l); padding:clamp(16px,2vw,26px)}
.hinweis{font-size:13px; color:var(--ink-muted); line-height:1.55}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none}
.korb-knopf b[hidden]{display:none}

/* ---------- Weicher, weiblicher (Bernd 28.09.2026) ----------
   Gleiche Farben, aber: elegante Serif statt Technik-Grotesk, leichte Schrift,
   rundere Formen, ein zarter Rosé-Hauch als Begleitton. */
:root{ --rose:#c9a196; --rose-hell:#ecd9d1; --r:22px; --r-l:30px }
body{font-weight:300; letter-spacing:.005em}
h1,h2,h3{font-weight:500; letter-spacing:-.005em; line-height:1.1}
h1 em, h2 em{font-style:italic; font-weight:400; color:var(--brand-deep)}
.auge{font-family:var(--font-sans); font-weight:500; letter-spacing:.18em; font-size:12px; color:var(--ink-muted)}
.auge::before{width:22px; height:1px; background:var(--rose)}
.btn{font-weight:500; letter-spacing:.04em}
.wortmarke b, .wortmarke span{font-family:var(--font-display); font-weight:500; font-size:14px; letter-spacing:.28em}
.karte .nm, .kopf-abschnitt h2{font-weight:500}
b, strong{font-weight:500}
@media(max-width:560px){ header .inner > .btn.primaer{display:none} }

/* ---------- Freundlicher und lebendiger (Bernd 29.09.2026) ----------
   Hellerer, wärmerer Grund statt Sand, weiße Karten, Rosé und Sonnengelb als Begleiter,
   Abschnitte gleiten beim Scrollen herein (einmal, nichts läuft endlos). */
:root{
  --bg:#f7efe2; --bg-2:#efe3cf; --bg-3:#e7d6ba;
  --card:rgba(255,255,255,.7); --card-2:#fffdf8;
  --sonne:#f2b632; --sonne-hell:#fdf0c8;
}
body{background:radial-gradient(1200px 700px at 85% -10%, #fff6dd 0%, transparent 60%), radial-gradient(900px 600px at -10% 30%, #f6e4dc 0%, transparent 55%), var(--bg); background-attachment:fixed}
header.tief{background:rgba(255,251,243,.9)}
.hero-bento .kachel, .karte, .trust-karte{box-shadow:0 18px 40px -28px rgba(120,84,40,.35)}
.btn.primaer{background:linear-gradient(180deg, #7f9a80, #5f7a63)}
.auge{color:#a0675b}
.auge::before{background:var(--sonne)}
.trust{background:var(--bg-2)}
.kontor-riese{background:linear-gradient(180deg, rgba(64,83,76,.28) 0%, rgba(64,83,76,.12) 46%, rgba(247,239,226,.3) 54%, rgba(247,239,226,.05) 100%); -webkit-background-clip:text; background-clip:text}

/* Hereingleiten beim Scrollen */
.gleiten{opacity:0; transform:translateY(26px); transition:opacity .8s var(--kurve), transform .8s var(--kurve)}
.gleiten.da{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .gleiten{opacity:1; transform:none} }
/* Karten reagieren auf die Maus */
.karte, .regal .ware, .ware, .uebersicht a{transition:transform .35s var(--kurve), box-shadow .35s var(--kurve), border-color .35s}
.karte:hover, .regal .ware:hover, .ware:hover, .uebersicht a:hover{transform:translateY(-6px); box-shadow:0 26px 50px -30px rgba(120,84,40,.5)}

/* ---------- Fuß: Abstand, Pflichtangaben (29.09.2026) ---------- */
.trust{margin-top:clamp(56px,8vw,110px)}
.pflicht-leiste{display:flex; flex-direction:column; gap:18px; align-items:center; text-align:center; padding:20px 0 30px; border-bottom:1px solid var(--hairline); margin-bottom:28px}
.pflicht-reihe{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; justify-content:center}
.gewaehr-label{display:inline-flex; align-items:center; gap:10px; text-decoration:none; background:#003399; color:#fff; border-radius:10px; padding:8px 14px 8px 8px; font-size:13.5px}
.gewaehr-label .gl-sterne{width:30px; height:30px; border-radius:6px; background:#ffed00; color:#003399; display:grid; place-items:center; font-size:16px}
.gewaehr-label b{font-weight:600}
.zahlarten{display:flex; flex-direction:column; gap:10px; align-items:center}
.zahlarten > span{font-size:14px; font-weight:500; color:var(--ink); letter-spacing:.02em}
.zahlarten .za-reihe{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.zahlarten i{width:72px; height:46px; display:grid; place-items:center; border-radius:9px; background:#fff; border:1px solid var(--hairline-strong); box-shadow:0 2px 6px -3px rgba(0,0,0,.15)}
.zahlarten i img{width:52px; height:30px; object-fit:contain}
.ts-platz{display:inline-flex; align-items:center; gap:10px; background:transparent; border:1.5px dashed var(--hairline-strong); border-radius:12px; padding:10px 16px; font-size:13.5px; color:var(--ink); text-align:left}
.ts-platz .ts-siegel{width:44px; height:44px; border-radius:50%; background:#ffdc0f; display:grid; place-items:center; font:700 15px/1 Arial, sans-serif; color:#000}
.ts-platz small{display:block; color:var(--ink-muted); font-size:12px}
.widerruf-knopf{display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:12px; border:1.5px solid var(--ink); color:var(--ink); text-decoration:none; font-weight:500; font-size:14px; background:#fff}
.widerruf-knopf:hover{background:var(--ink); color:#fff}

/* ---------- Fuß: Schriftzug Gedankensaat mit Zweigen (29.09.2026, statt Riesen-„SAAT“) ---------- */
.fuss-zeichen{display:flex; align-items:center; justify-content:center; gap:clamp(8px,2vw,26px); margin:0 0 clamp(28px,4vw,48px); color:#9fb88a}
.fz-zweig{width:clamp(70px,13vw,170px); height:auto; flex:none}
.fz-rechts{transform:scaleX(-1)}
.fz-mitte{text-align:center}
.fz-name{margin:0; font:italic 400 clamp(40px,6.4vw,86px)/1 "Cormorant Garamond", Georgia, serif; color:#f3e6cc; letter-spacing:.01em}
.fz-spruch{margin:10px 0 0; font:500 12.5px/1 var(--font-sans); letter-spacing:.32em; text-transform:uppercase; color:#c9a96e}
@media(max-width:560px){ .fz-zweig{width:52px} }
.fuss-final .zeilen, .fuss-final .zeilen span{font-size:12.5px}
.trust-spalten small, .trust-spalten p small{font-size:12.5px}

/* Kopf auf Handy und Tablet: immer EINE Zeile (Logo · Konto · Korb · Menü). Der Knopf „Gedanken pflanzen“
   steht dann im Menü, sonst bricht die Zeile um und die Kopfzeile wird doppelt so hoch. */
@media (max-width:900px){
  header{padding:12px 0}
  header .inner{flex-wrap:nowrap; gap:10px}
  header .inner > .btn.primaer{display:none}
  .marke{min-width:0}
  #menueKnopf{margin-left:0}
  header .inner > span{min-width:0; flex:1 1 0}
}
@media (max-width:400px){ header .inner{gap:6px} .marke{gap:8px} .marke .zeichen img{width:34px; height:34px} .wortmarke b, .wortmarke span{font-size:12px; letter-spacing:.2em} }
/* Nichts darf die Seite seitlich verbreitern (z. B. eine Wiesenblume am Rand des Blumen-Knopfs).
   clip statt hidden: kein eigener Scrollbereich, angeheftete (sticky) Blöcke funktionieren weiter. */
html, body{overflow-x:clip}