/* =====================================================================
   ExoMind - style.css (Natur & Glas, Kosh 08.11.2026)

   EINE Stylesheet-Datei, aufgebaut nach dem Baustein-Katalog
   (sites/exomind/BAUSTEINE.md). Reihenfolge:
     1  Schrift          6  Seitenkopf + Abschnitte
     2  Tokens           7  Flaechen: panel + card (die zwei Behaelter)
     3  Grundlagen       8  Inhalt: prose, split, checklist, mockup
     4  Bedienelemente   9  Sonderbausteine (Hero, Phasen, FAQ, Zeitleiste,
     5  Rahmen (Himmel,     CTA, Gespraech, Wiki, Formular)
        Navigation,     10  Bewegung (Einblenden, Parallaxe)
        Footer)         11  Responsive
   Regel: Neue Gestaltung = vorhandenen Baustein nutzen. Keine Inline-Styles,
   keine Einzelfall-Klassen. Fehlt etwas, Baustein hier + in BAUSTEINE.md
   ergaenzen.
   ===================================================================== */

/* ---------- 1 Schrift: Source Sans 3, selbst gehostet (OFL) ---------- */
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:300;font-display:swap;src:url(/assets/ci/fonts/source-sans-3-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/ci/fonts/source-sans-3-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/ci/fonts/source-sans-3-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/ci/fonts/source-sans-3-latin-700-normal.woff2) format("woff2")}

/* ---------- 2 Tokens: Farben, Schriftgroessen, Formen ---------- */
:root{
  /* Farben (Broschuere 10/2024) */
  --navy:#2E3856;          /* Dunkelblau CMYK 83/71/40/34 - Text, Marker */
  --blue:#4E6E9E;          /* Mittelblau - Links, Icons (Kontrast 5,2) */
  --sky:#94C7FF;           /* Hellblau - Linien, Punkte */
  --mist:#D9EBFA;          /* Blassblau - Flaechen */
  --sage:#BDD3CF;          /* Graugruen - Flaechen */
  --orange:#FF9130;        /* Orange - NUR Buttons (Text darauf navy) */
  --orange-text:#B85C0C;   /* Orange fuer Kleinschrift auf hell */
  --bg:#F4F8FC;
  --text:var(--navy);
  --muted:#55606F;
  --line:#2E385614;
  --glass:#ffffff94;       /* Glasflaeche */
  --glass-strong:#ffffffc2;/* Glas auf Fotos */
  --glass-edge:#ffffffcc;
  --shadow:0 10px 34px #2E385612;
  --shadow-hover:0 16px 40px #2E38561f;
  --kbz-focus:var(--navy); /* Fokusringe + Cookie-Banner (Theme kbz) */

  /* Schriftgroessen - EINE Skala fuer die ganze Seite */
  --fs-hero:clamp(2.6rem,5.2vw,4.4rem);
  --fs-h1:clamp(2.2rem,4.2vw,3.4rem);
  --fs-h2:clamp(1.8rem,3vw,2.5rem);
  --fs-h3:1.25rem;
  --fs-lead:1.18rem;
  --fs-body:1.06rem;
  --fs-small:.9rem;
  --fs-kicker:.8rem;

  /* Formen */
  /* Ecken: eine Familie. Wo der Browser corner-shape kennt, werden daraus Squircles (unten). */
  --r-panel:24px;
  --r-card:20px;
  --r-hero:28px;
  --r-btn:10px;
  --gap:1.5rem;            /* Abstand in allen Rastern */
  --blur:blur(20px) saturate(150%);
}

/* Squircle-Ecken fuer alle Behaelter, wo der Browser corner-shape kennt (Chrome/Edge).
   Squircles brauchen groessere Radien fuer dieselbe Wirkung. Andere Browser: runde Ecken. */
@supports (corner-shape: squircle){
  :root{--r-panel:56px;--r-card:48px;--r-hero:72px}
  .panel,.card,.hero-panel,.mockup,.faq-item,.section--photo .section-head,.footer-panel,.card-icon,.netz-knoten{corner-shape:squircle}
  .footer-panel{border-radius:88px}
  .card-icon{border-radius:28px}
}

/* ---------- 3 Grundlagen ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:90px}
body{font-family:"Source Sans 3",system-ui,sans-serif;font-size:var(--fs-body);line-height:1.6;
  color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{color:var(--text);line-height:1.2}
h1,.h1{font-size:var(--fs-h1);font-weight:300;letter-spacing:-.01em}
.h1{color:var(--text);line-height:1.2;margin:.67em 0}
h2{font-size:var(--fs-h2);font-weight:300;letter-spacing:-.005em}
h3{font-size:var(--fs-h3);font-weight:600}
h4{font-size:1.05rem;font-weight:600}
p{color:var(--muted)}
a{color:var(--blue)}
img{max-width:100%}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 2rem}
/* Breitenregel: Jeder Behaelter (Panel, Karte, Raster, Hero, FAQ, Zeitleiste, Footer) fuellt
   die volle Breite von .container - so wie Hero und Dreier-Raster. Nur Kopfzeilen
   (page-head, section-head) und Fliesstext-Zeilen sind fuer die Lesbarkeit schmaler. */

/* Betonter Teil einer Ueberschrift: <span class="accent"> im HTML, *Sternchen* in den Daten (wird <em>) */
.accent,h1 em,h2 em{font-style:normal;font-weight:600;background:linear-gradient(120deg,var(--navy) 0%,#3F6AA8 60%,#6E9FD8 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* Kicker: kleine Zeile ueber Ueberschriften */
.kicker{color:var(--orange-text);text-transform:uppercase;letter-spacing:.08em;font-size:var(--fs-kicker);font-weight:700;margin-bottom:.8rem}
/* Lead: Einleitungsabsatz unter Ueberschriften */
.lead{font-size:var(--fs-lead);color:#3E4A63;max-width:700px}

/* ---------- 4 Bedienelemente ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.85rem 1.7rem;border:0;border-radius:var(--r-btn);
  font:inherit;font-size:1rem;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--orange);color:var(--navy);box-shadow:0 6px 18px #FF913040}
.btn-primary:hover{background:#FFA04D;box-shadow:0 8px 24px #FF913059}
.btn-secondary{background:#ffffff8c;color:var(--navy);border:1px solid #2E385633;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-secondary:hover{background:#ffffffcc}
.btn-lg{padding:1rem 2rem;font-size:1.1rem}
/* Button-Zeile */
.actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.actions--center{justify-content:center}
/* Badge (kleine Pille, z.B. "Neu: ...") */
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem 1rem;border-radius:999px;font-size:.9rem;font-weight:600;
  color:var(--navy);background:#ffffffb3;border:1px solid #2E38561a}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);animation:2s infinite pulse}
@keyframes pulse{0%{box-shadow:0 0 #FF9130b3}70%{box-shadow:0 0 0 10px #FF913000}to{box-shadow:0 0 #FF913000}}
/* Stichworte (Pillen-Liste) */
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem}
.tags li{font-size:.78rem;padding:.2rem .6rem;border-radius:999px;background:#94C7FF33;color:var(--navy)}

/* ---------- 5 Rahmen: Himmel, Navigation, Footer ---------- */
/* Himmel hinter allem (kommt aus baseof, nie im Content) */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#F4F8FCcc 0%,#F4F8FCe6 45%,#F4F8FCf2 100%),
    url(/assets/ci/platzhalter-wolken.jpg) center top/cover no-repeat}

.navbar{position:fixed;inset:0 0 auto;z-index:1000;height:76px;display:flex;align-items:center;
  background:linear-gradient(180deg,#ffffff8c,#ffffff59);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid #ffffff80;box-shadow:0 6px 30px #2E385612;transition:background .3s,box-shadow .3s}
.navbar-scrolled{background:linear-gradient(180deg,#ffffffb8,#ffffff94);box-shadow:0 6px 30px #2E38561f}
.nav-container{display:flex;align-items:center;justify-content:space-between}
.logo{display:inline-block;width:156px;height:52px;font-size:0;color:transparent;overflow:hidden;
  background:url(/assets/ci/exomind-logo-blau-grau.svg) left center/contain no-repeat}
.nav-links{display:flex;gap:2.5rem}
.nav-links a{color:var(--navy);font-weight:600;text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--blue)}
.mobile-toggle{display:none;flex-direction:column;justify-content:space-between;width:30px;height:21px;background:0;border:0;cursor:pointer;z-index:1001}
.mobile-toggle .bar{display:block;width:100%;height:3px;border-radius:3px;background:var(--navy)}
.mobile-menu{display:none}

/* Footer: dunkelblaues Glas als Squircle, frei vor dem Himmel. Keine Ueberblendung. */
.footer{margin-top:5rem;padding-bottom:2rem;color:#D9E2EE}
.footer-panel{padding:4rem 3.5rem 0;border-radius:48px;background:#2E3856e6;
  -webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
  border:1px solid #ffffff1f;box-shadow:inset 0 0 0 1px #ffffff0f,0 30px 70px #2E385638}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:2.5rem;margin-bottom:4rem}
.footer .logo{display:block;width:180px;height:60px;margin-bottom:1rem;background-image:url(/assets/ci/exomind-logo-negativ.svg)}
.footer-brand p{max-width:300px;font-size:.95rem;color:#C3CEDD}
.footer-links h3{margin-bottom:1.4rem;font-size:1.1rem;color:#fff}
.footer-links ul{list-style:none}
.footer-links li{margin-bottom:.7rem}
.footer-links a{color:#C3CEDD;font-size:.95rem;text-decoration:none}
.footer-links a:hover{color:var(--orange)}
.footer-bottom{padding:1.8rem 0 2rem;border-top:1px solid #ffffff1f;text-align:center;font-size:.875rem}
.footer-bottom p{color:#AEBBD0}

/* ---------- 6 Seitenkopf + Abschnitte ---------- */
/* Unterseiten: Abstand fuer die feste Navigation */
.page{padding:120px 0 2rem}
/* Seitenkopf (Partial seitenkopf.html): kicker + h1 (+ .accent) + lead */
.page-head{max-width:820px;margin:0 auto 3.5rem;text-align:center}
.page-head .lead{margin:1.2rem auto 0}
.grid + .panel,.grid + .grid{margin-top:3rem}
/* Panel direkt ueber einem Raster (z.B. Kontakt: Buchung ueber Adresse/Mail): gleicher Abstand wie im Raster */
.panel + .grid{margin-top:var(--gap)}

/* Abschnitt der Startseite */
.section{position:relative;padding:6rem 0}
/* Abschnittskopf: Kreismarker + kicker + h2 + lead, zentriert */
.section-head{max-width:820px;margin:0 auto 3rem;text-align:center}
.section-head .lead{margin:1rem auto 0}
.section-head--left{margin-left:0;text-align:left}
/* Unterabschnitt innerhalb eines Abschnitts */
.subsection{margin-top:4rem;padding-top:4rem;border-top:1px solid var(--line)}
.subsection h2{margin-bottom:2rem}

/* Flow-Motiv (Broschuere): Kreismarker ueber jedem Abschnittskopf,
   gepunktete Linie zwischen den Abschnitten */
.section-head::before{content:"";display:block;width:22px;height:22px;margin:0 auto 1.1rem;
  border:4px solid var(--navy);border-radius:50%;background:#fff;box-shadow:0 0 0 6px #ffffffb3}
.section-head--left::before{margin-left:0}
.section + .section:not(.section--photo)::before{content:"";position:absolute;left:50%;top:-3.5rem;height:6.5rem;
  border-left:2px dotted var(--sky);transform:translateX(-1px)}
.split-text .kicker::before{content:"";display:inline-block;width:12px;height:12px;margin-right:.55rem;vertical-align:-1px;
  border:3px solid var(--navy);border-radius:50%;background:#fff}

/* Foto-Abschnitt: Foto als eigene Ebene, laeuft per Parallaxe langsamer.
   Foto waehlen ueber Zusatzklasse (photo-fluss, spaeter weitere). */
.section--photo{isolation:isolate;padding:7rem 0;view-timeline:--photo block}
.section--photo::before{content:"";position:absolute;inset:-6% 0;z-index:-2;background:center/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#0000 0%,#000 22%,#000 78%,#0000 100%);
  mask-image:linear-gradient(180deg,#0000 0%,#000 22%,#000 78%,#0000 100%);will-change:translate}
.photo-fluss::before{background-image:url(/assets/ci/platzhalter-fluss.jpg)}
.section--photo .section-head{max-width:none;padding:2rem 2.4rem;border-radius:var(--r-panel);background:#ffffffb8;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid #ffffffd9}
.section--photo .card{background:var(--glass-strong)}
.section--photo .grid + .actions{margin-top:4.5rem}

/* ---------- 7 Flaechen: die ZWEI Behaelter ----------
   .panel = Glasflaeche fuer Inhalt (Text, Formular, Zeitleisten-Eintrag).
            Reagiert NICHT auf die Maus.
   .card  = Kachel im Raster. Reagiert IMMER gleich auf die Maus.
            Als <a class="card"> verlinkt, sonst <div class="card">. */
.panel,.card{background:var(--glass);border:1px solid var(--line);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:inset 0 0 0 1px var(--glass-edge),var(--shadow)}
.panel{border-radius:var(--r-panel);padding:2.5rem}
.card{position:relative;display:flex;flex-direction:column;gap:.7rem;border-radius:var(--r-card);padding:2.2rem 2rem;
  color:inherit;text-decoration:none;transition:transform .3s,box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-4px);border-color:var(--sky);box-shadow:inset 0 0 0 1px var(--glass-edge),var(--shadow-hover)}
.card h3{margin:0}
.card p{margin:0;line-height:1.6}
/* Icon oben in der Karte, Farbton 1-6 */
.card-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:.8rem;border-radius:18px;color:#fff}
.card-icon svg{width:28px;height:28px}
.tone-1{background:linear-gradient(135deg,#2E3856,#4E6E9E)}
.tone-2{background:linear-gradient(135deg,#4E6E9E,#7FAEE6)}
.tone-3{background:linear-gradient(135deg,#5E8A84,#9DBFB9)}
.tone-4{background:linear-gradient(135deg,#3B4C70,#6E8FBF)}
.tone-5{background:linear-gradient(135deg,#6E9FD8,#A9CDF5)}
.tone-6{background:linear-gradient(135deg,#7A9E98,#BDD3CF)}

/* Aufklapp-Karte: <article class="card card--expand"><details name=… id=…><summary>Kopf</summary>
   <div class="card-details prose">…</div></details></article>
   Offen 2 Spalten breit, Hoehe nach Inhalt (--k), die anderen bleiben 1x1 und fliessen drum herum (dense). Kein Plus-Symbol, die ganze Karte ist der Schalter. Ohne JS geht alles. */
.card--expand{padding:0}
.card--expand details{display:flex;flex-direction:column;flex:1;padding-bottom:2rem}
.card--expand summary{position:relative;display:flex;flex-direction:column;gap:.7rem;padding:2.2rem 2rem 0;list-style:none;cursor:pointer;border-radius:inherit}
.card--expand summary::-webkit-details-marker{display:none}
.card--expand summary:focus-visible{outline:3px solid var(--kbz-focus);outline-offset:-6px}
.card--expand .card-details{padding:1.2rem 2rem 0}
.card--expand .card-details .lead{font-size:1.08rem;margin-bottom:1rem}
.card--expand:has(details[open]){border-color:var(--sky)}
.grid--expand{grid-auto-flow:row dense}
@media (min-width:769px){.card--expand:has(details[open]){grid-column:span 2;grid-row:span var(--k,2)}}
/* Mit JS (site.js): feste Zellhoehe = hoechste geschlossene Karte. Die offene Karte belegt so viele
   Zeilen wie ihr Inhalt braucht (--k), alle anderen bleiben 1x1 und fliessen drumherum. */
.grid--expand.ist-raster{grid-auto-rows:var(--zelle)}
.card--expand.misst{align-self:start}
::view-transition-group(*){animation-duration:.38s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}

/* Raster */
.grid{display:grid;gap:var(--gap)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--kontakt{grid-template-columns:1fr 1.5fr;align-items:start}

/* ---------- 8 Inhalt ---------- */
/* Fliesstext (Markdown, Rechtstexte, Hilfe, Updates) - EIN Regelsatz */
.prose{min-width:0}
.prose>:first-child{margin-top:0}
.prose h1{font-size:1.9rem;font-weight:600;margin:0 0 1rem}
.prose hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
.prose .lead{margin-bottom:.4rem}
.prose h2{font-size:1.5rem;font-weight:600;line-height:1.25;margin:2.4rem 0 .8rem}
.prose h3{font-size:1.2rem;margin:1.8rem 0 .5rem}
.prose h4{margin:1.4rem 0 .4rem}
.prose p,.prose li{line-height:1.7}
/* Zeilenlaenge begrenzen, der Kasten selbst bleibt voll breit */
.prose>:is(p,ul,ol,h1,h2,h3,h4,blockquote){max-width:80ch}
.prose p{margin:0 0 1.1rem}
.prose ul,.prose ol{padding-left:1.3rem;margin:0 0 1.4rem;color:var(--muted)}
.prose li{margin-bottom:.45rem}
.prose strong{color:var(--text)}
.prose table{width:100%;border-collapse:collapse;margin:1.2rem 0 1.8rem;font-size:.95rem}
.prose th,.prose td{padding:.65rem .8rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{font-weight:600;white-space:nowrap}
.prose td{color:var(--muted)}
.prose pre{margin:0 0 1.4rem;padding:1.1rem 1.3rem;border-radius:14px;background:#1d2236;color:#e8e8ef;overflow-x:auto;font-size:.85rem;line-height:1.6}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
.prose blockquote{margin:1.4rem 0;padding:.9rem 1.2rem;border-left:3px solid var(--blue);background:#94C7FF1f;border-radius:0 12px 12px 0}
.prose blockquote p{margin:0;color:var(--text)}
.prose img{border-radius:12px;margin:1.5rem 0;box-shadow:0 10px 30px #2E385614}
.prose figure{margin:1rem 0 1.4rem}
.prose figure img{margin:0}
.prose figcaption{margin-top:.5rem;font-size:var(--fs-small);color:var(--muted);text-align:center;font-style:italic}

/* Bild + Text nebeneinander, .split--reverse tauscht die Seiten */
.split{display:flex;align-items:center;gap:4rem}
.split + .split{margin-top:8rem}
.split--reverse{flex-direction:row-reverse}
.split-media,.split-text{flex:1 1 50%;min-width:0}
.split-text h2{margin-bottom:1.2rem}
.split-text>p{margin-bottom:1.6rem;font-size:1.1rem;line-height:1.7}
/* Haekchen-Liste */
.checklist{list-style:none;display:flex;flex-direction:column;gap:.9rem;margin-bottom:1.6rem}
.checklist li{position:relative;padding-left:2.2rem;color:var(--text);font-weight:600;line-height:1.5}
.checklist li::before{content:"";position:absolute;left:0;top:.05rem;width:24px;height:24px;border-radius:50%;
  background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat}
/* Produkt-Illustration im Glasrahmen (Inhalt aus partials/mockups/) */
.mockup{position:relative;aspect-ratio:10/7;overflow:hidden;border-radius:var(--r-panel);background:var(--glass);
  border:1px solid var(--line);box-shadow:inset 0 0 0 1px var(--glass-edge),var(--shadow)}
.mockup>svg{position:absolute;inset:0;width:100%;height:100%}

/* ---------- 9 Sonderbausteine ---------- */
/* Hero (nur Startseite): Landschaft hinter Glas */
.hero{position:relative;isolation:isolate;min-height:100vh;display:flex;align-items:center;padding:120px 0 80px}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url(/assets/ci/platzhalter-wiese.jpg) center 60%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,#0000 96%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,#0000 96%);will-change:translate}
.hero::after{content:"";position:absolute;inset:0 0 auto;height:35%;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#2E385626,#2E385600)}
.hero-panel{text-align:center;padding:3rem 3.2rem 2.4rem;border-radius:var(--r-hero);background:#ffffff9e;
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  border:1px solid #ffffffd9;box-shadow:inset 0 0 0 1px #ffffff66,0 20px 60px #2E385626}
.hero-panel h1{font-size:var(--fs-hero);line-height:1.1;margin:1.5rem 0}
.hero-panel .lead{margin:0 auto}
.hero-panel .actions{justify-content:center}
/* Kennzahlen-Band */
.stats{display:flex;justify-content:center;gap:2rem;max-width:600px;margin:2.5rem auto 0;padding-top:2rem;border-top:1px solid #2E38561a}
.stat{text-align:center;padding:0 1rem}
.stat + .stat{border-left:1px solid #2E38561a;padding-left:2rem}
.stat-value{font-size:1.5rem;font-weight:600;color:var(--text)}
.stat-label{margin-top:.25rem;font-size:.875rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}

/* Einfuehrungs-Pfeile (Partial phasen.html, Daten data/phasen.yaml).
   Farbe je Schritt von Dunkelblau zu Hellblau - hier, nicht im Partial. */
/* Verbindungsgrafik .netz (Marker KBZNETZ, partials/netz.html, Linien: netz.js):
   oben Kunde, Mitte Team (Mensch + KI), unten Intern - ExoMind® - Extern; aussen Bahnen fuer Linien um die Kaesten */
.netz{--netz-bahn:130px;position:relative;display:grid;margin:0;
  grid-template-columns:var(--netz-bahn) minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr) var(--netz-bahn);
  grid-template-rows:auto 120px auto 120px auto 110px auto;column-gap:1.4rem;
  grid-template-areas:". k k k ." ". . . . ." ". t t t ." ". . . . ." ". i e x ." ". . . . ." ". w w w ."}
.netz-linien{position:absolute;inset:0;z-index:0;overflow:visible;pointer-events:none}
.netz-pfad{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-dasharray:9 8}
.netz-pfad--aussen{stroke:var(--orange-text)}
.netz-spitze{fill:var(--blue)}
.netz-spitze--o{fill:var(--orange-text)}
.netz-label{position:absolute;z-index:2;transform:translate(-50%,-50%);max-width:150px;padding:.3rem .65rem;border-radius:12px;
  text-align:center;font-size:.8rem;font-weight:600;line-height:1.3;color:var(--navy);background:#fffffff0;box-shadow:0 4px 12px #2E38561f}
.netz-label--aussen{max-width:calc(var(--netz-bahn) - 8px);color:var(--orange-text);border:1px solid #B85C0C40}
.netz-knoten{position:relative;z-index:1;display:flex;flex-direction:column;gap:1rem;padding:1.6rem;border-radius:var(--r-card);color:#fff;
  box-shadow:0 14px 34px #2E385626;border:1px solid #ffffff40}
.netz-knoten--kunde{grid-area:k;flex-direction:row;align-items:center;justify-content:space-between;gap:1.4rem;padding:1.8rem 2.2rem;
  color:var(--navy);background:linear-gradient(120deg,#FFB347,#FF9130 55%,#F7A24B);border-color:#ffffff80;
  box-shadow:0 0 0 10px #FF91302e,0 22px 48px #B85C0C40}
.netz-knoten--kunde>div{flex:1;text-align:center}
.netz-knoten--kunde h3{font-size:1.45rem}
.netz-knoten--webshops{grid-area:w;flex-direction:row;align-items:center;gap:1.2rem;padding:1.3rem 1.8rem;
  color:var(--navy);background:linear-gradient(120deg,#D9EBFA,#BDD3CF)}
.netz-knoten--webshops .netz-chips{margin-left:auto}
.netz-knoten--webshops .netz-chips li{background:#ffffff8c;border-color:#2E385626}
.netz-knoten--team{grid-area:t;padding:1.8rem 2rem 2rem;background:linear-gradient(140deg,#2E3856,#4E6E9E 65%,#6F918B);
  box-shadow:0 0 0 10px #94C7FF2e,0 20px 44px #2E385640}
.netz-knoten--intern{grid-area:i;background:linear-gradient(140deg,#5E8A84,#8FB5AE)}
.netz-knoten--exomind{grid-area:e;background:linear-gradient(140deg,#2E3856,#4E6E9E);box-shadow:0 0 0 8px #94C7FF33,0 18px 40px #2E385640}
.netz-knoten--extern{grid-area:x;background:linear-gradient(140deg,#4E6E9E,#7FAEE6)}
.netz-team-kopf{text-align:center}
.netz-team-paar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:1rem}
.netz-person{display:flex;flex-direction:column;gap:.8rem;padding:1.2rem 1.3rem;border-radius:18px;background:#ffffff1f;border:1px solid #ffffff33}
.netz-person h4{margin:0;color:inherit;font-size:1.08rem}
.netz-band{align-self:center;padding:.35rem .8rem;border-radius:999px;background:#ffffff33;font-size:.78rem;font-weight:700;white-space:nowrap}
.netz-kopf{display:flex;align-items:center;gap:.9rem}
.netz-icon{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#ffffff2e}
.netz-icon svg{width:28px;height:28px;stroke-width:1.8}
.netz-knoten--kunde .netz-icon{width:72px;height:72px;border-radius:20px;background:#ffffff59}
.netz-knoten--kunde .netz-icon svg{width:40px;height:40px}
.netz-knoten--webshops .netz-icon{background:#2E38561a}
.netz-kicker{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85;color:inherit}
.netz-knoten h3{margin:0;color:inherit;font-size:var(--fs-h3);line-height:1.25}
.netz-knoten p{margin:0;line-height:1.55;color:inherit}
.netz-knoten--kunde p:last-child{margin-top:.3rem}
.netz-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0}
.netz-chips li{padding:.3rem .75rem;border-radius:999px;background:#ffffff2e;border:1px solid #ffffff4d;font-size:.86rem;font-weight:600}
@media (prefers-reduced-motion: no-preference){
  .netz-pfad{animation:netz-fluss 1.2s linear infinite}
  .netz-knoten--team{animation:netz-puls 3.2s ease-in-out infinite}
}
@keyframes netz-fluss{to{stroke-dashoffset:-17}}
@keyframes netz-puls{50%{box-shadow:0 0 0 18px #94C7FF1f,0 20px 44px #2E385640}}
@media (max-width:1100px){.netz{--netz-bahn:110px;column-gap:1rem}.netz-label{font-size:.74rem}}
@media (max-width:992px){.netz-team-paar{grid-template-columns:1fr}.netz-band{justify-self:center}}
@media (max-width:768px){
  .netz{--netz-linien:aus;grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:none;row-gap:3rem}
  .netz-knoten{grid-area:auto}
  .netz-knoten--kunde,.netz-knoten--webshops{flex-direction:column;text-align:center}
  .netz-knoten--webshops .netz-chips{margin-left:0;justify-content:center}
  .netz-knoten+.netz-knoten::before{content:"";position:absolute;left:50%;top:-3rem;height:3rem;border-left:3px dashed var(--blue)}
}
.phasen-flow{display:grid;gap:3.5rem}
.phasen-reihe{display:flex}
.phase{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;margin-left:-22px;--c:var(--navy)}
.phase:first-of-type{margin-left:0}
.phase-pfeil-wrap{width:100%;filter:drop-shadow(0 8px 14px #0000001f)}
.phase-pfeil{width:100%;height:104px;padding-left:18px;display:flex;align-items:center;justify-content:center;background:var(--c);color:#fff;
  clip-path:polygon(0 0,calc(100% - 36px) 0,100% 50%,calc(100% - 36px) 100%,0 100%,36px 50%)}
.phase-pfeil svg{width:42px;height:42px;stroke-width:1.8}
.phase h4{color:var(--c);font-size:1.2rem;margin:1.2rem 0 .5rem;padding:0 2rem 0 2.6rem}
.phase p{font-size:.95rem;line-height:1.55;padding:0 2rem 0 2.6rem}
.phasen-reihe:nth-child(1) .phase:nth-of-type(1){--c:#2E3856}
.phasen-reihe:nth-child(1) .phase:nth-of-type(2){--c:#344264}
.phasen-reihe:nth-child(1) .phase:nth-of-type(3){--c:#3A4D73}
.phasen-reihe:nth-child(2) .phase:nth-of-type(1){--c:#3F5882}
.phasen-reihe:nth-child(2) .phase:nth-of-type(2){--c:#456491}
.phasen-reihe:nth-child(2) .phase:nth-of-type(3){--c:#4B70A0}
.phasen-reihe:nth-child(3) .phase:nth-of-type(1){--c:#527CAE}
.phasen-reihe:nth-child(3) .phase:nth-of-type(2){--c:#5A88BC}
.phasen-reihe:nth-child(3) .phase:nth-of-type(3){--c:#6394C8}
/* Andere Ablaeufe (Marker KBZABLAUF, z.B. Shop2Production): eine Reihe, Verlauf ueber die ganze Reihe */
.phasen-flow--ablauf .phasen-reihe .phase:nth-of-type(1){--c:#2E3856}
.phasen-flow--ablauf .phasen-reihe .phase:nth-of-type(2){--c:#3F5882}
.phasen-flow--ablauf .phasen-reihe .phase:nth-of-type(3){--c:#4B70A0}
.phasen-flow--ablauf .phasen-reihe .phase:nth-of-type(4){--c:#5A88BC}
.phasen-flow--ablauf .phasen-reihe .phase:nth-of-type(5){--c:#6394C8}
/* Multikanal-Pfeil: Streifen in CI-Farben, die Pfeilform fuehrt sie in der Spitze zusammen */
.phase--multikanal .phase-pfeil{background:linear-gradient(180deg,#2E3856 0 32.6%,#ffffff8c 32.6% 34%,#4E6E9E 34% 66%,#ffffff8c 66% 67.4%,#6F918B 67.4% 100%)}
.kanaele{display:grid;grid-auto-rows:1fr;place-items:center;height:100%}
.phase--multikanal .kanaele svg{width:24px;height:24px}

/* FAQ: <details class="faq-item"><summary>Frage</summary><div class="kbz-faq-a">Antwort</div></details>
   Natives Aufklappen ohne JS; das Theme baut daraus FAQ-JSON-LD (faq_schema: true). */
.faq{display:flex;flex-direction:column;gap:1rem}
.faq-item{border-radius:var(--r-card);background:var(--glass);border:1px solid var(--line);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--glass-edge),var(--shadow)}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.4rem 1.6rem;
  cursor:pointer;list-style:none;font-size:1.15rem;font-weight:600;color:var(--text)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;transition:transform .3s;
  background:#94C7FF33 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E3856' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/16px no-repeat}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-item summary:hover{color:var(--blue)}
.kbz-faq-a{padding:0 1.6rem 1.5rem;color:var(--muted);line-height:1.7}
.kbz-faq-a p{margin-bottom:.8rem}
.kbz-faq-a ul,.kbz-faq-a ol{padding-left:1.3rem;margin-bottom:.8rem}
.kbz-faq-a .btn{margin-top:.4rem}

/* Zeitleiste (Updates): Punkt auf der Linie, Datum, Panel */
/* Linie und Punkte liegen im Rand des Containers, die Panels fluchten mit allen anderen Kaesten */
.timeline{position:relative}
.timeline::before{content:"";position:absolute;left:-1.1rem;top:0;bottom:0;border-left:2px solid #94C7FF66}
.timeline-item{position:relative;margin-bottom:3.5rem}
.timeline-item::before{content:"";position:absolute;left:calc(-1.1rem - 6px);top:.35rem;width:14px;height:14px;border-radius:50%;
  background:#fff;border:3px solid var(--navy)}
.timeline-date{display:block;margin-bottom:.6rem;font-weight:600;color:var(--blue);font-variant-numeric:tabular-nums}

/* Abschluss-Aufruf (Partial cta-erstgespraech.html oder als Block) */
.cta{text-align:center;padding:3rem 2rem;margin:3rem auto 4rem}
.cta h2{margin-bottom:.8rem}
.cta p{max-width:60ch;margin:0 auto 1.6rem;line-height:1.6}
.cta .actions{justify-content:center;margin-top:0}

/* Gespraech (Startseite, Begleitung): Sprechblasen */
.chat{display:flex;flex-direction:column;gap:1rem;min-height:300px;justify-content:center}
.chat-bubble{max-width:80%;padding:1rem 1.5rem;border-radius:14px;font-size:.95rem;animation:6s ease-in-out infinite float;
  background:#ffffffb3;border:1px solid var(--line);border-bottom-left-radius:0;align-self:flex-start;color:var(--text);box-shadow:var(--shadow)}
.chat-bubble--ich{align-self:flex-end;border-bottom-left-radius:14px;border-bottom-right-radius:0;color:#fff;
  background:linear-gradient(135deg,#2E3856e6,#4E6E9Ee6);animation-delay:-2s}
.chat-bubble:nth-child(3){animation-delay:-4s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -6px}}

/* Hilfe/Wiki: Navigation links, Inhalt rechts */
.wiki{display:flex;align-items:flex-start;gap:2rem}
.wiki-sidebar{position:sticky;top:100px;flex:none;width:320px;max-height:calc(100vh - 140px);overflow-y:auto;display:flex;flex-direction:column;gap:1.5rem}
.wiki-sidebar .panel{padding:1.5rem}
.wiki-sidebar h3{margin:0 .5rem .8rem;font-size:1.2rem}
.wiki-sidebar h3 a{color:inherit;text-decoration:none;transition:color .2s}
.wiki-sidebar h3 a:hover,.wiki-sidebar h3 a.active{color:var(--blue)}
.wiki-nav{list-style:none}
.wiki-nav li{margin-bottom:.4rem}
.wiki-nav a{display:block;padding:.55rem 1rem;border-radius:12px;font-size:.95rem;color:var(--text);opacity:.75;text-decoration:none;transition:all .2s}
.wiki-nav a:hover,.wiki-nav a.active{opacity:1;color:var(--blue);background:#fff9;font-weight:600}
.wiki-article{flex:1;min-width:0;padding:2rem 2.4rem}
.prose .wiki-liste{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.5rem;max-width:none}
.prose .wiki-liste li{margin:0;padding:0}
.prose .wiki-liste li::before{content:none}
.wiki-liste a{display:flex;gap:.7rem;align-items:center;padding:.7rem 1rem;border-radius:12px;background:#fff9;color:var(--text);font-weight:600;text-decoration:none;transition:background .2s,color .2s}
.wiki-liste a::before{content:"📄"}
.wiki-liste a:hover{background:#94C7FF33;color:var(--blue)}
.prose .wiki-kats{margin-top:2.5rem;padding-top:1rem;border-top:1px solid #94C7FF55;font-size:.9rem}
.wiki-kats a{display:inline-block;margin:.2rem 0 .2rem .4rem;padding:.2rem .8rem;border-radius:999px;background:#94C7FF2a;text-decoration:none}

/* Formular (Feld-Optik kommt aus dem Theme kbz/components) */
.kbz-form select{width:100%;padding:.7rem .8rem;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit}
/* Ueberschrift + Einleitung direkt in einem Panel (z.B. vor einem Formular) */
.panel > h2{margin-bottom:.6rem}
.panel > h2 + p{margin-bottom:1.6rem}

/* Terminbuchung (Marker <!--KBZTERMIN-->, Theme-Partial kbz/termin.html + kbz/termin.js)
   Drei Schritte: Termin waehlen -> Angaben -> bestaetigt. Ohne Server/JS bleibt das
   Kontaktformular (.termin-fallback) sichtbar, sonst ist es aus. */
.termin svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.termin:not(.ist-bereit) .termin-schritte{display:none}
.termin.ist-bereit .termin-fallback{display:none}
.termin-fallback-text{color:var(--muted);margin-bottom:1.2rem}
.termin-schritte{list-style:none;display:flex;gap:.5rem;margin:0 0 1.8rem;padding:0}
.termin-schritte li{flex:1;display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-radius:14px;background:#ffffff6b;border:1px solid var(--line);
  color:var(--muted);font-size:var(--fs-small);font-weight:600;transition:background .3s,color .3s,border-color .3s}
.termin-schritte li::before{content:"";display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--mist);color:var(--navy);font-size:.8rem;font-weight:700}
.termin-schritte li.ist-aktiv{background:#fff;color:var(--navy);border-color:var(--sky)}
.termin-schritte li.ist-aktiv::before{background:var(--orange)}
.termin-schritte li.ist-erledigt{color:var(--navy)}
.termin-schritte li.ist-erledigt::before{content:"\2713";background:var(--sage)}
.termin-kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.termin-woche{margin:0;font-weight:600;font-size:1.08rem;text-align:center}
.termin-blaettern{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid #2E385626;
  background:#ffffffb3;color:var(--navy);cursor:pointer;transition:background .2s,transform .2s}
.termin-blaettern svg{width:20px;height:20px}
.termin-blaettern:hover:not(:disabled){background:#fff;transform:translateY(-1px)}
.termin-blaettern:disabled{opacity:.35;cursor:default}
.termin-voll{margin:0 0 1rem;padding:.8rem 1.1rem;border-radius:12px;background:var(--mist);text-align:center}
.termin-tage{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem}
.termin-tag{display:flex;flex-direction:column;gap:.7rem;padding:1rem .7rem;border-radius:16px;background:#ffffff8c;border:1px solid var(--line)}
.termin-tag.ist-leer{opacity:.55}
.termin-tag-kopf{margin:0;text-align:center;font-weight:700;line-height:1.25}
.termin-tag-kopf span{display:block;font-size:var(--fs-kicker);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.termin-tag-leer{margin:0;text-align:center;font-size:var(--fs-small);color:var(--muted)}
.termin-zeiten{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.4rem,1fr));gap:.45rem}
.termin-zeit{padding:.55rem .4rem;border-radius:var(--r-btn);border:1px solid #2E385626;background:#fff;color:var(--navy);font:inherit;font-weight:600;
  cursor:pointer;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s}
.termin-zeit:hover{background:var(--mist);border-color:var(--sky);transform:translateY(-1px);box-shadow:0 6px 16px #2E385614}
.termin-zeit:focus-visible,.termin-blaettern:focus-visible,.termin-aendern:focus-visible{outline:3px solid var(--kbz-focus);outline-offset:2px}
.termin-hinweis{margin:1.2rem 0 0;text-align:center;font-size:var(--fs-small);color:var(--muted)}
.termin-gewaehlt{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;margin-bottom:1.6rem;padding:.9rem 1.2rem;border-radius:14px;background:var(--mist)}
.termin-gewaehlt svg{width:22px;height:22px;color:var(--blue);flex:none}
.termin-aendern{margin-left:auto;padding:0;border:0;background:none;color:var(--blue);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
.termin .termin-form{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem;max-width:none}
.termin-form .kbz-field:has(textarea),.termin-form .kbz-privacy,.termin-form .termin-meldung,.termin-form .btn{grid-column:1/-1}
.termin-form .btn{justify-self:start}
.termin input:not([type=checkbox]),.termin textarea,.termin select{border-radius:10px}
.termin-meldung{margin:0 0 1rem;padding:.8rem 1.1rem;border-radius:12px;background:#FFF1E3;color:#8A3F00}
.termin-ok{text-align:center;padding:1rem 0}
.termin-ok:focus{outline:none}
.termin-haken{display:inline-flex;align-items:center;justify-content:center;width:76px;height:76px;margin-bottom:1rem;border-radius:50%;
  background:var(--orange);color:var(--navy);box-shadow:0 10px 28px #FF913059}
.termin-haken svg{width:38px;height:38px;stroke-width:2.6}
.termin-ok h3{font-size:var(--fs-h2);font-weight:300;margin:0 0 .4rem}
.termin-ok-zeit{font-size:var(--fs-lead);font-weight:600;margin:0 0 .4rem}
.termin-ok p{line-height:1.6}
.termin-vorbereitung{max-width:34rem;margin:2rem auto 0;padding-top:1.6rem;border-top:1px solid var(--line);text-align:left}
.termin-vorbereitung .checklist{margin-bottom:0}
@media (prefers-reduced-motion: no-preference){
  .termin-schritt:not([hidden]){animation:.5s cubic-bezier(.165,.84,.44,1) both fadeInUp}
  .termin-haken{animation:.6s cubic-bezier(.34,1.56,.64,1) .15s both termin-pop}
}
@keyframes termin-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@media (max-width:768px){
  .termin-schritte li{padding:.55rem .6rem;font-size:.8rem}
  .termin-tage{grid-template-columns:1fr}
  .termin-tag{display:grid;grid-template-columns:3.4rem 1fr;align-items:start;padding:.8rem .7rem}
  .termin-tag-kopf{text-align:left}
  .termin-tag-leer{text-align:left;align-self:center}
  .termin-zeiten{display:flex;flex-wrap:wrap}
  .termin-zeit{padding:.45rem .55rem}
  .termin .termin-form{grid-template-columns:1fr}
  .termin-schritte li:not(.ist-aktiv){flex:0 0 auto;gap:0;font-size:0}
}

/* ---------- 10 Bewegung ---------- */
@keyframes fadeInUp{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
.page-head,.hero-panel{animation:.9s cubic-bezier(.165,.84,.44,1) both fadeInUp}

/* Parallaxe: Fotos laufen langsamer als die Glasflaechen. Nur Browser mit
   scroll-getriebenen Animationen (Chrome/Edge, Safari 26), sonst statisch.
   Aus bei "Bewegung reduzieren". */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero::before{animation:hero-bg linear both;animation-timeline:scroll(root block);animation-range:0 100vh}
    .hero-panel{animation:.9s cubic-bezier(.165,.84,.44,1) both fadeInUp,hero-panel linear both;
      animation-timeline:auto,scroll(root block);animation-range:normal,0 100vh}
    .section--photo::before{animation:photo-bg linear both;animation-timeline:--photo;animation-range:cover 0% cover 100%}
    .section--photo .card{animation:photo-card linear both;animation-timeline:--photo;animation-range:cover 0% cover 100%}
    .section--photo .card:nth-child(2){animation-name:photo-card-2}
  }
}
@keyframes hero-bg{from{transform:translateY(0)}to{transform:translateY(30vh)}}
@keyframes hero-panel{from{transform:translateY(0)}to{transform:translateY(-8vh)}}
@keyframes photo-bg{from{transform:translateY(-8%)}to{transform:translateY(8%)}}
/* Karten per translate: so bleibt der Hover (transform) erhalten */
@keyframes photo-card{from{translate:0 48px}to{translate:0 -48px}}
@keyframes photo-card-2{from{translate:0 72px}to{translate:0 -72px}}
@media (prefers-reduced-motion: reduce){
  .page-head,.hero-panel,.chat-bubble,.pulse-dot{animation:none}
  .card,.btn{transition:none}
}

/* ---------- Kosten (Seite Einfuehrung & Kosten) ----------
   Kostenband ueber jeder Pfeilreihe (<!--KBZPHASEN kosten-->), Preiskarten (.panel.preis),
   Merkmal-Liste (.merkmale, li.nein = nicht enthalten), Zusatzoptionen (.preis--option). */
.phasen-flow--kosten .phasen-reihe{flex-wrap:wrap;row-gap:1.4rem}
.phasen-flow--kosten .phase{flex-basis:30%}
.phasen-kopf{flex:0 0 100%;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.phasen-kopf .kicker{margin:0}
.phasen-kopf .kicker::before{content:"";display:inline-block;width:12px;height:12px;margin-right:.55rem;vertical-align:-1px;
  border:3px solid var(--navy);border-radius:50%;background:#fff}
.preis-chip{display:inline-block;padding:.4rem 1rem;border-radius:999px;background:var(--glass-strong);border:1px solid var(--sky);
  color:var(--navy);font-weight:600;font-size:var(--fs-small);text-decoration:none;box-shadow:var(--shadow)}
a.preis-chip:hover{background:#fff}
.page-head + .section{padding-top:1rem}
/* Ueberschrift direkt im Panel (ohne .prose) */
.panel>h3{margin:0 0 1.1rem}
.panel>p + h3{margin-top:1.8rem}
.preis{display:flex;flex-direction:column}
.preis .kicker{margin-bottom:1rem}
.preis-wert{margin:0;color:var(--text);font-size:2.6rem;font-weight:600;line-height:1.1;letter-spacing:-.01em}
.preis-wert span{font-size:1.05rem;font-weight:400;color:var(--muted);letter-spacing:0}
.preis-fuer{margin:.6rem 0 1.4rem;font-size:var(--fs-small)}
.merkmale{list-style:none;margin:0;padding:0}
.merkmale li{position:relative;padding:.7rem 0 .7rem 2.1rem;border-top:1px solid var(--line);color:var(--text)}
.merkmale li::before{content:"";position:absolute;left:0;top:.8rem;width:22px;height:22px;border-radius:50%;
  background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat}
.merkmale li.nein{color:#8A93A3;text-decoration:line-through;text-decoration-color:#8A93A399}
.merkmale li.nein::before{background:#C9CFD8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E") center/13px no-repeat}
.preis--option{padding:2rem 1.8rem}
.preis--option .preis-wert{font-size:1.9rem}
.preis--option .preis-wert span{display:block;margin-top:.3rem;font-size:var(--fs-small)}
.preis--option p:last-child{margin:1rem 0 0;font-size:.95rem;line-height:1.6}
.fussnote{margin:1.5rem auto 0;max-width:80ch;text-align:center;font-size:var(--fs-small)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 11 Responsive ---------- */
@media (max-width:992px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .split,.split--reverse{flex-direction:column-reverse;align-items:stretch;gap:3rem}
  .split + .split{margin-top:5rem}
  .grid--kontakt{grid-template-columns:1fr}
  .wiki{flex-direction:column}
  .wiki-sidebar{position:static;width:100%;max-height:none}
}
@media (max-width:820px){
  .hero::before{background-image:url(/assets/ci/platzhalter-wiese-1200.jpg)}
  .photo-fluss::before{background-image:url(/assets/ci/platzhalter-fluss-1200.jpg)}
  .hero-panel{padding:2rem 1.4rem 1.6rem}
  .section--photo .section-head{padding:1.4rem 1.2rem}
  .logo{width:130px;height:44px}
  .phasen-flow{gap:1.2rem}
  .phasen-reihe{flex-direction:column;gap:1.2rem}
  .phase{display:grid;grid-template-columns:96px 1fr;grid-template-rows:auto 1fr;gap:1rem;align-items:start;text-align:left;margin-left:0}
  .phase-pfeil-wrap{grid-row:1/3;width:96px}
  .phase-pfeil{width:96px;height:64px;padding-left:10px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%,22px 50%)}
  .phase-pfeil svg{width:28px;height:28px}
  .phase--multikanal .kanaele svg{width:15px;height:15px}
  .phase h4,.phase p{padding:0;margin:0}
  .phase h4{margin-top:.3rem}
  .phasen-kopf{flex:none}
  .phasen-flow--kosten .phasen-reihe{flex-wrap:nowrap}
  .phasen-flow--kosten .phase{flex-basis:auto}
}
@media (max-width:768px){
  .container{padding:0 1.2rem}
  .timeline::before,.timeline-item::before{display:none}   /* kein Rand fuer die Linie: nur Datum */
  .desktop-only{display:none}
  .mobile-toggle{display:flex}
  .mobile-menu{display:flex;flex-direction:column;position:fixed;inset:0;z-index:999;padding:100px 2rem 2rem;background:var(--bg);
    transform:translateX(100%);transition:transform .4s cubic-bezier(.77,0,.175,1)}
  .mobile-menu.open{transform:translateX(0)}
  .mobile-menu a{padding:1rem 0;border-bottom:1px solid var(--line);font-size:1.5rem;font-weight:600;color:var(--text);text-decoration:none}
  .mobile-menu .btn{margin-top:1.5rem;border-bottom:0;font-size:1.1rem}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .stats{flex-wrap:wrap;gap:1rem}
  .stat + .stat{border-left:0;padding-left:1rem}
  .section{padding:4.5rem 0}
  .panel{padding:1.6rem}
  .cta{padding:2rem 1.2rem}
  .prose table{display:block;overflow-x:auto}
}
@media (max-width:576px){
  .footer-grid{grid-template-columns:1fr}
  .footer-panel{padding:2.5rem 1.6rem 0}
}

/* Lange Links im Fliesstext umbrechen statt die Seite zu verbreitern (Handy, Kosh 13.11.2026) */
.prose{overflow-wrap:break-word}
.prose a{overflow-wrap:anywhere}

/* ---------- Hero: Pfeil „ExoMind® entdecken“ (Kosh 13.11.2026, Florian: edel, nicht verspielt) ----------
   Frosted Orange-Glas (Form per clip-path, obere Ecken gerundet) mit heller Glaskante.
   Beim Laden zieht sich die Kante einmal nach, danach schwebt der Pfeil ruhig. Ist die
   Hälfte des Heros weggescrollt, setzt site.js .ist-weg: weiches Ausblenden, oben kommt er zurück.
   Kein filter/opacity auf .hero-weiter selbst - das würde das Glas (backdrop-filter) abschalten. */
.hero:has(.hero-weiter){--pfeil-h:clamp(84px,12vh,150px);padding-bottom:calc(var(--pfeil-h) + 34px)}
.hero-weiter{position:absolute;left:50%;bottom:clamp(14px,2.4vh,30px);translate:-50% 0;z-index:2;
  width:calc(var(--pfeil-h) * 2.667);height:var(--pfeil-h);display:block;color:var(--navy);text-decoration:none;
  transition:transform .9s cubic-bezier(.2,.7,.2,1);-webkit-tap-highlight-color:transparent}
.hero-weiter-innen{position:absolute;inset:0;display:block}
.hero-weiter-defs{position:absolute}
.hero-weiter-glas{position:absolute;inset:0;clip-path:url(#hero-weiter-clip);
  background:linear-gradient(180deg,#FFB06Bcc 0%,#FF9130b8 55%,#FF9130a8 100%);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),background .4s}
.hero-weiter-form{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:opacity .7s,filter .8s}
.hero-weiter-linie{fill:none;stroke:#ffffffc7;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.hero-weiter-text{position:absolute;left:0;right:0;top:9%;height:52%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:calc(var(--pfeil-h) * .19);line-height:1.12;font-weight:600;letter-spacing:.01em;text-align:center;
  transition:opacity .7s,filter .8s}
.hero-weiter-text span:first-child{font-weight:400}
.hero-weiter:hover .hero-weiter-glas{background:linear-gradient(180deg,#FFB06Bf0 0%,#FF9130e0 55%,#FF9130d1 100%)}
.hero-weiter:focus-visible{outline:none}
.hero-weiter:focus-visible .hero-weiter-linie{stroke:var(--navy);stroke-width:2.4}

@media (prefers-reduced-motion: no-preference){
  .hero-weiter-linie{animation:weiter-kontur 1.8s cubic-bezier(.65,0,.35,1) .6s both}
  .hero-weiter-glas{animation:weiter-ein 1.4s ease .9s both}
  .hero-weiter-text{animation:weiter-ein 1.2s ease 1.3s both}
  .hero-weiter-innen{animation:weiter-schweben 4.2s cubic-bezier(.45,0,.55,1) 2.4s infinite}
}
@keyframes weiter-kontur{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes weiter-ein{from{opacity:0}to{opacity:1}}
@keyframes weiter-schweben{0%,100%{translate:0 0}50%{translate:0 7px}}

.hero-weiter.ist-weg{transform:translateY(18px) scale(.94);pointer-events:none}
.hero-weiter.ist-weg .hero-weiter-glas{opacity:0}
.hero-weiter.ist-weg .hero-weiter-form,.hero-weiter.ist-weg .hero-weiter-text{opacity:0;filter:blur(6px)}
.sprungziel{display:block}
@media (max-height:560px){.hero-weiter{display:none}}
@media (prefers-reduced-motion: reduce){
  .hero-weiter{transition:none}
  .hero-weiter.ist-weg{transform:none}
  .hero-weiter.ist-weg .hero-weiter-form,.hero-weiter.ist-weg .hero-weiter-text{filter:none}
}