:root {
    --dark: #0F5E8C; --mid: #3E86B5; --light: #9DB7CF; --white: #fff; --cyan: #00f2ff;
    --line: 0 0 0 1px rgba(0,0,0,0.25);
}

/* --- GLOBALER BACKGROUND --- */
body { background: linear-gradient(135deg, var(--dark), var(--white)) fixed; min-height: 100vh; }
body::before, body::after { content: ""; position: fixed; transform: rotate(45deg); z-index: 0; border-radius: 40px; pointer-events: none; }
body::before { width: 600px; height: 600px; top: -150px; right: -150px; background: var(--light); opacity: .15; }
body::after { width: 400px; height: 400px; bottom: -100px; left: -100px; background: var(--white); opacity: .08; border: 5px solid black; }

/* Millimeter-Papier (Klasse .mm am Body) */
body.mm::after {
    content: ""; position: fixed; inset: 0; z-index: -1; transform: none; border: none; opacity: 1; border-radius: 0;
    background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* --- BOX DESIGNS --- */
.gs {
    border-radius: 20px; padding: 40px; position: relative; overflow: hidden;
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    box-shadow: var(--line); z-index: 1; height: 100%; display: flex; flex-direction: column;
}

.std  { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); }
.blue { background: rgba(15,94,140,0.6); border: 1px solid #9DB7CF; background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 20px 20px; }
.dark { background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.1); }
.neon { border: 1px solid var(--cyan); box-shadow: 0 0 15px rgba(0,242,255,0.2), var(--line); }
.edge { border-left: 10px solid #fff; background: rgba(255,255,255,0.1); border-radius: 4px; }
.dots { background-image: radial-gradient(rgba(255,255,255,0.2) 1px, transparent 1px); background-size: 15px 15px; background-color: rgba(15,94,140,0.3); }
.lite { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); }
.flow { background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(0,242,255,0.1)); }
.hard { background: #fff; color: #000; border: 3px solid #000; box-shadow: 8px 8px 0 var(--cyan); }

.scan { background: rgba(0,0,0,0.4); border: 1px solid #3E86B5; }
.scan::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.2) 50%); background-size: 100% 4px;
}

/* --- BUTTONS --- */
.btn { padding: 12px 25px; border-radius: 10px; text-decoration: none; font-weight: 600; display: inline-block; box-shadow: var(--line); margin-top: auto; align-self: flex-start; }
.b-p { background: #fff; color: #0F5E8C; }
.b-g { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; }