/* ========================================================================== Komponenten — apr training (Look 2.0) Mobile-first: Basis-Regeln gelten für Mobilgeräte, min-width Media Queries schalten Desktop-Verbesserungen dazu. Nutzt ausschließlich Tokens aus tokens.css (siehe Variablen --color-*, --glass-*, --glow-*, --space-*, --fs-*, --radius-*). Die fünf Stil-Entscheidungen von Look 2.0, damit sie beim Ändern nicht versehentlich zurückgedreht werden: 1. Aurora — fixe Ebene mit drei diagonalen Teal-Lichtbahnen direkt nach , dazu Hero-Kuppel und Fuß-Glow im body-Hintergrund. Kein Punkt-Glow, keine Flecken. 2. Glas — jede Box ist dieselbe Milchglas-Linse: --glass-bg, --glass-line, --glass-shadow, Blur 26px. Kein Verlauf, kein Box-Glow. Hervorgehobene Karten nur mit Teal-Rand. 3. Header — Pille, max 1260px, 17px Polster, Teal-Rand, Leuchtlinie an der Unterkante, Teal-Schatten nach unten. 4. Buttons — durchgehend Ghost-Teal: Tönung, Teal-Rand, Teal-Text; erst im Hover füllt die Fläche auf und ein dezenter Glow kommt dazu. Keine gefüllten Teal-Flächen mehr. 5. Icons — freie Linien-SVGs (Strich 1.8, currentColor) mit Neon- Doppel-Drop-Shadow. Keine Kästchen, keine Emojis. ========================================================================== */ /* ---------- Reset & Basis ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); /* Kuppel über dem Hero + Glow am Fuß. Muss auf stehen: ein Wrapper mit eigenem Hintergrund würde die Aurora darunter zudecken. */ background: var(--bg-seite); color: var(--color-text); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: var(--color-teal-400); text-decoration: none; } a:hover { color: var(--color-teal-500); } img { max-width: 100%; display: block; } /* ---------- Aurora ---------- Drei weiche Lichtbahnen, diagonal über die ganze Seite. Fix positioniert, damit sie beim Scrollen stehen bleiben und der Inhalt darüber hinweg läuft — das ist der Unterschied zu einem mitlaufenden Verlauf. z-index: -1 hält sie hinter allem, was im normalen Fluss liegt; darum darf kein Seiten-Wrapper einen eigenen deckenden Hintergrund haben. Auf Mobilgeräten kostet ein 100px-Blur über die halbe Seite spürbar Leistung — dort sind alle drei Bahnen deutlich schwächer geblurrt. */ .aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .aurora i { position: absolute; display: block; } .aurora .a1 { top: 4%; left: -45%; width: 160%; height: 48%; background: linear-gradient(100deg, transparent 10%, rgba(32, 173, 172, 0.34) 38%, rgba(94, 207, 206, 0.16) 56%, transparent 80%); transform: rotate(-22deg); filter: blur(70px); } .aurora .a2 { top: 32%; left: -35%; width: 150%; height: 42%; background: linear-gradient(100deg, transparent 14%, rgba(32, 173, 172, 0.2) 44%, rgba(94, 207, 206, 0.08) 60%, transparent 78%); transform: rotate(-17deg); filter: blur(90px); } .aurora .a3 { bottom: -14%; right: -40%; width: 130%; height: 44%; background: linear-gradient(80deg, transparent 18%, rgba(32, 173, 172, 0.16) 50%, transparent 82%); transform: rotate(-24deg); filter: blur(100px); } @media (max-width: 760px) { .aurora .a1 { filter: blur(46px); } .aurora .a2 { filter: blur(56px); } .aurora .a3 { filter: blur(60px); } } /* Der Seiten-Wrapper trägt keinen eigenen Hintergrund mehr — er würde die Aurora verdecken. .page--herofull und .page--preise bleiben als Haken für Seiten mit vollflächigem Hero bestehen (siehe Page-Hero weiter unten). */ .page { background: none; position: relative; } /* ---------- Glas ---------- Eine Oberfläche für alle Boxen. Wer eine neue Karte baut, nimmt diese Klasse (oder trägt den Selektor hier ein) und erfindet nichts dazu — kein zusätzlicher Verlauf, kein Glow um die Box. */ .glas, .stats-bar__grid, .program-card, .team-card, .quote-card, .point-item, .result-card, .step-card, .testi-card, .contact-form, .service-card, .showcase-card, .faq-item, .promo-banner, .pricing-card, .info-box, .compare-wrap, .stat-panel, .feature-card, .package-card, .legal-card, .option-card, .scale-btn, .kurs-karte, .vertrag-summary, .vertrag-mandat, .kuendigung-beleg, .kurs-danke__box, .kurs-daten, .kurs-finder, .analyse-block, .analyse-cta, .analyse-video, .node, .ebook-bridge, .quiz-result-teaser, .metric, .statbar__box, .final-cta-card, .contact-panel { background: var(--glass-bg); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } @media (max-width: 760px) { .glas, .stats-bar__grid, .program-card, .team-card, .quote-card, .point-item, .result-card, .step-card, .testi-card, .contact-form, .service-card, .showcase-card, .faq-item, .promo-banner, .pricing-card, .info-box, .compare-wrap, .stat-panel, .feature-card, .package-card, .legal-card, .option-card, .scale-btn, .kurs-karte, .vertrag-summary, .vertrag-mandat, .kuendigung-beleg, .kurs-danke__box, .kurs-daten, .kurs-finder, .analyse-block, .analyse-cta, .analyse-video, .node, .ebook-bridge, .quiz-result-teaser, .metric, .statbar__box, .final-cta-card, .contact-panel { backdrop-filter: var(--glass-blur-mobil); -webkit-backdrop-filter: var(--glass-blur-mobil); } } /* ---------- Bodenglow ---------- Ausnahme zur Regel „Boxen leuchten nie": eine haarfeine Lichtlinie auf der Unterkante und darunter ein weicher Schein, der die Karte vom Grund abhebt. Der Schein liegt per z-index hinter dem Karteninhalt und wird von overflow:hidden auf die Karte beschnitten — er tritt also nicht seitlich aus. Nur für Kartenreihen gedacht, die als Block gelesen werden sollen (Corporate: Angebote, Kennzahlen). Nicht auf einzelne Karten setzen. */ .bodenglow { position: relative; overflow: hidden; isolation: isolate; } .bodenglow::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(94, 207, 206, 0.75), transparent); } .bodenglow::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -46px; height: 110px; z-index: -1; background: radial-gradient(60% 100% at 50% 100%, rgba(94, 207, 206, 0.5), rgba(32, 173, 172, 0.22) 45%, transparent 75%); filter: blur(14px); } /* ---------- Icons ---------- Konvention: Icons sind freie Linien-SVGs, nie Emojis und nie in einem Kästchen. Jedes Icon nutzt dasselbe Raster (viewBox 0 0 24 24), dieselbe Strichstärke (1.8) und runde Enden. Die Farbe kommt über stroke="currentColor" — deshalb setzen die Icon-Felder hier Türkis. Der Neon-Doppelschatten (--glow-icon) ersetzt die frühere Kästchen-Fläche: das Icon leuchtet, statt in einem Rahmen zu sitzen. */ .service-card__icon, .showcase-card__icon, .info-box__icon, .right-icon, .notice-icon, .point-icon, .contact-item__icon, .feature-card__icon, .program-card__icon, .pricing-card__icon, .step-icon { display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 0; padding: 0; color: var(--color-teal-400); filter: var(--glow-icon); } .service-card__icon svg, .showcase-card__icon svg, .info-box__icon svg, .right-icon svg, .notice-icon svg, .point-icon svg, .contact-item__icon svg, .feature-card__icon svg, .program-card__icon svg, .pricing-card__icon svg, .step-icon svg { display: block; width: 24px; height: 24px; } .service-card__icon, .showcase-card__icon, .feature-card__icon, .program-card__icon, .pricing-card__icon, .info-box__icon { width: 38px; height: 38px; flex-shrink: 0; } .program-card__icon svg, .pricing-card__icon svg, .info-box__icon svg { width: 22px; height: 22px; } .right-icon, .point-icon, .contact-item__icon { width: 36px; height: 36px; flex-shrink: 0; } /* In Hinweiszeilen steht das Icon neben Fließtext: nicht schrumpfen und an der ersten Zeile ausrichten, nicht an der Blockmitte. */ .notice-icon { width: auto; height: auto; flex-shrink: 0; margin-top: 2px; } .notice-icon svg { width: 18px; height: 18px; } /* ---------- Topbar ---------- */ .topbar { background: none; color: var(--color-text-45); text-align: center; font-size: var(--fs-sm); letter-spacing: normal; text-transform: none; padding: var(--space-3) var(--space-4); } .topbar b { color: var(--color-teal-400); font-weight: var(--fw-semibold); } /* ---------- Navbar (Header D) ---------- Eine Pille, die auf dem Inhalt schwebt: halbtransparenter Grund mit Blur, Teal-Rand bei 22 %, darunter ein Teal-Schatten und an der Unterkante eine Leuchtlinie (::after), die zu beiden Seiten ausläuft. */ .navbar-wrap { padding: var(--space-4) var(--space-4) 0; position: sticky; top: 0; z-index: 100; } .navbar { position: relative; max-width: 1260px; margin: 0 auto; background: var(--color-surface-strong); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--color-linie-header); border-radius: var(--radius-pill); box-shadow: var(--shadow-header); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 17px 18px 17px 28px; } .navbar::after { content: ''; position: absolute; left: 13%; right: 13%; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(94, 207, 206, 0.55), transparent); } /* flex-shrink: 0 — ohne das quetscht die nowrap-CTA das Logo auf schmalen Viewports (<=430px) auf 0px Breite, es war dort schlicht unsichtbar. */ .nav-logo { display: flex; align-items: center; flex-shrink: 0; } .nav-logo img { height: 34px; width: auto; } /* Header D ist eine schlanke Pille: die Bildmarke sitzt darin als Zeichen auf Zeilenhöhe. Ein 70px-Logo wie im alten Header würde die Leiste auf über 100px aufblähen und die Pillenform zerstören. */ .nav-logo--mark img { height: 38px; } .nav-links { display: none; list-style: none; align-items: center; gap: 2px; font-size: 13.5px; font-weight: var(--fw-medium); letter-spacing: normal; text-transform: none; } .nav-links a { color: var(--color-text-55); padding: 8px 13px; border-radius: 9px; display: block; } .nav-links a:hover { color: var(--color-white); background: rgba(255, 255, 255, 0.05); } .nav-links a.active { color: var(--color-teal-400); } .nav-cta { display: inline-flex; align-items: center; gap: 7px; background: var(--color-surface-tint); border: 1px solid var(--color-linie-teal); color: var(--color-teal-400) !important; padding: 10px 20px; border-radius: var(--radius-pill); font-size: 13px; font-weight: var(--fw-bold); letter-spacing: normal; text-transform: none; white-space: nowrap; transition: all 0.15s ease; } .nav-cta:hover { background: var(--color-surface-tint-stark); color: var(--color-white) !important; box-shadow: var(--glow-taste); } .hamburger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; } .hamburger span { display: block; width: 22px; height: 2px; background: var(--color-white); border-radius: 2px; transition: 0.3s; } /* Dropdown hängt an der Navbar statt an einem festen Pixelwert — so rutscht es automatisch mit, wenn die Leiste höher wird. */ .nav-links.open { display: grid; gap: 4px; position: absolute; top: calc(100% + 10px); left: 8px; right: 8px; background: rgba(10, 14, 14, 0.97); border: 1px solid rgba(94, 207, 206, 0.25); border-radius: var(--radius-lg); padding: 12px 16px 16px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); z-index: 99; } .nav-links.open a { padding: 11px 12px; font-size: 15px; } /* Schmale Phones: Logo, CTA und Hamburger müssen nebeneinander passen. */ @media (max-width: 559px) { .navbar { gap: var(--space-2); padding: 13px 14px 13px 18px; } .nav-cta { font-size: var(--fs-xs); padding: 9px 14px; } } /* Im Hamburger-Layout sitzt die CTA sonst per space-between mittig in der Leiste — auf breiten Viewports (bis 1023px) wirkt das verloren. margin-left: auto schiebt sie an den rechten Rand neben das Menü-Icon. */ @media (max-width: 1023px) { .nav-cta { margin-left: auto; } } @media (max-width: 359px) { .navbar { padding-left: var(--space-3); } .nav-cta { padding: 9px 12px; } } /* Desktop-Navigation erst ab 1024px — darunter bleibt das Hamburger-Layout, das Logo und CTA sauber nebeneinander zeigt. */ @media (min-width: 1024px) { .nav-links { display: flex; } .hamburger { display: none; } } /* ---------- Buttons (Ghost-Teal) ---------- Alle Primär-Buttons sind getönt statt gefüllt: Fläche rgba(teal,.1), Rand rgba(teal,.5), Text in Teal-hell. Erst der Hover füllt auf .2 und legt einen dezenten Glow dazu. Gefüllte Teal-Flächen mit starkem Schein gibt es in Look 2.0 nicht mehr. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 13px 24px; border-radius: var(--radius-sm); font-weight: var(--fw-bold); font-size: var(--fs-base); letter-spacing: normal; text-transform: none; background: none; border: 1px solid transparent; cursor: pointer; font-family: inherit; transition: all 0.15s ease; } .btn--primary { background: var(--color-surface-tint); color: var(--color-teal-400); border-color: var(--color-linie-teal); } .btn--primary:hover { background: var(--color-surface-tint-stark); color: var(--color-white); box-shadow: var(--glow-taste); } .btn--outline { background: var(--color-surface-feld); border-color: var(--color-border); color: var(--color-white); } .btn--outline:hover { border-color: var(--color-linie-teal); color: var(--color-white); } /* Karten-CTA — der Button am Fuß einer Service-, Programm-, Preis- oder Tarifkarte. Regel für alle Seiten: so ein CTA ist immer ein echter Button über die volle Kartenbreite, nie ein Textlink. Neutral getönt, damit die Karten ruhig nebeneinander stehen; das Ghost-Teal (.btn--primary) trägt nur die hervorgehobene Karte. Entwurf: .price .btn / .price.featured .btn in index.html. */ .btn--karte { background: var(--color-surface-karte); border-color: var(--color-border); color: var(--color-white); box-shadow: none; } .btn--karte:hover { border-color: var(--color-linie-teal); } .btn--block { width: 100%; } .btn--sm { padding: 10px 18px; font-size: var(--fs-sm); } .btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; } /* ---------- Hero ---------- */ .hero { padding: var(--space-11) var(--space-5) var(--space-9); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); } .hero__title { font-size: var(--fs-4xl); line-height: 1.05; font-weight: var(--fw-extrabold); letter-spacing: -0.03em; text-transform: none; max-width: 18ch; } /* Titel bekommen keinen Schein — nur der Teal-Teil einen Hauch. */ .hero__title em { font-style: normal; color: var(--color-teal-400); text-shadow: 0 0 24px rgba(94, 207, 206, 0.25); } .hero__lead { max-width: 52ch; font-size: var(--fs-md); line-height: 1.7; color: var(--color-text-55); } .hero__actions { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 340px; } .hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-5); font-size: var(--fs-sm); letter-spacing: normal; text-transform: none; color: var(--color-text-55); } .hero__meta b { color: var(--color-text-85); font-weight: var(--fw-bold); } .hero__meta .stars { color: var(--color-teal-400); letter-spacing: 1px; } @media (min-width: 560px) { /* max-width darf hier nicht stehen bleiben: sonst quetscht die 340px-Spalte die beiden Buttons nebeneinander und der Text bricht um. */ .hero__actions { flex-direction: row; width: auto; max-width: none; } } @media (min-width: 780px) { .hero { padding: var(--space-12) var(--space-9) var(--space-11); } .hero__title { font-size: 3.9rem; } } /* ---------- Hero (Media-Variante, vollflächiges Video) ---------- Das Video blendet oben und unten per Maske aus, statt an einer harten Kante zu enden — so gibt es weder zum Header noch zur Aurora einen sichtbaren Schnitt. Der Veil darüber ist an beiden Enden transparent und dunkelt nur die Mitte ab, damit der Text lesbar bleibt. */ .hero--media { position: relative; overflow: hidden; text-align: center; align-items: center; padding: 120px var(--space-5) 140px; } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; /* Kein Dimmer: der Entwurf laesst das Video ungedimmt und traegt den Text allein ueber den Veil (--veil-hero-video). */ -webkit-mask-image: var(--maske-hero); mask-image: var(--maske-hero); } .hero__overlay { position: absolute; inset: 0; z-index: 1; background: var(--veil-hero-video); } .hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); max-width: 900px; width: 100%; } .hero--media .hero__title { text-align: center; margin: 0 auto; } .hero--media .hero__lead { margin: 0 auto; } .hero--media .hero__meta { justify-content: center; } @media (prefers-reduced-motion: reduce) { .hero__video { display: none; } } @media (min-width: 780px) { .hero--media { padding: 150px var(--space-6) 170px; } } /* ---------- Stats bar ---------- Auf der Startseite eine Milchglas-Leiste, die in den Hero hineinragt (--overlap). Auf Seiten ohne Hero darüber steht sie normal im Fluss. */ .stats-bar { padding: 0 var(--space-5); position: relative; z-index: 3; } .stats-bar--overlap { margin-top: -56px; } .stats-bar__grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); border-radius: var(--radius-lg); padding: var(--space-7) var(--space-3); text-align: center; } .stats-bar__grid > * { border-right: 1px solid var(--color-border-soft); } .stats-bar__grid > *:nth-child(2), .stats-bar__grid > *:last-child { border-right: none; } .stat__num { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); color: var(--color-white); letter-spacing: -0.02em; } .stat__num em { font-style: normal; color: var(--color-teal-400); text-shadow: var(--glow-zahl-klein); } .stat__label { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-text-45); text-transform: none; letter-spacing: normal; margin-top: var(--space-1); } @media (min-width: 640px) { .stats-bar__grid { grid-template-columns: repeat(4, 1fr); } .stats-bar__grid > *:nth-child(2) { border-right: 1px solid var(--color-border-soft); } .stat__num { font-size: 2rem; } } /* ---------- Section shell ---------- Keine Trennlinien mehr zwischen den Sektionen: Look 2.0 trennt über Abstand und die durchlaufende Aurora, nicht über Kanten. */ .section { padding: var(--space-10) var(--space-5); } .section--tight { padding-bottom: var(--space-9); } .section__inner { max-width: 1120px; margin: 0 auto; } .section__head { text-align: center; margin-bottom: var(--space-9); display: flex; flex-direction: column; gap: var(--space-3); align-items: center; } .section__head--split { text-align: left; align-items: flex-start; } .section__head--tight { margin-bottom: var(--space-7); } /* Der Kicker ist in Look 2.0 eine Pille mit Kippschalter statt eines gesperrten Versal-Worts. Der Schalter entsteht per ::after (ein Teal-Balken mit weißem Punkt), damit im HTML kein zusätzliches Element nötig ist. */ .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); background: rgba(16, 21, 21, 0.55); border: 1px solid var(--color-border-soft); border-radius: var(--radius-pill); padding: 6px 6px 6px 16px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: normal; text-transform: none; color: var(--color-text-65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); align-self: center; } .eyebrow::after { content: ''; flex-shrink: 0; width: 26px; height: 14px; border-radius: var(--radius-pill); background: radial-gradient(circle at 19px 7px, #fff 0 5px, transparent 5.5px), var(--color-teal-500); } .section__head--split .eyebrow, .page-hero--split .eyebrow, .contact-info .eyebrow, .einblicke-titelblock .eyebrow { align-self: flex-start; } /* Innerhalb einer Karte ist der Kicker kein Sektionskopf, sondern ein Etikett an einem Objekt — dort verliert die Pille den Kippschalter und wird zur kleinen Teal-Marke, wie die Tags auf den Leistungs- und Ergebniskarten. */ .showcase-card .eyebrow, .package-card .eyebrow, .legal-card > .eyebrow, .kurs-karte .eyebrow, .pricing-card .eyebrow { align-self: flex-start; background: var(--color-surface-tint); border-color: var(--color-border-teal); color: var(--color-teal-400); padding: 4px 11px; font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.1em; backdrop-filter: none; -webkit-backdrop-filter: none; } .showcase-card .eyebrow::after, .package-card .eyebrow::after, .legal-card > .eyebrow::after, .kurs-karte .eyebrow::after, .pricing-card .eyebrow::after { display: none; } .section-title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -0.025em; line-height: 1.15; color: var(--color-white); } /* Der hervorgehobene Teil des Titels wird nicht türkis, sondern gedimmt — so bleibt der Titel ruhig und die Farbe den Zahlen und Icons vorbehalten. */ .section-title em { font-style: normal; color: var(--color-text-45); } .section-sub { font-size: var(--fs-base); color: var(--color-text-55); max-width: 56ch; line-height: 1.7; } @media (min-width: 780px) { .section { padding: var(--space-10) var(--space-9); } .section__head { flex-direction: row; justify-content: space-between; align-items: flex-end; text-align: left; } .section__head .section-sub { text-align: right; margin-left: auto; } .section-title { font-size: var(--fs-3xl); } .section__head--center { flex-direction: column; justify-content: center; align-items: center; text-align: center; } .section__head--center .section-sub { text-align: center; margin: 0 auto; } } /* ---------- CTA-Banner (wiederkehrender Abschluss-Block) ---------- */ .cta-banner-wrap { text-align: center; } .cta-banner-inner { max-width: 680px; } .cta-banner-title { margin: var(--space-3) auto var(--space-4); } .cta-banner-sub { margin: 0 auto var(--space-8); } .cta-banner-actions { justify-content: center; margin: 0 auto; } /* ---------- Preise-Seite: wiederkehrende Abstands-Varianten ---------- */ .pricing-tier-group { margin-bottom: var(--space-10); } .section-sub--tier { margin: var(--space-2) auto 0; } .pricing-single-wrap { display: flex; justify-content: center; } .pricing-card--single { max-width: 380px; width: 100%; } /* Doppelte Klasse ist nötig: .promo-banner setzt weiter unten `margin: 0 auto` und hätte bei gleicher Spezifität als spätere Regel gewonnen. */ .promo-banner.promo-banner--spaced { margin-top: var(--space-11); } .section-block--spaced-top { margin-top: var(--space-11); } .final-cta { text-align: center; margin-top: var(--space-11); } .final-cta-title { margin: 0 auto var(--space-4); } /* Der Abschluss ist eine eigene Glaskarte mit Teal-Rand, kein randloser Textblock — sonst verliert er sich zwischen Sektion und Footer. */ .final-cta-card { border-radius: var(--radius-xl); border-color: var(--color-border-teal); padding: 46px var(--space-9); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); } .final-cta-card .section-title { font-size: clamp(1.5rem, 2.8vw, 2rem); margin: var(--space-3) 0 var(--space-2); } .final-cta-card .section-sub { font-size: var(--fs-base); margin: 0 0 22px; text-align: center; } .final-cta-card__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; } /* ---------- Package-Card / Contact-Form Einzel-Varianten ---------- */ .package-card--single { max-width: 620px; margin: 0 auto; } /* ---------- Program cards (Leistungen + Preise vereint) ---------- */ .program-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); } /* Kopfzeile wie im Entwurf: Icon, Titel und Abzeichen stehen in EINER Zeile, darunter der Preis. Das Abzeichen schwebt nicht mehr in der Ecke, es ist Teil der Zeile — dadurch fluchten die Titel aller drei Karten. */ .program-card { border-radius: var(--radius-lg); padding: var(--space-6); text-align: left; display: flex; flex-direction: column; position: relative; } /* Hervorgehoben heißt: Teal-Rand. Kein Verlauf, kein Schein um die Karte. */ .program-card--featured { border-color: var(--color-border-teal-strong); } .program-card__top { display: flex; align-items: center; gap: 11px; margin-bottom: var(--space-4); } .program-card__badge { margin-left: auto; background: var(--color-surface-tint-weich); border: 1px solid rgba(32, 173, 172, 0.35); color: var(--color-teal-400); font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: normal; text-transform: none; padding: 4px 9px; border-radius: 8px; white-space: nowrap; } .program-card__title { font-size: 16px; font-weight: var(--fw-bold); color: var(--color-white); text-transform: none; letter-spacing: normal; line-height: 1.25; } .program-card__rule { border: 0; border-top: 1px dashed rgba(255, 255, 255, 0.12); width: 100%; height: 0; background: none; margin: 0 0 var(--space-4); } .program-card__desc { font-size: 13px; line-height: 1.6; color: var(--color-text-55); margin: var(--space-2) 0 var(--space-4); } .program-card__price { font-size: 34px; font-weight: var(--fw-extrabold); color: var(--color-white); letter-spacing: -0.02em; line-height: 1.1; } .program-card__price-old { font-size: var(--fs-base); color: var(--color-text-45); text-decoration: line-through; font-weight: var(--fw-medium); } .program-card__period { font-size: 12.5px; font-weight: var(--fw-regular); color: var(--color-text-55); margin-left: 4px; } .program-card__features { list-style: none; display: grid; gap: 10px; text-align: left; font-size: 13px; color: var(--color-text-65); margin-bottom: var(--space-5); } .program-card__features li { display: flex; align-items: flex-start; gap: 9px; } /* Der Haken sitzt in einem dünnen Teal-Ring — das ist kein Icon-Kästchen, sondern die Aufzählungsmarke der Liste. */ .program-card__features li::before { content: '✓'; flex-shrink: 0; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--color-linie-teal); color: var(--color-teal-400); font-size: 10px; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .program-card .btn { margin-top: auto; } /* ---------- Team ---------- */ .team-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } /* Der Headcoach steht frei: kein Glas, kein Rand, nur das radial maskierte Portrait über einem Teal-Schein. Er ist die Bühne der Sektion, nicht eine Karte unter zweien (Entwurf .team-lead). */ .team-lead { display: flex; flex-direction: column; justify-content: flex-end; position: relative; } .team-lead .team-avatar--photo { margin-bottom: -4px; } .team-lead h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-white); margin-bottom: var(--space-2); } .team-lead p { font-size: 13.5px; color: var(--color-text-55); line-height: 1.7; } .team-card { border-radius: var(--radius-lg); padding: var(--space-6); position: relative; overflow: hidden; } .team-card--lead { border-color: var(--color-border-teal-strong); } .team-card--open { border-style: dashed; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .team-card--open .btn { margin-top: var(--space-5); } .team-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--color-bg-800); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-text-45); margin-bottom: var(--space-4); } /* Das Porträt steht frei, nicht in einem Kreis: es blendet per Maske weich aus, darunter liegt ein Teal-Schein. So wirkt der Headcoach als Bühne der Karte statt als Avatar in einer Liste. */ .team-avatar--photo { width: min(440px, 94%); height: auto; margin: 0 auto var(--space-4); border: 0; border-radius: 0; background: none; overflow: visible; position: relative; display: block; } .team-avatar--photo::before { content: ''; position: absolute; left: 50%; top: 26%; transform: translate(-50%, -50%); width: 420px; height: 340px; max-width: 130%; background: radial-gradient(closest-side, rgba(32, 173, 172, 0.22), transparent); pointer-events: none; } .team-avatar--photo img { width: 100%; height: auto; display: block; position: relative; -webkit-mask-image: radial-gradient(66% 70% at 50% 40%, #000 38%, transparent 67%); mask-image: radial-gradient(66% 70% at 50% 40%, #000 38%, transparent 67%); } .team-avatar--muted { background: rgba(255, 255, 255, 0.04); border-color: var(--color-border-soft); color: var(--color-text-55); } /* Textspalte der Team-Sektion auf der Startseite (seit 29.08. im philo-split-Aufbau von ueber-apr, Feedback n1'). */ .team-lead-name { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-white); margin-bottom: var(--space-2); } .team-lead-text { font-size: 13.5px; color: var(--color-text-55); line-height: 1.7; max-width: 46ch; } /* K1 (31.08.): die Sektion hat jetzt zwei Absätze */ .team-lead-text + .team-lead-text { margin-top: 10px; } .team-lead-btn { margin-top: var(--space-5); } .team-role { font-size: 11px; font-weight: var(--fw-bold); color: var(--color-teal-400); text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: var(--space-2); } .team-role--muted { color: var(--color-text-45); } .team-card h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-white); margin-bottom: var(--space-2); } .team-card h3.muted { color: var(--color-text-55); } .team-card p { font-size: 13.5px; color: var(--color-text-55); line-height: 1.7; } @media (min-width: 780px) { .team-grid { grid-template-columns: 1.3fr 1fr; max-width: 900px; margin: 0 auto; } .team-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 1100px; } } /* ---------- Warum apr (Zitat-Karte + Punkte + Vernetzungs-Diagramm) ---------- */ .why-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-9); } .quote-card { border-radius: var(--radius-lg); padding: var(--space-7); border-color: var(--color-border-teal); position: relative; overflow: hidden; } .quote-card__marks { font-size: 56px; line-height: 0.5; color: var(--color-teal-400); font-weight: var(--fw-extrabold); text-shadow: 0 0 18px rgba(94, 207, 206, 0.25); margin-bottom: var(--space-5); } .quote-card__text { font-size: 21px; font-weight: var(--fw-bold); color: var(--color-white); letter-spacing: -0.02em; line-height: 1.3; position: relative; z-index: 1; } .quote-card__text em { font-style: normal; color: var(--color-teal-400); } .quote-card__author { margin-top: var(--space-4); font-size: 12.5px; color: var(--color-text-45); } .points-list { display: grid; gap: var(--space-3); margin-top: var(--space-8); } .point-item { display: flex; gap: var(--space-4); align-items: flex-start; border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); transition: border-color 0.15s ease; } .point-item:hover { border-color: var(--color-border-teal-strong); } .point-text h4 { font-size: 14.5px; font-weight: var(--fw-bold); color: var(--color-white); margin-bottom: 3px; } .point-text p { font-size: var(--fs-sm); color: var(--color-text-55); line-height: 1.6; } @media (min-width: 1080px) { .why-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-11); } } /* Vernetzungs-Diagramm: der Kern in der Mitte, vier Knoten drum herum, dazwischen dünne Teal-Linien. Unter 1024px fällt die Anordnung in sich zusammen und wird zu einer normalen Kartenliste — Kreise mit absoluter Position sind auf einem Phone weder lesbar noch treffsicher. */ .net { position: relative; height: 560px; margin-top: var(--space-9); } .net-lines { position: absolute; inset: 0; width: 100%; height: 100%; } .net-lines line { stroke: rgba(94, 207, 206, 0.35); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .node { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; } .node h4 { margin: 8px 0 4px; font-size: 13.5px; font-weight: var(--fw-bold); } .node p { margin: 0; font-size: 10.5px; color: var(--color-text-55); line-height: 1.45; max-width: 22ch; hyphens: manual; overflow-wrap: break-word; } .node .nico { color: var(--color-teal-400); filter: var(--glow-icon); } .node .nico svg { display: block; width: 22px; height: 22px; } .node.core { left: 50%; top: 50%; width: 214px; height: 214px; border-color: var(--color-border-teal-strong); } .node.core img { width: 46px; height: 46px; margin-bottom: 8px; } .node.core b { font-size: 16px; font-weight: var(--fw-extrabold); } .node.core p { font-size: 11px; max-width: 20ch; } .node.n1 { left: 18%; top: 20%; width: 182px; height: 182px; } .node.n2 { left: 82%; top: 24%; width: 172px; height: 172px; } .node.n3 { left: 16%; top: 78%; width: 176px; height: 176px; } .node.n4 { left: 83%; top: 76%; width: 186px; height: 186px; } .net .dot { position: absolute; border-radius: 50%; background: rgba(32, 173, 172, 0.3); filter: blur(1px); } @media (max-width: 860px) { .net { height: auto; display: grid; gap: var(--space-3); } .net-lines, .net .dot { display: none; } .node { position: static; transform: none; width: auto; height: auto; border-radius: var(--radius-lg); padding: var(--space-6); } .node p, .node.core p { max-width: none; font-size: var(--fs-sm); } .node.core { width: auto; height: auto; } } /* ---------- Ergebnisse ---------- */ .results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-4); } .result-card { border-radius: var(--radius-lg); padding: var(--space-7); } .result-stat { font-size: 40px; font-weight: var(--fw-extrabold); color: var(--color-teal-400); letter-spacing: -0.03em; line-height: 1; text-shadow: var(--glow-zahl); } .result-desc { font-size: 15.5px; color: var(--color-white); font-weight: var(--fw-bold); margin: 6px 0; } .result-detail { font-size: var(--fs-sm); color: var(--color-text-55); line-height: 1.6; margin-bottom: var(--space-3); } .result-tag { display: inline-block; background: var(--color-surface-tint); border: 1px solid var(--color-border-teal); color: var(--color-teal-400); font-size: 10.5px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 11px; border-radius: var(--radius-pill); } /* Ergebnis-Visualisierungen: Balken, Kurve, Ring. Sie stehen über der Zahl und zeigen dieselbe Aussage noch einmal als Bild. */ .result-viz { width: 100%; height: 60px; margin-bottom: var(--space-3); } .result-ring { width: 88px; height: 88px; margin: 0 auto var(--space-3); display: block; } .viz-glow { filter: drop-shadow(0 0 6px rgba(32, 173, 172, 0.45)); } .viz-bars { margin-bottom: var(--space-2); } .viz-bar { display: flex; align-items: center; gap: 9px; font-size: 10.5px; color: var(--color-text-45); margin-bottom: 9px; } .viz-bar span { width: 44px; flex-shrink: 0; } .viz-bar b { --w: 0%; flex: 1; position: relative; height: 9px; } .viz-bar b::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 5px; background: rgba(255, 255, 255, 0.12); } .viz-bar--teal b::after { background: linear-gradient(90deg, #20adac, #5ecfce); box-shadow: 0 0 12px rgba(32, 173, 172, 0.5); } /* ---------- Ablauf ---------- */ .steps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); position: relative; } .step-card { border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); text-align: center; } .step-number { width: 44px; height: 44px; background: var(--color-surface-feld); border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-base); font-weight: var(--fw-extrabold); color: var(--color-teal-400); margin: 0 auto var(--space-4); filter: var(--glow-icon); } .step-card h4 { font-size: 15px; font-weight: var(--fw-bold); color: var(--color-white); margin-bottom: 6px; } .step-card p { font-size: 12.5px; color: var(--color-text-55); line-height: 1.6; } @media (min-width: 780px) { .steps-grid { grid-template-columns: repeat(4, 1fr); } } /* ---------- Ablauf als Icon-Stepper ---------- Keine Karten: die vier Schritte stehen frei auf der Aurora und werden von einer durchgehenden Leuchtlinie auf Höhe der Kreismitte verbunden. Der Kreis ist keine Fläche mit Rand, sondern ein dunkler Grund, aus dem das Icon leuchtet (Entwurf .steps / .step in index.html). */ .steps-grid--stepper { grid-template-columns: 1fr 1fr; gap: 22px; } .steps-grid--stepper .step-card { background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0 14px; position: relative; } .steps-grid--stepper .step-icon { width: 60px; height: 60px; border-radius: 50%; background: var(--color-surface-feld); color: var(--color-teal-400); margin: 0 auto 14px; position: relative; z-index: 2; filter: var(--glow-icon); } .steps-grid--stepper .step-icon svg { width: 24px; height: 24px; } /* Die Schrittnummer steht unter dem Icon — sie ordnet die vier Schritte, ohne dass das Icon dafuer Platz abgibt (Entwurf .step .no). */ .steps-grid--stepper .step-no { display: block; font-size: 11.5px; font-weight: var(--fw-extrabold); color: var(--color-teal-400); letter-spacing: 0.1em; } .steps-grid--stepper .step-card h4 { margin: 4px 0 6px; } /* .steps-grid--karten entfernt am 31.08.2026: praventionskurse.html ist auf den Startseiten-Stepper umgestellt (Feedback K2), danach benutzte keine HTML-Datei die Variante mehr. */ /* .steps-grid--nummern entfernt am 29.08.2026: corporate.html ist auf den Startseiten-Stepper (.steps-grid--stepper) umgestellt, danach benutzte keine HTML-Datei die Variante mehr. */ @media (min-width: 780px) { .steps-grid--stepper { grid-template-columns: repeat(4, 1fr); gap: 0; } /* Die Verbindungslinie liegt hinter den Kreisen (z-index 1 gegen 2) und läuft von der Mitte des vorherigen Schritts zur Mitte des eigenen — daher left: -50% bei voller Spaltenbreite. Die Kreismitte sitzt 30px unter der Oberkante. Mobil stehen die Schritte im Zweierraster, dort gibt es keine Linie. */ .steps-grid--stepper .step-card::before { content: ''; position: absolute; z-index: 1; top: 30px; left: -50%; width: 100%; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(32, 173, 172, 0.45), transparent); } .steps-grid--stepper .step-card:first-child::before { display: none; } } /* ---------- Kundenstimmen als zwei versetzte Bänder ---------- Kein Karussell mehr: zwei Reihen stehen still, gegeneinander versetzt und über die Seitenränder hinausgeschoben. Die jeweils erste und letzte Karte einer Reihe blendet per Maske aus, statt an der Kante abzureißen. Die gedimmten Karten treten zurück, damit der Blick in der Mitte bleibt. */ .testi-band { position: relative; } .testi-row { display: flex; gap: var(--space-4); margin-bottom: var(--space-4); } .testi-row--1 { margin-left: -160px; margin-right: -70px; } .testi-row--2 { margin-left: -90px; margin-right: -140px; } .testi-row > .testi-card:first-child { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 75%); mask-image: linear-gradient(90deg, transparent 0, #000 75%); } .testi-row > .testi-card:last-child { -webkit-mask-image: linear-gradient(90deg, #000 25%, transparent 100%); mask-image: linear-gradient(90deg, #000 25%, transparent 100%); } .testi-card--dimmed { opacity: 0.55; } .testi-card { flex: 1 1 340px; min-width: 0; border-radius: 16px; padding: 22px; } .testi-card__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } .testi-card__google { margin-left: auto; flex-shrink: 0; } .testi-avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(32, 173, 172, 0.16); border: 1px solid var(--color-border-teal); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: var(--fw-bold); color: var(--color-teal-400); flex-shrink: 0; } .testi-name { font-size: 13.5px; font-weight: var(--fw-bold); color: var(--color-white); } .testi-stars { color: var(--color-teal-400); font-size: var(--fs-sm); letter-spacing: 2px; } .testi-text { font-size: 13px; color: var(--color-text-65); line-height: 1.7; } .testi-meta { font-size: 11.5px; color: var(--color-text-45); margin-top: var(--space-3); } /* Auf schmalen Viewports stapeln die Bänder: kein Versatz, keine Maske. Das Dimmen entfällt ebenfalls — ohne den Bandeffekt, der es rechtfertigt, wäre es nur eine schlechter lesbare Bewertung. Sichtbar bleiben alle. */ @media (max-width: 760px) { .testi-row { flex-wrap: wrap; margin-left: 0; margin-right: 0; } .testi-card { flex: 1 1 100%; } .testi-card--dimmed { opacity: 1; } .testi-row > .testi-card:first-child, .testi-row > .testi-card:last-child { -webkit-mask-image: none; mask-image: none; } } /* Kopf der Sektion: Titel links, Einordnung und Google-Marke rechts. */ .testi-head { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: end; margin-bottom: var(--space-9); } .testi-head__right { max-width: 360px; font-size: 13px; color: var(--color-text-55); line-height: 1.7; } .g-badge { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); border: 1px solid var(--color-border-soft); border-radius: var(--radius-pill); padding: 7px 14px; font-size: 13px; color: var(--color-text-65); background: rgba(16, 21, 21, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .g-badge strong { font-size: var(--fs-base); color: var(--color-white); } @media (min-width: 780px) { .testi-head { grid-template-columns: 1fr auto; gap: var(--space-9); } } .spotlight-link { display: block; text-align: center; margin-top: var(--space-8); } .spotlight-link a { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-surface-tint); border: 1px solid var(--color-linie-teal); color: var(--color-teal-400); font-size: var(--fs-base); font-weight: var(--fw-bold); padding: 13px 24px; border-radius: var(--radius-pill); transition: all 0.15s ease; } .spotlight-link a:hover { background: var(--color-surface-tint-stark); color: var(--color-white); box-shadow: var(--glow-taste); } /* ---------- Kontakt ---------- Ein einziges Glas-Panel statt zweier Blöcke nebeneinander: links die Erreichbarkeit, rechts das Formular. Chip und Titel stehen zentriert darüber, nicht in der linken Spalte (Entwurf .contact). */ .contact-panel { display: grid; grid-template-columns: 1fr; gap: var(--space-8); border-radius: var(--radius-xl); padding: 34px; } .contact-panel .contact-form { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; border-radius: 0; } .contact-panel .contact-info p:first-child { margin-top: 0; } @media (min-width: 820px) { .contact-panel { grid-template-columns: 1fr 1.15fr; gap: var(--space-8); } } .contact-info p { font-size: var(--fs-base); color: var(--color-text-55); line-height: 1.7; margin: var(--space-4) 0 var(--space-6); } .contact-details { display: flex; flex-direction: column; gap: var(--space-1); } .contact-item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-base); color: var(--color-text-65); padding: 7px 0; } .contact-item a { color: var(--color-text-65); } .contact-item a:hover { color: var(--color-teal-400); } /* WhatsApp behält sein Grün — es ist eine Fremdmarke, kein Akzent der Seite. */ /* K10 (31.08.): nicht mehr volle Kastenbreite (inline-flex statt width:100%) und mehr Abstand zu den Kontaktzeilen darüber. Gilt auch für den gleichen Button auf der Startseite. */ .whatsapp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-7); padding: 13px 24px; border-radius: var(--radius-sm); background: rgba(37, 211, 102, 0.1); border: 1px solid rgba(37, 211, 102, 0.3); color: #25d366; font-weight: var(--fw-bold); font-size: var(--fs-base); transition: background 0.2s; } .whatsapp-btn:hover { background: rgba(37, 211, 102, 0.18); color: #25d366; } .contact-form { border-radius: var(--radius-xl); padding: var(--space-7); } /* Entwurf .form-card: schmaler, mit Teal-Rand und mehr Luft — die Formularkarte ist der Abschluss der Seite, nicht eine Karte unter vielen. */ .contact-form--narrow { max-width: 760px; margin: 0 auto; border-color: var(--color-border-teal); padding: 36px; } .form-honeypot { position: absolute; left: -9999px; } /* ---------- Formulare ---------- Feld dunkel, Rand dünn, Fokus mit Teal-Rand und dezentem Glow. Platzhalter sind gedimmt; bei Selects übernimmt das :invalid, solange die leere Option gewählt ist — deshalb steht dort immer ein `