/* Sessionario 1.8.0 – Landingpage sessionario.com
   Gestaltung folgt der App: gleiche Farben, gleiche Formen. */

/* Cream und Teal - entschieden von Marcel am 08.09.2026 (Variante C).
   Begruendung und Kontrastwerte: docs/optik-verkaufsseite.md

   Die WICHTIGE Regel dieser Palette: --teal ist eine Farbe fuer FLAECHEN und
   grosse Knopfbeschriftungen. Kleiner Text in Teal nimmt --teal-tief. Auf
   Cream bringt das helle Teal nur 2,7:1 - ein Link damit ist im hellen
   Seminarraum nicht zu lesen, und das faellt niemandem auf, weil es nicht
   wie ein Fehler aussieht. */
:root{
  --teal:#0B8A7E;           /* Flaechen, Knoepfe (weisse Schrift: 4,2:1)   */
  --teal-tief:#0A6E63;      /* Text und Links auf Cream (5,5:1)            */
  --teal-mist:#E4F2EE;      /* ruhige Fuellung fuer Kaesten und Chips      */
  --navy:#14233F;           /* Ueberschriften                              */
  --ink:#333F4E;            /* Fliesstext                                  */
  --muted:#5A6A78;
  --line:#E2DACB;
  --bg:#F7F2E8;             /* Grundflaeche                                */
  --bg-tief:#EDE6D8;        /* Leiste, abgesetzte Baender                  */
  --panel:#FFFCF6;          /* Karten - kein reines Weiss, das beisst auf  */
                            /* Cream                                       */
  --coral:#ef856d; --blue:#77a4b7; --gold:#efbb42; --violet:#725ca3;
  --warn:#a63a2d;
  --shadow:0 5px 18px rgba(20,35,63,.07);
  --radius:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:17px/1.62 Inter,system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
/* Literata statt Georgia: eine Leseschrift, fuer Bildschirme gebaut. Der
   Rueckfall bleibt Georgia - laedt der Webfont nicht, sieht die Seite aus
   wie vorher und nicht wie ein Unfall. */
h1,h2,h3,h4{font-family:Literata,Georgia,'Times New Roman',serif;margin:8px 0;line-height:1.25;
  color:var(--navy);text-wrap:balance}
h1{font-size:46px;margin:10px 0 14px}
h2{font-size:32px}
h3{font-size:21px}
p{margin:10px 0}
a{color:var(--teal-tief)}
img{max-width:100%}

.btn{
  display:inline-block;border:0;border-radius:11px;background:var(--teal);color:#fff;
  padding:13px 24px;font-weight:800;text-decoration:none;cursor:pointer;font-size:16px;
}
.btn:hover{filter:brightness(.94)}
.btn.big{padding:15px 28px;font-size:17px}
.btn.ghost{background:var(--panel);color:var(--teal-tief);border:1.5px solid var(--teal)}
/* Die dritte Stufe: ein Weg, kein Knopf. Wer schon weiss, dass er ein Konto
   will, findet ihn - alle anderen sollen ihn nicht mit den beiden darueber
   verwechseln. Deshalb kein Rahmen und keine Flaeche, nur Text. */
.btn-text{
  display:inline-block;color:var(--teal-tief);font-weight:700;font-size:15px;
  text-decoration:underline;text-underline-offset:3px;padding:13px 4px;
}
.btn-text:hover{color:var(--navy)}
.meta{color:var(--muted)}
.eyebrow{color:var(--teal-tief);font-weight:800;letter-spacing:3px;text-transform:uppercase;font-size:12px}

/* ---------------------------------------------------------------- Kopfzeile */

.site-top{
  position:sticky;top:0;z-index:10;background:rgba(247,242,232,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:26px;
  padding:12px max(20px,4vw);
}
.site-brand{display:flex;align-items:center}
.site-brand img{width:170px;max-height:46px;object-fit:contain;object-position:left center}
.site-nav{display:flex;gap:22px;margin:auto}
.site-nav a{color:var(--muted);font-weight:700;text-decoration:none;padding:4px 0}
.site-nav a:hover{color:var(--teal-tief)}
.site-actions{display:flex;align-items:center;gap:14px}
.lang{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:9px;padding:3px 5px;background:var(--panel)}
.lang i{color:var(--line);font-style:normal}
.lang-btn{border:0;background:none;padding:5px 7px;border-radius:6px;cursor:pointer;font-weight:700;font-size:13px;color:var(--muted)}
.lang-btn:hover{color:var(--teal-tief)}
.lang-btn.active{background:var(--teal-mist);color:var(--teal-tief)}
.site-actions .btn{padding:11px 18px;font-size:14px}

/* -------------------------------------------------------------------- Hero */

.hero{
  max-width:1240px;margin:0 auto;padding:64px 26px 40px;
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:44px;align-items:start;
}
.hero-text{padding-top:18px}
/* Die Hero-Ueberschrift ist laenger als die alte und braucht eine eigene
   Groesse: Bei 46px brach sie auf VIER Zeilen, und eine vierzeilige
   Ueberschrift liest niemand mehr als Satz. */
.hero-text h1{font-size:40px;letter-spacing:-.01em}
@media (max-width:900px){ .hero-text h1{font-size:34px;max-width:none} }
.lead{font-size:19px;color:#3d4d46;max-width:56ch}
/* Die drei Wege in einer Reihe, die Microcopy darunter in eigener Zeile -
   sie gehoert zum ersten Knopf und nicht neben den dritten. */
.hero-cta{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap;align-items:center}

.hero-note{color:var(--muted);font-size:14px;margin-top:14px;max-width:52ch}
.usp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.usp-chips span{
  background:var(--teal-mist);color:var(--teal-tief);border-radius:999px;
  padding:6px 14px;font-size:13px;font-weight:800;
}

/* Hero-Visual: Mockup plus freigestellter Sessi daneben. */
.hero-visual{position:relative}
.hero-sessi{width:230px;height:auto;position:absolute;right:-30px;bottom:-40px;z-index:5;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.18))}

/* Mockup der App: sieht aus wie die Ablauf-Seite auf app.sessionario.com */
.app-mockup{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);padding:20px;font-size:13px;
}
.mock-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.mock-title{font-size:16px}
.mock-conn{
  display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;
  padding:5px 11px;font-size:12px;color:var(--muted);white-space:nowrap;
}
.mock-conn.off{border-color:var(--gold);background:#fff8e8;color:#7a5b0d}
.dot{width:8px;height:8px;border-radius:50%;background:#c8d3ce;display:inline-block;flex:0 0 auto}
.dot.on{background:#36a572}
.dot.off{background:var(--gold)}
.mock-legend{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:12px;margin-bottom:14px}
.mock-legend span{display:flex;align-items:center;gap:6px}
.mock-days{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.mock-day{
  background:#f9fbfa;border:1px solid var(--line);border-radius:14px;
  padding:12px;min-width:0;
}
.mock-day-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.mock-day-head h4{margin:2px 0;font-size:15px}
.mock-balance{text-align:right;min-width:110px}
.mock-bal-bar{display:flex;height:6px;border-radius:999px;overflow:hidden;background:var(--line)}
.mock-bal-bar i{display:block;height:100%}
.mock-balance small{color:var(--muted);font-size:10px;display:block;margin-top:3px}
.mock-card{
  display:grid;grid-template-columns:52px 6px minmax(0,1fr);gap:0;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;margin-bottom:9px;
}
.mock-rail{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 6px}
.mock-rail strong{color:var(--teal-tief);font-size:12px;font-variant-numeric:tabular-nums}
.mock-dur{font-size:10px;color:var(--muted);white-space:nowrap}
.mock-bar{display:block}
.mock-body{padding:9px 11px;min-width:0}
.mock-body>strong{display:block;font-size:12.5px;line-height:1.35}
.mock-lvl{display:inline-block;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:10px;color:var(--muted);font-weight:700;margin-top:5px}
.mock-body p{margin:4px 0 0;font-size:11px;color:var(--muted);line-height:1.45}
/* Die Farbe steht am Element, nicht in einer Klasse.
   Genau wie in der App: dort rechnet workshop.js
       background: mixWhite(kategoriefarbe, 0.9)
       border-color: mixWhite(kategoriefarbe, 0.62)
   und setzt beides als style aufs Kartenelement. Weil Themenfarben frei
   waehlbar sind, kann das CSS die Pastellflaeche gar nicht kennen.

   Hier stand frueher eine Handvoll erfundener Klassen (green, blue, gold,
   coral, violet) mit ausgedachten Werten - und sie faerbten nur `.mock-body`.
   Deshalb war die Uhrzeitspalte weiss, waehrend sie in der App die Farbe der
   Karte traegt. Die Klassen sind weg; die Werte im HTML sind mit derselben
   Formel aus denselben Kategoriefarben gerechnet. */
.mock-offline{margin-top:14px}
.mock-offline span{
  display:block;background:var(--teal-mist);color:var(--teal-tief);border-radius:10px;
  padding:9px 13px;font-weight:800;font-size:12px;text-align:center;
}

/* --------------------------------------------------------------- Sektionen */

.section{max-width:1100px;margin:0 auto;padding:64px 26px}
.section-head{max-width:760px;margin-bottom:34px}
.section-sub{font-size:17px;color:#3d4d46;max-width:62ch}
.section-sub.small{font-size:14px;color:var(--muted);margin-top:16px}

.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.feature{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);
}
.feature h3{margin-top:18px}
.feature p{color:var(--muted)}
.feature-visual{min-height:150px;display:grid;place-items:center}

/* Mini-Karten für die Feature-Visuals – gleiche Optik wie die App */
.mini-card{
  width:min(320px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:13px;box-shadow:var(--shadow);
}
.mini-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.mini-head strong{font-size:13px}
.mini-depth{border:1px solid var(--line);border-radius:8px;padding:3px 8px;color:var(--muted);font-size:11px;font-weight:700;white-space:nowrap}
.mini-lvl{display:none;border-top:1px solid var(--line);margin-top:8px;padding-top:8px}
.mini-lvl.on{display:block}
.mini-lvl b{display:block;color:var(--teal-tief);font-size:10px;text-transform:uppercase;letter-spacing:1px}
.mini-lvl p{margin:2px 0 0;font-size:12px;color:#44514c}

.mini-balance{width:min(320px,100%);background:#f9fbfa;border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.mini-bal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.mini-bal-head span{font-weight:800;font-size:13px}
.mini-bal-label{color:var(--muted);font-size:11px;font-weight:700}
.mini-bal-bar{display:flex;height:8px;border-radius:999px;overflow:hidden;background:var(--line)}
.mini-bal-bar i{display:block;height:100%}
.mini-balance>small{color:var(--muted);font-size:11px;display:block;margin-top:6px}
.mini-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;font-size:11px;color:var(--muted)}
.mini-legend span{display:flex;align-items:center;gap:5px}
.mini-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}

.mini-offline{width:min(320px,100%);background:#fff8e8;border:1px solid var(--gold);border-radius:12px;padding:16px;box-shadow:var(--shadow);display:grid;justify-items:start;gap:10px}
.mini-pill{border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800;background:var(--panel);border:1px solid var(--gold);color:#7a5b0d}
.mini-pill.ok{border-color:var(--teal-tief);color:var(--teal-tief);background:var(--teal-mist)}
.mini-note{margin:0;color:#7a5b0d;font-size:12px}

.mini-library{width:min(320px,100%);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px;box-shadow:var(--shadow)}
.mini-lib-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.mini-chip{background:var(--teal-mist);color:var(--teal-tief);border-radius:999px;padding:3px 9px;font-size:11px;font-weight:800}
.mini-stars{color:#e1ad2f;font-size:12px;font-weight:700}
.mini-library>strong{font-size:14px}
.mini-tags{display:flex;gap:6px;margin:8px 0}
.mini-tags span{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:2px 9px;font-size:11px;color:var(--muted)}
.mini-library p{margin:6px 0 0;color:var(--muted);font-size:12px}

/* ----------------------------------------------------------------- Import */

.section-import{background:var(--teal-mist)}
.section-import .section-head h2{color:var(--teal-tief)}
.import-list{display:grid;gap:14px;max-width:820px}
.import-row{
  display:flex;align-items:center;gap:16px;background:var(--panel);
  border:1px solid #bfd8cc;border-radius:14px;padding:18px 20px;
}
.import-icon{font-size:26px}
.import-row strong{display:block;font-size:17px}
.import-row small{color:var(--muted)}
.import-count{margin-left:auto;background:var(--teal);color:#fff;border-radius:999px;padding:6px 14px;font-weight:800;font-size:13px;white-space:nowrap}
.import-count.premium{background:#725ca3}

/* ----------------------------------------------------------------- Sessi */

.sessi-section{background:var(--teal-mist);border-top:1px solid #bfd8cc;border-bottom:1px solid #bfd8cc}
.sessi-intro{display:flex;align-items:center;gap:28px;max-width:820px;margin:0 auto}
.sessi-hero{width:340px;height:auto;object-fit:cover;border-radius:var(--radius);flex:0 0 auto;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.sessi-wink{width:90px;height:90px;object-fit:contain;margin:26px auto 0;display:block;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.12))}
.import-sessi{width:130px;height:auto;object-fit:contain;margin:30px auto 0;display:block;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.14))}
.sessi-intro h2{color:var(--teal-tief);margin-bottom:8px}
.sessi-points{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:820px;margin:30px auto 0}
.sessi-point{background:var(--panel);border:1px solid #bfd8cc;border-radius:14px;padding:18px 20px}
.sessi-point strong{display:block;font-size:16px;color:var(--teal-tief);margin-bottom:6px}
.sessi-point p{margin:0;color:var(--muted);font-size:14px}
@media (max-width:760px){.sessi-intro{flex-direction:column;text-align:center}.sessi-points{grid-template-columns:1fr}
  .hero-sessi{width:150px;right:-14px;bottom:-24px}
  .newsletter-box{flex-direction:column;text-align:center}
  .newsletter-box form{margin-left:auto;margin-right:auto}}

/* ----------------------------------------------------------------- Preise */

.pricing-card{
  background:var(--panel);border:1px solid var(--teal);border-radius:18px;
  padding:34px;max-width:820px;box-shadow:0 14px 44px #173b2c14;text-align:center;
}

/* Drei Tarife nebeneinander. Gleich hohe Karten, damit der Knopf unten in
   einer Linie steht - sonst sieht das mittlere Angebot aus wie ein Fehler. */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{
  position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:28px 24px;display:flex;flex-direction:column;box-shadow:var(--shadow);
}
.plan.featured{border:2px solid var(--teal);box-shadow:0 14px 44px #173b2c1f}
.plan-flag{
  position:absolute;top:-13px;left:24px;background:var(--teal);color:#fff;
  border-radius:999px;padding:4px 12px;font-size:12px;font-weight:800;
}
.plan h3{margin:0 0 6px;font-size:22px}
.plan .price-big{font-size:38px;line-height:1.1}
.plan .price-big small{display:block;font-size:13px;margin-top:4px;white-space:normal}
.plan-sub{color:var(--muted);font-size:14px;margin:8px 0 0}
.plan .pricing-list{margin:18px 0 24px;max-width:none;font-size:15px}
.plan .btn{margin-top:auto;text-align:center}

@media (max-width:900px){
  .pricing-grid{grid-template-columns:1fr}
  .plan.featured{order:-1}
}
.pricing-top{display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left}
.price-big{font-size:44px;font-weight:800;color:var(--teal-tief);white-space:nowrap}
.price-big small{font-size:15px;color:var(--muted);font-weight:700}
.pricing-list{list-style:none;margin:24px 0;padding:0;text-align:left;display:grid;gap:10px;max-width:560px;margin-left:auto;margin-right:auto}
.pricing-list li{padding-left:30px;position:relative}
.pricing-list li::before{
  content:'✓';position:absolute;left:0;top:0;color:var(--teal-tief);font-weight:800;
}
.pricing-note{background:var(--teal-mist);border-radius:10px;padding:12px 16px;color:var(--teal-tief);font-weight:700;max-width:640px;margin:20px auto}

/* Das Angebot, das es JETZT gibt - gross, gruen, vor den Tarifen. */
.beta-karte{
  background:var(--panel);border:2px solid var(--teal);border-radius:18px;
  padding:30px;box-shadow:0 14px 44px #173b2c1f;max-width:760px;
}
.beta-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.beta-kopf h3{margin:0 0 4px;font-size:24px;color:var(--teal-tief)}
.beta-karte .pricing-list{margin:20px 0 24px;max-width:none}
.beta-karte .btn{margin-bottom:14px}
.tarif-vorschau{margin:44px 0 14px;font-size:20px;color:var(--muted);font-weight:800}

/* Ein Tarif, den es noch nicht zu buchen gibt: sichtbar, aber zurueckgenommen. */
.plan.spaeter{opacity:.82}
.plan-flag.grau{background:var(--bg);color:var(--muted);border:1px solid var(--line)}

/* Ein Satz, der die Preisfrage beantwortet, bevor sie gestellt wird. */
.verkaufszeile{
  background:var(--teal-mist);border-left:4px solid var(--teal);border-radius:10px;
  padding:14px 18px;margin:0 0 14px;font-weight:700;color:var(--teal-tief);max-width:70ch;
}

/* Angebot fuer Organisationen. */
.org-anfrage{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:28px;margin-top:26px;box-shadow:var(--shadow);
}
.org-anfrage h3{margin:0 0 6px;font-size:20px}
.angebot-form{display:grid;gap:12px;margin-top:18px;max-width:760px}
.angebot-form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.angebot-form label{display:grid;gap:5px;font-size:14px;font-weight:700;color:var(--ink)}
.angebot-form input,.angebot-form textarea{
  font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--ink);width:100%;
}
.angebot-form input:focus,.angebot-form textarea:focus{outline:2px solid var(--teal);outline-offset:1px}
.angebot-form .req{color:var(--warn)}
.angebot-form button{justify-self:start}
@media (max-width:700px){.angebot-form .two{grid-template-columns:1fr}}

/* ------------------------------------------------------------------- FAQ */

.faq-list{max-width:820px;display:grid;gap:10px}
.faq-list details{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 18px;
}
.faq-list summary{
  cursor:pointer;font-weight:800;padding:12px 0;list-style:none;display:flex;
  justify-content:space-between;align-items:center;gap:12px;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'+';color:var(--teal-tief);font-size:20px;font-weight:800;flex:0 0 auto}
.faq-list details[open] summary::after{content:'–'}
.faq-list details p{color:var(--muted);padding:0 0 14px;margin:0;max-width:70ch}

/* -------------------------------------------------------------- Newsletter */

.newsletter-section{padding-top:10px;padding-bottom:70px}
.newsletter-box{
  background:var(--ink);border-radius:18px;padding:34px 40px;
  color:#fff;max-width:820px;margin:0 auto;
  display:flex;align-items:center;gap:26px;text-align:left;
}
.newsletter-sessi{width:150px;height:auto;flex:0 0 auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
.newsletter-body{flex:1}
.newsletter-box h2{color:#fff}
.newsletter-box p{color:#a9b8b2}
.newsletter-box form{display:flex;gap:10px;max-width:480px;margin:16px 0 0}
.newsletter-box input{
  flex:1;border:1px solid #2c4a3d;background:#16301f;color:#fff;border-radius:10px;
  padding:14px 16px;font:inherit;min-width:0;
}
.newsletter-box input:focus{outline:2px solid var(--teal)}
.newsletter-box button{
  border:0;background:var(--teal);color:#fff;font-weight:800;border-radius:10px;
  padding:14px 22px;cursor:pointer;font-size:15px;white-space:nowrap;
}
.newsletter-box button:hover{filter:brightness(.94)}
.newsletter-box button:disabled{opacity:.6;cursor:wait}
.newsletter-box p[role="status"]{margin:14px auto 0;font-weight:700;font-size:15px}

/* Popup-Fenster (Newsletter-Bestätigung) */
.popup-overlay{
  position:fixed;inset:0;background:rgba(16,37,29,.55);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;
}
.popup-box{
  background:var(--panel);border:1px solid var(--teal);border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);max-width:440px;width:100%;
  padding:30px 34px;text-align:center;
}
.popup-box h3{margin:0 0 10px;color:var(--teal-tief)}
.popup-box p{margin:0 0 22px;color:var(--ink);font-size:15px;line-height:1.55}
.popup-close{
  border:0;background:var(--teal);color:#fff;font-weight:800;border-radius:10px;
  padding:12px 26px;cursor:pointer;font-size:15px;
}
.popup-close:hover{filter:brightness(.94)}

/* ------------------------------------------------------------------ Footer */

.site-footer{border-top:1px solid var(--line);background:var(--panel)}
.footer-inner{max-width:1100px;margin:0 auto;padding:34px 26px;display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
.footer-brand img{width:230px;max-width:100%;height:auto}
.footer-nav{display:flex;gap:20px}
.footer-nav a{color:var(--muted);font-weight:700;text-decoration:none}
.footer-nav a:hover{color:var(--teal-tief)}
.small{font-size:13px}

/* --------------------------------------------------------------- Responsive */

@media(max-width:960px){
  .hero{grid-template-columns:1fr;padding-top:40px}
  .hero-text{padding-top:0}
  .mock-days{grid-template-columns:1fr}
  .hero-sessi{width:170px;right:0;bottom:-30px}
  .site-nav{display:none}
}
@media(max-width:640px){
  h1{font-size:34px}
  h2{font-size:26px}
  .feature-grid{grid-template-columns:1fr}
  .pricing-top{flex-direction:column;align-items:flex-start;gap:6px}
  .import-row{flex-wrap:wrap}
  .import-count{margin-left:0}
  .newsletter-box form{flex-direction:column}
  .site-brand img{width:120px}
  .site-actions .btn{padding:10px 14px;font-size:13px}
}

/* ------------------------------------------------- Text- und Rechtsseiten */

/* Beide Sprachfassungen stehen im Markup; die inaktive wird ausgeblendet.
   Das spart eine zweite Datei je Seite und hält die Texte beieinander. */
html[lang="de"] [data-lang-block="en"],
html[lang="en"] [data-lang-block="de"]{display:none}

.legal-body{background:#fff}
.legal-page{max-width:760px;margin:0 auto;padding:48px 24px 72px}
.legal-page h1{font-size:38px;margin:0 0 10px}
.legal-page h2{font-size:22px;margin:36px 0 10px}
.legal-page h3{font-size:17px;margin:22px 0 6px}
.legal-page p,.legal-page li{line-height:1.7}
.legal-page ul{margin:10px 0;padding-left:22px}
.legal-page li{margin:6px 0}
.legal-page .lead{font-size:19px;color:var(--muted, #6f7c77);margin-bottom:26px}
.legal-page a{color:#176f4d}
.legal-page strong{font-weight:700}

/* Marketing-Block in der Fußzeile */
.footer-cta{
  border:1px solid #dce5e0;border-radius:14px;padding:26px 28px;margin:0 0 34px;
  background:#f6f8f6;
}
.footer-cta h3{margin:0 0 8px;font-size:20px;color:#176f4d}
.footer-cta p{margin:0 0 14px;line-height:1.65;max-width:62ch}
.footer-cta .btn{display:inline-block}
.footer-cta .cta-note{font-size:13px;color:#6f7c77;margin:12px 0 0}
.footer-inner{max-width:1100px;margin:0 auto;padding:0 24px}
.footer-nav{display:flex;flex-wrap:wrap;gap:16px}
.footer-nav a{color:#6f7c77;text-decoration:none;font-size:14px}
.footer-nav a:hover{color:#176f4d;text-decoration:underline}
@media(max-width:640px){
  .legal-page{padding:32px 18px 56px}
  .legal-page h1{font-size:30px}
  .footer-cta{padding:20px}
}

/* ================================================================ 1.85.0
   Verkaufsseite: Hero-Beweiszeile, Schmerz, Schritte, Unterschied,
   Abschluss. Die Reihenfolge der Seite folgt der Reihenfolge, in der
   jemand Vertrauen fasst: erst erkennen ("kenne ich"), dann verstehen
   ("so geht es"), dann glauben ("die wissen, wovon sie reden"), dann
   handeln. Deshalb steht der Preis weit hinten, nicht vorn. */

.cta-neben{color:var(--muted);font-size:14px;align-self:center;max-width:24ch}
/* Im Hero gehoert der Satz UNTER die Knoepfe und ueber die volle Breite: Er
   erklaert den ersten Knopf („dazu brauchst du ein Konto") und stuende neben
   dem dritten am falschen Platz. */
.hero-cta .cta-neben{flex:1 0 100%;max-width:46ch;margin:2px 0 0;align-self:flex-start}
.hero-cta .btn-text{flex:1 0 100%;padding-left:0}

.hero-beweis{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:9px}
.hero-beweis li{position:relative;padding-left:27px;color:#3d4d46;font-size:15.5px}
.hero-beweis li::before{
  content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;
  background:var(--teal-mist);
  box-shadow:inset 0 0 0 1.5px var(--teal);
}
.hero-beweis li::after{
  content:"";position:absolute;left:5px;top:10px;width:5px;height:8px;
  border:solid var(--teal);border-width:0 2px 2px 0;transform:rotate(42deg);
}

/* --------------------------------------------------------------- Schmerz */

.section-schmerz{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.schmerz-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.schmerz{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.schmerz-icon{font-size:26px;display:block;margin-bottom:6px;filter:grayscale(.15)}
.schmerz h3{margin:0 0 6px;font-size:19px}
.schmerz p{margin:0;color:#3d4d46;font-size:15.5px}
.schmerz-fazit{
  margin:30px auto 0;max-width:640px;text-align:center;font-family:Georgia,serif;
  font-size:21px;color:var(--teal-tief);line-height:1.45;
}

/* --------------------------------------------------------------- Schritte */

.schritte{list-style:none;counter-reset:none;margin:0;padding:0;
  display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.schritte li{position:relative;padding-top:6px}
.schritt-nr{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:var(--teal);color:#fff;font-family:Georgia,serif;font-size:20px;font-weight:700;
  margin-bottom:12px;
}
.schritte h3{margin:0 0 6px;font-size:20px}
.schritte p{margin:0;color:#3d4d46;font-size:15.5px}
.center{text-align:center;margin-top:38px}

/* ------------------------------------------------------------ Unterschied */

.section-unterschied{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.unterschied-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.unterschied{
  background:var(--bg);border:1px solid var(--line);border-left:4px solid var(--teal);
  border-radius:var(--radius);padding:22px 24px;
}
.unterschied h3{margin:0 0 8px;font-size:20px;color:var(--teal-tief)}
.unterschied p{margin:0;color:#3d4d46;font-size:15.5px}

/* ------------------------------------------------------------ Abschluss */

.schluss-cta{background:var(--teal);color:#fff;text-align:center}
.schluss-innen{max-width:640px;margin:0 auto}
.schluss-cta h2{color:#fff;font-size:34px;margin:0 0 12px}
.schluss-cta p{color:#dbeee5;font-size:18px;margin:0 auto 28px;max-width:54ch}
.btn.hell{background:#fff;color:var(--teal-tief)}
.btn.hell:hover{filter:brightness(.96)}
.schluss-klein{font-size:15px;margin-top:22px !important;color:#c3e2d5 !important}
.schluss-cta a[href^="mailto"],.schluss-klein a{color:#fff}

@media (max-width:760px){
  .schluss-cta h2{font-size:27px}
  .schmerz-fazit{font-size:19px}
  .cta-neben{max-width:none}
}

/* ================================================================ 1.86.0
   Nachbildungen des echten Programms.

   Die Kacheln zeigten vorher ein vereinfachtes Bild: Pillen statt
   Detailstufen, erfundene Zeilen statt echter Karten. Wer sich danach
   anmeldet, sieht etwas anderes als versprochen - der teuerste Moment
   einer Verkaufsseite. Diese Regeln bilden das nach, was in
   assets/js/workshop.js und members.js tatsaechlich gerendert wird:
   Zeitschiene links, Farbbalken, Titelzeile, Detailstufen als
   Label-und-Text, unten Modulart und Ansichtswaehler.

   Die Hintergruende sind die Werte, die mixWhite(farbe, 0.9) bzw. 0.62
   in der App ergeben - hier ausgerechnet und fest eingetragen. */

.feature-visual.weit{grid-column:1/-1}
.echt-paar{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));width:100%}
.echt-fall{margin:0}
.echt-fall figcaption{margin-top:9px;font-size:13px;color:var(--muted);text-align:center}

/* Die Farben sind die der App, ausgerechnet mit derselben Formel:
   mixWhite(farbe, 0.9) fuer die Flaeche, 0.62 fuer den Rand. „Einstieg &
   Orientierung" ist #287C9E - daraus wird #eaf2f5 und #adcdda.

   Und die Zeitspalte hat KEINEN eigenen Hintergrund. In der App erbt sie die
   Farbe der Karte; hier stand ein halbtransparentes Weiss darueber, und die
   Spalte sah aus wie ausgeschnitten. */
.echt-card{
  display:flex;background:#eaf2f5;border:1px solid #adcdda;border-radius:12px;
  overflow:hidden;min-height:74px;box-shadow:0 2px 8px #173b2c0a;
}
.echt-card.blau{background:#eaf2f5;border-color:#adcdda}
.echt-rail{
  flex:none;width:74px;padding:9px 6px;display:flex;flex-direction:column;
  align-items:center;gap:6px;
}
.echt-rail strong{font-family:Arial,sans-serif;font-size:16px;color:var(--teal-tief);font-variant-numeric:tabular-nums}
.echt-dur{display:flex;align-items:center;gap:3px}
.echt-dur b{
  width:17px;height:17px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--muted);font-size:12px;line-height:15px;text-align:center;font-weight:400;
}
.echt-dur span{font-size:12px;color:#3d4d46;white-space:nowrap}
.echt-dur i{font-style:normal;color:var(--muted);margin-left:2px}
.echt-catbar{flex:none;width:5px}
.echt-body{flex:1;padding:9px 12px 8px;display:flex;flex-direction:column;gap:7px;min-width:0}
.echt-head{display:flex;align-items:flex-start;gap:8px}
.echt-head strong{font-family:Arial,sans-serif;font-size:15px;line-height:1.35;flex:1}
.echt-werkzeug{display:flex;gap:2px;align-items:center;flex:none;padding-top:5px}
.echt-werkzeug i{width:3px;height:3px;border-radius:50%;background:#9aa8a2;display:block}

.echt-details{display:grid;gap:7px}
.echt-detail b{
  display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--muted);font-family:Arial,sans-serif;
}
.echt-detail p{margin:1px 0 0;font-size:13.5px;line-height:1.45;color:#233c33}

.echt-foot{display:flex;align-items:center;gap:8px;margin-top:auto;flex-wrap:wrap}
.echt-art{
  font-size:12px;padding:3px 9px;border-radius:7px;border:1px solid var(--line);
  background:#fff;color:#3d4d46;
}
.echt-ansicht{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:12px;
  padding:3px 9px;border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--muted);
}
.echt-ansicht i{font-style:normal;color:#3d4d46;font-weight:700}
.echt-ansicht.auf{border-color:var(--teal-tief);color:var(--teal-tief)}
.echt-ansicht.auf i{color:var(--teal-tief)}
.echt-ansicht b{font-size:10px}

/* ------------------------------------------------------- Bibliothekskarte */

.echt-lib{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 16px;width:100%;box-shadow:var(--shadow);
}
.echt-lib-top{display:flex;gap:7px;margin-bottom:11px;flex-wrap:wrap}
.echt-kind,.echt-cat{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px}
.echt-kind{background:var(--teal);color:#fff}
.echt-cat{background:#fae2da;color:#a8483080}
.echt-cat{color:#a44a2c}
.echt-lib-head{display:flex;gap:12px;align-items:center;margin-bottom:9px}
.echt-lib-bild{
  flex:none;width:56px;height:56px;border-radius:10px;background:#e8f1ed;
  border:1px solid #cfe0d7;display:grid;grid-template-columns:1fr 1fr;
  gap:4px;padding:9px;align-content:center;
}
.echt-lib-bild span{display:block;height:9px;border-radius:99px;background:#a7c8bb}
.echt-lib-bild span:nth-child(2){background:#c9ddd4}
.echt-lib-bild span:nth-child(3){background:#c9ddd4}
.echt-lib h4{margin:0;font-size:19px}
.echt-lib-text{margin:0;font-size:14px;line-height:1.5;color:#3d4d46}
.echt-lib-tags{margin:10px 0 0;display:flex;gap:6px;flex-wrap:wrap}
.echt-lib-tags span{
  font-size:11.5px;background:var(--teal-mist);color:var(--teal-tief);
  padding:3px 9px;border-radius:999px;
}
.echt-lib-meta{margin:9px 0 0;font-size:12.5px;color:var(--muted)}
.echt-lib-stars{margin:6px 0 0;font-size:13px;color:var(--muted)}
.echt-lib-stars b{color:var(--gold);font-size:15px;letter-spacing:1px}
.echt-lib-stars i{color:#d9dfdc;font-style:normal;font-size:15px}

/* ------------------------------------------------- Rueckgaengig-Fenster */

.echt-undo{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;width:100%;box-shadow:var(--shadow);
}
.echt-undo h4{margin:0 0 12px;font-size:19px;color:var(--teal-tief)}
.echt-undo ul{list-style:none;margin:0;padding:0}
.echt-undo li{
  display:flex;align-items:center;gap:10px;padding:9px 0;
  border-top:1px solid var(--line);font-size:13.5px;
}
.echt-undo li:first-child{border-top:0}
.echt-undo-zeit{flex:none;color:var(--muted);font-variant-numeric:tabular-nums;font-size:12.5px}
.echt-undo-text{flex:1;color:#233c33;min-width:0}
.echt-undo-btn{
  flex:none;font-size:12px;padding:5px 11px;border-radius:8px;
  border:1.5px solid var(--teal);color:var(--teal-tief);background:var(--panel);font-weight:700;
}
.echt-undo-fuss{margin:12px 0 0;font-size:12.5px;color:var(--muted)}

/* ---------------------------------------------------- Beta-Bestandsschutz */

.hero-beta{
  margin-top:22px;background:#fff8e6;border:1px solid #efd79a;border-left:4px solid var(--gold);
  border-radius:12px;padding:14px 17px;max-width:52ch;
}
.hero-beta strong{display:block;font-size:15.5px;color:#7a5c00;margin-bottom:4px}
.hero-beta p{margin:0;font-size:14px;line-height:1.55;color:#5c4a1a}

.beta-deal{
  background:#fff8e6;border:1px solid #efd79a;border-radius:var(--radius);
  padding:26px 28px;margin-bottom:34px;display:flex;gap:26px;align-items:center;flex-wrap:wrap;
}
.beta-deal-text{flex:1;min-width:280px}
.beta-deal h3{margin:0 0 8px;font-size:23px;color:#6f5300}
.beta-deal p{margin:0;color:#5c4a1a;font-size:16px;line-height:1.6}
.beta-deal-klein{margin-top:10px !important;font-size:13.5px !important;color:#84703f !important}
.beta-deal .btn{background:#7a5c00;flex:none}
.beta-deal .btn:hover{filter:brightness(1.12)}

@media (max-width:760px){
  .beta-deal{padding:20px}
  .beta-deal h3{font-size:20px}
  .echt-undo li{flex-wrap:wrap}
  .echt-undo-btn{margin-left:auto}
}

/* --- Tagesbilanz wie im Programm (1.95.0) -------------------------------
   Vorher stand hier eine vereinfachte Fassung mit einer Zeile. Die echte
   hat zwei, und die zweite ist die wichtigere: brutto ist die Zeit von
   Anfang bis Ende, netto dieselbe Zeit ohne Pausen. Genau daran verrechnet
   man sich beim Planen - und genau das soll die Seite zeigen. */
.echt-bilanz{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;width:100%;box-shadow:var(--shadow);
}
.echt-bilanz-kopf{display:flex;align-items:flex-start;gap:18px}
.echt-bilanz h4{margin:0;font-size:23px;flex:none}
.echt-bilanz-rechts{flex:1;min-width:0}
.echt-bal-bar{display:flex;height:9px;border-radius:99px;overflow:hidden;margin:6px 0 8px}
.echt-bal-bar i{display:block;height:100%}
.echt-bal-zeile{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}
.echt-bal-zeile b{color:var(--ink);font-family:Arial,sans-serif}
.echt-bal-zeile.zwei{text-align:right;margin-top:2px}

/* --- Zweite Zeitzeile, wie im Programm (1.97.0) --- */
.echt-card.zone .echt-rail{width:96px}
.echt-zonezeile{
  display:block;background:#fff8e6;border:1px solid #efd79a;color:#7a5c00;
  border-radius:7px;padding:2px 8px;font-size:11.5px;font-weight:700;
  letter-spacing:.4px;white-space:nowrap;
}

/* Zweizeilige Tagesbilanz auch im Hero-Mockup - wie im Programm. */
.mock-bal-zeile{display:block;font-size:11px;color:var(--muted);line-height:1.5}
.mock-bal-zeile b{color:var(--ink);font-family:Arial,sans-serif}
.mock-bal-zeile.zwei{text-align:right}

/* ====================================================================
   Sessionario IN Claude und ChatGPT (#kiverbinden)

   Marcel: „Das ist ein Verkaufsargument, das keiner hat." Deshalb steht
   der Abschnitt direkt hinter Sessi - wer bis dorthin gelesen hat, hat
   verstanden, was die KI hier tut, und ist bereit fuer den Satz, dass sie
   auch ausserhalb laeuft.
   ==================================================================== */
.ki-verbinden{display:flex; gap:34px; align-items:center}
.ki-verbinden .ki-text{flex:1 1 auto; min-width:0}
.ki-verbinden .ki-sessi{width:190px; flex:0 0 auto}
.ki-punkte{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin:22px 0 24px}
.ki-punkt{background:#fff; border:1px solid var(--rand,#dce5e0); border-radius:14px; padding:16px 18px}
.ki-punkt strong{display:block; margin-bottom:5px}
.ki-punkt p{margin:0; font-size:15px}
.ki-knoepfe{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px}

@media (max-width:900px){
  .ki-punkte{grid-template-columns:minmax(0,1fr)}
  .ki-verbinden{flex-direction:column-reverse; gap:18px; align-items:flex-start}
  .ki-verbinden .ki-sessi{width:120px; align-self:center}
}

/* Zwei Motive nebeneinander: Sessi mit Anthropic, Sessi mit OpenAI.
   Beide zusammen sagen ohne ein Wort, worum es in dem Abschnitt geht. */
.ki-bilder{display:grid;gap:6px;flex:0 0 auto}
.ki-bilder img{width:240px;display:block}

/* Ein Bild statt dreier Händedrücke.
 *
 * Marcel am 02.09.2026 zum jonglierenden Sessi: „und auch als bild für die
 * Verkaufsseite - da wo es hinpasst."
 *
 * Hierher passt es: Drei Händedrücke sagen dreimal dasselbe. Ein Sessi, der
 * mit allen drei Zeichen jongliert, sagt „alle drei" in einem Blick - und die
 * drei Verbinden-Knöpfe daneben nennen sie ohnehin beim Namen. */
.ki-bilder.is-eins{max-width:440px}
.ki-bilder.is-eins img{width:100%;height:auto;border-radius:14px}

@media (max-width:900px){
  .ki-bilder{grid-template-columns:1fr 1fr;gap:10px;width:100%}
  .ki-bilder img{width:100%}
  .ki-bilder.is-eins{max-width:none;grid-template-columns:1fr}
}


/* Die Sprachwahl sind seit dem 01.09.2026 LINKS, keine Knöpfe: Jede Sprache
   hat eine eigene Adresse (/, /en/, /es/). Ein Umschalter ohne Adresse ist
   für eine Suchmaschine kein Angebot, sondern unsichtbar. */
a.lang-btn{text-decoration:none; display:inline-block}
.lang{display:flex; gap:6px; align-items:center}

/* -------------------------------------------------- Zutaten der neuen Seite */

/* Der Satz unter den drei Schritten. Er gehoert dorthin und nicht in den
   Hero: Wer bis hierher gelesen hat, fragt sich gerade, ob das alles nur
   mit KI funktioniert. */
.schritte-ohne{color:var(--muted);font-size:15px;max-width:60ch;margin:22px auto 0}

/* Sessi im Schlussaufruf. Ueber dem Text, nicht daneben - der Abschnitt ist
   mittig gesetzt, und ein Bild an der Seite braeche die Achse. */
.schluss-sessi{display:block;width:190px;height:auto;margin:0 auto 6px}

/* Die Zeitenkette bekommt ihr Bild. `object-fit:cover` mit fester Hoehe:
   Die Motive sind querformatig, die Karte daneben ist es nicht. */
.motiv{
  display:block;width:100%;height:auto;border-radius:var(--radius);
  border:1px solid var(--line);box-shadow:var(--shadow);
}

/* Ein Motiv als ruhiges Band zwischen zwei Abschnitten. Schmal gehalten -
   ein Bild ueber die volle Seitenbreite waere ein Bruch, kein Bild. */
.motiv-band{margin:30px auto 0;max-width:760px;padding:0}

/* ==========================================================================
   Beta-Band, Beta-Aufruf und die Tagesansicht
   Marcel am 16.09.2026: „wir müssen dann eine box zeigen, dass im moment beta
   läuft" - und: aus dem Rabatt soll eine Einladung werden.
   ========================================================================== */

/* Das Band ganz oben. Ruhig, aber nicht zu uebersehen: Der Punkt links
   pulsiert nicht - eine Beta ist kein Alarm. */
.beta-band{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:9px 18px;background:var(--teal-mist);border-bottom:1px solid var(--line);
  font-size:14.5px;color:var(--ink)
}
.beta-band p{margin:0}
.beta-band a{color:var(--teal-tief);font-weight:700;white-space:nowrap}
.beta-punkt{
  width:9px;height:9px;border-radius:50%;background:var(--teal);flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(11,138,126,.16)
}

/* Der Aufruf: die vier Saetze, die wir hoeren wollen. Als Zitate gesetzt,
   damit sie wie gesprochene Sprache wirken - sie sind ja auch welche. */
.beta-rufe{
  display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  max-width:900px;margin:0 auto 18px
}
.beta-rufe p{
  margin:0;padding:12px 16px;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--teal);border-radius:10px;
  font-size:16px;color:var(--navy);font-weight:600
}
.beta-ruf-text{max-width:760px;margin:0 auto 10px;text-align:center}
.beta-frage{
  max-width:760px;margin:18px auto 0;text-align:center;font-size:18px;
  color:var(--navy);font-weight:700;line-height:1.5
}

/* Die Tagesansicht. Kein Bildschirmfoto, sondern derselbe Aufbau in HTML -
   scharf auf jedem Geraet, uebersetzbar, und sie veraltet nicht still. */
.tag-bild{
  max-width:640px;margin:0 auto;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;overflow:hidden
}
.tag-kopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line)
}
.tag-kopf b{font-size:19px;color:var(--navy)}
.tag-bilanz{font-size:12.5px;color:var(--muted)}
.tag-zeile{display:flex;align-items:stretch;gap:10px;padding:7px 0}
.tag-uhr{
  flex:0 0 68px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;font-weight:700;color:var(--navy);font-size:16px
}
.tag-uhr small{font-weight:400;font-size:11.5px;color:var(--muted);margin-top:1px}
.tag-strich{flex:0 0 5px;border-radius:3px}
.tag-text{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.tag-text b{font-size:15.5px;color:var(--navy)}
.tag-text small{font-size:12px;color:var(--muted)}
.tag-schloss{color:var(--teal-tief)}
.tag-leise{opacity:.55}

/* Der Parallelblock bekommt einen eigenen Rahmen - im Raum ist er ja auch
   EIN Block, nur mit mehreren Schienen darin. */
.tag-parallel{
  border:1px solid var(--teal);border-radius:12px;padding:4px 8px 6px;
  margin:6px 0;background:rgba(11,138,126,.05)
}
.tag-parallel-kopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  flex-wrap:wrap;padding:6px 2px 4px;font-size:12.5px;color:var(--muted)
}
.tag-parallel-kopf b{color:var(--teal-tief);font-size:12.5px}

@media (max-width:560px){
  .tag-uhr{flex-basis:56px;font-size:15px}
  .beta-band{font-size:13.5px;padding:8px 12px}
}

/* ------------------------------------------------- Was nur dir gehört
   Marcel am 16.09.2026: „Eigene Notizen, die nur ich sehen kann ist
   großartig - das muss auf die Salespage!" Zwei Karten nebeneinander: die
   persoenliche Ebene und der Versionsvergleich. Beide zeigen ein Stueck
   echte Oberflaeche statt einer Aufzaehlung - man glaubt eher, was man
   sieht. */
.deins-paar{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.deins-karte{border:1px solid var(--line);border-radius:16px;padding:22px;background:#fff}
.deins-karte h3{margin:0 0 14px;font-size:1.15rem}
.deins-karte > p{margin:14px 0 0;color:var(--muted);font-size:.97rem;line-height:1.6}

.notiz-demo{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.notiz-modul{margin:0;padding:12px 14px;background:#f7faf8;display:flex;flex-direction:column;gap:2px}
.notiz-modul b{font-size:.98rem}
.notiz-modul span{color:var(--muted);font-size:.85rem}
.notiz-eigen{margin:0;padding:12px 14px;background:#faf7ff;border-top:1px dashed #c9b9e0;
  display:flex;flex-direction:column;gap:6px}
.notiz-eigen em{font-style:normal;font-weight:700;color:#6b4fa0;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.05em}
.notiz-eigen span{font-size:.93rem;line-height:1.5}
.notiz-eigen i{font-style:italic;color:var(--muted);font-size:.78rem}

.diff-demo{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#f7faf8}
.diff-demo-kopf{margin:0 0 10px;font-size:.85rem;color:var(--muted);display:flex;gap:8px;align-items:center}
.diff-demo-kopf b{color:var(--ink)}
.diff-demo-zeile{margin:0 0 7px;display:flex;gap:9px;align-items:baseline;font-size:.93rem}
.diff-demo-marke{font-weight:800;flex:none;width:14px;text-align:center}
.diff-demo-marke.neu{color:#176f4d}
.diff-demo-marke.geaendert{color:#a06400}
.diff-demo-marke.weg{color:#b3261e}

/* Die Rollentabelle in den häufigen Fragen. Marcel am 16.09.2026: „für FAQ."
   Eine Tabelle und keine Aufzählung, weil die Frage zwei Achsen hat - Rolle
   und Recht -, und weil man genau die Zeile sucht, die einen betrifft. */
.faq-tabelle{width:100%;border-collapse:collapse;margin:4px 0 14px;font-size:.93rem}
.faq-tabelle th,.faq-tabelle td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.faq-tabelle th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.faq-tabelle td.ja{color:#176f4d;font-weight:700}
.faq-tabelle td.nein{color:var(--muted)}
@media (max-width:560px){
  .faq-tabelle{font-size:.85rem}
  .faq-tabelle th,.faq-tabelle td{padding:6px 5px}
}