/* =====================================================================
   Matriarch – Overlay-Theme (dunkel, edel, Violett + Gold)
   Wird NUR auf matriarch geladen (assets/custom.css). Überschreibt den
   hellen LILA-Look aus style.css für den gesamten Mitgliederbereich.
   ===================================================================== */

:root {
    --m-bg:       #0d0712;
    --m-bg2:      #150c21;
    --m-surface:  #1b1128;   /* Panels / Karten */
    --m-surface2: #241634;   /* Eingabefelder, Hover */
    --m-line:     rgba(201,162,75,.22);   /* zarte Gold-Linie */
    --m-line2:    rgba(139,92,246,.22);   /* zarte Violett-Linie */
    --m-text:     #ece7f5;
    --m-muted:    #a99fc0;
    --m-heading:  #f5eefe;
    --m-gold:     #c9a24b;
    --m-gold-hi:  #e0c070;
    --m-violet:   #b9a6f5;
}

/* ---------- Grundfläche ---------- */
body,
body.bg-default, body.bg-pinnwand, body.bg-termine {
    color: var(--m-text);
    background:
        radial-gradient(1100px 560px at 12% -10%, rgba(139,92,246,.16), transparent 60%),
        radial-gradient(900px 640px at 100% 0%, rgba(201,162,75,.10), transparent 55%),
        linear-gradient(170deg, var(--m-bg), var(--m-bg2) 60%) !important;
    background-attachment: fixed !important;
}

/* ---------- Header / Navigation ---------- */
.site-header {
    background: rgba(13,7,18,.72);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--m-line);
}
/* Logo: dieselbe Kronen-Grafik wie auf der Landing (statt Gold-Block) */
.brand-mark {
    background: url('/assets/logo.svg') center/contain no-repeat !important;
    width: 44px; height: 46px; border-radius: 0;
}
.brand-name { color: var(--m-heading); font-family: 'Fraunces', Georgia, serif; font-weight: 500; }
.brand-name .bn-1 { color: var(--m-heading); }
.brand-name .bn-2 { color: var(--m-gold); }
.brand-tag { color: var(--m-muted); }
.site-nav a, .nav-content a { color: var(--m-violet); }
.site-nav a:hover { color: #e6dcff; }

/* Nav im eleganten Landing-Stil: uppercase, gesperrt, dezent */
.site-nav { gap: 1.5rem; }
.site-nav .nav-content > a,
.site-nav .nav-content > .has-sub > a,
.site-nav .nav-personal > a:not(.nav-me):not(.btn) {
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: .76rem;
    font-weight: 500;
    color: var(--m-muted);
}
.site-nav .nav-content > a:hover,
.site-nav .nav-content > .has-sub > a:hover,
.site-nav .nav-personal > a:not(.nav-me):not(.btn):hover {
    color: var(--m-gold);
}
/* Untermenü & eigener Name bleiben normal lesbar */
.has-sub .sub a { text-transform: none; letter-spacing: normal; font-size: .95rem; }
.nav-me, .nav-me span { text-transform: none; letter-spacing: normal; }
.nav-hi { color: var(--m-muted); }

/* Persönliche Navi-Gruppe: Trennlinie + Akzent in Gold statt Pink */
.nav-personal { border-left: 1px solid var(--m-line); }
.nav-personal > a:not(.btn):not(.nav-me) { color: var(--m-gold); }
.nav-personal > a:not(.btn):not(.nav-me):hover { color: var(--m-gold-hi); }
@media (max-width: 640px) { .nav-personal { border-left: none; } }

/* Öffentlicher CTA-Knopf im Kopf: transparenter Ghost-Pill wie auf der Landing
   (nicht der volle violette Knopf) */
.site-nav .nav-personal a.btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,.16);
    color: var(--m-heading);
    box-shadow: none;
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}
.site-nav .nav-personal a.btn:hover {
    border-color: var(--m-gold);
    color: #fff;
    transform: translateY(-1px);
}

/* ---------- Überschriften ---------- */
h1, h2, h3,
.page-title,
.panel h1, .panel h2,
.hero h1 { color: var(--m-heading); }
.welcome h1, .profile-meta h1 { color: var(--m-heading); }

/* ---------- Buttons ---------- */
.btn { box-shadow: 0 8px 24px rgba(109,40,217,.35); }
.btn-ghost { color: var(--m-gold) !important; border-color: rgba(201,162,75,.5); }

/* ---------- Karten / Panels ---------- */
.card, .panel, .photo, .bubble-them, .has-sub > .sub, .online-bar {
    background: var(--m-surface);
    border-color: var(--m-line);
}
.card { box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.panel { box-shadow: 0 12px 34px rgba(0,0,0,.4); }
.card h3, .panel h1 { color: var(--m-heading); }
.card ul, .card li { color: var(--m-muted); }
.card-link:hover { box-shadow: 0 14px 38px rgba(0,0,0,.5); }

/* Begrüssungs-Box */
.welcome {
    background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(201,162,75,.12));
    border: 1px solid var(--m-line);
}

/* ---------- Text / Muted / Links ---------- */
.muted, .site-footer .muted { color: var(--m-muted); }
.site-footer { color: var(--m-gold); }
a { color: var(--m-violet); }

/* ---------- Formulare ---------- */
.field label { color: var(--m-gold); }
.field input,
.textarea,
.composer textarea,
.comment-form textarea,
.field select, select {
    background-color: var(--m-surface2);
    color: var(--m-text);
    border-color: var(--m-line);
}
.field input::placeholder,
.textarea::placeholder,
textarea::placeholder,
input::placeholder { color: #8f84a8; }
.field input:focus,
.textarea:focus,
.composer textarea:focus,
.comment-form textarea:focus,
.field select:focus, select:focus {
    border-color: var(--m-gold);
    box-shadow: 0 0 0 3px rgba(201,162,75,.18);
}
.field select:hover, select:hover { border-color: var(--m-gold); }
/* Dropdown-Pfeil in Gold */
.field select, select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9a24b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
/* Auswahl der Options-Liste lesbar halten */
.field select option, select option { color: #1a1024; }

/* ---------- Pinnwand / Beiträge ---------- */
.page-title { color: var(--m-heading); }
.post-author, .c-author, .conv-name, .event-head h3, .event-host a { color: var(--m-gold); }
.post-meta, .event-meta, .event-host, .conv-snippet, .conv-time { color: var(--m-muted); }
.comments { border-top-color: var(--m-line); }
.comment { border-bottom-color: rgba(255,255,255,.06); }
.conv-list a:hover { background: var(--m-surface2); }
/* Dropdown-Menü im selben Stil wie auf der Landing (dunkel + Gold-Haarlinie) */
.site-nav .has-sub > .sub {
    background: rgba(20,11,30,.985);
    border: 1px solid rgba(201,162,75,.28);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0,0,0,.55);
}
.has-sub .sub a { color: var(--m-text); }
.has-sub .sub a:hover { background: rgba(201,162,75,.12); color: var(--m-gold); }

/* ---------- Chips / Interessen / Tags ---------- */
.chip { background: rgba(139,92,246,.16); color: var(--m-violet); }
.chip-active { background: var(--m-gold); color: #1a1024; }
.interests-grid label,
.field .interests-grid label {
    background: var(--m-surface2);
    border-color: var(--m-line);
    color: var(--m-text);
}
.tag-open { background: rgba(139,92,246,.16); color: var(--m-violet); }
.admin-badge { background: var(--m-gold); color: #1a1024; }

/* ---------- Nachrichten ---------- */
.bubble-them { color: var(--m-text); border-color: var(--m-line); }
.bubble-them .att-file { color: var(--m-violet); }

/* ---------- Online-Leiste ---------- */
.online-bar { border-top: 1px solid var(--m-line); box-shadow: 0 -6px 20px rgba(0,0,0,.4); }
.online-label { color: var(--m-gold); }
.online-item { color: var(--m-muted); }
.online-item:hover { color: var(--m-gold); }

/* ---------- Admin-Tabellen ---------- */
.admin-table th { color: var(--m-gold); }
.admin-table th, .admin-table td { border-bottom-color: var(--m-line); }

/* ---------- Galerie / Fotos ---------- */
.photo figcaption { color: var(--m-muted); }
.photo-caption { color: var(--m-text); }
.photo-by a, .photo-tags a { color: var(--m-violet); }

/* ---------- Inhaltsseiten (Mini-CMS) ---------- */
.content-label { color: var(--m-gold); }
.c-body h2, .c-body h3 { color: var(--m-heading); }
.c-body blockquote { border-left-color: var(--m-gold); color: var(--m-muted); }
.c-body code { background: var(--m-surface2); color: var(--m-gold-hi); }
.c-body hr { border-top-color: var(--m-line); }
.book-card { background: var(--m-surface); border-color: var(--m-line); }
.book-author { color: var(--m-gold); }
.book-title { color: var(--m-heading); }
.book-desc { color: var(--m-muted); }
.hl-gold { background: rgba(201,162,75,.32); color: #f6efdc; }
.discuss { background: var(--m-surface); border-color: var(--m-line); border-left-color: var(--m-gold); }
.discuss h3 { color: var(--m-heading); }
.discuss p { color: var(--m-muted); }
.discuss-link { background: var(--m-surface2); border-color: var(--m-line); color: var(--m-violet); }
.discuss-link:hover { border-color: var(--m-gold); }
.post-permalink:hover { color: var(--m-gold); }
.li-multi .li-title { color: var(--m-text); }
.li-multi .li-desc { color: var(--m-muted); }

/* Pinnwand-Forum: Titel-Wolke + Beitrags-Lightbox */
.pin-search input { background: var(--m-surface2); border-color: var(--m-line); color: var(--m-text); }
.pin-search input:focus { border-color: var(--m-gold); box-shadow: 0 0 0 3px rgba(201,162,75,.18); }
.bubble-cloud .bubble { background: var(--m-surface); border-color: var(--m-line); color: var(--m-heading); }
.bubble-cloud .bubble:hover { border-color: var(--m-gold); }
.bubble-cloud .bubble .b-meta { color: var(--m-muted); }
.pin-content { background: var(--m-surface); color: var(--m-text); }
.pin-content .detail-title { color: var(--m-heading); }
.pin-content .comments-h { color: var(--m-gold); }
.chip-toggle { border: 1px dashed var(--m-line); background: transparent; color: var(--m-gold); }
/* Statistik/Moderation dunkel */
.stat { background: var(--m-surface2); }
.stat-num { color: var(--m-heading); }
.bar-track { background: var(--m-surface2); }
.mod-flagged { background: rgba(230,73,126,.12); }
.poll-option { border-bottom-color: var(--m-line); }
.poll-option select { background: var(--m-surface2); border-color: var(--m-line); color: var(--m-text); }
.ps-bar { background: var(--m-surface2); }
.ps-val { color: var(--m-text); }

/* ---------- Wünsche ---------- */
.wish-meta { color: var(--m-muted); }

/* ---------- Admin-Untermenü ---------- */
.admin-bar {
    background: rgba(13,7,18,.95);
    border-bottom: 1px solid var(--m-line);
}
.admin-bar-label { color: var(--m-gold); }
.admin-bar a { color: var(--m-violet); }
.admin-bar a:hover { color: #e6dcff; }
.flr-bar { background: var(--m-bg2); position: sticky; top: 0; z-index: 50; }
.flr-bar a { color: var(--m-gold); }
.flr-bar a:hover { color: #f0e2b8; }
.flr-glyph-cap { color: var(--m-heading); }
.flr-glyph-lab { color: var(--m-muted); }
.ref-who { background: var(--m-surface2); border-color: var(--m-line); color: var(--m-violet); }

/* ---------- Fein ---------- */
details.composer summary { color: var(--m-gold); }
.empty { color: var(--m-muted); }

/* ---------- FAQ (::: faq) ---------- */
.faq-item { background: var(--m-surface); border-color: var(--m-line); }
.faq-item > summary { color: var(--m-heading); }
.faq-item > summary::before { color: var(--m-gold); }
.faq-a { color: var(--m-muted); }

/* ---------- „Mehr aus den Einblicken" ---------- */
.more-reading { border-top-color: var(--m-line); }
.more-reading h2 { color: var(--m-heading); }
.more-box { background: var(--m-surface); border-color: var(--m-line); }
.more-box:hover { border-color: var(--m-gold); }
.more-title { color: var(--m-heading); }
.more-teaser { color: var(--m-muted); }

/* ---------- Profil-Steckbrief + Filter ---------- */
.pf-section { color: var(--m-gold); }
.pf-list dt { color: var(--m-muted); }
.pf-list dd { color: var(--m-text); }
.report-box { background: var(--m-surface); border-color: var(--m-line); }
.mf-item { color: var(--m-muted); }
.pf-field .pf-vis { color: var(--m-muted); }
.member-badge { background: rgba(201,162,75,.18); color: var(--m-gold); }
.couple-card { border-color: var(--m-line); }
.link-muted { color: var(--m-muted); }
.pf-legend { color: var(--m-muted); }
.vis-toggle { border-color: var(--m-line); }
.vis-toggle input[type="radio"]:checked + label { background: var(--m-surface2); }

/* FLR-Führung: Board im Dark-Theme, goldene Ringe */
.fb-board { background: var(--m-bg2); border-color: var(--m-line); }
.fb-ring { stroke: rgba(201,162,75,.38); }
.fb-core { fill: rgba(201,162,75,.16); stroke: rgba(201,162,75,.55); }
.fb-num { fill: var(--m-gold); opacity: .8; }
.fb-chip { background: var(--m-surface2); border-color: var(--m-line); box-shadow: none; }
.fb-chip .fb-name { color: var(--m-heading); }
.fb-chip .fb-lab { color: var(--m-gold); }
.fb-chip.lvl-high { border-color: var(--m-gold); }
.fb-legend { color: var(--m-muted); }
.fb-legend b { color: var(--m-gold); }
.flr-modal-card { background: var(--m-surface); color: var(--m-text); border: 1px solid var(--m-line); }
.flr-modal-card h2 { color: var(--m-heading); }
.flr-modal-x { color: var(--m-muted); }
.flr-asp-title { color: var(--m-heading); }
.flr-asp-val { color: var(--m-gold); }
.flr-slider { accent-color: var(--m-gold); }
.flr-asp-scale { color: var(--m-muted); }
.flr-sug { background: var(--m-surface2); color: var(--m-gold); border-color: var(--m-line); }
.flr-sug:hover { background: var(--m-surface); }
.flr-task { border-bottom-color: var(--m-line); }
.flr-check { background: var(--m-surface2); border-color: var(--m-gold); color: var(--m-gold); }
.flr-task.is-done .flr-check { background: var(--m-gold); color: var(--m-bg); }
.flr-task-title { color: var(--m-heading); }
.chip-radio { background: var(--m-surface2); color: var(--m-text); border-color: var(--m-line); }
.chip-radio:has(input:checked) { background: var(--m-gold); color: var(--m-bg); border-color: var(--m-gold); }
.wiz-dot.is-active { color: var(--m-gold); }
.wiz-review { background: var(--m-surface2); color: var(--m-text); }
.wish-row { border-bottom-color: var(--m-line); }
.wish-label { color: var(--m-heading); }
.seg { border-color: var(--m-line); }
.seg label { border-left-color: var(--m-line); color: var(--m-muted); }
.seg input:checked + label.seg-3 { background: var(--m-gold); color: var(--m-bg); }
.seg input:checked + label.seg-0 { background: var(--m-surface2); color: var(--m-muted); }
.panel-safety { border-color: var(--m-gold); }
.flr-sym { color: var(--m-gold); }
.flr-glyph { color: var(--m-gold); }
.flr-dot-label { fill: #b8a97f; }
.flr-zone-label { fill: var(--m-gold); opacity: 0.9; }
.flr-zonelegend { color: var(--m-muted); }
.flr-share-edit { background: var(--m-surface2); border-color: var(--m-gold); }
.enf-row { border-bottom-color: var(--m-line); }
.enf-name { color: var(--m-heading); }
.rate-line { border-bottom-color: var(--m-line); }
.flr-hint { background: var(--m-surface2); color: var(--m-text); }
.rit-row { border-bottom-color: var(--m-line); }
.rit-name { color: var(--m-heading); }
.rit-when { background: var(--m-surface2); color: var(--m-gold); }

/* =====================================================================
   Öffentliche Kopfzeile (Overlay includes/public-header.php) – 1:1 der
   Landing-Look: zentriertes Menü, gleiche Schrift, Krone-Logo, Gold-Banner.
   Alles unter .mx-pub gekapselt, damit der Mitgliederbereich unberührt bleibt.
   ===================================================================== */
.mx-pub .wrap { max-width: 1140px; margin: 0 auto; padding: 0 clamp(1.2rem,4vw,2.5rem); }
.mx-pub .nav {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.3rem 0; position: sticky; top: 0; z-index: 10;
    background: rgba(13,7,18,.72); backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.09);
}
.mx-pub .brand { display: flex; align-items: center; gap: .6rem; }
.mx-pub .brand .logo { width: auto; height: 46px; }
.mx-pub .brand b { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 1.35rem; color: #f4f1f8; }
.mx-pub .brand-logo-btn { display: inline-flex; line-height: 0; color: #c9a24b; transition: color .15s; }
.mx-pub .brand-logo-btn:hover { color: #e0c070; }
.mx-pub .brand-home { color: inherit; text-decoration: none; }
.mx-pub .nav-links { display: flex; align-items: center; gap: 1.8rem; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: #8a8298; }
.mx-pub .nav-links a { color: #8a8298; text-decoration: none; transition: color .15s; }
.mx-pub .nav-links a:hover { color: #f4f1f8; }
.mx-pub .btn {
    display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px;
    padding: .85rem 1.5rem; font-weight: 500; font-size: .9rem;
    letter-spacing: normal; text-transform: none; text-decoration: none;
    background: transparent; border: 1px solid rgba(255,255,255,.16); color: #f4f1f8;
    box-shadow: none; transition: .15s;
}
.mx-pub .btn:hover { transform: translateY(-1px); border-color: #c9a24b; color: #fff; }
/* Einblicke-Dropdown inkl. unsichtbarer Hover-Brücke (schliesst die Lücke) */
.mx-pub .nav-drop { position: relative; display: inline-flex; }
.mx-pub .nav-drop > a { cursor: pointer; }
.mx-pub .nav-drop::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: .7rem; }
.mx-pub .nav-sub {
    display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    margin-top: .6rem; background: rgba(20,11,30,.985); backdrop-filter: blur(10px);
    border: 1px solid rgba(201,162,75,.28); border-radius: 12px; padding: .4rem;
    min-width: 230px; z-index: 30; box-shadow: 0 14px 34px rgba(0,0,0,.55);
}
.mx-pub .nav-drop:hover .nav-sub, .mx-pub .nav-drop:focus-within .nav-sub { display: block; }
.mx-pub .nav-sub a { display: block; padding: .55rem .8rem; border-radius: 8px; text-transform: none; letter-spacing: normal; font-size: .85rem; color: #c3bccf; white-space: nowrap; text-decoration: none; }
.mx-pub .nav-sub a:hover { background: rgba(201,162,75,.12); color: #c9a24b; }
/* Goldenes Eck-Banner */
.mx-pub .ribbon { position: fixed; top: 0; right: 0; width: 240px; height: 240px; overflow: hidden; z-index: 60; pointer-events: none; }
.mx-pub .ribbon > div {
    position: absolute; top: 46px; right: -60px; width: 270px; transform: rotate(45deg);
    background: linear-gradient(135deg,#e8cd82,#c9a24b 55%,#ad8636); color: #241205; text-align: center;
    padding: 10px 0; box-shadow: 0 8px 22px rgba(0,0,0,.42);
    border-top: 1px solid rgba(255,255,255,.45); border-bottom: 1px solid rgba(0,0,0,.18);
}
.mx-pub .ribbon b { display: block; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 14px; line-height: 1.15; }
.mx-pub .ribbon span { display: block; font-size: 10px; margin-top: 2px; opacity: .92; }
@media (max-width: 860px) { .mx-pub .nav-links { display: none; } }
@media (max-width: 640px) {
    .mx-pub .ribbon { width: 172px; height: 172px; }
    .mx-pub .ribbon > div { top: 34px; right: -70px; width: 236px; padding: 8px 0; }
    .mx-pub .ribbon b { font-size: 12px; } .mx-pub .ribbon span { font-size: 9px; }
}

/* ---------- Besucher-Tabelle (IP) – dunkel ---------- */
.ipf-seg { border-color: var(--m-line); }
.ipf-seg button { color: var(--m-muted); border-left-color: var(--m-line); }
.ipf-seg button.active { background: var(--m-gold); color: #221708; }
th.ip-sortable::after { color: var(--m-gold); }
th.ip-sortable:hover, th.ip-sortable.sort-active { color: var(--m-gold-hi); }
.ip-hover { border-bottom-color: var(--m-gold); color: var(--m-text); }
.ipk-human { background: rgba(46,125,70,.22); color: #7fd79b; }
.ipk-bot { background: var(--m-surface2); color: var(--m-muted); }
.ip-tip { background: var(--m-surface); border-color: var(--m-line); color: var(--m-text);
    box-shadow: 0 10px 34px rgba(0,0,0,.55); }
.ip-tip-head code { color: var(--m-gold-hi); }
.ip-tip-head span { color: var(--m-muted); }
.ip-tip-tbl th { color: var(--m-muted); border-bottom-color: var(--m-line); }
.ip-tip-tbl td { border-bottom-color: var(--m-line); }

/* ---------- NSFW-Filter (Galerie) – dunkel ---------- */
.nsfw-switch-track { background: var(--m-surface2); }
.nsfw-switch-knob { background: #e9e2f5; }
.nsfw-switch input:checked + .nsfw-switch-track { background: #b23b3b; }
.nsfw-switch-label { color: var(--m-text); }
.nsfw-cover { background: rgba(10, 6, 16, 0.62); color: #fff; }
.photo .link-muted { color: var(--m-muted); }

/* ---------- Info-Hinweis (kleines i mit Tooltip) – dunkel ---------- */
.info-hint { border-color: var(--m-gold); color: var(--m-gold-hi); }
.info-hint:focus { outline-color: var(--m-gold); }
.info-hint .info-bubble { background: var(--m-surface); color: var(--m-text); border-color: var(--m-line);
    box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.info-hint .info-bubble a { color: var(--m-gold-hi); }

/* ---------- Bestätigungs-Dialog (eigenes confirm) – dunkel ---------- */
.cfm-overlay { background: rgba(0,0,0,.6); }
.cfm-card { background: var(--m-surface); color: var(--m-text); border: 1px solid var(--m-line);
    box-shadow: 0 20px 60px rgba(0,0,0,.6); }