/* Alpasana-Designsystem (.alp-*) fuer Coaching-Planet. Basis: Alpasana-Webstandard. */
:root {
--alp-blue: #269CD9;
--alp-blue-bright: #2EA3F2;
--alp-blue-dark: #1C7CB0;
--alp-dark: #232434;
--alp-dark-2: #2C2D40;
--alp-heading: #232434;
--alp-text: #6E7077;
--alp-muted: #9AA0A6;
--alp-bg: #FFFFFF;
--alp-bg-soft: #F5F7FA;
--alp-border: #E6E9EF;
--alp-font-head: 'Rajdhani', 'Segoe UI', sans-serif;
--alp-font-body: 'Rubik', 'Segoe UI', Arial, sans-serif;
--alp-font-display: 'Squada One', 'Rajdhani', sans-serif;
--alp-radius: 6px;
--alp-radius-lg: 14px;
--alp-shadow: 0 10px 30px rgba(35, 36, 52, .10);
--alp-shadow-sm: 0 4px 14px rgba(35, 36, 52, .07);
--alp-container: 1200px;
--alp-container-kopf: 1320px;
--alp-font-kopf: 'Rajdhani', 'Alp-Kopf-Ersatz', 'Segoe UI', sans-serif;
--alp-transition: .2s ease;
/* Coaching-Planet-eigener Akzent: warmes "Stern"-Gold als Gegenpol zum kuehlen Blau.
Bewusst sparsam einsetzen - Icons, Zahlen, Hover-Momente, nie fuer Flaechen. */
--alp-accent: #E9A23B;
--alp-accent-dark: #B87A1E;
--alp-accent-soft: rgba(233, 162, 59, .14);
}
* { box-sizing: border-box; }
/* Jede Seite endet mit dem dunklen .alp-footer - ohne eigene Hintergrundfarbe auf
zeigt der Bounce-/Overscroll-Effekt (Touchpad, Touch, manche Mausraeder) hinter dem
Dokumentende kurz Weiss statt einer Fortsetzung des Footers. Betrifft nur Seiten mit
diesem Stylesheet (admin/konto bleiben unberuehrt, binden es nicht ein). */
html { background: var(--alp-dark); }
.alp body, body.alp {
margin: 0;
font-family: var(--alp-font-body);
color: var(--alp-text);
line-height: 1.7;
background: var(--alp-bg);
-webkit-font-smoothing: antialiased;
}
.alp h1, .alp h2, .alp h3, .alp h4, .alp-h1, .alp-h2 {
font-family: var(--alp-font-head);
color: var(--alp-heading);
font-weight: 700;
line-height: 1.2;
margin: 0 0 .5em;
}
.alp-uppercase { text-transform: uppercase; letter-spacing: .04em; }
.alp a { color: var(--alp-blue-dark); text-decoration: none; transition: color var(--alp-transition); }
.alp a:hover { color: var(--alp-blue); }
.alp-container { max-width: var(--alp-container); margin: 0 auto; padding: 0 20px; }
/* Kopfbereich (Kontaktleiste + Kopfzeile) laeuft bewusst breiter als der Inhalt darunter:
Logo, sieben Navigationspunkte und zwei Schaltflaechen passen sonst nicht nebeneinander,
sobald die Webschrift Rajdhani fehlt und der breitere Systemfont einspringt. Beide Baender
teilen sich die Breite, damit sie untereinander buendig bleiben. */
.alp-topbar .alp-container, .alp-header .alp-container { max-width: var(--alp-container-kopf); }
/* Topbar */
.alp-topbar { background: var(--alp-dark); color: #C7CAD6; font-size: .85rem; padding: 8px 0; }
.alp-topbar .alp-container { display: flex; justify-content: flex-end; gap: 28px; }
.alp-topbar a { color: #C7CAD6; }
.alp-topbar a:hover { color: #fff; }
.alp-topbar .alp-ico { opacity: .8; }
/* Ersatzschrift, nur fuer die Kopfzeile.
Rajdhani ist schmal laufend; die Systemschriften, die einspringen solange Rajdhani noch
laedt oder blockiert ist, sind es nicht: Segoe UI braucht rund 18% mehr Breite, DejaVu Sans
auf Linux rund 33%. Das reicht, um die volle Kopfzeile ueberlaufen zu lassen. size-adjust
normiert die Ersatzschrift auf Rajdhanis Laufweite, dadurch bleibt die Breite stabil und der
Wechsel auf die geladene Schrift springt kaum. Bewusst NUR fuer die Kopfzeile - die
Ueberschriften der Seite sollen ihre normale Groesse behalten. */
@font-face {
font-family: 'Alp-Kopf-Ersatz';
src: local('Segoe UI'), local('Helvetica Neue'), local('Arial'), local('Liberation Sans'), local('DejaVu Sans');
size-adjust: 85%;
}
/* Header */
.alp-header { background: #fff; border-bottom: 1px solid var(--alp-border); position: sticky; top: 0; z-index: 40; }
.alp-header .alp-container { display: flex; align-items: center; justify-content: space-between; min-height: 84px; gap: 14px; }
a.alp-logo { display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 0; transition: transform var(--alp-transition); }
a.alp-logo:hover { transform: scale(1.03); }
.alp-logo img { height: 40px; display: block; }
.alp-logo-text {
display: flex;
flex-direction: column;
gap: 3px;
white-space: nowrap;
}
.alp-logo-title {
font-family: var(--alp-font-kopf);
font-weight: 700;
font-size: 1.5rem;
line-height: 1.1;
color: var(--alp-heading);
text-transform: uppercase;
letter-spacing: .02em;
transition: color var(--alp-transition);
}
.alp-logo:hover .alp-logo-title { color: var(--alp-blue); }
.alp-logo-title em { font-style: normal; color: var(--alp-blue); transition: color var(--alp-transition); }
.alp-logo:hover .alp-logo-title em { color: var(--alp-heading); }
.alp-logo-sub {
display: block;
font-family: var(--alp-font-kopf);
font-size: .68rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--alp-blue-dark);
}
.ict-header-right { display: flex; align-items: center; gap: 18px; }
/* Abstaende bewusst knapp: Logo, sieben Navigationspunkte und zwei Schaltflaechen muessen
im Kopfcontainer nebeneinander Platz finden. Ohne nowrap schrumpft Flexbox die Links
und bricht die Beschriftungen mitten im Wort um ("Coach / finden"). Ausgeloggt kommt eine
zweite Schaltflaeche ("Als Coach registrieren") dazu, darum sind Schriftgroesse/Abstaende
hier knapper als sonst im Design. */
.alp-nav { display: flex; gap: 16px; }
.alp-nav a { font-family: var(--alp-font-kopf); font-weight: 600; color: var(--alp-heading); font-size: .88rem; position: relative; padding-bottom: 4px; white-space: nowrap; }
.alp-nav a:hover, .alp-nav a.active { color: var(--alp-blue-dark); }
.alp-nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--alp-blue-dark); transition: width .25s ease; }
.alp-nav a:hover::after, .alp-nav a.active::after { width: 100%; }
.ict-header-actions { display: flex; align-items: center; gap: 8px; }
.ict-header-actions .alp-btn { padding: 10px 16px; white-space: nowrap; font-family: var(--alp-font-kopf); font-size: .82rem; }
/* Vergleichen-Link im Header, Zaehler-Badge wird von assets/js/favorites.js befuellt. */
.alp-compare-link { display: inline-flex; align-items: center; gap: 6px; color: var(--alp-heading); }
.alp-compare-link .alp-icon { width: 20px; height: 20px; }
.alp-compare-link:hover { color: var(--alp-blue-dark); }
.alp-compare-link .alp-compare-count { font-family: var(--alp-font-kopf); font-weight: 600; color: var(--alp-accent-dark); }
.alp-compare-link.is-empty .alp-compare-count { display: none; }
.alp-nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 0; }
.alp-nav-toggle span { display: block; width: 24px; height: 2px; background: var(--alp-heading); border-radius: 2px; }
.alp-nav-close { display: none; }
.alp-nav-backdrop { display: none; }
/* Hero */
.alp-hero { position: relative; padding: 95px 0; background: var(--alp-dark) linear-gradient(135deg, var(--alp-dark), var(--alp-dark-2)); overflow: hidden; }
.alp-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(35,36,52,.92) 0%, rgba(35,36,52,.55) 65%, rgba(35,36,52,.25) 100%); }
.alp-hero::after {
content: '';
position: absolute; inset: -15%; z-index: 0;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cg fill='none' stroke='rgba(46,163,242,0.28)' stroke-width='1'%3E%3Cline x1='80' y1='120' x2='220' y2='60'/%3E%3Cline x1='220' y1='60' x2='340' y2='180'/%3E%3Cline x1='340' y1='180' x2='480' y2='90'/%3E%3Cline x1='480' y1='90' x2='620' y2='140'/%3E%3Cline x1='620' y1='140' x2='720' y2='60'/%3E%3Cline x1='140' y1='320' x2='300' y2='380'/%3E%3Cline x1='300' y1='380' x2='460' y2='340'/%3E%3Cline x1='460' y1='340' x2='600' y2='300'/%3E%3Cline x1='600' y1='300' x2='700' y2='380'/%3E%3Cline x1='180' y1='520' x2='380' y2='500'/%3E%3Cline x1='380' y1='500' x2='560' y2='520'/%3E%3Cline x1='340' y1='180' x2='300' y2='380'/%3E%3Cline x1='480' y1='90' x2='460' y2='340'/%3E%3Cline x1='620' y1='140' x2='600' y2='300'/%3E%3C/g%3E%3Cg fill='rgba(46,163,242,0.55)'%3E%3Ccircle cx='80' cy='120' r='3'/%3E%3Ccircle cx='220' cy='60' r='2.5'/%3E%3Ccircle cx='340' cy='180' r='3.5'/%3E%3Ccircle cx='480' cy='90' r='2.5'/%3E%3Ccircle cx='620' cy='140' r='3'/%3E%3Ccircle cx='720' cy='60' r='2.5'/%3E%3Ccircle cx='140' cy='320' r='2.5'/%3E%3Ccircle cx='300' cy='380' r='3'/%3E%3Ccircle cx='460' cy='340' r='2.5'/%3E%3Ccircle cx='600' cy='300' r='3.5'/%3E%3Ccircle cx='700' cy='380' r='2.5'/%3E%3Ccircle cx='180' cy='520' r='3'/%3E%3Ccircle cx='380' cy='500' r='2.5'/%3E%3Ccircle cx='560' cy='520' r='3'/%3E%3C/g%3E%3C/svg%3E"),
radial-gradient(closest-side, rgba(38,156,217,.30) 0%, rgba(38,156,217,.12) 55%, transparent 100%),
radial-gradient(closest-side, rgba(46,163,242,.20) 0%, rgba(46,163,242,.08) 55%, transparent 100%);
background-repeat: no-repeat;
background-size: cover, 45% 45%, 35% 35%;
background-position: center, 12% 25%, 82% 70%;
opacity: .85;
}
@media (prefers-reduced-motion: no-preference) {
.alp-hero::after { animation: alp-hero-drift 24s ease-in-out infinite alternate, alp-hero-twinkle 5s ease-in-out infinite; }
@keyframes alp-hero-drift {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(2%, -2%) scale(1.04); }
}
@keyframes alp-hero-twinkle {
0%, 100% { opacity: .8; }
50% { opacity: 1; }
}
}
.alp-hero .alp-container { position: relative; z-index: 2; }
.alp-hero-label { color: var(--alp-blue-bright); font-family: var(--alp-font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; }
.alp-hero-label::before { content: '// '; }
.alp-hero h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 4.5rem); text-transform: uppercase; margin: .3em 0 .4em; }
.alp-hero p { color: #C7CAD6; max-width: 560px; font-size: 1.15rem; }
/* Hero-Komposition: Text links, redaktionelle Bild-/Brand-Komposition rechts
(55/60 - 40/45 auf Desktop). Auf Mobile faellt die Komposition weg, damit
nichts abgeschnitten wirkt und die Textspalte volle Breite bekommt. */
.alp-hero-text { max-width: 620px; }
.alp-hero-visual { position: relative; display: none; height: 380px; }
@media (min-width: 900px) {
.alp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.alp-hero-visual { display: block; }
}
.alp-hero-portrait {
/* Kein overflow:hidden hier - das wuerde die Geprueft-Badge mit abschneiden, die bewusst
ueber den Rand hinausragt (top/right: -6px, siehe .alp-hero-chip--check). Das Foto
clippt sich stattdessen selbst rund (border-radius: inherit auf dem ![]()
). */
position: absolute; display: block; margin: 0; border-radius: 50%;
border: 3px solid rgba(255, 255, 255, .16);
box-shadow: 0 20px 45px rgba(10, 11, 20, .4);
transition: transform var(--alp-transition), border-color var(--alp-transition);
}
.alp-hero-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: transform .35s ease; }
a.alp-hero-portrait:hover, a.alp-hero-portrait:focus-visible {
transform: translateY(-3px); border-color: var(--alp-accent);
}
a.alp-hero-portrait:hover img, a.alp-hero-portrait:focus-visible img { transform: scale(1.06); }
a.alp-hero-portrait:focus-visible { outline: 2px solid var(--alp-accent); outline-offset: 3px; }
.alp-hero-portrait--1 { width: 172px; height: 172px; top: 2%; left: 8%; z-index: 3; }
.alp-hero-portrait--2 { width: 130px; height: 130px; top: 48%; right: 2%; border-radius: 28px; z-index: 2; }
.alp-hero-portrait--3 { width: 100px; height: 100px; bottom: 0; left: 32%; z-index: 1; }
.alp-hero-chip {
position: absolute; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
font-family: var(--alp-font-head); font-weight: 600; font-size: .7rem; letter-spacing: .03em;
padding: 4px 10px; border-radius: 999px; white-space: nowrap;
background: rgba(35, 36, 52, .88); color: #fff; border: 1px solid rgba(255, 255, 255, .15);
}
.alp-hero-chip--check { top: -6px; right: -6px; width: 24px; height: 24px; padding: 0; background: var(--alp-accent); color: var(--alp-dark); }
.alp-hero-chip--tag { bottom: -6px; left: 50%; transform: translateX(-50%); }
/* Verbindungslinien zwischen den Portraits - Element B der Grafiksprache (Route/Orbit). */
.alp-hero-visual::before {
content: ''; position: absolute; inset: 10% 18%; z-index: 0; pointer-events: none;
border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%;
}
/* Abstrakte Variante, falls keine zwei echten Coach-Fotos verfuegbar sind (Hero-Fallback)
oder wenn eine Seite bewusst keine Personen zeigen soll (coach-werden.php). Eigene
Konstellation statt blossem Ring: grosser Ring, gestrichelter innerer Ring, drei Nodes
mit Verbindungslinien in der Akzentfarbe - Elemente A/B/C der Grafiksprache in einem Bild. */
.alp-hero-visual--abstract::after {
content: ''; position: absolute; inset: 4%; z-index: 0; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Ccircle cx='200' cy='200' r='150' fill='none' stroke='rgba(255,255,255,0.14)'/%3E%3Ccircle cx='200' cy='200' r='96' fill='none' stroke='rgba(233,162,59,0.4)' stroke-dasharray='3 6'/%3E%3Cg stroke='rgba(233,162,59,0.5)' stroke-width='1'%3E%3Cline x1='200' y1='50' x2='330' y2='260'/%3E%3Cline x1='330' y1='260' x2='90' y2='300'/%3E%3Cline x1='90' y1='300' x2='200' y2='50'/%3E%3C/g%3E%3Cg fill='%23E9A23B'%3E%3Ccircle cx='200' cy='50' r='5'/%3E%3Ccircle cx='330' cy='260' r='5'/%3E%3Ccircle cx='90' cy='300' r='5'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: center; background-size: 88% 88%;
}
/* Zusaetzliche einzelne Nodes, wo eine Seite eigene Akzentpunkte in der Grafik braucht
(siehe coach-werden.php). Position wird per Inline-Style je Node gesetzt. */
.alp-hero-node {
position: absolute; z-index: 1; width: 8px; height: 8px; border-radius: 50%;
background: var(--alp-accent); box-shadow: 0 0 0 5px rgba(233, 162, 59, .16);
}
/* --- Vertrauens-Siegel: kreisfoermiges Emblem statt Fotokomposition (vertrauen.php) --- */
.alp-hero-visual--emblem { align-items: center; justify-content: center; }
@media (min-width: 900px) { .alp-hero-visual--emblem { display: flex; } }
.alp-emblem { position: relative; width: 230px; height: 230px; }
.alp-emblem::before {
content: ''; position: absolute; inset: 0; border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .16);
}
.alp-emblem::after {
content: ''; position: absolute; inset: 20px; border-radius: 50%;
border: 1px dashed rgba(233, 162, 59, .5);
}
.alp-emblem-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.alp-emblem-icon .alp-icon { width: 62px; height: 62px; color: var(--alp-accent); stroke-width: 1.4; }
@media (prefers-reduced-motion: no-preference) {
.alp-hero-portrait { opacity: 0; animation: alp-hero-portrait-in .7s ease both; }
.alp-hero-portrait--1 { animation-delay: .05s; }
.alp-hero-portrait--2 { animation-delay: .18s; }
.alp-hero-portrait--3 { animation-delay: .3s; }
@keyframes alp-hero-portrait-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
}
/* Sections */
.alp-section { padding: 64px 0; }
.alp-section--tight-top { padding-top: 32px; }
.alp-section--soft { background: var(--alp-bg-soft); }
.alp-section--dark { background: var(--alp-dark); }
.alp-section--dark h2, .alp-section--dark h3, .alp-section--dark p { color: #fff; }
.alp-section--dark .alp-text, .alp-section--dark .alp-card p { color: #C7CAD6; }
/* inline-flex statt block, damit ein optionales Icon sauber neben dem Text sitzt;
steht immer vor einem Block-Element und belegt darum weiterhin eine eigene Zeile. */
.alp-section-label { color: var(--alp-blue-dark); font-family: var(--alp-font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; display: inline-flex; align-items: center; gap: 8px; margin-bottom: .5em; }
.alp-section-label .alp-icon { width: 18px; height: 18px; }
.alp-section--dark .alp-section-label { color: var(--alp-blue-bright); }
.alp-section-title { font-size: clamp(1.8rem, 4vw, 2.8rem); text-transform: uppercase; }
/* Buttons */
.alp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--alp-font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 14px 32px; border-radius: var(--alp-radius); border: 2px solid transparent; cursor: pointer; font-size: .95rem; transition: all var(--alp-transition); position: relative; overflow: hidden; }
.alp-btn::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-20deg); transition: left .5s ease; pointer-events: none; }
.alp-btn:hover::after { left: 130%; }
/* BUGFIX (2026-08-06): "display: inline-flex" oben ueberschreibt sonst das native [hidden]-
Verhalten (Autor-CSS schlaegt die eingebaute UA-Regel "[hidden]{display:none}") - betraf
den "Weiter"-Button im Matching-Wizard auf Schritt 3, der trotz hidden-Attribut sichtbar
blieb. Gilt fuer jedes .alp-btn, das per JS/HTML hidden gesetzt bekommt. */
.alp-btn[hidden] { display: none !important; }
.alp .alp-btn-primary { background: var(--alp-blue); color: #fff; border-color: var(--alp-blue); }
.alp .alp-btn-primary:hover { background: var(--alp-blue-dark); border-color: var(--alp-blue-dark); color: #fff; }
.alp .alp-btn-outline { background: transparent; color: var(--alp-blue-dark); border-color: var(--alp-blue-dark); }
.alp .alp-btn-outline:hover { background: var(--alp-blue-dark); color: #fff; }
.alp .alp-btn-light { background: #fff; color: var(--alp-dark); border-color: #fff; }
.alp .alp-btn-light:hover { background: transparent; color: #fff; }
.alp-btn:disabled { opacity: .5; cursor: not-allowed; }
.alp-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--alp-shadow); }
/* Cards / grid */
.alp-card { background: #fff; border: 1px solid var(--alp-border); border-radius: var(--alp-radius-lg); box-shadow: var(--alp-shadow-sm); padding: 30px; transition: transform var(--alp-transition), box-shadow var(--alp-transition); }
a.alp-card:hover, .alp-card--interactive:hover { transform: translateY(-4px); box-shadow: var(--alp-shadow); }
.alp-form-card { background: #fff; border: 1px solid var(--alp-border); border-radius: var(--alp-radius-lg); box-shadow: var(--alp-shadow-sm); padding: 34px; }
.alp-card h3 { text-transform: uppercase; font-size: 1.15rem; }
.alp-card p, .alp-card span:not(.alp-badge) { color: var(--alp-text); }
/* Versteckt fuer Sehende, bleibt fuer Screenreader lesbar - Standardmuster. */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Coach-Karte: Akzentkante beim Hover (dasselbe Motiv wie .alp-topic::before), damit die
Karten nicht mehr wie anonyme weisse Kisten wirken. */
.coach-card { position: relative; padding-top: 20px; overflow: hidden; }
.coach-card::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, var(--alp-blue), var(--alp-accent));
transform: scaleY(0); transform-origin: top; transition: transform .35s ease;
}
.coach-card:hover::before { transform: scaleY(1); }
.coach-card-photo-wrap { position: relative; display: inline-block; margin-bottom: 14px; }
.coach-card-photo {
display: block; width: 84px; height: 84px; border-radius: 50%;
background-color: var(--alp-bg-soft);
border: 2px solid var(--alp-border);
transition: transform .35s ease, border-color .35s ease;
/* Das Foto ist ein ![]()
: object-fit uebernimmt hier die Rolle, die frueher
background-size/-position hatten (mittiger Ausschnitt, Kopf nicht abgeschnitten). */
object-fit: cover; object-position: center top;
}
.coach-card-photo--initials {
display: flex; align-items: center; justify-content: center;
font-family: var(--alp-font-head); font-weight: 700; font-size: 1.4rem;
/* --alp-dark statt --alp-blue-dark: deutlich dunkler, damit die weissen Initialen auch
bei kleiner Groesse sicher lesbar sind (Kontrast war zu niedrig). */
color: #fff; background-color: var(--alp-dark);
}
.coach-card:hover .coach-card-photo { transform: scale(1.08); border-color: var(--alp-accent-soft); }
/* Geprueft-Siegel als kleiner Kreis auf dem Foto statt eigener Textzeile darueber -
ruhigere Kopfzeile der Karte, gleiches Vorbild wie die Hero-Portrait-Chips. */
.coach-card-check {
position: absolute; right: -2px; bottom: -2px; z-index: 1;
width: 24px; height: 24px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--alp-accent); color: var(--alp-dark);
font-size: .75rem; font-weight: 700; line-height: 1;
border: 2px solid #fff;
}
/* Farbiger Punkt vor "online" statt reinem Text - etwas Farbe in der sonst grauen Meta-Zeile. */
.coach-card-online {
display: inline-flex; align-items: center; gap: 5px;
}
.coach-card-online::before {
content: ''; width: 7px; height: 7px; border-radius: 50%;
background: #3FAE6A; flex: none;
}
/* Sprachen + grobe Verfuegbarkeit unter der Headline (nur wenn ueber attachCardMeta() geladen). */
.coach-card-meta {
display: flex; flex-wrap: wrap; gap: 3px 12px;
margin: .5em 0 0; font-size: .8rem; color: var(--alp-muted); line-height: 1.45;
}
.coach-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.coach-card-meta .alp-icon { width: 13px; height: 13px; flex: none; color: var(--alp-blue-dark); }
/* Merken-Button (Merkliste ohne Login, siehe assets/js/favorites.js). Herz-Icon fuellt sich
und wird golden, sobald der Coach gemerkt ist - .alp-icon nutzt currentColor/fill:none per
Vorgabe, daher hier der fill:currentColor-Override nur fuer den aktiven Zustand. */
.coach-card-fav {
position: absolute; top: 10px; right: 10px; z-index: 2;
width: 34px; height: 34px; padding: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .92); border: 1px solid var(--alp-border);
color: var(--alp-muted); cursor: pointer;
transition: color var(--alp-transition), border-color var(--alp-transition), transform .2s ease;
}
.coach-card-fav .alp-icon { width: 17px; height: 17px; }
.coach-card-fav:hover { border-color: var(--alp-accent); color: var(--alp-accent); }
.coach-card-fav.is-fav { color: var(--alp-accent); border-color: var(--alp-accent); }
.coach-card-fav.is-fav .alp-icon { fill: currentColor; }
.coach-card-fav.pulse { animation: alp-fav-pulse .3s ease; }
@keyframes alp-fav-pulse { 50% { transform: scale(1.2); } }
.alp-counter { font-variant-numeric: tabular-nums; }
/* Scroll-Reveal: dezentes Einblenden beim Scrollen (per JS getriggert, siehe assets/interactions.js) */
@media (prefers-reduced-motion: no-preference) {
.alp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.alp-reveal.is-visible { opacity: 1; transform: translateY(0); }
}
.alp-grid { display: grid; gap: 26px; }
.alp-grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.alp-grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.alp-grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.alp-grid-5 { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }
/* Blog: Uebersichtskarten */
.alp-blog-card {
display: flex; flex-direction: column; overflow: hidden;
background: #fff; border: 1px solid var(--alp-border); border-radius: var(--alp-radius-lg);
box-shadow: var(--alp-shadow-sm); color: inherit;
transition: transform var(--alp-transition), box-shadow var(--alp-transition);
}
.alp-blog-card:hover { transform: translateY(-3px); box-shadow: var(--alp-shadow); color: inherit; }
.alp-blog-card-bild { display: block; aspect-ratio: 16 / 9; background: var(--alp-bg-soft); overflow: hidden; }
.alp-blog-card-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alp-blog-card-text { display: flex; flex-direction: column; gap: 8px; padding: 22px; }
.alp-blog-card h2 { font-size: 1.25rem; margin: 0; }
.alp-blog-meta { color: var(--alp-muted); font-size: .85rem; }
.alp-blog-anriss { color: var(--alp-text); font-size: .96rem; }
/* Schiebt den Link nach unten, damit er bei unterschiedlich langen Anrissen auf einer Linie steht. */
.alp-blog-mehr { margin-top: auto; padding-top: 6px; color: var(--alp-blue-dark); font-weight: 600; font-size: .92rem; }
.alp-blog-card:hover .alp-blog-mehr { color: var(--alp-blue); }
/* Blog: hervorgehobener neuster Artikel oberhalb des Rasters - Bild und Text nebeneinander
statt einer gleich grossen Karte in der Reihe, damit die Liste nicht komplett gleichfoermig wirkt. */
.alp-blog-featured {
display: grid; grid-template-columns: 1fr; overflow: hidden; color: inherit;
background: #fff; border: 1px solid var(--alp-border); border-radius: var(--alp-radius-lg);
box-shadow: var(--alp-shadow-sm); margin-bottom: 2.6em;
transition: transform var(--alp-transition), box-shadow var(--alp-transition);
}
.alp-blog-featured:hover, .alp-blog-featured:focus-visible { transform: translateY(-3px); box-shadow: var(--alp-shadow); color: inherit; }
.alp-blog-featured:focus-visible { outline: 2px solid var(--alp-accent); outline-offset: 3px; }
@media (min-width: 800px) { .alp-blog-featured { grid-template-columns: 1.1fr 1fr; } }
.alp-blog-featured-bild { display: block; aspect-ratio: 16 / 9; background: var(--alp-bg-soft); overflow: hidden; }
.alp-blog-featured-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 800px) { .alp-blog-featured-bild { aspect-ratio: auto; } }
.alp-blog-featured-text { display: flex; flex-direction: column; gap: 12px; padding: 32px 34px; justify-content: center; }
.alp-blog-featured-text h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0; }
.alp-blog-featured-text .alp-blog-anriss { font-size: 1.02rem; }
/* Blog: Artikelseite. Schmale Spalte - lange Zeilen ermueden beim Lesen. */
.alp-artikel { max-width: 760px; }
.alp-artikel h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: .3em; }
.alp-brotkrumen { color: var(--alp-muted); font-size: .85rem; margin-bottom: 1.4em; }
.alp-artikel-titelbild { width: 100%; height: auto; border-radius: var(--alp-radius-lg); margin: 1.8em 0; display: block; }
.alp-artikel-text { font-size: 1.08rem; }
.alp-artikel-text h2 { font-size: 1.6rem; margin: 1.8em 0 .5em; }
.alp-artikel-text h3 { font-size: 1.25rem; margin: 1.5em 0 .4em; }
.alp-artikel-text p { margin: 0 0 1.2em; }
.alp-artikel-text ul, .alp-artikel-text ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.alp-artikel-text li { margin-bottom: .4em; }
.alp-artikel-text blockquote {
margin: 1.6em 0; padding: .2em 0 .2em 1.2em;
border-left: 3px solid var(--alp-accent); color: var(--alp-heading); font-style: italic;
}
.alp-artikel-text figure { margin: 1.8em 0; }
.alp-artikel-text img { max-width: 100%; height: auto; border-radius: var(--alp-radius); display: block; }
/* Im Editor per Ziehgriff auf eine feste Breite gestelltes Bild: auf Bildbreite
schrumpfen, damit die Bildunterschrift nicht ueber die ganze Spalte laeuft. */
.alp-artikel-text figure:has(img[width]) { width: fit-content; max-width: 100%; }
.alp-artikel-text figcaption { color: var(--alp-muted); font-size: .87rem; margin-top: .6em; }
/* Anliegen-Detailseite (Phase 8b): FAQ-Akkordeon + "Diese Seite hilft auch bei"-Phrasen.
Eigenes, schlichtes -Muster - der cb-faq-Block des Builders haengt an Builder-CSS. */
.alp-anliegen-faq { max-width: 760px; margin: .6em 0 0; border-top: 1px solid var(--alp-border); }
.alp-anliegen-faq-item { border-bottom: 1px solid var(--alp-border); }
.alp-anliegen-faq-item > summary {
list-style: none; cursor: pointer; position: relative;
padding: 1em 2em 1em 0; font-weight: 600; font-size: 1.05rem;
}
.alp-anliegen-faq-item > summary::-webkit-details-marker { display: none; }
.alp-anliegen-faq-item > summary::after {
content: "+"; position: absolute; right: .15em; top: 50%; transform: translateY(-50%);
font-weight: 400; font-size: 1.4rem; line-height: 1; color: var(--alp-muted);
}
.alp-anliegen-faq-item[open] > summary::after { content: "\2013"; }
.alp-anliegen-faq-a { padding: 0 0 1.2em; font-size: 1.05rem; }
.alp-anliegen-faq-a p { margin: 0 0 .8em; }
.alp-anliegen-faq-a p:last-child { margin-bottom: 0; }
.alp-anliegen-suchanfragen {
display: flex; flex-wrap: wrap; gap: 8px; margin: 1em 0 0; padding: 0; list-style: none;
}
.alp-anliegen-suchanfragen li {
padding: 6px 14px; border-radius: 999px; font-size: .88rem;
background: var(--alp-bg-soft); color: var(--alp-muted);
}
/* Rechtsseiten (Impressum/AGB/Datenschutz): ruhige Lesespalte in einer Karte statt
unformatierter Paragraphen-Wueste. Bewusst zurueckhaltend - nur Lesbarkeit verbessern. */
.alp-legal.alp-card { max-width: 760px; margin: 0 auto; padding: 48px 56px; }
.alp-legal h1 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin-bottom: 1em; padding-bottom: .6em; border-bottom: 2px solid var(--alp-border); }
.alp-legal h2 { font-size: 1.15rem; margin: 2em 0 .5em; padding-top: 1.6em; border-top: 1px solid var(--alp-border); }
.alp-legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.alp-legal p { font-size: 1rem; margin: 0 0 1.2em; }
.alp-legal a { text-decoration: underline; text-decoration-color: var(--alp-border); text-underline-offset: 3px; }
.alp-legal a:hover { text-decoration-color: currentColor; }
@media (max-width: 640px) {
.alp-legal.alp-card { padding: 32px 22px; }
}
/* Blog: Themen-Schlagworte. Doppelt genutzt - als Filterleiste ueber der Uebersicht und
als Verschlagwortung unter dem Artikel. */
.alp-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px; border-radius: 999px; font-size: .88rem; line-height: 1.3;
border: 1px solid var(--sp-c, var(--alp-border)); background: #fff; color: var(--sp-c, var(--alp-text));
transition: border-color var(--alp-transition), background var(--alp-transition), color var(--alp-transition);
}
/* Die Chip-Farben muessen `.alp a { color: var(--alp-blue-dark) }` schlagen. Jenes hat
Spezifitaet (0,1,1), ein blosses `.alp-chip` nur (0,1,0) - der aktive Chip stand dadurch
blau auf blau und war unlesbar. Darum die Link-Varianten mit `.alp` davor (0,2,1).
--sp-c/--sp-soft kommen als Inline-Style vom jeweiligen Thema (alp_spec_akzent()) -
Chips ohne Themenbezug (z. B. "Alle Beitraege") lassen die Variablen unbesetzt und
fallen auf die bisherigen neutralen/blauen Farben zurueck. */
.alp a.alp-chip { color: var(--sp-c, var(--alp-text)); }
.alp a.alp-chip:hover { border-color: var(--sp-c, var(--alp-blue)); color: var(--sp-c, var(--alp-blue-dark)); background: var(--sp-soft, rgba(38, 156, 217, .06)); }
.alp-chip--aktiv { background: var(--alp-blue-dark); border-color: var(--alp-blue-dark); color: #fff; }
.alp a.alp-chip--aktiv, .alp a.alp-chip--aktiv:hover {
background: var(--alp-blue-dark); border-color: var(--alp-blue-dark); color: #fff;
}
.alp-chip--klein { padding: 3px 10px; font-size: .78rem; background: var(--sp-soft, var(--alp-bg-soft)); border-color: transparent; }
.alp-chip-zahl { color: var(--alp-muted); font-size: .8em; }
.alp-chip--aktiv .alp-chip-zahl { color: rgba(255, 255, 255, .75); }
.alp-themenfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.6em; }
.alp-artikel-themen { margin-top: 2.6em; padding-top: 1.6em; border-top: 1px solid var(--alp-border); }
/* Karten-Schlagworte stehen zwischen Anriss und "Weiterlesen" - der Abstand kommt vom Raster. */
.alp-blog-themen { display: flex; flex-wrap: wrap; gap: 6px; }
/* Blog: Blaetterleiste. Die leeren halten die Mitte mittig, wenn eine Seite fehlt. */
.alp-blaettern {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
flex-wrap: wrap; margin-top: 3em;
}
.alp-blaettern-stand { color: var(--alp-muted); font-size: .9rem; }
/* Form fields */
.alp-input, .alp-textarea, .alp-select { width: 100%; padding: 12px 14px; border: 1px solid var(--alp-border); border-radius: var(--alp-radius); font-family: var(--alp-font-body); font-size: 1rem; color: var(--alp-heading); background: #fff; }
.alp-input:focus, .alp-textarea:focus, .alp-select:focus { outline: none; border-color: var(--alp-blue); box-shadow: 0 0 0 3px rgba(38, 156, 217, .16); }
.alp-textarea { min-height: 120px; resize: vertical; }
.alp-field { margin-bottom: 20px; }
.alp-field:last-child { margin-bottom: 0; }
.alp-grid > .alp-field { margin-bottom: 0; }
.alp-form-label { display: flex; align-items: center; gap: 6px; font-family: var(--alp-font-head); font-weight: 600; font-size: .92rem; color: var(--alp-heading); margin-bottom: 6px; }
.alp-form-label .alp-icon { width: 15px; height: 15px; color: var(--alp-blue-dark); flex: none; }
.alp-form-label .opt { color: var(--alp-muted); font-weight: 400; text-transform: none; }
/* Akzentkante fuer die Filter-Karte auf coaches.php - hebt sie von einer gewoehnlichen
Formular-Karte ab, ohne die Funktion zu veraendern. */
.alp-filter-card { position: relative; }
.alp-filter-card::before {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
border-radius: var(--alp-radius-lg) var(--alp-radius-lg) 0 0;
background: linear-gradient(90deg, var(--alp-blue), var(--alp-accent));
}
.alp-hint { color: var(--alp-muted); font-size: .85rem; margin-top: 4px; }
.alp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Alle Filter-Steuerelemente exakt gleich hoch. ,