/* ══════════════════════════════════════════════════════════════════════════
kundenkonto.css – MatchMoment Kundenkonto · Dark Purple Theme
Gilt für: kundenkonto.html, event-buchen.html, event-chat.html, rematch.html
Akzent: #a78bfa · Primär: #4a318a · Hintergrund: #1a0f3a → #2d1b6e → #4a318a
══════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════
DESIGN TOKENS – Übersetzung Light-Mockup → MatchMoment Dark Theme
════════════════════════════════════════════════════════════════════════ */
:root {
/* ── Fonts ───────────────────────────────────────────────────────── */
--font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
/* ── Surfaces (Hintergründe) ─────────────────────────────────────── */
/* primary = Karten/Panels, secondary = sanfter Akzent, tertiary = Wrapper-Backdrop */
--color-background-primary: rgba(255,255,255,.05); /* Card-Body */
--color-background-secondary: rgba(255,255,255,.08); /* Sub-Card / Stat-Card */
--color-background-tertiary: rgba(0,0,0,.22); /* Page-Wrapper */
--color-background-info: rgba(167,139,250,.12); /* helllila Highlight */
/* ── Texte ───────────────────────────────────────────────────────── */
--color-text-primary: #ffffff; /* Überschriften, wichtige Werte */
--color-text-secondary: rgba(255,255,255,.6); /* Subtexte, Labels */
--color-text-tertiary: rgba(255,255,255,.4); /* sehr leise Hints */
--color-text-info: #c4b5fd; /* Lila-Text (war #534AB7) */
/* ── Borders ─────────────────────────────────────────────────────── */
--color-border-tertiary: rgba(167,139,250,.15); /* feine Trenner */
--color-border-secondary: rgba(167,139,250,.35); /* sichtbare Kanten */
--color-border-primary: rgba(167,139,250,.55); /* aktive/selektierte Ränder */
/* ── Brand / Akzent ──────────────────────────────────────────────── */
--color-brand: #a78bfa; /* Haupt-Akzent (war Mockup #7F77DD) */
--color-brand-soft: rgba(167,139,250,.18); /* dezent gefüllt */
--color-brand-strong: #7c3aed; /* Hover / Pressed */
--color-brand-glow: rgba(109,40,217,.35); /* Button-Glow */
/* ── Status ──────────────────────────────────────────────────────── */
--color-success: #4ade80; /* Mint-Grün (Compat-Bar / Success) */
--color-success-soft: rgba(74,222,128,.18);
--color-warning: #fbbf24;
--color-error: #f87171;
--color-error-soft: rgba(248,113,113,.18);
/* ── Spacing / Radii ─────────────────────────────────────────────── */
--border-radius-sm: 8px;
--border-radius-md: 12px;
--border-radius-lg: 20px;
--border-radius-xl: 28px;
/* ── Shadows ─────────────────────────────────────────────────────── */
--shadow-card: 0 24px 60px rgba(0,0,0,.4);
--shadow-btn: 0 8px 28px var(--color-brand-glow);
--shadow-soft: 0 8px 24px rgba(0,0,0,.25);
/* ── Blur ────────────────────────────────────────────────────────── */
--blur-glass: 20px;
}
/* ── hidden-Attribut: Basis-CSS überschreibt [hidden] mit display:grid ─ */
.account-safe-card[hidden] { display: none !important; }
/* ════════════════════════════════════════════════════════════════════════
BASE – BODY & PAGE
════════════════════════════════════════════════════════════════════════ */
body {
background: linear-gradient(135deg, #1a0f3a 0%, #2d1b6e 60%, #4a318a 100%) !important;
background-attachment: fixed !important;
color: #fff !important;
}
.portal-page { background: transparent !important; }
.portal-card,
.account-dashboard__shell {
background: rgba(255,255,255,.05) !important;
border: 1px solid rgba(255,255,255,.1) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
box-shadow: 0 24px 60px rgba(0,0,0,.4) !important;
}
/* ════════════════════════════════════════════════════════════════════════
HEADER
════════════════════════════════════════════════════════════════════════ */
.portal-header,
.account-dashboard__header {
background: transparent !important;
border-bottom: 1px solid rgba(255,255,255,.1) !important;
padding: 2rem 2.25rem 1.75rem !important;
}
.imprint-page__title {
color: #fff !important;
font-size: clamp(1.8rem,4vw,2.4rem) !important;
margin-bottom: .35rem !important;
}
.portal-lead { color: rgba(255,255,255,.65) !important; }
.account-home-link { color: rgba(255,255,255,.55) !important; text-decoration: none !important; transition: color .15s !important; }
.account-home-link:hover { color: #a78bfa !important; }
.account-header-actions { display:flex; flex-direction:column; align-items:flex-end; gap:.3rem }
.account-header-logout { background:none; border:none; cursor:pointer; font-size:.79rem; color:rgba(255,255,255,.4); padding:.15rem 0; transition:color .15s; line-height:1.3 }
.account-header-logout:hover { color:rgba(255,255,255,.8) }
@media(max-width:767px){ .portal-header,.account-dashboard__header{padding:1.5rem 1.25rem 1.25rem !important} .account-header-actions{gap:.2rem} .account-header-logout{font-size:.76rem} }
/* ════════════════════════════════════════════════════════════════════════
NAVIGATION – Original (versteckt via Sidebar)
════════════════════════════════════════════════════════════════════════ */
.account-nav,
.account-nav-select {
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
height: 0 !important;
overflow: hidden !important;
z-index: -1 !important;
}
/* ════════════════════════════════════════════════════════════════════════
SIDEBAR + BOTTOM-NAV LAYOUT
════════════════════════════════════════════════════════════════════════ */
.account-dashboard__shell {
display: flex !important;
flex-direction: row !important;
min-height: 100vh !important;
position: relative !important;
padding: 0 !important;
border-radius: 1.5rem !important;
}
/* Sidebar */
.kk-sidebar {
width: 210px;
min-width: 210px;
flex-shrink: 0;
display: flex;
flex-direction: column;
background: rgba(10,4,30,.55);
border-right: 1px solid rgba(255,255,255,.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 1.5rem 0 1.25rem;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
z-index: 60;
}
.kk-sidebar__logo {
padding: 0 1.1rem 1.25rem;
border-bottom: 1px solid rgba(255,255,255,.09);
margin-bottom: .75rem;
}
.kk-sidebar__logo-link {
text-decoration: none;
font-size: .95rem;
color: rgba(255,255,255,.75);
font-weight: 500;
letter-spacing: -.01em;
}
.kk-sidebar__logo-link strong { color: #a78bfa; font-weight: 800; }
.kk-sidebar__nav {
flex: 1;
display: flex;
flex-direction: column;
gap: .18rem;
padding: 0 .65rem;
}
.kk-nav-btn {
display: flex;
align-items: center;
gap: .6rem;
width: 100%;
padding: .6rem .8rem;
border: none;
border-radius: 9px;
background: transparent;
color: rgba(255,255,255,.58);
font-size: .875rem;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: background .15s, color .15s, border-color .15s;
position: relative;
border-right: 3px solid transparent;
}
.kk-nav-btn i { font-size: 1.1rem; flex-shrink: 0; }
.kk-nav-btn:hover:not(.is-active) {
background: rgba(167,139,250,.12);
color: #fff;
}
.kk-nav-btn.is-active {
background: rgba(74,49,138,.45);
color: #fff;
border-right-color: #a78bfa;
font-weight: 600;
}
.kk-chat-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: #e53e3e;
color: #fff;
font-size: .6rem;
font-weight: 700;
border-radius: 999px;
min-width: .95rem;
height: .95rem;
padding: 0 .2rem;
margin-left: auto;
line-height: 1;
}
.kk-sidebar__footer {
padding: .75rem .65rem 0;
border-top: 1px solid rgba(255,255,255,.09);
margin-top: .5rem;
}
.kk-sidebar__logout {
display: flex;
align-items: center;
gap: .6rem;
width: 100%;
padding: .55rem .8rem;
border: none;
border-radius: 9px;
background: transparent;
color: rgba(255,255,255,.38);
font-size: .83rem;
cursor: pointer;
text-align: left;
transition: color .15s, background .15s;
}
.kk-sidebar__logout:hover { color: #fff; background: rgba(239,68,68,.12); }
.kk-sidebar__logout i { font-size: 1rem; }
/* Main content wrapper */
.kk-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Bottom Nav (Mobile) – fixiert unten, immer im Daumenbereich */
.kk-bottom-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(18,10,46,.97);
border-top: 1px solid rgba(167,139,250,.18);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 0 0 env(safe-area-inset-bottom, .25rem);
}
.kk-bottom-nav .kk-nav-btn {
flex: 1;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .15rem;
padding: .5rem .25rem .4rem;
font-size: .64rem;
font-weight: 500;
border-radius: 0;
border-right: none;
border-top: 2px solid transparent;
}
.kk-bottom-nav .kk-nav-btn i { font-size: 1.2rem; }
.kk-bottom-nav .kk-nav-btn.is-active {
background: rgba(167,139,250,.1);
color: #a78bfa;
border-top-color: #a78bfa;
}
.kk-bottom-nav-inner {
display: flex;
align-items: center;
justify-content: space-around;
max-width: 480px;
margin: 0 auto;
}
@media (min-width: 768px) {
.kk-sidebar { display: flex; }
.kk-bottom-nav { display: none !important; }
.account-dashboard__shell { overflow: hidden; }
}
@media (max-width: 767px) {
.account-dashboard__shell { flex-direction: column !important; min-height: 100vh !important; }
.kk-sidebar { display: none !important; }
.kk-bottom-nav { display: block !important; }
/* Platz für die fixierte Bottom-Nav (+ iPhone Home-Indicator) */
.kk-main { padding-top: 1rem; padding-bottom: 5rem; }
}
/* ════════════════════════════════════════════════════════════════════════
PANELS
════════════════════════════════════════════════════════════════════════ */
.account-panel { background: transparent !important; }
.account-panel:not(.is-active) { display: none !important; }
.account-panel.is-active { display: grid !important; gap: 1.25rem !important; }
.account-panel { padding: 2rem 2.25rem 2.5rem !important; }
.account-panel__head {
border-bottom: 1px solid rgba(255,255,255,.09) !important;
padding-bottom: 1.25rem !important;
margin-bottom: 1.5rem !important;
}
.account-panel__head h2,
.account-panel__head--quiet h2 { color: #fff !important; font-size: 1.35rem !important; font-weight: 800 !important; }
.account-panel__head p { color: rgba(255,255,255,.6) !important; }
@media (max-width: 767px) { .account-panel { padding: 1.5rem 1.25rem 2rem !important; } }
/* ════════════════════════════════════════════════════════════════════════
DASHBOARD CARDS (account-safe-card)
════════════════════════════════════════════════════════════════════════ */
.account-safe-card {
background: rgba(255,255,255,.07) !important;
border: 1px solid rgba(255,255,255,.12) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
padding: 1.5rem 1.6rem !important;
border-radius: 1.1rem !important;
gap: .65rem !important;
display: flex !important;
flex-direction: column !important;
}
.account-safe-card--primary {
background: rgba(74,49,138,.5) !important;
border-color: rgba(167,139,250,.4) !important;
box-shadow: 0 6px 28px rgba(0,0,0,.3) !important;
}
.account-safe-card--quiet { opacity: .55 !important; }
.account-safe-card__eyebrow { color: #a78bfa !important; font-size: .72rem !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; }
.account-safe-card h3 { color: #fff !important; font-size: 1.05rem !important; margin-bottom: .2rem !important; }
.account-safe-card p { color: rgba(255,255,255,.68) !important; line-height: 1.6 !important; }
.account-safe-card .landing-btn-ghost, .account-safe-card .ghost-btn { margin-top: auto !important; }
.event-chat-preview { border-top: 1px solid rgba(255,255,255,.12) !important; }
.event-chat-preview span { color: #a78bfa !important; font-size: .72rem !important; }
.event-chat-preview strong { color: #fff !important; }
.event-chat-preview p { color: rgba(255,255,255,.6) !important; font-size: .82rem !important; }
.account-dashboard-grid { gap: 1rem !important; }
/* ════════════════════════════════════════════════════════════════════════
BUTTONS
════════════════════════════════════════════════════════════════════════ */
.landing-btn, .cta-btn, .imprint-page__back {
background: #4a318a !important;
background-image: none !important;
border-color: #4a318a !important;
color: #fff !important;
box-shadow: 0 4px 18px rgba(0,0,0,.35) !important;
}
.landing-btn:hover, .cta-btn:hover, .imprint-page__back:hover {
background: #3a2470 !important;
filter: none !important;
}
.landing-btn-ghost, .ghost-btn {
background: rgba(255,255,255,.08) !important;
border-color: rgba(255,255,255,.28) !important;
color: #fff !important;
}
.landing-btn-ghost:hover, .ghost-btn:hover {
background: rgba(255,255,255,.15) !important;
border-color: rgba(255,255,255,.45) !important;
color: #fff !important;
}
/* Events-buchen CTA */
.events-book-btn {
display: inline-flex !important;
align-items: center !important;
gap: .4rem !important;
background: linear-gradient(135deg,#6d28d9,#a78bfa) !important;
color: #fff !important;
border: none !important;
border-radius: 10px !important;
padding: .6rem 1.15rem !important;
font-size: .88rem !important;
font-weight: 700 !important;
cursor: pointer !important;
text-decoration: none !important;
box-shadow: 0 4px 16px rgba(109,40,217,.45) !important;
transition: box-shadow .2s, transform .15s !important;
white-space: nowrap !important;
}
.events-book-btn:hover { box-shadow: 0 6px 22px rgba(109,40,217,.65) !important; transform: translateY(-1px) !important; color: #fff !important; }
/* ════════════════════════════════════════════════════════════════════════
EYEBROW / LABELS
════════════════════════════════════════════════════════════════════════ */
.imprint-page__eyebrow, .trust-pill, .section-eyebrow {
background: rgba(167,139,250,.15) !important;
border-color: rgba(167,139,250,.3) !important;
color: #c4b5fd !important;
}
/* ════════════════════════════════════════════════════════════════════════
EVENTS HUB
════════════════════════════════════════════════════════════════════════ */
.events-hub { background: transparent !important; color: #fff !important; border-radius: 0 !important; padding: 0 !important; }
.events-hub__head { padding-bottom: 1.25rem !important; margin-bottom: 1.5rem !important; border-bottom: 1px solid rgba(255,255,255,.09) !important; }
.events-hub__head h2 { color: #fff !important; font-size: 1.35rem !important; font-weight: 800 !important; margin-bottom: .3rem !important; }
.events-hub__head p:not(.imprint-page__eyebrow) { color: rgba(255,255,255,.62) !important; font-weight: 500 !important; }
/* mm-tabs: kompakte Pill-Tabs (für Eventfilter, später auch für andere Listen) */
.mm-tabs,
.events-hub__tabs {
display: flex !important;
gap: .5rem !important;
background: transparent !important;
border: none !important;
overflow: visible !important;
border-radius: 0 !important;
margin: 0 0 1rem !important;
flex-wrap: wrap !important;
}
.mm-tabs__btn,
.events-hub__tabs button {
flex: 0 0 auto !important;
background: var(--color-background-secondary) !important;
border: 1px solid var(--color-border-tertiary) !important;
color: var(--color-text-secondary) !important;
border-radius: var(--border-radius-md) !important;
font-size: .82rem !important;
font-weight: 600 !important;
min-height: 0 !important;
padding: .5rem 1.1rem !important;
cursor: pointer !important;
font-family: inherit !important;
transition: background .15s, color .15s, border-color .15s !important;
}
.mm-tabs__btn.is-active,
.events-hub__tabs button.is-active {
background: var(--color-brand-soft) !important;
border-color: var(--color-border-secondary) !important;
color: var(--color-text-primary) !important;
}
.mm-tabs__btn:hover:not(.is-active),
.events-hub__tabs button:hover:not(.is-active) {
background: var(--color-brand-soft) !important;
color: var(--color-text-primary) !important;
border-color: var(--color-border-tertiary) !important;
}
.events-timeline { background: transparent !important; gap: .85rem !important; display: flex !important; flex-direction: column !important; }
.events-timeline__date { color: rgba(255,255,255,.42) !important; font-size: .72rem !important; letter-spacing: .08em !important; }
/* ════════════════════════════════════════════════════════════════════════
EVENT CARDS
════════════════════════════════════════════════════════════════════════ */
.event-card {
background: rgba(74,49,138,.35) !important;
border: 1px solid rgba(167,139,250,.22) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
box-shadow: 0 4px 20px rgba(0,0,0,.25) !important;
padding: 1.4rem 1.5rem 1.4rem 1.65rem !important;
border-radius: 1.1rem !important;
border-left: 3.5px solid #a78bfa !important;
position: relative !important;
overflow: hidden !important;
}
.event-card::before, .event-card::after { display: none !important; content: none !important; }
.event-card > span, .event-card > [class*="count"], .event-card > [class*="badge"] { display: none !important; }
.event-card[data-event-type="aktivitaet"] { border-left-color: #2dd4bf !important; }
.event-card[data-event-type="einzeldate"] { border-left-color: #f59e0b !important; }
.event-card[data-event-type="gruppendate"] { border-left-color: #a78bfa !important; }
.event-card__occupancy,
.event-card > :not(.event-card__content):not(.event-card__footer):not(div):not(p) { display: none !important; }
[data-next-event-card]::before, [data-next-event-card]::after { display: none !important; content: none !important; }
[data-next-event-card] > span:not(.account-safe-card__eyebrow),
[data-next-event-card] > [class*="count"],
[data-next-event-card] > [class*="badge"],
[data-next-event-card] > [class*="occupancy"],
[data-next-event-card] > [class*="slot"] { display: none !important; }
.event-card h3 { color: #fff !important; font-size: 1.1rem !important; font-weight: 800 !important; margin: 0 !important; }
.event-card__meta { color: rgba(255,255,255,.65) !important; }
.event-card__meta p { color: rgba(255,255,255,.65) !important; font-size: .85rem !important; margin: 0 !important; }
.event-card__meta p::before { display: none !important; }
.event-card__content { display: flex; flex-direction: column; gap: .55rem; margin-bottom: .9rem; }
.event-card__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.event-card__tags { gap: .4rem !important; margin-top: .1rem !important; }
.event-card__footer {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: .65rem !important;
flex-wrap: wrap !important;
padding-top: .9rem !important;
margin-top: 0 !important;
border-top: 1px solid rgba(255,255,255,.1) !important;
}
.event-card__status { font-size: .83rem !important; color: rgba(255,255,255,.52) !important; flex: 1 1 auto !important; margin: 0 !important; }
.event-card__status::before { display: none !important; }
.event-card__button {
background: rgba(255,255,255,.1) !important;
border: 1.5px solid rgba(255,255,255,.25) !important;
color: #fff !important;
border-radius: 10px !important;
flex-shrink: 0 !important;
padding: .45rem 1.1rem !important;
font-size: .84rem !important;
}
.event-card__button:hover { background: rgba(255,255,255,.18) !important; }
.event-card--empty {
background: rgba(255,255,255,.04) !important;
border-style: dashed !important;
border-color: rgba(255,255,255,.15) !important;
box-shadow: none !important;
}
.event-card--empty h3 { color: rgba(255,255,255,.65) !important; }
.event-card--empty p { color: rgba(255,255,255,.4) !important; }
/* Stornieren- & Feedback-Buttons */
.event-card__cancel {
background: none; border: 1px solid rgba(239,68,68,.3);
color: #fca5a5; font-size: .74rem; padding: .28rem .6rem;
border-radius: 999px; cursor: pointer; transition: all .15s;
white-space: nowrap; margin-left: .35rem; flex-shrink: 0;
}
.event-card__cancel:hover { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.55); color: #f87171; }
.event-card__cancel:disabled { opacity: .35; cursor: not-allowed; }
.event-card__feedback {
display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem;
padding: .28rem .65rem; border-radius: 999px;
background: rgba(167,139,250,.15); border: 1px solid rgba(167,139,250,.3);
color: #c4b5fd; cursor: pointer; text-decoration: none;
white-space: nowrap; margin-left: .35rem; flex-shrink: 0; transition: all .15s;
}
.event-card__feedback:hover { background: rgba(167,139,250,.28); }
.rematch-dot { display: inline-block; width: .42rem; height: .42rem; border-radius: 50%; background: #a78bfa; margin-right: .2rem; vertical-align: middle; }
/* Chips */
.event-chip { background: rgba(167,139,250,.14) !important; border-color: rgba(167,139,250,.28) !important; color: #c4b5fd !important; }
.event-chip--purple { background: rgba(74,49,138,.55) !important; border-color: #a78bfa !important; color: #e9d5ff !important; }
.event-chip--gold { background: rgba(245,158,11,.15) !important; border-color: rgba(245,158,11,.35) !important; color: #fcd34d !important; }
.event-chip--paid { background: rgba(16,185,129,.12) !important; border-color: rgba(16,185,129,.3) !important; color: #6ee7b7 !important; }
.event-chip--pending { background: rgba(245,158,11,.13) !important; border-color: rgba(245,158,11,.3) !important; color: #fcd34d !important; }
.chat-nav-badge { display:inline-flex; align-items:center; justify-content:center; background:#e53e3e; color:#fff; font-size:.62rem; font-weight:700; border-radius:999px; min-width:1rem; height:1rem; padding:0 .25rem; margin-left:.3rem; vertical-align:middle; line-height:1 }
/* ════════════════════════════════════════════════════════════════════════
MATCHES PANEL
════════════════════════════════════════════════════════════════════════ */
.match-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 1rem; margin-top: .5rem; }
.match-card {
background: rgba(255,255,255,.07) !important;
border: 1.5px solid rgba(255,255,255,.13) !important;
backdrop-filter: blur(12px) !important;
border-radius: 14px; padding: 1.25rem 1.5rem;
display: flex; flex-direction: column; gap: .6rem;
}
.match-card__score { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; font-size: 1.35rem; }
.match-card__score-bar { flex: 1; height: 6px; background: rgba(255,255,255,.15); border-radius: 999px; overflow: hidden; }
.match-card__score-fill { height: 100%; border-radius: 999px; transition: width .4s ease; }
.match-card__name { font-size: 1rem; font-weight: 700; color: #fff !important; margin: 0; }
.match-card__interp { font-size: .8rem; color: rgba(255,255,255,.6) !important; margin: 0; }
.match-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }
.match-card__tag {
font-size: .72rem; padding: .2rem .55rem; border-radius: 999px; font-weight: 600;
background: rgba(167,139,250,.15) !important;
border: 1px solid rgba(167,139,250,.25) !important;
color: #c4b5fd !important;
}
.match-card__icebreaker {
background: rgba(167,139,250,.09) !important;
border: 1px solid rgba(167,139,250,.28) !important;
border-left: 3px solid #a78bfa !important;
border-radius: 8px !important; padding: .55rem .8rem !important; margin-top: .6rem !important;
}
.match-card__icebreaker-label { font-size: .68rem !important; color: #a78bfa !important; font-weight: 700 !important; letter-spacing: .07em !important; text-transform: uppercase !important; margin-bottom: .2rem !important; }
.match-card__icebreaker-text { font-size: .84rem !important; color: rgba(255,255,255,.82) !important; font-style: italic !important; line-height: 1.45 !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.match-card__actions { display: flex !important; gap: .45rem !important; flex-wrap: wrap !important; margin-top: .6rem !important; }
.match-card__actions .btn-profile {
font-size: .77rem !important; padding: .3rem .8rem !important;
background: rgba(167,139,250,.15) !important;
border: 1px solid rgba(167,139,250,.35) !important;
color: #c4b5fd !important;
border-radius: 999px !important; cursor: pointer !important; transition: background .15s !important; font-weight: 600 !important;
}
.match-card__actions .btn-profile:hover { background: rgba(167,139,250,.28) !important; color: #fff !important; }
.match-card__redflag {
font-size: .72rem; padding: .2rem .55rem; border-radius: 999px; font-weight: 600;
background: rgba(239,68,68,.15) !important; border: 1px solid rgba(239,68,68,.3) !important; color: #fca5a5 !important;
}
.match-empty { text-align: center; padding: 3rem 1rem; }
.match-empty h3 { font-size: 1.05rem; font-weight: 700; color: #fff !important; margin: 0 0 .5rem; }
.match-empty p { font-size: .875rem; line-height: 1.6; color: rgba(255,255,255,.6) !important; margin: 0 0 1.25rem; }
/* ════════════════════════════════════════════════════════════════════════
CHATS PANEL (inline chat in kundenkonto)
════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════
PRIVATE CHATS v2 – Phase 6C: Tokens + Split-View + neue Bubbles
════════════════════════════════════════════════════════════════════════ */
/* Wrapper für die Chat-Inbox (mit Split-View wenn private Chat aktiv ist) */
.chat-inbox-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
transition: grid-template-columns .25s ease;
}
/* Wenn ein 1:1-Chat aktiv ist: private Card volle Breite, group-Card kompakter */
.chat-inbox-grid[data-private-active="true"] {
grid-template-columns: minmax(0,1fr);
}
.chat-inbox-grid[data-private-active="true"] [data-chat-card="group"] {
display: none;
}
@media (max-width: 800px) {
.chat-inbox-grid { grid-template-columns: 1fr; }
}
.chat-room-card {
background: var(--color-background-primary) !important;
border: 1px solid var(--color-border-tertiary) !important;
backdrop-filter: blur(var(--blur-glass)) !important;
-webkit-backdrop-filter: blur(var(--blur-glass)) !important;
border-radius: var(--border-radius-lg) !important;
}
.chat-room-card h3 {
color: var(--color-text-primary) !important;
font-size: 1rem !important;
font-weight: 700 !important;
letter-spacing: -.01em;
}
.chat-room-card p { color: var(--color-text-secondary) !important; }
.chat-convo-item {
display: flex;
align-items: center;
gap: .65rem;
width: 100%;
padding: .7rem .75rem;
border: none;
background: transparent;
cursor: pointer;
border-radius: var(--border-radius-md);
text-align: left;
transition: background .15s;
border-bottom: 1px solid var(--color-border-tertiary);
position: relative;
}
.chat-convo-item:last-child { border-bottom: none; }
.chat-convo-item:hover { background: var(--color-brand-soft); }
.chat-convo-item--unread { background: var(--color-background-info); }
.chat-convo-item--active {
background: var(--color-brand-soft);
box-shadow: inset 3px 0 0 var(--color-brand);
}
.chat-convo-item__avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--color-background-info);
color: var(--color-text-info);
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700;
font-size: .82rem;
flex-shrink: 0;
text-transform: uppercase;
border: 1px solid var(--color-border-secondary);
}
.chat-convo-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.chat-convo-item__name {
display: block;
font-weight: 700; font-size: .9rem;
color: var(--color-text-primary);
letter-spacing: -.01em;
}
.chat-convo-item__preview {
display: block;
font-size: .78rem;
color: var(--color-text-secondary);
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
margin-top: .1rem;
max-width: 100%;
}
.chat-convo-item__badge {
background: var(--color-brand);
color: #fff;
font-size: .68rem;
font-weight: 700;
border-radius: 999px;
padding: .15rem .5rem;
flex-shrink: 0;
min-width: 1.3rem;
text-align: center;
}
.chat-convo-item__arrow {
color: var(--color-text-tertiary);
font-size: 1.1rem;
line-height: 1;
flex-shrink: 0;
transition: color .15s, transform .15s;
}
.chat-convo-item:hover .chat-convo-item__arrow {
color: var(--color-text-secondary);
transform: translateX(2px);
}
.chat-empty-hint { color: var(--color-text-tertiary); font-size: .82rem; padding: .5rem .25rem; margin: 0; }
.chat-error-hint { color: var(--color-error); font-size: .82rem; padding: .5rem .25rem; margin: 0; }
/* Chat-Empty-Card */
.chat-empty-card {
text-align: center;
padding: 1.5rem 1rem;
}
.chat-empty-card__icon {
width: 48px; height: 48px;
border-radius: 50%;
background: var(--color-background-info);
color: var(--color-text-info);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: .65rem;
}
.chat-empty-card__title {
font-size: .95rem;
font-weight: 700;
color: var(--color-text-primary);
margin: 0 0 .25rem;
}
.chat-empty-card__text {
font-size: .82rem;
color: var(--color-text-secondary);
line-height: 1.5;
margin: 0;
}
/* Inline-Chat (im Kundenkonto-Panel) */
.chat-inline-header {
display: flex;
align-items: center;
gap: .7rem;
padding-bottom: .8rem;
border-bottom: 1px solid var(--color-border-tertiary);
margin-bottom: .65rem;
}
.chat-inline-back {
background: var(--color-background-secondary);
border: 1px solid var(--color-border-tertiary);
cursor: pointer;
color: var(--color-text-secondary);
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
font-size: .95rem;
border-radius: 50%;
flex-shrink: 0;
transition: background .15s, color .15s, border-color .15s;
}
.chat-inline-back:hover {
background: var(--color-brand-soft);
color: var(--color-text-primary);
border-color: var(--color-border-secondary);
}
.chat-inline-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--color-background-info);
color: var(--color-text-info);
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: .82rem;
border: 1px solid var(--color-border-secondary);
flex-shrink: 0;
text-transform: uppercase;
}
.chat-inline-name {
font-size: .95rem;
font-weight: 700;
color: var(--color-text-primary);
flex: 1;
letter-spacing: -.01em;
}
.chat-inline-messages {
max-height: 360px;
min-height: 100px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: .25rem;
padding: .25rem .5rem .25rem 0;
margin-bottom: 0;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.15) transparent;
}
.chat-inline-messages::-webkit-scrollbar { width: 4px; }
.chat-inline-messages::-webkit-scrollbar-track { background: transparent; }
.chat-inline-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }
.chat-msg {
display: flex;
flex-direction: column;
max-width: 78%;
margin-bottom: .2rem;
}
.chat-msg--self { align-self: flex-end; align-items: flex-end; }
.chat-msg--other { align-self: flex-start; align-items: flex-start; }
.chat-msg--continuation { margin-top: -.15rem; }
.chat-msg__bubble-row {
display: inline-flex;
align-items: flex-end;
gap: .15rem;
max-width: 100%;
}
.chat-msg__bubble {
padding: .5rem .85rem;
border-radius: 14px;
font-size: .88rem;
line-height: 1.5;
word-break: break-word;
max-width: 100%;
}
.chat-msg--self .chat-msg__bubble {
background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-strong) 100%);
color: #fff;
border-bottom-right-radius: 4px;
box-shadow: 0 4px 12px rgba(109,40,217,.22);
}
.chat-msg--other .chat-msg__bubble {
background: var(--color-background-primary);
border: 1px solid var(--color-border-tertiary);
color: var(--color-text-primary);
border-bottom-left-radius: 4px;
}
.chat-msg__time {
font-size: .66rem;
color: var(--color-text-tertiary);
margin-top: .15rem;
padding: 0 .4rem;
}
/* Date-Divider (inline-chat) */
.chat-date-divider {
display: flex;
align-items: center;
gap: .6rem;
margin: .9rem 0 .55rem;
}
.chat-date-divider::before,
.chat-date-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-border-tertiary);
}
.chat-date-divider span {
font-size: .68rem;
font-weight: 600;
letter-spacing: .04em;
color: var(--color-text-tertiary);
text-transform: uppercase;
}
.chat-inline-form {
display: flex;
gap: .5rem;
align-items: flex-end;
margin-top: .75rem;
padding-top: .65rem;
border-top: 1px solid var(--color-border-tertiary);
}
.chat-inline-input {
flex: 1;
resize: none;
border-radius: 18px;
padding: .55rem 1rem;
font-size: .88rem;
font-family: inherit;
line-height: 1.45;
max-height: 6rem;
overflow-y: auto;
outline: none;
background: var(--color-background-secondary);
border: 1px solid var(--color-border-tertiary);
color: var(--color-text-primary);
transition: border-color .15s, background .15s;
}
.chat-inline-input::placeholder { color: var(--color-text-tertiary); }
.chat-inline-input:focus {
border-color: var(--color-border-secondary);
background: var(--color-background-primary);
}
.chat-inline-send {
width: 36px; height: 36px;
background: var(--color-brand);
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background .15s, transform .12s, box-shadow .15s;
font-size: 0;
}
.chat-inline-send::before {
content: "";
display: inline-block;
width: 13px; height: 13px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
}
.chat-inline-send:hover:not(:disabled) {
background: var(--color-brand-strong);
box-shadow: 0 4px 14px var(--color-brand-glow);
transform: translateY(-1px);
}
.chat-inline-send:disabled {
opacity: .35;
cursor: not-allowed;
background: var(--color-background-secondary);
}
/* ════════════════════════════════════════════════════════════════════════
PROFIL PANEL
════════════════════════════════════════════════════════════════════════ */
.personality-studio__kicker { background: rgba(167,139,250,.18) !important; border-color: rgba(167,139,250,.35) !important; color: #c4b5fd !important; }
.personality-studio__hero h3 { color: #fff !important; font-size: clamp(1.3rem,1.6vw,2rem) !important; }
.personality-studio__hero p { color: rgba(255,255,255,.65) !important; font-size: .96rem !important; }
.account-panel[data-account-panel="profile"] h2 { color: #fff !important; }
.personality-card,
.personality-card:hover,
.account-personality-section .personality-card {
background: rgba(74,49,138,.3) !important;
border: 1px solid rgba(167,139,250,.25) !important;
border-radius: 1rem !important;
box-shadow: none !important;
color: #fff !important;
}
.personality-card:hover { border-color: rgba(167,139,250,.5) !important; }
.personality-card > span, .personality-card > span:first-child { color: rgba(255,255,255,.78) !important; font-weight: 700 !important; }
.personality-card select,
.personality-card input,
.personality-card textarea {
background: rgba(10,4,30,.45) !important;
border: 1px solid rgba(255,255,255,.18) !important;
border-radius: .75rem !important;
color: #fff !important;
font-size: .94rem !important;
box-shadow: none !important;
}
.personality-card input::placeholder, .personality-card textarea::placeholder { color: rgba(255,255,255,.32) !important; }
.personality-card select:focus, .personality-card input:focus, .personality-card textarea:focus {
border-color: #a78bfa !important;
box-shadow: 0 0 0 3px rgba(167,139,250,.22) !important;
background: rgba(10,4,30,.6) !important;
outline: none !important;
}
.profile-progress { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(167,139,250,.22) !important; border-radius: 1rem !important; box-shadow: none !important; }
.profile-progress strong { color: #fff !important; }
.profile-progress span, .profile-progress > div > span { color: rgba(255,255,255,.52) !important; }
.profile-progress__track { background: rgba(255,255,255,.14) !important; }
.profile-progress__track span, [data-profile-progress-bar] { background: #a78bfa !important; }
.personality-actions .imprint-page__back,
.account-personality-section .imprint-page__back { background: #4a318a !important; color: #fff !important; box-shadow: 0 8px 24px rgba(74,49,138,.35) !important; text-shadow: none !important; }
.personality-actions .imprint-page__back:hover,
.account-personality-section .imprint-page__back:hover { background: #3a2470 !important; }
.personality-actions p { color: #a78bfa !important; font-size: .9rem !important; }
.account-clean-list li { color: rgba(255,255,255,.72) !important; }
[data-profile-brief-section] h3 { color: #fff !important; }
/* Transparenzhinweis */
.profile-transparency-notice { display: flex !important; gap: .85rem !important; background: rgba(167,139,250,.07) !important; border: 1px solid rgba(167,139,250,.22) !important; border-radius: 12px !important; padding: 1rem 1.1rem !important; margin-bottom: 1.25rem !important; }
.profile-transparency-notice__icon { flex-shrink: 0 !important; color: #a78bfa !important; margin-top: .15rem !important; }
.profile-transparency-notice strong { display: block !important; color: rgba(255,255,255,.85) !important; font-size: .88rem !important; font-weight: 700 !important; margin-bottom: .45rem !important; }
.profile-transparency-notice ul { margin: 0 !important; padding-left: 1.1rem !important; display: flex !important; flex-direction: column !important; gap: .3rem !important; }
.profile-transparency-notice li { color: rgba(255,255,255,.62) !important; font-size: .82rem !important; line-height: 1.5 !important; }
.profile-transparency-notice li em { color: rgba(196,181,253,.9) !important; font-style: normal !important; font-weight: 600 !important; }
.profile-transparency-notice li strong { display: inline !important; color: rgba(255,255,255,.85) !important; font-size: inherit !important; margin: 0 !important; }
/* Match-Profil-Modal */
.match-profile-sheet { background: #1e1245 !important; border: 1px solid rgba(255,255,255,.15) !important; }
.match-profile-sheet__head span { color: #a78bfa !important; }
.match-profile-sheet__head h2 { color: #fff !important; }
.match-profile-sheet__head p { color: rgba(255,255,255,.62) !important; }
.match-profile-sheet__close { color: rgba(255,255,255,.55) !important; background: rgba(255,255,255,.08) !important; border-radius: 50% !important; }
.match-profile-sheet__close:hover { color: #fff !important; background: rgba(255,255,255,.15) !important; }
.match-profile-card { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.12) !important; color: #fff !important; }
.match-profile-tags span { background: rgba(167,139,250,.15) !important; color: #c4b5fd !important; border-radius: 6px !important; padding: .15rem .45rem !important; font-size: .8rem !important; }
/* Desktop: Modal breiter + Karten zweispaltig → kein Scrollen nötig */
@media (min-width: 768px) {
.match-profile-sheet {
width: min(100%, 58rem) !important;
max-height: min(92vh, 54rem) !important;
}
.match-profile-sheet__content {
grid-template-columns: 1fr 1fr !important;
gap: .65rem !important;
}
}
/* ════════════════════════════════════════════════════════════════════════
ACCOUNT SECTIONS (Profil & Einstellungen)
════════════════════════════════════════════════════════════════════════ */
.account-section,
.account-section--logout,
.account-section--secondary,
.account-accordion__item,
.account-section[data-profile-brief-section] {
background: rgba(255,255,255,.07) !important;
border: 1px solid rgba(255,255,255,.13) !important;
border-radius: 1rem !important;
box-shadow: none !important;
color: #fff !important;
padding: 1.5rem 1.75rem !important;
}
.account-section + .account-section { margin-top: 1rem !important; }
.account-section__head { margin-bottom: 1.1rem !important; }
.account-section__head h2, .account-section__head h3 { color: #fff !important; }
.account-section__head p { color: rgba(255,255,255,.6) !important; }
.portal-label { color: rgba(255,255,255,.78) !important; }
.input-base, .portal-form .input-base {
background: rgba(255,255,255,.08) !important;
border: 1.5px solid rgba(255,255,255,.2) !important;
color: #fff !important;
border-radius: 10px !important;
}
.input-base:focus { border-color: #a78bfa !important; box-shadow: 0 0 0 3px rgba(167,139,250,.22) !important; outline: none !important; }
.input-base::placeholder { color: rgba(255,255,255,.32) !important; }
.input-base option { background: #2d1b6e !important; color: #fff !important; }
input[type="checkbox"] { accent-color: #a78bfa !important; }
input[type="range"] { accent-color: #a78bfa !important; }
/* ════════════════════════════════════════════════════════════════════════
EINSTELLUNGEN – Overrides für inline styles
════════════════════════════════════════════════════════════════════════ */
[data-account-panel="settings"] > div:not(.account-panel__head) {
background: rgba(255,255,255,.11) !important;
border: 1px solid rgba(255,255,255,.2) !important;
border-radius: 1.1rem !important;
padding: 1.5rem 1.75rem !important;
margin-bottom: .75rem !important;
color: #fff !important;
}
[data-account-panel="settings"] > div h3 { color: #fff !important; }
[data-account-panel="settings"] > div > p { color: rgba(255,255,255,.58) !important; }
[data-account-panel="settings"] input[type="password"],
[data-account-panel="settings"] input[type="text"],
[data-account-panel="settings"] input[type="email"] {
background: rgba(255,255,255,.1) !important;
border: 1.5px solid rgba(255,255,255,.25) !important;
border-radius: 10px !important;
color: #fff !important;
}
[data-account-panel="settings"] input::placeholder { color: rgba(255,255,255,.3) !important; }
[data-account-panel="settings"] input:focus { border-color: #a78bfa !important; box-shadow: 0 0 0 3px rgba(167,139,250,.22) !important; }
[data-account-panel="settings"] label { color: rgba(255,255,255,.65) !important; }
/* Danger-Card */
[data-account-panel="settings"] > div:last-child {
background: rgba(239,68,68,.07) !important;
border: 1px solid rgba(239,68,68,.3) !important;
}
/* Notif-Toggle */
#notif-toggle {
flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important;
width: 2.6rem !important; min-width: 2.6rem !important; height: 1.45rem !important;
border-radius: 999px !important; padding: 2px !important; box-sizing: content-box !important;
background: rgba(255,255,255,.18) !important;
border: 1.5px solid rgba(255,255,255,.28) !important;
transition: background .2s, border-color .2s !important; cursor: pointer !important;
}
#notif-toggle.is-on { background: #a78bfa !important; border-color: #7c5de0 !important; }
#notif-toggle.is-on #notif-knob { transform: translateX(1.1rem) !important; background: #fff !important; }
#notif-knob { display: block !important; width: 1rem !important; height: 1rem !important; border-radius: 50% !important; background: rgba(255,255,255,.5) !important; transition: transform .22s ease !important; pointer-events: none !important; flex-shrink: 0 !important; }
#notif-save-feedback { font-size: .8rem; color: #6ee7b7; }
/* Password feedback */
.account-password-feedback { color: #a78bfa !important; }
/* ════════════════════════════════════════════════════════════════════════
MICRO-QUESTION
════════════════════════════════════════════════════════════════════════ */
.micro-question, .micro-question--compact { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.11) !important; border-radius: 14px !important; }
.micro-question strong, .micro-question--compact strong { color: #fff !important; }
[data-micro-question-text] { color: rgba(255,255,255,.7) !important; }
.micro-question__option,
.micro-question--compact .ghost-btn,
[data-micro-question-options] .ghost-btn {
background: rgba(167,139,250,.22) !important;
border: 1.5px solid rgba(167,139,250,.45) !important;
color: #e9d5ff !important; font-weight: 600 !important;
border-radius: 999px !important; padding: .5rem 1.1rem !important;
transition: background .15s, border-color .15s, transform .1s !important;
}
.micro-question__option:hover,
.micro-question--compact .ghost-btn:hover,
[data-micro-question-options] .ghost-btn:hover { background: rgba(167,139,250,.38) !important; border-color: #a78bfa !important; color: #fff !important; transform: translateY(-1px) !important; }
.micro-question__option.is-selected,
[data-micro-question-options] .ghost-btn.is-selected { background: #4a318a !important; border-color: #a78bfa !important; color: #fff !important; box-shadow: 0 0 0 2px rgba(167,139,250,.3) !important; }
.micro-question__feedback { color: #a78bfa !important; }
.micro-question--answered { opacity: 0 !important; max-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; overflow: hidden !important; pointer-events: none !important; transition: opacity .6s ease, max-height .7s ease .1s, padding .7s ease .1s, margin .7s ease .1s !important; }
/* "Beantwortet"-Zustand (Option B) */
[data-micro-question-text]:not(:empty) ~ * { }
.mm-question [data-micro-question-text] { transition: opacity .4s ease; }
.mm-question__done-hint {
font-size: .8rem;
color: rgba(255,255,255,.4);
margin: .35rem 0 0;
line-height: 1.5;
}
/* Wenn done-hint vorhanden: question-text als "erledigt" stylen */
.mm-question:has(.mm-question__done-hint) [data-micro-question-text] {
color: var(--color-text-primary);
font-size: .93rem;
opacity: .75;
}
/* ════════════════════════════════════════════════════════════════════════
NOTES & MISC
════════════════════════════════════════════════════════════════════════ */
.account-note { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.16) !important; color: rgba(255,255,255,.75) !important; }
.account-note strong, .account-note [class*="title"] { color: #fff !important; font-weight: 700 !important; }
.account-note p { color: rgba(255,255,255,.72) !important; }
.account-request-details { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; border-radius: 12px !important; }
.account-request-details p { color: rgba(255,255,255,.68) !important; }
.mm-toggle-wrap { display: flex !important; align-items: center !important; gap: .7rem !important; }
.mm-toggle-btn { flex-shrink: 0 !important; width: 2.7rem !important; height: 1.5rem !important; background: rgba(255,255,255,.15) !important; border: 1.5px solid rgba(255,255,255,.22) !important; border-radius: 999px !important; padding: 2px !important; cursor: pointer !important; display: flex !important; align-items: center !important; transition: background .2s, border-color .2s !important; box-shadow: none !important; }
.mm-toggle-knob { display: block !important; width: 1.05rem !important; height: 1.05rem !important; background: rgba(255,255,255,.55) !important; border-radius: 50% !important; transition: transform .22s ease !important; pointer-events: none !important; }
.mm-toggle-btn[aria-checked="true"] { background: #a78bfa !important; border-color: #7c5de0 !important; }
.mm-toggle-btn[aria-checked="true"] .mm-toggle-knob { transform: translateX(1.15rem) !important; background: #fff !important; }
.mm-toggle-text { color: rgba(255,255,255,.78) !important; font-size: .88rem !important; }
.site-footer { background: rgba(0,0,0,.3) !important; border-top: 1px solid rgba(255,255,255,.08) !important; }
.site-footer span, .site-footer a { color: rgba(255,255,255,.38) !important; }
.site-footer a:hover { color: rgba(255,255,255,.7) !important; }
/* ════════════════════════════════════════════════════════════════════════
PASSWORT-SETUP MODAL
════════════════════════════════════════════════════════════════════════ */
#kk-pw-msg { color: #fca5a5 !important; }
#kk-pw-btn { background: #4a318a !important; color: #fff !important; border: none !important; border-radius: 999px !important; }
/* ════════════════════════════════════════════════════════════════════════
EVENT-BUCHEN PAGE
════════════════════════════════════════════════════════════════════════ */
.book-page { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
.book-page__back {
display: inline-flex; align-items: center; gap: .4rem;
margin-bottom: 1.75rem; font-size: .875rem;
color: rgba(255,255,255,.6); text-decoration: none;
background: none; border: none; cursor: pointer; padding: 0; transition: color .15s;
}
.book-page__back:hover { color: #fff; text-decoration: underline; }
.book-page__eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #c4b5fd; margin: 0 0 .4rem; }
.book-page__title { font-size: 1.75rem; font-weight: 900; color: #fff; margin: 0 0 .5rem; }
.book-page__subtitle { color: rgba(255,255,255,.6); margin: 0 0 2rem; }
/* Step indicator */
.step-indicator { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.step-pill {
font-size: .75rem;
font-weight: 700;
padding: .3rem .85rem;
border-radius: 999px;
border: 1px solid var(--color-border-tertiary);
color: var(--color-text-secondary);
white-space: nowrap;
letter-spacing: .01em;
}
.step-pill--active {
background: var(--color-background-info);
border-color: var(--color-border-secondary);
color: var(--color-text-info);
}
.step-pill--done {
background: var(--color-success-soft);
border-color: rgba(74,222,128,.35);
color: var(--color-success);
}
.step-divider {
flex: 1;
min-width: 1rem;
height: 1px;
background: var(--color-border-tertiary);
}
.step-divider { flex: 1; height: 1px; background: rgba(255,255,255,.14); }
/* Format-Kacheln */
.format-grid { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.1rem; }
.format-card {
display: flex; align-items: flex-start; gap: 1rem; width: 100%;
padding: 1.1rem 1.2rem; border: 1.5px solid rgba(255,255,255,.18);
border-radius: 13px; background: rgba(255,255,255,.06);
cursor: pointer; text-align: left; color: #fff;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.format-card:hover { border-color: rgba(167,139,250,.55); background: rgba(74,49,138,.25); box-shadow: 0 4px 20px rgba(74,49,138,.3); }
.format-card.is-selected { border-color: #a78bfa; background: rgba(74,49,138,.35); box-shadow: 0 0 0 2px rgba(167,139,250,.25); }
.format-card__icon { font-size: 1.35rem; flex-shrink: 0; width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; background: rgba(167,139,250,.18); border-radius: 10px; }
.format-card__title { font-size: .98rem; font-weight: 700; color: #fff; margin: 0 0 .2rem; line-height: 1.3; }
.format-card__desc { font-size: .82rem; color: rgba(255,255,255,.58); margin: 0 0 .35rem; line-height: 1.5; }
.format-card__price { font-size: .8rem; font-weight: 700; color: #a78bfa; }
/* Event-Karten (Buchung) */
.event-list { display: flex; flex-direction: column; gap: .85rem; }
.event-select-card {
border: 1px solid var(--color-border-tertiary);
border-radius: var(--border-radius-lg);
padding: 1.1rem 1.25rem;
background: var(--color-background-primary);
backdrop-filter: blur(var(--blur-glass));
-webkit-backdrop-filter: blur(var(--blur-glass));
cursor: pointer; color: var(--color-text-primary);
transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease, background .2s ease;
}
.event-select-card:hover {
transform: translateY(-2px);
border-color: var(--color-border-secondary);
box-shadow: 0 12px 32px rgba(0,0,0,.28);
background: var(--color-brand-soft);
}
.event-select-card.is-selected {
border-color: var(--color-brand);
background: var(--color-brand-soft);
box-shadow: 0 0 0 2px var(--color-border-secondary), 0 12px 32px rgba(0,0,0,.3);
}
.event-select-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .55rem; }
.event-select-card__title { font-size: 1rem; font-weight: 700; color: var(--color-text-primary); margin: 0; letter-spacing: -.01em; }
.event-select-card__price { font-size: 1.05rem; font-weight: 800; color: var(--color-text-info); white-space: nowrap; letter-spacing: -.02em; }
.event-select-card__meta { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .8rem; color: var(--color-text-secondary); margin-bottom: .55rem; }
.event-select-card__meta span { display: inline-flex; align-items: center; gap: .3rem; }
.event-select-card__avail { font-size: .78rem; font-weight: 600; }
.event-select-card__avail--low { color: var(--color-error); }
.event-select-card__avail--ok { color: var(--color-success); }
.event-select-card__avail--full { color: var(--color-text-tertiary); }
.book-action { margin-top: 1.5rem; }
.book-action__btn {
width: 100%;
padding: .95rem 1.5rem;
font-size: 1rem;
font-weight: 700;
border-radius: 999px;
border: none;
cursor: pointer;
background: var(--color-brand) !important;
color: #fff !important;
box-shadow: var(--shadow-btn);
transition: background .15s, box-shadow .15s, transform .12s;
font-family: inherit;
letter-spacing: .01em;
}
.book-action__btn:not(:disabled):hover {
background: var(--color-brand-strong) !important;
box-shadow: 0 12px 36px var(--color-brand-glow);
transform: translateY(-1px);
}
.book-action__btn:disabled {
opacity: .4;
cursor: not-allowed;
box-shadow: none;
background: var(--color-background-secondary) !important;
color: var(--color-text-secondary) !important;
}
@media (max-width: 760px) {
.event-select-card:hover { transform: none; }
}
.book-loading { text-align: center; padding: 3rem 1rem; color: rgba(255,255,255,.45); }
.book-error { background: rgba(185,28,28,.15); border: 1px solid rgba(248,113,113,.35); border-radius: 10px; padding: 1rem 1.25rem; color: #fca5a5; margin-top: 1rem; font-size: .9rem; }
.book-empty { text-align: center; padding: 3rem 1rem; color: rgba(255,255,255,.45); }
.book-spinner { display: inline-block; width: 1.2rem; height: 1.2rem; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: kkSpin .7s linear infinite; vertical-align: middle; margin-right: .4rem; }
@keyframes kkSpin { to { transform: rotate(360deg); } }
/* ════════════════════════════════════════════════════════════════════════
EVENT-CHAT PAGE
════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════
EVENT-CHAT v2 – Phase 6C: Token-Migration, Avatare, Gradient-Bubbles
════════════════════════════════════════════════════════════════════════ */
.ec-page {
display: flex;
flex-direction: column;
height: 100dvh;
max-width: 820px;
margin: 0 auto;
background: var(--color-background-tertiary);
backdrop-filter: blur(var(--blur-glass));
-webkit-backdrop-filter: blur(var(--blur-glass));
}
/* Header */
.ec-header {
display: flex;
align-items: center;
gap: .85rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--color-border-tertiary);
background: var(--color-background-primary);
backdrop-filter: blur(var(--blur-glass));
-webkit-backdrop-filter: blur(var(--blur-glass));
flex-shrink: 0;
}
.ec-header__back {
background: var(--color-background-secondary);
border: 1px solid var(--color-border-tertiary);
border-radius: 50%;
cursor: pointer;
color: var(--color-text-secondary);
width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.05rem;
transition: background .15s, color .15s, border-color .15s;
flex-shrink: 0;
}
.ec-header__back:hover {
background: var(--color-brand-soft);
color: var(--color-text-primary);
border-color: var(--color-border-secondary);
}
.ec-header__info { flex: 1; min-width: 0; }
.ec-header__title {
font-size: 1rem; font-weight: 700;
color: var(--color-text-primary);
margin: 0;
letter-spacing: -.01em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ec-header__meta {
font-size: .76rem;
color: var(--color-text-secondary);
margin: 0;
margin-top: .1rem;
}
.ec-header__badge {
font-size: .68rem; font-weight: 700;
background: var(--color-background-info);
color: var(--color-text-info);
border: 1px solid var(--color-border-secondary);
border-radius: 999px;
padding: .25rem .7rem;
white-space: nowrap;
}
/* Members-Bar mit Avatar-Stack */
.ec-members {
display: flex;
align-items: center;
gap: .55rem;
padding: .7rem 1.25rem;
overflow-x: auto;
scrollbar-width: none;
border-bottom: 1px solid var(--color-border-tertiary);
background: var(--color-background-secondary);
flex-shrink: 0;
}
.ec-members::-webkit-scrollbar { display: none; }
.ec-member {
display: inline-flex;
align-items: center;
gap: .4rem;
font-size: .78rem;
color: var(--color-text-primary);
white-space: nowrap;
flex-shrink: 0;
}
.ec-member__avatar {
width: 26px; height: 26px;
border-radius: 50%;
background: var(--color-background-info);
color: var(--color-text-info);
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700;
font-size: .72rem;
border: 1.5px solid var(--color-background-tertiary);
text-transform: uppercase;
flex-shrink: 0;
}
.ec-member--self .ec-member__avatar {
background: var(--color-brand-soft);
color: #fff;
border-color: var(--color-brand);
}
.ec-member__name {
font-weight: 600;
color: var(--color-text-primary);
}
.ec-member--self .ec-member__name { color: var(--color-text-info); }
.ec-member__count {
font-size: .76rem;
color: var(--color-text-secondary);
margin-left: .4rem;
}
/* Messages */
.ec-messages {
flex: 1;
overflow-y: auto;
padding: 1rem 1.25rem;
display: flex;
flex-direction: column;
gap: .25rem;
background: transparent;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.15) transparent;
}
.ec-messages::-webkit-scrollbar { width: 4px; }
.ec-messages::-webkit-scrollbar-track { background: transparent; }
.ec-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }
/* Date-Divider mit Trennlinien */
.ec-date-divider {
display: flex;
align-items: center;
gap: .65rem;
margin: 1.1rem 0 .65rem;
text-align: center;
}
.ec-date-divider::before,
.ec-date-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-border-tertiary);
}
.ec-date-divider span {
font-size: .72rem;
font-weight: 600;
letter-spacing: .04em;
color: var(--color-text-tertiary);
text-transform: uppercase;
background: transparent;
border: none;
padding: 0;
}
/* Message-Bubbles */
.ec-msg {
display: flex;
flex-direction: column;
max-width: 75%;
margin-bottom: .25rem;
}
.ec-msg--self { align-self: flex-end; align-items: flex-end; }
.ec-msg--other { align-self: flex-start; align-items: flex-start; }
/* Consolidated styling: kleinere Gap zu vorheriger Message vom selben Sender */
.ec-msg--continuation { margin-top: -.15rem; }
.ec-msg--continuation .ec-msg__name { display: none; }
.ec-msg__name {
font-size: .72rem;
font-weight: 600;
color: var(--color-text-info);
margin-bottom: .2rem;
padding: 0 .55rem;
}
.ec-msg__bubble-row {
display: inline-flex;
align-items: flex-end;
gap: .15rem;
max-width: 100%;
}
.ec-msg__bubble {
padding: .55rem .9rem;
border-radius: 16px;
font-size: .92rem;
line-height: 1.5;
word-break: break-word;
max-width: 100%;
}
.ec-msg--self .ec-msg__bubble {
background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-strong) 100%);
color: #fff;
border-bottom-right-radius: 4px;
box-shadow: 0 4px 14px rgba(109,40,217,.25);
}
.ec-msg--other .ec-msg__bubble {
background: var(--color-background-primary);
border: 1px solid var(--color-border-tertiary);
color: var(--color-text-primary);
border-bottom-left-radius: 4px;
}
.ec-msg__time {
font-size: .66rem;
color: var(--color-text-tertiary);
margin-top: .15rem;
padding: 0 .55rem;
}
/* Empty-State */
.ec-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: .65rem;
color: var(--color-text-secondary);
padding: 2rem 1rem;
text-align: center;
}
.ec-empty__icon {
width: 52px; height: 52px;
border-radius: 50%;
background: var(--color-background-info);
color: var(--color-text-info);
display: inline-flex; align-items: center; justify-content: center;
}
.ec-empty__title {
font-size: 1rem;
font-weight: 700;
color: var(--color-text-primary);
margin: 0;
}
.ec-empty__text {
font-size: .85rem;
color: var(--color-text-secondary);
max-width: 22rem;
margin: 0;
line-height: 1.5;
}
/* Info-Banner (Community-Regeln) */
.ec-info-banner {
margin: .25rem 1.25rem .25rem;
padding: .65rem .9rem;
background: var(--color-background-info);
border: 1px solid var(--color-border-secondary);
border-radius: var(--border-radius-md);
font-size: .78rem;
color: rgba(255,255,255,.8);
line-height: 1.5;
}
.ec-info-banner strong { color: var(--color-text-info); }
.ec-info-banner a { color: var(--color-brand); }
/* Input-Form */
.ec-form {
display: flex;
gap: .55rem;
padding: .85rem 1.1rem;
border-top: 1px solid var(--color-border-tertiary);
background: var(--color-background-primary);
backdrop-filter: blur(var(--blur-glass));
-webkit-backdrop-filter: blur(var(--blur-glass));
flex-shrink: 0;
align-items: flex-end;
}
.ec-form__input {
flex: 1;
resize: none;
outline: none;
border: 1px solid var(--color-border-tertiary);
border-radius: 18px;
padding: .55rem 1rem;
font-size: .92rem;
font-family: inherit;
line-height: 1.45;
max-height: 8rem;
overflow-y: auto;
background: var(--color-background-secondary);
color: var(--color-text-primary);
transition: border-color .15s, background .15s;
}
.ec-form__input::placeholder { color: var(--color-text-tertiary); }
.ec-form__input:focus {
border-color: var(--color-border-secondary);
background: var(--color-background-primary);
}
.ec-form__send {
width: 38px; height: 38px;
background: var(--color-brand);
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background .15s, transform .12s, box-shadow .15s;
font-size: 0;
}
.ec-form__send::before {
content: "";
display: inline-block;
width: 14px; height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
}
.ec-form__send:hover:not(:disabled) {
background: var(--color-brand-strong);
box-shadow: 0 6px 18px var(--color-brand-glow);
transform: translateY(-1px);
}
.ec-form__send:disabled {
opacity: .35;
cursor: not-allowed;
background: var(--color-background-secondary);
}
/* ════════════════════════════════════════════════════════════════════════
ÜBERSICHT v2 – Greeting, Progress, Stats, Empty, Question
Komponenten passend zum Mockup-Layout, gestylt mit Design-Tokens
════════════════════════════════════════════════════════════════════════ */
/* Stärkerer Hide-Override für Legacy-Nav (Bug: Top-Right Text-Geister) */
.account-nav,
.account-nav-select {
display: none !important;
}
/* ── Greeting Block ────────────────────────────────────────────────── */
.mm-greeting {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.mm-greeting__main { flex: 1; min-width: 12rem; }
.mm-greeting__title {
font-size: clamp(1.4rem, 3vw, 1.75rem);
font-weight: 700;
color: var(--color-text-primary);
letter-spacing: -.02em;
margin: 0 0 .2rem;
line-height: 1.15;
}
.mm-greeting__sub {
font-size: .88rem;
color: var(--color-text-secondary);
margin: 0;
}
.mm-greeting__badge {
display: inline-flex;
align-items: center;
gap: .4rem;
font-size: .72rem;
padding: .4rem .9rem;
border-radius: 999px;
background: var(--color-background-info);
color: var(--color-text-info);
border: 1px solid var(--color-border-secondary);
font-weight: 700;
letter-spacing: .02em;
white-space: nowrap;
}
.mm-greeting__badge svg { width: 14px; height: 14px; }
/* HTML [hidden]-Attribut respektieren (overschrieben durch display:inline-flex) */
.mm-greeting__badge[hidden] { display: none !important; }
/* ── Progress Card (Profilstärke) ──────────────────────────────────── */
.mm-progress {
background: var(--color-background-primary);
border: 1px solid var(--color-border-tertiary);
backdrop-filter: blur(var(--blur-glass));
-webkit-backdrop-filter: blur(var(--blur-glass));
border-radius: var(--border-radius-lg);
padding: 1.1rem 1.4rem;
margin-bottom: 1rem;
}
.mm-progress__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: .8rem;
gap: .8rem;
flex-wrap: wrap;
}
.mm-progress__title {
font-size: .95rem;
font-weight: 600;
color: var(--color-text-primary);
display: inline-flex;
align-items: center;
gap: .5rem;
}
.mm-progress__title svg {
color: var(--color-brand);
flex-shrink: 0;
}
.mm-progress__count {
font-size: .8rem;
color: var(--color-text-secondary);
}
.mm-progress__bar {
height: 6px;
background: var(--color-background-secondary);
border-radius: 999px;
overflow: hidden;
}
.mm-progress__fill {
height: 100%;
background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-brand-strong) 100%);
border-radius: 999px;
transition: width .4s ease;
}
.mm-progress__steps {
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin-top: .9rem;
}
.mm-progress__pill {
font-size: .72rem;
padding: .25rem .75rem;
border-radius: 999px;
border: 1px solid var(--color-border-tertiary);
color: var(--color-text-secondary);
background: transparent;
display: inline-flex;
align-items: center;
gap: .3rem;
white-space: nowrap;
}
.mm-progress__pill--done {
background: var(--color-background-info);
color: var(--color-text-info);
border-color: var(--color-border-secondary);
font-weight: 600;
}
.mm-progress__pill svg { width: 11px; height: 11px; }
/* ── Stat Card Grid ────────────────────────────────────────────────── */
.mm-stat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
.mm-stat-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 900px) { .mm-stat-grid--3 { grid-template-columns: 1fr 1fr; } }
.mm-stat {
background: var(--color-background-primary);
border: 1px solid var(--color-border-tertiary);
backdrop-filter: blur(var(--blur-glass));
-webkit-backdrop-filter: blur(var(--blur-glass));
border-radius: var(--border-radius-lg);
padding: 1.1rem 1.4rem;
}
.mm-stat__label {
font-size: .68rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--color-text-secondary);
margin-bottom: .35rem;
}
.mm-stat__value {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text-primary);
line-height: 1.1;
letter-spacing: -.02em;
}
.mm-stat__value--text { font-size: .98rem; margin-top: .3rem; font-weight: 600; }
.mm-stat__sub {
font-size: .78rem;
color: var(--color-text-secondary);
margin-top: .35rem;
}
.mm-stat__sub--cta { margin-top: .7rem; }
.mm-stat__sub--cta .landing-btn-ghost {
font-size: .76rem !important;
padding: .35rem .85rem !important;
}
/* ── Empty / CTA Card ──────────────────────────────────────────────── */
.mm-empty {
background: var(--color-background-primary);
border: 1px dashed var(--color-border-secondary);
backdrop-filter: blur(var(--blur-glass));
-webkit-backdrop-filter: blur(var(--blur-glass));
border-radius: var(--border-radius-lg);
padding: 1.4rem;
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1rem;
}
.mm-empty__icon {
width: 46px;
height: 46px;
border-radius: var(--border-radius-md);
background: var(--color-background-info);
color: var(--color-text-info);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mm-empty__icon svg { width: 22px; height: 22px; }
.mm-empty__body { flex: 1; min-width: 0; }
.mm-empty__title {
font-size: 1rem;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: .3rem;
}
.mm-empty__desc {
font-size: .85rem;
color: var(--color-text-secondary);
margin-bottom: .85rem;
line-height: 1.5;
}
.mm-empty__actions {
display: flex;
gap: .6rem;
flex-wrap: wrap;
}
/* ── Alert-Karten-Grid (für die bedingten Karten) ─────────────────── */
.mm-alert-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 1rem;
margin-bottom: 1rem;
}
.mm-alert-grid:empty { display: none; }
.mm-alert-grid > [hidden] { display: none !important; }
/* ── Section Title (Eyebrow für Sektionen) ─────────────────────────── */
.mm-section-title {
font-size: .72rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--color-text-secondary);
margin: 1.5rem 0 .75rem;
}
/* ── Question Card (Tagesfrage / Micro-Question) ───────────────────── */
.mm-question {
background: var(--color-background-info);
border: 1px solid var(--color-border-secondary);
backdrop-filter: blur(var(--blur-glass));
-webkit-backdrop-filter: blur(var(--blur-glass));
border-radius: var(--border-radius-lg);
padding: 1.1rem 1.4rem;
}
.mm-question__label {
display: inline-flex;
align-items: center;
gap: .3rem;
font-size: .68rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--color-text-info);
margin-bottom: .5rem;
}
.mm-question__label svg { width: 12px; height: 12px; }
.mm-question__text {
font-size: .98rem;
color: var(--color-text-primary);
margin-bottom: .85rem;
line-height: 1.45;
}
.mm-question__opts {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.mm-question__opt {
font-size: .82rem;
padding: .45rem 1.1rem;
border-radius: 999px;
border: 1px solid var(--color-border-secondary);
color: var(--color-text-info);
background: rgba(255,255,255,.06);
cursor: pointer;
transition: background .15s, border-color .15s, color .15s, transform .12s;
font-family: inherit;
font-weight: 600;
}
.mm-question__opt:hover {
background: var(--color-brand-soft);
border-color: var(--color-border-primary);
color: var(--color-text-primary);
}
.mm-question__opt:active { transform: scale(.97); }
.mm-question__feedback {
margin-top: .8rem;
font-size: .82rem;
color: var(--color-text-info);
font-weight: 600;
}
/* ── Card Hover-Effekte ────────────────────────────────────────────── */
.mm-progress,
.mm-stat,
.mm-empty,
.mm-question,
.account-safe-card {
transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease, background .2s ease;
}
.mm-progress:hover,
.mm-stat:hover,
.account-safe-card:hover {
transform: translateY(-2px);
border-color: var(--color-border-secondary);
box-shadow: 0 12px 32px rgba(0,0,0,.25);
}
.mm-empty:hover {
border-color: var(--color-border-primary);
background: rgba(167,139,250,.08);
}
.mm-question__opt {
transition: background .15s, border-color .15s, color .15s, transform .12s;
}
/* ── Badge im Portal-Header (rechts neben Aktionen) ────────────────── */
.account-header-actions .mm-greeting__badge {
margin-bottom: .25rem;
align-self: flex-end;
}
.account-header-actions .mm-greeting__badge[hidden] {
display: none !important;
}
/* ── Mobile Adjustments ────────────────────────────────────────────── */
@media (max-width: 760px) {
.mm-stat-grid { grid-template-columns: 1fr; gap: .75rem; }
.mm-empty { padding: 1.1rem; gap: .85rem; }
.mm-empty__icon { width: 40px; height: 40px; }
.mm-progress, .mm-stat, .mm-empty, .mm-question { padding: 1rem 1.1rem; }
.mm-progress__head { flex-wrap: wrap; }
.mm-section-title { margin: 1.2rem 0 .6rem; }
.account-header-actions .mm-greeting__badge { font-size: .68rem; padding: .3rem .7rem; }
/* Hover-Effekte auf Touch deaktivieren */
.mm-progress:hover, .mm-stat:hover, .account-safe-card:hover { transform: none; }
}
/* ════════════════════════════════════════════════════════════════════════
MATCHES PANEL v2 – Match-Cards mit Avatar, Mint-Compat-Bar
════════════════════════════════════════════════════════════════════════ */
/* Override altes Grid für konsistentere Card-Größe */
.match-card-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)) !important;
gap: 1rem !important;
margin-top: .25rem !important;
}
/* Neue Card-Optik */
.match-card {
background: var(--color-background-primary) !important;
border: 1px solid var(--color-border-tertiary) !important;
backdrop-filter: blur(var(--blur-glass)) !important;
-webkit-backdrop-filter: blur(var(--blur-glass)) !important;
border-radius: var(--border-radius-lg) !important;
padding: 1.1rem 1.25rem !important;
display: flex !important;
flex-direction: column !important;
gap: .65rem !important;
transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.match-card:hover {
transform: translateY(-2px);
border-color: var(--color-border-secondary) !important;
box-shadow: 0 12px 32px rgba(0,0,0,.25);
}
/* Header: Avatar + Name/Compat + Right-Info (Stadt etc.) */
.match-card__header {
display: flex;
align-items: center;
gap: .7rem;
}
.match-card__avatar {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--color-background-info);
color: var(--color-text-info);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: .92rem;
flex-shrink: 0;
border: 1px solid var(--color-border-secondary);
text-transform: uppercase;
}
.match-card__header-body { flex: 1; min-width: 0; }
.match-card__name { font-size: 1rem !important; font-weight: 700 !important; color: var(--color-text-primary) !important; margin: 0 !important; line-height: 1.2 !important; }
.match-card__meta { font-size: .76rem; color: var(--color-text-secondary); margin-top: .1rem; display: inline-flex; align-items: center; gap: .35rem; }
.match-card__meta strong { font-weight: 700; color: var(--color-text-info); }
/* "Neu"-Tag neben dem Match-Namen */
.match-card__new {
display: inline-block;
font-size: .62rem;
font-weight: 700;
letter-spacing: .05em;
padding: .12rem .5rem;
border-radius: 999px;
background: var(--color-background-info);
color: var(--color-text-info);
border: 1px solid var(--color-border-secondary);
vertical-align: middle;
margin-left: .3rem;
text-transform: uppercase;
}
/* Panel-Badge (z.B. "2 neue" oben rechts im Matches-Panel) */
.mm-panel-actions {
display: flex;
justify-content: flex-end;
margin-bottom: .5rem;
min-height: 1rem; /* damit es keinen Layout-Shift gibt wenn versteckt */
}
.mm-panel-actions:has([hidden]:only-child) { min-height: 0; margin-bottom: 0; }
.mm-panel-badge {
align-self: center;
margin-top: 0;
flex-shrink: 0;
}
.mm-panel-badge[hidden] { display: none !important; }
/* Compat-Bar – Mint-Grün für Differenzierung */
.match-card__compat-bar {
height: 4px;
background: var(--color-background-secondary);
border-radius: 999px;
overflow: hidden;
margin: .15rem 0 .25rem;
}
.match-card__compat-fill {
height: 100%;
background: var(--color-success);
border-radius: 999px;
transition: width .4s ease;
}
/* Score-Tier-Farben (für Compat-Fill) */
.match-card__compat-fill--high { background: var(--color-success); }
.match-card__compat-fill--mid { background: var(--color-brand); }
.match-card__compat-fill--low { background: var(--color-warning); }
/* Tags */
.match-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.match-card__tag {
font-size: .72rem !important;
padding: .25rem .7rem !important;
border-radius: 999px !important;
font-weight: 600 !important;
background: var(--color-background-secondary) !important;
border: 1px solid var(--color-border-tertiary) !important;
color: var(--color-text-secondary) !important;
}
.match-card__redflag {
font-size: .7rem !important;
padding: .2rem .6rem !important;
border-radius: 999px !important;
background: var(--color-error-soft) !important;
border: 1px solid rgba(248,113,113,.35) !important;
color: var(--color-error) !important;
}
/* Icebreaker / Gesprächsidee */
.match-card__icebreaker {
background: var(--color-background-info) !important;
border: 1px solid var(--color-border-secondary) !important;
border-left: 3px solid var(--color-brand) !important;
border-radius: var(--border-radius-md) !important;
padding: .6rem .85rem !important;
margin-top: .2rem !important;
}
.match-card__icebreaker-label {
font-size: .65rem !important;
color: var(--color-text-info) !important;
font-weight: 700 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
margin-bottom: .25rem !important;
display: inline-flex !important;
align-items: center !important;
gap: .3rem !important;
}
.match-card__icebreaker-text {
font-size: .82rem !important;
color: rgba(255,255,255,.85) !important;
font-style: italic !important;
line-height: 1.45 !important;
}
/* Actions */
.match-card__actions {
display: flex !important;
gap: .5rem !important;
flex-wrap: wrap !important;
margin-top: auto !important;
padding-top: .3rem !important;
}
.match-card__actions button {
flex: 1;
min-width: 7rem;
}
.match-card__actions .btn-profile {
font-size: .8rem !important;
padding: .5rem 1.1rem !important;
background: transparent !important;
border: 1px solid var(--color-border-secondary) !important;
color: var(--color-text-info) !important;
border-radius: 999px !important;
cursor: pointer !important;
font-weight: 600 !important;
font-family: inherit !important;
transition: background .15s, color .15s, border-color .15s;
}
.match-card__actions .btn-profile:hover {
background: var(--color-brand-soft) !important;
color: var(--color-text-primary) !important;
border-color: var(--color-border-primary) !important;
}
/* Empty-State im Matches-Panel */
.match-empty {
text-align: center;
padding: 3rem 1rem;
background: var(--color-background-primary);
border: 1px dashed var(--color-border-secondary);
border-radius: var(--border-radius-lg);
}
.match-empty h3 { font-size: 1.05rem; font-weight: 700; color: var(--color-text-primary) !important; margin: 0 0 .5rem; }
.match-empty p { font-size: .875rem; line-height: 1.6; color: var(--color-text-secondary) !important; margin: 0 0 1.25rem; }
@media (max-width: 760px) {
.match-card { padding: 1rem 1.1rem !important; }
.match-card__avatar { width: 38px; height: 38px; font-size: .85rem; }
.match-card:hover { transform: none; }
.match-card__actions button { min-width: 0; }
}
/* ════════════════════════════════════════════════════════════════════════
DISCOVER PANEL v2 – Event-Type-Cards (Format wählen)
════════════════════════════════════════════════════════════════════════ */
.mm-back-btn {
font-size: .82rem !important;
padding: .4rem .9rem !important;
background: transparent !important;
border: 1px solid var(--color-border-tertiary) !important;
color: var(--color-text-secondary) !important;
border-radius: 999px !important;
}
.mm-back-btn:hover {
background: var(--color-brand-soft) !important;
color: var(--color-text-primary) !important;
border-color: var(--color-border-secondary) !important;
}
/* Container */
.mm-event-types {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
margin-bottom: 1rem;
}
/* Card */
.mm-event-type {
background: var(--color-background-primary);
border: 1px solid var(--color-border-tertiary);
backdrop-filter: blur(var(--blur-glass));
-webkit-backdrop-filter: blur(var(--blur-glass));
border-radius: var(--border-radius-lg);
padding: 1.4rem;
display: flex;
flex-direction: column;
gap: .9rem;
transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
cursor: default;
}
.mm-event-type:hover {
transform: translateY(-3px);
border-color: var(--color-border-secondary);
box-shadow: 0 14px 36px rgba(0,0,0,.28);
}
/* Icon */
.mm-event-type__icon {
width: 44px;
height: 44px;
border-radius: var(--border-radius-md);
background: var(--color-background-info);
color: var(--color-text-info);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Body */
.mm-event-type__body { flex: 1; display: flex; flex-direction: column; }
.mm-event-type__title {
font-size: 1.05rem !important;
font-weight: 700 !important;
color: var(--color-text-primary) !important;
margin: 0 0 .35rem !important;
letter-spacing: -.01em;
}
.mm-event-type__desc {
font-size: .84rem;
color: var(--color-text-secondary);
line-height: 1.5;
margin: 0 0 .7rem;
}
.mm-event-type__price {
font-size: 1.05rem;
color: var(--color-text-primary);
font-weight: 700;
letter-spacing: -.01em;
display: inline-flex;
align-items: baseline;
gap: .25rem;
margin-top: auto;
}
.mm-event-type__price strong { font-weight: 800; color: var(--color-text-info); }
.mm-event-type__price-prefix,
.mm-event-type__price-suffix {
font-size: .75rem;
font-weight: 500;
color: var(--color-text-secondary);
}
/* CTA */
.mm-event-type__cta {
width: 100%;
margin-top: auto;
}
/* Auto-Group-Status-Chip aus group-status.js verstecken
(zeigt sonst doppelt: Belegung kommt erst auf der Slot-Auswahl-Seite) */
.mm-event-type .group-status,
.mm-event-type__cta .group-status { display: none !important; }
/* Kompatibilitäts-Badge (personalisiert) */
.mm-event-type__compat {
display: none;
align-items: center;
gap: .3rem;
font-size: .73rem;
font-weight: 600;
padding: .28rem .6rem;
border-radius: 999px;
width: fit-content;
margin-bottom: .4rem;
line-height: 1.3;
letter-spacing: .01em;
}
.mm-event-type__compat:not(:empty) { display: inline-flex; }
.mm-event-type__compat--very-good {
background: var(--color-success-soft);
color: var(--color-success);
}
.mm-event-type__compat--good {
background: var(--color-background-info);
color: var(--color-text-info);
}
.mm-event-type__compat--medium {
background: rgba(251,191,36,.14);
color: var(--color-warning);
}
.mm-event-type__compat--low,
.mm-event-type__compat--no-slots {
background: var(--color-error-soft);
color: var(--color-error);
}
.mm-event-type__compat--first {
background: var(--color-background-info);
color: var(--color-text-info);
}
.mm-event-type__compat--neutral {
background: var(--color-background-secondary);
color: var(--color-text-secondary);
}
@media (max-width: 760px) {
.mm-event-types { gap: .75rem; }
.mm-event-type { padding: 1.1rem 1.2rem; }
.mm-event-type:hover { transform: none; }
}
/* ════════════════════════════════════════════════════════════════════════
MEIN PROFIL v2 – Steckbrief-Formular mit Tokens
════════════════════════════════════════════════════════════════════════ */
/* Info-Card (Transparency-Hinweis) */
.mm-info-card {
display: flex;
gap: .9rem;
background: var(--color-background-info);
border: 1px solid var(--color-border-secondary);
border-radius: var(--border-radius-lg);
padding: 1.1rem 1.25rem;
margin-bottom: 1rem;
}
.mm-info-card__icon {
flex-shrink: 0;
color: var(--color-text-info);
margin-top: .1rem;
}
.mm-info-card__body strong {
color: var(--color-text-primary);
display: block;
margin-bottom: .35rem;
font-size: .94rem;
}
.mm-info-card__body ul {
margin: 0;
padding-left: 1.1rem;
list-style: disc;
font-size: .85rem;
color: var(--color-text-secondary);
line-height: 1.55;
}
.mm-info-card__body li { margin-bottom: .2rem; }
.mm-info-card__body em { color: var(--color-text-info); font-style: italic; }
/* Form-Grid (mit !important damit Vite-CSS für .personality-grid nicht stört) */
.mm-form-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 1rem !important;
}
.mm-form-grid > .mm-field--wide,
.mm-form-grid > .personality-card--feature,
.mm-form-grid > .personality-card--answer,
form.personality-grid > .personality-card--feature,
form.personality-grid > .personality-card--answer {
grid-column: 1 / -1 !important;
}
.mm-form-grid > .mm-form-actions { grid-column: 1 / -1 !important; }
/* Field */
.mm-field {
background: var(--color-background-primary) !important;
border: 1px solid var(--color-border-tertiary) !important;
backdrop-filter: blur(var(--blur-glass)) !important;
-webkit-backdrop-filter: blur(var(--blur-glass)) !important;
border-radius: var(--border-radius-lg) !important;
padding: 1rem 1.2rem !important;
display: flex !important;
flex-direction: column !important;
gap: .5rem !important;
margin: 0 !important;
transition: border-color .15s !important;
cursor: text;
}
.mm-field:focus-within {
border-color: var(--color-border-secondary) !important;
}
.mm-field__label {
font-size: .82rem;
font-weight: 600;
color: var(--color-text-primary);
letter-spacing: .01em;
}
.mm-field input,
.mm-field textarea,
.mm-field select,
.personality-card input,
.personality-card textarea,
.personality-card select {
background: transparent !important;
border: none !important;
outline: none !important;
color: var(--color-text-primary) !important;
font-family: inherit !important;
font-size: .9rem !important;
width: 100% !important;
padding: 0 !important;
resize: vertical;
line-height: 1.5;
/* Native Select-Appearance ausschalten, eigener Pfeil via background-image */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.mm-field select,
.personality-card select {
/* SVG-Chevron als Hintergrund, Padding rechts für Pfeil-Platz */
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right .1rem center !important;
background-size: 14px !important;
padding-right: 1.4rem !important;
cursor: pointer;
}
/* Dropdown-Optionen (Browser-Native, aber wir können Background/Color setzen) */
.mm-field select option,
.personality-card select option {
background: #1a0f3a !important;
color: #fff !important;
padding: .5rem !important;
}
.mm-field input::placeholder,
.mm-field textarea::placeholder,
.personality-card input::placeholder,
.personality-card textarea::placeholder {
color: var(--color-text-tertiary) !important;
}
/* Submit-Button (Primary) */
.mm-form-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
margin-top: .5rem;
}
.mm-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
background: var(--color-brand) !important;
color: #fff !important;
border: none !important;
border-radius: 999px !important;
padding: .8rem 2rem !important;
font-size: .92rem !important;
font-weight: 700 !important;
cursor: pointer !important;
font-family: inherit !important;
letter-spacing: .01em;
box-shadow: var(--shadow-btn);
transition: background .15s, box-shadow .15s, transform .12s;
}
.mm-btn-primary:hover {
background: var(--color-brand-strong) !important;
box-shadow: 0 12px 36px var(--color-brand-glow);
transform: translateY(-1px);
}
.mm-btn-primary:disabled {
opacity: .55;
cursor: not-allowed;
transform: none;
}
/* Feedback (nach Speichern) */
.mm-form-feedback {
font-size: .85rem;
color: var(--color-success);
font-weight: 600;
margin: 0;
display: inline-flex;
align-items: center;
gap: .35rem;
}
/* [hidden]-Attribut respektieren (sonst überschreibt display:inline-flex es) */
.mm-form-feedback[hidden] { display: none !important; }
.mm-form-feedback::before {
content: "✓";
font-weight: 700;
}
.mm-form-feedback--error {
color: var(--color-warning);
}
.mm-form-feedback--error::before {
content: "⚠";
}
/* Override für vorhandene .personality-card (Layout-Reset für unsere Tokens) */
.personality-card {
background: var(--color-background-primary) !important;
border: 1px solid var(--color-border-tertiary) !important;
box-shadow: none !important;
}
.personality-card > span:first-child {
color: var(--color-text-primary) !important;
font-weight: 600 !important;
font-size: .82rem !important;
}
/* Profilstärke-Card (im Profile-Panel oben) – braucht etwas mehr Abstand */
[data-account-panel="profile"] .mm-progress { margin-bottom: 1rem; }
@media (max-width: 760px) {
.mm-form-grid { grid-template-columns: 1fr; gap: .75rem; }
.mm-field { padding: .85rem 1rem !important; }
.mm-info-card { padding: .9rem 1rem; gap: .7rem; }
.mm-btn-primary { width: 100%; padding: .85rem 1.5rem !important; }
}
/* ════════════════════════════════════════════════════════════════════════
EINSTELLUNGEN v2 – Settings-Cards, Toggle, Danger Zone
════════════════════════════════════════════════════════════════════════ */
.mm-settings-card {
background: var(--color-background-primary);
border: 1px solid var(--color-border-tertiary);
backdrop-filter: blur(var(--blur-glass));
-webkit-backdrop-filter: blur(var(--blur-glass));
border-radius: var(--border-radius-lg);
padding: 1.4rem 1.6rem;
margin-bottom: 1rem;
transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.mm-settings-card:hover {
border-color: var(--color-border-secondary);
}
.mm-settings-card__head { margin-bottom: 1rem; }
.mm-settings-card__title {
font-size: 1rem;
font-weight: 700;
color: var(--color-text-primary);
margin: 0 0 .25rem;
letter-spacing: -.01em;
}
.mm-settings-card__sub {
font-size: .85rem;
color: var(--color-text-secondary);
margin: 0;
line-height: 1.5;
}
/* Compact Form für Settings (Single-Column) */
.mm-settings-form {
display: flex;
flex-direction: column;
gap: .8rem;
}
.mm-field--compact {
padding: .75rem 1rem !important;
gap: .35rem !important;
max-width: 24rem;
}
.mm-field--compact .mm-field__label {
font-size: .78rem;
font-weight: 600;
color: var(--color-text-secondary);
}
/* Toggle */
.mm-toggle-row {
display: flex;
align-items: center;
gap: .85rem;
cursor: pointer;
user-select: none;
margin-bottom: 1rem;
position: relative;
}
.mm-toggle-row__cb {
position: absolute;
opacity: 0;
width: 0; height: 0;
pointer-events: none;
}
.mm-toggle-row__label {
font-size: .88rem;
color: var(--color-text-primary);
}
.mm-toggle {
display: inline-flex;
align-items: center;
flex-shrink: 0;
width: 2.6rem;
min-width: 2.6rem;
height: 1.45rem;
border-radius: 999px;
padding: 2px;
box-sizing: content-box;
background: var(--color-background-secondary);
border: 1px solid var(--color-border-tertiary);
transition: background .2s, border-color .2s;
cursor: pointer;
}
.mm-toggle.is-on {
background: var(--color-brand) !important;
border-color: var(--color-brand) !important;
}
.mm-toggle__knob {
display: block;
width: 1.05rem;
height: 1.05rem;
border-radius: 50%;
background: #fff;
transition: transform .22s ease;
transform: translateX(0);
pointer-events: none;
flex-shrink: 0;
box-shadow: 0 2px 4px rgba(0,0,0,.25);
}
.mm-toggle.is-on .mm-toggle__knob {
transform: translateX(1.05rem);
}
/* Settings-Links */
.mm-settings-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
.mm-settings-links li {
border-bottom: 1px solid var(--color-border-tertiary);
}
.mm-settings-links li:last-child { border-bottom: none; }
.mm-settings-links a {
display: flex;
align-items: center;
gap: .55rem;
padding: .7rem 0;
font-size: .9rem;
color: var(--color-text-info);
text-decoration: none;
transition: color .15s;
}
.mm-settings-links a:hover {
color: var(--color-text-primary);
}
.mm-settings-links a svg { opacity: .8; flex-shrink: 0; }
/* Danger-Zone (Konto löschen) */
.mm-danger-card {
background: var(--color-error-soft);
border: 1px solid rgba(248,113,113,.4);
border-radius: var(--border-radius-lg);
padding: 1.25rem 1.5rem;
margin-bottom: 1rem;
}
.mm-danger-card__head {
display: flex;
align-items: center;
gap: .55rem;
margin-bottom: .55rem;
}
.mm-danger-card__icon {
color: var(--color-error);
flex-shrink: 0;
display: inline-flex;
}
.mm-danger-card__eyebrow {
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--color-error);
}
.mm-danger-card__text {
font-size: .85rem;
color: var(--color-text-secondary);
margin: 0 0 1rem;
line-height: 1.55;
}
.mm-btn-danger {
background: var(--color-error) !important;
color: #fff !important;
border: none !important;
border-radius: 999px !important;
padding: .7rem 1.6rem !important;
font-size: .88rem !important;
font-weight: 700 !important;
cursor: pointer !important;
font-family: inherit !important;
letter-spacing: .01em;
transition: background .15s, box-shadow .15s, transform .12s;
box-shadow: 0 8px 24px rgba(248,113,113,.3);
}
.mm-btn-danger:hover {
background: #dc2626 !important;
box-shadow: 0 12px 32px rgba(248,113,113,.45);
transform: translateY(-1px);
}
@media (max-width: 760px) {
.mm-settings-card { padding: 1.1rem 1.2rem; }
.mm-danger-card { padding: 1.1rem 1.2rem; }
.mm-field--compact { max-width: 100%; }
}
/* ════════════════════════════════════════════════════════════════════════
MODAL – generisches Overlay-Modal (z.B. Konto löschen)
════════════════════════════════════════════════════════════════════════ */
.mm-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
animation: mmModalFadeIn .25s ease-out;
}
.mm-modal[hidden] { display: none !important; }
.mm-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(10,4,30,.78);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
}
.mm-modal__card {
position: relative;
background: linear-gradient(135deg, #1a0f3a 0%, #2d1b6e 60%, #4a318a 100%);
border: 1px solid var(--color-border-secondary);
border-radius: var(--border-radius-xl);
padding: 2.2rem 2rem 1.8rem;
width: 100%;
max-width: 28rem;
box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(167,139,250,.15);
animation: mmModalSlideUp .35s cubic-bezier(.2, .8, .2, 1);
max-height: 92vh;
overflow-y: auto;
}
.mm-modal__close {
position: absolute;
top: .85rem;
right: .85rem;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--color-background-secondary);
border: 1px solid var(--color-border-tertiary);
color: var(--color-text-secondary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s, border-color .15s;
z-index: 1;
}
.mm-modal__close:hover {
background: var(--color-brand-soft);
color: var(--color-text-primary);
border-color: var(--color-border-secondary);
}
.mm-modal__step {
display: flex;
flex-direction: column;
gap: .9rem;
}
.mm-modal__step--center {
align-items: center;
text-align: center;
}
/* HTML [hidden] respektieren – sonst overschreibt display:flex es */
.mm-modal__step[hidden] { display: none !important; }
.mm-modal__icon {
width: 56px;
height: 56px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-bottom: .25rem;
}
.mm-modal__icon--danger {
background: var(--color-error-soft);
color: var(--color-error);
border: 1px solid rgba(248,113,113,.4);
}
.mm-modal__icon--success {
background: var(--color-success-soft);
color: var(--color-success);
border: 1px solid rgba(74,222,128,.4);
}
.mm-modal__icon--loading {
background: var(--color-background-info);
border: 1px solid var(--color-border-secondary);
}
.mm-modal__title {
font-size: 1.3rem;
font-weight: 800;
color: var(--color-text-primary);
margin: 0;
letter-spacing: -.02em;
line-height: 1.2;
}
.mm-modal__text {
font-size: .92rem;
color: var(--color-text-secondary);
margin: 0;
line-height: 1.55;
}
.mm-modal__text strong { color: var(--color-text-primary); }
.mm-modal__hint {
font-size: .8rem;
margin: -.4rem 0 0;
font-weight: 600;
}
.mm-modal__hint--error {
color: var(--color-error);
}
.mm-modal__actions {
display: flex;
gap: .6rem;
margin-top: .85rem;
justify-content: flex-end;
flex-wrap: wrap;
}
.mm-modal__actions > button { flex: 0 1 auto; }
/* Spinner */
.mm-spinner {
width: 26px;
height: 26px;
border: 3px solid rgba(167,139,250,.25);
border-top-color: var(--color-brand);
border-radius: 50%;
animation: mmSpinnerSpin .8s linear infinite;
}
/* Animations */
@keyframes mmModalFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes mmModalSlideUp {
from { opacity: 0; transform: translateY(20px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mmSpinnerSpin {
to { transform: rotate(360deg); }
}
@media (max-width: 540px) {
.mm-modal__card { padding: 1.8rem 1.4rem 1.4rem; border-radius: var(--border-radius-lg); }
.mm-modal__title { font-size: 1.15rem; }
.mm-modal__actions { flex-direction: column-reverse; }
.mm-modal__actions > button { width: 100%; }
}
/* Report-Modal: Zitat-Block der gemeldeten Nachricht */
.mm-report__quote {
background: var(--color-background-secondary);
border-left: 3px solid var(--color-brand);
border-radius: var(--border-radius-md);
padding: .6rem .85rem;
font-size: .85rem;
color: rgba(255,255,255,.85);
line-height: 1.45;
margin: 0 0 .25rem;
max-height: 6rem;
overflow-y: auto;
}
.mm-report__quote strong { color: var(--color-text-info); font-weight: 700; }
/* Report-Button auf Chat-Nachrichten (kleines "..." Icon) */
.mm-msg-report-btn {
background: transparent;
border: none;
cursor: pointer;
padding: .25rem;
margin-left: .25rem;
color: rgba(255,255,255,.4);
border-radius: 50%;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
line-height: 1;
opacity: 0;
transition: opacity .15s, background .15s, color .15s;
flex-shrink: 0;
}
.mm-msg-report-btn:hover {
background: rgba(255,255,255,.08);
color: var(--color-text-primary);
}
/* Beim Hover über die Message-Bubble: Report-Button anzeigen */
.ec-msg:hover .mm-msg-report-btn,
.chat-msg:hover .mm-msg-report-btn,
.mm-msg-report-btn:focus {
opacity: 1;
}
/* Auf Touch immer sichtbar (kein Hover) */
@media (hover: none) {
.mm-msg-report-btn { opacity: .5; }
}
.ec-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 2rem; text-align: center; color: rgba(255,255,255,.5); font-size: .9rem; }
.ec-state[hidden] { display: none !important; }
.ec-state__icon { font-size: 2.5rem; }
.ec-state__title { font-weight: 700; color: #fff; font-size: 1rem; margin: 0; }
.ec-notice { margin: .5rem 1.25rem; background: rgba(109,40,217,.18); border: 1px solid rgba(167,139,250,.25); border-radius: 10px; padding: .65rem 1rem; font-size: .78rem; color: rgba(255,255,255,.72); transition: opacity .8s ease, max-height .8s ease, margin .8s ease, padding .8s ease, border-color .8s ease; overflow: hidden; max-height: 6rem; }
.ec-notice--hidden { opacity: 0 !important; max-height: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-color: transparent !important; pointer-events: none; }
.ec-notice a { color: #a78bfa !important; }
@media (min-width: 640px) { .ec-page { border-left: 1px solid rgba(255,255,255,.1); border-right: 1px solid rgba(255,255,255,.1); } }
/* ════════════════════════════════════════════════════════════════════════
REMATCH PAGE
════════════════════════════════════════════════════════════════════════ */
.rematch-date-type { color: rgba(255,255,255,.6) !important; }
#rematch-loading { text-align: center; padding: 3rem 1rem; color: rgba(255,255,255,.45) !important; }
#rematch-api-error { background: rgba(185,28,28,.15) !important; border: 1px solid rgba(248,113,113,.35) !important; color: #fca5a5 !important; border-radius: .5rem; padding: .75rem 1rem; margin: 1rem 0; font-size: .9rem; }
#rematch-participants-list p { color: rgba(255,255,255,.45) !important; }
.account-subsection { border-color: rgba(255,255,255,.1) !important; }
.account-subsection h3 { color: #c4b5fd !important; }
.portal-links { border-color: rgba(255,255,255,.1) !important; }
.portal-form { color: #fff !important; }
.account-field { border-color: rgba(255,255,255,.1) !important; }
.account-item { background: rgba(74,49,138,.25) !important; border: 1px solid rgba(167,139,250,.2) !important; border-radius: 1rem !important; }
.account-item strong { color: #fff !important; }
.account-item p, .account-item > div > p { color: rgba(255,255,255,.65) !important; }
.account-item__actions { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.account-item__actions .portal-label { color: rgba(255,255,255,.78) !important; font-size: .88rem !important; }
.rm-info-box { display: flex; gap: .85rem; background: rgba(167,139,250,.1); border: 1px solid rgba(167,139,250,.28); border-radius: 14px; padding: 1.1rem 1.25rem; margin-bottom: 1.75rem; }
.rm-info-box__icon { flex-shrink: 0; color: #a78bfa; margin-top: .15rem; }
.rm-info-box strong { display: block; color: rgba(255,255,255,.9); font-size: .9rem; font-weight: 700; margin-bottom: .3rem; }
.rm-info-box p { font-size: .83rem; color: rgba(255,255,255,.58); line-height: 1.55; margin: 0; }
.rm-participant { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; background: rgba(74,49,138,.2); border: 1px solid rgba(167,139,250,.2); border-radius: 12px; margin-bottom: .5rem; }
.rm-participant__avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; flex-shrink: 0; background: rgba(167,139,250,.25); color: #c4b5fd; font-size: .85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.rm-participant__info { flex: 1; min-width: 0; }
.rm-participant__name { font-size: .93rem; font-weight: 700; color: #fff; margin: 0 0 .1rem; }
.rm-participant__meta { font-size: .76rem; color: rgba(255,255,255,.5); margin: 0; }
.rm-participant__votes { display: flex; gap: .4rem; flex-shrink: 0; }
.rm-vote-btn { display: flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 8px; border: 1.5px solid; background: transparent; cursor: pointer; font-size: 1rem; transition: background .15s; }
.rm-vote-btn--yes { border-color: rgba(16,185,129,.4); color: #6ee7b7; }
.rm-vote-btn--yes:hover, .rm-vote-btn--yes.is-active { background: rgba(16,185,129,.2); border-color: #6ee7b7; }
.rm-vote-btn--no { border-color: rgba(239,68,68,.35); color: #fca5a5; }
.rm-vote-btn--no:hover, .rm-vote-btn--no.is-active { background: rgba(239,68,68,.18); border-color: #fca5a5; }
.rm-hidden-cb { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
@media (max-width: 767px) {
.book-page { padding: 2rem 1rem 3.5rem; }
.account-section { padding: 1.2rem 1.25rem !important; }
}
/* ════════════════════════════════════════════════════════════════════════
SMOOTH TRANSITIONS – Skeleton → echter Wert (Option A + D)
════════════════════════════════════════════════════════════════════════ */
/* Stat-Werte & Sub-Zeilen: sanfter Opacity-Übergang beim JS-Update */
.mm-stat__value,
.mm-stat__sub,
[data-account-greeting] { transition: opacity .22s ease; }
/* Alert-Karten Einblend-Animation (Klasse wird per MutationObserver gesetzt) */
@keyframes mm-card-appear {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.mm-card--appearing {
animation: mm-card-appear .32s ease both;
}
/* Profil-Vervollständigen-Karte: sanftes Ausblenden */
[data-profile-progress] { transition: opacity .35s ease; }