/* Kirchen Costum: gemeinsames Aussehen der Unterseiten (beta, staff, skillchanges ...).
   Die Farbwerte sind dieselben wie auf der Startseite; dort stehen sie an .mf-root, hier an :root,
   damit sie fuer ganze Seiten gelten. Umgeschaltet wird ueber data-theme am <html>-Element,
   gespeichert in localStorage "mf-appearance" - dieselbe Einstellung wie auf der Startseite. */

:root {
  --bg: #0b1020; --bg-solid: #0b1020; --bg2: #0e1528;
  --card: linear-gradient(180deg, rgba(30,41,70,.82), rgba(17,24,43,.82));
  --card-solid: #151d33;
  --card2: linear-gradient(180deg, rgba(40,54,92,.88), rgba(22,31,56,.88));
  --card2-solid: #1a2440;
  --inset: rgba(6,10,22,.55);
  --line: rgba(150,180,240,.16); --line2: rgba(150,180,240,.28); --line3: rgba(150,180,240,.12);
  --text: #ece6d6; --text2: #c9cfdd; --muted: #a3adc4;
  --head: #f3e3b3; --gold: #e8c25a; --gold-bg: #e8c25a; --gold-ink: #1a1408;
  --foot: #070a14; --sky: #8fd0ff;
  --shadow: 0 12px 30px rgba(0,0,0,.35); --glow: rgba(143,208,255,.10); --deep: #22305a;
  --ok: #5fd38a; --bad: #ff8a7a;
  --navbar: linear-gradient(180deg, rgba(20,34,66,.95), rgba(12,20,40,.95));
  --navline: rgba(232,194,90,.35);
  --veil: radial-gradient(ellipse at 50% 0%, rgba(34,48,90,.62) 0%, rgba(13,17,28,.80) 60%);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #eaf1f7; --bg-solid: #eaf1f7; --bg2: #dde7f1;
  --card: linear-gradient(180deg, rgba(255,255,255,.95), rgba(245,249,253,.9));
  --card-solid: #ffffff;
  --card2: linear-gradient(180deg, #ffffff, #f3f7fc);
  --card2-solid: #f7fafd;
  --inset: #eef3f9;
  --line: rgba(30,60,110,.14); --line2: rgba(30,60,110,.26); --line3: rgba(30,60,110,.12);
  --text: #1b2333; --text2: #2e394d; --muted: #56627a;
  --head: #6e4f0e; --gold: #8a6216; --gold-bg: #d9a93e; --gold-ink: #1a1408;
  --foot: #dbe5f0;
  --shadow: 0 10px 26px rgba(30,60,110,.12); --glow: rgba(70,140,220,.10); --deep: #c4d8ef;
  --ok: #1d8a4e; --bad: #b3331f;
  --navbar: linear-gradient(180deg, #ffffff, #eef4fa);
  --navline: rgba(138,98,22,.45);
  --veil: radial-gradient(ellipse at 50% 0%, rgba(234,241,247,.70) 0%, rgba(221,231,241,.90) 60%);
  color-scheme: light;
}

/* Der Seitenhintergrund gehoert an <html>. Der body bleibt ausdruecklich durchsichtig:
   das Hintergrundvideo liegt auf z-index -1, ein eigener Hintergrund am body wuerde es
   verdecken (genau das war der Grund, warum beta.html den Hintergrund verloren hatte). */
html { background: var(--bg); transition: background-color .35s }
body { background: transparent; color: var(--text); transition: color .35s }

/* Hintergrundvideo und der Schleier darueber, der den Text lesbar haelt */
.mf-vbg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); pointer-events: none }
.mf-vbg video { width: 100%; height: 100%; object-fit: cover }

/* ---------- Einleitungstext auf dem Hintergrundvideo ----------
   Der Text stand ohne alles auf dem Video; auf dem hellen Pflaster der Szene war er kaum
   zu lesen. Er bekommt darum dieselbe Karte wie die Kaesten darunter - nur breit und flach
   statt hoch, damit er den Blick auf die Szene nicht zustellt. Die Karte deckt ab, also
   bleibt die Schrift hell und Ambience aendert an der Lesbarkeit nichts mehr. */
.mf-hero-copy {
  max-width: none; width: 100%; box-sizing: border-box;
  padding: 26px 36px;
  background: var(--card-solid); border: 1px solid var(--line2); border-radius: 12px;
  box-shadow: var(--shadow);
}
.mf-hero-copy p { color: var(--text2) }
@media (max-width: 760px) { .mf-hero-copy { padding: 20px 18px } }

/* ---------- Kopfleiste ----------
   Eins zu eins die Kopfleiste der Startseite (index.html). Die Werte sind bewusst
   fest und nicht ueber Variablen geloest: die Leiste ist auf der Startseite in
   beiden Themen dieselbe dunkle Glasleiste, und die Unterseiten sollen genauso
   aussehen. Einziger Unterschied zur Startseite: dort zieht ein negativer
   margin-bottom die Leiste ueber den Hero, den es hier nicht gibt. */
.mf-header{position:sticky;top:0;z-index:30;pointer-events:none}
.mf-nav{pointer-events:auto;min-height:66px;display:flex;flex-wrap:nowrap;align-items:center;gap:6px 18px;padding:0 18px 0 8px;background:linear-gradient(180deg,rgba(8,12,26,.82),rgba(8,12,26,.62));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(232,194,90,.28);box-shadow:0 8px 24px rgba(0,0,0,.35);font-family:'Source Sans 3',system-ui,sans-serif}
.mf-nav-logo{display:block;margin:-6px 0 -30px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));transition:transform .25s}
.mf-nav-logo:hover{transform:scale(1.04)}
.mf-nav-logo img{display:block;width:104px;height:84px}
.mf-nav-links{display:flex;flex-wrap:nowrap;align-items:center;gap:4px 16px;flex:1 1 auto;min-width:0;justify-content:center}
.mf-nav-links a{position:relative;color:#e4e9f4;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;padding:8px 0;text-decoration:none}
.mf-nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#e8c25a,transparent);transform:scaleX(0);transition:transform .25s}
.mf-nav-links a:hover{color:#fff}.mf-nav-links a:hover::after{transform:scaleX(1)}
.mf-nav-links a.mf-nav-hl{color:#e8c25a}
.mf-nav-links a[aria-current="page"]{color:#e8c25a}
.mf-nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.mf-nav-right{display:flex;align-items:center;gap:12px;white-space:nowrap}
.mf-clock{display:none;align-items:center;gap:7px;padding:6px 12px;border:1px solid rgba(150,180,240,.22);border-radius:999px;background:rgba(0,0,0,.25);color:#e4e9f4;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.mf-clock-ico{display:flex;color:#e8c25a}
.mf-online{width:9px;height:9px;border-radius:50%;background:#5fd38a;box-shadow:0 0 8px #5fd38a}
.mf-online.off{background:#ff8a7a;box-shadow:0 0 8px #ff8a7a}
.mf-icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;border:1px solid rgba(150,180,240,.25);background:rgba(0,0,0,.25);color:#e4e9f4;cursor:pointer;transition:color .2s,border-color .2s,transform .3s}
.mf-icon-btn:hover,.mf-icon-btn[aria-expanded="true"]{color:#e8c25a;border-color:rgba(232,194,90,.6)}
.mf-icon-btn[aria-expanded="true"] svg{transform:rotate(60deg)}.mf-icon-btn svg{transition:transform .4s}
.mf-login{display:inline-flex;align-items:center;gap:7px;padding:9px 4px;color:#ece6d6;font-weight:700;font-size:14px;letter-spacing:.04em;text-decoration:none}
.mf-register{padding:9px 16px;border:1px solid #e8c25a;border-radius:9px;color:#f3e3b3;font-weight:700;font-size:14px;background:rgba(232,194,90,.1);transition:background .2s;text-decoration:none}
.mf-register:hover{background:rgba(232,194,90,.22);color:#fff}

/* ---------- Einstellungen ---------- */
.mf-settings{pointer-events:auto;position:absolute;right:16px;top:76px;width:min(360px,calc(100vw - 32px));box-sizing:border-box;padding:16px 18px;display:flex;flex-direction:column;gap:14px;background:linear-gradient(180deg,rgba(14,20,38,.95),rgba(10,15,30,.95));backdrop-filter:blur(12px);border:1px solid rgba(232,194,90,.3);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.5);color:#e4e9f4;font-size:14px;font-family:'Source Sans 3',system-ui,sans-serif}
.mf-settings[hidden]{display:none}
.mf-set-row{display:flex;flex-direction:column;gap:8px}
.mf-set-label{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9fb0cf}
.mf-segs{display:flex;gap:6px;flex-wrap:wrap}
.mf-seg{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 10px;border-radius:9px;border:1px solid rgba(150,180,240,.22);background:rgba(255,255,255,.04);color:#dbe3f2;font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.mf-seg:hover{border-color:rgba(232,194,90,.5)}
.mf-seg[aria-pressed="true"]{background:linear-gradient(180deg,#f6dc92,#d9a93e);border-color:#e8c25a;color:#1a1408}
.mf-switch{position:relative;width:46px;height:26px;flex:0 0 auto;border-radius:999px;border:1px solid rgba(150,180,240,.3);background:rgba(255,255,255,.08);cursor:pointer;padding:0}
.mf-switch span{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#c9d3e6;transition:transform .2s,background .2s}
.mf-switch[aria-pressed="true"]{background:rgba(232,194,90,.35);border-color:#e8c25a}
.mf-switch[aria-pressed="true"] span{transform:translateX(20px);background:#f6dc92}
.mf-range{flex:1 1 auto;accent-color:#e8c25a;min-width:0}
.mf-amb{display:flex;align-items:center;gap:12px}
.mf-amb-val{min-width:40px;text-align:right;font-variant-numeric:tabular-nums}

/* Nur-Einstellungen-Einhaengung (Control Panel): dort gibt es eine eigene Kopfleiste,
   uebernommen wird nur das Zahnrad samt Klappfeld. */
.mf-settings-only{position:relative;flex:none}
.mf-settings-only .mf-settings{right:0;top:46px}

.mf-header :focus-visible,.mf-settings :focus-visible{outline:2px solid #e8c25a;outline-offset:2px}

@media (min-width:1600px){.mf-clock{display:inline-flex}}
@media (max-width:1439px){.mf-nav{gap:6px 10px;padding-left:4px}.mf-nav-logo img{width:88px;height:auto}.mf-login{font-size:13px}.mf-register{padding:8px 12px;font-size:13px}.mf-nav-links{gap:4px 12px}.mf-nav-links a{font-size:11.5px;letter-spacing:.03em}.mf-nav-right{gap:9px}}
@media (max-width:1240px){.mf-nav-links{flex-wrap:wrap}.mf-nav{flex-wrap:wrap;justify-content:center;padding:6px 12px}.mf-nav-logo{margin:-4px 0 -10px}}
@media (max-width:760px){.mf-nav{padding:6px 12px}.mf-nav-logo{margin:-4px 0 -14px}.mf-nav-logo img{width:80px;height:auto}}
@media (prefers-reduced-motion:reduce){body,.mf-seg,.mf-nav-logo,.mf-nav-links a::after{transition:none}}