/* ==========================================================================
   Smart Serve – "Modern Clean" Look
   Marken-Blau bleibt. Moderne, clean-premium Grotesk-Typografie,
   echtes Menschen-Foto + App im Hero, dezentes Schweizer Trust-Signal,
   mehr Persoenlichkeit & Emotion. Dunkle Basis bleibt.
   Wird NACH theme.min.css + user.css geladen.
   ========================================================================== */

:root,
[data-bs-theme="dark"] {
    --ss-blue:        #3874ff;          /* Marken-Blau (wie Software/Insta) */
    --ss-blue-rgb:    56,116,255;
    --ss-blue-bright: #6f9bff;
    --ss-blue-deep:   #2456d6;
    --ss-blue-soft:   rgba(56,116,255,0.12);
    --ss-red:         #ff4d4f;          /* Schweizer Rot – nur als Mikro-Akzent */

    --ss-bg:          #0B0F1A;
    --ss-surface:     #121829;
    --ss-surface-2:   #182032;
    --ss-border:      rgba(255,255,255,0.07);

    --bs-primary:               #3874ff;
    --bs-primary-rgb:           56,116,255;
    --phoenix-primary:          #3874ff;
    --phoenix-primary-rgb:      56,116,255;
    --phoenix-body-bg:          #0B0F1A;
    --phoenix-body-bg-rgb:      11,15,26;
    --phoenix-emphasis-bg:      #121829;
    --phoenix-emphasis-bg-rgb:  18,24,41;
}

body,
.bg-body,
[data-bs-theme="dark"] .bg-body-emphasis { background-color: #0B0F1A !important; }
.bg-body-emphasis { background-color: #0F1422 !important; }

/* ===== Clean-premium Grotesk-Typografie ===== */
h1, h2, h3, h4, h5, h6,
.fw-black,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: "Inter Tight", "Nunito Sans", system-ui, sans-serif !important;
    letter-spacing: -0.03em !important;
    line-height: 1.08 !important;
}
h1, h1.fw-black, .display-1, .display-2, .display-3 { font-weight: 800 !important; }
h2, h3 { font-weight: 700 !important; }
.lead { line-height: 1.7; font-weight: 400; }
p, .text-body-secondary { line-height: 1.65; }

/* ===== Akzent ===== */
.text-primary { color: var(--ss-blue-bright) !important; }
.text-gradient-info {
    background: none !important;
    -webkit-text-fill-color: var(--ss-blue-bright) !important;
    color: var(--ss-blue-bright) !important;
}
.btn-primary {
    --phoenix-btn-bg: var(--ss-blue);
    --phoenix-btn-border-color: var(--ss-blue);
    --phoenix-btn-hover-bg: var(--ss-blue-deep);
    --phoenix-btn-hover-border-color: var(--ss-blue-deep);
    --phoenix-btn-color: #fff;
    font-weight: 700 !important;
    box-shadow: 0 10px 30px rgba(56,116,255,0.32);
}
.btn-outline-primary {
    --phoenix-btn-color: #fff;
    --phoenix-btn-border-color: rgba(255,255,255,0.18);
    --phoenix-btn-hover-bg: rgba(255,255,255,0.06);
    --phoenix-btn-hover-border-color: rgba(255,255,255,0.30);
    --phoenix-btn-hover-color: #fff;
    font-weight: 700 !important;
}
.btn-lg { border-radius: 14px !important; }

/* ===== Badges modern & clean ===== */
.badge.bg-primary-subtle {
    background: var(--ss-blue-soft) !important;
    color: var(--ss-blue-bright) !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    border: 1px solid rgba(56,116,255,0.20) !important;
    border-radius: 999px !important;
}

/* ===== Icon-Kacheln vereinheitlichen ins Blau-Spektrum =====
   Bunter Dashboard-Mix (blau/gruen/gelb/rot) -> ruhiges Marken-Blau.
   Echte Erfolgs-Haekchen (text-success in Listen) bleiben gruen. */
.bg-primary-subtle { background: var(--ss-blue-soft) !important; }
.text-primary.bg-primary-subtle,
.bg-primary-subtle.text-primary { color: var(--ss-blue-bright) !important; }
.bg-info-subtle    { background: rgba(56,116,255,0.10) !important; }
.text-info         { color: var(--ss-blue-bright) !important; }
.bg-warning-subtle { background: rgba(56,116,255,0.10) !important; }
.text-warning      { color: var(--ss-blue-bright) !important; }
.bg-danger-subtle  { background: rgba(56,116,255,0.10) !important; }
.text-danger       { color: var(--ss-blue-bright) !important; }
/* Icon-Kachel-Boxen mit bg-success: ins Blau (nur die quadratischen Icon-Tiles) */
.bg-success-subtle.rounded-3,
.rounded-3.bg-success-subtle { background: rgba(56,116,255,0.10) !important; }
.bg-success-subtle.rounded-3.text-success,
.rounded-3.bg-success-subtle .text-success { color: var(--ss-blue-bright) !important; }
/* Sterne in Testimonials: warmes Gold beibehalten (Bewertung wirkt vertrauensvoll) */
svg.text-warning { color: #f5b740 !important; }

/* Inline-Stat-Kacheln (rgba(...,0.08)) vereinheitlichen */
.p-3.rounded-3[style*="rgba(56,116,255"],
.p-3.rounded-3[style*="rgba(0,151,235"],
.p-3.rounded-3[style*="rgba(37,176,3"] {
    background: rgba(56,116,255,0.08) !important;
}
.p-3.rounded-3[style*="rgba"] .text-success,
.p-3.rounded-3[style*="rgba"] .text-info { color: var(--ss-blue-bright) !important; }

/* ===== Cards modern: ruhiger Rand, dezente Tiefe ===== */
.card {
    border-radius: 20px !important;
    background-color: var(--ss-surface);
    border: 1px solid var(--ss-border) !important;
}
.shadow-sm { box-shadow: 0 4px 24px rgba(0,0,0,0.30) !important; }
.shadow-lg { box-shadow: 0 24px 60px rgba(0,0,0,0.45) !important; }
.hero-blob { background: radial-gradient(circle, rgba(56,116,255,0.16), transparent 72%) !important; }

.card[style*="rgba(56,116,255"],
.card-body[style*="rgba(56,116,255"],
div[style*="rgba(56,116,255"]:not(.hero-blob),
div[style*="rgba(0,151,235"]:not(.hero-blob),
div[style*="rgba(37,176,3"]:not(.hero-blob) {
    background-image: linear-gradient(135deg, rgba(56,116,255,0.09), rgba(56,116,255,0.02)) !important;
    background-color: transparent !important;
}

/* ==========================================================================
   NEUER HERO – Foto (Mensch) + App nebeneinander
   ========================================================================== */
.ss-hero {
    position: relative;
    /* Sichtbarer Abstand unter der fixen Navbar: ~60px (mobil) bis ~95px (Desktop) */
    padding: clamp(3.5rem, 6vw, 6rem) 0 clamp(3rem, 7vw, 6rem);
    overflow: hidden;
}
.ss-hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
@media (max-width: 991px) {
    .ss-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* Linke Spalte: Text */
.ss-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.10em;
    text-transform: uppercase; color: var(--ss-blue-bright);
    background: var(--ss-blue-soft); border: 1px solid rgba(56,116,255,0.20);
    padding: 0.45rem 0.9rem; border-radius: 999px; margin-bottom: 1.25rem;
}
.ss-hero__title {
    font-family: "Inter Tight", system-ui, sans-serif;
    font-weight: 800; letter-spacing: -0.035em; line-height: 1.04;
    font-size: clamp(1.85rem, 6vw, 3.7rem); color: #fff; margin-bottom: 1.1rem;
}
.ss-hero__title .accent { color: var(--ss-blue-bright); }
.ss-hero__lead {
    font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.6;
    color: rgba(255,255,255,0.66); max-width: 33rem; margin-bottom: 1.5rem;
}
.ss-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.6rem; }
.ss-hero__cta .btn { border-radius: 14px; padding: 0.85rem 1.5rem; font-weight: 700; }

/* Dezentes Schweizer Trust-Signal */
.ss-trust {
    display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
    padding-top: 1.4rem; border-top: 1px solid var(--ss-border);
}
.ss-trust__swiss {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-weight: 600; font-size: 0.9rem; color: rgba(255,255,255,0.82);
}
.ss-trust__flag {
    width: 20px; height: 20px; border-radius: 5px; background: var(--ss-red);
    position: relative; flex-shrink: 0; box-shadow: 0 2px 6px rgba(255,77,79,0.35);
}
.ss-trust__flag::before, .ss-trust__flag::after {
    content: ''; position: absolute; background: #fff; border-radius: 1px;
}
.ss-trust__flag::before { width: 10px; height: 3px; top: 8.5px; left: 5px; }
.ss-trust__flag::after  { width: 3px; height: 10px; top: 5px; left: 8.5px; }
.ss-trust__item {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.88rem; color: rgba(255,255,255,0.6); font-weight: 500;
}
.ss-trust__item i { color: var(--ss-blue-bright); }

/* Kleine Referenz-Zeile: ueberlappende Avatare + Sterne + Text */
.ss-hero__refs {
    display: flex; align-items: center; gap: 0.85rem;
    margin-top: 1.1rem;
}
.ss-hero__refs-avatars { display: inline-flex; }
.ss-hero__refs-avatars img {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; border: 2px solid var(--ss-bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.ss-hero__refs-avatars img + img { margin-left: -12px; }
/* "+10"-Badge als letzter, überlappender Kreis */
.ss-hero__refs-more {
    width: 40px; height: 40px; border-radius: 50%;
    margin-left: -12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--ss-blue, #3874ff), var(--ss-blue-bright, #0097eb));
    border: 2px solid var(--ss-bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    color: #fff; font-weight: 800; font-size: 0.82rem; letter-spacing: -0.02em;
}
.ss-hero__refs-text { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.2; }
.ss-hero__refs-stars { color: #f5b740; display: inline-flex; gap: 1px; align-items: center; }
.ss-hero__refs-count {
    font-weight: 800; color: #fff; font-size: 0.86rem; margin-left: 0.3rem;
}
.ss-hero__refs-label {
    font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.7);
}

/* Rechte Spalte: Tennisplatz-Foto + ein iPhone davor */
.ss-hero__visual {
    position: relative;
    padding-right: clamp(2rem, 6vw, 5rem);   /* Platz fuer ueberlappendes iPhone */
    padding-bottom: 1rem;
}
.ss-hero__photo {
    position: relative; border-radius: 24px; overflow: hidden;
    aspect-ratio: 5 / 4; width: 100%;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
    border: 1px solid var(--ss-border);
}
.ss-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* sanftes Blau-Tint zur Marken-Einbindung des warmen Sandplatzfotos */
.ss-hero__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,15,26,0) 55%, rgba(11,15,26,0.45) 100%),
                linear-gradient(120deg, rgba(56,116,255,0.14), transparent 55%);
}
.ss-hero__photo-tag {
    position: absolute; left: 1rem; top: 1rem; z-index: 2;
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(11,15,26,0.72); backdrop-filter: blur(8px);
    border: 1px solid var(--ss-border); border-radius: 999px;
    padding: 0.4rem 0.85rem; font-size: 0.8rem; color: #fff; font-weight: 600;
}
.ss-hero__photo-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: #2ec27a; box-shadow: 0 0 0 3px rgba(46,194,122,0.25); }

/* Ein einzelnes iPhone, ueberlappt das Foto unten rechts */
.ss-hero__phone {
    position: absolute; right: -1%; bottom: -8%;
    width: 35%; max-width: 195px; height: auto; z-index: 3;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,0.6));
}
@media (max-width: 991px) {
    .ss-hero__visual { padding-right: clamp(2rem, 9vw, 5rem); max-width: 560px; margin: 0 auto; }
}
@media (max-width: 575px) {
    .ss-hero__visual { padding-right: 2.6rem; }
    .ss-hero__phone { width: 33%; bottom: -5%; }
}

::selection { background: rgba(56,116,255,0.3); }

/* ==========================================================================
   BUCHUNGS-MOCKUP – moderner App-Look, nur freie Slots klar sichtbar
   ========================================================================== */
.ss-booking-wrap { position: relative; max-width: 430px; margin: 0 auto; }
.ss-booking-glow {
    position: absolute; inset: -12% -8% -8% -12%; z-index: 0;
    background: radial-gradient(circle at 30% 25%, rgba(56,116,255,0.22), transparent 60%),
                radial-gradient(circle at 75% 80%, rgba(56,116,255,0.12), transparent 60%);
    filter: blur(36px);
}
.ss-booking {
    position: relative; z-index: 1;
    background: linear-gradient(165deg, #161D31, #0E1322);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    padding: 1.4rem 1.4rem 1.5rem;
    box-shadow: 0 30px 70px rgba(0,0,0,0.55);
}
.ss-booking__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.ss-booking__title { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; color: #fff; font-size: 1.05rem; }
.ss-booking__dot { width: 10px; height: 10px; border-radius: 50%; background: #2ec27a; box-shadow: 0 0 0 4px rgba(46,194,122,0.18); }
.ss-booking__price { font-size: 0.8rem; font-weight: 600; color: var(--ss-blue-bright); background: var(--ss-blue-soft); border: 1px solid rgba(56,116,255,0.22); padding: 0.3rem 0.7rem; border-radius: 999px; }

/* Trainer-Zeile */
.ss-booking__trainer {
    display: flex; align-items: center; gap: 0.75rem;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 0.6rem 0.75rem; margin-bottom: 1.1rem;
}
.ss-booking__trainer img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 44px; }
.ss-booking__trainer-avatar {
    width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, var(--ss-blue), var(--ss-blue-deep));
    color: #fff; font-weight: 800; font-size: 0.95rem;
    font-family: "Inter Tight", system-ui, sans-serif;
}
.ss-booking__trainer-avatar::before { content: attr(data-initials); }
.ss-booking__trainer-name { font-weight: 700; color: #fff; font-size: 0.95rem; }
.ss-booking__trainer-role { font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.ss-booking__chevron { margin-left: auto; color: rgba(255,255,255,0.4); font-size: 1.2rem; }

/* Monat-Zeile */
.ss-booking__month {
    display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.75rem;
    font-size: 0.85rem; font-weight: 700; color: #fff;
}
.ss-booking__month i { color: var(--ss-blue-bright); font-size: 1rem; }
.ss-booking__week {
    margin-left: auto; font-size: 0.7rem; font-weight: 600;
    color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08); padding: 0.18rem 0.55rem; border-radius: 999px;
}

/* Tage */
.ss-booking__days { display: flex; gap: 0.4rem; margin-bottom: 1.2rem; }
.ss-day {
    flex: 1; border: 1px solid rgba(255,255,255,0.08); background: transparent;
    color: rgba(255,255,255,0.6); border-radius: 12px; padding: 0.5rem 0; cursor: pointer;
    font-size: 0.82rem; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 1px;
    transition: all 0.2s ease;
}
.ss-day span { font-size: 0.66rem; opacity: 0.7; font-weight: 500; }
.ss-day:hover { border-color: rgba(56,116,255,0.4); color: #fff; }
.ss-day.is-active { background: var(--ss-blue); border-color: var(--ss-blue); color: #fff; box-shadow: 0 6px 16px rgba(56,116,255,0.35); }

/* Label + Anzahl frei */
.ss-booking__label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; }
.ss-booking__label > span:first-child { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.04em; }
.ss-booking__count { font-size: 0.72rem; font-weight: 700; color: #2ec27a; background: rgba(46,194,122,0.12); border: 1px solid rgba(46,194,122,0.25); padding: 0.18rem 0.55rem; border-radius: 999px; }

/* Slots – nur frei, klar */
.ss-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; margin-bottom: 1.2rem; }
.ss-slot {
    position: relative; border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04); color: #eaeefc;
    border-radius: 12px; padding: 0.7rem 0; font-size: 0.92rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s ease;
}
.ss-slot::before { /* kleiner gruener Frei-Punkt */
    content: ''; position: absolute; top: 8px; right: 8px;
    width: 6px; height: 6px; border-radius: 50%; background: #2ec27a; opacity: 0.8;
}
.ss-slot:hover { border-color: rgba(56,116,255,0.5); background: rgba(56,116,255,0.10); transform: translateY(-1px); }
.ss-slot.is-selected {
    background: var(--ss-blue); border-color: var(--ss-blue); color: #fff;
    box-shadow: 0 8px 20px rgba(56,116,255,0.4);
}
.ss-slot.is-selected::before { background: #fff; opacity: 1; }
.ss-slot i { font-size: 0.95rem; }

/* CTA */
.ss-booking__cta {
    width: 100%; border: 0; cursor: pointer;
    background: linear-gradient(135deg, var(--ss-blue), var(--ss-blue-deep));
    color: #fff; border-radius: 14px; padding: 0.95rem 1.1rem;
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 700; font-size: 1rem; box-shadow: 0 10px 26px rgba(56,116,255,0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ss-booking__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(56,116,255,0.55); }
.ss-booking__cta-price { background: rgba(255,255,255,0.18); padding: 0.2rem 0.6rem; border-radius: 8px; font-size: 0.88rem; }
.ss-booking__hint { text-align: center; margin-top: 0.7rem; font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.ss-booking__hint i { color: #2ec27a; }

/* Floating Toast */
.ss-booking__toast {
    position: absolute; right: -14px; bottom: -18px; z-index: 2;
    display: flex; align-items: center; gap: 0.6rem; max-width: 240px;
    background: linear-gradient(150deg, #18203a, #0E1322);
    border: 1px solid rgba(46,194,122,0.3); border-radius: 14px;
    padding: 0.7rem 0.9rem; box-shadow: 0 16px 40px rgba(0,0,0,0.5);
    animation: ssFloat 5s ease-in-out 1s infinite;
}
.ss-booking__toast-icon { width: 30px; height: 30px; border-radius: 9px; background: rgba(46,194,122,0.15); color: #2ec27a; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; }
.ss-booking__toast-title { font-size: 0.82rem; font-weight: 700; color: #fff; }
.ss-booking__toast-sub { font-size: 0.72rem; color: rgba(255,255,255,0.55); }
@media (max-width: 575px) {
    .ss-booking__toast { right: 0; bottom: -10px; }
    .ss-slots { gap: 0.45rem; }
}

/* ==========================================================================
   ADMIN-DASHBOARD MOCKUP – "Papierkram erledigt" (Anmeldung → Rechnung)
   ========================================================================== */
.ss-admin-wrap { position: relative; max-width: 440px; margin: 0 auto; }
.ss-admin-glow {
    position: absolute; inset: -40px -30px; z-index: 0;
    background: radial-gradient(circle at 70% 25%, rgba(56,116,255,0.22), transparent 60%);
    filter: blur(60px); pointer-events: none;
}
.ss-admin {
    position: relative; z-index: 1;
    background: linear-gradient(160deg, #161D31 0%, #0E1322 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    padding: 1.4rem;
    box-shadow: 0 30px 70px rgba(0,0,0,0.55);
}
.ss-admin__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.ss-admin__title { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; color: #fff; font-size: 1.05rem; }
.ss-admin__title i { color: var(--ss-blue-bright); font-size: 1.15rem; }
.ss-admin__badge {
    font-size: 0.72rem; font-weight: 700; color: #2ec27a;
    background: rgba(46,194,122,0.12); border: 1px solid rgba(46,194,122,0.25);
    padding: 0.22rem 0.6rem; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.ss-admin__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #2ec27a; box-shadow: 0 0 0 3px rgba(46,194,122,0.22); }

/* KPI-Kacheln */
.ss-admin__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 1.2rem; }
.ss-kpi {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 0.7rem 0.6rem;
}
.ss-kpi__label { font-size: 0.66rem; font-weight: 600; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.03em; display: flex; align-items: center; gap: 0.25rem; }
.ss-kpi__label i { font-size: 0.8rem; }
.ss-kpi__value { font-size: 1.15rem; font-weight: 800; color: #fff; margin-top: 0.3rem; line-height: 1; }
.ss-kpi__delta { font-size: 0.66rem; font-weight: 700; margin-top: 0.2rem; }
.ss-kpi__delta.up { color: #2ec27a; }
.ss-kpi--blue .ss-kpi__label i { color: var(--ss-blue-bright); }
.ss-kpi--green .ss-kpi__label i { color: #2ec27a; }
.ss-kpi--cyan .ss-kpi__label i { color: #38bdf8; }

/* Mini-Balkendiagramm */
.ss-admin__chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.ss-admin__chart-head > span:first-child { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.04em; }
.ss-admin__chart-head .ss-admin__period { font-size: 0.7rem; color: rgba(255,255,255,0.4); }
.ss-admin__chart { display: flex; align-items: flex-end; gap: 0.45rem; height: 64px; margin-bottom: 1.25rem; padding: 0 0.1rem; }
.ss-admin__bar { flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, rgba(56,116,255,0.85), rgba(56,116,255,0.35)); }
.ss-admin__bar.is-peak { background: linear-gradient(180deg, var(--ss-blue-bright), var(--ss-blue)); box-shadow: 0 6px 16px rgba(56,116,255,0.4); }

/* Rechnungszeile */
.ss-admin__invoice {
    display: flex; align-items: center; gap: 0.75rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px; padding: 0.75rem 0.85rem;
}
.ss-admin__invoice-icon {
    width: 38px; height: 38px; border-radius: 11px; flex: 0 0 38px;
    background: rgba(46,194,122,0.14); color: #2ec27a;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.ss-admin__invoice-main { flex: 1; min-width: 0; }
.ss-admin__invoice-title { font-weight: 700; color: #fff; font-size: 0.9rem; }
.ss-admin__invoice-sub { font-size: 0.74rem; color: rgba(255,255,255,0.5); }
.ss-admin__invoice-status { font-size: 0.72rem; font-weight: 700; color: #2ec27a; background: rgba(46,194,122,0.12); border: 1px solid rgba(46,194,122,0.25); padding: 0.2rem 0.55rem; border-radius: 999px; white-space: nowrap; }

/* Floating Toast (QR-Rechnung bezahlt) */
.ss-admin__toast {
    position: absolute; right: -16px; bottom: -22px; z-index: 3;
    display: flex; align-items: center; gap: 0.6rem; max-width: 250px;
    background: linear-gradient(150deg, #18203a, #0E1322);
    border: 1px solid rgba(56,116,255,0.3); border-radius: 14px;
    padding: 0.7rem 0.9rem; box-shadow: 0 16px 40px rgba(0,0,0,0.5);
    animation: ssFloat 5s ease-in-out 1s infinite;
}
.ss-admin__toast-icon { width: 30px; height: 30px; border-radius: 9px; background: rgba(56,116,255,0.15); color: var(--ss-blue-bright); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; }
.ss-admin__toast-title { font-size: 0.82rem; font-weight: 700; color: #fff; }
.ss-admin__toast-sub { font-size: 0.72rem; color: rgba(255,255,255,0.55); }
@media (max-width: 575px) {
    .ss-admin__toast { right: 0; bottom: -14px; max-width: 220px; }
}

/* ==========================================================================
   FEATURE-CHIPS (Kurzversion: Icon + Titel)
   ========================================================================== */
.ss-feat-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ss-feat-chip {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--ss-border, rgba(255,255,255,0.08));
    border-radius: 999px;
    font-size: 0.88rem; font-weight: 600; color: rgba(255,255,255,0.85);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.ss-feat-chip i { color: var(--ss-blue-bright, #6f9bff); font-size: 1rem; }
.ss-feat-chip:hover {
    border-color: rgba(var(--ss-blue-rgb, 56,116,255), 0.4);
    background: rgba(var(--ss-blue-rgb, 56,116,255), 0.10);
    transform: translateY(-2px);
}

/* ==========================================================================
   MOCKUP: mehrere Mini-Panels (verschiedene Funktionen)
   ========================================================================== */
.ss-app-wrap { position: relative; max-width: 460px; margin: 0 auto; padding-bottom: 2.2rem; display: flex; flex-direction: column; gap: 0.9rem; }
.ss-panel {
    position: relative; z-index: 1;
    background: linear-gradient(160deg, #161D31 0%, #0E1322 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
.ss-panel--stats { box-shadow: 0 26px 60px rgba(0,0,0,0.5); }
.ss-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.ss-panel__title { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: #fff; font-size: 0.98rem; }
.ss-panel__title i { color: var(--ss-blue-bright, #6f9bff); font-size: 1.1rem; }

/* KPIs im Stats-Panel */
.ss-panel__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; margin-bottom: 1rem; }

/* Mini-Balkendiagramm (nutzt .ss-admin__bar) */
.ss-mini-chart { display: flex; align-items: flex-end; gap: 0.4rem; height: 52px; padding: 0 0.1rem; }

/* Pill-Badges */
.ss-pill { font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; }
.ss-pill--blue { color: var(--ss-blue-bright, #6f9bff); background: var(--ss-blue-soft, rgba(56,116,255,0.12)); border: 1px solid rgba(56,116,255,0.22); }

/* Kurs-Zeilen */
.ss-course { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; }
.ss-course + .ss-course { border-top: 1px solid rgba(255,255,255,0.05); }
.ss-course__icon { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.ss-course__main { flex: 1; min-width: 0; }
.ss-course__name { font-weight: 700; color: #fff; font-size: 0.86rem; }
.ss-course__sub { font-size: 0.72rem; color: rgba(255,255,255,0.5); }
.ss-course__right { text-align: right; flex: 0 0 64px; }
.ss-course__count { font-size: 0.78rem; font-weight: 700; color: var(--ss-blue-bright, #6f9bff); }
.ss-course__count--full { color: #2ec27a; }
.ss-course__bar { display: block; width: 64px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.08); margin-top: 0.3rem; overflow: hidden; }
.ss-course__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--ss-blue, #3874ff); }

/* KI-Gruppeneinteilung */
.ss-panel--ai { display: flex; flex-direction: column; gap: 0.75rem; }
.ss-ai-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ss-ai-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, #2a3556, #1b2238);
    border: 1px solid rgba(255,255,255,0.12);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.66rem; font-weight: 800; color: rgba(255,255,255,0.85);
    margin-left: -8px;
}
.ss-ai-avatar:first-child { margin-left: 0; }
.ss-ai-avatar::before { content: attr(data-i); }
.ss-ai-arrow { color: rgba(255,255,255,0.4); margin: 0 0.25rem; font-size: 1.05rem; }
.ss-ai-group {
    font-size: 0.74rem; font-weight: 700; color: var(--ss-blue-bright, #6f9bff);
    background: var(--ss-blue-soft, rgba(56,116,255,0.12)); border: 1px solid rgba(56,116,255,0.22);
    padding: 0.28rem 0.6rem; border-radius: 8px;
}
.ss-ai-group--b { color: #2ec27a; background: rgba(46,194,122,0.12); border-color: rgba(46,194,122,0.25); }

@media (max-width: 575px) {
    .ss-panel__kpis { gap: 0.4rem; }
    .ss-kpi { padding: 0.55rem 0.45rem; }
}

/* ==========================================================================
   REFERENZEN – 3 Personen-Karten + 4 Logo-Karten
   ========================================================================== */
/* Personen-Karten (Bild + Zitat) */
.ss-ref-card {
    display: flex;
    flex-direction: column;
    background: var(--ss-surface, #121829);
    border: 1px solid var(--ss-border, rgba(255,255,255,0.07));
    border-radius: 20px;
    padding: 1.6rem;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.ss-ref-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--ss-blue-rgb, 56,116,255), 0.4);
    box-shadow: 0 16px 36px rgba(0,0,0,0.35);
}
.ss-ref-card__stars { color: #f5b740; font-size: 1rem; letter-spacing: 2px; margin-bottom: 0.8rem; }
.ss-ref-card__quote {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.78);
    margin: 0 0 1.4rem;
    flex: 1;
}
.ss-ref-card__person { display: flex; align-items: center; gap: 0.8rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,0.07); }
.ss-ref-card__person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 48px; }
.ss-ref-card__name { font-weight: 800; color: #fff; font-size: 0.95rem; }
.ss-ref-card__role { font-size: 0.8rem; color: rgba(255,255,255,0.5); }

/* Logo-Karten (nur Logo + Name) */
.ss-ref-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 1.4rem 1rem;
    background: var(--ss-surface, #121829);
    border: 1px solid var(--ss-border, rgba(255,255,255,0.07));
    border-radius: 16px;
    text-align: center;
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.ss-ref-logo:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--ss-blue-rgb, 56,116,255), 0.35);
}
.ss-ref-logo img { max-width: 100%; height: auto; max-height: 50px; object-fit: contain; }
.ss-ref-logo__name { font-size: 0.86rem; font-weight: 700; color: rgba(255,255,255,0.82); }

/* ==========================================================================
   FOTO-BANNER – persoenlich, emotional (Zwischensektion)
   ========================================================================== */
.ss-photo-banner {
    position: relative;
    min-height: 26rem;
    display: flex; align-items: center; justify-content: center;
    background: url('../img/bg-review.webp') center/cover no-repeat;
    overflow: hidden;
}
.ss-photo-banner::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,15,26,0.55), rgba(11,15,26,0.45)),
                linear-gradient(110deg, rgba(56,116,255,0.22), transparent 60%);
}
.ss-photo-banner__inner {
    position: relative; z-index: 1; text-align: center; padding: 2rem 1.25rem; max-width: 46rem;
}
.ss-photo-banner__quote {
    font-family: "Inter Tight", system-ui, sans-serif;
    font-weight: 800; letter-spacing: -0.03em; line-height: 1.12;
    font-size: clamp(1.25rem, 4.5vw, 2.6rem); color: #fff;
    margin: 0 0 1rem; text-shadow: 0 2px 24px rgba(0,0,0,0.4);
}
.ss-photo-banner__sub {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-size: 0.95rem; font-weight: 600; color: rgba(255,255,255,0.9);
    background: rgba(11,15,26,0.45); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.14); border-radius: 999px;
    padding: 0.5rem 1.1rem;
}
@media (max-width: 575px) { .ss-photo-banner { min-height: 18rem; } }

/* ==========================================================================
   TESTIMONIALS aufwerten – groessere Fotos, groessere Zitate, persoenlicher
   ========================================================================== */
.testimonial-card {
    background: linear-gradient(160deg, #141A2E, #0F1422) !important;
    border: 1px solid var(--ss-border) !important;
    border-radius: 24px !important;
}
.testimonial-card blockquote {
    font-family: "Inter Tight", system-ui, sans-serif !important;
    font-size: clamp(1.15rem, 1.7vw, 1.5rem) !important;
    font-weight: 600 !important; letter-spacing: -0.02em;
    line-height: 1.4 !important; color: #eef1f8 !important;
}
.testimonial-card .uil-quote-right { color: var(--ss-blue-bright) !important; opacity: 0.4 !important; }
/* Trainer-Foto groesser & mit Marken-Ring.
   flex-shrink:0 + min-width verhindern, dass der d-flex-Container das Bild quetscht. */
.testimonial-card img.rounded-circle {
    width: 72px !important; height: 72px !important;
    min-width: 72px !important; max-width: 72px !important;
    flex: 0 0 72px !important;
    border: 2px solid var(--ss-blue) !important;
    box-shadow: 0 0 0 4px rgba(56,116,255,0.12);
    object-fit: cover !important;
}
.testimonial-card .fw-bold { font-size: 1.05rem; }
.testimonial-card svg.text-warning { width: 20px; height: 20px; }

/* ===== Testimonial-Karussell (3 sichtbar Desktop, 1 Mobile) ===== */
.ss-carousel { position: relative; }
.ss-carousel__track {
    display: flex; gap: 1.5rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0.25rem 1rem;
    scrollbar-width: none; /* Firefox */
}
.ss-carousel__track::-webkit-scrollbar { display: none; } /* WebKit */
.ss-carousel__track > [class*="col-"] {
    flex: 0 0 calc((100% - 3rem) / 3);   /* 3 Karten + 2 gaps */
    max-width: calc((100% - 3rem) / 3);
    scroll-snap-align: start;
    width: auto;
}
@media (max-width: 991px) {
    .ss-carousel__track > [class*="col-"] { flex-basis: calc((100% - 1.5rem) / 2); max-width: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 640px) {
    .ss-carousel__track > [class*="col-"] { flex-basis: 88%; max-width: 88%; }
}

/* Steuerung: Pfeile + Punkte */
.ss-carousel__controls {
    display: flex; align-items: center; justify-content: center;
    gap: 1rem; margin-top: 1.5rem;
}
.ss-carousel__btn {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ss-surface); border: 1px solid var(--ss-border);
    color: #fff; font-size: 1.3rem; cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ss-carousel__btn:hover { background: var(--ss-blue); border-color: var(--ss-blue); transform: translateY(-2px); }
.ss-carousel__btn:disabled { opacity: 0.35; cursor: default; transform: none; }
.ss-carousel__dots { display: inline-flex; gap: 0.5rem; }
.ss-carousel__dots button {
    width: 8px; height: 8px; border-radius: 50%; padding: 0;
    border: 0; background: rgba(255,255,255,0.25); cursor: pointer;
    transition: background-color 0.25s ease, width 0.25s ease;
}
.ss-carousel__dots button.is-active { background: var(--ss-blue-bright); width: 22px; border-radius: 999px; }

/* Initial-Avatar (Platzhalter, bis echte Fotos da sind) */
.ss-avatar-initials {
    width: 72px; height: 72px; flex: 0 0 72px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, var(--ss-blue), var(--ss-blue-deep));
    border: 2px solid var(--ss-blue);
    box-shadow: 0 0 0 4px rgba(56,116,255,0.12);
    color: #fff; font-weight: 800; font-size: 1.4rem;
    font-family: "Inter Tight", system-ui, sans-serif; letter-spacing: 0.02em;
}
.ss-avatar-initials::before { content: attr(data-initials); }

/* ==========================================================================
   USP-Sektion klar von Features abheben:
   ruhige, randlose "Zeilen"-Karten statt schwebendem Card-Grid.
   ========================================================================== */
#usp .row.g-3 > [class*="col-"] > .card,
#usp .row.g-4 > [class*="col-"] > .card.step-card {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--ss-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
#usp .card.step-card .card-body { padding: 1.5rem 0.25rem !important; }
#usp .card.step-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: rgba(56,116,255,0.3) !important;
}
/* USP-Icon-Boxen kleiner & flacher (kein "Feature-Tile"-Look) */
#usp .card.step-card .rounded-3 { width: 40px !important; height: 40px !important; }
#usp .card.step-card h5 { font-size: 1.02rem; }
/* Stats-Strip in der USP-Sektion bleibt als Karte – aber edler */
#usp .row.mt-5 .card {
    background: linear-gradient(150deg, #141A2E, #0F1422) !important;
    border: 1px solid var(--ss-border) !important;
}

/* ==========================================================================
   ANIMATIONEN – subtil & premium (IntersectionObserver-getrieben)
   ========================================================================== */

/* Scroll-Reveal: Grundzustand (unsichtbar, leicht abgesenkt) */
.ss-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.ss-reveal.is-visible {
    opacity: 1;
    transform: none;
}
/* Gestaffeltes Einblenden (vom JS gesetzt via --d) */
.ss-reveal { transition-delay: var(--d, 0s); }

/* Hero beim Laden elegant einblenden */
.ss-hero__text > *,
.ss-hero__visual {
    opacity: 0;
    transform: translateY(18px);
    animation: ssHeroIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.ss-hero__eyebrow   { animation-delay: 0.05s; }
.ss-hero__title     { animation-delay: 0.15s; }
.ss-hero__lead      { animation-delay: 0.28s; }
.ss-hero__cta       { animation-delay: 0.40s; }
.ss-trust           { animation-delay: 0.52s; }
.ss-hero__visual    { animation-delay: 0.30s; transform: translateY(24px) scale(0.985); }
@keyframes ssHeroIn {
    to { opacity: 1; transform: none; }
}

/* iPhone schwebt sanft (dezent, dauerhaft) */
.ss-hero__phone {
    animation: ssFloat 6s ease-in-out 1.2s infinite;
}
@keyframes ssFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* Hover-Veredelung: Karten heben sich dezent, Glow in Markenfarbe */
.card.step-card,
.testimonial-card,
#features .card,
#usp .card {
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.35s ease, border-color 0.35s ease;
}
.card.step-card:hover,
.testimonial-card:hover,
#features .card:hover,
#usp .card:hover {
    transform: translateY(-6px);
    border-color: rgba(56,116,255,0.28) !important;
    box-shadow: 0 22px 50px rgba(0,0,0,0.45), 0 0 0 1px rgba(56,116,255,0.12) !important;
}

/* Buttons: weicher Press/Hover */
.btn-primary, .btn-outline-primary {
    transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease;
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }

/* Zahlenkreise: dezenter Puls-Glow */
.step-number-circle.bg-primary {
    box-shadow: 0 8px 24px rgba(56,116,255,0.30);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.step-card:hover .step-number-circle.bg-primary {
    transform: scale(1.06);
    box-shadow: 0 12px 32px rgba(56,116,255,0.5);
}

/* Hero-Foto: sanfter Zoom bei Hover (lebendig, aber ruhig) */
.ss-hero__photo img { transition: transform 1.2s cubic-bezier(0.22,1,0.36,1); }
.ss-hero__photo:hover img { transform: scale(1.04); }

/* Barrierefreiheit: alle Bewegungen aus, wenn der Nutzer das wuenscht */
@media (prefers-reduced-motion: reduce) {
    .ss-reveal,
    .ss-hero__text > *,
    .ss-hero__visual { opacity: 1 !important; transform: none !important; animation: none !important; }
    .ss-hero__phone { animation: none !important; }
    .ss-hero__photo img,
    .card.step-card,
    .btn-primary { transition: none !important; }
}