/* ============================================================
   Foto Mapper — Basis-Stile
   Reset, Typografie, Farb-Variablen (Dunkel + Hell)
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Hintergrund-Glanz für Liquid-Glass-Atmosphäre */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background: var(--bg);
}
body::after {
    content: '';
    position: fixed;
    inset: -20%;
    z-index: -1;
    background:
        radial-gradient(60% 50% at 15% 20%, var(--glow-1), transparent 60%),
        radial-gradient(50% 50% at 85% 80%, var(--glow-2), transparent 60%),
        radial-gradient(40% 40% at 70% 30%, var(--glow-3), transparent 60%);
    filter: blur(40px);
    opacity: 0.7;
    pointer-events: none;
}

/* ----- Theme: Dunkel (Default) ----- */
:root,
[data-theme="dunkel"] {
    --bg:           #0b0d14;
    --bg-erhoben:   #11141d;
    --text:         #f7f9fd;
    --text-dezent:  #ced3e2;
    --text-stumm:   #a8b0c5;
    --rand:         rgba(255,255,255,0.16);
    --rand-stark:   rgba(255,255,255,0.28);
    --glas-bg:      rgba(22,26,38,0.55);
    --glas-bg-stark:rgba(28,32,46,0.72);
    --glas-rand:    rgba(255,255,255,0.10);
    --glas-glanz:   rgba(255,255,255,0.06);
    --primaer:      #6aa6ff;
    --primaer-hover:#85b7ff;
    --primaer-text: #0b0d14;
    --erfolg:       #4ade80;
    --warn:         #fbbf24;
    --gefahr:       #f87171;
    --info:         #60a5fa;
    --glow-1:       rgba(106,166,255,0.35);
    --glow-2:       rgba(178,106,255,0.30);
    --glow-3:       rgba(74,222,128,0.18);
    --schatten-sm:  0 1px 2px rgba(0,0,0,0.4);
    --schatten-md:  0 8px 24px rgba(0,0,0,0.45);
    --schatten-lg:  0 20px 60px rgba(0,0,0,0.55);
    --radius-sm:    8px;
    --radius:       14px;
    --radius-lg:    20px;
    --radius-xl:    28px;
    --uebergang:    180ms cubic-bezier(.2,.7,.2,1);
}

/* ----- Theme: Hell ----- */
[data-theme="hell"] {
    --bg:           #eef1f7;
    --bg-erhoben:   #ffffff;
    --text:         #0f1320;
    --text-dezent:  #4a5169;
    --text-stumm:   #7a8198;
    --rand:         rgba(15,19,32,0.08);
    --rand-stark:   rgba(15,19,32,0.16);
    --glas-bg:      rgba(255,255,255,0.55);
    --glas-bg-stark:rgba(255,255,255,0.78);
    --glas-rand:    rgba(255,255,255,0.65);
    --glas-glanz:   rgba(255,255,255,0.85);
    --primaer:      #3b6dff;
    --primaer-hover:#5a83ff;
    --primaer-text: #ffffff;
    --erfolg:       #10b981;
    --warn:         #d97706;
    --gefahr:       #dc2626;
    --info:         #2563eb;
    --glow-1:       rgba(59,109,255,0.20);
    --glow-2:       rgba(168,85,247,0.18);
    --glow-3:       rgba(16,185,129,0.14);
    --schatten-sm:  0 1px 2px rgba(15,19,32,0.08);
    --schatten-md:  0 8px 24px rgba(15,19,32,0.10);
    --schatten-lg:  0 20px 60px rgba(15,19,32,0.14);
}

/* ----- Typografie ----- */
h1,h2,h3,h4,h5,h6 { margin: 0 0 0.5em; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: 2rem; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 1em; }
small { color: var(--text-dezent); }
a { color: var(--primaer); text-decoration: none; transition: color var(--uebergang); }
a:hover { color: var(--primaer-hover); }
code, kbd, samp { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
code { background: var(--glas-bg); border: 1px solid var(--rand); padding: 0.1em 0.4em; border-radius: 6px; }
hr { border: 0; border-top: 1px solid var(--rand); margin: 1.5rem 0; }

/* ----- Container ----- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.container-eng { max-width: 720px; margin: 0 auto; padding: 0 1.25rem; }

/* ----- Helfer ----- */
.dezent { color: var(--text-dezent); }
.stumm  { color: var(--text-stumm); }
.zentriert { text-align: center; }
.rechts    { text-align: right; }
.flex      { display: flex; }
.flex-spalte { display: flex; flex-direction: column; }
.zwischen  { justify-content: space-between; }
.mitte     { align-items: center; }
.luecke-xs { gap: 0.25rem; }
.luecke-sm { gap: 0.5rem; }
.luecke    { gap: 1rem; }
.luecke-lg { gap: 1.5rem; }
.mt-sm { margin-top: 0.5rem; } .mt { margin-top: 1rem; } .mt-lg { margin-top: 2rem; }
.mb-sm { margin-bottom: 0.5rem; } .mb { margin-bottom: 1rem; } .mb-lg { margin-bottom: 2rem; }
.versteckt { display: none !important; }
.nur-screenreader {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ----- Fokus-Ringe (Tastatur) ----- */
:focus-visible {
    outline: 2px solid var(--primaer);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ----- Scrollbars ----- */
* { scrollbar-width: thin; scrollbar-color: var(--rand-stark) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--rand-stark); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-stumm); }