:root{
    --bg: #0b1220;           /* deep navy */
    --card: #0f172aee;       /* slate / translucent */
    --muted: #9fb0c6;
    --text: #e8eef7;
    --accent: #22d3ee;       /* cyan */
    --accent-2: #60a5fa;     /* blue */
    --warning: #fbbf24;      /* amber */
    --success: #34d399;      /* green */
    --danger: #fb7185;       /* rose */
    --ring: 0 0 0 3px rgba(34,211,238,.35);
    --radius: 18px;
    --shadow: 0 10px 30px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.2);
    --glass: rgba(15, 23, 42, .72);
}
    :root{ --bg:#eef2ff; --card:#ffffffee; --text:#0f172a; --muted:#334155; --glass:#ffffffc7 }


*{ box-sizing: border-box }
html,body{ height:100% }
body{
    margin:0; font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
    color:var(--text); background: radial-gradient(1000px 700px at 10% 10%, #12213d 0%, transparent 60%),
radial-gradient(800px 600px at 90% 10%, #0a2a3c 0%, transparent 60%),
radial-gradient(1000px 600px at 50% 100%, #0b2447 0%, transparent 60%),
var(--bg);
    display:grid; place-items:center; padding: 32px;
    overflow:auto;
}
.container{ width:100%; max-width: 980px; display:grid; gap:24px }

.brand{ display:flex; align-items:center; gap:14px; justify-content:center; color:var(--text); opacity:.95 }
.logo{ width:40px; height:40px; display:inline-grid; place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent-2));
    border-radius:12px; box-shadow: var(--shadow) }
.logo svg{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)) }
.brand h1{ font-size: clamp(22px, 4vw, 32px); margin:0; letter-spacing:.2px }
.brand small{ color:var(--muted) }

.info{padding: 18px; margin-left: 18px; margin-right: 18px; text-align: center; border: 1px solid #34d399;}
.info a{ text-decoration: none; font-weight: bold; color: black;}

.card{ background: var(--glass); backdrop-filter: blur(10px); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden }
.card .hero{
    padding: 28px 28px 18px; position:relative;
}
.hero h2{ margin:0 0 6px; font-weight:700; font-size: clamp(20px, 3.2vw, 26px) }
.hero p{ margin:0; color:var(--muted); font-size: 15px }

.grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 16px; padding: 18px; }
@media(max-width: 860px){ .grid{ grid-template-columns: 1fr } }

.panel{ background: color-mix(in oklab, var(--card) 86%, transparent); border:1px solid rgba(255,255,255,.06);
    border-radius: calc(var(--radius) - 8px); padding: 18px; }

.form-row{ display:grid; gap:10px; margin-bottom: 14px }
.hint{ font-size: 12px; color: var(--muted) }
input[type="text"], input[type="email"]{
    width:100%; padding: 12px 14px; border-radius: 12px; border:1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06); color:var(--text);
    outline:none; transition: box-shadow .2s, border-color .2s;
}
input::placeholder{ color: color-mix(in oklab, var(--muted) 70%, transparent) }

.checkbox{ display:flex; align-items:center; gap:10px; font-size: 14px; color: var(--muted) }

.btns{ display:grid; gap:10px; grid-template-columns: 1fr 1fr }
@media(max-width: 480px){ .btns{ grid-template-columns: 1fr } }

.btn{ appearance:none; border:0; padding: 12px 14px; border-radius: 12px; font-weight: 700; cursor:pointer;
    background: rgb(41, 57, 93); color:#ffffff; text-align:center; text-decoration: none}
.btn:hover{ filter: brightness(1.06) }
.btn.secondary{ background: rgba(255,255,255,.08); color: var(--text); border:1px solid rgba(255,255,255,.12) }
.btn.ghost{ background: transparent; color: var(--text); border:1px dashed rgba(255,255,255,.2) }

.divider{ height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); margin:14px 0 }

.pill{ display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius: 999px; font-size:12px;
    border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06) }
.pill.ok{ border-color: color-mix(in oklab, var(--success) 50%, transparent); }
.pill.warn{ border-color: color-mix(in oklab, var(--warning) 55%, transparent); }

.footer{ display:flex; justify-content:space-between; gap:8px; padding: 0 18px 18px; color: var(--muted); font-size: 12px }
.links{ display:flex; gap:12px; flex-wrap: wrap }
.links a{ color:inherit; text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.25) }

.langs{ display:flex; gap:6px; flex-wrap: wrap }
.lang{ padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.16); cursor:pointer }

/* Demo-only toast */
.toast{ position:fixed; bottom:20px; right:20px; background:#111827ee; color:#e5e7eb; padding:10px 12px; border-radius: 10px; box-shadow: var(--shadow); opacity:0; transform: translateY(8px); pointer-events:none }
.toast.show{ opacity:1; transform:none; transition: .15s ease-out }

ul.preis_bueschel {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.preis_bueschel li {
    line-height: 2.5em;
    vertical-align: middle;
    padding: 0.3em;
    border: 1px solid;
    border-radius: 10px;
    margin-bottom: 1em;
}
ul.preis_bueschel li *{
    cursor:pointer;
}

ul.preis_bueschel li input {
    margin-top: 0;
    padding: 0;
}

ul.preis_bueschel label {margin-left: 0.3em;width: 85%;display: inline-block;font-weight: 600;}

span.preis {
    float: right;
    font-size: 14px;
    font-weight: 400;
}
#logo img{
    max-width: 160px;
}