:root {
    --bg-base: #f6f5fb;
    --aurora-coral: #ff6b6b;
    --aurora-red: #e63946;
    /* Rot für kleine Schrift: --aurora-red erreicht als Textfarbe nur ~3:1 Kontrast (Minimum 4.5:1). */
    --accent-text: #b3202c;
    --aurora-violet: #8b7cf6;
    --aurora-blue: #2563eb;
    --badge-pending-bg: rgba(244, 162, 97, 0.2);
    --badge-pending-text: #5f2c06;
    --badge-category-bg: rgba(255, 107, 107, 0.16);
    --badge-category-text: #a8323a;
    --glass-fill: rgba(255, 255, 255, 0.55);
    --glass-fill-strong: rgba(255, 255, 255, 0.78);
    /* Tab-Leiste: eigener Token, im Dark Mode dunkel getoent - mit dem weisslichen
       --glass-fill-strong schienen die Aurora-Blobs so hell durch, dass selbst
       weisse Beschriftung unter 4.5:1 Kontrast fiel. */
    --tabbar-fill: rgba(255, 255, 255, 0.78);
    --modal-fill: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(255, 255, 255, 0.65);
    --glass-blur: blur(20px);
    --text-primary: #1b1b23;
    --text-muted: #44444f;
    --shadow-soft: 0 8px 30px rgba(27, 27, 35, 0.08);
    --shadow-lift: 0 16px 40px rgba(27, 27, 35, 0.16);
    --radius-card: 20px;
    --radius-pill: 999px;
    --nav-height: 68px;
    --tabbar-height: 74px;
    --max-width: 1200px;
}

/* Dark Mode: folgt zuerst der System-Einstellung, ein explizites
   data-theme (per Toggle gesetzt, siehe js/main.js) gewinnt in beide
   Richtungen. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-base: #15141f;
        --text-primary: #f2f1f7;
        --accent-text: #ff9aa0;
        --text-muted: #c6c4d4;
        --glass-fill: rgba(255, 255, 255, 0.08);
        --glass-fill-strong: rgba(255, 255, 255, 0.14);
        --tabbar-fill: rgba(21, 20, 31, 0.82);
        --modal-fill: rgba(30, 29, 43, 0.95);
        --glass-border: rgba(255, 255, 255, 0.16);
        --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.35);
        --shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.5);
        --badge-pending-bg: rgba(48, 28, 12, 0.78);
        --badge-pending-text: #ffb877;
        --badge-category-bg: rgba(255, 107, 107, 0.18);
        --badge-category-text: #ffb3b3;
    }
}

:root[data-theme="dark"] {
    --bg-base: #15141f;
    --text-primary: #f2f1f7;
    --accent-text: #ff9aa0;
    --text-muted: #c6c4d4;
    --glass-fill: rgba(255, 255, 255, 0.08);
    --glass-fill-strong: rgba(255, 255, 255, 0.14);
    --tabbar-fill: rgba(21, 20, 31, 0.82);
    --modal-fill: rgba(30, 29, 43, 0.95);
    --glass-border: rgba(255, 255, 255, 0.16);
    --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.35);
    --shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.5);
    --badge-pending-bg: rgba(48, 28, 12, 0.78);
    --badge-pending-text: #ffb877;
    --badge-category-bg: rgba(255, 107, 107, 0.18);
    --badge-category-text: #ffb3b3;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Globale Absicherung fuer das [hidden]-Attribut: Eine Autor-Regel mit
   eigenem "display" (z. B. .btn, .profile-layout, jede Flex-/Grid-Klasse)
   gewinnt sonst immer gegen die display:none-Regel des User-Agent-
   Stylesheets, egal wie spaet/spezifisch die eigene Regel ist - das hat in
   diesem Projekt schon mehrfach zu Elementen gefuehrt, die trotz
   `element.hidden = true` sichtbar blieben (siehe CLAUDE.md). !important
   ist hier bewusst die Ausnahme von der Regel "kein !important", weil es
   das einzige zuverlaessige Mittel ist, das JEDE aktuelle und kuenftige
   Autor-Regel schlaegt, ohne dass man bei jeder neuen Komponente wieder
   manuell eine Override-Regel ergaenzen muss. */
[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

/* Gleiche lokal gehostete Google Fonts wie home (Inter & Libre Baskerville) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../assets/fonts/inter-v20-latin-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/inter-v20-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../assets/fonts/inter-v20-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../assets/fonts/inter-v20-latin-800.woff2') format('woff2');
}

@font-face {
    font-family: 'Libre Baskerville';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/libre-baskerville-v24-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Libre Baskerville';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/libre-baskerville-v24-latin-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Libre Baskerville';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../assets/fonts/libre-baskerville-v24-latin-700.woff2') format('woff2');
}

body {
    font-family: 'Libre Baskerville', serif;
    color: var(--text-primary);
    background: var(--bg-base);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: var(--nav-height);
    padding-bottom: calc(var(--tabbar-height) + 16px);
}

@media (min-width: 768px) {
    body {
        padding-bottom: 0;
    }
}

body.modal-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

button {
    font-family: inherit;
}

/* --- AURORA BACKGROUND --- */
.aurora-blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
    animation: aurora-float 24s ease-in-out infinite;
}

.aurora-blob.coral {
    background: var(--aurora-coral);
    width: 320px;
    height: 320px;
    top: -60px;
    left: -80px;
}

.aurora-blob.blue {
    background: var(--aurora-blue);
    width: 380px;
    height: 380px;
    top: 25%;
    right: -140px;
    animation-delay: -8s;
}

.aurora-blob.violet {
    background: var(--aurora-violet);
    width: 300px;
    height: 300px;
    bottom: -100px;
    left: 15%;
    animation-delay: -16s;
}

@media (min-width: 768px) {
    .aurora-blob.coral { width: 520px; height: 520px; top: -120px; left: -140px; }
    .aurora-blob.blue { width: 600px; height: 600px; right: -220px; }
    .aurora-blob.violet { width: 480px; height: 480px; bottom: -160px; }
}

@keyframes aurora-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -40px) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .aurora-blob { animation: none; }
    html { scroll-behavior: auto; }
}

/* --- LAYOUT --- */
.section {
    padding: 48px 20px;
    max-width: var(--max-width);
    margin: 0 auto;
}

@media (min-width: 768px) {
    .section { padding: 56px 24px; }
}

.section-title {
    font-size: 1.8rem;
    font-weight: 800;
    text-align: center;
    letter-spacing: -0.02em;
    margin-bottom: 32px;
}

.accent {
    background: linear-gradient(135deg, var(--aurora-coral), var(--aurora-red));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.section-lead {
    text-align: center;
    color: var(--text-muted);
    max-width: 640px;
    margin: -16px auto 32px;
    font-size: 1rem;
}

@media (min-width: 768px) {
    .section-title { font-size: 2.6rem; margin-bottom: 20px; }
    .section-lead { margin-bottom: 48px; font-size: 1.1rem; }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}