/* KAFI FELD | MASTER STYLESHEET V 1.2 (NO ORANGE) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Condensed:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0');

:root {
    --primary: #26392f;        /* Tannengrün */
    --secondary: #83bca9;      /* Grüner Schimmer */
    --surface: #f6f8ff;        /* Phantom Weiss */
    --on-surface: #090d10;     /* Sattes Schwarz */
    --radius-xl: 24px;
    --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

body { background-color: var(--surface); color: var(--on-surface); font-family: 'Roboto', sans-serif; margin: 0; }

h1, h2, h3, .m3-title { font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; font-weight: 700; letter-spacing: 0.02em; }

/* Navigation Drawer (Tannengrün) */
.m3-drawer { position: fixed; top: 0; left: -320px; width: 300px; height: 100%; background: var(--primary); color: white; z-index: 4000; transition: left 0.4s var(--spring); padding: 2rem 1.5rem; display: flex; flex-direction: column; border-radius: 0 24px 24px 0; }
.m3-drawer.open { left: 0; }
.m3-overlay { position: fixed; inset: 0; background: rgba(9, 13, 16, 0.4); backdrop-filter: blur(4px); z-index: 3900; display: none; }
.m3-overlay.open { display: block; }

.nav-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; border-radius: 12px; text-decoration: none; color: rgba(255,255,255,0.7); font-weight: 700; transition: 0.2s; }
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,0.1); color: var(--secondary); }

.menu-trigger { position: fixed; top: 1.2rem; left: 1.2rem; z-index: 3000; background: white; width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid #EEE; cursor: pointer; }

/* Components */
.m3-card { background: white; border-radius: var(--radius-xl); padding: 2rem; border: 1px solid #e4e2d9; box-shadow: 0 4px 12px rgba(38, 57, 47, 0.05); }
.m3-input { background: #f0f2f5; border: 2px solid transparent; padding: 1rem; border-radius: 12px; width: 100%; font-weight: 600; outline: none; transition: 0.2s; }
.m3-input:focus { border-color: var(--secondary); background: white; }

.m3-btn-filled { background: var(--primary); color: white; padding: 1rem 2rem; border-radius: 12px; font-weight: 700; text-transform: uppercase; border: none; cursor: pointer; transition: 0.3s var(--spring); }
.m3-btn-filled:hover { background: #1a2921; transform: translateY(-2px); }