/* Katzenwelt -- helles, freundliches Design (09.10.2026). Basis ist magie.css, hier nur Farben. */
@import url('magie.css');

:root {
    --bg-deep: #f3ecf3; --bg-mid: #fbf7fa; --bg-glow: #fffaff;
    --panel: #fffdfe; --panel-2: #f8f0f6; --panel-3: #efdcea;
    --border: #cdb3c8; --border-soft: #e6d6e2;
    --gold: #a8679a; --gold-bright: #7a3f6e; --gold-pale: #552a4c;
    --ink: #2b1d0e; --parchment: #3a2a36; --muted: #6d5a68;
    --wine: #b5524a; --emerald: #4f7a3a;
    --shadow: 0 4px 14px rgba(110,70,100,0.18); --shadow-soft: 0 2px 6px rgba(110,70,100,0.15);
}
body {
    background-image:
        radial-gradient(ellipse 1200px 700px at 20% -10%, rgba(168,103,154,0.16) 0%, transparent 60%),
        radial-gradient(ellipse 1000px 800px at 100% 10%, rgba(222,170,120,0.14) 0%, transparent 55%),
        linear-gradient(180deg, #fbf7fa, #f3ecf3);
}
h1, h2, h3, h4, h5 { text-shadow: none; }
.brand-bar { background: linear-gradient(180deg, #efdcea, transparent); }
.game-header-banner {
    background: linear-gradient(90deg, #fbf7fa 0%, #fffdfe 55%, transparent 100%),
        url('Branding/banner.jpg') right center / auto 100% no-repeat;
}
.edelsteine { background: linear-gradient(160deg, #ecd6ea, var(--panel)); }
.freigehege { background: linear-gradient(160deg, #e2ecd8, var(--panel)); }
.forschung { background: linear-gradient(160deg, #f3d8e0, var(--panel)); }
.markt, .reaktoren { background: linear-gradient(160deg, #eadcf0, var(--panel)); }
.login-fehler { background: rgba(181,82,74,0.12); }
.login-feld { background: #ffffff; }
.lineA { background-color: #fffdfe; }
.lineB { background-color: #f8f0f6; }
.freigehege-aktiv { background-color: #e6efdc; color: #3a2a36; }
.freigehege-bereit { background-color: #f3dbee; color: #3a2a36; }
.freigehege-inaktiv .freigehege-thumb { filter: grayscale(1) brightness(1.05) opacity(0.6); }
.dino-popup-overlay, .pwv-overlay { background: rgba(60,40,20,0.45); }
.nav-zeile { border-bottom: 1px solid #e6d6e2; }
.navigation-aktiv { background: linear-gradient(180deg, #efdcea, #f8f0f6); color: #552a4c; }
.stat-zeile-link:hover { background: #efdcea; }
.forschung-balken { background: #e6d6e2; }
.game-sidebar .crest-wrap img { box-shadow: 0 0 0 3px var(--gold), var(--shadow); }
.button-normal { background: linear-gradient(180deg, #a8679a, #7d4672); color: #ffffff; border-color: #7d4672; }
.button-aktiv, .button-normal:hover, input[type="submit"]:hover, input[type="button"]:hover {
    background: linear-gradient(180deg, #bd7fb0, #a8679a); color: #ffffff; border-color: #7d4672; box-shadow: 0 4px 12px rgba(110,70,100,0.25);
}
input[type="text"], input[type="password"], input[type="email"], select, textarea { background: #ffffff; color: #3a2a36; }
input[type="text"]:focus, input[type="password"]:focus, select:focus, textarea:focus { box-shadow: 0 0 0 2px rgba(168,103,154,0.16); }
th { background: linear-gradient(180deg, #efdcea, #f8f0f6); }
.tab-btn { color: #3a2a36; }
.reaktor-bild.station-defekt, img[alt$="defekt"] { filter: grayscale(1) opacity(0.55); }