/* ============================================================
NeugewinnOS — Stylesheet
Premium-Design: heller Hintergrund, gedecktes Smaragdgrün,
dezente Akzente, Scroll-Animationen und Hover-Effekte.
Wird von Landing, Login, Dashboard und Admin genutzt.
INHALT (Hauptabschnitte, mit "=====" markiert):
1. Basis — Variablen, Reset, Buttons
2. Landing — Navigation, Hero, Abschnitte, Pakete, FAQ, Checkout
3. Auth — Login / Passwort-vergessen (Split-Screen)
4. App — Mitgliederbereich (Dashboard, Kurse, Vorlagen …)
5. Admin — Sidebar, Tabellen, Modals, Toasts
6. Mitglieder — Ergänzungen (Filter, Avatar, Playlist, Einstellungen)
7. Sprints — Cluster-Navigation, Prozessliste, Timeline
8. Dashboard 2.0— Widget-Raster, Bearbeitungsmodus, Slider
9. Seiten-Editor— Admin: Seiten-Inhalte
============================================================ */
:root {
/* ==== Design-System 2.0: Kern-Tokens ====
--gruen/--gruen-dunkel/--gruen-zart überschreibt design.js mit den
im Admin gepflegten Farben (einstellungen.farbe_*). */
--gruen: #0e7b5a;
--gruen-dunkel: #0a5942;
--gruen-zart: #e9f3ee;
--gruen-rahmen: #15805f;
--tinte: #0b2f24;
--tinte-hell: #14453a;
--creme: #fdf6ec;
--creme-tief: #f7ecdc;
--text: #111827;
--text-hell: #4b5563;
--text-zart: #6b7280;
--grau-50: #f9fafb;
--grau-100: #f3f4f6;
--grau-fuss: #f8f8f8;
--rand: rgba(55,65,81,.10);
--rand-fest: #e5e7eb;
--schatten: 0 10px 31px -12px rgba(149,160,178,.35);
--schatten-karte: 0 24px 64px -12px rgba(150,161,179,.27);
--radius: 16px;
--radius-klein: 12px;
--huelle: 1200px;
--blau: #0369a1; --blau-zart: #e6f2f9;
--orange: #b45309; --orange-zart: #fdf3e3;
--rot: #b91c1c; --rot-zart: #fee2e2;
--gold: #c9a227; --gold-zart: #fbf3da;
--indigo: #4f46e5; --indigo-zart: #eef0ff;
--petrol: #0e7490; --petrol-zart: #e6f4f7;
--schrift: "sofia-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Akzent der Detailseiten: Standard = Kurs-Grün; .typ-sprint/.typ-workshop
am überschreiben (Abschnitt 16 des Design-Systems). Der Fallback
hier sorgt dafür, dass akzent-basierte Bausteine (.download-zeile,
.aktion …) auch außerhalb der Detailseiten korrekt gefärbt sind. */
--akzent: var(--gruen);
--akzent-dunkel: var(--gruen-dunkel);
--akzent-zart: var(--gruen-zart);
/* ==== Brücke: alte Token-Namen bleiben gültig (Altbestand liest sie) ==== */
--farbe-gruen: var(--gruen);
--farbe-gruen-dunkel: var(--gruen-dunkel);
--farbe-gruen-tinte: var(--tinte);
--farbe-gruen-zart: var(--gruen-zart);
--verlauf: linear-gradient(135deg, var(--gruen) 0%, var(--gruen-dunkel) 100%);
--farbe-text: var(--text);
--farbe-text-hell: var(--text-hell);
--farbe-hintergrund: #ffffff;
--farbe-getoent: var(--grau-50);
--farbe-rand: var(--rand-fest);
--farbe-gold: var(--gold);
--radius-gross: 16px;
--schatten-hover: var(--schatten-karte);
--schatten-schwebend: 0 10px 30px rgba(16, 24, 40, 0.15);
--schatten-modal: 0 24px 60px rgba(16, 24, 40, 0.25);
--schleier: rgba(16, 24, 40, 0.5);
--ring: 0 0 0 3px rgba(14, 123, 90, 0.15);
--farbe-fehler: var(--rot);
--farbe-fehler-dunkel: #991b1b;
--farbe-fehler-zart: var(--rot-zart);
--farbe-fehler-rand: #f3d0d0;
--farbe-erfolg: var(--gruen);
--farbe-erfolg-zart: var(--gruen-zart);
--farbe-erfolg-rand: #cfe6da;
--farbe-warnung: var(--orange);
--farbe-warnung-zart: var(--orange-zart);
--farbe-warnung-rand: #f3ddc0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Das hidden-Attribut muss immer wirken — sonst überschreiben Komponenten
mit eigenem display (z. B. .btn, .eingabe-haken) das Verstecken. */
[hidden] { display: none !important; }
html {
scroll-behavior: smooth;
/* Scrollbar-Platz immer reservieren — Navigation springt beim
Seitenwechsel (lange vs. kurze Seite) nicht mehr */
scrollbar-gutter: stable;
}
body {
font-family: var(--schrift);
font-size: 17px;
color: var(--text-hell);
background: var(--farbe-hintergrund);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
::selection { background: var(--farbe-gruen); color: #fff; }
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* Anker-Sprünge nicht unter der festen Kopfzeile verschwinden lassen */
section[id] { scroll-margin-top: 84px; }
/* Akzent: Text mit dezentem Grün-Verlauf (nur in der Hero-Überschrift) */
.verlauf-text {
background: var(--verlauf);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Kicker: kleine Zeile über Abschnittsüberschriften */
.kicker {
text-align: center;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--farbe-gruen);
margin-bottom: 0.7rem;
}
.kicker-hell { color: #7fc7ad; }
.kicker-links { text-align: left; }
/* ---------- Buttons ---------- */
.btn {
display: inline-block;
padding: 0.8rem 1.6rem;
/* line-height zurücksetzen: ohne dies erbt der Button die Body-Zeilenhöhe
(1.6), wodurch der Text mit vertikalem Padding sichtbar zu hoch sitzt */
line-height: 1;
border-radius: var(--radius);
text-decoration: none;
font-family: inherit;
font-weight: 600;
border: none;
cursor: pointer;
font-size: 1rem;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:focus-visible { outline: 2px solid var(--farbe-gruen); outline-offset: 2px; }
.btn-primaer {
background: var(--farbe-gruen);
color: #fff;
box-shadow: 0 2px 8px rgba(14, 123, 90, 0.22);
}
.btn-primaer:hover {
background: var(--farbe-gruen-dunkel);
box-shadow: 0 4px 12px rgba(14, 123, 90, 0.24);
}
.btn-sekundaer {
background: var(--farbe-hintergrund);
color: var(--farbe-text);
border: 1px solid var(--farbe-rand);
}
.btn-sekundaer:hover {
border-color: var(--farbe-gruen);
color: var(--farbe-gruen-dunkel);
background: var(--farbe-gruen-zart);
}
/* Heller Button für dunkle Flächen (Abschluss-CTA) */
.btn-hell {
background: #fff;
color: var(--farbe-gruen-tinte);
}
.btn-hell:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.btn-gross { padding: 1rem 2.6rem; font-size: 1.1rem; }
/* ---------- Navigation / Kopfzeile ---------- */
.kopfzeile {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px); /* Milchglas-Effekt beim Scrollen */
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--farbe-rand);
}
.kopfzeile-inhalt {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 0.9rem;
padding-bottom: 0.9rem;
}
.logo {
font-size: 1.45rem;
font-weight: 900;
letter-spacing: -0.02em;
text-decoration: none;
color: var(--farbe-text);
}
.logo span { color: var(--farbe-gruen); }
.navigation { display: flex; align-items: center; gap: 1.6rem; }
/* Anti-Flackern: Bei aktivem JS bleibt die Fallback-Navigation unsichtbar,
bis navigation.js sie hydriert hat (fügt .ng-bereit hinzu). Der „Anmelden"-
Button (.nav-cta) bleibt sichtbar. Ohne JS (kein html.js) greift nichts. */
html.js nav[data-navigation] .nav-link,
html.js nav[data-navigation] .nav-gruppe { visibility: hidden; }
html.js nav[data-navigation].ng-bereit .nav-link,
html.js nav[data-navigation].ng-bereit .nav-gruppe { visibility: visible; }
.nav-link {
text-decoration: none;
color: var(--farbe-text-hell);
font-weight: 500;
transition: color 0.2s ease;
}
.nav-link:hover { color: var(--farbe-gruen); }
/* Navigationsgruppe mit Dropdown (Unterpunkte) */
.nav-gruppe { position: relative; }
.nav-gruppe-knopf {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: none;
border: none;
padding: 0;
font: inherit;
font-weight: 500;
color: var(--farbe-text-hell);
cursor: pointer;
transition: color 0.2s ease;
}
.nav-gruppe-knopf:hover,
.nav-gruppe:hover .nav-gruppe-knopf,
.nav-gruppe.offen .nav-gruppe-knopf { color: var(--farbe-gruen); }
.nav-pfeil { width: 14px; height: 14px; transition: transform 0.2s ease; }
.nav-gruppe:hover .nav-pfeil,
.nav-gruppe.offen .nav-pfeil { transform: rotate(180deg); }
.nav-untermenue {
position: absolute;
top: calc(100% + 0.7rem);
left: 50%;
transform: translateX(-50%) translateY(6px);
min-width: 210px;
display: flex;
flex-direction: column;
padding: 0.5rem;
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand);
border-radius: var(--radius);
box-shadow: var(--schatten-schwebend);
opacity: 0;
visibility: hidden;
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 60;
}
/* unsichtbare Brücke: hält den Hover beim Weg vom Knopf zum Menü */
.nav-untermenue::before {
content: "";
position: absolute;
top: -0.7rem;
left: 0;
right: 0;
height: 0.7rem;
}
.nav-gruppe:hover .nav-untermenue,
.nav-gruppe:focus-within .nav-untermenue,
.nav-gruppe.offen .nav-untermenue {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.nav-unterlink {
text-decoration: none;
color: var(--farbe-text);
font-size: 0.95rem;
font-weight: 500;
padding: 0.55rem 0.7rem;
border-radius: 8px;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease;
}
.nav-unterlink:hover { background: var(--farbe-gruen-zart); color: var(--farbe-gruen-dunkel); }
/* ---------- Hero ---------- */
.hero {
position: relative;
overflow: hidden; /* hält die Farbflächen im Bereich */
text-align: center;
padding: 6.5rem 0 6rem;
}
.hero-inhalt {
position: relative;
z-index: 1;
/* Sanftes Hereingleiten beim Laden der Seite */
animation: hereinGleiten 0.8s ease both;
}
.hero h1 {
font-size: clamp(2.4rem, 5.5vw, 4rem);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1.1;
max-width: 840px;
margin: 0 auto 1.4rem;
}
.hero-text {
font-size: 1.25rem;
color: var(--farbe-text-hell);
max-width: 620px;
margin: 0 auto 2.6rem;
}
/* Vorstellungsvideo: zentriert, 16:9, abgerundet, mit leichtem Schatten */
.hero-video {
display: block;
width: 100%;
max-width: 900px;
aspect-ratio: 16 / 9;
margin: 0 auto 2.6rem;
border: 0;
border-radius: var(--radius-gross);
box-shadow: 0 16px 44px rgba(11, 47, 36, 0.16);
}
/* Hero-Aktionen: Haupt-Button + Secondary-Button zu den Live-Workshops */
.hero-aktionen {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
/* Vertrauens-Zeile unter dem Button: Avatare + Bewertung */
.hero-vertrauen {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: 1.8rem;
flex-wrap: wrap;
}
.avatar-stapel { display: flex; }
.avatar-stapel span {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
background: var(--farbe-gruen-zart);
color: var(--farbe-gruen-dunkel);
font-size: 0.75rem;
font-weight: 700;
border: 2px solid #fff;
margin-left: -8px; /* leicht überlappende Avatare */
position: relative;
overflow: hidden;
}
.avatar-stapel span .ava-img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-stapel span.hat-bild .ava-img { display: block; }
.avatar-stapel span.hat-bild b { visibility: hidden; }
.avatar-stapel span b { font-weight: inherit; }
.avatar-stapel span:first-child { margin-left: 0; }
.hero-vertrauen-text {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.92rem;
color: var(--farbe-text-hell);
}
.sterne { color: var(--farbe-gold); letter-spacing: 2px; }
/* Weiche, schwebende Farbflächen im Hero-Hintergrund (dezent) */
.hero-blob {
position: absolute;
width: 560px;
height: 560px;
border-radius: 50%;
filter: blur(120px);
opacity: 0.18;
pointer-events: none;
animation: schweben 16s ease-in-out infinite alternate;
}
.hero-blob-1 { background: var(--farbe-gruen); top: -220px; left: -160px; }
.hero-blob-2 { background: var(--farbe-gruen-dunkel); bottom: -260px; right: -160px; animation-delay: -8s; }
/* ---------- Logo-Leiste (Firmennamen in Grau) ---------- */
.logo-leiste {
padding: 2.8rem 0;
border-top: 1px solid var(--farbe-rand);
border-bottom: 1px solid var(--farbe-rand);
}
.logo-leiste-titel {
text-align: center;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--farbe-text-hell);
margin-bottom: 1.6rem;
}
/* Permanent loopende Logo-Leiste (Marquee) — Inhalt im Track verdoppelt */
.logo-marquee {
overflow: hidden;
-webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee-track {
display: flex;
align-items: center;
gap: 3.5rem;
width: max-content;
animation: logo-scroll 65s linear infinite;
}
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
.logo-marquee-track span {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.02em;
color: #9aa3b5;
white-space: nowrap;
}
@keyframes logo-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Reduzierte Bewegung: Das automatische Laufen entfällt (Pflicht), die Leiste
bleibt aber EINE Reihe, die man selbst schieben kann. Der frühere Umbruch
auf mehrere Zeilen sah aus, als wäre die Animation kaputt — und weil der
Track für den nahtlosen Loop verdoppelt ist, stand dort jedes Logo zweimal. */
@media (prefers-reduced-motion: reduce) {
.logo-marquee { overflow-x: auto; }
.logo-marquee-track { animation: none; }
}
/* ---------- Abschnitte ---------- */
.abschnitt { padding: 6rem 0; }
.abschnitt-getoent { background: var(--farbe-getoent); }
.abschnitt h2 {
text-align: center;
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
font-weight: 900;
letter-spacing: -0.02em;
margin-bottom: 1rem;
}
.abschnitt-untertitel {
text-align: center;
font-size: 1.1rem;
color: var(--farbe-text-hell);
max-width: 560px;
margin: 0 auto 3rem;
}
/* Dunkles Band (Ergebnisse) */
.abschnitt-dunkel {
background: var(--farbe-gruen-tinte);
color: #fff;
}
.abschnitt-dunkel h2 { color: #fff; }
/* Fließtext auf dunklem Grund: das Standard-Grau (--farbe-text-hell) ist dort
unlesbar — gleiche Mint-Tönung wie auf den /live-Seiten. */
.abschnitt-dunkel .abschnitt-untertitel { color: #9ec9b8; }
/* Live-Workshops-Konnex: dunkles Panel im Stil des /excel-Garantie-Panels
(Tinte + Radial-Schimmer, Wasserzeichen, Chip mit Live-Puls), Inhalt
linksbündig. Mit gepflegtem Bild (data-lp-foto füllt und setzt
.bild-platzhalter-gefuellt) → zweispaltig, Text links, Bild rechts;
Spaltenbreite über data-lp-spalte (--bild-breite). */
/* Kein Abstand nach oben — das Panel soll „aus einem Guss" mit der Sektion
darüber wirken; unten bleibt der normale Abschnitts-Abstand. */
.abschnitt.lw-konnex { padding-top: 0; }
.lw-konnex-panel {
position: relative; overflow: hidden;
background:
radial-gradient(75% 130% at 88% -10%, rgba(47, 122, 92, 0.55) 0%, transparent 60%),
radial-gradient(60% 110% at 0% 110%, rgba(23, 74, 56, 0.5) 0%, transparent 55%),
var(--farbe-gruen-tinte);
border-radius: var(--radius-gross);
padding: 3.2rem 3.6rem;
color: #fff;
}
.lw-konnex-wasserzeichen {
position: absolute; right: -34px; bottom: -56px;
width: 320px; height: 320px;
color: #fff; opacity: 0.08; pointer-events: none;
}
.lw-konnex-chip {
display: inline-flex; align-items: center; gap: 0.55rem;
padding: 0.45rem 1.05rem;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 999px;
font-size: 0.88rem; font-weight: 700; letter-spacing: 0.01em;
}
.lw-konnex-puls {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
background: #ff5a45; box-shadow: 0 0 0 0 rgba(255, 90, 69, 0.6);
animation: pwv2puls 1.8s infinite;
}
@media (prefers-reduced-motion: reduce) { .lw-konnex-puls { animation: none; } }
.lw-konnex-panel h2 {
text-align: left; color: #fff;
font-size: clamp(1.7rem, 3vw, 2.3rem);
margin: 1.2rem 0 0.9rem;
}
.lw-konnex-absatz { max-width: 62ch; color: #9ec9b8; line-height: 1.7; font-size: 1.05rem; }
.lw-konnex-panel .btn { margin-top: 1.5rem; }
.lw-konnex-reihe { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
.lw-konnex-reihe:has(.bild-platzhalter-gefuellt) { grid-template-columns: 1fr var(--bild-breite, 42%); }
.lw-konnex-bild { aspect-ratio: 4 / 3; }
.lw-konnex-bild:not(.bild-platzhalter-gefuellt) { display: none; }
@media (max-width: 760px) {
.lw-konnex-panel { padding: 2.2rem 1.6rem; }
.lw-konnex-panel .btn { width: 100%; text-align: center; }
.lw-konnex-wasserzeichen { width: 220px; height: 220px; right: -60px; bottom: -80px; }
.lw-konnex-reihe:has(.bild-platzhalter-gefuellt) { grid-template-columns: 1fr; }
.lw-konnex-bild { order: -1; }
}
.liste-positiv { list-style: none; }
.liste-positiv li { padding: 0.4rem 0; color: var(--farbe-text-hell); }
.liste-positiv li::before { content: "✓ "; color: var(--farbe-gruen); font-weight: 900; }
/* ---------- Funktionen: abwechselnde Reihen mit Bild ---------- */
.funktion-reihe {
display: grid;
grid-template-columns: 1fr 1fr; /* Standard 50/50 (auch #sprints) */
gap: 3.5rem;
align-items: center;
/* Oberer Abstand seit Entfall der Sektions-Untertitel (07/2026): kollabiert
zwischen den Reihen mit dem 4.5rem-Bottom-Margin (kein Doppel-Abstand),
wirkt nur direkt unter der Überschrift. */
margin-top: 2.5rem;
margin-bottom: 4.5rem;
}
.funktion-reihe:last-child { margin-bottom: 0; }
/* Abwechselnde Reihen: Bild links, Text rechts. Bewusst nth-OF-TYPE statt
nth-child — gezählt werden nur die div-Reihen selbst, nicht alle Geschwister:
ein entferntes/ergänztes (z. B. der Sektions-Untertitel, 07/2026) darf
die Seiten nicht mehr vertauschen. Erste Reihe = Bild links (wie immer). */
.funktion-reihe:nth-of-type(odd) .funktion-text { order: 2; }
.funktion-reihe:nth-of-type(odd) .bild-platzhalter { order: 1; }
/* Nur der Funktionen-Abschnitt: Bild-Spaltenbreite per --bild-breite im Admin →
Seiten-Inhalte je Reihe einstellbar (data-lp-spalte). Bild+Text passen sich an.
Erste Reihe: Bild links · zweite Reihe: Bild rechts. */
#funktionen .funktion-reihe { grid-template-columns: 1fr var(--bild-breite, 42%); }
#funktionen .funktion-reihe:nth-of-type(odd) { grid-template-columns: var(--bild-breite, 42%) 1fr; }
/* ---------- Funktionen-Rotator: Karten 2–4 gestapelt mit weichem Wechsel ----------
Die Karten liegen im selben Grid-Feld übereinander (Container = höchste
Karte, kein Springen), nur die aktive ist sichtbar. Innerhalb des Rotators
ist die Ausrichtung FIX (Text links, Bild rechts) — die nth-of-type-
Abwechslung der Sektion würde sonst beim Durchblättern die Seiten tauschen. */
.fn-rotator { margin-top: 2.5rem; }
.fn-rotator-buehne { display: grid; }
.fn-rotator-buehne > .funktion-reihe {
grid-area: 1 / 1;
align-self: start; /* kürzere Karten oben bündig, kein Zentrieren im Leerraum */
margin: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.45s ease;
}
.fn-rotator-buehne > .funktion-reihe.aktiv { opacity: 1; pointer-events: auto; }
#funktionen .fn-rotator-buehne > .funktion-reihe { grid-template-columns: 1fr var(--bild-breite, 42%); }
#funktionen .fn-rotator-buehne > .funktion-reihe .funktion-text { order: 1; }
#funktionen .fn-rotator-buehne > .funktion-reihe .bild-platzhalter { order: 2; }
.fn-punkte { display: flex; align-items: center; justify-content: center; gap: 0.55rem; margin-top: 1.8rem; }
/* Dezente Variante der Slider-Pfeile: ohne Rahmen/Fläche, grün.
Doppelklasse nötig — die .slider-pfeil-Basisregel steht später im
Stylesheet und würde bei gleicher Spezifität gewinnen. */
.slider-pfeil.fn-pfeil {
width: 32px;
height: 32px;
flex-shrink: 0;
border: none;
background: none;
box-shadow: none;
color: var(--farbe-gruen);
}
.slider-pfeil.fn-pfeil:hover { border: none; background: none; box-shadow: none; color: var(--farbe-gruen-dunkel); }
.fn-pfeil svg { width: 18px; height: 18px; }
.fn-pfeil:first-child { margin-right: 0.6rem; }
.fn-pfeil:last-child { margin-left: 0.6rem; }
.fn-punkt {
width: 9px;
height: 9px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--farbe-rand);
cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
.fn-punkt:hover { background: var(--farbe-gruen-zart); }
.fn-punkt.aktiv { background: var(--farbe-gruen); transform: scale(1.2); }
.funktion-text h3 {
font-size: 1.5rem;
font-weight: 900;
letter-spacing: -0.01em;
margin-bottom: 0.7rem;
}
.funktion-text > p { color: var(--farbe-text-hell); margin-bottom: 1rem; }
/* Button nach der Liste nicht direkt ankleben lassen */
.funktion-text .btn { margin-top: 1.5rem; }
/* ---------- Bild-Platzhalter ---------- */
.bild-platzhalter {
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.6rem;
border: 1px dashed #c3cfc9;
border-radius: var(--radius-gross);
background: linear-gradient(150deg, #f0f5f2 0%, #e6efe9 100%);
color: #8aa297;
font-size: 0.9rem;
font-weight: 600;
}
.bild-platzhalter svg { width: 36px; height: 36px; }
.bild-platzhalter-portrait {
aspect-ratio: 1 / 1;
/* Breite = Bild-Spalte des Über-Gründer-Blocks (--bild-breite von .ueber-inhalt
geerbt, im Admin → Seiten-Inhalte einstellbar). Bild passt sich der Breite an. */
flex: 0 0 var(--bild-breite, 44%);
max-width: none;
}
/* ---------- Ergebnisse (Zahlen-Band) ---------- */
.zahlen-raster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 2rem;
margin-top: 3rem;
text-align: center;
}
.zahl-wert {
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 900;
letter-spacing: -0.02em;
color: #fff;
}
.zahl-text { color: #9ec9b8; font-size: 0.95rem; margin-top: 0.3rem; }
/* ---------- Bewertungen (Slider) ---------- */
/* Oberer Abstand seit Entfall des Bewertungs-Untertitels (07/2026): kollabiert
auf Seiten, die noch einen Untertitel davor haben (z. B. /live), mit dessen
Margin — addiert sich also nie doppelt. */
.slider-bereich { position: relative; margin-top: 2.5rem; }
.slider {
display: flex;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 0.5rem 0.25rem 1.2rem; /* Luft, damit Schatten nicht abgeschnitten werden */
scrollbar-width: none; /* Scrollleiste ausblenden (Firefox) */
}
.slider::-webkit-scrollbar { display: none; }
.bewertung-karte {
flex: 0 0 calc((100% - 48px) / 3); /* drei Karten pro Ansicht */
min-width: 290px;
scroll-snap-align: start;
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross);
padding: 1.8rem;
box-shadow: var(--schatten);
display: flex;
flex-direction: column;
}
.bewertung-sterne { color: var(--farbe-gold); letter-spacing: 3px; margin-bottom: 0.9rem; }
.bewertung-text { color: var(--farbe-text); margin-bottom: 1.4rem; flex-grow: 1; }
.bewertung-person { display: flex; align-items: center; gap: 0.8rem; }
.bewertung-avatar {
flex-shrink: 0;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
background: var(--farbe-gruen-zart);
color: var(--farbe-gruen-dunkel);
font-size: 0.8rem;
font-weight: 700;
}
.bewertung-autor { font-weight: 700; font-size: 0.95rem; }
.bewertung-firma { font-size: 0.85rem; color: var(--farbe-text-hell); }
.slider-steuerung {
display: flex;
justify-content: center;
gap: 0.8rem;
margin-top: 0.5rem;
}
.slider-pfeil {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--farbe-rand);
border-radius: var(--radius);
background: var(--farbe-hintergrund);
color: var(--farbe-text);
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.slider-pfeil:hover {
border-color: var(--farbe-gruen);
color: var(--farbe-gruen);
box-shadow: var(--schatten);
}
.slider-pfeil svg { width: 20px; height: 20px; }
/* ---------- Pakete ---------- */
.pakete-raster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
align-items: stretch;
max-width: 1080px;
/* Eigener oberer Abstand, bewusst GRÖSSER als die üblichen 3rem: die
hervorgehobene Karte ist um 10px angehoben und um 3,5 % skaliert
(~10px nach oben), das „Beliebt"-Badge ragt weitere 15px darüber
hinaus — zusammen ~35px, die vom nominellen Abstand abgehen. 5rem
lassen so effektiv ~3rem Luft zwischen Untertitel und Badge.
Kollabiert mit dem 3rem-Margin des Untertitels (addiert sich nicht). */
margin: 5rem auto 0;
}
/* Zwei Pakete (Pro + Lifetime) — schmaler */
.pakete-raster-zwei { max-width: 760px; }
.paket-karte {
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #fbfcfb 100%);
border: 1px solid var(--farbe-rand);
border-radius: 22px;
padding: 2.6rem 2rem 2.2rem;
text-align: center;
display: flex;
flex-direction: column;
box-shadow: 0 12px 32px -18px rgba(16,24,40,0.22);
transition: transform 0.3s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.paket-karte:hover {
transform: translateY(-6px);
box-shadow: 0 24px 48px -22px rgba(16,24,40,0.30);
}
/* Mittlere, „beliebte" Karte — leicht erhöht, weiches grünes Leuchten */
.paket-karte.hervorgehoben {
border: 1.5px solid var(--farbe-gruen);
background: linear-gradient(180deg, var(--farbe-gruen-zart) 0%, #ffffff 58%);
box-shadow: 0 26px 52px -22px rgba(14,123,90,0.40);
transform: translateY(-10px) scale(1.035);
z-index: 2;
}
.paket-karte.hervorgehoben:hover {
transform: translateY(-16px) scale(1.035);
box-shadow: 0 32px 64px -24px rgba(14,123,90,0.48);
}
/* Einspaltig (mobil): kein scale → kein horizontaler Überlauf */
@media (max-width: 860px) {
.paket-karte.hervorgehoben { transform: none; }
.paket-karte.hervorgehoben:hover { transform: translateY(-6px); }
}
.paket-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 0.38rem;
padding: 0.45rem 1.05rem;
border-radius: 999px;
background: linear-gradient(135deg, var(--farbe-gruen) 0%, var(--farbe-gruen-dunkel) 100%);
color: #fff;
font-size: 0.76rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 8px 18px -7px rgba(14,123,90,0.65);
}
.paket-badge svg { width: 13px; height: 13px; }
.paket-thumb {
width: calc(100% + 4rem);
margin: -2.4rem -2rem 1.4rem; /* bündig bis an den Kartenrand */
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--radius-gross) var(--radius-gross) 0 0;
display: block;
}
.paket-name {
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -0.02em;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.paket-icon { width: 22px; height: 22px; object-fit: contain; }
.paket-preis {
font-size: 2.8rem;
font-weight: 900;
letter-spacing: -0.02em;
margin: 0.8rem 0 0.6rem;
}
.paket-preis small { font-size: 1rem; font-weight: 500; color: var(--farbe-text-hell); }
.paket-beschreibung { color: var(--farbe-text-hell); font-size: 0.95rem; margin-bottom: 1.4rem; }
.paket-funktionen {
list-style: none;
text-align: left;
/* KEINE auto-Zentrierung: als Flex-Kind würde die Liste sonst auf die
Inhaltsbreite schrumpfen und zentrieren → springt beim Umschalten. */
width: 100%;
margin: 0 0 1.8rem;
padding: 0;
flex-grow: 1;
}
.paket-funktionen li {
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.4rem 0;
line-height: 1.5;
color: var(--farbe-text);
}
.paket-funktionen li::before {
content: "✓";
color: var(--paket-akzent, var(--farbe-gruen));
font-weight: 900;
flex-shrink: 0;
}
.paket-karte .btn { width: 100%; }
/* ---------- Mobiler Sticky-CTA (nur Handy) ---------- */
.sticky-cta { display: none; }
@media (max-width: 760px) {
.sticky-cta {
display: block;
position: fixed;
left: 1rem; right: 1rem; bottom: 1rem;
z-index: 60;
padding: 0.95rem 1.2rem;
border-radius: 999px;
background: var(--farbe-gruen-dunkel);
color: #fff;
font-weight: 700;
text-align: center;
text-decoration: none;
box-shadow: 0 10px 30px rgba(11, 47, 36, 0.28);
transform: translateY(160%);
opacity: 0;
pointer-events: none;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.sticky-cta.sichtbar {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
}
/* ---------- Über Jakob Neubauer ---------- */
.ueber-inhalt {
display: flex;
align-items: center;
gap: 3.5rem;
max-width: 940px;
}
.ueber-text { flex: 1 1 auto; min-width: 0; }
.ueber-text h2 { text-align: left; margin-bottom: 1.2rem; }
.ueber-text p { color: var(--farbe-text-hell); margin-bottom: 1rem; }
.ueber-signatur {
font-weight: 600;
color: var(--farbe-gruen-dunkel) !important;
margin-bottom: 0 !important;
}
/* ---------- FAQ ---------- */
/* FAQ — Optik identisch zur /live-Seite (.pw-faq*): randlose Zeilen mit
feiner Trennlinie, Plus/Minus-Icon, weiche 0fr→1fr-Höhenanimation. */
.faq-liste { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; }
.faq-eintrag { overflow: hidden; }
.faq-frage {
width: 100%; cursor: pointer; padding: 1rem 0; font: inherit; font-weight: 600;
text-align: left; background: none; border: 0; color: var(--farbe-text);
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-eintrag.offen .faq-frage { color: var(--farbe-gruen-tinte); }
.faq-icon { position: relative; flex-shrink: 0; width: 16px; height: 16px; }
.faq-icon::before, .faq-icon::after {
content: ''; position: absolute; background: var(--farbe-gruen);
left: 50%; top: 50%; transition: transform 0.25s ease;
}
.faq-icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.faq-icon::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.faq-eintrag.offen .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
/* Smooth: 0fr → 1fr animiert die Höhe weich */
.faq-antwort-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s ease; }
.faq-eintrag.offen .faq-antwort-wrap { grid-template-rows: 1fr; }
.faq-antwort { overflow: hidden; }
.faq-antwort p { margin: 0; padding: 0 0 1.1rem; color: var(--farbe-text-hell); line-height: 1.65; max-width: 68ch; }
/* ---------- Abschluss-CTA ---------- */
.cta-band {
background: var(--farbe-gruen-tinte);
color: #fff;
text-align: center;
padding: 5rem 0;
}
.cta-band h2 {
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
font-weight: 900;
letter-spacing: -0.02em;
margin-bottom: 0.8rem;
}
.cta-band p { color: #9ec9b8; margin-bottom: 2rem; }
/* ---------- Karten-Raster (Dashboard / Admin) ---------- */
.karten-raster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.8rem;
}
/* ---------- Inhalts-Raster (Kurse-/Workshop-/Sprint-Übersicht):
maximal 2 Karten pro Reihe, jede Karte max. 50 % Breite — auch bei
nur einer Karte nie volle Breite. ---------- */
.inhalt-raster {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.8rem;
}
@media (max-width: 720px) {
.inhalt-raster { grid-template-columns: 1fr; }
}
/* ---------- Checkout ---------- */
.checkout-kopf {
background: var(--farbe-hintergrund);
border-bottom: 1px solid var(--farbe-rand);
}
.checkout-kopf-inhalt {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 0.9rem;
padding-bottom: 0.9rem;
}
.checkout-sicher {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--farbe-gruen-dunkel);
}
.checkout-sicher svg { width: 16px; height: 16px; }
.checkout-main { padding-top: 3rem; padding-bottom: 5rem; max-width: 1020px; }
.checkout-main h1 {
font-size: 1.8rem;
font-weight: 900;
letter-spacing: -0.02em;
margin-bottom: 1.6rem;
}
/* Hinweis nach Rückkehr vom Zahlungsanbieter (abgebrochen, ausstehend …) */
.checkout-status {
display: none;
border-radius: var(--radius);
padding: 0.8rem 1.1rem;
margin-bottom: 1.6rem;
font-size: 0.95rem;
}
.checkout-status.sichtbar { display: block; }
.checkout-status.warnung { background: var(--farbe-warnung-zart); color: var(--farbe-warnung); border: 1px solid var(--farbe-warnung-rand); }
.checkout-status.info { background: var(--farbe-gruen-zart); color: var(--farbe-gruen-dunkel); border: 1px solid #cde5da; }
.checkout-raster {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 3rem;
align-items: start;
}
/* Formular links — bewusst OHNE Karte, direkt auf der Seite (Shopify-Stil) */
.checkout-formular { order: 1; min-width: 0; }
/* Kompaktere Feldabstände für ein ruhigeres Formular */
.checkout-formular .formular-feld { margin-bottom: 0.85rem; }
.checkout-formular .formular-feld label { font-size: 0.88rem; }
.checkout-formular .feld-hinweis:empty { display: none; }
.checkout-abschnitt {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.01em;
margin: 2rem 0 1rem;
}
.checkout-formular .checkout-abschnitt:first-child { margin-top: 0; }
/* Nur für Screenreader (z. B. die Zahlarten-Legende) */
.sr-nur {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.checkout-karte {
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross);
padding: 1.8rem;
box-shadow: var(--schatten);
}
.checkout-karte h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 1.2rem; }
/* Bestellübersicht rechts: ruhige graue Karte, bleibt beim Scrollen stehen */
.bestellung {
order: 2;
background: var(--farbe-getoent);
position: sticky;
top: 1.5rem;
}
/* Großes Paket-Thumbnail oben in der Bestellübersicht (bündig) */
.bestellung-thumb-gross {
display: block;
width: calc(100% + 3.6rem);
/* kein negativer oberer Rand — sonst überlappt das Bild den Titel;
links/rechts weiterhin bündig bis an den Kartenrand */
margin: 0 -1.8rem 1.3rem;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 0;
}
/* EU-Pflichtangabe direkt am Preis (inkl./exkl. USt) */
.preis-steuer {
font-size: 0.74rem;
color: var(--farbe-text-hell);
text-align: right;
margin-top: 0.15rem;
white-space: nowrap;
}
/* Eingabefeld mit Status-Haken (z. B. UID-Format gültig) */
.eingabe-mit-status { position: relative; }
.eingabe-mit-status input { padding-right: 2.6rem; }
.eingabe-haken {
position: absolute;
right: 0.8rem;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--farbe-gruen);
color: #fff;
}
.eingabe-haken svg { width: 12px; height: 12px; }
/* Produktzeile: Thumbnail (16:9) + Name + Preis */
.bestellung-produkt {
display: flex;
align-items: flex-start;
gap: 0.9rem;
}
.bestellung-produkt-text { flex: 1; min-width: 0; }
.bestellung-icon { width: 18px; height: 18px; object-fit: contain; vertical-align: -3px; margin-right: 0.3rem; }
/* Steuerzeilen über der Summe — mit klarem Abstand zur Summe darunter */
.bestellung-steuern { border-top: 1px solid var(--farbe-rand); margin-top: 1rem; padding-top: 0.9rem; padding-bottom: 1rem; }
.bestellung-steuern .steuer-zeile { font-size: 0.92rem; padding: 0.3rem 0; }
.bestellung-paketname { font-weight: 700; }
.bestellung-beschreibung { font-size: 0.9rem; color: var(--farbe-text-hell); margin-top: 0.2rem; }
.bestellung-preis { font-weight: 900; white-space: nowrap; padding-top: 0.05rem; }
/* Format-Zeile unter dem Titel (statt der eingeengten Termin-Liste) */
.bestellung-produkt-format { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.3rem; font-size: 0.86rem; color: var(--farbe-text-hell); }
/* Nur das direkte Monitor-Icon grün färben — NICHT die Garantie-Schilder
darunter (.bestellung-schilder), die ihre eigene Farbe via currentColor tragen. */
.bestellung-produkt-format > svg { width: 15px; height: 15px; color: var(--farbe-gruen); flex-shrink: 0; }
/* Termin-Block: volle Breite (nicht mehr zwischen Bild und Preis gequetscht),
Datum/Uhrzeit damit klar lesbar — Desktop wie Mobil */
.bestellung-termin { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--farbe-rand); }
.bestellung-termin-titel { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--farbe-text-hell); margin-bottom: 0.5rem; }
.bestellung-termin .pw-session-liste { margin: 0; }
.bestellung-funktionen { margin: 1rem 0 1.2rem; font-size: 0.93rem; }
/* Termingarantie-/Wissensgarantie-Schilder neben der Format-Zeile */
.bestellung-schilder { display: inline-flex; align-items: center; gap: 0.15rem; margin-left: 0.5rem; }
.bestellung-summe {
display: flex;
justify-content: space-between;
align-items: baseline;
border-top: 1px solid var(--farbe-rand);
padding-top: 1rem;
font-size: 1.25rem;
font-weight: 900;
}
.bestellung-summe small { font-size: 0.78rem; font-weight: 500; color: var(--farbe-text-hell); }
.bestellung-vertrauen {
list-style: none;
border-top: 1px solid var(--farbe-rand);
margin-top: 1.2rem;
padding-top: 1rem;
font-size: 0.88rem;
color: var(--farbe-text-hell);
}
.bestellung-vertrauen li { padding: 0.2rem 0; }
.bestellung-vertrauen li::before { content: "✓ "; color: var(--farbe-gruen); font-weight: 900; }
/* Zahlungsmethoden als anklickbare Karten */
.zahlarten { border: none; margin: 1.4rem 0 1.6rem; display: grid; gap: 0.8rem; }
.zahlarten legend { font-weight: 600; margin-bottom: 0.6rem; }
.zahlart {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 0.9rem 1.1rem;
border: 1px solid var(--farbe-rand);
border-radius: var(--radius);
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease;
}
.zahlart:hover { border-color: var(--farbe-gruen); }
.zahlart:has(input:checked) {
border-color: var(--farbe-gruen);
background: var(--farbe-gruen-zart);
}
.zahlart input { accent-color: var(--farbe-gruen); width: 18px; height: 18px; flex-shrink: 0; }
.zahlart-icon {
flex-shrink: 0;
display: flex;
align-items: center;
color: var(--farbe-gruen-dunkel);
}
.zahlart-icon svg { width: 24px; height: 24px; }
.zahlart-name { font-weight: 700; }
.checkout-knopf { width: 100%; }
.checkout-knopf:disabled { opacity: 0.6; cursor: wait; transform: none; }
.checkout-rechtliches {
margin-top: 1rem;
font-size: 0.82rem;
color: var(--farbe-text-hell);
text-align: center;
}
.checkout-rechtliches a { color: var(--farbe-gruen-dunkel); }
.feld-hinweis { font-size: 0.82rem; color: var(--farbe-text-hell); margin-top: 0.3rem; }
/* ---------- Checkout: Unternehmens-Checkbox + Steuer-Aufschlüsselung ---------- */
/* Höhere Spezifität als die generischen .formular-feld label/input-Regeln,
damit die Checkbox nicht als 100%-breites Textfeld dargestellt wird. */
.formular-feld .checkbox-zeile {
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
gap: 0.6rem;
font-weight: 600;
cursor: pointer;
}
.formular-feld .checkbox-zeile input {
width: 18px;
height: 18px;
accent-color: var(--farbe-gruen);
flex-shrink: 0;
}
.steuer-zeile {
display: flex;
justify-content: space-between;
padding: 0.15rem 0;
color: var(--farbe-text-hell);
}
/* ---------- Erfolgs-Hero (Konto aktivieren nach der Zahlung) ---------- */
/* .formular-box.formular-box-breit statt nur .formular-box-breit, damit die
breitere max-width die spätere .formular-box-Regel sicher überschreibt */
.formular-box.formular-box-breit { max-width: 550px; }
.erfolg-hero { text-align: center; margin-bottom: 1.8rem; }
.erfolg-hero h1 { margin-bottom: 0.4rem; }
.erfolg-hero p { color: var(--farbe-text-hell); font-size: 0.97rem; }
.erfolg-kreis {
width: 72px;
height: 72px;
margin: 0 auto 1.2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
background: var(--verlauf);
box-shadow: 0 10px 30px rgba(14, 123, 90, 0.35), 0 0 0 10px var(--farbe-gruen-zart);
animation: erfolgPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.erfolg-kreis svg {
width: 34px;
height: 34px;
stroke-dasharray: 30;
stroke-dashoffset: 30;
animation: hakenZeichnen 0.5s ease 0.35s forwards;
}
@keyframes erfolgPop {
from { transform: scale(0.4); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
@keyframes hakenZeichnen { to { stroke-dashoffset: 0; } }
/* Nicht änderbare Felder (vorausgefüllte E-Mail) */
.formular-feld input[readonly] {
background: var(--farbe-getoent);
color: var(--farbe-text-hell);
cursor: not-allowed;
}
/* ---------- Formulare (Login / Registrierung / Admin) ---------- */
.formular-box {
max-width: 420px;
margin: 5rem auto;
padding: 2.4rem 2rem;
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross);
box-shadow: var(--schatten);
}
.formular-box h1 { font-size: 1.6rem; font-weight: 900; margin-bottom: 1.5rem; text-align: center; }
.formular-feld { margin-bottom: 1rem; }
.formular-feld label { display: block; margin-bottom: 0.3rem; font-weight: 600; }
.formular-feld input,
.team-mitglied-form input {
width: 100%;
padding: 0.7rem 0.9rem;
border: 1px solid var(--farbe-rand);
border-radius: var(--radius);
font-size: 1rem;
font-family: inherit;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.formular-feld input:focus,
.team-mitglied-form input:focus {
outline: none;
border-color: var(--farbe-gruen);
box-shadow: var(--ring);
}
.formular-box .btn { width: 100%; margin-top: 0.5rem; }
.formular-hinweis { text-align: center; margin-top: 1rem; color: var(--farbe-text-hell); }
.formular-hinweis-klein { font-size: 0.85rem; }
.formular-hinweis-klein a { color: var(--farbe-text-hell); }
.formular-hinweis-klein a:hover { color: var(--farbe-gruen-dunkel); }
/* Fehlermeldung im Plattform-Stil: weiche Tönung ohne harten Rand,
kleines Hinweis-Icon, sanftes Einblenden (statt „Bootstrap-Alert") */
.fehlermeldung {
display: none;
align-items: flex-start;
gap: 0.6rem;
background: var(--farbe-fehler-zart);
color: var(--farbe-fehler);
border-radius: var(--radius);
padding: 0.75rem 1rem;
margin-bottom: 1.1rem;
font-size: 0.9rem;
font-weight: 500;
line-height: 1.5;
}
.fehlermeldung::before {
content: "";
flex-shrink: 0;
width: 17px;
height: 17px;
margin-top: 2px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") no-repeat center / contain;
}
.fehlermeldung.sichtbar {
display: flex;
animation: fehlerEin 0.22s ease;
}
@keyframes fehlerEin {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
Auth-Seiten (Login / Passwort vergessen) — Split-Screen
Links Marken-Panel (grüner Verlauf wie der Dashboard-Hero),
rechts das Formular. Wirkt wie ein Teil des Mitgliederbereichs.
============================================================ */
.auth-body { background: var(--farbe-hintergrund); }
.auth-split {
flex: 1;
display: grid;
grid-template-columns: 1.05fr 1fr;
min-height: 100vh;
}
/* ---------- Marken-Panel (links) ---------- */
.auth-marke {
position: relative;
overflow: hidden;
display: flex;
color: #fff;
background: var(--verlauf);
padding: 3rem;
}
.auth-marke-inhalt {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: 100%;
max-width: 440px;
margin: auto;
}
.auth-logo {
font-size: 1.5rem;
color: #fff;
}
.auth-logo span { color: rgba(255, 255, 255, 0.65); }
.auth-marke-mitte { margin: auto 0; padding: 2.4rem 0; }
.auth-marke-titel {
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1.15;
margin-bottom: 0.8rem;
}
.auth-marke-text {
color: rgba(255, 255, 255, 0.82);
font-size: 1.02rem;
margin-bottom: 2rem;
max-width: 30ch;
}
.auth-vorteile { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.auth-vorteile li {
display: flex;
align-items: center;
gap: 0.9rem;
font-size: 0.96rem;
color: rgba(255, 255, 255, 0.92);
}
.auth-vorteile strong { font-weight: 700; color: #fff; }
.auth-vorteil-icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 10px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.auth-vorteil-icon svg { width: 19px; height: 19px; }
.auth-marke-fuss {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.6rem;
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.6);
}
.auth-marke-fuss nav { display: flex; gap: 1rem; }
.auth-marke-fuss a { color: rgba(255, 255, 255, 0.72); }
.auth-marke-fuss a:hover { color: #fff; }
/* Dekorative, weiche Lichtkreise im Hintergrund */
.auth-blob {
position: absolute;
border-radius: 50%;
filter: blur(10px);
opacity: 0.25;
pointer-events: none;
}
.auth-blob-1 {
width: 380px; height: 380px;
background: rgba(255, 255, 255, 0.5);
top: -120px; right: -120px;
}
.auth-blob-2 {
width: 300px; height: 300px;
background: var(--farbe-gruen-dunkel);
bottom: -130px; left: -90px;
opacity: 0.4;
}
/* ---------- Formular-Panel (rechts) ---------- */
.auth-panel {
display: flex;
align-items: center;
justify-content: center;
padding: 2.5rem 1.5rem;
}
.auth-karte {
width: 100%;
max-width: 400px;
}
.auth-karte-logo { display: none; font-size: 1.4rem; margin-bottom: 2rem; }
.auth-kopf { margin-bottom: 1.8rem; }
.auth-kicker {
display: inline-block;
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--farbe-gruen-dunkel);
margin-bottom: 0.6rem;
}
.auth-karte h1 {
font-size: 1.7rem;
font-weight: 900;
letter-spacing: -0.02em;
margin-bottom: 0.4rem;
}
.auth-kopf p { color: var(--farbe-text-hell); font-size: 0.96rem; }
/* Label-Zeile mit „Passwort vergessen?" rechts daneben */
.formular-feld-kopf {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 0.3rem;
}
.formular-feld-kopf label { margin-bottom: 0; }
.auth-mini-link { font-size: 0.84rem; color: var(--farbe-gruen-dunkel); font-weight: 600; }
.auth-mini-link:hover { text-decoration: underline; }
.auth-karte .btn { width: 100%; margin-top: 0.6rem; }
.auth-wechsel {
margin-top: 1.6rem;
padding-top: 1.4rem;
border-top: 1px solid var(--farbe-rand);
text-align: center;
font-size: 0.92rem;
color: var(--farbe-text-hell);
}
.auth-wechsel a { color: var(--farbe-gruen-dunkel); font-weight: 600; }
.auth-wechsel a:hover { text-decoration: underline; }
/* „oder"-Trenner zwischen Passwort- und Magic-Link-Login */
.auth-trenner {
display: flex;
align-items: center;
gap: 0.8rem;
margin: 1.3rem 0;
color: var(--farbe-text-hell);
font-size: 0.85rem;
}
.auth-trenner::before,
.auth-trenner::after {
content: "";
flex: 1;
height: 1px;
background: var(--farbe-rand);
}
/* Vollbreiter Sekundär-Knopf (z. B. „Per Link einloggen") */
.auth-block-knopf {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
width: 100%;
}
/* ---------- Mobil: Panels stapeln, Marke wird kompakt ---------- */
@media (max-width: 860px) {
.auth-split { grid-template-columns: 1fr; }
.auth-marke { padding: 2rem 1.5rem; }
.auth-marke-inhalt { max-width: 520px; }
.auth-marke-mitte { margin: 1.4rem 0 0; padding: 0; }
.auth-marke-titel { font-size: 1.5rem; }
.auth-marke-text { margin-bottom: 1.4rem; }
.auth-vorteile { display: none; } /* Vorteile nur auf großen Screens */
.auth-marke-fuss { display: none; }
}
@media (max-width: 560px) {
.auth-marke { display: none; } /* ganz schmal: nur das Formular */
.auth-karte-logo { display: block; }
}
/* ---------- Rechtstexte (Impressum, Datenschutz, AGB) ---------- */
.rechtstext-titel {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 900;
letter-spacing: -0.02em;
margin-bottom: 1.6rem;
}
.rechtstext-inhalt p { margin-bottom: 1rem; color: var(--farbe-text); }
/* text-align: left überschreibt das zentrierte .abschnitt h2 der Landing-Optik */
.rechtstext-inhalt h2 { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 0.8rem; text-align: left; }
.rechtstext-inhalt h3 { font-size: 1.05rem; font-weight: 700; margin: 1.4rem 0 0.6rem; text-align: left; }
/* ---------- Lade-Hinweis ---------- */
.lade-hinweis { text-align: center; color: var(--farbe-text-hell); grid-column: 1 / -1; }
/* ---------- Fußzeile ----------
Immer am unteren Seitenrand (sticky bottom) — der body ist eine
Flex-Spalte mit min-height 100vh, die Fußzeile drückt sich mit
margin-top:auto nach unten. Links bewusst dezent. */
body:not(.admin-body) {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.fusszeile {
margin-top: auto;
border-top: 1px solid var(--farbe-rand);
padding: 1.4rem 0;
color: #9aa3b5;
font-size: 0.82rem;
background: var(--farbe-hintergrund);
}
.fusszeile-inhalt {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.fusszeile p { margin: 0; }
.fusszeile nav { display: flex; gap: 1.2rem; }
.fusszeile a {
color: #9aa3b5;
text-decoration: none;
transition: color 0.2s ease;
}
.fusszeile a:hover { color: var(--farbe-text-hell); }
/* ---------- Scroll-Animationen ----------
Elemente mit .anim starten unsichtbar und gleiten herein,
sobald das Inline-Script ihnen .anim-sichtbar gibt (IntersectionObserver). */
/* Nur bei aktivem JS verstecken (ohne JS bleibt alles sichtbar). Die
Aufdeck-Regel traegt denselben html.js-Praefix — sie muss die
Versteck-Regel in der Spezifitaet schlagen, sonst bleibt alles leer. */
html.js .anim {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js .anim.anim-sichtbar {
opacity: 1;
transform: translateY(0);
}
/* Karten in Rastern nacheinander einblenden (gestaffelte Verzögerung) */
.karten-raster .anim:nth-child(2),
.pakete-raster .anim:nth-child(2),
.zahlen-raster .anim:nth-child(2) { transition-delay: 0.12s; }
.karten-raster .anim:nth-child(3),
.zahlen-raster .anim:nth-child(3) { transition-delay: 0.24s; }
.zahlen-raster .anim:nth-child(4) { transition-delay: 0.36s; }
@keyframes hereinGleiten {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes schweben {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(60px, 40px) scale(1.12); }
}
/* Reduzierte Bewegung respektieren: keine Animationen erzwingen */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.hero-inhalt, .hero-blob { animation: none; }
.anim { opacity: 1; transform: none; transition: none; }
}
/* ============================================================
App-Bereich (eingeloggter Mitgliederbereich)
Dashboard, Kurse, Kurs-Detail, Workshops, Vorlagen
============================================================ */
.app-body { background: var(--farbe-getoent); min-height: 100vh; }
/* Fixe Kopfzeile wie in einer App: Logo links, Navigation mittig,
Profil + Logout rechts */
.app-kopfzeile {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--farbe-rand);
}
.app-kopfzeile-inhalt {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.app-navigation { display: flex; justify-content: center; gap: 0.3rem; }
.app-nav-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 1rem;
border-radius: var(--radius);
text-decoration: none;
color: var(--farbe-text-hell);
font-weight: 500;
font-size: 0.95rem;
transition: color 0.15s ease, background 0.15s ease;
}
.app-nav-link svg { width: 17px; height: 17px; color: var(--akzent, var(--farbe-gruen)); }
.app-nav-link:hover {
color: var(--akzent-dunkel, var(--farbe-gruen-dunkel));
background: var(--akzent-zart, var(--farbe-gruen-zart));
}
.app-nav-link.aktiv {
color: var(--akzent-dunkel, var(--farbe-gruen-dunkel));
background: var(--akzent-zart, var(--farbe-gruen-zart));
}
/* Premium-Nav-Punkt: standardmäßig ohne Hintergrund (das Gold steckt im
Text). Hover/aktiv bekommen — wie die übrigen Punkte — einen leichten
Hintergrund, hier im Premium-Gold (--akzent-zart der Coaching-Zone). */
.app-nav-link.akzent-coaching { background: none; }
.app-nav-link.akzent-coaching:hover,
.app-nav-link.akzent-coaching.aktiv { background: var(--akzent-zart); }
.nav-premium-text {
background: linear-gradient(315deg, #B4A77F 0%, #B8901F 55%, #A8801A 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.app-profil { display: flex; justify-content: flex-end; align-items: center; gap: 0.9rem; }
.app-profil-name { font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.btn-klein { padding: 0.45rem 1rem; font-size: 0.9rem; }
/* ---------- Globale Suche: Lupe in der Kopfzeile + Such-Modal ---------- */
.app-suche { display: flex; align-items: center; }
.app-suche-knopf {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; flex-shrink: 0;
border: none; background: none; border-radius: 999px; cursor: pointer;
color: var(--farbe-text-hell);
transition: color 0.15s ease, background 0.15s ease;
}
.app-suche-knopf svg { width: 19px; height: 19px; }
.app-suche-knopf:hover { color: var(--farbe-gruen-dunkel); background: var(--farbe-gruen-zart); }
/* Such-Modal: Schleier über der Seite, Panel mittig im oberen Drittel.
Gleiche, dezente Abdunkelung wie das Lesezeichen-Overlay. */
.suche-overlay {
position: fixed; inset: 0; z-index: 300;
background: rgba(16, 24, 40, 0.18);
display: flex; justify-content: center; align-items: flex-start;
padding: 12vh 1rem 2rem;
}
.suche-panel {
width: 100%; max-width: 620px;
background: var(--farbe-hintergrund);
border-radius: var(--radius-gross);
box-shadow: var(--schatten-modal);
overflow: hidden;
animation: sucheEinblenden 0.18s ease both;
}
@keyframes sucheEinblenden {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
.suche-panel-form {
display: flex; align-items: center; gap: 0.7rem;
margin: 0; padding: 0.3rem 1.15rem;
border-bottom: 1px solid var(--farbe-rand);
}
.suche-panel-icon { display: inline-flex; flex-shrink: 0; color: var(--farbe-text-hell); }
.suche-panel-icon svg { width: 19px; height: 19px; }
.suche-panel-feld {
flex: 1; min-width: 0;
border: none; background: none;
padding: 0.9rem 0; font: inherit; font-size: 1.02rem; color: var(--farbe-text);
}
.suche-panel-feld:focus { outline: none; }
/* Vorschläge im Panel (statt absolutem Dropdown) */
.suche-panel-ergebnisse { max-height: 55vh; overflow-y: auto; padding: 0.5rem; }
.app-suche-gruppe + .app-suche-gruppe { margin-top: 0.35rem; }
.app-suche-gruppe-titel {
font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--farbe-text-hell); padding: 0.5rem 0.6rem 0.3rem;
}
.app-suche-treffer {
display: flex; align-items: center; gap: 0.7rem;
padding: 0.5rem 0.6rem; border-radius: var(--radius); text-decoration: none; color: inherit;
}
.app-suche-treffer:hover { background: var(--akzent-zart, var(--farbe-getoent)); }
.app-suche-treffer-icon {
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 8px;
background: var(--akzent-zart, var(--farbe-getoent)); color: var(--akzent, var(--farbe-gruen));
}
.app-suche-treffer-icon svg { width: 17px; height: 17px; }
.app-suche-treffer-text { min-width: 0; display: flex; flex-direction: column; }
.app-suche-treffer-titel {
font-size: 0.92rem; font-weight: 600; color: var(--farbe-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-suche-treffer-kontext {
font-size: 0.8rem; color: var(--farbe-text-hell);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suche-panel-ergebnisse mark {
background: var(--farbe-gruen-zart); color: var(--farbe-gruen-dunkel);
font-weight: 700; border-radius: 3px; padding: 0 1px;
}
.app-suche-alle {
display: block; text-align: center; margin-top: 0.35rem; padding: 0.6rem;
border-top: 1px solid var(--farbe-rand); text-decoration: none;
font-size: 0.88rem; font-weight: 600; color: var(--farbe-gruen-dunkel);
}
.app-suche-alle:hover { background: var(--farbe-gruen-zart); border-radius: var(--radius); }
.app-suche-leer { padding: 1rem 0.8rem; font-size: 0.9rem; color: var(--farbe-text-hell); text-align: center; }
/* Mobil: Panel weiter oben und volle Breite, Vorschläge kompakter */
@media (max-width: 720px) {
.suche-overlay { padding: 7vh 0.8rem 1.5rem; }
.suche-panel-ergebnisse { max-height: 62vh; }
}
/* ---------- Newsletter: öffentliche Landing-/Status-/Abmelde-Seiten (/nl/*)
Großzügige Abstände: ≥16px zwischen Feldern, ≥32px zwischen Abschnitten,
Buttons ≥12px/24px Padding, Content max. 640px, Mobile-Padding ≥16px. ---------- */
.nl-body { background: var(--farbe-getoent); min-height: 100vh; }
.nl-seite {
max-width: 640px; margin: 0 auto; padding: 3rem 1rem 2.5rem;
display: flex; flex-direction: column; align-items: center; gap: 1.8rem;
/* Fußzeile immer ganz unten, auch auf kurzen Seiten: der body ist eine
Flex-Spalte (min-height 100vh) — die Seite wächst mit, der Fuß drückt
sich mit margin-top:auto nach unten (gleicher Mechanismus wie .fusszeile). */
width: 100%; flex: 1;
}
.nl-logo { font-size: 1.15rem; }
.nl-karte {
width: 100%; background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross);
box-shadow: var(--schatten); padding: 2.4rem 2rem;
}
/* 16:9-Thumbnail randlos oben in der Karte (hebt das Karten-Padding auf) */
.nl-thumb {
display: block; width: calc(100% + 4rem); margin: -2.4rem -2rem 2rem;
aspect-ratio: 16 / 9; object-fit: cover;
border-radius: var(--radius-gross) var(--radius-gross) 0 0;
}
/* Ohne hochgeladenes Bild: Platzhalter im Seiten-Grün mit Mail-Icon (16:9) */
.nl-thumb-platzhalter {
display: flex; align-items: center; justify-content: center;
background: var(--farbe-getoent);
border-bottom: 1px solid var(--farbe-rand);
}
.nl-thumb-platzhalter svg { width: 58px; height: 58px; color: var(--farbe-gruen); opacity: 0.75; }
.nl-kicker {
font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; color: var(--farbe-gruen); margin-bottom: 0.7rem;
}
.nl-titel { font-size: clamp(1.4rem, 4vw, 1.8rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 1rem; }
.nl-text { color: var(--farbe-text-hell); line-height: 1.7; margin-bottom: 2rem; }
.nl-formular { display: flex; flex-direction: column; gap: 1rem; }
.nl-formular input[type="text"], .nl-formular input[type="email"] {
padding: 0.85rem 1.1rem; border: 1px solid var(--farbe-rand); border-radius: var(--radius);
font: inherit; font-size: 1rem; background: var(--farbe-hintergrund);
}
.nl-formular input:focus, .nl-freitext:focus { outline: none; border-color: var(--farbe-gruen); box-shadow: var(--ring); }
.nl-label { font-weight: 700; font-size: 0.9rem; text-align: left; }
.nl-textlink { color: var(--farbe-text-hell); text-decoration: underline; font-size: 0.9rem; }
.nl-einwilligung {
display: flex; align-items: flex-start; gap: 0.7rem; margin-top: 0.3rem;
font-size: 0.8rem; color: var(--farbe-text-hell); cursor: pointer; line-height: 1.6;
}
.nl-einwilligung a { color: var(--farbe-text-hell); }
.nl-einwilligung input { width: 17px; height: 17px; margin-top: 0.15rem; flex-shrink: 0; accent-color: var(--farbe-gruen); }
.nl-knopf { width: 100%; text-align: center; padding: 0.85rem 1.5rem; margin-top: 0.5rem; }
.nl-erfolg {
background: var(--farbe-gruen-zart); border: 1px solid var(--farbe-erfolg-rand);
border-radius: var(--radius); padding: 1.3rem 1.4rem; line-height: 1.65;
color: var(--farbe-gruen-tinte); margin-top: 1.5rem;
}
.nl-fehler {
background: var(--farbe-fehler-zart); border: 1px solid var(--farbe-fehler-rand);
border-radius: var(--radius); padding: 0.9rem 1.1rem; color: var(--farbe-fehler);
font-size: 0.92rem; margin-top: 1.5rem;
}
/* Abmelde-Seite: Feedback-Gründe (Radios) + Freitext */
.nl-gruende { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 0.5rem; }
.nl-grund {
display: flex; align-items: flex-start; gap: 0.7rem;
padding: 0.85rem 1.1rem; border: 1px solid var(--farbe-rand); border-radius: var(--radius);
cursor: pointer; line-height: 1.5; transition: border-color 0.15s ease, background 0.15s ease;
}
.nl-grund:hover { border-color: var(--farbe-gruen); }
.nl-grund:has(input:checked) { border-color: var(--farbe-gruen); background: var(--farbe-gruen-zart); }
.nl-grund input { width: 17px; height: 17px; margin-top: 0.15rem; flex-shrink: 0; accent-color: var(--farbe-gruen); }
.nl-freitext {
width: 100%; padding: 0.85rem 1.1rem; border: 1px solid var(--farbe-rand);
border-radius: var(--radius); font: inherit; font-size: 0.95rem; resize: vertical;
background: var(--farbe-hintergrund);
}
.nl-status { text-align: center; }
.nl-status-haken {
width: 56px; height: 56px; margin: 0 auto 1.3rem; border-radius: 50%;
background: var(--farbe-gruen); color: #fff; font-size: 1.7rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.nl-status .nl-knopf { width: auto; display: inline-block; margin-top: 0.6rem; }
.nl-fuss { font-size: 0.8rem; color: var(--farbe-text-hell); margin-top: auto; }
.nl-fuss a { color: var(--farbe-text-hell); text-decoration: none; }
.nl-fuss a:hover { text-decoration: underline; }
@media (max-width: 480px) {
.nl-karte { padding: 1.8rem 1.2rem; }
.nl-thumb { width: calc(100% + 2.4rem); margin: -1.8rem -1.2rem 1.6rem; }
.webinar-medien-nl .webinar-medien-rahmen { width: calc(100% + 2.4rem); margin: -1.8rem -1.2rem 1.6rem; }
}
/* Rich-Text-Beschreibung (aus dem Editor) auf den nl-Seiten */
.nl-text-rich p { margin: 0 0 1em; }
.nl-text-rich p:last-child { margin-bottom: 0; }
.nl-text-rich ul, .nl-text-rich ol { margin: 0.4em 0 1em; padding-left: 1.4rem; }
.nl-text-rich h1, .nl-text-rich h2, .nl-text-rich h3 { color: var(--farbe-text); margin: 1em 0 0.4em; line-height: 1.35; }
.nl-text-rich h1 { font-size: 1.25rem; } .nl-text-rich h2 { font-size: 1.1rem; } .nl-text-rich h3 { font-size: 1rem; }
.nl-text-rich a { color: var(--farbe-gruen-dunkel); }
.nl-text-rich hr { border: none; border-top: 1px solid var(--farbe-rand); margin: 1.2em 0; }
/* ---------- Webinar-Landing im Newsletter-Layout ----------
Identisch zur nl-Karte (einspaltig, max. 640px) — nur Medien oben +
Termin-Zeile unter dem Titel sind webinar-eigen. Die frühere breite
Zwei-Spalten-Variante, die Verknappung und die Teilnahme-Seite sind
ENTFERNT (07/2026). */
.webinar-medien-nl:empty, .webinar-medien-nl[hidden] { display: none; }
.webinar-medien-nl .webinar-medien-rahmen {
position: relative; display: block; width: calc(100% + 4rem);
margin: -2.4rem -2rem 2rem; aspect-ratio: 16 / 9; overflow: hidden;
border-radius: var(--radius-gross) var(--radius-gross) 0 0; background: #0b1512;
}
.webinar-medien-nl .webinar-medien-rahmen iframe,
.webinar-medien-nl .webinar-medien-rahmen img {
position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover;
}
.webinar-termin-nl {
display: flex; align-items: center; gap: 0.5rem;
font-weight: 600; color: var(--farbe-text); margin-bottom: 1rem;
}
.webinar-termin-nl .webinar-termin-icon { color: var(--farbe-gruen); flex-shrink: 0; }
/* ============================================================
Bezahlbare Workshops — öffentliche Landingpage (.pw-*)
Eigenständige Marketing-Seite (kein Plattform-Header). Nutzt die
Design-Tokens, aber breiteres, mehrsektioniges Layout.
============================================================ */
.pw-body { background: var(--farbe-getoent); min-height: 100vh; }
/* EINE konsistente Breite für ALLE /live-Seiten (Landing, Katalog, Termine,
Technik) — identisch mit .container/Checkout (1140px). Kein Springen mehr
zwischen den Unterseiten. */
.pw-seite {
width: 100%; max-width: 1140px; margin: 0 auto; padding: 2.4rem 1.2rem 3.2rem;
display: flex; flex-direction: column; gap: 2rem;
/* Fußzeile immer ganz unten, auch auf kurzen Seiten (siehe .nl-seite) */
flex: 1;
}
.pw-seite > .pw-hub-fuss { margin-top: auto; }
.pw-seite.pw-schmal { max-width: 1140px; }
/* ---------- 404-Fehlerseite („Hier steht nichts.") ---------- */
.f404 {
min-height: 100vh; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center;
padding: 2rem 1.2rem; gap: 0;
}
.f404 .logo { margin-bottom: 2.2rem; }
.f404-zahl {
margin: 0; font-size: clamp(6rem, 22vw, 11rem); font-weight: 900;
line-height: 0.95; letter-spacing: -0.04em;
background: linear-gradient(120deg, var(--farbe-gruen) 0%, var(--farbe-gruen-dunkel) 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.f404 h1 { margin: 0.8rem 0 0.5rem; font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; }
.f404-text { margin: 0 0 1.8rem; color: var(--farbe-text-hell); max-width: 44ch; line-height: 1.6; }
.f404-aktionen { display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; }
/* ---------- Hub-Rahmen: gemeinsame Bausteine ALLER /live-Seiten ---------- */
/* Kopf-Navigation = die Kopfzeile der Haupt-Landing (weiß, sticky, Logo
links + Links rechts). Hier nur der Aktiv-Zustand des Bereichs-Links. */
.pw-kopfzeile .nav-link.aktiv { color: var(--farbe-gruen); font-weight: 600; }
/* Auf dem /live-Hub sind die Bereichs-Links die EINZIGE Navigation — anders
als auf der Landing dürfen sie hier nicht per html.js-Regel verschwinden. */
.pw-kopfzeile .pw-navigation .nav-link { display: inline-flex !important; visibility: visible !important; }
/* Hamburger-Knopf: nur mobil sichtbar */
.pw-nav-toggle {
display: none; flex-direction: column; justify-content: center; gap: 5px;
width: 42px; height: 42px; padding: 9px; margin: -9px -9px -9px 0;
background: none; border: 0; cursor: pointer;
}
.pw-nav-toggle span {
display: block; width: 100%; height: 2px; border-radius: 2px;
background: var(--farbe-text); transition: transform 0.25s ease, opacity 0.2s ease;
}
.pw-kopfzeile.offen .pw-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pw-kopfzeile.offen .pw-nav-toggle span:nth-child(2) { opacity: 0; }
.pw-kopfzeile.offen .pw-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 720px) {
.pw-nav-toggle { display: flex; }
.pw-kopfzeile .kopfzeile-inhalt { flex-wrap: nowrap; position: relative; }
/* Menü als aufklappendes Panel unter der Kopfzeile */
.pw-kopfzeile .pw-navigation {
position: absolute; top: calc(100% + 0.9rem); left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 0;
background: #fff; border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross);
padding: 0.4rem 0.8rem 0.9rem; box-shadow: 0 18px 40px -20px rgba(9,60,44,0.4);
display: none;
}
.pw-kopfzeile.offen .pw-navigation { display: flex; }
.pw-kopfzeile .pw-navigation .nav-link {
display: block !important; padding: 0.85rem 0.4rem; font-size: 1rem;
border-bottom: 1px solid var(--farbe-rand);
}
.pw-kopfzeile .pw-navigation .nav-cta { margin-top: 0.9rem; text-align: center; }
}
/* Pulsierender Live-Punkt vor dem Kicker */
.pw-live-punkt {
position: relative; width: 8px; height: 8px; border-radius: 50%;
background: #e11d48; flex-shrink: 0; margin-right: 0.5rem;
}
.pw-live-punkt::after {
content: ""; position: absolute; inset: 0; border-radius: 50%;
background: #e11d48; animation: pwLivePuls 1.8s ease-out infinite;
}
@keyframes pwLivePuls {
from { transform: scale(1); opacity: 0.6; }
to { transform: scale(2.8); opacity: 0; }
}
/* Zentrierter Seitenkopf — identische Typografie auf allen Hub-Seiten */
.pw-hub-kopf { text-align: center; padding-top: 0.4rem; }
.pw-hub-kopf .pw-untertitel { margin: 0 auto; max-width: 62ch; }
.pw-hub-kopf .pw-meta { justify-content: center; margin-bottom: 0; margin-top: 1.1rem; }
/* Zentrierte Weiter-Links zwischen den Sektionen (etwas Luft nach unten,
damit Trust-Band/Hilfe-Block nicht am Button kleben) */
.pw-mehr-zeile {
display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap;
margin: 0 0 0.8rem;
}
/* Datums-Kachel: Tag groß + Monat — der visuelle Anker jeder Termin-Zeile */
.pw-dk {
display: flex; flex-direction: column; align-items: center; justify-content: center;
width: 58px; height: 58px; flex-shrink: 0; border-radius: 12px; gap: 0.12rem;
background: var(--farbe-gruen-zart); color: var(--farbe-gruen-tinte); line-height: 1;
}
.pw-dk-tag { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.pw-dk-monat { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; }
.pw-termin-voll .pw-dk { background: var(--farbe-getoent); color: var(--farbe-text-hell); }
.pw-btn-voll { pointer-events: none; opacity: 0.55; }
/* Hilfe-Block vor der Fußzeile: mittig, ohne Karte — mit Luft nach unten,
die Fußzeile schließt darunter mit einer Hairline sauber ab */
.pw-hilfe { text-align: center; padding: 1.2rem 0 1.6rem; }
.pw-hilfe strong { display: block; font-size: 1.1rem; letter-spacing: -0.01em; margin-bottom: 0.35rem; }
.pw-hilfe p { margin: 0 auto 1.1rem; color: var(--farbe-text-hell); font-size: 0.93rem; line-height: 1.6; max-width: 54ch; }
.pw-hilfe-aktionen { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; }
/* Fußzeile */
.pw-hub-fuss {
display: flex; align-items: center; justify-content: space-between;
gap: 0.5rem 1rem; flex-wrap: wrap;
font-size: 0.8rem; color: var(--farbe-text-hell);
border-top: 1px solid var(--farbe-rand); padding-top: 1.2rem;
}
.pw-hub-fuss nav { display: flex; gap: 1.1rem; }
.pw-hub-fuss a { color: inherit; text-decoration: none; }
.pw-hub-fuss a:hover { text-decoration: underline; }
/* Zahler-Portal (/live/buchung?token=): Buchungsübersicht als Karten */
.pw-bp-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 760px) { .pw-bp-raster { grid-template-columns: 1fr; } }
.pw-bp-karte {
background: var(--farbe-hintergrund); border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross); box-shadow: var(--schatten);
padding: 1.5rem 1.6rem;
}
.pw-bp-karte h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 1rem; }
.pw-bp-termin { display: flex; gap: 1rem; align-items: center; margin-bottom: 0.9rem; }
.pw-bp-zeile { display: flex; gap: 0.8rem; align-items: center; padding: 0.6rem 0; }
.pw-bp-zeile + .pw-bp-zeile { border-top: 1px solid var(--farbe-rand); }
.pw-bp-zeile-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.pw-bp-zeile-text strong { font-size: 0.96rem; }
.pw-bp-zeile-text > span { font-size: 0.85rem; color: var(--farbe-text-hell); }
.pw-bp-link { font-size: 0.85rem; font-weight: 600; color: var(--farbe-gruen-dunkel); text-decoration: none; white-space: nowrap; }
.pw-bp-link:hover { text-decoration: underline; }
/* Rechte Spalte je Teilnehmer: Teilnahme- + Aufzeichnungs-Link untereinander */
.pw-bp-zeile-links { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex-shrink: 0; }
@media (max-width: 560px) {
.pw-bp-zeile { flex-wrap: wrap; }
.pw-bp-zeile-links { width: 100%; align-items: flex-start; padding-left: 2.3rem; }
}
.pw-bp-fakten { display: flex; flex-direction: column; margin-bottom: 1rem; }
.pw-bp-fakt { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.5rem 0; font-size: 0.92rem; }
.pw-bp-fakt + .pw-bp-fakt { border-top: 1px solid var(--farbe-rand); }
.pw-bp-fakt > span { color: var(--farbe-text-hell); }
.pw-bp-hinweis { margin: 0.7rem 0 0; font-size: 0.86rem; color: var(--farbe-text-hell); line-height: 1.6; }
.pw-bp-hinweis a { color: var(--farbe-gruen-dunkel); font-weight: 600; text-decoration: none; }
.pw-bp-hinweis a:hover { text-decoration: underline; }
/* Danke-Banner nach erfolgreichem Kauf (?kauf=erfolgreich) */
.pw-danke {
display: flex; align-items: flex-start; gap: 1rem;
background: var(--farbe-gruen-zart); border: 1px solid var(--farbe-erfolg-rand);
border-radius: var(--radius-gross); padding: 1.3rem 1.5rem; color: var(--farbe-gruen-tinte);
}
.pw-danke-haken {
flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
background: var(--farbe-gruen); color: #fff; font-size: 1.3rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.pw-danke strong { display: block; margin-bottom: 0.2rem; }
.pw-danke p { margin: 0; line-height: 1.6; font-size: 0.95rem; }
/* Download-Zeile (Technik-Seite / Landing): PDF + Teilen nebeneinander */
.pw-download-zeile { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.3rem; }
/* Admin: quadratische Titelbild-Vorschau */
.pw-admin-bild-quadrat { width: 150px; height: 150px; border-radius: 10px; overflow: hidden; border: 1px solid var(--farbe-rand); margin-bottom: 0.6rem; }
.pw-admin-bild-quadrat img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pw-kicker {
display: inline-flex; align-items: center; font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.11em; color: var(--farbe-gruen-tinte);
background: var(--farbe-gruen-zart); border: 1px solid var(--farbe-erfolg-rand);
border-radius: 999px; padding: 0.32rem 0.85rem; margin-bottom: 1rem;
}
.pw-titel { font-size: clamp(1.75rem, 4.2vw, 2.6rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 0.8rem; }
.pw-untertitel { font-size: clamp(1.02rem, 2vw, 1.2rem); color: var(--farbe-text-hell); line-height: 1.5; margin: 0 0 1.3rem; max-width: 46ch; }
.pw-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.6rem; }
.pw-meta-chip {
display: inline-flex; align-items: center; gap: 0.45rem;
background: rgba(255,255,255,0.7); border: 1px solid var(--farbe-rand);
border-radius: 999px; padding: 0.42rem 0.95rem; font-size: 0.85rem; font-weight: 600; color: var(--farbe-text);
}
.pw-meta-chip svg { width: 15px; height: 15px; color: var(--farbe-gruen); }
/* ---------- Trust-Band (dezente, randlose Leiste unter dem Hero) ---------- */
.pw-trust-band {
display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem 2.4rem;
padding: 0.4rem 0.5rem; margin-top: -0.4rem;
}
.pw-trust-item { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; font-weight: 600; color: var(--farbe-text-hell); }
.pw-trust-icon { display: inline-flex; flex-shrink: 0; color: var(--farbe-gruen); }
.pw-trust-icon svg { width: 18px; height: 18px; }
.pw-termin-karte-rechts { display: flex; align-items: center; gap: 0.9rem; flex-shrink: 0; }
/* FAQ-Accordion (weiche Auf-/Zu-Animation via grid-template-rows 0fr→1fr) */
.pw-faq { display: flex; flex-direction: column; }
/* Randlose Zeilen mit feiner Trennlinie — passt zum durchgehenden Panel. */
.pw-faq-item { border-top: 1px solid var(--farbe-rand); overflow: hidden; }
.pw-faq-item:first-child { border-top: 0; }
.pw-faq-frage {
width: 100%; cursor: pointer; padding: 1rem 0; font: inherit; font-weight: 600;
text-align: left; background: none; border: 0; color: var(--farbe-text);
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.pw-faq-item.offen .pw-faq-frage { color: var(--farbe-gruen-tinte); }
.pw-faq-icon { position: relative; flex-shrink: 0; width: 16px; height: 16px; }
.pw-faq-icon::before, .pw-faq-icon::after {
content: ''; position: absolute; background: var(--farbe-gruen);
left: 50%; top: 50%; transition: transform 0.25s ease;
}
.pw-faq-icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.pw-faq-icon::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.pw-faq-item.offen .pw-faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.pw-faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s ease; }
.pw-faq-item.offen .pw-faq-panel { grid-template-rows: 1fr; }
.pw-faq-panel-inner { overflow: hidden; }
.pw-faq-antwort { padding: 0 0 1.1rem; color: var(--farbe-text-hell); line-height: 1.65; max-width: 68ch; }
/* ---------- Buchen-Seite: lebende Bausteine (der frühere eingebettete
Landing-Checkout ist entfernt — /buchen läuft im .checkout-*-Layout) ---------- */
#pw-firma-felder { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.7rem; }
.pw-zahlarten { margin: 0; }
/* Vollbreiter Button: übergroßes Seiten-Padding von .btn-gross zurücknehmen,
sonst wirkt der Text gequetscht/unruhig. */
.pw-kaufen { display: block; width: 100%; margin-top: 0.2rem; padding: 1rem 1.2rem; font-size: 1.05rem; line-height: 1.25; }
.pw-kaufen:disabled { opacity: 0.65; cursor: wait; transform: none; }
.pw-form-laedt { opacity: 0.85; }
.pw-fehler {
background: var(--farbe-fehler-zart); border: 1px solid var(--farbe-fehler-rand);
border-radius: var(--radius); padding: 0.85rem 1.1rem; color: var(--farbe-fehler);
font-size: 0.9rem; margin: 1rem 0 0;
}
/* Aufzeichnungs-Seite */
.pw-video {
position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
border-radius: var(--radius-gross); background: #0b1512; box-shadow: var(--schatten);
}
.pw-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pw-hinweis-karte {
background: var(--farbe-hintergrund); border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross); box-shadow: var(--schatten);
padding: 2.4rem 2rem; text-align: center; line-height: 1.65;
}
.pw-hinweis-karte h1 { font-size: 1.4rem; margin: 0 0 0.8rem; }
.pw-hinweis-karte p { color: var(--farbe-text-hell); margin: 0 0 1.4rem; }
/* Rundes Icon über der Überschrift. Bewusst ein SVG statt eines Textzeichens
wie ✉ — Symbolglyphen bringen eigene Seitenränder und Grundlinien mit und
sitzen dadurch selbst in einem zentrierten Kreis sichtbar schief. */
.pw-hinweis-icon {
width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 1.1rem;
background: var(--farbe-gruen-zart); border: 1px solid var(--farbe-erfolg-rand);
color: var(--farbe-gruen); display: flex; align-items: center; justify-content: center;
}
.pw-hinweis-icon svg { width: 25px; height: 25px; display: block; }
/* Downloads unter der Aufzeichnung: gleiche Zeilen-Anatomie wie der
Mitglieder-Workshop-Player (.download-zeile), als eigene Karte */
.pw-downloads {
background: var(--farbe-hintergrund); border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross); box-shadow: var(--schatten);
padding: 1.4rem 1.6rem; margin-top: 1.6rem;
}
.pw-downloads-kopf {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem;
}
.pw-downloads-kopf h2 { font-size: 1.1rem; margin: 0; }
/* ---------- Live-Workshops: Termine + Teilnehmer (07/2026) ---------- */
/* Freie-Plätze-Chip (kompakt, macht Zeilen nicht höher) */
.pw-frei {
display: inline-flex; align-items: center; gap: 0.32rem;
font-size: 0.74rem; font-weight: 700; padding: 0.2rem 0.6rem;
border-radius: 999px; white-space: nowrap; line-height: 1.4;
}
.pw-frei::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pw-frei-ok { background: var(--farbe-erfolg-zart); color: var(--farbe-gruen-dunkel); }
.pw-frei-knapp { background: var(--farbe-warnung-zart); color: var(--farbe-warnung); }
.pw-frei-voll { background: var(--farbe-fehler-zart); color: var(--farbe-fehler); }
/* Teilnehmer auf der Buchen-Seite: Nummern-Kreis + Entfernen-Knopf
(auch das Zahler-Portal nutzt den Nummern-Kreis) */
.pw-tn-nr {
flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
background: var(--farbe-gruen-zart); color: var(--farbe-gruen-dunkel);
font-size: 0.82rem; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
}
.pw-tn-weg {
flex-shrink: 0; width: 30px; height: 30px; border: 1px solid var(--farbe-rand);
border-radius: 8px; background: var(--farbe-hintergrund); color: var(--farbe-text-hell);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.pw-tn-weg:hover { color: var(--farbe-fehler); border-color: var(--farbe-fehler-rand); background: var(--farbe-fehler-zart); }
/* Buchen-Seite: läuft im Pro-Checkout-Layout (.checkout-*) auf WEISSEM
Hintergrund — exakt wie der normale Checkout. Die grüne getönte Karte
ist NUR die Bestellübersicht (.bestellung). */
.pw-buchen-body { background: var(--farbe-hintergrund); min-height: 100vh; }
.checkout-main .pw-zurueck {
display: inline-block; font-size: 0.9rem; font-weight: 600;
color: var(--farbe-text-hell); text-decoration: none; margin: 0 0 1.1rem;
}
.checkout-main .pw-zurueck:hover { color: var(--farbe-gruen-dunkel); }
.bestellung-thumb-quadrat { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
/* Teilnehmer als kompakte Karten: Kopfzeile (Nummer + Label + Entfernen),
darunter Name/E-Mail zweispaltig — aufgeräumt statt loser Inputs. */
.pw-tn-zeile {
display: block; border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross);
padding: 0.85rem 1rem 1rem; margin-bottom: 0.7rem; background: var(--farbe-getoent);
}
.pw-tn-kopf { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.65rem; }
.pw-tn-label { font-size: 0.86rem; font-weight: 700; color: var(--farbe-text); flex: 1; }
.pw-tn-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
@media (max-width: 560px) { .pw-tn-felder { grid-template-columns: 1fr; } }
.pw-tn-zeile input {
width: 100%; padding: 0.62rem 0.8rem;
border: 1px solid var(--farbe-rand); border-radius: var(--radius);
background: var(--farbe-hintergrund);
font-size: 0.95rem; font-family: inherit;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pw-tn-zeile input:focus { outline: none; border-color: var(--farbe-gruen); box-shadow: var(--ring); }
/* Info-Icon vor dem Rechnungs-Hinweis */
.pw-info-hinweis { display: inline-flex; align-items: flex-start; gap: 0.45rem; }
.pw-info-hinweis svg { flex-shrink: 0; margin-top: 2px; color: var(--farbe-gruen); }
/* Kopfbereiche (Termine/Technik/Aufzeichnung): Untertitel wirklich mittig */
.pw-termin-karte {
position: relative;
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: 1rem 1.2rem; border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross); background: var(--farbe-hintergrund); text-decoration: none;
color: var(--farbe-text); box-shadow: var(--schatten);
transition: transform 0.15s ease, border-color 0.15s ease;
}
.pw-termin-karte:hover { transform: translateY(-1px); border-color: var(--farbe-gruen); }
/* „Stretched link": der Buchen-Button macht die ganze Karte klickbar; der
Workshop-Titel (globale Übersicht) liegt darüber und bleibt separat klickbar */
.pw-karte-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pw-termin-karte .pw-termin-titel-link { position: relative; z-index: 1; }
.pw-termin-karte-datum { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pw-termin-karte-datum > strong { font-size: 0.98rem; }
.pw-termin-karte-datum > span { font-size: 0.84rem; color: var(--farbe-text-hell); }
.pw-termin-karte-mehr { align-items: flex-start; }
.pw-termin-karte-mehr .pw-termin-karte-rechts { align-self: center; }
/* Session-Liste (mehrere Termin-Tage): je Session eine Zeile,
Datum links, Uhrzeit rechts — auf /buchen und den Landing-Karten */
.pw-session-liste { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.pw-session-liste-mehr { gap: 0.4rem; margin-top: 0.5rem; }
.pw-session-zeile {
display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
font-size: 0.9rem; line-height: 1.35;
}
.pw-session-liste-mehr .pw-session-zeile {
padding-left: 0.7rem; border-left: 2px solid var(--farbe-gruen);
}
.pw-session-nr {
font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
color: var(--farbe-gruen); flex: 0 0 auto;
}
.pw-session-datum { font-weight: 600; color: var(--farbe-text); }
.pw-session-zeit { color: var(--farbe-text-hell); }
/* Hero der globalen Termin-Übersicht (/termine): gleiche Anatomie wie der
Landing-Hero, aber kompakter — darunter das Trust-Band */
.pw-termine-hero { padding: 4.2rem 0 3.4rem; }
.pw-termine-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -0.02em; margin-bottom: 0.9rem; }
.pw-termine-hero .hero-text { max-width: 620px; margin: 0 auto 1.7rem; }
.pw-termine-hero .pw-trust-band { margin-top: 0; }
/* Termin-Übersichten: Monatsgruppen + kanonische Termin-Zeilen */
.pw-monat { margin-bottom: 2rem; }
.pw-monat-titel {
display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
font-size: 0.95rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
margin: 0 0 0.9rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--farbe-rand);
}
.pw-monat-anzahl {
font-size: 0.78rem; font-weight: 600; color: var(--farbe-text-hell);
text-transform: none; letter-spacing: 0.02em;
}
.pw-monat + .pw-monat { margin-top: 2.2rem; }
/* Termin-Karten in den Übersichten: etwas Abstand zwischen den Karten */
.pw-monat .pw-termin-karte + .pw-termin-karte { margin-top: 0.7rem; }
/* Ausgebuchter Termin (auf der kanonischen Karte) */
.pw-termin-karte.pw-termin-voll { opacity: 0.75; }
.pw-termin-karte.pw-termin-voll:hover { border-color: var(--farbe-rand); transform: none; }
/* Format-Hinweis „Live-Online-Workshop" (Karten-Kopf ohne Workshop-Titel) */
.pw-termin-ort { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.98rem; }
.pw-termin-ort svg { width: 15px; height: 15px; color: var(--farbe-gruen); flex-shrink: 0; }
/* Globale Übersicht: Workshop-Titel verlinkt auf die Detailseite */
.pw-termin-titel-link { color: inherit; text-decoration: none; font-weight: 700; font-size: 0.98rem; }
.pw-termin-titel-link:hover { color: var(--farbe-gruen-dunkel); text-decoration: underline; }
/* Unterzeile als Icon-Paare (Uhrzeit, Format) — /live-Katalog „Nächster Termin" */
.pw-termin-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.2rem; }
.pw-termin-meta-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.84rem; color: var(--farbe-text-hell); }
.pw-termin-meta-item svg { width: 14px; height: 14px; color: var(--farbe-gruen); flex-shrink: 0; }
.pw-termin-preis { display: flex; flex-direction: column; align-items: flex-end; font-weight: 800; font-size: 1.05rem; line-height: 1.15; white-space: nowrap; }
.pw-termin-preis small { font-weight: 500; font-size: 0.7rem; color: var(--farbe-text-hell); }
.pw-technik-link a { color: var(--farbe-gruen-dunkel); font-weight: 600; text-decoration: none; }
.pw-technik-link a:hover { text-decoration: underline; }
/* ---------- /live Landing: volle Farb-Bänder im Stil der Haupt-Landing ----------
Nutzt die GLOBALEN Landing-Bausteine (.hero, .hero-blob, .abschnitt,
.abschnitt-getoent/-dunkel, .cta-band, .container) — hier nur die
/live-spezifischen Ergänzungen. */
.pw-lp-body { background: var(--farbe-hintergrund); min-height: 100vh; }
.pw-lp .abschnitt { padding: 4.5rem 0; }
.pw-lp .abschnitt-dunkel .abschnitt-untertitel { color: #9ec9b8; }
/* Sektion-Köpfe wie die Haupt-Landing: Kicker über der Überschrift, danach
direkt der Inhalt (kein Untertitel mehr) */
.pw-lp .abschnitt .kicker { margin: 0 0 0.6rem; }
.pw-lp .abschnitt h2 { margin-bottom: 2.2rem; }
.pw-lp-aktionen { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-bottom: 0.4rem; }
/* Angebot-Kicker als Pill mit Live-Punkt (vom Hero hierher gewandert) */
.pw-lp-kicker-zeile { display: flex; justify-content: center; margin-bottom: 0.8rem; }
.pw-lp-kicker-zeile .pw-kicker { margin-bottom: 0; }
.pw-lp .pw-hub-fuss { padding: 1.6rem 0 2.2rem; }
.pw-faq-mittig { max-width: 760px; margin: 0 auto; }
.pw-cta-kontakt { margin: 1.5rem 0 0; font-size: 0.88rem; color: #9ec9b8; }
.pw-cta-kontakt a { color: #fff; }
/* Abstand zum Button darüber erzwingen: „.cta-band p" (Spezifität 0,1,1)
würde sonst margin-top:0 setzen → klebt am Button. */
.cta-band .pw-cta-kontakt { margin: 1.5rem auto 0; }
/* ============================================================
/live/:slug/v2 — zweite Landing-Version (Kursanbieter-Layout)
Farbiger Hero · sticky In-Page-Nav · zweispaltig mit sticky
Buchungs-Box · prominente aufklappbare Terminliste.
============================================================ */
.pwv2 { background: var(--farbe-hintergrund); }
/* Hero */
.pwv2-hero {
position: relative; overflow: hidden;
color: #fff;
background: linear-gradient(155deg, #10402f 0%, var(--farbe-gruen-tinte) 58%, #0a2e22 100%);
padding: 2.4rem 0 3rem;
}
/* Dezentes, gepunktetes Muster (wie die Homepage-Textur, ohne Icons) */
.pwv2-hero-punkte {
position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(255,255,255,0.07) 1.4px, transparent 1.6px);
background-size: 24px 24px;
-webkit-mask-image: radial-gradient(120% 100% at 80% 0%, #000 35%, transparent 85%);
mask-image: radial-gradient(120% 100% at 80% 0%, #000 35%, transparent 85%);
}
/* Weich schwebende Farbflecken (floatend, wie auf der HP) */
.pwv2-hero-blob { position: absolute; border-radius: 50%; filter: blur(46px); pointer-events: none; opacity: 0.55; }
.pwv2-hero-blob-1 { width: 360px; height: 360px; top: -140px; right: -60px; background: radial-gradient(circle, rgba(34,197,143,0.8), transparent 70%); animation: pwv2float 14s ease-in-out infinite; }
.pwv2-hero-blob-2 { width: 300px; height: 300px; bottom: -170px; left: 6%; background: radial-gradient(circle, rgba(14,123,90,0.75), transparent 70%); animation: pwv2float 18s ease-in-out infinite reverse; }
@keyframes pwv2float { 0%,100% { transform: translate(0,0); } 50% { transform: translate(24px,-20px); } }
@media (prefers-reduced-motion: reduce) { .pwv2-hero-blob { animation: none; } }
.pwv2-hero-inner { position: relative; z-index: 1; }
.pwv2-brot { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.82rem; color: rgba(255,255,255,0.7); margin-bottom: 1.4rem; }
.pwv2-brot a { color: rgba(255,255,255,0.9); text-decoration: none; }
.pwv2-brot a:hover { text-decoration: underline; }
.pwv2-hero-text { max-width: 85ch; }
.pwv2-hero-text h1 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.06; margin: 0 0 0.6rem; }
.pwv2-hero-text > p { color: rgba(255,255,255,0.85); font-size: 1.1rem; max-width: 52ch; margin: 0 0 1.1rem; line-height: 1.55; }
.pwv2-hero-rating { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: rgba(255,255,255,0.85); }
.pwv2-hero-rating .sterne { color: #ffcf5c; letter-spacing: 1px; }
/* Meta-Chips */
.pwv2-hero-meta { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.3rem; }
.pwv2-hero-chip { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 600; padding: 0.42rem 0.85rem; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); color: #eafaf3; }
.pwv2-hero-chip svg { width: 15px; height: 15px; color: #8fd0b6; flex-shrink: 0; }
/* „Live-Online"-Chip mit pulsierendem Punkt */
.pwv2-hero-chip-live { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); }
.pwv2-chip-puls { width: 8px; height: 8px; border-radius: 50%; background: #ff5a45; box-shadow: 0 0 0 0 rgba(255,90,69,0.6); animation: pwv2puls 1.8s infinite; }
@keyframes pwv2puls { 0% { box-shadow: 0 0 0 0 rgba(255,90,69,0.55); } 70% { box-shadow: 0 0 0 7px rgba(255,90,69,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,69,0); } }
@media (prefers-reduced-motion: reduce) { .pwv2-chip-puls { animation: none; } }
/* Sticky In-Page-Nav */
/* Klebt UNTER dem 71px hohen Haupt-Header (sonst versteckt sich die Subnav
dahinter). Anker-Ziele bekommen entsprechend scroll-margin-top: 140px. */
.pwv2-subnav { position: sticky; top: 70px; z-index: 40; background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--farbe-rand); }
.pwv2-subnav-inner { display: flex; align-items: center; gap: 1.5rem; height: 56px; overflow-x: auto; scrollbar-width: none; }
.pwv2-subnav-inner::-webkit-scrollbar { display: none; }
.pwv2-subnav a { color: var(--farbe-text-hell); text-decoration: none; font-weight: 600; font-size: 0.92rem; white-space: nowrap; padding: 0.3rem 0; border-bottom: 2px solid transparent; }
.pwv2-subnav a.aktiv { color: var(--farbe-gruen); border-bottom-color: var(--farbe-gruen); }
.pwv2-subnav-cta { margin-left: auto; padding: 0.5rem 1.2rem !important; font-size: 0.9rem; border-bottom: 0 !important; color: #fff !important; }
/* Zweispaltiger Hauptbereich */
.pwv2-haupt { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2.8rem; padding: 3.2rem 1.2rem; align-items: start; }
.pwv2-block { margin-bottom: 2.4rem; scroll-margin-top: 140px; }
.pwv2-block h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 1rem; }
.pwv2-rtf { color: var(--farbe-text); line-height: 1.7; }
.pwv2-software { margin: -0.6rem 0 2.2rem; }
.pwv2-lohnt { background: var(--farbe-getoent); border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross); padding: 1.2rem 1.4rem; margin-bottom: 2.2rem; }
.pwv2-lohnt-kopf { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.5rem; }
.pwv2-lohnt-icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--farbe-gruen); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.pwv2-lohnt-icon svg { width: 12px; height: 12px; }
.pwv2-lohnt-kopf strong { font-size: 1.05rem; }
/* Lange Inhalte einklappen („Mehr anzeigen") */
.pwv2-collapse.pwv2-collapse-aktiv { max-height: 460px; overflow: hidden; position: relative; }
.pwv2-collapse.pwv2-collapse-aktiv::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to bottom, transparent, var(--farbe-hintergrund)); pointer-events: none; }
.pwv2-collapse.pwv2-collapse-offen { max-height: none; }
.pwv2-collapse.pwv2-collapse-offen::after { display: none; }
.pwv2-mehr { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.9rem; background: none; border: 0; padding: 0.2rem 0; color: var(--farbe-gruen-dunkel); font: inherit; font-weight: 700; cursor: pointer; }
.pwv2-mehr::after { content: "▾"; font-size: 0.9em; }
.pwv2-collapse-offen + .pwv2-mehr::after { content: "▴"; }
.pwv2-mehr:hover { text-decoration: underline; }
/* Sticky Buchungs-/Preis-Box (Abstand zur sticky Sub-Nav, damit sie beim
Scrollen nicht aneinanderkleben) */
.pwv2-seite { position: sticky; top: 140px; }
.pwv2-buchbox { border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross); background: #fff; padding: 1.4rem; box-shadow: 0 14px 34px -22px rgba(9,60,44,0.4); }
.pwv2-buchbox-preis { font-size: 1.7rem; font-weight: 900; letter-spacing: -0.01em; }
.pwv2-buchbox-preis small { display: block; font-size: 0.78rem; font-weight: 500; color: var(--farbe-text-hell); margin-top: 0.15rem; }
.pwv2-fakten { list-style: none; margin: 1.1rem 0; padding: 0; }
.pwv2-fakten li { display: grid; grid-template-columns: 20px 1fr auto; gap: 0.6rem; align-items: center; padding: 0.6rem 0; border-top: 1px solid var(--farbe-rand); font-size: 0.9rem; }
.pwv2-fakten li span { color: var(--farbe-text-hell); }
.pwv2-fakten li b { font-weight: 700; }
.pwv2-fakten svg { width: 18px; height: 18px; color: var(--farbe-gruen); }
.pwv2-fakten .pwv2-fakt-wg svg { color: #2f9bd6; }
.pwv2-buchbox-cta { width: 100%; text-align: center; }
/* Premium-Bänder: Kicker-Eyebrow (wie die Marketing-Sektionen) + einheitlicher
Titel-Rhythmus, damit die /live-Bänder nicht „appig" wirken. */
.pwv2-band-kicker { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--farbe-gruen); margin: 0 0 0.55rem; }
/* „Jetzt buchen" — Terminliste als Akkordeon */
.pwv2-buchen { background: var(--farbe-getoent); padding: 4.5rem 0; scroll-margin-top: 140px; }
.pwv2-buchen-titel { font-size: clamp(1.55rem, 2.3vw, 1.95rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 1.6rem; }
.pwv2-termine { display: flex; flex-direction: column; gap: 0.7rem; }
.pwv2-termin { border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross); background: #fff; overflow: hidden; }
.pwv2-termin.offen { border-color: var(--farbe-gruen); box-shadow: 0 12px 30px -20px rgba(14,123,90,0.5); }
/* Kopfzeile ohne Preis (der steht erst im aufgeklappten Detail): Datum links,
Chips + Status-Chip rechtsbündig vor dem Pfeil. */
.pwv2-termin-kopf { width: 100%; display: grid; grid-template-columns: 1fr auto auto auto 22px; gap: 1rem; align-items: center; padding: 1.05rem 1.3rem; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.pwv2-td-datum { font-weight: 700; }
/* /termine: Workshop-Titel oben, Datum als Unterzeile (globale Übersicht) */
.pwv2-td-haupt { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pwv2-td-titel { font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; color: var(--farbe-text); text-decoration: none; position: relative; z-index: 1; }
.pwv2-td-titel:hover { color: var(--farbe-gruen-dunkel); }
.pwv2-td-datum-sub { font-weight: 600; font-size: 0.9rem; color: var(--farbe-text-hell); }
.pwv2-td-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--farbe-text-hell); white-space: nowrap; }
.pwv2-td-chip svg { width: 15px; height: 15px; color: var(--farbe-gruen); flex-shrink: 0; }
.pwv2-td-frei { justify-self: end; }
.pwv2-td-pfeil { width: 22px; height: 22px; position: relative; }
.pwv2-td-pfeil::before { content: ""; position: absolute; top: 6px; left: 5px; width: 9px; height: 9px; border-right: 2px solid var(--farbe-text-hell); border-bottom: 2px solid var(--farbe-text-hell); transform: rotate(45deg); transition: transform 0.2s ease; }
.pwv2-termin.offen .pwv2-td-pfeil::before { transform: rotate(-135deg); top: 9px; }
.pwv2-termin-detail { display: none; padding: 0 1.3rem 1.3rem; }
.pwv2-termin.offen .pwv2-termin-detail { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.6rem; flex-wrap: wrap; border-top: 1px solid var(--farbe-rand); padding-top: 1.1rem; }
.pwv2-termin-sessions-titel { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--farbe-text-hell); margin-bottom: 0.4rem; }
.pwv2-termin-aktion { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-end; }
.pwv2-termin-preis-gross { font-weight: 900; font-size: 1.2rem; text-align: right; line-height: 1.05; }
.pwv2-termin-preis-gross small { display: block; font-size: 0.72rem; font-weight: 500; color: var(--farbe-text-hell); margin-top: 0.22rem; line-height: 1.05; }
.pwv2-keine-termine { border: 1px dashed var(--farbe-rand); border-radius: var(--radius-gross); padding: 1.6rem; color: var(--farbe-text-hell); background: #fff; }
/* FAQ + Kontaktformular nebeneinander (je 50 %) */
.pwv2-fragen { padding: 4.5rem 0; scroll-margin-top: 140px; }
.pwv2-fk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.pwv2-fk-grid.pwv2-fk-solo { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; text-align: center; }
.pwv2-fk-grid.pwv2-fk-solo .pwv2-formular-karte { text-align: left; }
.pwv2-fk-faq h2, .pwv2-fk-kontakt h2 { font-size: clamp(1.5rem, 2.2vw, 1.8rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 1.4rem; }
.pwv2-formular-karte { border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross); background: #fff; padding: 1.6rem; box-shadow: var(--schatten); }
/* Datenschutz-Checkbox (nicht vorausgewählt) */
.pwv2-ds-check { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.84rem; color: var(--farbe-text-hell); line-height: 1.5; margin: 0.2rem 0 1rem; cursor: pointer; }
.pwv2-ds-check input { margin: 0.15rem 0 0; flex: none; width: 16px; height: 16px; accent-color: var(--farbe-gruen); }
.pwv2-ds-check a { color: inherit; text-decoration: underline; }
/* WG-Chip im Hero (blaues Schild, heller für Kontrast auf dunklem Hero) */
.pwv2-hero-chip-wg svg { color: #8fd0e8; }
/* Footer im Container (sonst randlos „displaced") */
.pwv2-fuss { padding-top: 2.4rem; padding-bottom: 2.6rem; }
/* Bewertungen */
.pwv2-reviews { padding: 4.5rem 0; background: var(--farbe-getoent); }
.pwv2-reviews h2 { font-size: clamp(1.55rem, 2.3vw, 1.95rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 1.6rem; }
/* ---------- Termingarantie: Schild-Badges + Erklärseite ---------- */
/* position:relative + z-index hebt das Schild über einen „stretched link"
(Katalog-Zeile, Termin-Karte) — sonst fängt der Karten-Link den Klick ab
und das Schild käme nie auf seine Erklärseite. */
.pw-garantie { position: relative; z-index: 1; display: inline-flex; align-items: center; vertical-align: middle; text-decoration: none; line-height: 0; }
/* Schilder stehen HINTER dem Datum: erster Abstand zum Datum 0.5rem, die zwei
Schilder untereinander enger (0.25rem). */
.pwv2-td-datum .pw-garantie { margin-left: 0.5rem; }
.pwv2-td-datum .pw-garantie + .pw-garantie { margin-left: 0.25rem; }
.pw-garantie svg { width: 20px; height: 20px; display: block; }
.pw-garantie-gruen { color: #1a8f5f; }
.pw-garantie-orange { color: #e08600; }
/* Wissensgarantie-Schild: hellblau (steht neben der Termingarantie) */
.pw-wissensgarantie { color: #2f9bd6; }
/* Wissensgarantie-Konnex-Band auf /live (Brücke zur Plattform) — seit
07/2026 EIN Abschnitt mit den Vorteilen: Wissensgarantie-Text links,
die vier Vorteile als 2x2-Raster rechts */
.pw-wg-duo { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3.2rem; align-items: center; }
.pw-wg-duo .pw-wg-inner { text-align: left; }
.pw-wg-duo .pw-wg-inner h2 { text-align: left; margin-bottom: 1rem; }
.pw-wg-duo .pw-wg-inner .abschnitt-untertitel { text-align: left; max-width: none; margin: 0 0 1.6rem; }
.pw-wg-duo .pw-lp-features { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
.pw-wg-duo { grid-template-columns: 1fr; gap: 2.4rem; }
}
@media (max-width: 480px) {
.pw-wg-duo .pw-lp-features { grid-template-columns: 1fr; }
}
.pw-wg-inner { text-align: center; }
/* Dezenter Wissensgarantie-Hinweis (Workshop-Landing + /termine), OHNE
Karten-Optik: Hairline-Trenner oben, Absatz beginnt ganz links, das Schild
sitzt INLINE direkt vor dem Wort „Wissensgarantie", darunter der Link im
etablierten Pfeil-Stil (.pw-technik-link), wie „Was du für die Teilnahme
brauchst →" im Vorkenntnisse-Block. */
.pw-wg-dezent-sektion { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--farbe-rand); }
.pw-wg-dezent-schild { display: inline-flex; color: #2f9bd6; line-height: 0; vertical-align: -0.22em; margin-right: 0.45rem; }
.pw-wg-dezent-schild svg { width: 19px; height: 19px; display: block; }
.pw-wg-dezent p { margin: 0; color: var(--farbe-text-hell); line-height: 1.55; font-size: 0.94rem; }
.pw-wg-dezent p strong { color: var(--farbe-text); }
.pw-wg-dezent .pw-technik-link { margin: 0.5rem 0 0; }
.pwv2-inhalt .pw-download-zeile { margin-top: 2rem; }
/* Dezenter Trainer-Hinweis in der linken Spalte der Workshop-Landing:
Byline-Stil ohne Karte — Hairline-Trenner oben, rundes Foto, daneben
Kicker + Name + kurzer Text. Bewusst ohne Kanal-Zahlen und ohne Fläche. */
.pw-trainer-kompakt {
display: flex; align-items: center; gap: 1.4rem;
margin-top: 2.6rem; padding-top: 2rem;
border-top: 1px solid var(--farbe-rand);
}
.pw-trainer-kicker {
display: block; font-size: 0.72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--farbe-gruen); margin-bottom: 0.3rem;
}
.pw-trainer-kompakt-foto { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pw-trainer-kompakt-platzhalter { display: grid; place-items: center; background: var(--farbe-getoent); color: var(--farbe-text-hell); }
.pw-trainer-kompakt-platzhalter svg { width: 28px; height: 28px; }
.pw-trainer-kompakt strong { display: block; font-size: 1.05rem; margin-bottom: 0.3rem; }
.pw-trainer-kompakt p { margin: 0; color: var(--farbe-text-hell); font-size: 0.94rem; line-height: 1.55; }
/* Dezenter Pro-Upsell in den Einstellungen (Wissensgarantie-Nutzer) */
.wg-upsell {
margin: 1.1rem 0 0;
display: flex;
align-items: center;
gap: 1.15rem;
flex-wrap: wrap;
padding: 1.25rem 1.4rem;
border-radius: 16px;
border: 1px solid rgba(47, 155, 214, 0.22);
background: linear-gradient(135deg, rgba(47, 155, 214, 0.09), rgba(47, 155, 214, 0.02));
}
.wg-upsell-icon {
flex-shrink: 0;
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 12px;
background: #fff;
border: 1px solid rgba(47, 155, 214, 0.22);
color: #2f9bd6;
}
.wg-upsell-icon svg { width: 22px; height: 22px; }
.wg-upsell-text { flex: 1; min-width: 14rem; }
.wg-upsell-text > strong { display: block; font-size: 1.05rem; font-weight: 600; color: var(--farbe-text); }
.wg-upsell-text p { margin: 0.3rem 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--farbe-text-hell); }
.wg-upsell-aktion {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.wg-upsell-badge {
font-size: 0.74rem;
font-weight: 600;
color: #2789bd;
letter-spacing: 0.01em;
}
.wg-upsell-btn {
display: inline-block;
padding: 0.7rem 1.5rem;
border-radius: 10px;
background: #2f9bd6;
color: #fff;
font-weight: 600;
font-size: 0.92rem;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s ease, transform 0.15s ease;
}
.wg-upsell-btn:hover { background: #2789bd; transform: translateY(-1px); }
/* Erklärseiten /termingarantie + /wissensgarantie (Landing-Stil, .gar-*) */
/* Zwei Schild-Karten (grün/orange) nebeneinander */
.gar-schilder { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: 820px; margin: 0 auto; }
.gar-schild-karte {
background: var(--farbe-hintergrund); border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross); box-shadow: var(--schatten);
padding: 1.9rem 1.7rem; text-align: center;
}
.gar-schild-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 60px; height: 60px; border-radius: 16px; margin-bottom: 1rem;
}
.gar-schild-icon svg { width: 30px; height: 30px; }
.gar-icon-gruen { background: rgba(26, 143, 95, 0.12); color: #1a8f5f; }
.gar-icon-orange { background: rgba(224, 134, 0, 0.12); color: #e08600; }
.gar-schild-karte h3 { font-size: 1.18rem; font-weight: 800; margin: 0 0 0.55rem; }
.gar-schild-karte p { margin: 0; color: var(--farbe-text-hell); line-height: 1.6; }
/* Vorteils-/Inhalts-Karten: drei nebeneinander (nutzt .pw-lp-feature-Look) */
.gar-drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.gar-icon-blau-tile { background: rgba(47, 155, 214, 0.12) !important; color: #2f9bd6 !important; }
/* Intro-Zweispalter (/wissensgarantie): Text + Häkchen-Liste links,
rechts die nachgebaute Termin-Zeile mit dem hellblauen Schild */
.wg-duo { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3.2rem; align-items: center; max-width: 1000px; margin: 0 auto; }
.wg-duo-text h2 { text-align: left; margin-bottom: 0.9rem; }
.wg-duo-text > p { color: var(--farbe-text-hell); line-height: 1.7; font-size: 1.05rem; margin: 0 0 1.5rem; }
.wg-leistungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.wg-leistungen li { display: flex; align-items: flex-start; gap: 0.7rem; }
.wg-check {
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
background: rgba(47, 155, 214, 0.12); color: #2f9bd6;
}
.wg-check svg { width: 12px; height: 12px; }
/* Termin-Zeilen-Mock: weiße Karte, Schild mit sanftem Puls-Halo */
.wg-mock-label {
margin: 0 0 0.8rem; font-size: 0.8rem; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase; color: var(--farbe-text-hell);
}
.wg-mock-karte {
display: flex; align-items: center; gap: 0.75rem;
background: var(--farbe-hintergrund); border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross); box-shadow: var(--schatten);
padding: 1.15rem 1.3rem;
}
.wg-mock-schild {
display: inline-flex; flex-shrink: 0; color: #2f9bd6; border-radius: 50%;
animation: wgPuls 2.4s ease-out infinite;
}
.wg-mock-schild svg { width: 24px; height: 24px; display: block; }
@keyframes wgPuls {
0% { box-shadow: 0 0 0 0 rgba(47, 155, 214, 0.35); }
70% { box-shadow: 0 0 0 11px rgba(47, 155, 214, 0); }
100% { box-shadow: 0 0 0 0 rgba(47, 155, 214, 0); }
}
@media (prefers-reduced-motion: reduce) { .wg-mock-schild { animation: none; } }
.wg-mock-datum { font-weight: 800; font-size: 0.98rem; white-space: nowrap; }
.wg-mock-dauer { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--farbe-text-hell); font-size: 0.88rem; white-space: nowrap; }
.wg-mock-dauer svg { width: 14px; height: 14px; }
.wg-mock-btn {
margin-left: auto; background: var(--farbe-gruen); color: #fff;
border-radius: 999px; padding: 0.42rem 1rem; font-size: 0.88rem; font-weight: 700;
}
.wg-mock-hinweis {
display: flex; align-items: center; gap: 0.45rem; margin: 0.9rem 0 0;
color: #2f9bd6; font-weight: 600; font-size: 0.92rem;
}
.wg-mock-hinweis-schild { display: inline-flex; }
.wg-mock-hinweis-schild svg { width: 16px; height: 16px; display: block; }
/* Schritte (/wissensgarantie „So kommst du rein"): EIN helles Panel mit drei
Segmenten und Hairline-Trennern (gleiche Anatomie wie das /teams-Panel) */
.wg-panel {
display: grid; grid-template-columns: repeat(3, 1fr);
background: var(--farbe-hintergrund); border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross); box-shadow: var(--schatten);
max-width: 1000px; margin: 0 auto;
}
.wg-panel-schritt { display: flex; align-items: flex-start; gap: 1rem; padding: 2rem 1.9rem; }
.wg-panel-schritt + .wg-panel-schritt { border-left: 1px solid var(--farbe-rand); }
.wg-panel-nr {
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 50%;
background: rgba(47, 155, 214, 0.12); color: #2f9bd6; font-weight: 800; font-size: 1.05rem;
}
.wg-panel-text strong { display: block; margin: 0.4rem 0 0.4rem; font-size: 1.02rem; }
.wg-panel-text p { margin: 0; color: var(--farbe-text-hell); line-height: 1.6; font-size: 0.93rem; }
@media (max-width: 820px) {
.gar-schilder, .gar-drei { grid-template-columns: 1fr; }
.gar-schilder { max-width: 460px; }
.wg-duo { grid-template-columns: 1fr; gap: 2.2rem; max-width: 560px; }
.wg-panel { grid-template-columns: 1fr; max-width: 560px; }
.wg-panel-schritt { padding: 1.6rem 1.5rem; }
.wg-panel-schritt + .wg-panel-schritt { border-left: 0; border-top: 1px solid var(--farbe-rand); }
}
@media (max-width: 480px) {
/* Schmale Screens: Termin-Zeilen-Mock darf umbrechen (Buchen-Pill rutscht
in die zweite Zeile, statt rechts abgeschnitten zu werden) */
.wg-mock-karte { flex-wrap: wrap; row-gap: 0.7rem; padding: 1rem 1.1rem; }
}
/* ---------- Schlichte Support-Seiten (/technik, /rechnungslegung) ----------
Kompakter Kopf (hubKopf) + ruhiger Lese-Artikel im schmalen Fließtext-Band. */
.support-inhalt { max-width: 720px; margin: 2.4rem auto 0; }
.support-sektion { margin-top: 2.6rem; }
.support-sektion:first-child { margin-top: 0; }
.support-inhalt h2 { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 0.9rem; }
.support-sektion > p { font-size: 1rem; line-height: 1.75; color: var(--farbe-text-hell); margin: 0 0 0.8rem; }
.support-liste, .support-schritte, .support-faelle { list-style: none; margin: 0; padding: 0; }
/* Aufzählung: dezenter Punkt, fetter Lead-in + Fließtext */
.support-liste li {
position: relative; padding: 0.8rem 0 0.8rem 1.6rem;
border-top: 1px solid var(--farbe-rand); line-height: 1.7; color: var(--farbe-text-hell);
}
.support-liste li:first-child { border-top: none; }
.support-liste li strong { color: var(--farbe-text); }
.support-liste li::before {
content: ""; position: absolute; left: 0; top: 1.15rem;
width: 8px; height: 8px; border-radius: 50%; background: var(--farbe-gruen);
}
/* Nummerierte Schritte */
.support-schritte { counter-reset: schritt; }
.support-schritte li {
counter-increment: schritt; position: relative;
padding: 0.8rem 0 0.8rem 2.6rem; border-top: 1px solid var(--farbe-rand);
line-height: 1.7; color: var(--farbe-text-hell); min-height: 1.5rem;
}
.support-schritte li:first-child { border-top: none; }
.support-schritte li strong { color: var(--farbe-text); }
.support-schritte li::before {
content: counter(schritt); position: absolute; left: 0; top: 0.8rem;
width: 26px; height: 26px; border-radius: 50%;
background: var(--farbe-gruen-dunkel); color: #fff; font-weight: 800; font-size: 0.82rem;
display: flex; align-items: center; justify-content: center;
}
/* Formel-Hervorhebung (Rechnungslegung) */
.support-formel {
display: inline-block; padding: 0.55rem 1.1rem; border-radius: 10px;
background: var(--farbe-gruen-zart); color: var(--farbe-gruen-dunkel);
font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 1rem !important;
}
/* Abrechnungsfälle als lesbare Liste (Fall + Formel-Badge + Erklärung) */
.support-faelle li { padding: 1.1rem 0; border-top: 1px solid var(--farbe-rand); }
.support-faelle li:first-child { border-top: none; }
.support-fall-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.35rem; }
.support-fall-kopf strong { font-size: 1.02rem; color: var(--farbe-text); }
.support-formel-badge {
flex-shrink: 0; padding: 0.2rem 0.6rem; border-radius: 999px;
background: var(--farbe-getoent); color: var(--farbe-gruen-dunkel);
font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}
.support-faelle li p { margin: 0; color: var(--farbe-text-hell); line-height: 1.65; font-size: 0.95rem; }
.support-aktion { margin-top: 1.8rem !important; }
@media (max-width: 560px) {
.support-fall-kopf { flex-wrap: wrap; gap: 0.4rem; }
}
@media (max-width: 900px) {
.pwv2-haupt { grid-template-columns: 1fr; gap: 1.6rem; padding: 2rem 1.2rem; }
.pwv2-seite { position: static; }
.pwv2-fk-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}
@media (max-width: 680px) {
/* Subnav-CTA mobil weg: liegt im Scroll-Container per margin-left:auto
außerhalb des Sichtfelds und ist zum „Termine"-Anker ohnehin redundant. */
.pwv2-subnav-cta { display: none; }
/* Termin-Kopf mobil: Datum links, Status-Chip rechts (wo früher der Preis
stand — der steht jetzt nur noch im aufgeklappten Detail), Pfeil außen.
Die „Tage/Live-Online"-Chips entfallen (Tageszahl steckt in der
Datumsspanne, Format ist ohnehin global live) — ruhiger Kopf. */
.pwv2-termin-kopf {
grid-template-columns: 1fr auto 22px;
grid-template-areas: "datum frei pfeil";
column-gap: 0.9rem;
align-items: center; padding: 1.05rem 1.1rem;
}
.pwv2-td-datum, .pwv2-td-haupt { grid-area: datum; }
/* Status an der Oberkante (zur ersten Titelzeile), nicht mittig gegen einen
langen Workshop-Titel schwebend (globale /termine-Übersicht). */
.pwv2-td-frei { grid-area: frei; justify-self: end; align-self: start; margin-top: 0.15rem; }
.pwv2-td-pfeil { grid-area: pfeil; align-self: start; margin-top: 0.15rem; }
.pwv2-td-chip { display: none; }
.pwv2-termin.offen .pwv2-termin-detail { flex-direction: column; align-items: stretch; }
.pwv2-termin-aktion { align-items: stretch; }
.pwv2-termin-preis-gross { text-align: left; }
}
/* Vorteile: vier kompakte Punkte (Icon + Titel + eine Zeile) */
.pw-lp-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.pw-lp-feature {
background: var(--farbe-hintergrund); border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross); box-shadow: var(--schatten);
padding: 1.3rem 1.2rem;
}
.pw-lp-feature-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 10px; margin-bottom: 0.7rem;
background: var(--farbe-gruen-zart); color: var(--farbe-gruen-dunkel);
}
.pw-lp-feature-icon svg { width: 19px; height: 19px; }
.pw-lp-feature strong { display: block; margin-bottom: 0.25rem; font-size: 0.98rem; }
.pw-lp-feature p { margin: 0; font-size: 0.87rem; color: var(--farbe-text-hell); line-height: 1.55; }
@media (max-width: 900px) { .pw-lp-features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pw-lp-features { grid-template-columns: 1fr; } }
/* ---------- Workshop-Katalog: Zeilen-Liste (/live), etc.at-Vorbild ----------
Ganze Zeile = EIN Link zum Workshop (keine Termin-/Buchen-Links). Thumbnail
(quadratisch, Live-Chip) | Titel + Kurztext | rechte Spalte: nächstes Datum
+ „+N weitere" + Garantie-Schilder, dann Dauer + Verfügbarkeit, dann Preis.
Auf Mobil stapeln sich die Spalten (rechte Spalte unter den Text). */
.pw-kk-liste { display: flex; flex-direction: column; gap: 1rem; }
.pw-kk {
position: relative; display: flex; align-items: stretch; gap: 1.3rem;
padding: 1.1rem 1.3rem;
background: var(--farbe-hintergrund); border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross); box-shadow: var(--schatten);
text-decoration: none; color: var(--farbe-text);
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.pw-kk:hover { transform: translateY(-2px); box-shadow: var(--schatten-hover); border-color: var(--farbe-gruen); }
/* Thumbnail (quadratisch) mit Live-Chip oben links */
.pw-kk-medien { position: relative; flex-shrink: 0; width: 104px; height: 104px; border-radius: 14px; overflow: hidden; background: var(--farbe-getoent); }
.pw-kk-bild { width: 100%; height: 100%; object-fit: cover; display: block; }
.pw-kk-bild-platz { display: flex; align-items: center; justify-content: center; background: var(--farbe-gruen-zart); color: var(--farbe-gruen); }
.pw-kk-bild-platz svg { width: 36px; height: 36px; }
/* „Live-Online"-Chip: inline oben rechts am Titel (nicht mehr über dem Bild) */
.pw-kk-chip {
flex: 0 0 auto; margin-top: 0.2rem;
display: inline-flex; align-items: center; gap: 0.32rem;
padding: 0.18rem 0.5rem; border-radius: 999px;
background: var(--farbe-gruen-zart); color: var(--farbe-gruen-dunkel);
font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}
.pw-kk-puls { width: 6px; height: 6px; border-radius: 50%; background: #ff5a45; box-shadow: 0 0 0 0 rgba(255,90,69,0.6); animation: pwv2puls 1.8s infinite; }
/* Mittelspalte: Titel + Kurztext */
.pw-kk-haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; }
/* Titelzeile: „Live-Online"-Chip steht DIREKT hinter dem Titel (umbricht bei
langem Titel in die nächste Zeile) — nicht am Spaltenrand schwebend. */
.pw-kk-titel { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.55rem; font-size: 1.18rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--farbe-text); transition: color 0.15s ease; }
.pw-kk-titel-link { min-width: 0; color: inherit; text-decoration: none; }
.pw-kk:hover .pw-kk-titel { color: var(--farbe-gruen-dunkel); }
.pw-kk-text {
margin: 0; font-size: 0.9rem; color: var(--farbe-text-hell); line-height: 1.5;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Rechte Spalte: Datum / Dauer + Verfügbarkeit / Preis (rechtsbündig) */
.pw-kk-rechts {
flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end;
justify-content: center; gap: 0.5rem; text-align: right; min-width: 205px;
}
.pw-kk-datum { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; }
.pw-kk-datum b { font-weight: 600; color: var(--farbe-text); white-space: nowrap; }
/* Fester Schilder-Slot LINKS vom Datum: Schilder rechtsbündig (hugsen das Datum),
leerer Slot hält die Breite → Datum aller Workshops auf gleicher Flucht. */
.pw-kk-schilder { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; flex: 0 0 auto; width: 42px; }
.pw-kk-datum-leer b { color: var(--farbe-text-hell); font-weight: 600; }
.pw-kk-mehr {
display: inline-flex; align-items: center; padding: 0.12rem 0.45rem; border-radius: 999px;
background: var(--farbe-getoent); color: var(--farbe-text-hell);
font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}
.pw-kk-schilder .pw-garantie svg { width: 18px; height: 18px; }
/* Dauer steht inline in der Datumszeile (hinter dem Datum) */
.pw-kk-dauer { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--farbe-text-hell); }
.pw-kk-dauer svg { width: 14px; height: 14px; }
.pw-kk-preis { display: flex; flex-direction: column; align-items: flex-end; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.1; color: var(--farbe-gruen-tinte); }
.pw-kk-preis small { font-weight: 500; font-size: 0.7rem; color: var(--farbe-text-hell); margin-top: 0.12rem; }
@media (max-width: 720px) {
/* Mobil: Bild + Titel oben, darunter ein klar gegliederter Fuß —
Datum links / Preis rechts in EINER Zeile (die zwei Kernfakten),
Dauer + Verfügbarkeit in der Zeile darunter. */
.pw-kk { flex-wrap: wrap; gap: 0.9rem 1rem; padding: 1.1rem; }
.pw-kk-medien { width: 76px; height: 76px; border-radius: 12px; }
.pw-kk-haupt { flex: 1 1 calc(100% - 92px); }
/* Mobil: „Live-Online"-Chip UNTER den Titel (statt inline rechts) — sonst
staucht er die erste Titelzeile langer Titel unschön. */
.pw-kk-titel { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.pw-kk-titel-link { flex: none; }
.pw-kk-rechts {
flex: 1 1 100%; min-width: 0; text-align: left;
border-top: 1px solid var(--farbe-rand); padding-top: 0.9rem;
display: grid; grid-template-columns: 1fr auto;
grid-template-areas: "datum preis";
column-gap: 0.9rem; align-items: center;
}
.pw-kk-datum { grid-area: datum; flex-wrap: wrap; }
/* Mobil: Schilder-Slot nur so breit wie nötig (kein fester Einzug, mehr
Platz für Datum + Dauer + „+N") — die Datums-Flucht zählt nur im Desktop-
Raster nebeneinander, nicht in der gestapelten Liste. */
.pw-kk-schilder { width: auto; }
.pw-kk-preis { grid-area: preis; align-items: flex-end; text-align: right; align-self: center; }
}
@media (max-width: 680px) {
/* Mobil: Datumskachel + Kopf/Tage oben (volle Breite), darunter EINE
Meta-Zeile — Schild + Verfügbarkeit links gruppiert, Preis rechts —
dann der Buchen-Button über die volle Breite. Kein space-between-
Wildwuchs mehr, der das Garantie-Schild isoliert nach links wirft. */
.pw-termin-karte { flex-wrap: wrap; padding: 1.2rem; row-gap: 1rem; }
.pw-termin-karte-datum { flex: 1 1 55%; }
.pw-termin-karte-rechts {
width: 100%; flex-wrap: wrap; align-items: center;
justify-content: flex-start; gap: 0.6rem 0.7rem;
padding-top: 1rem; border-top: 1px solid var(--farbe-rand);
}
.pw-termin-karte-mehr .pw-termin-karte-rechts { align-self: stretch; }
.pw-termin-karte .pw-termin-preis {
margin-left: auto; flex-direction: row; align-items: baseline; gap: 0.35rem;
}
.pw-termin-karte-rechts .btn { flex: 1 1 100%; text-align: center; }
}
@media (max-width: 640px) {
/* /live: mobil kompaktere Bänder (die Desktop-Regel .pw-lp .abschnitt
würde sonst die globale Mobil-Regel überstimmen) */
.pw-lp .abschnitt { padding: 3.4rem 0; }
}
/* ---------- Admin: Listen-Editoren im Workshop-Modal (Termine/Downloads) ---------- */
.pw-admin-sektion-kopf {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 0.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--farbe-rand);
}
.pw-admin-sektion-kopf strong { font-size: 0.92rem; }
.pw-admin-zeile {
display: flex; gap: 0.8rem; align-items: stretch;
padding: 0.9rem; margin-bottom: 0.6rem;
background: var(--farbe-getoent); border: 1px solid var(--farbe-rand); border-radius: var(--radius);
}
.pw-admin-felder { flex: 1; display: flex; flex-wrap: wrap; gap: 0.6rem; align-content: flex-start; }
.pw-admin-label {
display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 150px;
font-size: 0.72rem; color: var(--farbe-text-hell); font-weight: 600;
}
.pw-admin-feld {
padding: 0.5rem 0.7rem; border: 1px solid var(--farbe-rand); border-radius: var(--radius);
font: inherit; font-size: 0.9rem; background: var(--farbe-hintergrund); color: var(--farbe-text);
}
.pw-admin-feld:focus { outline: none; border-color: var(--farbe-gruen); box-shadow: var(--ring); }
/* Eintrag entfernen: dezenter Icon-Button, mittig neben der Zeile */
.pw-admin-loeschen {
flex-shrink: 0; align-self: center; width: 34px; height: 34px; border-radius: var(--radius);
display: inline-flex; align-items: center; justify-content: center;
background: var(--farbe-hintergrund); border: 1px solid var(--farbe-rand);
color: var(--farbe-text-hell); cursor: pointer; transition: all 0.15s ease;
}
.pw-admin-loeschen:hover { color: var(--farbe-fehler); border-color: var(--farbe-fehler-rand); background: var(--farbe-fehler-zart); }
.pw-admin-loeschen svg { width: 16px; height: 16px; }
/* ---------- Ergebnisseite /suche ---------- */
.suche-hauptform {
display: flex; align-items: center; gap: 0.6rem;
margin: 1.2rem 0 0.4rem; max-width: 620px;
position: relative;
}
.suche-hauptform-icon {
position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%);
color: var(--farbe-text-hell); pointer-events: none; display: inline-flex;
}
.suche-hauptform-icon svg { width: 18px; height: 18px; }
.suche-hauptfeld {
flex: 1; min-width: 0;
padding: 0.7rem 1rem 0.7rem 2.6rem;
border: 1px solid var(--farbe-rand); border-radius: 999px;
background: var(--farbe-hintergrund); font: inherit; font-size: 1rem; color: var(--farbe-text);
}
.suche-hauptfeld:focus { outline: none; border-color: var(--farbe-gruen); box-shadow: var(--ring); }
/* Button an den Pill-Radius des Suchfelds angleichen */
.suche-hauptform .btn { border-radius: 999px; }
.suche-status { margin: 1rem 0; color: var(--farbe-text-hell); }
.suche-anzahl { font-size: 0.95rem; color: var(--farbe-text-hell); }
.suche-keine { background: var(--farbe-getoent); border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross); padding: 1.4rem 1.6rem; line-height: 1.6; }
.suche-keine a { color: var(--farbe-gruen-dunkel); font-weight: 600; }
.suche-gruppe { margin-top: 1.8rem; }
.suche-gruppe-titel { font-size: 1.05rem; font-weight: 800; margin-bottom: 0.8rem; }
.suche-gruppe-titel span { color: var(--farbe-text-hell); font-weight: 600; }
.suche-liste { display: flex; flex-direction: column; gap: 0.6rem; }
.suche-ergebnis {
display: flex; align-items: flex-start; gap: 0.9rem;
padding: 0.9rem 1.1rem; background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross);
text-decoration: none; color: inherit;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.suche-ergebnis:hover {
transform: translateY(-1px); border-color: var(--akzent, var(--farbe-gruen));
box-shadow: 0 10px 24px -18px rgba(16,24,40,0.4);
}
.suche-ergebnis-icon {
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 10px;
background: var(--akzent-zart, var(--farbe-getoent)); color: var(--akzent, var(--farbe-gruen));
}
.suche-ergebnis-icon svg { width: 20px; height: 20px; }
.suche-ergebnis-inhalt { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.suche-ergebnis-titel { font-size: 1rem; font-weight: 700; color: var(--farbe-text); }
.suche-ergebnis-kontext { font-size: 0.85rem; color: var(--akzent-dunkel, var(--farbe-text-hell)); font-weight: 600; }
.suche-ergebnis-text { font-size: 0.9rem; color: var(--farbe-text-hell); line-height: 1.5; }
.suche-ergebnis mark { background: var(--farbe-gruen-zart); color: var(--farbe-gruen-dunkel); font-weight: 700; border-radius: 3px; padding: 0 1px; }
/* ---------- Profil-Dropdown (Name, Admin, Einstellungen, Logout) ---------- */
.profil-dropdown { position: relative; }
.profil-knopf {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.3rem 0.6rem 0.3rem 0.3rem;
border: 1px solid transparent;
border-radius: 999px;
background: none;
font-family: inherit;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.profil-knopf:hover { background: var(--farbe-getoent); border-color: var(--farbe-rand); }
.profil-chevron { display: flex; color: var(--farbe-text-hell); }
.profil-chevron svg { width: 14px; height: 14px; }
.dropdown-menue {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 200;
min-width: 230px;
max-width: 280px;
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross);
box-shadow: var(--schatten-schwebend);
padding: 0.4rem;
}
.dropdown-kopf {
display: flex;
flex-direction: column;
padding: 0.6rem 0.8rem 0.7rem;
border-bottom: 1px solid var(--farbe-rand);
margin-bottom: 0.35rem;
}
.dropdown-kopf strong,
.dropdown-kopf span {
min-width: 0; max-width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dropdown-kopf strong { font-size: 0.95rem; }
.dropdown-kopf span { font-size: 0.82rem; color: var(--farbe-text-hell); }
.dropdown-eintrag {
display: flex;
align-items: center;
gap: 0.7rem;
width: 100%;
padding: 0.55rem 0.8rem;
border: none;
border-radius: var(--radius);
background: none;
font-family: inherit;
font-size: 0.92rem;
font-weight: 600;
color: var(--farbe-text);
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.dropdown-eintrag:hover { background: var(--farbe-gruen-zart); color: var(--farbe-gruen-dunkel); }
.dropdown-eintrag svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--farbe-text-hell); }
.dropdown-eintrag:hover svg { color: var(--farbe-gruen-dunkel); }
.dropdown-trenner { height: 1px; background: var(--farbe-rand); margin: 0.35rem 0; }
/* Hauptinhalt: Abstand für die fixe Kopfzeile */
.app-main { padding: 6.2rem 0 4.5rem; }
.app-titel {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 0.35rem;
}
.app-untertitel { color: var(--farbe-text-hell); margin-bottom: 2.2rem; }
.app-abschnitt-titel { font-size: 1.15rem; font-weight: 600; margin: 2.6rem 0 1.1rem; }
.app-abschnitt-titel:first-of-type { margin-top: 0; }
/* ---------- Übersichtskarten (Statistiken) ----------
Clean im circle.so-Stil: Icon links in grüner Fläche,
Zahl + Bezeichnung rechts, dezenter Hover ohne Bewegung. */
.statistik-raster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 1.1rem;
margin-bottom: 1rem;
}
.statistik-karte {
display: flex;
align-items: center;
gap: 1rem;
text-decoration: none;
color: inherit;
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross);
padding: 1.25rem 1.4rem;
box-shadow: var(--schatten);
transition: border-color 0.15s ease;
}
.statistik-karte:hover { border-color: rgba(14, 123, 90, 0.45); }
.statistik-icon {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
flex-shrink: 0;
border-radius: 12px;
background: var(--akzent-zart, var(--farbe-gruen-zart));
color: var(--akzent-dunkel, var(--farbe-gruen-dunkel));
}
.statistik-icon svg { width: 22px; height: 22px; }
.statistik-zahl {
display: block;
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--farbe-text);
}
.statistik-text { display: block; color: var(--farbe-text-hell); font-weight: 600; font-size: 0.88rem; }
/* ---------- Fortschrittsbalken ---------- */
.fortschritt-zeile {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
color: var(--farbe-text-hell);
margin-bottom: 0.4rem;
}
.fortschritt-balken {
height: 8px;
border-radius: 999px;
background: var(--farbe-rand);
overflow: hidden;
}
.fortschritt-fuellung {
height: 100%;
border-radius: 999px;
background: var(--verlauf); /* Verlauf als Akzent */
transition: width 0.4s ease;
}
/* ---------- Inhalts-Karten (Kurse, Workshops, letzte Inhalte) ---------- */
.inhalt-karte {
display: flex;
flex-direction: column;
gap: 0.55rem;
text-decoration: none;
color: inherit;
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross);
padding: 1.5rem 1.6rem;
box-shadow: var(--schatten);
transition: border-color 0.15s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
a.inhalt-karte:hover {
border-color: color-mix(in srgb, var(--akzent, var(--farbe-gruen)) 45%, transparent);
transform: translateY(-3px);
box-shadow: 0 16px 32px -20px rgba(16, 24, 40, 0.3);
}
.inhalt-karte h3 { font-size: 1.15rem; font-weight: 700; }
.inhalt-karte p { color: var(--farbe-text-hell); font-size: 0.95rem; }
.inhalt-chip {
align-self: flex-start;
padding: 0.2rem 0.7rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
background: var(--akzent-zart, var(--farbe-gruen-zart));
color: var(--akzent-dunkel, var(--farbe-gruen-dunkel));
}
.inhalt-meta { font-size: 0.88rem; color: var(--farbe-text-hell); }
.inhalt-karte-fuss { margin-top: auto; padding-top: 0.6rem; }
/* ---------- Inhalts-Karten mit Bild-/Icon-Vorschau (Kurs-/Workshop-Übersicht) ----------
Wie .vorlage-karte, aber farblich an die Bereichs-Akzentfarbe angepasst:
sanfter Verlauf von --akzent-zart zu Weiß, Icon in --akzent. */
.inhalt-karte-bild { padding: 0; overflow: hidden; }
.inhalt-vorschau {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 16 / 9;
background: linear-gradient(150deg, var(--akzent-zart, var(--farbe-gruen-zart)) 0%, var(--farbe-hintergrund) 145%);
border-bottom: 1px solid var(--farbe-rand);
color: var(--akzent, var(--farbe-gruen));
}
.inhalt-vorschau img { width: 100%; height: 100%; object-fit: cover; }
/* Platzhalter ohne Bild: Icon in einer weichen weißen Kachel statt
frei schwebendem Mini-Icon — wirkt gestaltet statt leer */
.inhalt-vorschau svg {
width: 56px;
height: 56px;
padding: 15px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.9);
border-radius: 14px;
box-shadow: 0 10px 24px -12px rgba(16, 24, 40, 0.28);
color: var(--akzent, var(--farbe-gruen));
}
.inhalt-karte-inhalt {
display: flex;
flex-direction: column;
gap: 0.55rem;
flex-grow: 1;
padding: 1.4rem 1.6rem 1.6rem;
}
/* Titel/Beschreibung auf 2 Zeilen kappen: die Reihenhöhe orientiert sich an
der höchsten Karte — aber keine Karte wird durch Langtexte unnötig hoch */
.inhalt-karte-bild h3,
.inhalt-karte-bild .inhalt-karte-inhalt p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.karte-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* ---------- Kurs-Detail: Playlist links, Video rechts ---------- */
.kurs-layout {
display: grid;
grid-template-columns: 340px 1fr;
gap: 1.8rem;
align-items: start;
}
.lektion-liste {
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross);
box-shadow: var(--schatten);
overflow: hidden;
position: sticky;
top: 86px; /* unter der fixen Kopfzeile bleiben */
max-height: calc(100vh - 116px);
overflow-y: auto;
}
.lektion-liste-kopf {
padding: 1rem 1.2rem;
border-bottom: 1px solid var(--farbe-rand);
}
.lektion-eintrag {
display: flex;
align-items: center;
gap: 0.8rem;
width: 100%;
text-align: left;
padding: 0.85rem 1.2rem;
background: none;
border: none;
border-bottom: 1px solid var(--farbe-rand);
cursor: pointer;
font-family: inherit;
font-size: 0.92rem;
color: inherit;
transition: background 0.15s ease;
}
.lektion-eintrag:last-child { border-bottom: none; }
.lektion-eintrag:hover { background: var(--farbe-getoent); }
.lektion-eintrag.aktiv { background: var(--farbe-gruen-zart); }
/* Kompakte Nummer ohne Kreis — nimmt kaum Platz weg, wirkt ruhiger */
.lektion-nummer {
width: 18px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.74rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--farbe-text-hell);
}
/* Abgeschlossene Lektionen: grüner Haken statt Nummer */
.lektion-eintrag.abgeschlossen .lektion-nummer {
color: var(--farbe-gruen);
}
.lektion-nummer svg { width: 14px; height: 14px; }
.lektion-eintrag-titel { font-weight: 400; }
.video-bereich { min-width: 0; }
.video-karte {
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross);
box-shadow: var(--schatten);
padding: 1.5rem 1.6rem 1.7rem;
margin-bottom: 1.8rem;
overflow: hidden; /* klippt die runden Ecken über dem randlosen Video */
}
/* Video randlos über die volle Kartenbreite (so groß wie möglich darstellen) */
.video-karte #video-container { margin: -1.5rem -1.6rem 0; }
.video-karte #video-container .video-rahmen,
.video-karte #video-container .video-platzhalter { border-radius: 0; }
/* Solo-Variante (Workshop): nur das Video, kein Text darunter → keine
Restpolsterung (sonst weißer Streifen unter dem Video) */
.video-karte-solo { padding: 0; }
.video-karte-solo #video-container { margin: 0; }
/* Workshop: Video-Platzhalter im selben Verlauf wie die Karten-Thumbnails */
.akzent-workshops .video-platzhalter {
border-color: #c7cdf5;
background: linear-gradient(150deg, var(--akzent-zart, var(--farbe-gruen-zart)) 0%, var(--farbe-hintergrund) 145%);
color: #4f46e5;
}
.video-rahmen {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
border-radius: var(--radius-gross);
background: #0b1512;
box-shadow: var(--schatten);
}
.video-platzhalter {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 16 / 9;
border-radius: var(--radius-gross);
border: 1px dashed #c3cfc9;
background: linear-gradient(150deg, #f0f5f2 0%, #e6efe9 100%);
color: #8aa297;
font-weight: 600;
}
.lektion-detail-titel { font-size: 1.35rem; font-weight: 700; margin: 1.3rem 0 0.4rem; }
.lektion-detail-inhalt { color: var(--farbe-text-hell); }
/* ---------- Vorlagen ---------- */
.vorlage-karte { padding: 0; overflow: hidden; }
.vorlage-vorschau {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 16 / 9;
background: linear-gradient(150deg, #f0f5f2 0%, #e6efe9 100%);
border-bottom: 1px solid var(--farbe-rand);
color: #8aa297;
}
.vorlage-vorschau img { width: 100%; height: 100%; object-fit: cover; }
.vorlage-vorschau svg { width: 40px; height: 40px; }
.vorlage-inhalt {
display: flex;
flex-direction: column;
gap: 0.55rem;
flex-grow: 1;
padding: 1.4rem 1.6rem 1.6rem;
}
.vorlage-inhalt .btn { align-self: flex-start; margin-top: 0.5rem; }
.vorlage-download { display: inline-flex; align-items: center; gap: 0.45rem; }
.vorlage-download svg { width: 15px; height: 15px; }
/* ---------- Hinweise im App-Bereich ---------- */
.leer-hinweis {
grid-column: 1 / -1;
text-align: center;
color: var(--farbe-text-hell);
background: var(--farbe-hintergrund);
border: 1px dashed var(--farbe-rand);
border-radius: var(--radius-gross);
padding: 2.5rem 1.5rem;
}
/* Fehlerhinweis im Karten-Stil des Dashboards: weiße Karte mit Schatten
und rotem Akzent links (statt flächigem roten Kasten) */
.app-fehler {
display: none;
background: var(--farbe-hintergrund);
color: var(--farbe-text);
border: 1px solid var(--farbe-rand);
border-left: 4px solid var(--farbe-fehler);
border-radius: var(--radius-gross);
box-shadow: var(--schatten);
padding: 0.95rem 1.2rem;
margin-bottom: 1.5rem;
font-size: 0.92rem;
font-weight: 600;
}
.app-fehler.sichtbar { display: block; }
/* ---------- Tablet (≤900px): Mitglieder- & Landing-Layout ----------
Alle 900px-Umbrüche des öffentlichen/Mitglieder-Bereichs in einem
Block gebündelt (Admin hat seinen eigenen weiter unten). */
@media (max-width: 900px) {
/* Kurs-Player: Video oben, Playlist darunter (wie YouTube mobil) */
.kurs-layout { grid-template-columns: 1fr; }
.lektion-liste { order: 2; position: static; max-height: none; }
.video-bereich { order: 1; }
/* Funktionen-Reihen: eine Spalte, Text oben, Bild darunter. Die #funktionen-
Selektoren überschreiben die ID-basierten Desktop-Regeln mit gleicher Spezifität. */
.funktion-reihe { grid-template-columns: 1fr; gap: 1.8rem; }
#funktionen .funktion-reihe,
#funktionen .funktion-reihe:nth-of-type(odd) { grid-template-columns: 1fr; }
.funktion-reihe:nth-of-type(odd) .funktion-text { order: 0; }
.funktion-reihe:nth-of-type(odd) .bild-platzhalter { order: 0; }
.bewertung-karte { flex-basis: calc((100% - 24px) / 2); } /* zwei Karten pro Ansicht */
.checkout-raster { grid-template-columns: 1fr; }
.bestellung { order: 0; position: static; }
.checkout-formular { order: 1; }
}
@media (max-width: 720px) {
.app-kopfzeile-inhalt {
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
row-gap: 0.5rem;
}
/* Navigation rutscht in eine eigene Zeile und bleibt erreichbar */
.app-navigation {
grid-column: 1 / -1;
grid-row: 2;
justify-content: flex-start;
overflow-x: auto;
scrollbar-width: none; /* Scrollleiste in der Kopfzeile ausblenden */
}
.app-navigation::-webkit-scrollbar { display: none; }
.app-profil { grid-column: 2; grid-row: 1; }
.app-profil-name { display: none; } /* auf Mobil nur der Logout-Button */
.app-main { padding-top: 8.2rem; } /* Platz für die zweizeilige Kopfzeile */
}
/* ============================================================
Admin-Bereich
Fixe Sidebar links, Hauptinhalt rechts; Tabellen, Modals,
Toasts und Formulare. Nutzt das Farbschema der Landing Page.
============================================================ */
.admin-body {
display: flex;
min-height: 100vh;
background: var(--farbe-getoent);
}
/* ---------- Karten / Boxen ---------- */
.admin-karte {
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross);
box-shadow: var(--schatten);
padding: 1.4rem 1.6rem;
margin-bottom: 1.6rem;
}
.admin-karte h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 1rem; }
/* ---------- Tabellen ---------- */
.admin-tabelle-umbruch { overflow-x: auto; }
.admin-tabelle {
width: 100%;
border-collapse: collapse;
font-size: 0.93rem;
}
.admin-tabelle th {
text-align: left;
padding: 0.65rem 0.8rem;
border-bottom: 2px solid var(--farbe-rand);
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--farbe-text-hell);
white-space: nowrap;
}
.admin-tabelle td {
padding: 0.75rem 0.8rem;
border-bottom: 1px solid var(--farbe-rand);
vertical-align: middle;
}
.admin-tabelle tbody tr { transition: background 0.15s ease; }
.admin-tabelle tbody tr:hover { background: var(--farbe-getoent); }
/* Kleine Icon-Buttons in Tabellenzeilen */
.btn-icon {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.7rem;
border: 1px solid var(--farbe-rand);
border-radius: var(--radius);
background: var(--farbe-hintergrund);
font-family: inherit;
font-size: 0.85rem;
font-weight: 600;
color: var(--farbe-text);
text-decoration: none;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.btn-icon:hover { border-color: var(--farbe-gruen); color: var(--farbe-gruen-dunkel); }
.btn-icon.gefahr:hover { border-color: var(--farbe-fehler); color: var(--farbe-fehler); background: var(--farbe-fehler-zart); }
/* ---------- Chips (Status, Rolle, Zahlung) ---------- */
.chip {
display: inline-block;
padding: 0.18rem 0.65rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
white-space: nowrap;
}
.chip-gruen { background: var(--farbe-gruen-zart); color: var(--farbe-gruen-dunkel); }
.chip-rot { background: var(--farbe-fehler-zart); color: var(--farbe-fehler); }
/* ---------- Filterzeile (Suche + Auswahlfelder) ---------- */
.admin-filter {
display: flex;
gap: 0.8rem;
flex-wrap: wrap;
margin-bottom: 1.2rem;
}
.admin-filter input,
.admin-filter select {
padding: 0.55rem 0.8rem;
border: 1px solid var(--farbe-rand);
border-radius: var(--radius);
font-family: inherit;
font-size: 0.93rem;
background: var(--farbe-hintergrund);
}
.admin-filter input { flex: 1; min-width: 200px; }
.admin-filter input:focus,
.admin-filter select:focus {
outline: none;
border-color: var(--farbe-gruen);
box-shadow: var(--ring);
}
/* ---------- Modals ---------- */
.modal-hintergrund {
display: none;
position: fixed;
inset: 0;
z-index: 200;
background: var(--schleier);
padding: 2rem 1rem;
overflow-y: auto;
}
.modal-hintergrund.offen { display: flex; align-items: flex-start; justify-content: center; }
.modal {
width: 100%;
max-width: 560px;
margin: auto 0;
background: var(--farbe-hintergrund);
border-radius: var(--radius-gross);
box-shadow: var(--schatten-modal);
animation: hereinGleiten 0.25s ease both;
}
.modal-kopf {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.2rem 1.6rem;
border-bottom: 1px solid var(--farbe-rand);
}
.modal-kopf h2 { font-size: 1.15rem; font-weight: 700; }
.modal-schliessen {
border: none;
background: none;
font-size: 1.5rem;
line-height: 1;
color: var(--farbe-text-hell);
cursor: pointer;
}
.modal-schliessen:hover { color: var(--farbe-text); }
.modal-inhalt { padding: 1.4rem 1.6rem; }
.modal-fuss {
display: flex;
justify-content: flex-end;
gap: 0.8rem;
padding: 1.1rem 1.6rem;
border-top: 1px solid var(--farbe-rand);
}
/* Formulare in Modals: auch Textareas und Selects stylen */
.formular-feld textarea,
.formular-feld select {
width: 100%;
padding: 0.7rem 0.9rem;
border: 1px solid var(--farbe-rand);
border-radius: var(--radius);
font-size: 1rem;
font-family: inherit;
background: var(--farbe-hintergrund);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.formular-feld textarea { min-height: 110px; resize: vertical; }
.formular-feld textarea:focus,
.formular-feld select:focus {
outline: none;
border-color: var(--farbe-gruen);
box-shadow: var(--ring);
}
.formular-zeile {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.formular-feld input[type="file"] { padding: 0.5rem; }
.lektion-zeile {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.55rem 1.2rem;
}
.lektion-zeile:hover { background: var(--farbe-getoent); }
.lektion-zeile-meta { font-size: 0.82rem; color: var(--farbe-text-hell); white-space: nowrap; }
/* ---------- Downloads (Admin-Kursdetail + Mitgliederbereich) ---------- */
.download-zeile {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 0.85rem 0;
border-bottom: 1px solid var(--farbe-rand);
}
.download-zeile:first-child { padding-top: 0.2rem; }
.download-zeile:last-child { border-bottom: none; padding-bottom: 0.2rem; }
.download-zeile-titel { flex: 1; font-weight: 600; font-size: 0.95rem; }
/* ============================================================
Mitgliederbereich — Ergänzungen
(Pillen-Filter, Avatar, Playlist-Gruppen, Einstellungen)
============================================================ */
/* ---------- Akzentfarben pro Inhaltstyp ----------
Kurse bleiben im Markengrün, Workshops bekommen Indigo,
Vorlagen ein zurückhaltendes Bernstein — so sind die drei
Bereiche auf einen Blick unterscheidbar. Komponenten wie
.statistik-icon, .inhalt-icon, .inhalt-chip, .app-kicker und
.meta-chip lesen die --akzent-Variablen (Grün als Fallback). */
.akzent-kurse {
--akzent: var(--farbe-gruen);
--akzent-dunkel: var(--farbe-gruen-dunkel);
--akzent-zart: var(--farbe-gruen-zart);
}
.akzent-workshops {
--akzent: #4f46e5;
--akzent-dunkel: #3730a3;
--akzent-zart: #eef2ff;
}
.akzent-vorlagen {
--akzent: #b45309;
--akzent-dunkel: #92400e;
--akzent-zart: #fdf3e7;
}
/* Sprints = Kern-Feature, eigene Akzentfarbe (Petrol/Teal — technisch,
harmoniert mit dem Markengrün, bleibt aber klar unterscheidbar) */
.akzent-sprints {
--akzent: #0e7490;
--akzent-dunkel: #155e75;
--akzent-zart: #e8f4f8;
}
/* ---------- Logo als Bild (Design-Einstellungen) ---------- */
.logo-bild { max-height: 34px; display: block; }
/* ---------- Seiten-Kicker: grüne Mini-Überschrift über Titeln ---------- */
.app-kicker {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--akzent, var(--farbe-gruen));
margin-bottom: 0.45rem;
}
.app-kicker svg { width: 15px; height: 15px; }
/* Kicker + Zertifikat-Knopf in einer Zeile, rechtsbündiger Knopf */
.seiten-kopf-zeile {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
/* Titel direkt in der Kopf-Zeile (neben dem Zertifikat) — ohne Eigenabstand */
.seiten-kopf-zeile h1 { margin: 0; }
/* Pokal-Knopf für Zertifikate: dezent, solange nicht freigeschaltet */
.zertifikat-knopf {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
border: 1px solid var(--farbe-rand);
border-radius: 50%;
background: var(--farbe-hintergrund);
color: var(--farbe-text-hell);
opacity: 0.45;
cursor: not-allowed;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.zertifikat-knopf svg { width: 17px; height: 17px; }
.zertifikat-knopf.freigeschaltet {
opacity: 1;
cursor: pointer;
border-color: var(--akzent, var(--farbe-gruen));
color: var(--akzent-dunkel, var(--farbe-gruen-dunkel));
}
.zertifikat-knopf.freigeschaltet:hover {
background: var(--akzent-zart, var(--farbe-gruen-zart));
}
/* ---------- Seitenkopf-Karte (Kurs-/Workshop-Einzelseiten) ---------- */
.seiten-kopf {
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand);
border-left: 4px solid var(--akzent, var(--farbe-gruen));
border-radius: var(--radius-gross);
box-shadow: var(--schatten);
padding: 1.5rem 1.8rem;
margin-bottom: 1.8rem;
}
.seiten-kopf h1 {
font-size: clamp(1.4rem, 2.6vw, 1.9rem);
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 0.3rem;
}
.seiten-kopf p { color: var(--farbe-text-hell); max-width: 720px; }
.meta-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.9rem; }
.meta-chip {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.3rem 0.8rem;
border-radius: 999px;
font-size: 0.84rem;
font-weight: 700;
background: var(--akzent-zart, var(--farbe-gruen-zart));
color: var(--akzent-dunkel, var(--farbe-gruen-dunkel));
}
.meta-chip svg { width: 14px; height: 14px; }
/* ---------- Tabs (Einstellungs-Seite) ---------- */
.tab-leiste {
display: flex;
gap: 0.3rem;
border-bottom: 1px solid var(--farbe-rand);
margin-bottom: 1.8rem;
overflow-x: auto;
scrollbar-width: none; /* Scrollleiste verstecken (Firefox) */
}
.tab-leiste::-webkit-scrollbar { display: none; }
.tab {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 1.1rem;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
background: none;
font-family: inherit;
font-size: 0.95rem;
font-weight: 600;
color: var(--farbe-text-hell);
cursor: pointer;
white-space: nowrap;
transition: color 0.15s ease, border-color 0.15s ease;
}
.tab svg { width: 16px; height: 16px; }
.tab:hover { color: var(--farbe-gruen-dunkel); }
.tab.aktiv { color: var(--farbe-gruen-dunkel); border-bottom-color: var(--farbe-gruen); }
/* ---------- Admin: Design-Seite ---------- */
.farbe-zeile { display: flex; gap: 0.6rem; align-items: center; }
.farbe-zeile input[type="color"] {
width: 48px;
height: 42px;
padding: 3px;
border: 1px solid var(--farbe-rand);
border-radius: var(--radius);
background: var(--farbe-hintergrund);
cursor: pointer;
flex-shrink: 0;
}
.farbe-zeile input[type="text"] { flex: 1; min-width: 0; }
.design-vorschau {
display: flex;
align-items: center;
gap: 1.1rem;
flex-wrap: wrap;
border-top: 1px solid var(--farbe-rand);
padding-top: 1.3rem;
margin-top: 0.5rem;
}
.logo-vorschau {
min-width: 170px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 1rem;
border: 1px dashed var(--farbe-rand);
border-radius: var(--radius);
background: var(--farbe-getoent);
color: var(--farbe-text-hell);
font-size: 0.9rem;
}
.logo-vorschau img { max-height: 42px; max-width: 220px; }
/* ---------- Dashboard: Begrüßung ---------- */
.dashboard-gruss {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 2rem;
}
/* Gemeinsame Kopfzeile mit Team-Logo (Dashboard + /team): Textblock links,
Logo mittig rechts. Der Untertitel-Bottom-Margin wird hier neutralisiert
(der Abstand nach unten kommt von der Zeile selbst) — sonst bläht er den
Block auf und das zentrierte Logo säße je Seite auf anderer Höhe. */
.app-kopf-zeile {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.2rem;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.app-kopf-zeile .app-untertitel { margin-bottom: 0; }
/* Team-Logo: gleiche Größe auf beiden Seiten; am Smartphone ausgeblendet */
.team-kopf-logo { max-height: 64px; max-width: 220px; object-fit: contain; align-self: center; flex-shrink: 0; }
@media (max-width: 640px) {
.team-kopf-logo { display: none !important; }
}
/* Begrüßungs-Titel: exakt die app-titel-Metrik (gleiche Kopfhöhe wie /team) */
.dashboard-gruss h1 {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 0.35rem;
}
.dashboard-gruss p {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
color: var(--farbe-text-hell);
}
.paket-chip {
display: inline-block;
padding: 0.15rem 0.7rem;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 700;
background: var(--farbe-gruen-zart);
color: var(--farbe-gruen-dunkel);
}
/* Team-Chip: neutraler als der Paket-Chip, mit Icon */
.paket-chip.team-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: var(--farbe-getoent);
color: var(--farbe-text);
}
.paket-chip.team-chip svg { width: 14px; height: 14px; }
/* ---------- Dashboard: Hero (Weiterlernen) + Lernaktivität ---------- */
.held-karte {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 1.8rem;
border-radius: var(--radius-gross);
padding: 2.1rem 2.2rem;
color: #fff;
/* Immer Marken-Dunkelgrün (unabhängig vom Inhaltstyp): zwei weiche
Farbschimmer statt kräftigem Gradient, dazu ein feiner heller
Innenrand oben + weicher Schatten für die wertige Anmutung */
background:
radial-gradient(680px 320px at 112% -30%, rgba(20, 160, 118, 0.32), transparent 62%),
radial-gradient(520px 260px at -8% 130%, rgba(14, 123, 90, 0.18), transparent 60%),
var(--farbe-gruen-tinte);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 44px -26px rgba(9, 60, 44, 0.55);
}
.held-inhalt { flex: 1; min-width: 0; }
.held-kicker { color: #8fd0b6; }
.held-inhalt h2 {
font-size: clamp(1.3rem, 2.4vw, 1.7rem);
font-weight: 700;
letter-spacing: -0.02em;
margin: 0.2rem 0 0.5rem;
}
.held-inhalt p { color: #9ec9b8; max-width: 460px; }
/* Motivierende Zeile + kompakte Zahlen-Meta darunter */
.held-motivation { font-size: 1.02rem; margin-bottom: 0.35rem; }
.held-meta { font-size: 0.85rem; opacity: 0.85; }
.held-fortschritt {
display: flex;
align-items: center;
gap: 0.9rem;
margin: 1.2rem 0 0;
max-width: 420px;
font-size: 0.85rem;
color: #9ec9b8;
}
.held-fortschritt .fortschritt-balken { flex: 1; background: rgba(255, 255, 255, 0.16); }
/* Fortschritts-Ring rechts: Prozent auf einen Blick (ersetzt den Balken) */
.held-ring {
position: relative;
width: 116px;
height: 116px;
flex-shrink: 0;
}
.held-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.held-ring-spur { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 8; }
.held-ring-wert {
fill: none;
stroke: #8fd0b6;
stroke-width: 8;
stroke-linecap: round;
transition: stroke-dashoffset 0.7s ease;
}
.held-ring-prozent {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.45rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.held-ring-prozent small { font-size: 0.8rem; font-weight: 600; margin-left: 1px; opacity: 0.8; }
@media (max-width: 560px) {
.held-ring { width: 88px; height: 88px; }
.held-ring-prozent { font-size: 1.1rem; }
}
/* Hero-Rotation: bis zu 3 Vorschläge, sanfter Fade + Punkte-Navigation.
Die Slides liegen in derselben Grid-Zelle — der höchste bestimmt die Höhe. */
.held-rotation { position: relative; }
.held-slides { display: grid; height: 100%; }
.held-slide {
grid-area: 1 / 1;
min-width: 0;
opacity: 0;
transition: opacity 0.55s ease;
pointer-events: none;
}
.held-slide.aktiv { opacity: 1; pointer-events: auto; }
.held-slide .held-karte { height: 100%; }
.held-punkte {
position: absolute;
right: 1.4rem;
bottom: 1.2rem;
display: flex;
gap: 0.45rem;
z-index: 2;
}
.held-punkt {
width: 8px;
height: 8px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.35);
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.held-punkt:hover { background: rgba(255, 255, 255, 0.6); }
.held-punkt.aktiv { background: #fff; transform: scale(1.15); }
.aktivitaet-karte {
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross);
box-shadow: var(--schatten);
padding: 1.5rem 1.6rem;
display: flex;
flex-direction: column;
}
.aktivitaet-karte h3 { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }
.streak-zeile {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.7rem 0.9rem;
border-radius: var(--radius);
background: var(--farbe-getoent);
margin-bottom: 1.1rem;
}
.streak-zeile strong { display: block; font-size: 0.95rem; }
.streak-zeile span:last-child > span,
.streak-zeile div > span { font-size: 0.8rem; color: var(--farbe-text-hell); }
.streak-flamme {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
flex-shrink: 0;
background: #eef0f3;
color: #9aa3b5;
}
.streak-zeile.aktiv { background: #fdf6ec; }
.streak-zeile.aktiv .streak-flamme { background: #fdeeda; color: #ea8a2c; }
.streak-flamme svg { width: 20px; height: 20px; }
.aktivitaet-diagramm {
display: flex;
align-items: flex-end;
gap: 0.45rem;
flex: 1;
min-height: 92px;
}
.aktivitaet-spalte {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 0.3rem;
}
.aktivitaet-spalte > span { font-size: 0.68rem; color: var(--farbe-text-hell); }
/* Heutiger Tag hervorgehoben (Label + leerer Balken getönt) */
.aktivitaet-spalte.heute > span { color: var(--farbe-gruen-dunkel); font-weight: 700; }
.aktivitaet-spalte.heute .aktivitaet-balken:not(.gefuellt) { background: var(--farbe-gruen-zart); }
.aktivitaet-balken {
width: 100%;
max-width: 26px;
border-radius: 5px 5px 2px 2px;
background: #eef1f4;
}
.aktivitaet-balken.gefuellt { background: var(--verlauf); }
/* ======================================================================
Dashboard: Panel-System — EINE einheitliche Karten-Anatomie für alle
Widgets: Kopfzeile (Icon-Kachel + Titel + optionaler Link) IN der Karte,
feine Trennlinie, Inhalt mit einheitlichem Padding. Panels strecken sich
auf die Zeilenhöhe (flex), Fußzeilen werden unten angepinnt.
====================================================================== */
.panel {
display: flex;
flex-direction: column;
min-width: 0;
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross);
box-shadow: var(--schatten);
overflow: hidden;
}
.panel-kopf {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.95rem 1.35rem;
border-bottom: 1px solid #eef1f4;
flex-shrink: 0;
}
.panel-kopf h2 {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-size: 1rem;
font-weight: 600;
min-width: 0;
}
.panel-kopf h2 .kopf-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-kopf h2 .kopf-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
flex-shrink: 0;
background: var(--akzent-zart, var(--farbe-gruen-zart));
color: var(--akzent-dunkel, var(--farbe-gruen-dunkel));
}
.panel-kopf h2 .kopf-icon svg { width: 15px; height: 15px; color: inherit; }
.panel-kopf h2 .kopf-icon:empty { display: none; }
.panel-link {
margin-left: auto;
flex-shrink: 0;
font-size: 0.84rem;
font-weight: 600;
text-decoration: none;
color: var(--akzent-dunkel, var(--farbe-gruen-dunkel));
}
.panel-link:hover { text-decoration: underline; }
.panel-koerper {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
padding: 1.05rem 1.35rem 1.25rem;
}
/* --- Listen IM Panel: Zeilen mit Hairline-Trennern statt Mini-Karten.
Einheitliche Taktung: Körper-Padding oben/unten = Zeilen-Padding, so ist
der Abstand Kopf→Zeile 1 = Zeile→Zeile = letzte Zeile→Panel-Ende. --- */
.panel-koerper--liste { padding-top: 0.55rem; padding-bottom: 0.55rem; }
.panel .teilinhalt-liste,
.panel .zertifikat-liste { gap: 0; }
.panel .teilinhalt-zeile,
.panel .zertifikat-zeile {
border: none;
box-shadow: none;
border-radius: 8px;
background: transparent;
padding: 0.55rem 0.5rem;
margin: 0 -0.5rem; /* Hover-Fläche bis an den Panel-Rand */
min-height: 56px;
align-items: center;
transition: background 0.12s ease;
}
.panel .teilinhalt-zeile + .teilinhalt-zeile,
.panel .zertifikat-zeile + .zertifikat-zeile {
border-top: 1px solid #eef1f4;
border-radius: 0 0 8px 8px;
}
.panel .teilinhalt-zeile:hover,
.panel .zertifikat-zeile:hover {
background: var(--farbe-getoent);
transform: none;
border-color: #eef1f4;
}
/* --- Kennzahlen als EIN Panel mit vier Segmenten --- */
.panel-kennzahlen .panel-koerper { padding: 0; }
.panel-kennzahlen .kennzahl-zeile { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; flex: 1; }
.panel-kennzahlen .kennzahl {
border: none;
box-shadow: none;
border-radius: 0;
background: transparent;
padding: 1.1rem 1.3rem;
}
.panel-kennzahlen .kennzahl + .kennzahl { border-left: 1px solid #eef1f4; }
/* 2×2-Variante (Haupt-/Seitenspalte): Zell-Trenner wie in einer Tabelle —
die durchlaufende border-left zeichnete sonst am Zeilenanfang (Segment 3)
eine Linie ins Leere und zwischen den Zeilen fehlte der Trenner */
.dash-spalte .panel-kennzahlen .kennzahl + .kennzahl { border-left: 0; }
.dash-spalte .panel-kennzahlen .kennzahl:nth-child(even) { border-left: 1px solid #eef1f4; }
.dash-spalte .panel-kennzahlen .kennzahl:nth-child(n+3) { border-top: 1px solid #eef1f4; }
/* --- Karten-Inhalte im Panel: eigene Chrome ablegen (Panel liefert sie) --- */
.panel .aktivitaet-karte,
.panel .team-karte {
border: none;
box-shadow: none;
border-radius: 0;
background: transparent;
padding: 0;
height: auto;
}
.panel .coach-fuss { padding-top: 0.35rem; }
.panel .team-karte .btn { align-self: center; }
/* --- Seitenschiene: kompaktere Listen-Zeilen (relative Zeit ausblenden) --- */
.dash-spalte-seite .teilinhalt-zeit { display: none; }
/* --- Slider-Abschnitte (Zuletzt/Empfohlen): Kopf-Typo exakt wie Panel-Kopf --- */
.dashboard-raster .abschnitt-kopf h2 { font-size: 1rem; font-weight: 600; }
.dashboard-raster .abschnitt-kopf h2 .kopf-icon { width: 28px; height: 28px; }
.dashboard-raster .abschnitt-kopf h2 .kopf-icon svg { width: 15px; height: 15px; }
/* ---------- Dashboard: Lerncoach-Widget (nur Premium, Gold-Akzent) ---------- */
.akzent-coach {
--akzent: #C9A227;
--akzent-dunkel: #8a6f1c;
--akzent-zart: #f9f3df;
}
/* Der Inhalt lebt immer in einem Panel (Kopf trägt das Gold-Branding);
die Karte selbst ist nur noch eine ruhig getaktete Spalte */
.coach-karte {
display: flex;
flex-direction: column;
gap: 0.45rem;
min-width: 0;
}
.coach-chip {
align-self: flex-start;
padding: 0.14rem 0.6rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
background: var(--farbe-getoent);
color: var(--farbe-text-hell);
}
.coach-chip--neu { background: #f9f3df; color: #8a6f1c; }
.coach-titel { font-size: 1.02rem; font-weight: 700; }
.coach-text { font-size: 0.9rem; color: var(--farbe-text-hell); }
/* Antwort-Auszug als dezentes Zitat mit Gold-Strich */
.coach-zitat {
border-left: 3px solid #C9A227;
padding-left: 0.75rem;
margin: 0.15rem 0;
}
.coach-fuss {
display: flex;
align-items: center;
gap: 0.8rem;
margin-top: 0.5rem;
flex-wrap: wrap;
}
.coach-zeit { font-size: 0.78rem; color: var(--farbe-text-hell); }
/* ---------- Dashboard: Wochenziel-Zeile (Teil des Lernwoche-Panels) ---------- */
.lernwoche-ziel {
margin-top: 0.9rem;
border-top: 1px solid #eef1f4;
padding-top: 0.85rem;
}
.lernwoche-ziel-zeile {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
font-size: 0.84rem;
}
.lernwoche-ziel-label {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-weight: 600;
color: var(--farbe-text);
}
.lernwoche-ziel-label svg { width: 15px; height: 15px; color: var(--farbe-gruen-dunkel); }
.lernwoche-ziel-stand { margin-left: auto; color: var(--farbe-text-hell); }
.lernwoche-ziel-stand.geschafft { color: #ea8a2c; font-weight: 700; }
.lernwoche-ziel-balken { margin-top: 0.6rem; }
.lernwoche-ziel-balken.geschafft .fortschritt-fuellung { background: linear-gradient(135deg, #ea8a2c 0%, #f4b96a 100%); }
/* Kein Ziel gesetzt: dezenter Link in die Einstellungen */
.lernwoche-ziel-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.84rem;
font-weight: 600;
text-decoration: none;
color: var(--farbe-text-hell);
transition: color 0.12s ease;
}
.lernwoche-ziel-link svg { width: 15px; height: 15px; }
.lernwoche-ziel-link:hover { color: var(--farbe-gruen-dunkel); }
/* Ziel-Auswahl + Stepper (Einstellungen → Profil → Lernziel) */
.ziel-auswahl { display: inline-flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; }
.ziel-schritt {
width: 24px;
height: 24px;
border: 1px solid var(--farbe-rand);
border-radius: 8px;
background: var(--farbe-hintergrund);
font-size: 0.95rem;
line-height: 1;
cursor: pointer;
transition: border-color 0.12s ease, color 0.12s ease;
}
.ziel-schritt:hover { border-color: var(--farbe-gruen); color: var(--farbe-gruen-dunkel); }
/* ---------- Dashboard: Team-Widget ---------- */
.team-karte {
display: flex;
align-items: center;
gap: 1rem;
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross);
box-shadow: var(--schatten);
padding: 1.4rem 1.5rem;
height: 100%;
}
.team-ikone {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
flex-shrink: 0;
background: var(--farbe-getoent);
color: var(--farbe-gruen-dunkel);
}
.team-ikone svg { width: 22px; height: 22px; }
.team-inhalt { flex: 1; min-width: 0; }
.team-inhalt strong { display: block; font-size: 1.02rem; }
.team-inhalt p { font-size: 0.85rem; color: var(--farbe-text-hell); }
@media (max-width: 560px) {
.team-karte { flex-wrap: wrap; }
/* Text nutzt die erste Zeile (neben dem Icon), der Button bricht
komplett auf eine eigene Zeile um */
.team-inhalt { flex: 1 1 calc(100% - 60px); }
.panel .team-karte .btn { align-self: flex-start; margin-left: 56px; }
}
/* ---------- Dashboard: Kennzahlen-Zeile (Widget "kennzahlen") ---------- */
.kennzahl-zeile {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.1rem;
}
/* Kennzahlen in einer schmalen Spalte: 2×2 statt 4 nebeneinander */
.dash-spalte .kennzahl-zeile { grid-template-columns: repeat(2, 1fr); }
.kennzahl {
display: flex;
align-items: center;
gap: 0.85rem;
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross);
box-shadow: var(--schatten);
padding: 0.95rem 1.1rem;
min-width: 0;
}
.kennzahl-ikone {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
flex-shrink: 0;
background: var(--kz-zart, var(--farbe-gruen-zart));
color: var(--kz-farbe, var(--farbe-gruen-dunkel));
}
.kennzahl-ikone svg { width: 20px; height: 20px; }
.kennzahl-text { min-width: 0; }
.kennzahl-text strong {
display: block;
font-size: 1.3rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
}
.kennzahl-text span {
display: block;
font-size: 0.78rem;
color: var(--farbe-text-hell);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kennzahl--flamme { --kz-zart: #fdf3e7; --kz-farbe: #ea8a2c; }
.kennzahl--lektionen { --kz-zart: var(--farbe-gruen-zart); --kz-farbe: var(--farbe-gruen-dunkel); }
.kennzahl--zertifikate { --kz-zart: #eef2ff; --kz-farbe: #4f46e5; }
.kennzahl--fortschritt { --kz-zart: #e8f4f8; --kz-farbe: #0e7490; }
.kennzahl--aus { --kz-zart: #eef0f3; --kz-farbe: #9aa3b5; }
@media (max-width: 900px) {
.kennzahl-zeile { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
/* Segment-Panel: 2×2 mit Hairlines statt Außenabstand */
.panel-kennzahlen .kennzahl-zeile { grid-template-columns: repeat(2, 1fr); gap: 0; }
.panel-kennzahlen .kennzahl + .kennzahl { border-left: none; }
.panel-kennzahlen .kennzahl:nth-child(even) { border-left: 1px solid #eef1f4; }
.panel-kennzahlen .kennzahl:nth-child(n+3) { border-top: 1px solid #eef1f4; }
/* Auf kleinen Karten lieber zweizeilig (mit Silbentrennung) als abgeschnitten */
.kennzahl-text span {
white-space: normal;
overflow: visible;
text-overflow: clip;
hyphens: auto;
}
}
@media (max-width: 420px) {
.kennzahl { padding: 0.8rem 0.9rem; gap: 0.65rem; }
.panel-kennzahlen .kennzahl { padding: 0.85rem 1rem; }
.kennzahl-text strong { font-size: 1.12rem; }
}
/* ---------- Onboarding-Tour (einmaliges Popup) ---------- */
.onboarding-modal { max-width: 520px; }
.onboarding-kopf h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.3rem; }
.onboarding-kopf p { color: var(--farbe-text-hell); margin-bottom: 1.4rem; }
.onboarding-video { position: relative; aspect-ratio: 16 / 9; margin-bottom: 1.4rem; border-radius: 12px; overflow: hidden; background: #000; }
.onboarding-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.onboarding-punkte { display: flex; flex-direction: column; gap: 1rem; }
.onboarding-punkt { display: flex; gap: 0.9rem; align-items: flex-start; }
.onboarding-punkt .inhalt-icon { flex-shrink: 0; }
.onboarding-punkt strong { font-size: 0.95rem; }
.onboarding-punkt p { font-size: 0.88rem; color: var(--farbe-text-hell); margin-top: 0.1rem; }
/* ---------- Konfetti-Overlay ---------- */
.konfetti-canvas {
position: fixed;
inset: 0;
z-index: 400;
pointer-events: none;
}
/* ---------- Abschnitts-Kopf mit "Alle ansehen"-Link ---------- */
.abschnitt-kopf {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin: 2.4rem 0 1.1rem;
}
.abschnitt-kopf h2 { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.15rem; font-weight: 600; }
.abschnitt-kopf a {
font-size: 0.9rem;
font-weight: 600;
color: var(--farbe-gruen-dunkel);
text-decoration: none;
white-space: nowrap;
}
.abschnitt-kopf a:hover { text-decoration: underline; }
/* ---------- Typ-Icon auf Inhalts-Karten ---------- */
.inhalt-icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 10px;
background: var(--akzent-zart, var(--farbe-gruen-zart));
color: var(--akzent-dunkel, var(--farbe-gruen-dunkel));
}
.inhalt-icon svg { width: 18px; height: 18px; }
/* ---------- Pillen-Filter (Vorlagen nach Kategorie) ---------- */
.filter-pillen {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1.6rem;
}
.pille {
padding: 0.4rem 1.1rem;
border: 1px solid var(--farbe-rand);
border-radius: 999px;
background: var(--farbe-hintergrund);
font-family: inherit;
font-size: 0.9rem;
font-weight: 600;
color: var(--farbe-text-hell);
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.pille:hover { color: var(--farbe-gruen-dunkel); border-color: var(--farbe-gruen); }
.pille.aktiv { color: #fff; background: var(--verlauf); border-color: transparent; }
/* Workshops: Filter-Pillen im passenden Blau-Verlauf */
.akzent-workshops .pille:hover { color: var(--akzent-dunkel); border-color: var(--akzent); }
.akzent-workshops .pille.aktiv {
color: #fff;
background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
border-color: transparent;
}
/* Sprints: Filter-Pillen im Petrol-Akzent */
.akzent-sprints .pille:hover { color: var(--akzent-dunkel); border-color: var(--akzent); }
.akzent-sprints .pille.aktiv {
color: #fff;
background: linear-gradient(135deg, #155e75 0%, #0e7490 100%);
border-color: transparent;
}
/* ---------- Profil-Avatar in der Kopfzeile ---------- */
.app-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: var(--farbe-gruen-zart);
color: var(--farbe-gruen-dunkel);
font-size: 0.85rem;
font-weight: 700;
text-decoration: none;
border: 1px solid var(--farbe-rand);
}
/* Kein eigener Hover am Avatar — der gesamte .profil-knopf hat bereits einen */
.app-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* ---------- Playlist: ein-/ausklappbare Kapitel ---------- */
.kapitel-toggle {
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
padding: 0.8rem 1.2rem;
border: none;
border-bottom: 1px solid var(--farbe-rand);
background: var(--farbe-getoent);
font-family: inherit;
font-size: 0.85rem;
font-weight: 600;
color: var(--farbe-text);
text-align: left;
cursor: pointer;
transition: background 0.15s ease;
}
.kapitel-toggle:hover { background: var(--farbe-gruen-zart); }
.kapitel-pfeil {
display: flex;
color: var(--farbe-text-hell);
transition: transform 0.2s ease;
}
.kapitel-toggle.offen .kapitel-pfeil { transform: rotate(90deg); }
.kapitel-pfeil svg { width: 14px; height: 14px; }
.kapitel-toggle-titel { flex: 1; min-width: 0; }
.kapitel-toggle-meta {
font-size: 0.75rem;
font-weight: 600;
color: var(--farbe-text-hell);
white-space: nowrap;
}
/* Eingeklappter Kapitel-Inhalt: Lektionen zur Hierarchie leicht einrücken */
.kapitel-inhalt .lektion-eintrag { padding-left: 1.4rem; gap: 0.6rem; }
/* Runder Icon-Button (z. B. Download) */
.btn-icon-rund {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border: 1px solid var(--farbe-rand);
border-radius: 50%;
background: var(--farbe-hintergrund);
color: var(--farbe-text-hell);
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.btn-icon-rund:hover {
border-color: var(--akzent, var(--farbe-gruen));
color: var(--akzent-dunkel, var(--farbe-gruen-dunkel));
background: var(--akzent-zart, var(--farbe-gruen-zart));
}
.btn-icon-rund svg { width: 17px; height: 17px; }
.download-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 9px;
background: var(--akzent-zart, var(--farbe-gruen-zart));
color: var(--akzent-dunkel, var(--farbe-gruen-dunkel));
}
.download-icon svg { width: 16px; height: 16px; }
/* Video-Platzhalter mit Icon */
.video-platzhalter-icon { flex-direction: column; gap: 0.7rem; }
.video-platzhalter-icon svg { width: 44px; height: 44px; }
/* ---------- Playlist: Kurs-Player ---------- */
.lektion-dauer {
margin-left: auto;
font-size: 0.8rem;
color: var(--farbe-text-hell);
white-space: nowrap;
flex-shrink: 0;
}
/* ---------- Einstellungs-Seite ---------- */
/* Begrenzter Inhaltsbereich der Einstellungs-Seite: Tab-Leiste und
Karten laufen über DIESELBE Breite (vorher lief die Tab-Leiste über
die volle Container-Breite — das war der Anzeigefehler). */
.einstellungen-bereich { max-width: 760px; }
.einstellungen-karte {
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross);
box-shadow: var(--schatten);
padding: 1.6rem 1.8rem;
margin-bottom: 1.6rem;
}
/* „Konto löschen" bewusst dezent: kein Button, nur ein kleiner Inline-Link. */
.konto-loeschen-link {
background: none;
border: none;
padding: 0;
font: inherit;
font-size: 0.9rem;
font-weight: 600;
color: var(--farbe-fehler);
text-decoration: underline;
cursor: pointer;
}
.konto-loeschen-link:hover { color: var(--farbe-fehler-dunkel, var(--farbe-fehler)); }
/* Paket-Anzeige im Mitgliedschafts-Tab */
.paket-info {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.2rem;
border: 1px solid var(--farbe-rand);
border-radius: var(--radius);
background: var(--farbe-getoent);
}
.paket-info strong { font-size: 1.05rem; }
.paket-info p { margin: 0; }
/* Dezenter Textlink-Button (z. B. Kündigung) */
.link-knopf {
border: none;
background: none;
padding: 0;
font-family: inherit;
font-size: 0.85rem;
color: var(--farbe-text-hell);
text-decoration: underline;
cursor: pointer;
transition: color 0.15s ease;
}
.link-knopf:hover { color: var(--farbe-fehler); }
.link-knopf-rot { color: var(--farbe-fehler); }
.link-knopf-rot:hover { color: var(--farbe-fehler-dunkel); }
/* ---------- Teams (Admin): Eingabe + Knopf, Mitgliederliste ---------- */
/* Eingabefeld/Select mit direkt anschließendem Knopf in einer Zeile */
.eingabe-mit-knopf { display: flex; gap: 0.6rem; align-items: stretch; }
.eingabe-mit-knopf input,
.eingabe-mit-knopf select { flex: 1; min-width: 0; }
.eingabe-mit-knopf .btn { flex-shrink: 0; white-space: nowrap; }
/* Formular zum Hinzufügen eines Mitglieds (E-Mail + Vorname + Knopf) */
.team-mitglied-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.team-mitglied-form input { flex: 1; min-width: 160px; }
.team-mitglied-form .btn { flex-shrink: 0; white-space: nowrap; }
/* Sekundärzeile unter dem Namen in der Mitgliedertabelle */
.tabelle-sub { color: var(--farbe-text-hell); font-size: 0.84rem; }
/* Manager-Schalter in der Mitgliedertabelle */
.schalter-zeile {
display: inline-flex;
align-items: center;
gap: 0.45rem;
cursor: pointer;
font-size: 0.88rem;
}
.schalter-zeile input { width: 16px; height: 16px; accent-color: var(--farbe-gruen); cursor: pointer; }
/* Rechtsbündige Tabellenzelle (Aktionen) — bewusst OHNE display:flex auf
dem
, da das die Spaltenausrichtung gegenüber dem Kopf zerstört. */
.tabelle-rechts { text-align: right; white-space: nowrap; }
/* Mitgliedertabelle im Team-Modal: kompakter, lange E-Mails brechen um */
#team-modal .admin-tabelle th,
#team-modal .admin-tabelle td { padding: 0.55rem 0.6rem; }
#team-modal .tabelle-sub { overflow-wrap: anywhere; }
/* Typ-Icon im Aktivitäts-Log (Mitgliederübersicht des Managers) */
.log-typ {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin-right: 0.5rem;
vertical-align: middle;
border-radius: 7px;
background: var(--akzent-zart, var(--farbe-gruen-zart));
color: var(--akzent-dunkel, var(--farbe-gruen-dunkel));
}
.log-typ svg { width: 15px; height: 15px; }
/* ---------- Team-Dashboard (Manager) ---------- */
/* Horizontale Balkenliste (Ranking / Bereiche) */
.balken-liste { display: flex; flex-direction: column; gap: 0.85rem; }
.balken-liste .balken-zeile { display: flex; flex-direction: column; gap: 0.35rem; }
.balken-zeile-kopf { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.88rem; }
.balken-zeile-name { font-weight: 600; }
.balken-zeile-wert { color: var(--farbe-text-hell); font-weight: 700; flex-shrink: 0; }
.balken-track { height: 9px; border-radius: 999px; background: var(--farbe-getoent); overflow: hidden; }
.balken-fuell { height: 100%; border-radius: 999px; background: var(--farbe-gruen); transition: width 0.4s ease; }
/* Kompakter Fortschrittsbalken in der Mitarbeiter-Tabelle */
.fortschritt-mini { display: flex; align-items: center; gap: 0.6rem; min-width: 140px; }
.fortschritt-mini .fortschritt-balken { flex: 1; }
.fortschritt-mini span { font-size: 0.82rem; font-weight: 700; color: var(--farbe-text-hell); white-space: nowrap; }
.kuendigung-fuss {
display: flex;
justify-content: flex-end;
margin-top: 1.4rem;
}
.paket-info .btn { flex-shrink: 0; }
@media (max-width: 640px) {
.paket-info { flex-wrap: wrap; }
}
.einstellungen-karte h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.1rem; }
.profilbild-zeile { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.2rem; }
.profilbild-vorschau {
width: 72px;
height: 72px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--farbe-gruen-zart);
color: var(--farbe-gruen-dunkel);
font-size: 1.5rem;
font-weight: 700;
border: 1px solid var(--farbe-rand);
}
.profilbild-vorschau img { width: 100%; height: 100%; object-fit: cover; }
.kuendigung-hinweis {
background: var(--farbe-warnung-zart);
color: var(--farbe-warnung);
border: 1px solid var(--farbe-warnung-rand);
border-radius: var(--radius);
padding: 0.7rem 1rem;
font-size: 0.92rem;
margin-top: 1rem;
}
/* ---------- Admin-Bereich: Tablet & Mobil ---------- */
@media (max-width: 900px) {
.admin-body { flex-direction: column; }
/* Sidebar wird zur horizontalen Leiste oben */
.admin-sidebar {
position: sticky;
width: 100%;
flex-direction: row;
align-items: center;
gap: 0.6rem;
padding: 0.7rem 1rem;
border-right: none;
border-bottom: 1px solid var(--farbe-rand);
overflow-x: auto;
overflow-y: hidden;
}
.admin-logo { margin: 0 0.6rem 0 0; white-space: nowrap; }
.admin-navigation { flex-direction: row; }
.admin-nav-gruppe { display: none; } /* horizontale Leiste: keine Gruppen-Titel */
.admin-nav-link { white-space: nowrap; padding: 0.45rem 0.7rem; }
.admin-sidebar-fuss {
margin-top: 0;
padding-top: 0;
border-top: none;
flex-direction: row;
}
.admin-sidebar-nutzer { display: none; }
.admin-main { margin-left: 0; padding: 1.4rem 1.2rem 3rem; }
.formular-zeile { grid-template-columns: 1fr; }
}
/* ---------- Mobil ---------- */
@media (max-width: 640px) {
.hero { padding: 4.5rem 0 4rem; }
.navigation { gap: 0.9rem; }
.nav-link,
.nav-gruppe { display: none; } /* Auf Mobil nur Logo + Anmelden-Button */
.abschnitt { padding: 4rem 0; }
.bewertung-karte { flex-basis: 100%; } /* eine Karte pro Ansicht */
.ueber-inhalt { flex-direction: column; gap: 2rem; text-align: center; }
/* Spalte gestapelt: Portrait nicht mehr per Flex-Basis (% der Höhe), sondern zentriert */
.bild-platzhalter-portrait { flex-basis: auto; width: min(100%, 340px); }
.ueber-text h2, .kicker-links { text-align: center; }
.fusszeile-inhalt { justify-content: center; text-align: center; }
}
/* ============================================================
Sprints (Kern-Feature)
Übersicht im Kurs-Layout (Kategorie-Pillen + Karten) · Detail-Timeline
============================================================ */
/* Meta-Pillen auf den Karten (Sprints/Kurse/Workshops): schlichte
weiße Pillen, nur mit Rahmen in der Bereichs-Akzentfarbe — keine Füllung. */
.inhalt-pillen {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: auto;
padding-top: 0.7rem;
}
.inhalt-pille {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.7rem;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 600;
background: var(--farbe-hintergrund);
color: var(--farbe-text-hell);
border: 1px solid var(--akzent, var(--farbe-gruen));
}
.inhalt-pille svg { width: 14px; height: 14px; color: var(--akzent, var(--farbe-gruen)); }
/* „Live"-Pille: roter Akzent (Rahmen + Text), roter Puls-Punkt */
/* Kleiner, selbst ausblendender Hinweis-Toast (z. B. „Link kopiert") */
.app-hinweis {
position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 14px);
z-index: 1200; padding: 0.7rem 1.2rem; border-radius: 999px;
background: var(--farbe-text, #1a1a2e); color: #fff;
font-size: 0.88rem; font-weight: 600; box-shadow: var(--schatten);
opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
}
.app-hinweis.sichtbar { opacity: 1; transform: translate(-50%, 0); }
/* ---------- Timeline (Prozess-Detail) ---------- */
.timeline { margin-top: 0.4rem; }
.timeline-schritt {
display: grid;
grid-template-columns: 40px 1fr;
gap: 1.1rem;
align-items: stretch;
}
.timeline-spalte {
display: flex;
flex-direction: column;
align-items: center;
}
.timeline-marker {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 50%;
font-weight: 900;
font-size: 0.95rem;
background: var(--farbe-hintergrund);
border: 2px solid var(--farbe-rand);
color: var(--farbe-text-hell);
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.timeline-marker svg { width: 20px; height: 20px; }
.timeline-linie {
flex: 1;
width: 2px;
min-height: 16px;
background: var(--farbe-rand);
margin: 6px 0;
}
.timeline-schritt:last-child .timeline-linie { display: none; }
.timeline-karte {
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross);
box-shadow: var(--schatten);
padding: 1.3rem 1.5rem;
margin-bottom: 1.4rem;
min-width: 0;
}
.timeline-karte-kopf {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.timeline-schritt-titel { font-size: 1.1rem; font-weight: 700; }
.timeline-schritt-dauer {
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex-shrink: 0;
font-size: 0.82rem;
color: var(--farbe-text-hell);
white-space: nowrap;
}
.timeline-schritt-dauer svg { width: 14px; height: 14px; }
.timeline-schritt-text { color: var(--farbe-text-hell); margin-top: 0.3rem; }
/* Video sitzt zuoberst in der Karte; Titel/Text folgen darunter (wie bei Kurs-Lektionen) */
.timeline-video { margin: 0 0 1.1rem; }
.timeline-aktionen { margin-top: 1.1rem; }
/* Zustände der Timeline-Schritte */
.timeline-schritt.aktiv .timeline-marker {
border-color: var(--akzent, var(--farbe-gruen));
color: var(--akzent-dunkel, var(--farbe-gruen-dunkel));
box-shadow: 0 0 0 4px var(--akzent-zart, var(--farbe-gruen-zart));
}
.timeline-schritt.aktiv .timeline-karte { border-color: var(--akzent, var(--farbe-gruen)); }
/* Kurzes Hervorheben beim Sprung per Such-/Teil-Link (#s) */
.timeline-schritt-hervor .timeline-karte {
border-color: var(--akzent, var(--farbe-gruen));
box-shadow: 0 0 0 4px var(--akzent-zart, var(--farbe-gruen-zart));
transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.timeline-schritt.abgeschlossen .timeline-marker {
background: var(--akzent, var(--farbe-gruen));
border-color: var(--akzent, var(--farbe-gruen));
color: #fff; /* weißer Haken auf dem Akzent */
}
.timeline-schritt.abgeschlossen .timeline-linie { background: var(--akzent, var(--farbe-gruen)); }
/* Erledigt-Button im abgeschlossenen Zustand */
.timeline-aktionen .btn.erledigt {
background: var(--akzent-zart, var(--farbe-gruen-zart));
color: var(--akzent-dunkel, var(--farbe-gruen-dunkel));
border-color: transparent;
cursor: default;
}
/* ---------- Sprints: Primär-Buttons & Links in der Akzentfarbe ----------
Innerhalb von .akzent-sprints nutzen Buttons Pink mit dunkler Schrift. */
.akzent-sprints .btn-primaer {
background: var(--akzent);
color: var(--farbe-text);
box-shadow: 0 2px 8px rgba(199, 93, 138, 0.25);
}
.akzent-sprints .btn-primaer:hover {
background: var(--akzent-dunkel);
color: var(--farbe-text);
box-shadow: 0 4px 12px rgba(199, 93, 138, 0.28);
}
.akzent-sprints .abschnitt-kopf a { color: var(--akzent-dunkel); }
/* Workshops: Primär-Button (z. B. „Zum Live-Workshop") in Blau */
.akzent-workshops .btn-primaer {
background: var(--akzent);
color: #fff;
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}
.akzent-workshops .btn-primaer:hover {
background: var(--akzent-dunkel);
color: #fff;
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.28);
}
/* Button folgt direkt unter den Pillen (die schon `margin-top:auto` haben) */
.akzent-workshops .inhalt-karte-fuss { margin-top: 0; padding-top: 0.9rem; }
.akzent-workshops .inhalt-karte-fuss .btn-klein { padding: 0.5rem 1.15rem; }
/* Fortschrittsbalken in passendem Petrol-Verlauf (auf der hellen Kopf-Karte
sichtbare Spur statt der für dunkle Held-Karten gedachten Weiß-Transparenz) */
.akzent-sprints .seiten-kopf .fortschritt-balken { background: var(--farbe-rand); }
.akzent-sprints .fortschritt-fuellung {
background: linear-gradient(135deg, #155e75 0%, #67b6cc 100%);
}
/* Video-Platzhalter im selben Verlauf wie die Karten-Thumbnails */
.akzent-sprints .video-platzhalter {
border-color: #bfdde8;
background: linear-gradient(150deg, var(--akzent-zart, var(--farbe-gruen-zart)) 0%, var(--farbe-hintergrund) 145%);
color: #5b9db3;
}
/* Aktions-Icons (Timeline) in Petrol-Tönen */
.akzent-sprints .aktion-icon:hover:not(:disabled) {
color: var(--akzent-dunkel);
background: var(--akzent-zart);
}
.akzent-sprints .aktion-like.aktiv {
color: var(--akzent-dunkel);
border-color: var(--akzent);
background: var(--akzent-zart);
}
.akzent-sprints .aktion-check.aktiv,
.akzent-sprints .aktion-check.aktiv:hover {
color: #fff;
background: var(--akzent);
border-color: var(--akzent);
}
/* ---------- Mobil ---------- */
@media (max-width: 640px) {
.timeline-schritt { grid-template-columns: 34px 1fr; gap: 0.8rem; }
.timeline-marker { width: 34px; height: 34px; font-size: 0.85rem; }
}
/* ---------- Admin: Referrals (Statistik-Diagramme + Ranking) ---------- */
.referral-statistik-raster {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.referral-statistik-raster h3 {
margin: 0 0 1rem;
font-size: 0.95rem;
font-weight: 700;
}
.balken-diagramm { display: flex; flex-direction: column; gap: 0.7rem; }
.balken-diagramm .balken-zeile {
display: grid;
grid-template-columns: 130px 1fr 46px;
align-items: center;
gap: 0.8rem;
}
.balken-label {
font-size: 0.82rem;
color: var(--farbe-text-hell);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.balken-spur {
height: 10px;
border-radius: 5px;
background: var(--farbe-getoent);
overflow: hidden;
}
.balken-fuellung {
height: 100%;
border-radius: 5px;
background: var(--verlauf);
transition: width 0.3s ease;
}
.balken-wert {
font-size: 0.82rem;
font-weight: 700;
text-align: right;
}
/* Top-5-Ranking der Referral-Links */
.ranking-liste { display: flex; flex-direction: column; gap: 0.7rem; }
.ranking-zeile {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.8rem 1.1rem;
border: 1px solid var(--farbe-rand);
border-radius: var(--radius);
}
.ranking-platz {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: 50%;
background: var(--farbe-getoent);
color: var(--farbe-text-hell);
font-weight: 800;
font-size: 0.9rem;
}
.ranking-zeile:nth-child(1) .ranking-platz { background: var(--verlauf); color: #fff; }
.ranking-zeile:nth-child(2) .ranking-platz { background: var(--farbe-gruen-zart); color: var(--farbe-gruen-dunkel); }
.ranking-zeile:nth-child(3) .ranking-platz { background: var(--farbe-gold); color: #fff; }
.ranking-info { flex: 1; min-width: 0; }
.ranking-bezeichnung { font-weight: 700; }
.ranking-werte {
display: flex;
flex-wrap: wrap;
gap: 0.3rem 1.2rem;
margin-top: 0.2rem;
font-size: 0.8rem;
color: var(--farbe-text-hell);
}
@media (max-width: 720px) {
.referral-statistik-raster { grid-template-columns: 1fr; gap: 1.4rem; }
.balken-zeile { grid-template-columns: 90px 1fr 40px; gap: 0.5rem; }
}
/* ============================================================
„Für Teams" — Hinweis auf der Landing Page + Angebotsseite
============================================================ */
/* Hinweis-Band unter den Paketen (Landing Page) */
.teams-hinweis {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
margin: 2.5rem auto 0;
max-width: 760px;
padding: 1.6rem 2rem;
background: linear-gradient(180deg, #ffffff 0%, #fbfcfb 100%);
border: 1px solid var(--farbe-rand);
border-radius: 22px;
box-shadow: 0 12px 32px -18px rgba(16,24,40,0.18);
}
.teams-hinweis strong { font-size: 1.05rem; }
.teams-hinweis p { margin: 0.2rem 0 0; color: var(--farbe-text-hell); font-size: 0.92rem; }
/* Zweispaltiges Layout: Formular links, Angebots-Vorschau rechts */
.teams-raster {
display: grid;
grid-template-columns: 1fr 380px;
gap: 2rem;
align-items: start;
}
.teams-formular-karte,
.teams-vorschau {
background: #fff;
border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross);
padding: 1.8rem;
box-shadow: var(--schatten);
}
.teams-vorschau { position: sticky; top: 1.5rem; }
.teams-abschnitt-titel {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--farbe-text-hell);
margin: 1.6rem 0 0.8rem;
}
.teams-abschnitt-titel:first-child { margin-top: 0; }
/* Vorschau-Zeilen (Preis, Rabatt, Steuer) */
.teams-zeile {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.45rem 0;
font-size: 0.95rem;
color: var(--farbe-text-hell);
}
.teams-zeile.rabatt { color: var(--farbe-gruen-dunkel); font-weight: 600; }
.teams-trenner { border: none; border-top: 1px solid var(--farbe-rand); margin: 0.6rem 0; }
.teams-summe {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
margin-top: 0.4rem;
font-size: 1.2rem;
font-weight: 800;
}
.teams-rabatt-badge {
display: inline-block;
margin-left: 0.5rem;
padding: 0.1rem 0.55rem;
border-radius: 999px;
background: var(--farbe-gruen);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
vertical-align: middle;
}
.teams-steuer-hinweis { margin-top: 0.8rem; font-size: 0.82rem; color: var(--farbe-text-hell); }
/* Erfolgs-Zustand nach dem Erstellen */
.teams-erfolg {
text-align: center;
padding: 2.5rem 1.8rem;
}
.teams-erfolg-haken {
width: 64px; height: 64px;
margin: 0 auto 1.2rem;
border-radius: 50%;
background: var(--farbe-gruen);
color: #fff;
display: flex; align-items: center; justify-content: center;
}
.teams-erfolg-haken svg { width: 32px; height: 32px; }
/* Firmenvorteile (/teams): EIN helles Panel mit 2×2-Segmenten und
Hairline-Trennern statt vier Einzelkarten (die frühere dunkle
Tinte-Variante war dem Inhaber zu dunkel, 07/2026) */
.tv-panel {
position: relative; overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross);
margin-top: 2.6rem;
}
.tv-zelle {
display: flex; align-items: flex-start; gap: 1.15rem;
padding: 2.3rem 2.4rem;
transition: background 0.25s ease;
}
.tv-zelle:hover { background: var(--farbe-getoent); }
/* Hairlines: rechts an der linken Spalte, unten an der oberen Zeile */
.tv-zelle:nth-child(odd) { border-right: 1px solid var(--farbe-rand); }
.tv-zelle:nth-child(-n+2) { border-bottom: 1px solid var(--farbe-rand); }
.tv-icon {
flex-shrink: 0;
width: 46px; height: 46px;
border-radius: 50%;
border: 1px solid var(--farbe-erfolg-rand);
background: var(--farbe-gruen-zart);
color: var(--farbe-gruen);
display: flex; align-items: center; justify-content: center;
transition: border-color 0.25s ease, background 0.25s ease;
}
.tv-zelle:hover .tv-icon { border-color: var(--farbe-gruen); }
.tv-icon svg { width: 21px; height: 21px; }
.tv-text h3 { font-size: 1.08rem; font-weight: 800; letter-spacing: -0.01em; margin: 0.55rem 0 0.45rem; }
.tv-text p { margin: 0; color: var(--farbe-text-hell); font-size: 0.93rem; line-height: 1.65; }
@media (max-width: 640px) {
.tv-panel { grid-template-columns: 1fr; }
.tv-zelle { padding: 1.7rem 1.5rem; }
.tv-zelle:nth-child(odd) { border-right: 0; }
.tv-zelle:not(:last-child) { border-bottom: 1px solid var(--farbe-rand); }
}
@media (max-width: 860px) {
.teams-raster { grid-template-columns: 1fr; }
.teams-vorschau { position: static; }
}
/* ====================================================================== */
/* Dashboard 2.0 — anpassbares Widget-Raster + Bearbeitungsmodus (Admin) */
/* ====================================================================== */
/* "Dashboard bearbeiten"-Knopf in der Begrüßungszeile (nur Admin) */
.dash-bearbeiten-knopf {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.dash-bearbeiten-knopf svg { width: 16px; height: 16px; }
/* Das Widget-Raster: zwei gleich breite Spalten, 100%-Widgets spannen
beide. Jede Karte ist ein eigenständiges Widget. */
/* Vertikaler Strom: voll-Widgets über die ganze Breite, dazwischen
Zwei-Spalten-Blöcke (Hauptspalte breit + Seitenschiene schmal).
Jede Karte hat ihre NATÜRLICHE Höhe — kein Strecken, keine Lücken. */
.dashboard-raster {
display: flex;
flex-direction: column;
gap: 1.4rem;
}
.dash-widget { min-width: 0; display: flex; flex-direction: column; }
.dash-widget-koerper { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* Zwei-Spalten-Block: Hauptspalte ~62 %, Seitenschiene ~38 % */
.dash-spalten {
display: grid;
grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
gap: 1.4rem;
align-items: start;
}
/* Eine Seite leer (kein Premium/Team/…) → die andere volle Breite */
.dash-spalten--einspaltig { grid-template-columns: 1fr; }
.dash-spalten--einspaltig .dash-spalte:empty { display: none; }
.dash-spalte {
display: flex;
flex-direction: column;
gap: 1.4rem;
min-width: 0;
}
@media (max-width: 980px) {
.dash-spalten { grid-template-columns: 1fr; }
}
/* Abschnitts-Kopf innerhalb eines Widgets sitzt direkt oben ohne den
großen Standard-Abstand */
.dash-widget-koerper > .abschnitt-kopf:first-child { margin-top: 0; }
.abschnitt-kopf h2 svg { width: 18px; height: 18px; color: var(--akzent, var(--farbe-gruen-dunkel)); }
.abschnitt-kopf.akzent-kurse a,
.abschnitt-kopf.akzent-workshops a,
.abschnitt-kopf.akzent-sprints a,
.abschnitt-kopf.akzent-vorlagen a { color: var(--akzent-dunkel); }
/* ---------- Bearbeitungsmodus ---------- */
.dashboard-raster.bearbeitung .dash-widget {
position: relative;
border: 1px dashed var(--farbe-rand);
border-radius: var(--radius-gross);
padding: 0.5rem;
background: var(--farbe-hintergrund);
cursor: grab;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dashboard-raster.bearbeitung .dash-widget:hover {
border-color: var(--farbe-gruen);
box-shadow: var(--schatten);
}
.dashboard-raster.bearbeitung .dash-widget.zieht {
opacity: 0.45;
border-color: var(--farbe-gruen);
border-style: solid;
}
/* Im Bearbeitungsmodus keine Interaktion mit dem Widget-Inhalt */
.dashboard-raster.bearbeitung .dash-widget-koerper { pointer-events: none; }
.dash-widget--aus { opacity: 0.55; }
.dash-widget--aus .dash-widget-koerper { filter: grayscale(0.7); }
/* Werkzeugleiste über jedem Widget */
.dash-werkzeug {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.2rem 0.3rem 0.6rem;
margin-bottom: 0.4rem;
border-bottom: 1px solid var(--farbe-rand);
}
.dash-werkzeug-zeile {
display: flex;
align-items: center;
gap: 0.6rem;
}
.dash-griff {
display: flex;
color: var(--farbe-text-hell);
cursor: grab;
}
.dash-griff svg { width: 18px; height: 18px; }
.dash-widget-name {
font-size: 0.85rem;
font-weight: 700;
color: var(--farbe-text);
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dash-werkzeug-knoepfe { display: flex; gap: 0.4rem; flex-shrink: 0; }
.dash-wz-knopf {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.3rem 0.5rem;
border: 1px solid var(--farbe-rand);
border-radius: 8px;
background: var(--farbe-hintergrund);
color: var(--farbe-text);
font-size: 0.74rem;
font-weight: 700;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease;
}
.dash-wz-knopf:hover { background: var(--farbe-getoent); border-color: var(--farbe-gruen); }
.dash-wz-knopf svg { width: 15px; height: 15px; }
.dash-wz-knopf.aus { color: var(--farbe-text-hell); }
/* Platzhalter für leere/ausgeblendete Widgets */
.dash-leer-vorschau {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 1.6rem 1.2rem;
border-radius: var(--radius);
background: var(--farbe-getoent);
text-align: center;
}
.dash-leer-vorschau strong { font-size: 0.95rem; }
.dash-leer-vorschau span { font-size: 0.82rem; color: var(--farbe-text-hell); }
/* Sticky Bearbeitungsleiste am unteren Rand */
.dash-editleiste {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 350;
background: var(--farbe-gruen-tinte, #0e2a22);
color: #fff;
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
}
.dash-editleiste-inhalt {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 0;
flex-wrap: wrap;
}
.dash-editleiste-hinweis { font-size: 0.88rem; color: rgba(255, 255, 255, 0.82); }
.dash-editleiste-hinweis strong { color: #fff; }
.dash-editleiste-knoepfe { display: flex; gap: 0.6rem; flex-shrink: 0; }
/* Platz schaffen, damit die Leiste nichts überdeckt */
body.dash-bearbeitung-aktiv .app-main { padding-bottom: 6rem; }
/* ---------- Widget: Nachricht vom Team ---------- */
.nachricht-karte {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.1rem 1.3rem;
border-radius: var(--radius-gross);
border: 1px solid var(--farbe-rand);
border-left: 4px solid var(--akzent, var(--farbe-gruen));
background: var(--farbe-hintergrund);
box-shadow: var(--schatten);
}
.nachricht-typ-info { --akzent: #4f46e5; --akzent-zart: #eef2ff; }
.nachricht-typ-neu { --akzent: var(--farbe-gruen); --akzent-zart: var(--farbe-gruen-zart); }
.nachricht-typ-wichtig { --akzent: #c2410c; --akzent-zart: #fff1ea; }
.nachricht-ikone {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 10px;
background: var(--akzent-zart, var(--farbe-gruen-zart));
color: var(--akzent, var(--farbe-gruen-dunkel));
}
.nachricht-ikone svg { width: 20px; height: 20px; }
.nachricht-text { flex: 1; min-width: 0; }
.nachricht-kopf {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
margin-bottom: 0.25rem;
}
.nachricht-kopf strong { font-size: 1rem; }
.nachricht-badge {
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.12rem 0.5rem;
border-radius: 999px;
background: var(--akzent-zart, var(--farbe-gruen-zart));
color: var(--akzent, var(--farbe-gruen-dunkel));
}
.nachricht-zeit { font-size: 0.78rem; color: var(--farbe-text-hell); margin-left: auto; }
.nachricht-text p { font-size: 0.92rem; color: var(--farbe-text-hell); line-height: 1.5; }
.nachricht-schliessen {
display: flex;
flex-shrink: 0;
padding: 0.3rem;
border: none;
background: transparent;
color: var(--farbe-text-hell);
cursor: pointer;
border-radius: 6px;
}
.nachricht-schliessen:hover { background: var(--farbe-getoent); color: var(--farbe-text); }
.nachricht-schliessen svg { width: 18px; height: 18px; }
/* Nachrichten-Editor (Admin im Bearbeitungsmodus) */
.nachricht-editor {
padding: 1.2rem 1.3rem;
border-radius: var(--radius-gross);
border: 1px solid var(--farbe-rand);
background: var(--farbe-hintergrund);
box-shadow: var(--schatten);
pointer-events: auto; /* trotz Bearbeitungsmodus bedienbar */
}
.dashboard-raster.bearbeitung .dash-widget[data-key="nachricht"] .dash-widget-koerper { pointer-events: auto; }
.nachricht-editor-kopf {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.9rem;
font-size: 0.95rem;
}
.nachricht-editor-kopf svg { width: 18px; height: 18px; color: var(--farbe-gruen-dunkel); }
.nachricht-editor-zeile { display: flex; gap: 0.6rem; margin-bottom: 0.6rem; }
.nachricht-feld {
width: 100%;
padding: 0.6rem 0.75rem;
border: 1px solid var(--farbe-rand);
border-radius: 8px;
font: inherit;
background: var(--farbe-hintergrund);
color: var(--farbe-text);
}
.nachricht-feld:focus { outline: none; border-color: var(--farbe-gruen); }
#nachricht-typ { width: auto; min-width: 110px; flex-shrink: 0; }
textarea.nachricht-feld { resize: vertical; margin-bottom: 0.8rem; line-height: 1.5; }
.nachricht-editor-fuss { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
/* ---------- Widget: Neue Teilinhalte ---------- */
.teilinhalt-liste { display: flex; flex-direction: column; gap: 0.55rem; }
.teilinhalt-zeile {
display: flex;
align-items: center;
gap: 0.9rem;
text-decoration: none;
color: inherit;
padding: 0.7rem 0.9rem;
border: 1px solid var(--farbe-rand);
border-radius: var(--radius);
background: var(--farbe-hintergrund);
transition: border-color 0.15s ease, transform 0.15s ease;
}
.teilinhalt-zeile:hover { border-color: var(--akzent, var(--farbe-gruen)); transform: translateX(2px); }
.teilinhalt-ikone {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 9px;
background: var(--akzent-zart, var(--farbe-gruen-zart));
color: var(--akzent, var(--farbe-gruen-dunkel));
}
.teilinhalt-ikone svg { width: 18px; height: 18px; }
.teilinhalt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.teilinhalt-text strong {
display: block;
font-size: 0.92rem;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* EINE Meta-Zeile unter dem Titel: „Typ · Kontext" — Typ im Bereichs-Akzent */
.teilinhalt-meta {
display: block;
font-size: 0.8rem;
line-height: 1.35;
color: var(--farbe-text-hell);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.teilinhalt-meta b { font-weight: 600; color: var(--akzent-dunkel, var(--farbe-gruen-dunkel)); }
.teilinhalt-zeit { font-size: 0.76rem; color: var(--farbe-text-hell); flex-shrink: 0; white-space: nowrap; }
/* ---------- Widget: Zertifikate ---------- */
.zertifikat-liste { display: flex; flex-direction: column; gap: 0.55rem; }
.zertifikat-zeile {
display: flex;
align-items: center;
gap: 0.9rem;
text-decoration: none;
color: inherit;
padding: 0.7rem 0.9rem;
border: 1px solid var(--farbe-rand);
border-radius: var(--radius);
background: var(--farbe-hintergrund);
transition: border-color 0.15s ease;
}
.zertifikat-zeile:hover { border-color: #b8860b; }
.zertifikat-siegel {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 9px;
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #b45309;
}
.zertifikat-siegel svg { width: 20px; height: 20px; }
.zertifikat-text { flex: 1; min-width: 0; }
.zertifikat-text strong {
display: block;
font-size: 0.92rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.zertifikat-text span { font-size: 0.8rem; color: var(--farbe-text-hell); }
.zertifikat-pdf {
flex-shrink: 0;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.04em;
padding: 0.25rem 0.55rem;
border-radius: 6px;
background: var(--farbe-getoent);
color: var(--farbe-text);
}
/* ---------- Mobil: alles einspaltig ---------- */
@media (max-width: 760px) {
.dashboard-raster { gap: 1.1rem; }
.dash-spalten, .dash-spalte { gap: 1.1rem; }
.dash-editleiste-inhalt { justify-content: center; text-align: center; }
.nachricht-editor-zeile { flex-direction: column; }
#nachricht-typ { width: 100%; }
}
/* ---------- Dashboard 2.0: Anzahl-/Bezeichnung-/Icon-Steuerung ---------- */
.dash-wz-anzahl {
display: inline-flex;
align-items: center;
border: 1px solid var(--farbe-rand);
border-radius: 8px;
overflow: hidden;
background: var(--farbe-hintergrund);
}
.dash-wz-anzahl button {
border: none;
background: transparent;
color: var(--farbe-text);
font-size: 1rem;
font-weight: 700;
line-height: 1;
padding: 0.28rem 0.55rem;
cursor: pointer;
}
.dash-wz-anzahl button:hover { background: var(--farbe-getoent); }
.dash-wz-anzahl-wert {
min-width: 1.4rem;
text-align: center;
font-size: 0.78rem;
font-weight: 800;
border-left: 1px solid var(--farbe-rand);
border-right: 1px solid var(--farbe-rand);
padding: 0.28rem 0;
}
/* Zweite Zeile der Werkzeugleiste: Bezeichnung + Icon-Auswahl */
.dash-wz-kopf {
display: flex;
align-items: center;
gap: 0.5rem;
}
.dash-wz-icon-vorschau {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 8px;
background: var(--farbe-getoent);
color: var(--farbe-gruen-dunkel);
}
.dash-wz-icon-vorschau svg { width: 17px; height: 17px; }
.dash-wz-titel {
flex: 1;
min-width: 0;
padding: 0.4rem 0.6rem;
border: 1px solid var(--farbe-rand);
border-radius: 8px;
font: inherit;
font-size: 0.85rem;
background: var(--farbe-hintergrund);
color: var(--farbe-text);
}
.dash-wz-titel:focus { outline: none; border-color: var(--farbe-gruen); }
.dash-wz-icon {
flex-shrink: 0;
padding: 0.4rem 0.5rem;
border: 1px solid var(--farbe-rand);
border-radius: 8px;
font: inherit;
font-size: 0.82rem;
background: var(--farbe-hintergrund);
color: var(--farbe-text);
cursor: pointer;
}
/* Überschrift mit Icon + Text (eigene Bezeichnung) */
/* Abschnitts-Icon in einer getönten Kachel — einheitliche Optik über
alle Dashboard-Widgets, Farbe folgt dem Bereichs-Akzent */
.abschnitt-kopf h2 .kopf-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 9px;
flex-shrink: 0;
background: var(--akzent-zart, var(--farbe-gruen-zart));
color: var(--akzent-dunkel, var(--farbe-gruen-dunkel));
}
.abschnitt-kopf h2 .kopf-icon svg { width: 16px; height: 16px; color: inherit; }
.abschnitt-kopf h2 .kopf-icon:empty { display: none; }
/* ---------- Dashboard-Karten-Slider mit Pfeilen (Zuletzt hinzugefügt / Empfohlen) ---------- */
/* Eigener Klassen-Präfix dash-slider*, damit es NICHT mit dem
Bewertungs-Slider (.slider) der Landing-Page kollidiert. */
/* Überschrift + Pfeile in einer Zeile, darunter die Karten über volle Breite */
.dash-slider { display: block; }
.dash-widget-koerper .dash-slider > .abschnitt-kopf {
align-items: center; /* Pfeile sauber auf Höhe der Überschrift */
margin-top: 0; /* gleicher oberer Abstand wie andere Widgets */
}
.dash-slider-pfeile { display: flex; gap: 0.4rem; flex-shrink: 0; }
.dash-slider-spur {
display: flex;
gap: 1.1rem;
overflow-x: auto;
scroll-snap-type: x proximity;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Pfeile statt Scrollbalken */
}
.dash-slider-spur::-webkit-scrollbar { display: none; }
/* Kartenbreite: --spalten Karten exakt nebeneinander (voll⇒3, haupt⇒2, seite⇒1) */
.dash-slider-spur > .inhalt-karte {
flex: 0 0 calc((100% - (var(--spalten, 3) - 1) * 1.1rem) / var(--spalten, 3));
scroll-snap-align: start;
}
/* Karten gleicher Höhe: Meta-Pille/Fortschritt sitzt IMMER an der
Unterkante — Karten mit wenig Text wirken trotzdem komponiert */
.dash-slider-spur .inhalt-pillen,
.dash-slider-spur .inhalt-karte-fuss { margin-top: auto; }
.dash-slider-pfeil {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid var(--farbe-rand);
background: var(--farbe-hintergrund);
color: var(--farbe-text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}
.dash-slider-pfeil:hover:not(:disabled) { border-color: var(--farbe-gruen); color: var(--farbe-gruen-dunkel); }
.dash-slider-pfeil:disabled { opacity: 0.3; cursor: default; }
.dash-slider-pfeil svg { width: 17px; height: 17px; }
/* Passen alle Karten ohne Überlauf, werden die Pfeile ausgeblendet */
.dash-slider--ohne .dash-slider-pfeile { display: none; }
/* Im Bearbeitungsmodus kein Slider-Scroll (Drag soll greifen) */
.dashboard-raster.bearbeitung .dash-slider-spur { overflow-x: hidden; }
@media (max-width: 760px) {
.dash-slider-spur { --spalten: 1 !important; }
}
/* ---------- Kleinkorrektur: Abstand des Buttons im Hero ---------- */
.held-inhalt .btn { margin-top: 1.4rem; }
/* ====================================================================== */
/* Admin: Seiten-Inhalte-Editor (Landing, Login, …) */
/* ====================================================================== */
/* Listen-Editor (Bewertungen, FAQ) */
.lp-liste { display: flex; flex-direction: column; gap: 0.9rem; }
/* Landing-Page: aus dem Foto-Platzhalter wird ein echtes Bild */
.bild-platzhalter.bild-platzhalter-gefuellt {
padding: 0;
border: none;
background: none;
overflow: hidden;
}
.bild-platzhalter .lp-foto {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
display: block;
}
/* ====================================================================== */
/* Admin: Navigations-Editor (admin-navigation.html) */
/* ====================================================================== */
/* ============================================================
Abo-Status (Einstellungen → Mitgliedschaft)
============================================================ */
.abo-status-box {
margin-top: 1rem;
padding: 1rem 1.2rem;
border: 1px solid var(--farbe-rand);
border-left: 4px solid var(--farbe-gruen);
border-radius: var(--radius);
background: var(--farbe-getoent);
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.abo-status-box .abo-status-zeile { font-size: 1.05rem; }
.abo-status-box.abo-status-gekuendigt {
border-left-color: var(--farbe-warnung, #8a5a1d);
background: #fbf3e7;
}
.checkout-knopf:disabled { opacity: 0.5; cursor: not-allowed; }
/* Roter "Gefahr"-Button (z. B. Kündigung bestätigen) */
.btn-gefahr {
background: var(--farbe-fehler);
color: #fff;
border: 1px solid var(--farbe-fehler);
}
.btn-gefahr:hover { background: var(--farbe-fehler-dunkel); border-color: var(--farbe-fehler-dunkel); }
/* Upgrade-Modal: Preis-Gegenüberstellung */
.upgrade-preis-box {
margin: 1.2rem 0;
padding: 1.1rem 1.3rem;
border: 1px solid var(--farbe-rand);
border-radius: var(--radius);
background: var(--farbe-getoent);
}
.upgrade-preis-zeile { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; }
.upgrade-preis-zeile:last-child { margin-bottom: 0; }
.upgrade-alt { text-decoration: line-through; color: var(--farbe-text-hell); }
.upgrade-rabatt { color: var(--farbe-gruen); font-weight: 700; }
.upgrade-final { font-size: 1.35rem; font-weight: 900; }
.upgrade-badge {
display: inline-block; background: var(--farbe-gruen); color: #fff;
font-size: 0.78rem; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 999px;
}
/* ============================================================
Kompakte Action-Icon-Buttons unter dem Video
(Like/Dislike/Abschließen/Nächste) — Kurse & Sprints
============================================================ */
.lektion-kopf-zeile {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin: 1.3rem 0 0.4rem;
}
.lektion-kopf-zeile .lektion-detail-titel { margin: 0; }
.aktion-icons { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
/* Sprints: Icon-Zeile rechtsbündig unter dem Schritt-Video */
.timeline-aktionen.aktion-icons { justify-content: flex-end; margin-top: 0.9rem; }
.aktion-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid transparent; /* dezent: standardmäßig randlos */
border-radius: 50%; /* komplett rund */
background: transparent;
color: var(--farbe-text-hell);
opacity: 0.65; /* dezenter im Ruhezustand */
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.aktion-icon svg { width: 18px; height: 18px; }
.aktion-icon:hover:not(:disabled) {
color: var(--farbe-text);
background: var(--farbe-getoent);
opacity: 1;
}
.aktion-icon.aktiv { opacity: 1; } /* aktive Bewertung/Status voll sichtbar */
.aktion-icon:disabled { cursor: default; }
/* Like aktiv → dezentes Grün (leicht gefüllt) */
.aktion-like.aktiv {
color: var(--farbe-gruen);
border-color: var(--farbe-erfolg-rand);
background: var(--farbe-gruen-zart);
}
.aktion-like.aktiv svg { fill: currentColor; fill-opacity: 0.15; }
/* Dislike aktiv → dezentes Rot/Orange (leicht gefüllt) */
.aktion-dislike.aktiv {
color: var(--farbe-fehler);
border-color: var(--farbe-fehler-rand);
background: var(--farbe-fehler-zart);
}
.aktion-dislike.aktiv svg { fill: currentColor; fill-opacity: 0.15; }
/* Haken aktiv (abgeschlossen) → gefüllt grün */
.aktion-check.aktiv {
color: #fff;
background: var(--farbe-gruen);
border-color: var(--farbe-gruen);
}
.aktion-check.aktiv:hover { background: var(--farbe-gruen); color: #fff; }
/* Dezenter "Zurück"-Link auf Detailseiten (Kurse/Workshops/Sprints) —
zurückhaltende, komplett runde Pille statt prominentem Button */
.zurueck-link {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.35rem 0.85rem;
border-radius: 999px;
font-size: 0.88rem;
font-weight: 600;
color: var(--farbe-text-hell);
background: transparent;
text-decoration: none;
opacity: 0.7;
transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.zurueck-link:hover {
background: var(--farbe-getoent);
color: var(--farbe-text);
opacity: 1;
}
/* ============================================================
Coaching (Premium-Zone) — warmer, dezenter Gelbton (#C9A227)
Karten-basierter Frage-Antwort-Verlauf, kein Chat-Blasen-Look
============================================================ */
.akzent-coaching {
--akzent: #c08a1e; /* dunkleres Gold für Text/aktiv (Kontrast) */
--akzent-dunkel: #9a6f14;
--akzent-zart: #fdf6e3;
}
/* /coaching-Seite: weißer Grund mit sehr dezentem Gold-Verlauf oben
(Premium-Zone). Effekt wie vorgegeben, in Premium-Gold, bewusst zart. */
.app-body.coaching-body {
background-color: #fff;
background-image: linear-gradient(360deg, #FFF 21.79%, #F9F3DF 127.64%);
background-size: 100% 900px;
background-repeat: no-repeat;
}
/* ---- /coaching als Premium-Zone: zentrierter, ruhiger Kopf + fokussierte,
zentrierte Inhaltsspalte. Hebt sich bewusst von den übrigen Unterseiten ab. ---- */
.coaching-body .app-main { padding-top: 9.4rem; } /* mehr Luft über dem Kopf (zur Navigation) */
.coaching-body .coaching-kopf-zeile {
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.3rem;
max-width: 840px;
margin: 0 auto 4.6rem; /* mehr Luft unter dem Kopf (zum Inhalt) */
}
.coaching-body .coaching-kopf-text { max-width: 600px; }
.coaching-body .app-kicker { justify-content: center; }
.coaching-body .app-titel { font-weight: 400; } /* leicht = edel */
.coaching-body .app-untertitel { margin-bottom: 0; }
/* „Neue Nachricht" sitzt jetzt UNTER dem Verlauf (Chat-Reihenfolge),
rechtsbündig, dezentes Gewicht. Abstand nach unten trennt ihn klar von
der darunterliegenden FAQ-Karte. */
.coaching-body #neue-nachricht-knopf {
display: block; margin: 1.2rem 0 1.8rem auto; font-weight: 400;
}
/* Ist der Button ausgeblendet, darf er keinen Platz einnehmen */
.coaching-body #neue-nachricht-knopf[hidden] { display: none; }
/* Fokussierte, zentrierte Inhaltsspalte (aufgeräumt, premium) */
.coaching-body #coaching-inhalt { max-width: 840px; margin: 0 auto; }
/* Karten wärmer & weicher als der Plattform-Standard (Premium-Anmutung) */
.coaching-body .coaching-karte {
border-radius: 14px;
border-color: #eee5d1;
box-shadow: 0 12px 34px -22px rgba(120, 95, 20, 0.3);
}
/* Feineres Schriftgewicht (Premium/aufgeräumt): FAQ-Überschrift 600,
FAQ-Fragen 400, Composer-Überschrift „Neue Nachricht" 400 */
.coaching-body .coaching-faq .coaching-abschnitt-titel { font-weight: 600; }
.coaching-body .coaching-faq-eintrag summary { font-weight: 400; }
.coaching-body .coaching-composer .coaching-abschnitt-titel { font-weight: 400; }
/* Absender im Nachrichtenkopf dezenter */
.coaching-body .coaching-absender { font-weight: 600; }
/* FAQ-Antwort gleitet beim Öffnen sanft ein */
.coaching-body .coaching-faq-eintrag[open] p {
animation: coachingFaqSlide 0.28s ease;
}
@keyframes coachingFaqSlide {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Mobile: gleiches Premium-Feeling. Die zweizeilige Kopfzeile ist höher,
daher mehr Top-Padding, damit oben derselbe großzügige Abstand entsteht;
Abstand zum Inhalt bleibt bewusst großzügig. */
@media (max-width: 720px) {
.coaching-body .app-main { padding-top: 10rem; }
.coaching-body .coaching-kopf-zeile { margin-bottom: 3.8rem; }
}
/* Admin-Sidebar-Akzent: aktiver Coaching-Punkt mit Gradient-BG + weißem Text */
.admin-nav-link.nav-coaching.aktiv { color: #fff; }
.admin-nav-link.nav-coaching.aktiv .admin-nav-symbol { color: #fff; }
.admin-nav-link.nav-coaching .admin-nav-symbol { color: #d9a441; }
/* Coaching-Seitenkopf nutzt das Plattform-Standardmuster
(.app-kicker / .app-titel / .app-untertitel) — Gold nur als Akzent.
.akzent-coaching färbt den Kicker + das Stern-Icon. */
.coaching-stern-klein { color: #C9A227; }
/* Karten / Abschnitte */
.coaching-karte {
background: var(--farbe-hintergrund); border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross); box-shadow: var(--schatten);
padding: 1.6rem; margin-bottom: 1.4rem;
}
.coaching-abschnitt-titel { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem; }
.coaching-frage { margin-bottom: 1.3rem; }
.coaching-frage label { display: block; font-weight: 700; margin-bottom: 0.5rem; line-height: 1.5; }
.coaching-frage-nr {
display: inline-flex; align-items: baseline; justify-content: center;
min-width: 1.3rem; margin-right: 0.5rem;
color: #C9A227; font-size: 1.25rem; font-weight: 700; line-height: 1;
}
.coaching-frage textarea, .coaching-composer textarea {
width: 100%; border: 1px solid var(--farbe-rand); border-radius: var(--radius);
padding: 0.7rem 0.85rem; font: inherit; resize: vertical;
}
.coaching-frage textarea:focus, .coaching-composer textarea:focus {
outline: none; border-color: #e2b53f; box-shadow: 0 0 0 3px #fdf2cf;
}
/* Thread (Karten, neueste unten) */
.coaching-thread { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.4rem; }
.admin-coaching-thread { max-height: 60vh; overflow-y: auto; padding-right: 0.3rem; }
.coaching-nachricht {
border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross);
padding: 1rem 1.2rem; background: var(--farbe-hintergrund);
}
.coaching-nachricht.von-mir { background: var(--farbe-hintergrund); }
.coaching-nachricht.von-coach { background: var(--farbe-hintergrund); border-color: var(--farbe-rand); border-left: 4px solid #C9A227; }
.coaching-warten .coaching-nachricht-text { color: var(--farbe-text-hell); }
/* ---- Premium-Chat (Mitglieder-Thread, coaching-body) ----
Echter Chat-Look statt gestapelter Karten: Avatar außen neben einer
Sprechblase, eigene Nachrichten rechts, der Lerncoach links mit warmem
Gold-Akzent. Der Admin-Thread behält die klassische Karten-Ansicht. */
.coaching-body .coaching-thread { gap: 1.25rem; }
.coaching-body .coaching-nachricht {
display: flex; align-items: flex-end; gap: 0.65rem;
border: 0; padding: 0; background: none;
max-width: min(84%, 660px);
}
.coaching-body .coaching-nachricht.von-mir { align-self: flex-end; flex-direction: row-reverse; }
.coaching-body .coaching-nachricht.von-coach { align-self: flex-start; }
.coaching-body .coaching-blase {
min-width: 0; flex: 1;
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand);
border-radius: 18px;
padding: 0.8rem 1.05rem 0.9rem;
box-shadow: 0 8px 22px -16px rgba(70, 55, 15, 0.35);
}
.coaching-body .von-mir .coaching-blase { border-bottom-right-radius: 6px; }
.coaching-body .von-coach .coaching-blase {
border-bottom-left-radius: 6px;
border-color: #eddfb6;
background: var(--farbe-hintergrund);
}
.coaching-body .coaching-blase-kopf {
display: flex; align-items: baseline; justify-content: space-between;
gap: 0.9rem; margin-bottom: 0.35rem;
}
.coaching-body .coaching-blase-kopf .coaching-absender { font-size: 0.82rem; }
.coaching-body .coaching-blase-kopf .coaching-zeit { font-size: 0.72rem; }
.coaching-body .coaching-nachricht .coaching-avatar { margin-bottom: 2px; }
/* „Coach tippt“-Punkte im Warte-Platzhalter */
.coaching-tippen { display: inline-flex; gap: 4px; margin-top: 0.5rem; }
.coaching-tippen span {
width: 6px; height: 6px; border-radius: 50%; background: #C9A227;
animation: coachingTippen 1.25s ease-in-out infinite;
}
.coaching-tippen span:nth-child(2) { animation-delay: 0.18s; }
.coaching-tippen span:nth-child(3) { animation-delay: 0.36s; }
@keyframes coachingTippen {
0%, 100% { opacity: 0.25; transform: translateY(0); }
45% { opacity: 1; transform: translateY(-3px); }
}
@media (max-width: 720px) {
.coaching-body .coaching-nachricht { max-width: 94%; gap: 0.5rem; }
.coaching-body .coaching-nachricht .coaching-avatar { width: 28px; height: 28px; font-size: 0.75rem; }
}
/* „Gesamte Konversation einblenden" */
.coaching-mehr {
display: block; width: 100%; margin-top: .2rem; padding: .7rem 1rem;
background: none; border: 1px dashed var(--farbe-rand); border-radius: var(--radius);
color: #9a6f14; font: inherit; font-weight: 600; cursor: pointer; transition: all .15s ease;
}
.coaching-mehr:hover { border-color: #C9A227; background: var(--farbe-getoent); }
.coaching-nachricht-kopf {
display: flex; align-items: baseline; justify-content: space-between;
gap: 1rem; margin-bottom: 0.5rem;
}
.coaching-absender { font-weight: 800; font-size: 0.9rem; }
.von-coach .coaching-absender { color: #9a6f14; }
.coaching-zeit { font-size: 0.78rem; color: var(--farbe-text-hell); white-space: nowrap; }
.coaching-nachricht-text { line-height: 1.65; color: var(--farbe-text); }
/* Mehr Abstand über dem Audio-Player innerhalb einer Nachricht */
.coaching-nachricht .coaching-audio-mount { margin-top: 1.1rem; }
/* Composer / Senden */
.coaching-composer textarea { margin-bottom: 0.9rem; }
.coaching-senden { display: flex; justify-content: flex-end; margin-top: 0.9rem; }
.btn-coaching {
background: #C9A227; color: #3b2f0b; border: 1px solid #ecbb2e; font-weight: 800;
}
.btn-coaching:hover { background: #efbe2c; }
.coaching-badge {
display: inline-block; background: #C9A227; color: #3b2f0b;
font-size: 0.72rem; font-weight: 800; padding: 0.1rem 0.5rem; border-radius: 999px; margin-left: 0.3rem;
}
/* Audio-Recorder-Widget */
.coaching-audio { margin: 0.4rem 0 0; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.audio-knopf {
display: inline-flex; align-items: center; gap: 0.5rem;
border: 1px solid var(--farbe-rand); background: var(--farbe-hintergrund);
color: var(--farbe-text-hell); border-radius: 999px; padding: 0.5rem 0.95rem;
cursor: pointer; font: inherit; font-size: 0.9rem; transition: all 0.15s ease;
}
.audio-knopf:hover { border-color: var(--farbe-text-hell); color: var(--farbe-text); background: var(--farbe-getoent); }
.audio-knopf svg { width: 18px; height: 18px; }
.audio-knopf.audio-stop { color: #b23b3b; border-color: #f0d2d2; background: #fbecec; }
.audio-knopf.audio-verwerfen { color: var(--farbe-text-hell); }
.audio-status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--farbe-text-hell); }
.audio-punkt {
width: 10px; height: 10px; border-radius: 50%; background: #e23b3b;
animation: audioPuls 1s ease-in-out infinite;
}
@keyframes audioPuls { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.audio-vorschau { height: 38px; max-width: 320px; }
/* Frage-Verwaltung (Admin) */
.frage-text-feld {
border: 1px solid var(--farbe-rand); border-radius: var(--radius);
padding: 0.5rem 0.7rem; font: inherit;
}
/* ============================================================
Coaching — Premium-Aufwertung (Gold #C9A227), Editor, Player, Intro, FAQ
============================================================ */
/* Button etwas edler: weißes Label auf Gold */
.btn-coaching { background: #C9A227; color: #fff; border: 1px solid #b8901f; font-weight: 700; letter-spacing: .01em; }
.btn-coaching:hover { background: #b8901f; }
.coaching-badge { background: #C9A227; color: #fff; }
/* Premium-Typografie im Coaching (dezent, an die Plattform angelehnt) */
.coaching-karte { line-height: 1.65; }
.coaching-abschnitt-titel { font-weight: 800; letter-spacing: -.01em; }
/* Intro-Karte: normale Plattform-Card mit dezentem Gold-Akzent (kein Flächengold) */
.coaching-intro { border-left: 3px solid #C9A227; }
.coaching-intro-titel { font-size: 1.2rem; font-weight: 800; margin: 0 0 .7rem; letter-spacing: -.01em; }
.coaching-intro p { color: var(--farbe-text); margin: 0 0 1rem; }
.coaching-intro-punkte { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-direction: column; gap: .6rem; }
.coaching-intro-punkte li { display: flex; align-items: center; gap: .6rem; color: var(--farbe-text); }
.coaching-intro-stern { color: #C9A227; flex-shrink: 0; }
.coaching-intro-start { font-weight: 600; color: var(--farbe-text-hell) !important; margin-bottom: 0 !important; }
/* Coaching-FAQ (Akkordeon) */
.coaching-faq-eintrag { border-bottom: 1px solid var(--farbe-rand); }
.coaching-faq-eintrag:last-child { border-bottom: none; }
.coaching-faq-eintrag summary {
cursor: pointer; padding: .9rem 0; font-weight: 700; list-style: none;
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.coaching-faq-eintrag summary::-webkit-details-marker { display: none; }
.coaching-faq-eintrag summary::after { content: '+'; color: #C9A227; font-size: 1.3rem; font-weight: 700; }
.coaching-faq-eintrag[open] summary::after { content: '–'; }
.coaching-faq-eintrag p { margin: 0 0 1rem; color: var(--farbe-text-hell); line-height: 1.65; }
/* Video-Antwort (BunnyCDN, 16:9) */
.coaching-video { margin-top: .8rem; max-width: 480px; }
.coaching-video-rahmen {
position: relative; width: 100%; padding-top: 56.25%;
border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten);
}
.coaching-video-rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Eigener Audio-Player */
.audio-player {
display: inline-flex; align-items: center; gap: .7rem;
background: var(--farbe-getoent); border: 1px solid var(--farbe-rand);
border-radius: 999px; padding: .35rem .7rem .35rem .4rem; max-width: 340px; width: 100%;
}
.audio-player-knopf {
flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
border: none; background: #C9A227; color: #fff; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.audio-player-knopf svg { width: 16px; height: 16px; }
.audio-player-knopf:hover { background: #b8901f; }
.audio-player-leiste { flex: 1; height: 6px; background: #e7ddc2; border-radius: 999px; cursor: pointer; overflow: hidden; }
.audio-player-fortschritt { height: 100%; width: 0; background: #C9A227; border-radius: 999px; }
.audio-player-zeit { flex-shrink: 0; font-size: .8rem; color: var(--farbe-text-hell); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.audio-vorschau-player { flex: 1; min-width: 220px; }
/* WYSIWYG-Editor (contenteditable) */
.wysiwyg { border: 1px solid var(--farbe-rand); border-radius: var(--radius); overflow: visible; background: var(--farbe-hintergrund); }
.wysiwyg:focus-within { border-color: #d8b94e; box-shadow: 0 0 0 3px #f7eccc; }
.wysiwyg-toolbar { position: relative; display: flex; gap: .25rem; padding: .35rem .4rem; border-bottom: 1px solid var(--farbe-rand); background: #fcfbf7; border-radius: var(--radius) var(--radius) 0 0; }
.wysiwyg-btn {
border: 1px solid transparent; background: none; border-radius: 6px; cursor: pointer;
min-width: 30px; height: 28px; padding: 0 .4rem; font-size: .9rem; color: var(--farbe-text-hell);
}
.wysiwyg-btn:hover { background: #f1ead4; color: var(--farbe-text); }
.wysiwyg-editor { min-height: 84px; padding: .7rem .85rem; line-height: 1.6; outline: none; }
.wysiwyg-editor:empty:before { content: attr(data-placeholder); color: var(--farbe-text-hell); opacity: .7; }
.wysiwyg-editor ul, .wysiwyg-editor ol { margin: .3rem 0; padding-left: 1.4rem; }
.wysiwyg-emoji-popover {
position: absolute; top: 38px; left: .4rem; z-index: 30; width: 250px;
background: #fff; border: 1px solid var(--farbe-rand); border-radius: 10px;
box-shadow: var(--schatten-schwebend); padding: .5rem; display: flex; flex-wrap: wrap; gap: .15rem;
}
.wysiwyg-emoji { border: none; background: none; cursor: pointer; font-size: 1.2rem; width: 32px; height: 32px; border-radius: 6px; }
.wysiwyg-emoji:hover { background: var(--farbe-getoent); }
/* Newsletter-Modus des Editors: erweiterte Toolbar + Inhalts-Darstellung */
.wysiwyg-trenner { width: 1px; align-self: stretch; margin: 0.2rem 0.15rem; background: var(--farbe-rand); }
.wysiwyg-newsletter .wysiwyg-toolbar { flex-wrap: wrap; row-gap: 0.25rem; }
.wysiwyg-newsletter .wysiwyg-editor { min-height: 220px; }
.wysiwyg-newsletter .wysiwyg-editor h1 { font-size: 1.45rem; font-weight: 800; margin: 0.7em 0 0.35em; }
.wysiwyg-newsletter .wysiwyg-editor h2 { font-size: 1.2rem; font-weight: 700; margin: 0.7em 0 0.35em; }
.wysiwyg-newsletter .wysiwyg-editor h3 { font-size: 1.05rem; font-weight: 700; margin: 0.7em 0 0.3em; }
.wysiwyg-newsletter .wysiwyg-editor a { color: var(--farbe-gruen-dunkel); text-decoration: underline; }
.wysiwyg-newsletter .wysiwyg-editor hr { border: none; border-top: 1px solid var(--farbe-rand); margin: 1.1em 0; }
.wysiwyg-link-popover, .wysiwyg-bild-popover {
position: absolute; top: 38px; left: 0.4rem; right: 0.4rem; z-index: 30; max-width: 380px;
background: #fff; border: 1px solid var(--farbe-rand); border-radius: 10px;
box-shadow: var(--schatten-schwebend); padding: 0.6rem;
display: flex; flex-direction: column; gap: 0.45rem;
}
.wysiwyg-link-popover input, .wysiwyg-bild-popover input {
padding: 0.5rem 0.7rem; border: 1px solid var(--farbe-rand); border-radius: var(--radius);
font: inherit; font-size: 0.9rem;
}
.wysiwyg-link-popover input:focus, .wysiwyg-bild-popover input:focus { outline: none; border-color: var(--farbe-gruen); }
.wysiwyg-bild-ok { align-self: flex-end; }
.wysiwyg-link-ok { align-self: flex-end; }
/* Nachrichten-Text: gerendertes (sanitisiertes) HTML hübsch darstellen */
.coaching-nachricht-text p { margin: 0 0 .5rem; }
.coaching-nachricht-text p:last-child { margin-bottom: 0; }
.coaching-nachricht-text ul, .coaching-nachricht-text ol { margin: .3rem 0; padding-left: 1.3rem; }
/* ---- Composer-Leiste (Anhang links, Senden rechts) ---- */
.coaching-composer-leiste { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .9rem; flex-wrap: wrap; }
/* ---- Anhang-Eingabe (Button / gewählte Datei als Chip) ---- */
.anhang-knopf {
display: inline-flex; align-items: center; gap: .5rem;
border: 1px solid var(--farbe-rand); background: var(--farbe-hintergrund);
color: var(--farbe-text-hell); border-radius: 999px; padding: .5rem .95rem;
cursor: pointer; font: inherit; font-size: .9rem; transition: all .15s ease;
}
.anhang-knopf:hover { border-color: #C9A227; color: var(--farbe-text); background: var(--farbe-getoent); }
.anhang-knopf svg { width: 17px; height: 17px; }
.anhang-chip {
display: inline-flex; align-items: center; gap: .55rem;
background: var(--farbe-getoent); border: 1px solid var(--farbe-rand);
border-radius: 999px; padding: .35rem .5rem .35rem .55rem; max-width: 100%;
}
.anhang-chip-name { font-size: .85rem; color: var(--farbe-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.anhang-chip-x { border: none; background: none; cursor: pointer; color: var(--farbe-text-hell); display: inline-flex; padding: 2px; border-radius: 50%; }
.anhang-chip-x:hover { background: #eee; color: #b23b3b; }
.anhang-chip-x svg { width: 14px; height: 14px; }
/* Datei-Typ-Symbol mit Endungs-Badge */
.anhang-icon { position: relative; flex-shrink: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: #C9A227; }
.anhang-icon svg { width: 26px; height: 26px; }
.anhang-endung {
position: absolute; bottom: -2px; right: -4px; font-size: .52rem; font-weight: 800;
background: #C9A227; color: #fff; border-radius: 4px; padding: .05rem .2rem; letter-spacing: .02em;
}
/* ---- Datei-Karte im Thread (Download-Link) ---- */
.coaching-anhang-karte {
display: inline-flex; align-items: center; gap: .7rem; margin-top: .8rem;
text-decoration: none; color: inherit;
background: var(--farbe-hintergrund); border: 1px solid var(--farbe-rand);
border-radius: var(--radius); padding: .6rem .8rem; max-width: 340px; transition: all .15s ease;
}
.coaching-anhang-karte:hover { border-color: #C9A227; box-shadow: var(--schatten); }
.anhang-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.anhang-name { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anhang-groesse { font-size: .76rem; color: var(--farbe-text-hell); }
.anhang-download { flex-shrink: 0; color: #C9A227; display: inline-flex; }
.anhang-download svg { width: 18px; height: 18px; }
/* ---- Einstieg-Label (Admin-Thread) ---- */
.coaching-einstieg-label {
display: inline-block; margin-left: .5rem; font-size: .68rem; font-weight: 800;
text-transform: uppercase; letter-spacing: .04em;
background: #fbf2d6; color: #9a6f14; border-radius: 999px; padding: .08rem .5rem;
}
/* ============================================================
Coaching — Chat-Avatare, Kopfzeile, Coach-Rolle, Bearbeiten
============================================================ */
/* Seitenkopf-Zeile mit „Neue Nachricht"-Button rechts (User-Sicht) */
.coaching-kopf-zeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.coaching-kopf-text { min-width: 0; }
/* Avatar (Profilbild oder Initiale) im Nachrichtenkopf */
.coaching-avatar {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center;
background: #ece4cf; color: #6b5512; font-weight: 700; font-size: .85rem;
}
.coaching-avatar img { width: 100%; height: 100%; object-fit: cover; }
.coaching-avatar-stern { background: #C9A227; color: #fff; }
.coaching-nachricht-kopf { align-items: center; }
.coaching-kopf-links { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.coaching-rolle {
display: inline-block; margin-left: .4rem; font-size: .64rem; font-weight: 800;
text-transform: uppercase; letter-spacing: .04em; vertical-align: middle;
background: #fbf2d6; color: #9a6f14; border-radius: 999px; padding: .08rem .45rem;
}
/* Bearbeiten (Coach-Nachrichten) */
.coaching-nachricht-aktionen { margin-top: .75rem; display: flex; gap: .5rem; }
.coaching-edit-knopf {
background: none; border: none; cursor: pointer; font: inherit; font-size: .82rem;
color: var(--farbe-text-hell); padding: .15rem .2rem; border-radius: 6px;
}
.coaching-edit-knopf:hover { color: #9a6f14; }
/* Admin-Coaching: Kopf-Aktionen + FAQ-Verwaltungszeilen */
.admin-kopf-aktionen { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
/* Schalter „Im Mitgliederbereich anzeigen“ (Vorlagen-Header) */
.vorlagen-schalter {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 0.9rem; font-weight: 600; color: var(--farbe-text-hell); cursor: pointer; user-select: none;
}
.vorlagen-schalter input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--farbe-gruen); }
.faq-zeile { align-items: flex-start; }
.faq-felder { flex: 1; display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.faq-felder input, .faq-felder textarea {
width: 100%; border: 1px solid var(--farbe-rand); border-radius: 6px;
padding: .45rem .6rem; font: inherit; resize: vertical;
}
.faq-zeile-aktionen { display: flex; flex-direction: column; gap: .3rem; flex-shrink: 0; }
/* ============================================================
Mobile-Feinschliff Mitgliederbereich (Smartphone ≤480px)
Rein ADDITIV — Desktop/Tablet bleiben unverändert. Der Admin-Bereich
ist bewusst nicht betroffen (Desktop-only); die hier angesprochenen
Klassen kommen nur im User-Bereich vor.
============================================================ */
@media (max-width: 480px) {
/* Etwas mehr Inhaltsbreite im Mitgliederbereich */
.app-body .container { padding-left: 1.1rem; padding-right: 1.1rem; }
/* --- Touch-Ziele auf ≥44px --- */
.aktion-icon { width: 44px; height: 44px; }
.aktion-icon svg { width: 20px; height: 20px; }
.btn-icon-rund { width: 44px; height: 44px; }
.zertifikat-knopf { width: 42px; height: 42px; }
/* Audio-Player (Coaching): größerer Knopf + besser tippbare Seek-Leiste */
.audio-player-knopf { width: 44px; height: 44px; }
.audio-player-knopf svg { width: 18px; height: 18px; }
.audio-player-leiste { height: 10px; }
/* WYSIWYG-Composer (Coaching): umbruchsichere Toolbar, größere Tasten */
.wysiwyg-toolbar { flex-wrap: wrap; row-gap: .3rem; }
.wysiwyg-toolbar button { min-width: 40px; height: 38px; }
.wysiwyg-emoji { width: 38px; height: 38px; font-size: 1.3rem; }
/* --- Dashboard-Hero + Detail-Köpfe: kompakteres Padding --- */
.held-karte { padding: 1.5rem 1.4rem; }
.seiten-kopf { padding: 1.3rem 1.2rem; }
/* --- Rechnungs-/Download-Zeilen umbrechen statt überlaufen --- */
.download-zeile { flex-wrap: wrap; gap: 0.3rem 0.8rem; }
.download-zeile-titel { flex: 1 1 100%; }
/* --- Coaching-Karten etwas kompakter für mehr Lesefläche --- */
.coaching-karte { padding: 1.2rem; }
.coaching-nachricht { padding: 0.9rem 1rem; }
}
/* Admin: Webinar-Formular + Statistik */
.webinar-admin-vorschau { width: 220px; max-width: 100%; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; margin-bottom: 0.6rem; border: 1px solid var(--farbe-rand); }
.webinar-admin-vorschau img { width: 100%; height: 100%; object-fit: cover; }
.webinar-stat-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.4rem; }
.webinar-stat { background: var(--farbe-getoent); border: 1px solid var(--farbe-rand); border-radius: var(--radius); padding: 1.1rem 1.3rem; }
.webinar-stat-zahl { display: block; font-size: 1.9rem; font-weight: 900; line-height: 1; color: var(--farbe-text); }
.webinar-stat-label { display: block; margin-top: 0.4rem; font-size: 0.85rem; color: var(--farbe-text-hell); }
@media (max-width: 480px) { .webinar-stat-raster { grid-template-columns: 1fr; } }
/* ============================================================
Skeleton-Ladezustände (Dashboard, Sprints, Workshops, Kurse,
Vorlagen, Coaching). Reines CSS — ersetzt die früheren „… werden
geladen"-Texte. Liegt in denselben Containern, erbt also Grid/Flex.
============================================================ */
@keyframes sk-shimmer { to { background-position: -200% 0; } }
@keyframes sk-fadein { from { opacity: 0; } to { opacity: 1; } }
.sk {
background: linear-gradient(100deg,
var(--farbe-getoent) 28%, #edf1ef 46%, #edf1ef 54%, var(--farbe-getoent) 72%);
background-size: 200% 100%;
background-position: 200% 0;
animation: sk-shimmer 1.5s ease-in-out infinite;
border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
/* Inhalts-Karte (Kurse/Workshops/Sprints/Vorlagen) */
.sk-karte {
border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross);
overflow: hidden;
background: var(--farbe-hintergrund);
}
.sk-bild { width: 100%; aspect-ratio: 16 / 9; border-radius: 0; }
.sk-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.7rem; }
.sk-zeile { height: 12px; }
.sk-zeile.chip { height: 20px; width: 38%; border-radius: 999px; }
.sk-zeile.titel { height: 18px; width: 70%; }
.sk-zeile.voll { width: 100%; }
.sk-zeile.kurz { width: 55%; }
.sk-pillen { display: flex; gap: 0.5rem; margin-top: 0.2rem; }
.sk-pille { height: 24px; width: 84px; border-radius: 999px; }
.sk-knopf { height: 38px; width: 130px; border-radius: 8px; margin-top: 0.3rem; }
/* Dashboard-Widgets */
.sk-widget {
border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross);
background: var(--farbe-hintergrund); padding: 1.4rem;
display: flex; flex-direction: column; gap: 0.9rem; min-height: 150px;
}
/* Coaching: Nachrichten-Karten (abwechselnd User/Coach) */
.sk-nachricht {
border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross);
background: var(--farbe-hintergrund); padding: 1rem 1.2rem;
display: flex; flex-direction: column; gap: 0.6rem;
}
.sk-nachricht.coach { border-left: 4px solid #C9A227; }
.sk-kopf-zeile { display: flex; align-items: center; gap: 0.6rem; }
.sk-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.sk-thread { display: flex; flex-direction: column; gap: 0.9rem; }
/* Sanfter Fade beim Ersetzen des Skeletons durch echte Inhalte */
.inhalt-karte, .dash-widget, .coaching-nachricht { animation: sk-fadein 0.3s ease both; }
/* Toggle-Schalter (z. B. E-Mail-Benachrichtigungen in den Einstellungen) */
.schalter-zeile { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.schalter-text strong { display: block; margin-bottom: 0.2rem; }
.schalter-text .feld-hinweis { margin: 0; }
.schalter { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.schalter input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.schalter-knopf { position: absolute; inset: 0; background: var(--farbe-rand); border-radius: 999px; transition: background 0.2s ease; pointer-events: none; }
.schalter-knopf::before { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(16,24,40,0.25); }
.schalter input:checked + .schalter-knopf { background: var(--farbe-gruen); }
.schalter input:checked + .schalter-knopf::before { transform: translateX(20px); }
.schalter input:focus-visible + .schalter-knopf { box-shadow: 0 0 0 3px var(--farbe-gruen-zart); }
@media (max-width: 480px) { .schalter-zeile { gap: 1rem; } }
/* ============================================================
Admin-Sidebar: aufklappbare Gruppen (Accordion) + Untermenüs
============================================================ */
/* ============================================================
Cookie-Consent-Banner (EU/AT-konform; gleichwertige Buttons)
============================================================ */
.ng-cookie {
position: fixed; left: 0; bottom: 0; z-index: 9999;
display: none; padding: 1rem; pointer-events: none;
}
.ng-cookie.offen { display: block; }
.ng-cookie-box {
pointer-events: auto; width: 360px; max-width: calc(100vw - 2rem);
background: var(--farbe-hintergrund); border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross); box-shadow: var(--schatten);
padding: 1.15rem 1.25rem;
}
.ng-cookie-box h2 { font-size: 0.98rem; font-weight: 800; margin: 0 0 0.4rem; color: var(--farbe-text); }
.ng-cookie-box p { color: var(--farbe-text-hell); line-height: 1.5; font-size: 0.82rem; margin: 0 0 0.9rem; }
.ng-cookie-box a { color: var(--farbe-gruen); }
.ng-cookie-knoepfe { display: flex; gap: 0.45rem; flex-wrap: wrap; }
/* Alle Aktionen sichtbar; „Alle akzeptieren" hervorgehoben (Primärfarbe) */
.ng-cookie-btn {
flex: 1 1 auto; padding: 0.5rem 0.75rem; border-radius: var(--radius);
border: 1px solid var(--farbe-rand); background: var(--farbe-getoent);
color: var(--farbe-text); font: inherit; font-weight: 600; font-size: 0.8rem;
cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.ng-cookie-btn:hover { border-color: var(--farbe-gruen); background: var(--farbe-gruen-zart); }
.ng-cookie-btn-haupt { background: var(--farbe-gruen); border-color: var(--farbe-gruen); color: #fff; }
.ng-cookie-btn-haupt:hover { background: var(--farbe-gruen-dunkel); border-color: var(--farbe-gruen-dunkel); color: #fff; }
/* Im schmalen Popup: „Alle akzeptieren" volle Breite (eigene Zeile), die anderen teilen sich eine Zeile */
.ng-cookie-haupt .ng-cookie-btn-haupt { flex-basis: 100%; }
.ng-cookie-kat { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1rem 0; border-bottom: 1px solid var(--farbe-rand); }
.ng-cookie-kat:first-of-type { border-top: 1px solid var(--farbe-rand); }
.ng-cookie-detail .ng-cookie-knoepfe { margin-top: 1.3rem; }
.schalter input:disabled + .schalter-knopf { opacity: 0.55; }
@media (max-width: 560px) {
.ng-cookie { padding: 0.6rem; }
.ng-cookie-box { padding: 1.2rem; }
.ng-cookie-btn { flex-basis: 100%; }
}
/* Cookie-Einstellungen-Block auf der Datenschutz-Seite */
.rechtstext-cookie { margin-top: 2.5rem; padding-top: 1.8rem; border-top: 1px solid var(--farbe-rand); }
.rechtstext-cookie h2 { font-size: 1.2rem; font-weight: 800; margin: 0 0 0.5rem; }
.rechtstext-cookie p { color: var(--farbe-text-hell); margin: 0 0 1rem; }
/* Mitglied-Modal: Zahlungszeilen haben oft mehrere Aktionen (Rechnung +
Gutschrift) — Titel auf eigene Zeile, Datum/Betrag/Status/Buttons brechen
darunter sauber um, statt rechts aus dem Modal zu laufen. */
#zahlungen-liste .download-zeile { flex-wrap: wrap; gap: 0.4rem 0.7rem; }
#zahlungen-liste .download-zeile-titel { flex: 1 1 100%; }
#zahlungen-liste .download-zeile .btn-icon { white-space: nowrap; }
/* Aktions-Buttons (Rechnung/Gutschrift) gruppiert rechts in der zweiten Zeile */
#zahlungen-liste .zeile-aktionen { margin-left: auto; display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }
/* ============================================================
Trust-Badges (dezent, am Kaufpunkt) + „Bekannt aus" + Unterschrift
============================================================ */
.trust-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.7rem 1.6rem;
margin: 1.8rem auto 0;
}
.trust-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.86rem;
font-weight: 600;
color: var(--farbe-text-hell);
}
.trust-badge svg { width: 18px; height: 18px; color: var(--farbe-gruen); flex-shrink: 0; }
/* Unterschrift (PNG, vom Admin hochladbar) */
.ueber-unterschrift {
display: block;
max-width: 220px;
max-height: 80px;
width: auto;
height: auto;
margin: 0.4rem 0 0.2rem;
}
.kicker-links + h2 ~ .ueber-unterschrift { margin-top: 0.6rem; }
/* „Bekannt aus" */
.bekannt-aus {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.6rem 1.2rem;
margin-top: 1.6rem;
padding-top: 1.4rem;
border-top: 1px solid var(--farbe-rand);
}
.bekannt-aus-logos { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.3rem; }
.bekannt-logo {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.9rem;
font-weight: 600;
color: #8a93a5;
text-decoration: none;
transition: color 0.2s ease;
}
/* Nur mit hinterlegtem Link als klickbar erkennbar */
a.bekannt-logo[href] { cursor: pointer; }
.bekannt-logo svg { width: 18px; height: 18px; flex-shrink: 0; }
.bekannt-logo:hover { color: var(--farbe-text); }
.bekannt-text { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.bekannt-text strong { color: inherit; font-weight: 700; }
/* ============================================================
Programm-/KI-Kacheln (M365 + Copilot/ChatGPT/Claude)
SVG-Default in Markenfarbe; optionales Logo via data-lp-src (.tk-logo).
============================================================ */
.tk {
position: relative; width: 40px; height: 40px; border-radius: 10px;
background: var(--tc, var(--farbe-gruen));
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; box-shadow: 0 4px 10px -5px rgba(16,24,40,0.35);
}
.tk b { color: #fff; font-weight: 800; font-size: 1.02rem; line-height: 1; font-style: normal; }
.tk > svg { width: 21px; height: 21px; color: #fff; }
.tk-logo {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: contain; background: #fff; border-radius: 10px; padding: 5px; display: none;
}
.tk.hat-logo { background: #fff; border: 1px solid var(--farbe-rand); }
.tk.hat-logo .tk-logo { display: block; }
.tk.hat-logo b, .tk.hat-logo > svg { display: none; }
/* Funktionen: Icon + Name + Mini-Zeile */
.tool-zeile {
display: flex; align-items: center; gap: 0.85rem; text-align: left;
padding: 0.9rem 1rem;
background: #fff; border: 1px solid var(--farbe-rand); border-radius: 14px;
box-shadow: 0 8px 20px -16px rgba(16,24,40,0.22);
transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.tool-zeile:hover {
transform: translateY(-5px);
box-shadow: 0 18px 36px -20px rgba(16,24,40,0.32);
border-color: #d4dae2;
}
.tool-zeile .tk { transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.tool-zeile:hover .tk { transform: scale(1.08) rotate(-3deg); }
/* Sanftes Floaten der Tool-Kacheln (Hero-Leiste + Routinen) */
@keyframes tk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4.7px); } }
.tk-float { animation: tk-float 3.4s ease-in-out infinite; will-change: transform; }
/* Animierter Workflow-Pfeil (fließende gestrichelte Linie) */
.workflow-pfeil svg { width: 34px; height: 22px; }
.workflow-pfeil .wf-line { stroke-dasharray: 5 6; animation: wf-dash 0.9s linear infinite; }
@keyframes wf-dash { to { stroke-dashoffset: -22; } }
/* Routinen-Rotator: weicher Wechsel zwischen Routinen */
.workflow-host { transition: opacity .35s ease, transform .35s ease; }
.workflow-host.wechsel { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) {
.tk-float { animation: none; }
.workflow-pfeil .wf-line { animation: none; }
}
.tool-zeile-text strong { display: block; font-size: 0.98rem; font-weight: 700; }
.tool-zeile-text span { display: block; font-size: 0.86rem; color: var(--farbe-text-hell); line-height: 1.4; }
/* Workflow-Diagramm (Herzstück) */
.workflow-karte {
display: flex; flex-direction: column; gap: 1.2rem;
padding: 1.7rem; background: linear-gradient(180deg,#ffffff 0%,#fbfcfb 100%);
border: 1px solid var(--farbe-rand); border-radius: 18px;
box-shadow: 0 16px 40px -22px rgba(16,24,40,0.28);
}
.workflow-titel { font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; }
.workflow-fluss { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.3rem; }
.workflow-schritt { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex: 1 1 0; text-align: center; min-width: 0; }
.workflow-cap { font-size: 0.72rem; color: var(--farbe-text-hell); line-height: 1.25; }
.workflow-pfeil { color: #93a0b0; flex-shrink: 0; margin-top: 13px; }
.workflow-pfeil svg { width: 16px; height: 16px; }
.workflow-badge {
align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem;
background: var(--farbe-gruen-zart); color: var(--farbe-gruen-dunkel);
font-weight: 700; font-size: 0.82rem; padding: 0.42rem 0.85rem; border-radius: 999px;
}
@media (max-width: 480px) {
.tk { width: 34px; height: 34px; }
.tk b { font-size: 0.9rem; }
.workflow-cap { font-size: 0.64rem; }
}
/* Admin: Software-Vorschaukachel */
.sw-vorschau { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
/* ============================================================
Hero: dezent verstreute, zufällig floatende Programm-Icons
============================================================ */
.hero-inhalt { position: relative; z-index: 2; }
/* zentrierte, begrenzte Ebene → Icons bleiben nah am Text (auch auf 4K) */
.hero-icons { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1140px; z-index: 1; pointer-events: none; }
.hero-icons .tk {
position: absolute; opacity: 0.7;
box-shadow: 0 10px 22px -10px rgba(16,24,40,0.28);
animation: hero-float var(--dur, 7s) ease-in-out var(--del, 0s) infinite;
will-change: transform;
}
@keyframes hero-float {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
33% { transform: translate(6px, -8px) rotate(2deg); }
66% { transform: translate(-5px, 6px) rotate(-2deg); }
}
@media (max-width: 900px) { .hero-icons { display: none; } }
/* Größere, gut erkennbare Routine — Höhe an die Textspalte angepasst */
#sprints .funktion-reihe { align-items: stretch; }
.workflow-host { height: 100%; }
.workflow-karte { height: 100%; justify-content: space-between; gap: 1.8rem; padding: 2rem; }
.workflow-titel { font-size: 1.2rem; align-self: flex-start; text-align: left; }
.workflow-fluss { flex: 0 0 auto; }
.workflow-badge { align-self: center; }
.workflow-fluss .tk { width: 54px; height: 54px; border-radius: 13px; }
.workflow-fluss .tk b { font-size: 1.4rem; }
.workflow-fluss .tk > svg { width: 28px; height: 28px; }
.workflow-cap { font-size: 0.9rem; }
.workflow-badge { font-size: 0.74rem; padding: 0.45rem 0.9rem; }
/* Mobil: etwas mehr Abstand unter dem Routine-Titel */
@media (max-width: 720px) {
.workflow-titel { margin-bottom: 0.5rem; }
}
/* Mobil: Routine-Karte schrumpfen, damit der Schritt-Fluss nicht rechts aus
dem Bild läuft. Muss NACH den ungescopten .workflow-fluss .tk-Regeln stehen
(gleiche Spezifität), sonst greift die 54px-Desktopgröße auch am Handy. */
@media (max-width: 600px) {
.workflow-karte { padding: 1.3rem; gap: 1.1rem; max-width: 100%; }
.workflow-fluss { gap: 0.15rem; min-width: 0; }
.workflow-fluss .tk { width: 40px; height: 40px; border-radius: 10px; }
.workflow-fluss .tk b { font-size: 1rem; }
.workflow-fluss .tk > svg { width: 20px; height: 20px; }
.workflow-cap { font-size: 0.62rem; }
.workflow-pfeil { margin-top: 10px; }
.workflow-pfeil svg { width: 13px; height: 13px; }
}
/* „Diese Programme": einzeilige, automatisch loopende Karten (≈4 sichtbar) */
.tool-marquee {
overflow: hidden; margin-top: 1.6rem;
/* vertikales Padding gibt dem Hover-Lift + Schatten Platz (sonst unten abgeschnitten) */
padding: 14px 4px 30px;
-webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.tool-marquee-track { display: flex; gap: 1.1rem; width: max-content; animation: tool-scroll 53s linear infinite; }
.tool-marquee:hover .tool-marquee-track { animation-play-state: paused; }
.tool-marquee .tool-zeile { width: 250px; flex-shrink: 0; }
@keyframes tool-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Reduzierte Bewegung: siehe .logo-marquee oben — eine Reihe zum Selberschieben
statt Umbruch. Bei 250px breiten Karten wurde daraus sonst ein dreizeiliger
Block, den die seitliche Maske an den Zeilenrändern auch noch ausgeblendet
hat; das las sich wie ein Darstellungsfehler, nicht wie eine Alternative. */
@media (prefers-reduced-motion: reduce) {
.hero-icons .tk { animation: none; }
.tool-marquee { overflow-x: auto; }
.tool-marquee-track { animation: none; }
}
/* Admin: Bild-Upload je Listen-Eintrag (z. B. Bewertungs-Foto) */
.lp-listen-bild { display: inline-flex; align-items: center; gap: 0.4rem; }
.lp-listen-vorschau { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--farbe-getoent); display: inline-flex; align-items: center; justify-content: center; color: var(--farbe-text-hell); flex-shrink: 0; }
.lp-listen-vorschau img { width: 100%; height: 100%; object-fit: cover; }
/* Bewertung: echtes Foto statt Initialen */
.bewertung-avatar { overflow: hidden; }
.bewertung-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
/* ============================================================
Checkout-Politur: Zahlart-Logos, Trust-Badges, Funktionsliste, PLZ/Ort
============================================================ */
/* PLZ 33% / Ort 66% */
.formular-zeile-plz { grid-template-columns: 1fr 2fr; }
/* Zahlart: Name links, Anbieter-Logo rechts (statt Detailtext) */
.zahlart-logo { margin-left: auto; font-size: 1rem; line-height: 1; white-space: nowrap; }
.zahlart-logo-mollie { font-weight: 800; letter-spacing: -0.01em; color: #16161d; }
.zahlart-logo-paypal { font-style: italic; font-weight: 800; }
.zahlart-logo-paypal span:first-child { color: #253B80; }
.zahlart-logo-paypal span:last-child { color: #179BD7; }
/* Trust-Badges in der Bestellübersicht (vertikal, wie Landing-Stil) */
.bestellung-vertrauen.trust-badges { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; margin-top: 1.2rem; }
/* Funktionsliste wie auf der Landing-Page (Flex + sauberes Häkchen) */
.bestellung-funktionen { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.bestellung-funktionen li {
display: flex; align-items: flex-start; gap: 0.6rem;
padding: 0.38rem 0; color: var(--farbe-text); line-height: 1.5;
}
.bestellung-funktionen li::before {
content: "✓"; color: var(--farbe-gruen); font-weight: 900; flex-shrink: 0;
}
/* Checkout: schlanke Pflicht-Einwilligung + Button als sauberer Vollbreit-Block */
.checkout-consent {
display: flex; align-items: flex-start; gap: 0.6rem;
font-size: 0.85rem; color: var(--farbe-text-hell); line-height: 1.5;
margin: 0.6rem 0 0; cursor: pointer;
}
.checkout-consent input { margin-top: 0.15rem; flex-shrink: 0; }
.checkout-consent a { color: var(--farbe-gruen); }
.checkout-knopf { display: block; width: 100%; margin-top: 1.1rem; }
/* Hero-Icons Variante 2: größere Kacheln → Glyphen mitskalieren */
.hero-v2 .tk b { font-size: 1.55rem; }
.hero-v2 .tk > svg { width: 30px; height: 30px; }
/* ============================================================
Checkout: Gutscheincode (dezent, ausklappbar)
============================================================ */
.gutschein-box { border-top: 1px solid var(--farbe-rand); margin-top: 1rem; padding-top: 0.9rem; }
.gutschein-toggle {
display: inline-flex; align-items: center; gap: 0.45rem;
background: none; border: none; cursor: pointer; padding: 0;
color: var(--farbe-text-hell); font-size: 0.88rem; font-weight: 600;
}
.gutschein-toggle svg { width: 16px; height: 16px; }
.gutschein-toggle:hover { color: var(--farbe-gruen-dunkel); }
.gutschein-eingabe { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.gutschein-eingabe input {
flex: 1; min-width: 0; padding: 0.6rem 0.7rem; border: 1px solid var(--farbe-rand);
border-radius: var(--radius); font-family: inherit; text-transform: uppercase; letter-spacing: 0.03em;
}
.gutschein-eingabe .btn-klein { white-space: nowrap; }
.gutschein-status { margin-top: 0.6rem; font-size: 0.85rem; }
.gutschein-status.ok { color: var(--farbe-gruen-dunkel); font-weight: 600; }
.gutschein-status.fehler { color: var(--farbe-fehler); }
.gutschein-entfernen { background: none; border: none; padding: 0; cursor: pointer; color: var(--farbe-text-hell); text-decoration: underline; font: inherit; }
.steuer-zeile.gutschein-zeile span { color: var(--farbe-gruen-dunkel); font-weight: 600; }
/* Admin: Gutscheine */
.status-pille { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.status-pille.aktiv { background: var(--farbe-gruen-zart); color: var(--farbe-gruen-dunkel); }
.status-pille.inaktiv { background: #f0f0f3; color: var(--farbe-text-hell); }
.status-pille.kampagne { background: #eef2ff; color: #4338ca; }
.coupon-pakete { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin-top: 0.5rem; }
.coupon-aktionen { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
/* ============================================================
Rabatt-Kampagnen: Top-Banner + Streichpreise
============================================================ */
.kampagne-banner {
display: flex; align-items: center; justify-content: center; gap: 1.1rem;
background: linear-gradient(90deg, var(--farbe-gruen-dunkel), var(--farbe-gruen));
color: #fff; padding: 0.6rem 3rem; position: relative;
font-size: 0.9rem; text-align: center; z-index: 60;
max-height: 200px; overflow: hidden;
transition: max-height 0.35s ease, opacity 0.3s ease, transform 0.35s ease,
padding-top 0.35s ease, padding-bottom 0.35s ease;
}
/* Sanftes Schließen: Höhe kollabiert, gleitet hoch und blendet aus */
.kampagne-banner.kb-zu {
max-height: 0; opacity: 0; transform: translateY(-100%);
padding-top: 0; padding-bottom: 0;
}
.kb-inhalt { display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap; justify-content: center; }
.kb-text { font-weight: 600; letter-spacing: 0.01em; }
.kb-uhr { display: inline-flex; align-items: center; gap: 0.6rem; }
.kb-label { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 600; opacity: 0.82; white-space: nowrap; }
.kb-boxen { display: inline-flex; gap: 0.35rem; }
.kb-einheit {
display: flex; flex-direction: column; align-items: center; gap: 0.02rem;
background: rgba(255, 255, 255, 0.15); border-radius: 8px;
padding: 0.18rem 0.4rem; min-width: 2.5rem; line-height: 1;
}
.kb-zahl { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; }
.kb-el { font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.78; font-weight: 600; margin-top: 0.12rem; }
.kb-cta { color: #fff; opacity: 0.9; font-weight: 500; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem; }
.kb-cta .kb-wort { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.kb-cta:hover { opacity: 1; }
.kb-cta .kb-pfeil { transition: transform 0.15s ease; }
.kb-cta:hover .kb-pfeil { transform: translateX(2px); }
.kb-schliessen { position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: 0.8; padding: 0 0.3rem; }
.kb-schliessen:hover { opacity: 1; }
@media (max-width: 600px) {
.kampagne-banner { font-size: 0.8rem; padding: 0.55rem 2.4rem 0.55rem 0.8rem; gap: 0.6rem; }
.kb-inhalt { gap: 0.6rem; }
.kb-einheit { min-width: 2.1rem; padding: 0.15rem 0.32rem; }
.kb-zahl { font-size: 0.9rem; }
}
/* Landing: Streichpreis + Rabattpreis */
.preis-neu { color: inherit; }
/* Alter Preis: grau, quer (diagonal) durchgestrichen */
.preis-alt {
position: relative;
display: inline-block;
color: var(--farbe-text-hell);
text-decoration: none;
}
.preis-alt::after {
content: "";
position: absolute;
left: -0.08em;
right: -0.08em;
top: 50%;
border-top: 1.5px solid currentColor;
transform: rotate(-10deg);
}
/* Landing: dreizeiliger Rabatt-Block (alter Preis · "−X % für ein Jahr" · Rabattpreis groß) */
.paket-preis .preis-rabatt {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
line-height: 1.05;
}
.preis-alt-zeile {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 1.4rem;
font-weight: 600;
letter-spacing: 0;
}
.preis-badge {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #fb7185 0%, #e11d48 55%, #be123c 100%);
color: #fff;
font-size: 0.92rem;
font-weight: 600;
padding: 0.4rem 0.9rem 0.52rem 0.9rem;
border-radius: 999px;
letter-spacing: 0.02em;
white-space: nowrap;
box-shadow: 0 5px 14px -4px rgba(225, 29, 72, 0.55), inset 0 1px 0 rgba(255,255,255,0.25);
}
/* Durchlaufender Schimmer (Shine-Sweep) — wie das Leuchten der Paket-Karten */
.preis-badge::after {
content: "";
position: absolute;
top: 0;
left: -80%;
width: 55%;
height: 100%;
background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
transform: skewX(-20deg);
animation: preis-badge-schimmer 3s ease-in-out infinite;
}
@keyframes preis-badge-schimmer {
0% { left: -80%; }
55% { left: 135%; }
100% { left: 135%; }
}
@media (prefers-reduced-motion: reduce) {
.preis-badge::after { animation: none; display: none; }
}
.preis-neu-zeile { white-space: nowrap; }
/* Checkout: Kampagnen-Hinweis (automatisch angewendet) */
.gutschein-status.kampagne { color: var(--farbe-gruen-dunkel); font-weight: 600; }
/* Admin: Rabatttage — Paket-Rabatt-Zeilen */
.paket-rabatt-zeile { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; padding: 0.4rem 0; border-bottom: 1px solid var(--farbe-rand); }
.paket-rabatt-zeile:last-child { border-bottom: none; }
.paket-rabatt-zeile .pr-typ { max-width: 70px; }
.pr-vorschau { font-weight: 600; color: var(--farbe-gruen-dunkel); }
/* ============================================================
Lesezeichen — Button (Inhaltsseiten) + Nav-Icon mit Badge + Modal
Aktivfarbe bewusst ein warmes, helles Gelb (#F0B429) — NICHT das
Premium-Gold (#C9A227).
============================================================ */
/* Button in den .aktion-icons-Reihen: Outline → gefüllt mit Pop-Animation */
.aktion-lesezeichen svg { transition: fill 0.2s ease, stroke 0.2s ease; fill: transparent; }
.aktion-lesezeichen.aktiv { color: #F0B429; opacity: 1; }
.aktion-lesezeichen.aktiv svg { fill: #F0B429; stroke: #F0B429; }
.aktion-lesezeichen:hover:not(:disabled) { color: #F0B429; background: #fdf3d7; }
.aktion-lesezeichen.lz-pop svg { animation: lzPop 0.28s ease; }
@keyframes lzPop {
0% { transform: scale(1); }
40% { transform: scale(1.3); }
100% { transform: scale(1); }
}
/* Workshop-Seite: Aktions-Leiste als Fußzeile der Video-Karte —
getönter Streifen mit Trennlinie direkt unter dem Player (verbunden,
schwebt nicht frei im Raum) */
.workshop-aktionen {
justify-content: flex-end;
margin: 0;
padding: 0.55rem 0.9rem;
background: var(--farbe-getoent);
border-top: 1px solid var(--farbe-rand);
}
/* Workshop-Playlist (mehrtägige Workshops = mehrere Videos): Zeilen mit
Titel + Dauer, IN der Video-Karte zwischen Player und Aktions-Leiste.
Hairline-Trenner statt Mini-Karten (gleiche Anatomie wie die Panels). */
.workshop-playlist { border-top: 1px solid var(--farbe-rand); }
.playlist-zeile {
display: flex; align-items: center; gap: 0.85rem;
width: 100%; padding: 0.8rem 1.1rem;
background: none; border: 0; border-top: 1px solid var(--farbe-rand);
font-family: inherit; font-size: 0.95rem; color: var(--farbe-text);
text-align: left; cursor: pointer;
transition: background 0.15s ease;
}
.playlist-zeile:first-child { border-top: 0; }
.playlist-zeile:hover { background: var(--farbe-getoent); }
.playlist-zeile.aktiv { background: var(--akzent-zart, var(--farbe-gruen-zart)); }
.playlist-nummer {
display: grid; place-items: center; flex-shrink: 0;
width: 28px; height: 28px; border-radius: 50%;
background: var(--farbe-getoent); border: 1px solid var(--farbe-rand);
font-size: 0.8rem; font-weight: 700; color: var(--farbe-text-hell);
}
.playlist-zeile.aktiv .playlist-nummer {
background: var(--akzent, var(--farbe-gruen)); border-color: transparent; color: #fff;
}
.playlist-nummer svg { width: 13px; height: 13px; }
.playlist-titel { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist-zeile.aktiv .playlist-titel { color: var(--akzent-dunkel, var(--farbe-gruen-dunkel)); }
.playlist-dauer {
display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0;
font-size: 0.82rem; color: var(--farbe-text-hell);
}
.playlist-dauer svg { width: 14px; height: 14px; }
/* Nav: Lesezeichen-Icon rechts der Lupe (nutzt den Lupen-Knopf-Stil) */
.app-lz { position: relative; display: flex; align-items: center; }
/* Overlay = Schleier + Panel zusammen auf -Ebene (wie die Suche) —
das Panel darf NICHT in der Kopfzeile liegen: deren z-index/backdrop-filter
bildet einen Stacking-Context, der das Panel unter den Schleier legen würde */
.lz-overlay {
position: fixed; inset: 0; z-index: 300;
background: rgba(16, 24, 40, 0.18);
}
/* Panel: dropdown-artig unter dem Icon (Desktop) — --lz-rechts wird beim
Öffnen aus der Icon-Position gesetzt */
.lz-panel {
position: absolute; top: 70px; right: var(--lz-rechts, 1rem);
width: min(440px, calc(100vw - 2rem));
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand);
border-radius: var(--radius-gross);
box-shadow: 0 24px 60px -20px rgba(16, 24, 40, 0.3);
display: flex; flex-direction: column;
overflow: hidden;
}
.lz-kopf {
display: flex; align-items: center; justify-content: space-between;
padding: 1.2rem 1.35rem 0.8rem;
}
.lz-kopf strong { font-size: 1.1rem; font-weight: 700; }
.lz-schliessen {
border: none; background: none; cursor: pointer;
font-size: 1.25rem; line-height: 1; color: var(--farbe-text-hell);
padding: 0.15rem 0.35rem; border-radius: 8px;
}
.lz-schliessen:hover { color: var(--farbe-text); background: var(--farbe-getoent); }
.lz-tabs {
display: flex; gap: 0.3rem; padding: 0 1.1rem 0.85rem;
border-bottom: 1px solid var(--farbe-rand);
}
.lz-tab {
border: none; background: none; cursor: pointer; font: inherit;
font-size: 0.85rem; font-weight: 500; color: var(--farbe-text-hell);
padding: 0.35rem 0.75rem; border-radius: 999px;
transition: background 0.15s ease, color 0.15s ease;
}
.lz-tab:hover { color: var(--farbe-text); }
.lz-tab.aktiv { background: var(--farbe-getoent); color: var(--farbe-text); font-weight: 600; }
/* Mindesthöhe entspricht ca. 4 Einträgen — das Panel springt beim
Tab-Wechsel nicht und Leer-Zustände wirken nicht gequetscht */
.lz-liste {
min-height: 262px; max-height: 400px; overflow-y: auto; padding: 0.65rem;
display: flex; flex-direction: column;
}
.lz-leer {
flex: 1; display: flex; align-items: center; justify-content: center;
padding: 1rem; text-align: center;
font-size: 0.9rem; font-weight: 600; color: var(--farbe-text-hell);
}
/* Eintrag: gleiches Muster wie die Such-Treffer (Icon + Titel + Kontext),
X-Icon erscheint nur beim Hovern */
.lz-eintrag {
position: relative;
display: flex; align-items: center; gap: 0.75rem;
padding: 0.65rem 0.75rem; border-radius: var(--radius);
text-decoration: none; color: inherit;
transition: background 0.12s ease, opacity 0.18s ease, transform 0.18s ease;
}
.lz-eintrag:hover { background: var(--farbe-getoent); }
.lz-eintrag-icon {
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 8px;
background: var(--akzent-zart, var(--farbe-gruen-zart));
color: var(--akzent-dunkel, var(--farbe-gruen-dunkel));
}
.lz-eintrag-icon svg { width: 15px; height: 15px; }
.lz-eintrag-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.lz-eintrag-titel {
font-size: 0.9rem; font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lz-eintrag-kontext {
font-size: 0.76rem; color: var(--farbe-text-hell);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lz-entfernen {
flex-shrink: 0; opacity: 0; pointer-events: none;
border: none; background: none; cursor: pointer;
font-size: 1.1rem; line-height: 1; color: var(--farbe-text-hell);
width: 26px; height: 26px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.lz-eintrag:hover .lz-entfernen { opacity: 1; pointer-events: auto; }
.lz-entfernen:hover { color: var(--farbe-text); }
/* Fade-Out beim Entfernen */
.lz-eintrag.lz-raus { opacity: 0; transform: translateX(8px); pointer-events: none; }
/* Mobile: Panel als Bottom-Sheet (von unten, volle Breite) */
@media (max-width: 720px) {
.lz-panel {
position: fixed; top: auto; right: 0; left: 0; bottom: 0;
width: 100%; max-height: 76vh;
border-radius: 16px 16px 0 0; border-bottom: none;
}
.lz-liste { max-height: none; flex: 1; }
.lz-overlay { background: rgba(16, 24, 40, 0.35); }
}
/* ============================================================
Umfragen: Options-Liste + Popup (Dashboard) + öffentliche Seite
============================================================ */
.umfrage-optionen { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
/* Öffentliche Seite: Frage sitzt dicht über den Optionen (das Formular-Gap
übernimmt den Abstand — kein doppelter Leerraum) */
.umfrage-frage { font-weight: 600; text-align: left; margin: 0 0 0.9rem; line-height: 1.55; }
.nl-formular .umfrage-optionen { margin-top: 0; }
.umfrage-feld { display: flex; flex-direction: column; gap: 0.35rem; text-align: left; }
.umfrage-freitext {
padding: 0.85rem 1.1rem; border: 1px solid var(--farbe-rand); border-radius: var(--radius);
font: inherit; font-size: 1rem; background: var(--farbe-hintergrund);
min-height: 130px; resize: vertical;
}
.umfrage-freitext:focus { outline: none; border-color: var(--farbe-gruen); box-shadow: var(--ring); }
.umfrage-hinweis { font-size: 0.78rem; color: var(--farbe-text-hell); margin: 0; text-align: left; }
.umfrage-option {
display: flex; align-items: center; gap: 0.6rem;
border: 1px solid var(--farbe-rand); border-radius: var(--radius);
padding: 0.65rem 0.9rem; cursor: pointer; font-size: 0.95rem;
transition: border-color 0.12s ease, background 0.12s ease;
}
.umfrage-option:hover { background: var(--farbe-getoent); }
.umfrage-option:has(input:checked) { border-color: var(--farbe-gruen); background: var(--farbe-gruen-zart); }
.umfrage-option input { accent-color: var(--farbe-gruen); flex-shrink: 0; }
.modal.umfrage-modal { max-width: 560px; }
/* ============================================================
/excel — Themen-Landing (Excel)
Nur die Excel-EIGENEN Blöcke. Hero, Pakete, Bewertungen, FAQ und
„Über den Gründer" nutzen bewusst die Klassen der Homepage, damit die
beiden Seiten optisch nie auseinanderlaufen.
============================================================ */
/* Hero: dezentes Tabellen-Raster im Hintergrund (Excel-Anmutung) —
Zellen breiter als hoch, nach unten weich ausgeblendet. */
.ex-hero::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(to right, rgba(33, 115, 70, 0.07) 1px, transparent 1px),
linear-gradient(to bottom, rgba(33, 115, 70, 0.07) 1px, transparent 1px);
background-size: 52px 34px;
-webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 0%, #000 25%, transparent 72%);
mask-image: radial-gradient(ellipse 85% 75% at 50% 0%, #000 25%, transparent 72%);
}
/* --- „Im Überblick"-Fakten-Leiste (unter dem Hero) ---
Dezente Excel-Anmutung: hauchzartes Tabellenraster im Band, Häkchen als
runde grün getönte Plaketten, Hairlines wie Zell-Trenner zwischen den
Punkten — bewusst KEINE Karten/Boxen. 2×2 statt Flex-Wrap (vier Punkte
brechen sonst unschön in „drei plus einer" um). */
.ex-fakten-band {
padding: 1.6rem 0;
border-top: 1px solid var(--farbe-rand);
border-bottom: 1px solid var(--farbe-rand);
background:
linear-gradient(to right, rgba(33, 115, 70, 0.045) 1px, transparent 1px),
linear-gradient(to bottom, rgba(33, 115, 70, 0.045) 1px, transparent 1px),
var(--farbe-hintergrund);
background-size: 52px 34px;
}
.ex-fakten {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(2, minmax(0, 30rem));
justify-content: center;
}
.ex-fakten li {
display: flex; align-items: center; gap: 0.7rem;
padding: 0.75rem 1.8rem;
font-size: 0.95rem; font-weight: 600; color: var(--farbe-text);
}
/* Zell-Trenner: rechts nur in der linken Spalte, unten nur oberhalb der
letzten Zeile — robust bei beliebiger (admin-gepflegter) Anzahl. */
.ex-fakten li:nth-child(odd):not(:last-child) { border-right: 1px solid var(--farbe-rand); }
.ex-fakten li:nth-last-child(n+3) { border-bottom: 1px solid var(--farbe-rand); }
.ex-fakten li::before {
content: ''; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
background: rgba(33, 115, 70, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23217346' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / 11px auto no-repeat;
}
/* --- „Erkennst du dich wieder?" --- */
.ex-problem-liste {
list-style: none; margin: 2.5rem auto 0; padding: 0;
max-width: 720px; display: flex; flex-direction: column;
}
/* Bewusst OHNE Einzel-Boxen (die Seite hat genug Karten): schlichte Zeilen
mit Hairline-Trennern, wie das FAQ. */
.ex-problem {
display: flex; align-items: flex-start; gap: 0.95rem;
padding: 1.05rem 0.2rem;
border-top: 1px solid var(--farbe-rand);
line-height: 1.55;
}
.ex-problem:first-child { border-top: 0; }
.ex-problem-icon {
flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
display: grid; place-items: center;
background: var(--farbe-fehler); color: #fff;
}
.ex-problem-icon svg { width: 14px; height: 14px; }
/* --- Nutzen: bewusst KEINE Karten-Boxen — grüne Akzentkante links, runde
Icon-Plakette, Titel + Text daneben. Markup bleibt Icon + h3 + p (identisch
zum Listen-Renderer in seiten-inhalt.js), das Layout macht das CSS-Grid. --- */
.ex-vorteil-raster {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.8rem; margin-top: 2.5rem;
}
.ex-vorteil {
display: grid; grid-template-columns: auto 1fr; column-gap: 1.15rem;
align-items: start; text-align: left;
padding: 0.35rem 0.4rem 0.35rem 1.5rem;
border-left: 3px solid rgba(33, 115, 70, 0.45);
}
.ex-vorteil-icon {
grid-row: 1 / span 2;
display: grid; place-items: center; width: 44px; height: 44px;
border-radius: 50%;
background: rgba(33, 115, 70, 0.12); color: #217346;
}
.ex-vorteil-icon svg { width: 22px; height: 22px; }
.ex-vorteil h3 { grid-column: 2; font-size: 1.15rem; font-weight: 800; margin: 0.15rem 0 0.45rem; }
.ex-vorteil p { grid-column: 2; color: var(--farbe-text-hell); line-height: 1.65; margin: 0; }
/* --- Module (Kursaufbau) — Accordion wie auf der ursprünglichen Seite,
Mechanik identisch zum FAQ (0fr→1fr), aber als Karte mit Modul-Nummern. --- */
.ex-akkordeon {
max-width: 760px; margin: 2.5rem auto 0;
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross);
box-shadow: var(--schatten);
padding: 0.4rem 1.6rem;
}
.ex-akk { border-top: 1px solid var(--farbe-rand); }
.ex-akk:first-child { border-top: 0; }
.ex-akk-kopf {
width: 100%; cursor: pointer; padding: 1.1rem 0; font: inherit;
text-align: left; background: none; border: 0; color: var(--farbe-text);
display: flex; align-items: center; gap: 1.1rem;
}
.ex-modul-nr {
flex-shrink: 0; width: 2.2ch; font-size: 1.5rem; font-weight: 900; line-height: 1;
color: #217346; opacity: 0.4; letter-spacing: -0.03em;
transition: opacity 0.2s ease;
}
.ex-akk.offen .ex-modul-nr, .ex-akk-kopf:hover .ex-modul-nr { opacity: 1; }
.ex-akk-titel { flex-grow: 1; font-size: 1.08rem; font-weight: 800; }
.ex-akk.offen .ex-akk-titel { color: var(--farbe-gruen-tinte); }
.ex-akk-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s ease; }
.ex-akk.offen .ex-akk-wrap { grid-template-rows: 1fr; }
.ex-akk-inhalt { overflow: hidden; }
.ex-akk-inhalt p {
margin: 0; padding: 0 0 1.2rem calc(2.2ch + 1.1rem);
color: var(--farbe-text-hell); line-height: 1.65;
}
/* Bildspalte der zweispaltigen Blöcke (Zertifikat, Garantie).
Ohne feste Basis würde der Platzhalter im Flex-Layout auf Icon-Größe
zusammenschrumpfen — die Breite kommt aus --bild-breite (Admin). */
.ex-bildspalte {
flex: 0 0 var(--bild-breite, 40%);
aspect-ratio: 4 / 3;
max-width: none;
}
/* --- Häkchen-Liste (Zertifikat) --- */
.ex-liste {
list-style: none; margin: 1.2rem 0 0; padding: 0;
display: flex; flex-direction: column; gap: 0.55rem;
/* Text bleibt linksbündig, auch wenn der Block auf Mobil zentriert wird —
zentrierte Zeilen mit linksstehendem Häkchen sähen unruhig aus. */
text-align: left;
}
.ex-liste li { position: relative; padding-left: 1.7rem; color: var(--farbe-text-hell); line-height: 1.55; }
.ex-liste li::before {
content: ''; position: absolute; left: 0; top: 0.35em;
width: 12px; height: 7px; border-left: 2.2px solid var(--farbe-gruen);
border-bottom: 2.2px solid var(--farbe-gruen); transform: rotate(-45deg);
}
/* --- Arbeitgeber-Band (dunkel): Buttons nebeneinander --- */
.ex-ag-knoepfe { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 2rem; }
.btn-umriss-hell {
border: 1px solid rgba(255, 255, 255, 0.45); color: #fff; background: transparent;
}
.btn-umriss-hell:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
/* --- Geld-zurück-Garantie: dunkles Panel (Optik wie der Dashboard-Hero),
direkt vor den Paketen. --- */
/* Kein Abstand nach oben — „aus einem Guss" mit der Sektion darüber. */
.abschnitt.ex-garantie-sektion { padding-top: 0; }
.ex-garantie-panel {
position: relative; overflow: hidden;
background:
radial-gradient(75% 130% at 88% -10%, rgba(47, 122, 92, 0.55) 0%, transparent 60%),
radial-gradient(60% 110% at 0% 110%, rgba(23, 74, 56, 0.5) 0%, transparent 55%),
var(--farbe-gruen-tinte);
border-radius: var(--radius-gross);
padding: 3.2rem 3.6rem;
color: #fff;
}
.ex-garantie-wasserzeichen {
position: absolute; right: -34px; bottom: -56px;
width: 320px; height: 320px;
color: #fff; opacity: 0.08; pointer-events: none;
}
.ex-garantie-chip {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.45rem 1.05rem;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 999px;
font-size: 0.88rem; font-weight: 700; letter-spacing: 0.01em;
}
.ex-garantie-chip svg { width: 15px; height: 15px; color: #8fd0b6; flex-shrink: 0; }
.ex-garantie-panel h2 {
text-align: left; color: #fff;
font-size: clamp(1.7rem, 3vw, 2.3rem);
margin: 1.2rem 0 0.9rem;
}
.ex-garantie-text { max-width: 62ch; color: #9ec9b8; line-height: 1.7; font-size: 1.05rem; }
.ex-garantie-text strong { color: #fff; }
.ex-garantie-panel .btn { margin-top: 1.5rem; }
@media (max-width: 640px) {
.ex-akkordeon { padding: 0.2rem 1.1rem; }
.ex-ag-knoepfe .btn { width: 100%; }
.ex-garantie-panel { padding: 2.2rem 1.6rem; }
.ex-garantie-panel .btn { width: 100%; text-align: center; }
.ex-garantie-wasserzeichen { width: 220px; height: 220px; right: -60px; bottom: -80px; }
/* Gestapelt: Bild nicht mehr per Flex-Basis (% der Höhe), sondern zentriert
— gleiche Behandlung wie .bild-platzhalter-portrait. */
.ex-bildspalte { flex-basis: auto; width: min(100%, 340px); }
.ex-liste { max-width: max-content; margin-inline: auto; }
/* Fakten mobil: eine Spalte ohne Zell-Trenner */
.ex-fakten { grid-template-columns: auto; justify-items: start; }
.ex-fakten li { padding: 0.45rem 0; }
.ex-fakten li:nth-child(odd):not(:last-child) { border-right: 0; }
.ex-fakten li:nth-last-child(n+3) { border-bottom: 0; }
}
/* ============================================================
Mehrfach-Dropdown mit Chips (geteilter Admin-Baustein
erstelleMehrfachDropdown in admin.js — Newsletter-Kategorien,
Wissensgarantie-Inhalte). Select-Optik: Feld zeigt die Auswahl
als Chips, Klick öffnet ein Panel mit Checkboxen (.nl-msel-*)
============================================================ */
.nl-msel { position: relative; }
.nl-msel-feld {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
width: 100%;
min-height: 46px;
padding: 0.4rem 0.9rem;
border: 1px solid var(--farbe-rand);
border-radius: var(--radius);
background: var(--farbe-hintergrund);
font-size: 1rem;
font-family: inherit;
text-align: left;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.nl-msel.offen .nl-msel-feld { border-color: var(--farbe-gruen); box-shadow: var(--ring); }
.nl-msel-inhalt { display: flex; flex-wrap: wrap; gap: 0.35rem; min-width: 0; }
.nl-msel-platzhalter { color: var(--farbe-text-hell); }
.nl-msel-pfeil { flex-shrink: 0; color: var(--farbe-text-hell); transition: transform 0.2s ease; }
.nl-msel.offen .nl-msel-pfeil { transform: rotate(180deg); }
.nl-msel-chip {
display: inline-flex;
align-items: center;
gap: 0.15rem;
padding: 0.18rem 0.35rem 0.18rem 0.65rem;
border-radius: 999px;
background: var(--farbe-gruen-zart);
color: var(--farbe-gruen-dunkel);
font-size: 0.85rem;
font-weight: 600;
line-height: 1.4;
}
.nl-msel-chip-x {
border: 0;
background: none;
padding: 0 0.25rem;
color: inherit;
font-size: 1rem;
line-height: 1;
cursor: pointer;
border-radius: 50%;
opacity: 0.65;
}
.nl-msel-chip-x:hover { opacity: 1; }
.nl-msel-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 40;
background: var(--farbe-hintergrund);
border: 1px solid var(--farbe-rand);
border-radius: var(--radius);
box-shadow: var(--schatten-schwebend);
padding: 0.35rem;
max-height: 240px;
overflow-y: auto;
}
/* Höhere Spezifität als die globalen .formular-feld-Regeln (label = Block,
input = width:100%) — sonst zerfällt die Options-Zeile im Modal. */
.nl-msel-panel .nl-msel-option {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0;
padding: 0.5rem 0.6rem;
border-radius: 6px;
cursor: pointer;
font-size: 0.95rem;
font-weight: 400;
}
.nl-msel-panel .nl-msel-option:hover { background: var(--farbe-getoent); }
.nl-msel-panel .nl-msel-option input {
width: auto;
margin: 0;
flex-shrink: 0;
accent-color: var(--farbe-gruen);
cursor: pointer;
}
.nl-msel-leer { margin: 0; padding: 0.6rem; color: var(--farbe-text-hell); font-size: 0.9rem; }
/* ==================== /team: Manager-Übersicht (Panel-Layout) ====================
Nutzt das Panel-System des Dashboards (.panel/.panel-kopf/.panel-koerper).
Kennzahlen = EIN Panel mit 5 Segmenten, darunter zwei Zwei-Spalten-Reihen
(Hauptspalte ~61 % + Seitenschiene), Tabellen randlos im Panel. */
.team-kennzahlen { margin-bottom: 1.3rem; }
.team-kennzahlen .kennzahl-zeile { grid-template-columns: repeat(5, 1fr); }
.team-raster {
display: grid;
grid-template-columns: 1.55fr 1fr;
gap: 1.3rem;
margin-bottom: 1.3rem;
align-items: stretch;
}
.team-panel { margin-bottom: 1.3rem; }
.team-log-filter { margin-left: auto; max-width: 220px; }
/* Tabellen sitzen randlos im Panel; erste/letzte Spalte übernimmt den Panel-Einzug */
.panel-koerper--tabelle { padding: 0; }
.panel-koerper--tabelle .admin-tabelle th:first-child,
.panel-koerper--tabelle .admin-tabelle td:first-child { padding-left: 1.35rem; }
.panel-koerper--tabelle .admin-tabelle th:last-child,
.panel-koerper--tabelle .admin-tabelle td:last-child { padding-right: 1.35rem; }
/* --- „Team verwalten": drei Zonen mit Hairline-Trennern unter einem
Panel-Kopf (Lizenzstand + Aktion, Hinzufügen-Formular, randlose
Mitgliederliste). Gleiche Taktung wie der übrige Panel-Körper. --- */
.tv-zone { padding: 1.05rem 1.35rem 1.2rem; }
.tv-zone + .tv-zone { border-top: 1px solid #eef1f4; }
.tv-zone--tabelle { padding: 0; }
.tv-zone--tabelle .admin-tabelle th:first-child,
.tv-zone--tabelle .admin-tabelle td:first-child { padding-left: 1.35rem; }
.tv-zone--tabelle .admin-tabelle th:last-child,
.tv-zone--tabelle .admin-tabelle td:last-child { padding-right: 1.35rem; }
.tv-label {
margin: 0 0 0.6rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--farbe-text-hell);
}
.tv-lizenz-zeile {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem 1.5rem;
flex-wrap: wrap;
}
.tv-lizenz-zeile .btn { flex-shrink: 0; }
.tv-lizenz-links { min-width: 0; }
.tv-lizenz-stand { margin: 0 0 0.6rem; font-size: 1.02rem; }
.tv-lizenz-frei { margin-left: 0.45rem; font-size: 0.85rem; color: var(--farbe-text-hell); }
.tv-lizenz-frei.ist-voll { color: var(--farbe-fehler); font-weight: 600; }
.tv-lizenz-balken { width: min(340px, 100%); }
.tv-voll-hinweis { margin: 0.75rem 0 0; }
.tv-hinweis { margin-top: 0.65rem; }
#verw-meldung { margin-top: 0.5rem; }
.team-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.02em;
flex-shrink: 0;
background: var(--ta-zart, var(--farbe-gruen-zart));
color: var(--ta-farbe, var(--farbe-gruen-dunkel));
}
.team-avatar--klein { width: 30px; height: 30px; font-size: 0.68rem; }
.team-mitglied-zelle { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.team-mitglied-zelle .tabelle-sub { display: block; }
@media (max-width: 1080px) {
.team-kennzahlen .kennzahl-zeile { grid-template-columns: repeat(2, 1fr); }
.team-kennzahlen .kennzahl + .kennzahl { border-left: 0; }
.team-kennzahlen .kennzahl:nth-child(even) { border-left: 1px solid #eef1f4; }
.team-kennzahlen .kennzahl:nth-child(n+3) { border-top: 1px solid #eef1f4; }
}
@media (max-width: 900px) {
.team-raster { grid-template-columns: 1fr; }
.team-log-filter { max-width: 160px; }
}
/* ============================================================
DESIGN-SYSTEM 2.0 (08/2026) — portiert aus entwuerfe/stil.css
Surecart-Aufbau, eigene Farben, Schrift: Sofia Pro (Gewichte
gegenüber dem Entwurf eine Stufe reduziert, da Sofia Pro
dicker läuft als Geist/Figtree).
Steht bewusst am DATEIENDE: bei Namensgleichheit mit Alt-
Regeln gewinnt das neue System. Tokens im :root am Dateianfang.
Abschnitte wie im Entwurf: 2 Typografie · 3 Layout · 4 Kicker/
Chips/Schilder · 5 Buttons · 6 Kopfzeile · 7 Hero · 8 Karten/
Panels · 9 Zeilen · 10 Formulare · 11 Termine · 12 Slider ·
13 FAQ · 14 Fuß · 15 App · 16 Detailseiten · 17 Hilfeseiten ·
18 Mobil · 19 Checkout · 20 Anmeldung
============================================================ */
b,strong{font-weight:600}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.mitte{text-align:center}
.link-gruen{color:var(--gruen);font-weight:500}
.link-gruen:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--schrift);color:var(--text);font-weight:600;letter-spacing:-.022em}
h1{font-size:clamp(2.5rem,4.6vw,3.625rem);line-height:1.22;letter-spacing:-.03em}
h2{font-size:clamp(2rem,3.2vw,2.75rem);line-height:1.22}
h3{font-size:1.2rem;line-height:1.3}
h4{font-size:1.02rem;line-height:1.35}
/* Alt-Regel ».abschnitt h2« zentriert — im neuen System richtet der WRAPPER aus
(.mitte/.kopfblock.mitte = zentriert, sonst linksbündig) */
.abschnitt h2,.abschnitt-kurz h2{text-align:inherit}
/* Listen-Reset nur für System-Listen (globales list-style:none würde
Admin-Rich-Text wie Coaching/Kursinhalte die Punkte nehmen) */
.paket-liste,.haken-liste,.enthalten,.enthalten ul,.fuss-spalte ul,.rechtstext ul{list-style:none;padding-left:0}
/* ============================ 1 Tokens ============================ */
/* ======================= 2 Basis + Typografie ======================= */
/* (Resets liegen im Basis-Teil oben; hier nur die neue Skala) */
/* ============================ 3 Layout ============================ */
.huelle{max-width:var(--huelle);margin:0 auto;padding:0 24px}
.huelle-schmal{max-width:860px}
.abschnitt{padding:148px 0}
.abschnitt-kurz{padding:96px 0}
.abschnitt-grau{background:var(--grau-50)}
.abschnitt-creme{background:var(--creme)}
.kopfblock{max-width:760px}
.kopfblock.mitte{margin-inline:auto}
.unterzeile{margin-top:18px;font-size:1.08rem}
/* Zweispaltiger Abschnittskopf: Überschrift links, Beisatz rechts */
.kopf-duo{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end}
.kopf-duo p{font-size:1.06rem}
.raster-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
/* --spalten: Listen-Renderer (seiten-inhalt.js) setzen die Spaltenzahl auf die
tatsächliche Kartenzahl (max. 3) — bei nur 2 gepflegten Karten bleibt keine
leere Spalte stehen. Ohne Wert wie bisher 3; Mobile-Regeln (1fr) gewinnen. */
.raster-3{display:grid;grid-template-columns:repeat(var(--spalten,3),1fr);gap:20px}
.raster-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.duo>*{min-width:0}
.abstand-oben{margin-top:44px}
/* ==================== 4 Kicker, Chips, Schilder ==================== */
.kicker-pille{
display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:50px;
border:1px solid var(--rand-fest);background:#fff;
font-size:.87rem;font-weight:500;color:var(--text-hell);margin-bottom:20px;
}
.kicker-pille svg{width:15px;height:15px;color:var(--gruen)}
.kicker-pille.auf-dunkel{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#dcece5}
.kicker-pille.auf-dunkel svg{color:#8fd0b6}
.puls{width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.6);animation:puls 2s infinite;flex:none}
@keyframes puls{70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.zahl-chip{
display:inline-block;padding:2px 10px;border-radius:8px;background:var(--text);color:#fff;
font-family:var(--schrift);font-weight:600;letter-spacing:-.02em;
}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:50px;background:var(--gruen-zart);color:var(--gruen-dunkel);font-size:.78rem;font-weight:600}
.chip-grau{background:var(--grau-100);color:var(--text-hell)}
.chip-blau{background:var(--blau-zart);color:var(--blau)}
.chip-orange{background:var(--orange-zart);color:var(--orange)}
.chip-rot{background:var(--rot-zart);color:var(--rot)}
.schild{position:relative;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:50px;font-size:.73rem;font-weight:600}
.schild svg{width:12px;height:12px}
.schild-gruen{background:var(--gruen-zart);color:var(--gruen-dunkel)}
.schild-orange{background:var(--orange-zart);color:var(--orange)}
.schild-blau{background:var(--blau-zart);color:var(--blau)}
.sterne{color:#e0a41f;letter-spacing:2px}
.avatare{display:flex}
.avatare span{width:28px;height:28px;border-radius:50%;border:2px solid #fff;margin-right:-9px;display:grid;place-items:center;font-size:.64rem;font-weight:600;color:#fff;background:#15805f}
.avatare span:nth-child(2){background:#0f766e}
.avatare span:nth-child(3){background:#166534}
.avatare span:nth-child(4){background:#065f46;margin-right:0}
.avatare.auf-dunkel span{border-color:var(--tinte)}
/* ============================ 5 Buttons ============================ */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-size:1rem;font-weight:500;padding:16px 24px;border-radius:50px;transition:.18s;white-space:nowrap}
.knopf svg{width:17px;height:17px}
.knopf-primaer{background:var(--gruen);color:#fff}
.knopf-primaer:hover{background:var(--gruen-dunkel);transform:translateY(-1px)}
.knopf-zweit{background:#fff;color:var(--text);border:1px solid var(--rand-fest);box-shadow:var(--schatten)}
.knopf-zweit:hover{border-color:#c9d2cd}
.knopf-hell{background:#fff;color:var(--gruen);font-weight:600}
.knopf-hell:hover{transform:translateY(-1px)}
.knopf-geist{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28)}
.knopf-geist:hover{background:rgba(255,255,255,.08)}
.knopf-dunkel{background:var(--text);color:#fff}
.knopf-dunkel:hover{background:#000}
.knopf-klein{padding:12px 20px;font-size:.94rem}
.knopf-mini{padding:8px 15px;font-size:.86rem}
.knopf-block{width:100%}
/* ====================== 6 Kopfzeile + Navigation ====================== */
.kopf{position:sticky;top:0;z-index:60;background:var(--tinte);transition:.2s}
.kopf-inhalt{display:flex;align-items:center;gap:34px;height:78px}
/* Logo = alte Wortmarke (kein Zeichen-Quadrat davor — Entscheidung 08/2026).
Basis dunkel mit gruenem OS; weiß nur auf dunklen Köpfen (Tinte). */
.logo{display:inline-flex;align-items:center;font-family:var(--schrift);font-weight:900;font-size:1.45rem;color:var(--text);letter-spacing:-.02em}
.logo span,.logo .os{color:var(--gruen)}
.logo-zeichen{display:none}
.kopf:not(.kopf-hell):not(.kopf-schmal) .logo{color:#fff}
.kopf:not(.kopf-hell):not(.kopf-schmal) .logo .os,.kopf:not(.kopf-hell):not(.kopf-schmal) .logo span{color:#8fd0b6}
.haupt-nav{display:flex;align-items:center;gap:26px;margin-left:6px}
.nav-link{font-size:1rem;font-weight:500;color:rgba(255,255,255,.82)}
.nav-link:hover{color:#fff}
.nav-link.aktiv{color:#8fd0b6}
/* Aufklappbarer Navigationspunkt */
.nav-gruppe{position:relative}
.nav-knopf{display:flex;align-items:center;gap:6px;font-size:1rem;font-weight:500;color:rgba(255,255,255,.82)}
.nav-knopf svg{width:15px;height:15px;transition:.2s}
.nav-gruppe.offen .nav-knopf{color:#fff}
.nav-gruppe.offen .nav-knopf svg{transform:rotate(180deg)}
.nav-menue{
position:absolute;top:calc(100% + 18px);left:-20px;min-width:352px;padding:14px;z-index:70;
background:#fff;border:1px solid var(--rand);border-radius:18px;box-shadow:0 28px 56px -22px rgba(11,47,36,.34);
opacity:0;visibility:hidden;transform:translateY(-8px);transition:.18s;
}
.nav-gruppe.offen .nav-menue{opacity:1;visibility:visible;transform:none}
.nav-menue a{display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:12px;font-size:.97rem;font-weight:500;color:var(--text-hell)}
.nav-menue a:hover{background:var(--gruen-zart);color:var(--gruen-dunkel)}
.nm-icon{width:38px;height:38px;border-radius:11px;background:var(--grau-100);display:grid;place-items:center;color:var(--text-hell);flex:none}
.nm-icon svg{width:18px;height:18px}
.nav-menue a:hover .nm-icon{background:#fff;color:var(--gruen)}
.nm-text small{display:block;margin-top:3px;font-size:.83rem;font-weight:400;color:var(--text-zart);line-height:1.4}
.kopf-hell .nav-knopf{color:var(--text-hell)}
.kopf-hell .nav-gruppe.offen .nav-knopf{color:var(--gruen)}
.kopf-aktionen{margin-left:auto;display:flex;align-items:center;gap:18px}
.kopf-aktionen .knopf{padding:9px 18px;font-size:.97rem}
.nav-schalter{display:none;width:42px;height:42px;border-radius:11px;border:1px solid rgba(255,255,255,.25);place-items:center;color:#fff}
.nav-schalter svg{width:20px;height:20px}
/* Helle Variante: App-Bereich und Rechtstexte */
.kopf-hell{background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--rand)}
.kopf-hell .logo{color:var(--text)}
.kopf-hell .logo .os{color:var(--gruen)}
.kopf-hell .nav-link{color:var(--text-hell)}
.kopf-hell .nav-link:hover{color:var(--text)}
.kopf-hell .nav-link.aktiv{color:var(--gruen)}
.kopf-hell .nav-schalter{border-color:var(--rand-fest);color:var(--text)}
/* ============================ 7 Hero ============================ */
.hero{position:relative;overflow:hidden;background:var(--tinte);color:#a7c4b8;padding:96px 0 128px;text-align:center}
.hero-welle{position:absolute;inset:auto -25% -55% -25%;height:150%;border-radius:50%;background:rgba(255,255,255,.035)}
.hero-glanz{position:absolute;inset:-45% 25% auto 25%;height:560px;background:radial-gradient(50% 50% at 50% 50%,rgba(143,208,182,.16),transparent 70%)}
.hero-inhalt{position:relative}
.hero h1{color:#fff;max-width:min(100%,980px);margin:0 auto}
.hero h1 em{font-style:normal;color:#8fd0b6}
.hero-text{max-width:680px;margin:22px auto 0;font-size:1.12rem;color:#a7c4b8}
.hero-aktionen{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:36px}
.hero-vertrauen{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:28px;font-size:.95rem;color:#a7c4b8}
.punktzeile{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;margin-top:34px;position:relative}
.punkt{display:inline-flex;align-items:center;gap:9px;font-size:.97rem;font-weight:500;color:#dcece5}
.punkt svg{width:18px;height:18px;color:#8fd0b6;flex:none}
/* Geschwungener Übergang ins Weiß.
Breite über negative inset statt scaleX: dadurch flacht der Bogen auf
schmalen Bildschirmen automatisch ab, statt steil hochzuziehen. */
.hero-kurve{
position:absolute;inset:auto -12% -1px -12%;
height:clamp(30px,5vw,88px);background:#fff;
border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
.hero-kurve-grau{background:var(--grau-50)}
/* Linksbündige Variante (Unterseiten mit Beisatz rechts) */
.hero-links{text-align:left}
.hero-links .hero-inhalt{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end}
.hero-links h1{margin:0}
.hero-links .hero-text{margin:0}
/* Helle Variante: weißer Kopf, dunkle Schrift, feines Raster.
Damit sehen nicht alle Marketing-Seiten gleich aus. */
.hero-hell{background:#fff;color:var(--text-hell);border-bottom:1px solid var(--rand)}
.hero-hell h1{color:var(--text)}
.hero-hell h1 em{color:var(--gruen)}
.hero-hell .hero-text{color:var(--text-hell)}
.hero-hell .hero-welle{background:var(--gruen-zart);opacity:.55}
.hero-hell .hero-glanz{background:radial-gradient(50% 50% at 50% 50%,rgba(14,123,90,.10),transparent 70%)}
.hero-hell .punkt{color:var(--text-hell)}
.hero-hell .punkt svg{color:var(--gruen)}
.hero-hell .kicker-pille.auf-dunkel{background:var(--gruen-zart);border-color:rgba(14,123,90,.2);color:var(--gruen-dunkel)}
.hero-hell .kicker-pille.auf-dunkel svg{color:var(--gruen)}
.hero-hell .avatare span{border-color:#fff}
.hero-hell .hero-vertrauen{color:var(--text-hell)}
.hero-hell .knopf-geist{color:var(--text);border-color:var(--rand-fest);background:#fff}
.hero-hell .knopf-geist:hover{border-color:#c9d2cd}
.hero-hell .knopf-hell{background:var(--gruen);color:#fff}
.hero-hell .hero-kurve{background:var(--grau-50)}
.hero-raster{position:absolute;inset:0;opacity:.6;
background-image:linear-gradient(rgba(14,123,90,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(14,123,90,.06) 1px,transparent 1px);
background-size:96px 48px}
/* Mint-Variante: heller Grünschleier, für ruhige Seiten */
.hero-mint{background:var(--gruen-zart);color:var(--text-hell)}
.hero-mint h1{color:var(--text)}
.hero-mint h1 em{color:var(--gruen)}
.hero-mint .hero-text{color:var(--text-hell)}
.hero-mint .hero-welle{background:rgba(255,255,255,.6)}
.hero-mint .hero-glanz{background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.85),transparent 70%)}
.hero-mint .punkt{color:var(--text-hell)}
.hero-mint .punkt svg{color:var(--gruen)}
.hero-mint .kicker-pille.auf-dunkel{background:#fff;border-color:var(--rand-fest);color:var(--gruen-dunkel)}
.hero-mint .kicker-pille.auf-dunkel svg{color:var(--gruen)}
.hero-mint .avatare span{border-color:var(--gruen-zart)}
.hero-mint .hero-vertrauen{color:var(--text-hell)}
.hero-mint .knopf-hell{background:var(--gruen);color:#fff}
.hero-mint .knopf-geist{color:var(--text);border-color:rgba(14,123,90,.28);background:rgba(255,255,255,.5)}
.hero-mint .knopf-geist:hover{background:#fff}
.hero-mint .hero-kurve{background:#fff}
/* Creme-Variante: persönliche Seiten (Kontakt, Impressum, Teams) */
.hero-creme{background:var(--creme);color:var(--text-hell)}
.hero-creme h1{color:var(--text)}
.hero-creme h1 em{color:var(--gruen)}
.hero-creme .hero-text{color:var(--text-hell)}
.hero-creme .hero-welle{background:rgba(255,255,255,.5)}
.hero-creme .hero-glanz{background:radial-gradient(50% 50% at 50% 50%,rgba(247,236,220,.9),transparent 70%)}
.hero-creme .punkt{color:var(--text-hell)}
.hero-creme .punkt svg{color:var(--gruen)}
.hero-creme .kicker-pille.auf-dunkel{background:#fff;border-color:var(--rand-fest);color:var(--text-hell)}
.hero-creme .kicker-pille.auf-dunkel svg{color:var(--gruen)}
.hero-creme .avatare span{border-color:var(--creme)}
.brot{display:flex;align-items:center;gap:9px;font-size:.87rem;color:#88a99c;margin-bottom:20px}
.brot-mitte{justify-content:center}
.brot svg{width:12px;height:12px}
.brot a:hover{color:#fff}
.hero-links .brot{justify-content:flex-start}
.hero-creme .brot{color:var(--text-zart)}
.hero-creme .brot a:hover{color:var(--gruen)}
/* ======================= 8 Karten und Panels ======================= */
.karte{background:#fff;border:1px solid var(--rand-fest);border-radius:var(--radius);box-shadow:var(--schatten)}
.karte-kopf{display:flex;align-items:center;gap:12px;padding:20px 26px;border-bottom:1px solid var(--rand)}
.karte-ikone{width:36px;height:36px;border-radius:11px;background:var(--gruen-zart);color:var(--gruen);display:grid;place-items:center;flex:none}
.karte-ikone svg{width:18px;height:18px}
.karte-titel{font-family:var(--schrift);font-size:1.06rem;font-weight:600;color:var(--text);letter-spacing:-.018em}
.karte-koerper{padding:26px}
.karte-koerper--liste{padding:6px 0}
.karte-fuss{padding:18px 26px;border-top:1px solid var(--rand);background:var(--grau-50);font-size:.86rem;color:var(--text-zart);display:flex;align-items:center;gap:9px}
.karte-fuss svg{width:15px;height:15px;color:var(--gruen);flex:none}
/* Merkmal-Karte mit großer Icon-Kachel */
.merkmal{padding:30px 26px;background:#fff;border:1px solid var(--rand-fest);border-radius:var(--radius);transition:.18s}
.merkmal:hover{border-color:var(--gruen-rahmen);box-shadow:var(--schatten-karte);transform:translateY(-2px)}
.merkmal-icon{width:52px;height:52px;border-radius:15px;background:var(--gruen-zart);color:var(--gruen);display:grid;place-items:center;margin-bottom:18px}
.merkmal-icon svg{width:24px;height:24px}
.merkmal strong{display:block;font-family:var(--schrift);font-size:1.1rem;color:var(--text);margin-bottom:8px;letter-spacing:-.018em}
.merkmal p{font-size:.94rem;color:var(--text-zart);line-height:1.6}
/* Dunkles Band mitten auf der Seite */
.band-dunkel{position:relative;overflow:hidden;background:var(--tinte);color:#a7c4b8;padding:148px 0}
.band-glanz{position:absolute;inset:-40% 55% auto -15%;height:620px;background:radial-gradient(50% 50% at 50% 50%,rgba(143,208,182,.17),transparent 70%)}
.band-dunkel .huelle{position:relative}
.band-dunkel h2,.band-dunkel h3,.band-dunkel strong{color:#fff}
.band-icon{width:56px;height:56px;border-radius:16px;background:rgba(143,208,182,.14);color:#8fd0b6;display:grid;place-items:center;margin-bottom:22px}
.band-icon svg{width:26px;height:26px}
.band-titel{display:flex;align-items:center;gap:18px}
.band-titel .band-icon{margin-bottom:0;flex:none}
.band-titel h2{margin:0}
.glas-karte{padding:26px;border-radius:var(--radius);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
.glas-kopf{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.glas-punkt{width:26px;height:26px;border-radius:8px;background:rgba(143,208,182,.16);color:#8fd0b6;display:grid;place-items:center;font-family:var(--schrift);font-size:.76rem;font-weight:600;flex:none}
.glas-karte p{font-size:.94rem;color:#a7c4b8;line-height:1.6}
/* Platzhalter für Bilder */
.platzhalter{
border-radius:var(--radius);border:1px solid var(--rand-fest);
background:repeating-linear-gradient(45deg,var(--grau-50) 0 12px,#fff 12px 24px);
display:grid;place-items:center;align-content:center;gap:12px;color:#b6c0bb;
font-size:.86rem;font-weight:500;
}
.platzhalter svg{width:34px;height:34px;stroke-width:1.4}
.platzhalter-16-9{aspect-ratio:16/9}
.platzhalter-quadrat{aspect-ratio:1/1}
/* Motiv-Kachel: Platzhalterbild für Kurse, Sprints und Workshops.
Die Farbwelt richtet sich nach dem Programm, das Raster ist überall gleich. */
.motiv{position:relative;display:grid;place-items:center;overflow:hidden;color:#fff;background:linear-gradient(150deg,#12916b,#0b3a2c)}
.motiv::after{content:"";position:absolute;inset:0;opacity:.15;background:repeating-linear-gradient(0deg,rgba(255,255,255,.9) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,rgba(255,255,255,.9) 0 1px,transparent 1px 28px)}
.motiv>*{position:relative;z-index:1}
.motiv.excel{background:linear-gradient(150deg,#12916b,#0b3a2c)}
.motiv.daten{background:linear-gradient(150deg,#0f766e,#03403c)}
.motiv.ki{background:linear-gradient(150deg,#2E6BE6,#8B5CF6 55%,#EC4899)}
.motiv.office{background:linear-gradient(150deg,#0369a1,#032f4a)}
.motiv-nr{font-family:var(--schrift);font-size:2.4rem;font-weight:600;letter-spacing:-.05em;line-height:1}
.motiv-stufe{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.motiv.gross .motiv-nr{font-size:3rem}
.platzhalter-1-1{aspect-ratio:1/1}
.platzhalter-portrait{aspect-ratio:4/5}
/* Portrait mit versetzter Akzentfläche + überlappender Karte */
.portrait-rahmen{position:relative}
.portrait-rahmen::before{content:"";position:absolute;inset:26px -26px -26px 26px;border-radius:20px;background:linear-gradient(150deg,#c7e5d7,#e6f3ec)}
.portrait-rahmen .platzhalter{position:relative;background:#fff;border-radius:20px;box-shadow:var(--schatten-karte);color:var(--text-zart)}
.portrait-karte{
position:absolute;right:-30px;bottom:36px;z-index:2;display:flex;align-items:center;gap:12px;
padding:14px 18px;background:#fff;border:1px solid var(--rand-fest);border-radius:14px;box-shadow:var(--schatten-karte);
}
.portrait-karte b{display:block;font-family:var(--schrift);font-size:1.15rem;color:var(--text);letter-spacing:-.025em;line-height:1.1}
.portrait-karte span span{font-size:.78rem;color:var(--text-zart)}
/* Kennzahl-Kacheln */
.auszeichnungen{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.auszeichnung{padding:14px 20px;border:1px solid var(--rand-fest);border-radius:12px;background:#fff;text-align:center;min-width:118px}
.auszeichnung b{display:block;font-family:var(--schrift);font-size:1.3rem;color:var(--text);letter-spacing:-.03em}
.auszeichnung span{display:block;margin-top:2px;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-zart)}
/* Panel mit Rahmen (Für Teams, Hinweise) */
.panel-flaeche{padding:56px;border-radius:24px;background:var(--grau-50);border:1px solid var(--rand-fest)}
.haken-liste{display:grid;gap:14px;margin-top:24px}
.haken-liste li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;color:var(--text-hell)}
.haken{width:22px;height:22px;border-radius:7px;background:var(--gruen-zart);color:var(--gruen);display:grid;place-items:center;flex:none;margin-top:3px}
.haken svg{width:12px;height:12px}
.kennzahl-karte{padding:24px;background:#fff;border:1px solid var(--rand-fest);border-radius:16px;box-shadow:var(--schatten)}
.kennzahl-karte b{display:block;font-family:var(--schrift);font-size:2rem;color:var(--text);letter-spacing:-.035em;line-height:1}
.kennzahl-karte span{display:block;margin-top:6px;font-size:.92rem;color:var(--text-zart)}
/* Paket-Karten. Liegen hier und nicht in der Startseite, weil sie auf
jeder Verkaufsseite auftauchen und sonst auseinanderlaufen. */
.pakete{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:880px;margin:52px auto 0}
.paket{position:relative;background:#fff;border:1px solid var(--rand-fest);border-radius:var(--radius);padding:34px 32px;display:flex;flex-direction:column;box-shadow:var(--schatten)}
.paket-top{border:1px solid var(--gruen-rahmen);box-shadow:var(--schatten-karte)}
.paket-marke{position:absolute;top:-14px;left:32px;display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:50px;background:var(--gruen);color:#fff;font-size:.76rem;font-weight:600}
.paket-marke svg{width:13px;height:13px;flex:none}
.paket-name{font-family:var(--schrift);font-size:1.15rem;font-weight:600;color:var(--text);letter-spacing:-.02em}
.paket-preis{font-family:var(--schrift);font-size:2.75rem;font-weight:600;color:var(--text);letter-spacing:-.035em;margin:12px 0 4px;line-height:1}
.paket-preis small{font-size:1rem;font-weight:400;color:var(--text-zart);letter-spacing:0}
.paket-beschreibung{font-size:.97rem;margin:12px 0 24px;padding-bottom:24px;border-bottom:1px dashed var(--rand-fest)}
.paket-liste{display:grid;gap:12px;margin-bottom:30px}
.paket-liste li{display:flex;gap:11px;font-size:.97rem;color:var(--text-hell)}
.paket .knopf{margin-top:auto}
/* Mehr Substanz in den Paket-Karten, ohne Marktschreierei */
.paket-kopf{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.paket-kopf .paket-name{margin:0}
.paket-notiz{margin-left:auto;font-size:.78rem;font-weight:500;color:var(--text-zart)}
.paket-label{display:block;margin-bottom:14px;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-zart)}
.paket-fuss{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:.83rem;color:var(--text-zart)}
.paket-fuss svg{width:14px;height:14px;color:var(--gruen);flex:none}
/* ======================= 9 Listen und Zeilen ======================= */
.zeile{display:flex;align-items:center;gap:13px;padding:14px 26px;border-bottom:1px solid var(--rand);transition:.14s}
.zeile:last-child{border-bottom:0}
.zeile:hover{background:var(--grau-50)}
.zeile-ikone{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--gruen-zart);color:var(--gruen)}
.zeile-ikone svg{width:17px;height:17px}
.zeile-ikone.gross{width:44px;height:44px;border-radius:13px}
.zeile-ikone.gross svg{width:20px;height:20px}
.zeile-ikone.klein{width:28px;height:28px;border-radius:9px}
.zeile-ikone.klein svg{width:14px;height:14px}
.zeile-pfeil{width:30px;height:30px;border-radius:50%;background:var(--grau-100);color:var(--text-hell);display:grid;place-items:center;flex:none;transition:.16s}
.zeile:hover .zeile-pfeil{background:var(--gruen);color:#fff}
.zeile-pfeil svg{width:14px;height:14px}
.zeile-text{flex:1;min-width:0}
.zeile-text strong{display:block;font-size:.97rem;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zeile-meta{font-size:.83rem;color:var(--text-zart)}
.zeile-meta b{color:var(--text-hell);font-weight:600}
.zeile-zeit{font-size:.81rem;color:var(--text-zart);flex:none}
.marke{padding:4px 10px;border-radius:6px;background:var(--grau-100);font-size:.72rem;font-weight:600;color:var(--text-hell);flex:none}
/* Meta-Leiste mit Icons */
.meta-leiste{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:16px;padding-top:14px;border-top:1px solid var(--rand)}
.meta-leiste span{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;font-weight:500;color:var(--text-hell)}
.meta-leiste svg{width:15px;height:15px;color:var(--gruen);flex:none}
/* =========================== 10 Formulare =========================== */
.block-titel{display:flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--text-zart);margin:28px 0 14px}
.block-titel:first-child{margin-top:0}
.block-titel::after{content:"";flex:1;height:1px;background:var(--rand)}
.feld{margin-bottom:14px}
.feld label{display:block;font-size:.88rem;font-weight:500;color:var(--text);margin-bottom:6px}
.feld input,.feld select,.feld textarea{
width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--rand-fest);
background:#fff;font:inherit;font-size:.97rem;color:var(--text);transition:.15s;
}
.feld textarea{resize:vertical;min-height:104px}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--gruen);box-shadow:0 0 0 4px rgba(14,123,90,.10)}
.feld input::placeholder,.feld textarea::placeholder{color:#9aa3af}
.feld-hinweis{margin-top:6px;font-size:.83rem;color:var(--text-zart);line-height:1.5}
.feld-zeile{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.feld-zeile-plz{grid-template-columns:.42fr 1fr}
.mit-status{position:relative}
.mit-status .haken-feld{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:var(--gruen-zart);color:var(--gruen);display:grid;place-items:center}
.mit-status .haken-feld[hidden]{display:none}
.mit-status .haken-feld svg{width:12px;height:12px}
.zustimmung{display:flex;align-items:flex-start;gap:11px;margin-top:22px;font-size:.9rem;line-height:1.55}
.zustimmung input{width:18px;height:18px;margin-top:3px;accent-color:var(--gruen);flex:none}
.zustimmung a{color:var(--gruen);font-weight:500;text-decoration:underline}
.zustimmung.knapp{align-items:center;margin-top:0;font-size:.92rem;color:var(--text-hell);cursor:pointer}
.zustimmung.knapp input{width:17px;height:17px;margin-top:0}
.rechtlich{margin-top:12px;text-align:center;font-size:.84rem;color:var(--text-zart)}
/* Auswahl-Kacheln (Zahlart, Paket) */
.wahl{display:grid;gap:12px}
.wahl-option{display:flex;align-items:center;gap:14px;padding:18px 20px;border:1px solid var(--rand-fest);border-radius:12px;background:#fff;cursor:pointer;transition:.16s}
.wahl-option:hover{border-color:#c9d2cd}
.wahl-option.aktiv{border-color:var(--gruen-rahmen);box-shadow:0 0 0 3px rgba(14,123,90,.10)}
.wahl-option input{width:19px;height:19px;accent-color:var(--gruen);flex:none}
.wahl-text{flex:1;min-width:0}
.wahl-text strong{display:block;font-family:var(--schrift);font-size:1rem;color:var(--text);letter-spacing:-.015em}
.wahl-text span{font-size:.86rem;color:var(--text-zart)}
/* Segment-Umschalter */
.segment{display:inline-flex;gap:4px;padding:4px;border-radius:40px;background:#fff;border:1px solid var(--rand-fest)}
.segment button{padding:9px 20px;border-radius:100px;font-size:.94rem;font-weight:500;color:var(--text-hell);transition:.16s}
.segment button:hover{color:var(--text)}
.segment button.aktiv{background:var(--gruen);color:#fff}
/* Filter-Tabs */
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tabs button{padding:10px 16px;border-radius:999px;background:var(--grau-50);font-size:.82rem;font-weight:500;color:var(--text);letter-spacing:.02em;transition:.16s}
.tabs button:hover{background:var(--grau-100)}
.tabs button.aktiv{background:var(--gruen);color:#fff}
/* Summenzeilen */
.summe-zeile{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 0;font-size:.95rem}
.summe-zeile span:last-child{font-variant-numeric:tabular-nums;font-weight:500;color:var(--text)}
.summe-zeile.rabatt span,.summe-zeile.rabatt span:last-child{color:var(--gruen)}
.trenner{border:0;border-top:1px dashed var(--rand-fest);margin:12px 0}
.gesamt{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:6px}
.gesamt span:first-child{font-family:var(--schrift);font-size:1.05rem;font-weight:600;color:var(--text)}
.gesamt span:last-child{font-family:var(--schrift);font-size:1.9rem;font-weight:600;color:var(--text);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.steuer-hinweis{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--grau-50);border:1px solid var(--rand);font-size:.84rem;line-height:1.5}
/* ========================= 11 Termin-Zeilen ========================= */
.termine{display:grid;gap:12px}
.termin{background:#fff;border:1px solid var(--rand-fest);border-radius:var(--radius);overflow:hidden;transition:.18s}
.termin:hover{border-color:#c9d2cd}
.termin.offen{border-color:var(--gruen-rahmen);box-shadow:var(--schatten)}
.termin-kopf{width:100%;display:flex;align-items:center;gap:14px;padding:18px 22px;text-align:left;flex-wrap:wrap}
.td-haupt{display:grid;gap:4px;min-width:0;flex:1}
.td-titel{font-family:var(--schrift);font-size:1.06rem;font-weight:600;color:var(--text);letter-spacing:-.02em}
.termin:hover .td-titel{color:var(--gruen)}
.td-datum{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--schrift);font-size:1.05rem;font-weight:600;color:var(--text);letter-spacing:-.02em}
.td-datum-sub{font-size:.93rem;font-weight:500;color:var(--text-hell);font-family:var(--schrift);letter-spacing:0}
.td-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:50px;background:var(--grau-100);font-size:.79rem;font-weight:500;color:var(--text-hell);flex:none}
.td-chip svg{width:13px;height:13px}
.td-frei{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:50px;background:var(--gruen-zart);color:var(--gruen-dunkel);font-size:.8rem;font-weight:600;flex:none;margin-left:auto}
.td-frei.knapp{background:var(--orange-zart);color:var(--orange)}
.td-frei.voll{background:var(--grau-100);color:var(--text-zart)}
.td-pfeil{width:26px;height:26px;border-radius:50%;background:var(--grau-100);display:grid;place-items:center;flex:none;transition:.2s}
.td-pfeil::before{content:"";width:7px;height:7px;border-right:2px solid var(--text-hell);border-bottom:2px solid var(--text-hell);transform:rotate(45deg) translate(-2px,-2px)}
.termin.offen .td-pfeil{background:var(--gruen);transform:rotate(180deg)}
.termin.offen .td-pfeil::before{border-color:#fff}
.termin-detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.termin.offen .termin-detail{grid-template-rows:1fr}
.termin-detail>div{overflow:hidden}
.detail-inhalt{display:flex;gap:32px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;padding:20px 22px;border-top:1px dashed var(--rand-fest)}
.sessions-titel{display:block;font-size:.77rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-zart);margin-bottom:9px}
.session{display:flex;align-items:center;gap:11px;padding:6px 0;font-size:.94rem}
.session-nr{width:24px;height:24px;border-radius:7px;background:var(--gruen-zart);color:var(--gruen-dunkel);display:grid;place-items:center;font-size:.75rem;font-weight:600;flex:none}
.session b{font-weight:500;color:var(--text)}
.termin-aktion{display:grid;justify-items:end;gap:11px}
.termin-preis{font-family:var(--schrift);font-size:1.5rem;font-weight:600;color:var(--text);letter-spacing:-.03em;text-align:right}
.termin-preis small{display:block;font-family:var(--schrift);font-size:.77rem;font-weight:400;color:var(--text-zart);letter-spacing:0}
.monat{margin-bottom:40px}
.monat-titel{display:flex;align-items:center;gap:14px;font-family:var(--schrift);font-size:1.15rem;font-weight:600;color:var(--text);letter-spacing:-.02em;margin-bottom:16px}
.monat-titel::after{content:"";flex:1;height:1px;background:var(--rand)}
.monat-anzahl{order:3;padding:3px 12px;border-radius:50px;background:var(--grau-100);font-family:var(--schrift);font-size:.79rem;font-weight:500;color:var(--text-hell);letter-spacing:0}
/* ==================== 12 Bewertungen und Slider ==================== */
.bew-kopf{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:end}
.bew-beisatz{display:flex;align-items:center;gap:14px}
.bew-beisatz p{font-size:1rem}
/* Achtung: overflow-x:auto klippt auch senkrecht. Ohne Luft im Container
schneidet die Kante den Kartenschatten ab. Deshalb Innenabstand rundum
und der gleiche Wert als negativer Außenabstand zurück. */
.slider{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:14px 8px 30px;margin:34px -8px 0}
.slider::-webkit-scrollbar{display:none}
.stimme{
position:relative;flex:0 0 clamp(280px,31%,380px);scroll-snap-align:start;background:#fff;
border:1px solid var(--rand-fest);border-radius:var(--radius);padding:30px 28px 26px;
box-shadow:var(--schatten);display:flex;flex-direction:column;gap:16px;
}
.stimme::before{content:"”";position:absolute;top:6px;right:22px;font-family:var(--schrift);font-size:5rem;line-height:1;color:var(--gruen-zart)}
.stimme-text{position:relative;font-size:1rem;color:var(--text);line-height:1.6}
.stimme-fuss{margin-top:auto;padding-top:15px;border-top:1px solid var(--rand)}
.slider-steuerung{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.pfeil{width:40px;height:40px;border-radius:50%;border:1px solid var(--rand-fest);background:#fff;display:grid;place-items:center;color:var(--text-hell);transition:.16s}
.pfeil:hover{border-color:var(--gruen);color:var(--gruen)}
.pfeil svg{width:16px;height:16px}
/* Logo-Laufband */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-spur{display:flex;gap:56px;width:max-content;animation:lauf 42s linear infinite}
.marquee:hover .marquee-spur{animation-play-state:paused}
.marquee-spur span{font-family:var(--schrift);font-size:1.12rem;font-weight:500;color:#9aa4a0;white-space:nowrap;letter-spacing:-.01em}
@keyframes lauf{to{transform:translateX(-50%)}}
/* Programm-Laufband: Zeilen mit Icon, Name und Kurztext */
.tool-marquee{overflow:hidden;padding:12px 0 26px;margin-bottom:-14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tool-spur{display:flex;gap:16px;width:max-content;animation:lauf 46s linear infinite}
.tool-marquee:hover .tool-spur{animation-play-state:paused}
.tool-zeile{
display:flex;align-items:center;gap:14px;padding:16px 22px 16px 16px;background:#fff;
border:1px solid var(--rand-fest);border-radius:14px;text-align:left;min-width:290px;box-shadow:var(--schatten);
}
.tool-zeile strong{display:block;font-family:var(--schrift);font-size:1rem;color:var(--text);letter-spacing:-.015em}
.tool-zeile span span{display:block;font-size:.85rem;color:var(--text-zart);line-height:1.45}
.tk{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--tc,#0e7b5a);color:#fff;font-family:var(--schrift);font-weight:600;font-size:1.02rem;flex:none}
.tk svg{width:58%;height:58%}
/* Wechselnde Karten (Funktionen-Rotator) */
.rotator-buehne{display:grid}
.rotator-karte{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease,visibility 0s .22s}
.rotator-karte.aktiv{opacity:1;visibility:visible;transform:none;transition:opacity .34s ease .2s,transform .34s ease .2s,visibility 0s}
.rotator-steuerung{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:44px}
.punkt-nav{width:8px;height:8px;border-radius:50%;background:#d3dad6;transition:.2s}
.punkt-nav.aktiv{background:var(--gruen);width:26px;border-radius:50px}
/* ============================= 13 FAQ ============================= */
.faq-duo{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.faq-kopf p{margin-top:16px;font-size:1.04rem}
.faq{display:grid;gap:12px}
.faq-eintrag{border:1px solid var(--rand-fest);border-radius:14px;background:#fff;overflow:hidden;transition:.2s}
.faq-eintrag.offen{border-color:var(--gruen-rahmen);box-shadow:var(--schatten-karte)}
.faq-frage{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;text-align:left;font-family:var(--schrift);font-weight:500;font-size:1.05rem;color:var(--text);letter-spacing:-.015em}
.faq-icon{width:22px;height:22px;flex:none;position:relative}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;background:var(--gruen);border-radius:2px;transition:.22s}
.faq-icon::before{top:10px;left:2px;width:18px;height:2px;transform:none}
.faq-icon::after{top:2px;left:10px;width:2px;height:18px;transform:none}
.faq-eintrag.offen .faq-icon::after{transform:rotate(90deg);opacity:0}
.faq-eintrag.offen .faq-icon::before{transform:none}
.faq-antwort{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.faq-eintrag.offen .faq-antwort{grid-template-rows:1fr}
.faq-antwort>div{overflow:hidden}
.faq-antwort p{padding:0 24px 22px;font-size:.99rem}
.faq-antwort p+p{padding-top:0;margin-top:-8px}
/* ============ 14 Abschluss-Band, Trust-Leiste, Fußzeile ============ */
.cta-band{position:relative;overflow:hidden;background:var(--tinte);color:#a7c4b8;padding:118px 0;text-align:center}
.cta-welle{position:absolute;inset:-40% -20% auto -20%;height:150%;border-radius:50%;background:rgba(255,255,255,.04)}
.cta-band .huelle{position:relative}
.cta-band h2{color:#fff}
.cta-band p{max-width:560px;margin:18px auto 32px}
.cta-klein{margin-top:18px;font-size:.92rem;color:#7fa696}
.cta-klein a{color:#fff;text-decoration:underline}
.trust-leiste{background:var(--grau-fuss);border-bottom:1px solid var(--rand);padding:26px 0}
.trust-inhalt{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.trust{display:inline-flex;align-items:center;gap:11px;font-size:1rem;font-weight:500;color:var(--text-hell)}
.trust svg{width:20px;height:20px;color:var(--gruen)}
.fuss{background:var(--grau-fuss);padding:48px 0}
.hilfe{text-align:center;padding-bottom:44px;border-bottom:1px solid var(--rand);margin-bottom:30px}
.hilfe strong{display:block;font-family:var(--schrift);font-size:1.3rem;color:var(--text);margin-bottom:10px;letter-spacing:-.02em}
.hilfe p{max-width:520px;margin:0 auto 24px}
.fuss-spalten{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-bottom:36px;border-bottom:1px solid var(--rand);margin-bottom:26px}
.fuss-spalte h4{font-family:var(--schrift);font-size:1rem;color:var(--text);margin-bottom:14px}
.fuss-spalte a{display:block;padding:5px 0;font-size:.93rem;color:var(--text-zart)}
.fuss-spalte a:hover{color:var(--gruen)}
.fuss-inhalt{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:.92rem;color:var(--text-zart)}
.fuss-inhalt nav{display:flex;gap:24px;flex-wrap:wrap}
.fuss-inhalt nav a:hover{color:var(--gruen)}
/* ========================= 15 App-Bereich ========================= */
.app-nav{display:flex;align-items:center;gap:4px;margin-left:10px}
.app-nav a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:50px;font-size:.94rem;font-weight:500;color:var(--text-hell);transition:.15s}
.app-nav a:hover{background:var(--grau-100);color:var(--text)}
.app-nav a.aktiv{background:var(--gruen-zart);color:var(--gruen-dunkel)}
.app-nav svg{width:17px;height:17px}
.rund-knopf{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid var(--rand-fest);background:#fff;display:grid;place-items:center;color:var(--text-hell);transition:.15s}
.rund-knopf:hover{border-color:var(--gruen);color:var(--gruen)}
.rund-knopf svg{width:18px;height:18px}
.zaehler{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#f0b429;color:#3d2c00;font-size:.65rem;font-weight:600;display:grid;place-items:center}
.profil-knopf{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;border-radius:50px;border:1px solid var(--rand-fest);background:#fff;transition:.15s}
.profil-knopf:hover{border-color:#c9d2cd}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--gruen);color:#fff;display:grid;place-items:center;font-size:.75rem;font-weight:600}
.profil-knopf span{font-size:.9rem;font-weight:500;color:var(--text)}
.app-haupt{background:var(--grau-50);min-height:70vh;padding:36px 0 80px}
.app-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.app-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gruen);margin-bottom:10px}
.app-kicker svg{width:14px;height:14px}
.app-kopf h1{font-size:clamp(1.7rem,3vw,2.15rem)}
.app-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:.94rem;color:var(--text-zart)}
.stapel{display:grid;gap:20px}
.stapel>*{min-width:0}
.spalten{display:grid;grid-template-columns:62fr 38fr;gap:20px;align-items:start}
.spalten>*{min-width:0}
.panel{background:#fff;border:1px solid var(--rand-fest);border-radius:var(--radius);box-shadow:var(--schatten);overflow:hidden}
.panel-kopf{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--rand);flex-wrap:wrap}
.panel-ikone{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--gruen-zart);color:var(--gruen)}
.panel-ikone svg{width:17px;height:17px}
.panel-titel{font-family:var(--schrift);font-size:1.02rem;font-weight:600;color:var(--text);letter-spacing:-.015em}
.panel-link{margin-left:auto;font-size:.88rem;font-weight:500;color:var(--gruen)}
.panel-link:hover{text-decoration:underline}
.panel-koerper{padding:22px}
.panel-koerper--liste{padding:6px 0}
.akzent-coach{border-color:rgba(201,162,39,.4)}
.akzent-coach .panel-ikone{background:var(--gold-zart);color:var(--gold)}
/* Farbtöne für Zeilen- und Panel-Icons (nach beiden Basisklassen) */
.z-workshops{background:var(--indigo-zart);color:var(--indigo)}
.z-sprints{background:var(--petrol-zart);color:var(--petrol)}
.z-vorlagen{background:var(--orange-zart);color:var(--orange)}
.z-zertifikat{background:var(--gold-zart);color:#a1741a}
.z-lesezeichen{background:#fef6e0;color:#b07d0a}
.z-serie{background:#fdece0;color:#c2410c}
/* Fortschritt */
.balken-spur{display:block;height:8px;border-radius:50px;background:var(--grau-100);overflow:hidden}
.balken-fuellung{display:block;height:100%;border-radius:50px;background:var(--gruen)}
/* Inhalts-Karten */
.inhalt-karte{background:#fff;border:1px solid var(--rand-fest);border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten);transition:.18s;display:flex;flex-direction:column;padding:0;gap:0}
.inhalt-karte:hover{transform:translateY(-3px);border-color:var(--gruen-rahmen)}
.vorschau{aspect-ratio:16/9;display:grid;place-items:center;border-bottom:1px solid var(--rand);background:repeating-linear-gradient(45deg,var(--grau-50) 0 12px,#fff 12px 24px);color:#b6c0bb}
.vorschau svg{width:34px;height:34px}
.karte-inhalt{padding:16px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.inhalt-chip{align-self:flex-start;padding:3px 10px;border-radius:50px;background:var(--gruen-zart);color:var(--gruen-dunkel);font-size:.72rem;font-weight:600}
.k-workshops .inhalt-chip{background:var(--indigo-zart);color:var(--indigo)}
.k-sprints .inhalt-chip{background:var(--petrol-zart);color:var(--petrol)}
.k-workshops .vorschau{color:#a9aee0}
.k-sprints .vorschau{color:#9dc2cc}
.karte-inhalt h3{font-size:1rem;letter-spacing:-.015em}
.karte-inhalt p{font-size:.87rem;color:var(--text-zart);line-height:1.5}
.pille{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:50px;background:var(--grau-100);font-size:.75rem;font-weight:500;color:var(--text-hell);align-self:flex-start;margin-top:auto}
.pille svg{width:13px;height:13px}
/* Gleicher Grund wie beim .slider: Luft für den Schatten */
.scroller{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px 8px 26px;margin:-10px -8px -14px}
.scroller::-webkit-scrollbar{display:none}
.scroller .inhalt-karte{flex:0 0 268px;scroll-snap-align:start}
.reihe-kopf{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.reihe-titel{font-family:var(--schrift);font-size:1.15rem;font-weight:600;color:var(--text);letter-spacing:-.02em}
.reihe-steuerung{margin-left:auto;display:flex;gap:8px}
/* App-Tabs (Einstellungen) */
.app-tabs{display:flex;gap:6px;border-bottom:1px solid var(--rand);margin-bottom:28px;overflow-x:auto;scrollbar-width:none}
.app-tabs::-webkit-scrollbar{display:none}
.app-tabs button{padding:14px 18px;font-size:.98rem;font-weight:500;color:var(--text-hell);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:.15s}
.app-tabs button:hover{color:var(--text)}
.app-tabs button.aktiv{color:var(--gruen);border-bottom-color:var(--gruen)}
.tab-seite{display:none}
.tab-seite.aktiv{display:block}
/* Tabelle */
.tabelle{width:100%;border-collapse:collapse;font-size:.94rem}
.tabelle th{text-align:left;padding:12px 16px;font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-zart);border-bottom:1px solid var(--rand)}
.tabelle td{padding:14px 16px;border-bottom:1px solid var(--rand);color:var(--text-hell)}
.tabelle tr:last-child td{border-bottom:0}
.tabelle tbody tr:hover{background:var(--grau-50)}
.tabelle b{color:var(--text)}
/* Rechtstext */
.rechtstext{max-width:760px;margin:0 auto}
.rechtstext h2{font-size:1.5rem;margin:44px 0 14px}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{font-size:1.1rem;margin:26px 0 8px}
.rechtstext p{margin-bottom:14px}
.rechtstext ul{display:grid;gap:8px;margin:0 0 16px 0}
.rechtstext li{display:flex;gap:11px}
.rechtstext li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gruen);flex:none;margin-top:11px}
.rechtstext .haken-liste li::before{display:none}
.rechtstext a{color:var(--gruen);font-weight:500}
.rechtstext a:hover{text-decoration:underline}
.rechts-block{padding:24px 26px;background:var(--grau-50);border:1px solid var(--rand);border-radius:var(--radius);margin-bottom:24px}
.rechts-block p{margin-bottom:6px}
.rechts-block p:last-child{margin-bottom:0}
/* ============= 16 Detailseiten: Kurs, Sprint, Workshop ============= */
/* Alle drei sind gleich aufgebaut. Der Unterschied ist nur die
Akzentfarbe, gesetzt über .typ-kurs / .typ-sprint / .typ-workshop. */
.typ-kurs{--akzent:var(--gruen);--akzent-dunkel:var(--gruen-dunkel);--akzent-zart:var(--gruen-zart)}
.typ-sprint{--akzent:var(--petrol);--akzent-dunkel:#0a5a70;--akzent-zart:var(--petrol-zart)}
.typ-workshop{--akzent:var(--indigo);--akzent-dunkel:#4338ca;--akzent-zart:var(--indigo-zart)}
/* Klebende Leiste über dem Inhalt */
.slugleiste{position:sticky;top:70px;z-index:50;background:#fff;border-bottom:1px solid var(--rand)}
.slugleiste-inhalt{display:flex;align-items:center;gap:18px;padding:15px 0;flex-wrap:wrap}
.slug-zurueck{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500;color:var(--text-hell);flex:none}
.slug-zurueck svg{width:16px;height:16px}
.slug-zurueck:hover{color:var(--akzent)}
.slugleiste h1{font-size:1.2rem;letter-spacing:-.022em}
.slug-chip{background:var(--akzent-zart);color:var(--akzent-dunkel)}
.slug-stand{margin-left:auto;display:flex;align-items:center;gap:13px;min-width:210px;flex:none}
.slug-stand .balken-spur{flex:1;height:7px}
.slug-stand .balken-fuellung{background:var(--akzent)}
.slug-stand b{font-family:var(--schrift);font-size:.9rem;color:var(--akzent);flex:none}
.slug-stand span{font-size:.85rem;color:var(--text-zart);flex:none}
.slug-meta{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:.86rem;color:var(--text-zart);flex:none}
.slug-meta svg{width:15px;height:15px;color:var(--akzent)}
/* Zwei Spalten */
.slug-spalten{display:grid;grid-template-columns:1fr 356px;gap:28px;align-items:start;padding:30px 0 80px}
.slug-spalten>*{min-width:0}
/* Player */
.player{background:#08241c;border-radius:var(--radius);overflow:hidden;border:1px solid var(--rand-fest);box-shadow:var(--schatten-karte)}
.player iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
/* Kopf unter dem Video */
.slug-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:18px 22px;margin-top:24px;flex-wrap:wrap}
.slug-kopf>div:first-child{flex:1;min-width:min(100%,320px)}
.slug-kopf .aktionen{margin-left:auto}
.slug-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.77rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--akzent);margin-bottom:9px}
.slug-kicker svg{width:14px;height:14px}
.slug-kopf h2{font-size:1.5rem;letter-spacing:-.025em}
/* Aktionsleiste */
.aktionen{display:flex;align-items:center;gap:8px;flex:none}
.aktion{width:42px;height:42px;border-radius:50%;border:1px solid var(--rand-fest);background:#fff;display:grid;place-items:center;color:var(--text-hell);transition:.15s}
.aktion:hover{border-color:var(--akzent);color:var(--akzent)}
.aktion.aktiv{background:var(--akzent-zart);border-color:var(--akzent);color:var(--akzent-dunkel)}
.aktion.lesezeichen.aktiv{background:#fef6e0;border-color:#f0b429;color:#b07d0a}
.aktion svg{width:19px;height:19px}
/* Feste Mindestbreite + zentrierter Inhalt: Der Wechsel „Als erledigt
markieren" → „Erledigt" ändert die Knopfbreite NICHT mehr — vorher sprang
beim Klick die ganze Titelzeile um (Layout-Shift bei jedem Abschluss). */
.erledigt-knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 22px;height:42px;min-width:212px;border-radius:50px;font-size:.94rem;font-weight:500;background:var(--akzent);color:#fff;transition:.16s}
.erledigt-knopf:hover{background:var(--akzent-dunkel)}
.erledigt-knopf.fertig{background:var(--akzent-zart);color:var(--akzent-dunkel)}
.erledigt-knopf svg{width:17px;height:17px}
/* Textblöcke unter dem Video */
.slug-block{margin-top:32px;padding-top:26px;border-top:1px solid var(--rand)}
.slug-block h3{font-size:1.02rem;margin-bottom:14px}
.slug-text{font-size:1rem;line-height:1.72}
.slug-text p{margin-bottom:12px}
.slug-text p:last-child{margin-bottom:0}
/* Downloads */
.download-zeile{display:flex;align-items:center;gap:13px;padding:14px 18px;border:1px solid var(--rand-fest);border-radius:12px;transition:.14s;margin-bottom:10px}
.download-zeile:last-child{margin-bottom:0}
.download-zeile:hover{border-color:var(--akzent);background:var(--grau-50)}
.datei-icon{width:40px;height:40px;border-radius:11px;background:var(--akzent-zart);color:var(--akzent-dunkel);display:grid;place-items:center;flex:none}
.datei-icon svg{width:19px;height:19px}
.download-zeile strong{display:block;font-size:.96rem;font-weight:500;color:var(--text)}
.download-zeile span span{font-size:.83rem;color:var(--text-zart)}
.download-pfeil{margin-left:auto;width:34px;height:34px;border-radius:50%;background:var(--grau-100);display:grid;place-items:center;color:var(--text-hell);flex:none}
.download-zeile:hover .download-pfeil{background:var(--akzent);color:#fff}
.download-pfeil svg{width:16px;height:16px}
/* Notiz, eingeklappt */
.notiz-block{margin-top:20px;border:1px solid var(--rand-fest);border-radius:var(--radius);padding:0 20px}
.notiz-block summary{display:flex;align-items:center;gap:10px;padding:15px 0;font-size:.95rem;font-weight:500;color:var(--text-hell);cursor:pointer;list-style:none}
.notiz-block summary::-webkit-details-marker{display:none}
.notiz-block summary svg{width:16px;height:16px;color:var(--text-zart)}
.notiz-block[open] summary{color:var(--text);border-bottom:1px solid var(--rand);margin-bottom:18px}
.notiz-block[open]{padding-bottom:20px}
.notiz-feld{width:100%;min-height:140px;padding:15px;border-radius:12px;border:1px solid var(--rand-fest);font:inherit;font-size:.97rem;resize:vertical}
.notiz-feld:focus{outline:none;border-color:var(--akzent);box-shadow:0 0 0 3px var(--akzent-zart)}
/* Vorherige und nächste: bewusst leise, nur Textzeilen */
.weiter-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:36px;padding-top:20px;border-top:1px solid var(--rand)}
.weiter-link{display:inline-flex;align-items:center;gap:10px;font-size:.93rem;color:var(--text-zart);min-width:0}
.weiter-link:hover{color:var(--akzent)}
.weiter-link svg{width:15px;height:15px;flex:none}
.weiter-link b{font-weight:500;color:var(--text-hell);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.weiter-link:hover b{color:var(--akzent)}
.weiter-link.rechts{margin-left:auto;text-align:right}
/* Seitenspalte: Liste der Teile */
/* Bewusst NICHT sticky: unter dem Kursinhalt liegen weitere Panels
(Auf einen Blick, Teilnahmezertifikat) — ein haftender Kursinhalt
schob sich beim Scrollen über sie. */
.teile{max-height:calc(100vh - 168px);overflow-y:auto;scrollbar-width:thin}
.teile-kopf{padding:12px 20px;border-bottom:1px solid var(--rand)}
.teile-kopf strong{display:block;font-family:var(--schrift);font-size:1.02rem;color:var(--text);letter-spacing:-.018em}
.teile-kopf span{display:block;margin-top:2px;font-size:.85rem;color:var(--text-zart)}
.teile-gruppe{border-bottom:1px solid var(--rand)}
.teile-gruppe:last-child{border-bottom:0}
.gruppe-kopfzeile{width:100%;display:flex;align-items:center;gap:12px;padding:13px 20px;text-align:left;transition:.14s}
.gruppe-kopfzeile:hover{background:var(--grau-50)}
.gruppe-nr{width:26px;height:26px;border-radius:9px;background:var(--grau-100);color:var(--text-hell);display:grid;place-items:center;font-size:.75rem;font-weight:600;flex:none}
.teile-gruppe.fertig .gruppe-nr{background:var(--akzent);color:#fff}
.teile-gruppe.offen .gruppe-nr{background:var(--akzent-zart);color:var(--akzent-dunkel)}
.teile-gruppe.fertig.offen .gruppe-nr{background:var(--akzent);color:#fff}
.gruppe-nr svg{width:13px;height:13px}
.gruppe-text{flex:1;min-width:0}
.gruppe-text strong{display:block;font-size:.93rem;font-weight:500;color:var(--text);line-height:1.35}
.gruppe-text span{font-size:.79rem;color:var(--text-zart)}
.gruppe-stand{font-size:.76rem;font-weight:600;color:var(--text-zart);flex:none;padding:2px 8px;border-radius:50px;background:var(--grau-100)}
.teile-gruppe.fertig .gruppe-stand{background:var(--akzent-zart);color:var(--akzent-dunkel)}
.gruppe-pfeil{width:18px;height:18px;display:grid;place-items:center;flex:none;transition:.2s;color:var(--text-zart)}
.gruppe-pfeil::before{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.teile-gruppe.offen .gruppe-pfeil{transform:rotate(180deg);color:var(--akzent)}
.gruppe-liste{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.teile-gruppe.offen .gruppe-liste{grid-template-rows:1fr}
.gruppe-liste>div{overflow:hidden;padding-bottom:6px}
.teil{display:flex;align-items:center;gap:11px;padding:9px 20px 9px 26px;font-size:.9rem;color:var(--text-hell);transition:.14s;border-left:3px solid transparent}
.teil:hover{background:var(--grau-50)}
.teil.aktiv{background:var(--akzent-zart);border-left-color:var(--akzent);color:var(--akzent-dunkel);font-weight:500}
.teil-status{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--rand-fest);display:grid;place-items:center;flex:none;color:transparent}
.teil.fertig .teil-status{background:var(--akzent);border-color:var(--akzent);color:#fff}
.teil.aktiv .teil-status{border-color:var(--akzent);background:#fff;color:var(--akzent)}
.teil-status svg{width:10px;height:10px}
.teil-name{flex:1;min-width:0}
.teil-dauer{font-size:.78rem;color:var(--text-zart);flex:none}
.teile-fuss{padding:14px 20px;border-top:1px solid var(--rand);background:var(--grau-50);display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--text-zart)}
.teile-fuss svg{width:16px;height:16px;color:var(--akzent);flex:none}
/* Kurze Info-Liste in der Seitenspalte (Workshop) */
.info-zeile{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--rand);font-size:.92rem}
.info-zeile:last-child{border-bottom:0}
.info-zeile svg{width:16px;height:16px;color:var(--akzent);flex:none}
.info-zeile span{color:var(--text-zart)}
.info-zeile b{margin-left:auto;font-family:var(--schrift);font-weight:500;color:var(--text);text-align:right}
/* ============== 17 Hilfe- und Infoseiten (ein Muster) ============== */
/* technik, storno, termingarantie, wissensgarantie, rechnungslegung:
gleicher Kopf, gleiche Textbreite, gleiche Bausteine. */
.hilfe-huelle{max-width:812px;margin:0 auto;padding:0 24px}
.hilfe-kopf{padding:56px 0 40px;border-bottom:1px solid var(--rand)}
.hilfe-kopf h1{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.hilfe-kopf p{margin-top:14px;font-size:1.06rem;max-width:640px}
.hilfe-seite{padding:56px 0 96px}
.hilfe-seite .rechtstext{max-width:812px;margin:0 auto}
.zurueck{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;font-weight:500;color:var(--gruen);margin-bottom:22px}
.zurueck svg{width:15px;height:15px}
.zurueck:hover{gap:11px}
.info-kasten{padding:20px 24px;border-radius:12px;background:var(--grau-50);border:1px solid var(--rand);margin:28px 0}
.info-kasten p{font-size:.97rem}
/* Hinweiskasten in Blau, für Wissensgarantie-Bezüge */
.wg-kasten{display:flex;gap:16px;align-items:flex-start;padding:22px 26px;border-radius:var(--radius);background:var(--blau-zart);border:1px solid rgba(3,105,161,.18);margin:24px 0}
.wg-kasten-icon{width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid rgba(3,105,161,.22);color:var(--blau);display:grid;place-items:center;flex:none}
.wg-kasten-icon svg{width:20px;height:20px}
.wg-kasten strong{display:block;font-family:var(--schrift);font-weight:600;color:#0c4a6e;letter-spacing:-.015em;margin-bottom:4px}
.wg-kasten p{font-size:.97rem;color:#0c4a6e;margin:0;line-height:1.6}
.wg-kasten a{color:var(--blau);font-weight:500}
.wg-kasten a:hover{text-decoration:underline;text-underline-offset:3px}
.wg-schild{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--blau);color:#fff;vertical-align:-7px;margin-right:10px}
.wg-schild svg{width:14px;height:14px}
/* Filterzeile über Listen (Kurse, Termine) */
.filter-zeile{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:32px}
.filter-info{font-size:.94rem;color:var(--text-zart)}
/* Person: Referent, Trainer, Gründer */
.person{display:flex;align-items:center;gap:16px}
.person-bild{width:64px;height:64px;border-radius:50%;background:linear-gradient(150deg,#0e7b5a,#12916b);color:#fff;display:grid;place-items:center;font-family:var(--schrift);font-size:1.2rem;font-weight:600;flex:none}
.person-bild.zart{background:var(--gruen-zart);color:var(--gruen-dunkel)}
.person b{display:block;font-family:var(--schrift);font-size:1.06rem;color:var(--text);letter-spacing:-.018em}
.person p,.person-rolle{display:block;margin-top:5px;font-size:.95rem;color:var(--text-zart);line-height:1.55}
.person.klein{gap:13px}
.person.klein .person-bild{width:48px;height:48px;font-size:.95rem}
.person.klein b{font-size:1rem}
.person.klein p,.person.klein .person-rolle{font-size:.88rem;margin-top:3px}
.person.mini{gap:12px}
.person.mini .person-bild{width:36px;height:36px;font-size:.78rem}
.person.mini b{font-size:.95rem;font-weight:500;font-family:inherit;letter-spacing:0}
.person.mini p,.person.mini .person-rolle{font-size:.83rem;margin-top:1px}
.person.dunkel b{color:#fff}
.person.dunkel p,.person.dunkel .person-rolle{color:rgba(255,255,255,.62)}
/* Zertifikat: gleiche Karte auf Kurs- und Sprint-Seite */
.zert-panel .panel-koerper{text-align:center;padding:26px 24px}
.zert-siegel{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:var(--grau-100);color:var(--text-zart)}
.zert-siegel svg{width:24px;height:24px}
.zert-panel strong{display:block;font-family:var(--schrift);font-size:1.05rem;color:var(--text);letter-spacing:-.02em}
.zert-panel p{font-size:.9rem;color:var(--text-zart);margin:6px 0 16px;line-height:1.55}
.zert-panel .knopf{width:100%;justify-content:center}
.zert-panel .knopf[disabled]{background:var(--grau-100);border-color:transparent;color:var(--text-zart);cursor:default;box-shadow:none}
.zert-panel.frei .zert-siegel{background:var(--gold-zart);color:#a1741a}
.zert-panel.frei p{color:var(--text-hell)}
.person-karte{padding:24px 26px;border:1px solid var(--rand-fest);border-radius:var(--radius);background:#fff}
/* ============================ 18 Mobil ============================ */
@media (max-width:1080px){
.kopf-duo,.duo,.faq-duo,.bew-kopf,.hero-links .hero-inhalt{grid-template-columns:1fr;gap:40px}
.raster-4{grid-template-columns:repeat(2,1fr)}
.raster-3{grid-template-columns:1fr}
.spalten{grid-template-columns:1fr}
.fuss-spalten{grid-template-columns:repeat(2,1fr)}
.portrait-rahmen{max-width:380px}
.portrait-karte{right:0}
.slug-spalten{grid-template-columns:1fr}
.teile{position:static;max-height:none}
.slugleiste{position:static}
}
@media (max-width:760px){
.abschnitt,.band-dunkel{padding:92px 0}
.abschnitt-kurz{padding:64px 0}
.hero{padding:64px 0 96px}
/* Die Ellipse wird auf schmalen Schirmen sonst steil und schneidet durch den
Text. Größerer seitlicher Überstand macht den Bogen flach. */
.hero-welle{inset:auto -110% -30% -110%;height:120%}
.hero-glanz{inset:-30% -10% auto -10%;height:420px}
.haupt-nav,.kopf-aktionen .knopf,.profil-knopf span:not(.avatar){display:none}
.nav-schalter{display:grid}
/* Die App-Navigation bleibt auf dem Handy erhalten und rutscht als
scrollbare Zeile unter das Logo. */
.kopf-inhalt:has(.app-nav){flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:12px;gap:12px}
.app-nav{order:3;width:100%;margin-left:0;overflow-x:auto;scrollbar-width:none}
.app-nav::-webkit-scrollbar{display:none}
.app-nav a{flex:none}
/* Logo und Aktionen sollen in EINER Zeile bleiben, darunter die Navigation */
.kopf-inhalt:has(.app-nav) .kopf-aktionen{gap:8px}
.kopf-inhalt:has(.app-nav) .logo{font-size:1.05rem}
.profil-knopf{padding:4px}
.rund-knopf{width:36px;height:36px}
.raster-2,.raster-3,.raster-4,.pakete{grid-template-columns:1fr}
.feld-zeile,.feld-zeile-plz{grid-template-columns:1fr}
.panel-flaeche{padding:32px 24px}
/* Filter-Tabs scrollen seitlich, statt in zwei Zeilen umzubrechen */
.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;white-space:nowrap}
.stimme{flex:0 0 84%}
.scroller .inhalt-karte{flex:0 0 78%}
.cta-band{padding:80px 0}
.termin-aktion{justify-items:start;width:100%}
.td-frei{margin-left:0}
.slug-kopf{flex-direction:column}
.aktionen{width:100%;flex-wrap:wrap}
.slug-stand,.slug-meta{margin-left:0;width:100%}
.weiter-nav{flex-direction:column;align-items:flex-start;gap:12px}
.weiter-link.rechts{margin-left:0}
.fuss-spalten{grid-template-columns:1fr}
.fuss-inhalt{flex-direction:column;text-align:center}
.trust-inhalt{gap:14px}
}
/* ====================== 19 Checkout-Muster ====================== */
/* Paket-Checkout und Workshop-Buchung teilen sich Kopfzeile,
Schrittanzeige, Zweispalter und Bestellübersicht. */
.kopf-schmal{background:#fff;border-bottom:1px solid var(--rand);position:sticky;top:0;z-index:60}
.kopf-schmal .kopf-inhalt{height:72px}
.kopf-schmal .logo{color:var(--text)}
.kopf-schmal .logo .os{color:var(--gruen)}
.sicher{margin-left:auto;display:inline-flex;align-items:center;gap:9px;font-size:.88rem;font-weight:500;color:var(--text-hell)}
.sicher svg{width:17px;height:17px;color:var(--gruen)}
.schritte{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 0 0}
.schritt-punkt{display:inline-flex;align-items:center;gap:10px;font-size:.9rem;color:var(--text-zart)}
.schritt-punkt b{width:24px;height:24px;border-radius:50%;background:var(--grau-100);color:var(--text-zart);display:grid;place-items:center;font-size:.78rem;font-weight:600}
.schritt-punkt.aktiv{color:var(--text);font-weight:500}
.schritt-punkt.aktiv b{background:var(--gruen);color:#fff}
.schritt-strich{flex:1;min-width:20px;height:1px;background:var(--rand-fest)}
.checkout{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:start;padding:48px 24px 96px}
.checkout>*{min-width:0}
.zurueck-paket{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500;color:var(--text-hell);margin-bottom:18px}
.zurueck-paket:hover{color:var(--gruen)}
.zurueck-paket svg{width:15px;height:15px}
.bestellung{position:sticky;top:104px}
.artikel{display:flex;gap:16px;align-items:flex-start;padding-bottom:18px;border-bottom:1px dashed var(--rand-fest);margin-bottom:18px}
.artikel-text strong{display:block;font-family:var(--schrift);font-size:1.05rem;color:var(--text);letter-spacing:-.018em}
.artikel-text span{display:block;font-size:.88rem;color:var(--text-zart);margin-top:3px}
.enthalten{margin-top:18px;padding-top:16px;border-top:1px dashed var(--rand-fest)}
.enthalten strong{display:block;font-size:.78rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--text-zart);margin-bottom:11px}
.enthalten li{display:flex;gap:10px;font-size:.9rem;color:var(--text-hell);margin-bottom:8px}
.enthalten li:last-child{margin-bottom:0}
.enthalten svg{width:14px;height:14px;color:var(--gruen);flex:none;margin-top:4px}
.zahl-marke{display:inline-flex;align-items:center;gap:11px;font-family:var(--schrift);font-size:1.05rem;font-weight:600;color:var(--text);letter-spacing:-.018em}
.zahl-marke svg{width:26px;height:26px;color:var(--text-hell)}
.anbieter{margin-left:auto;font-family:var(--schrift);font-size:.86rem;font-weight:600;letter-spacing:-.01em;color:var(--text-zart)}
.wahl-option.aktiv .anbieter{color:var(--text-hell)}
.wahl-option.aktiv .zahl-marke svg{color:var(--gruen)}
.badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.badge{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:50px;background:var(--grau-50);border:1px solid var(--rand);font-size:.82rem;font-weight:500;color:var(--text-hell)}
.badge svg{width:14px;height:14px;color:var(--gruen)}
.summen-leiste{display:none}
@media (max-width:1080px){
.checkout{grid-template-columns:1fr;gap:28px}
.bestellung{position:static;order:-1}
}
@media (max-width:760px){
.summen-leiste{display:flex;align-items:center;gap:16px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px 20px;background:#fff;border-top:1px solid var(--rand-fest);box-shadow:0 -8px 24px -12px rgba(11,47,36,.3)}
.summen-leiste b{font-family:var(--schrift);font-size:1.15rem;color:var(--text)}
.summen-leiste small{display:block;font-size:.78rem;color:var(--text-zart)}
.summen-leiste .knopf{margin-left:auto}
.hat-summen-leiste{padding-bottom:76px}
.schritte{font-size:.85rem}
}
/* ====================== 20 Anmelde-Muster ======================= */
/* Login und Passwort setzen teilen sich den Zweispalter:
Formular links, dunkle Markenseite rechts. */
.login-seite{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:#fff}
.login-seite>*{min-width:0}
.login-links{display:flex;flex-direction:column;padding:36px clamp(24px,5vw,72px) 44px}
.login-links .logo{color:var(--text)}
.login-links .logo .os{color:var(--gruen)}
.login-mitte{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:420px;width:100%;margin:0 auto;padding:48px 0}
.login-mitte h1{font-size:clamp(1.7rem,2.6vw,2.1rem);letter-spacing:-.03em}
.login-mitte>p{margin-top:10px;font-size:1rem}
.login-form{display:grid;gap:4px;margin-top:30px}
.login-form .knopf{width:100%;justify-content:center;margin-top:6px}
.feld-kopf{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.feld-kopf label{margin:0}
.feld-kopf a{font-size:.86rem;font-weight:500;color:var(--gruen)}
.feld-kopf a:hover{text-decoration:underline}
.oder-trenner{display:flex;align-items:center;gap:16px;margin:26px 0;color:var(--text-zart);font-size:.86rem}
.oder-trenner::before,.oder-trenner::after{content:"";flex:1;height:1px;background:var(--rand-fest)}
.knopf-magic{width:100%;justify-content:center;gap:10px}
.knopf-magic svg{width:17px;height:17px}
.login-fuss{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.85rem;color:var(--text-zart)}
.login-fuss a{color:var(--text-zart)}
.login-fuss a:hover{color:var(--text-hell)}
.login-rechts{position:relative;overflow:hidden;background:var(--tinte);color:#fff;display:flex;align-items:center;padding:64px clamp(32px,4.5vw,80px)}
.login-rechts::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(14,123,90,.5),transparent 68%);top:-220px;right:-200px}
.login-rechts::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(14,123,90,.32),transparent 70%);bottom:-200px;left:-160px}
.login-marke{position:relative;z-index:2;max-width:460px}
.login-marke .kicker{color:#8fd0b6}
.login-marke blockquote{font-family:var(--schrift);font-size:clamp(1.4rem,2.2vw,1.85rem);font-weight:500;line-height:1.35;letter-spacing:-.028em;margin:18px 0 24px}
.login-zahlen{display:flex;flex-wrap:wrap;gap:36px;margin-top:44px;padding-top:32px;border-top:1px solid rgba(255,255,255,.14)}
.login-zahlen b{display:block;font-family:var(--schrift);font-size:1.7rem;font-weight:600;letter-spacing:-.035em}
.login-zahlen span{font-size:.86rem;color:rgba(255,255,255,.62)}
@media (max-width:960px){
.login-seite{grid-template-columns:1fr}
.login-rechts{display:none}
.login-links{min-height:100vh}
}
/* ---- Fußzeile: Andocken am Seitenende (body ist Flex-Spalte, s. Basis-Teil) ---- */
.fuss{margin-top:auto}
.trust-leiste{margin-top:auto}
.trust-leiste~.fuss{margin-top:0}
.fuss-schlicht{padding:26px 0;border-top:1px solid var(--rand)}
.fuss-schlicht .fuss-inhalt{font-size:.86rem}
/* aspect-ratio statt height:100%: Im Grid-Elternteil (.person-bild,
place-items:center) löst height:100% nicht auf — ein nicht-quadratisches
Foto wurde zur überstehenden Ellipse (z. B. Trainer-Hinweis auf /live/:slug).
Mit 1:1 + cover ist der Avatar immer ein sauberer Kreis. */
.person-bild-img{width:100%;aspect-ratio:1/1;height:auto;border-radius:50%;object-fit:cover;display:block}
/* ---- Navigation: hydriertes Klappmenü ohne Icons + mobiles Menü-Panel ---- */
.nav-menue-schlicht{min-width:240px}
.nav-menue-schlicht a{padding:10px 14px}
@media (max-width:760px){
.kopf.nav-offen .haupt-nav{
display:flex;flex-direction:column;align-items:stretch;gap:2px;
position:absolute;top:100%;left:0;right:0;margin:0;padding:10px 24px 22px;
background:var(--tinte);border-bottom:1px solid rgba(255,255,255,.14);
box-shadow:0 30px 40px -24px rgba(0,0,0,.5);z-index:59;
}
.kopf-hell.nav-offen .haupt-nav,.kopf-schmal.nav-offen .haupt-nav{background:#fff;border-bottom:1px solid var(--rand);box-shadow:0 30px 40px -24px rgba(11,47,36,.25)}
/* Alt-Regeln blenden .nav-link/.nav-gruppe mobil aus — im offenen Panel erzwingen */
.kopf.nav-offen .haupt-nav .nav-link{display:flex;padding:11px 0}
.kopf.nav-offen .haupt-nav .nav-gruppe{display:block}
.kopf.nav-offen .haupt-nav .nav-knopf{display:flex;width:100%;padding:11px 0}
.kopf.nav-offen .nav-gruppe{position:static}
.kopf.nav-offen .nav-menue{position:static;box-shadow:none;transform:none;transition:none;display:none;opacity:1;visibility:visible;margin:6px 0 10px}
.kopf.nav-offen .nav-gruppe.offen .nav-menue{display:block}
}
/* ---- Funktionen-Rotator (Landing): neue .duo-Karten in der Bühne ---- */
.fn-rotator-buehne{display:grid}
.fn-rotator-buehne>.fn-rotator-karte{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease,visibility 0s .22s;pointer-events:none}
.fn-rotator-buehne>.fn-rotator-karte.aktiv{opacity:1;visibility:visible;transform:none;transition:opacity .34s ease .2s,transform .34s ease .2s,visibility 0s;pointer-events:auto}
.fn-punkte.rotator-steuerung{margin-top:44px}
/* Gepflegte Fotos (data-lp-foto) füllen auch die neuen .platzhalter sauber */
.platzhalter{overflow:hidden}
.platzhalter .lp-foto{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;min-width:0}
/* ---- App-Shell: Feinschliff aufs Design-System 2.0 (Legacy-Klassen) ---- */
.app-nav-link{border-radius:50px;font-weight:500}
.app-suche-knopf{width:38px;height:38px;border:1px solid var(--rand-fest);background:#fff;color:var(--text-hell)}
.app-suche-knopf:hover{border-color:var(--gruen);color:var(--gruen);background:#fff}
.app-profil .profil-knopf{border:1px solid var(--rand-fest);background:#fff;border-radius:50px;padding:5px 12px 5px 5px}
/* Der body ist eine Flex-Spalte (Sticky-Footer). Flex-Kinder mit
margin-inline:auto SCHRUMPFEN auf Inhaltsbreite statt zu stretchen —
deshalb hier explizit volle Breite für zentrierte Direkt-Kinder
(Ursache des 300px-Hero-Videos auf der Startseite). */
body:not(.admin-body) > main,
body:not(.admin-body) > .huelle,
body:not(.admin-body) > .hero-video-halter,
body:not(.admin-body) > .danke { width: 100%; }
|