/* felix-kroeger.eu im Glut-Look (Webseiten-Runde 05.10.2026, Entwurf 1 „Glut“): warme Kugel, Empfang darunter.
   Nur eigene Dateien – keine fremden Schriften, keine fremden Server. */
@font-face{font-family:'Manrope';src:url(manrope.woff2) format('woff2');font-weight:300 800;font-display:swap}
:root{color-scheme:dark;--bg:#0c0806;--bg2:#1c0f09;--panel:#1d110bd9;--line:#ffd6b42e;--text:#f6ebdf;--soft:#dcc6b6;--muted:#b09a88;
 --accent:#ffb45c;--accent2:#ff6b3d;--on-accent:#1a0d06;--orb1:#fff4e2;--orb2:#ffb45c;--orb3:#ff6b3d;--glow:#ff8a3d66;--glow2:#ff6b3d26;
 --me:#ffb45c1f;--ok:#7bd88f;--bad:#ff9a8a}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 70% -10%,var(--bg2) 0%,var(--bg) 60%) fixed,var(--bg);color:var(--text);
 font-family:'Manrope',system-ui,'Segoe UI',sans-serif;line-height:1.55;-webkit-text-size-adjust:100%}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--accent)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.springen{position:absolute;left:-10000px;top:8px;padding:8px 14px;border-radius:10px;background:var(--accent);color:var(--on-accent);font-weight:700;z-index:10}
.springen:focus{left:12px}

/* the head */
.kopf{display:flex;align-items:center;gap:16px;padding:18px 24px;max-width:1100px;margin:0 auto}
.marke{font-weight:800;font-size:19px;color:var(--text);text-decoration:none;letter-spacing:.01em}
.kopf nav{display:flex;gap:18px;margin-left:auto}
.kopf nav a{color:var(--soft);text-decoration:none;font-size:14.5px;font-weight:600}
.kopf nav a:hover{color:var(--accent)}
.sprache{border:1px solid var(--line);color:var(--soft);border-radius:999px;padding:4px 11px;font-size:13px;font-weight:700;text-decoration:none}
.sprache:hover{color:var(--accent);border-color:var(--accent)}
main{max-width:1100px;margin:0 auto;padding:10px 24px 40px}

/* the stage: the sphere above, the introduction, the reception below */
.buehne{display:grid;gap:22px;justify-items:center;text-align:center;padding:16px 0 34px}
.kugelplatz{display:grid;place-items:center;min-height:200px}
.kugel{width:min(220px,46vw);aspect-ratio:1;border-radius:50%;
 background:radial-gradient(circle at 36% 30%,var(--orb1),var(--orb2) 32%,var(--orb3) 64%,transparent 71%);
 box-shadow:0 0 70px var(--glow),0 0 160px var(--glow2);animation:atmen 4.6s ease-in-out infinite}
@keyframes atmen{50%{transform:scale(1.045);filter:brightness(1.08)}}
.willkommen{margin:0;color:var(--accent);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12.5px}
h1{margin:6px 0 6px;font-size:clamp(34px,6vw,54px);line-height:1.05;letter-spacing:-.01em}
.rolle{margin:0 auto 14px;color:var(--soft);font-size:17px;max-width:46ch}
.status{display:inline-flex;align-items:center;gap:9px;margin:0;padding:7px 14px;border-radius:999px;border:1px solid var(--line);
 background:var(--panel);font-size:14px;color:var(--soft);max-width:100%;text-align:left}
.status i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.status.weg i{background:var(--accent);box-shadow:0 0 10px var(--accent)}

/* the reception */
.empfang{width:100%;max-width:640px;border:1px solid var(--line);background:var(--panel);border-radius:24px;padding:16px 16px 12px;
 text-align:left;box-shadow:0 18px 50px #00000033}
.empfangkopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.empfangkopf h2{margin:0;font-size:15.5px;letter-spacing:.06em}
.empfangkopf small{color:var(--muted);font-size:13px}
.minikugel{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 36% 30%,var(--orb1),var(--orb2) 34%,var(--orb3) 70%);
 box-shadow:0 0 14px var(--glow)}
.anhoeren{margin-left:auto;border:1px solid var(--line);background:transparent;border-radius:999px;padding:5px 11px;cursor:pointer;font-size:13px;color:var(--soft)}
.anhoeren:hover{border-color:var(--accent);color:var(--accent)}
.verlauf{display:flex;flex-direction:column;gap:8px;margin:12px 0 10px;max-height:340px;overflow:auto;padding-right:4px;overscroll-behavior:contain}
.verlauf:has(form.mini){max-height:min(86vh,760px)}
.nachricht{max-width:88%;padding:10px 13px;border-radius:16px;font-size:15px;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere;animation:auf .25s ease-out}
.nachricht.p{align-self:flex-start;background:var(--me);border:1px solid var(--line);border-bottom-left-radius:6px}
.nachricht.u{align-self:flex-end;background:var(--accent);color:var(--on-accent);border-bottom-right-radius:6px;font-weight:600}
.nachricht.notiz{align-self:center;max-width:100%;font-size:12.5px;color:var(--muted);background:transparent;padding:2px 6px}
.nachricht.fehler{align-self:center;max-width:100%;font-size:13px;color:var(--bad);background:transparent;padding:2px 6px}
.tippen{align-self:flex-start;color:var(--muted);font-size:20px;letter-spacing:3px;padding:0 10px}
.tippen span{animation:punkt 1.2s infinite}.tippen span:nth-child(2){animation-delay:.2s}.tippen span:nth-child(3){animation-delay:.4s}
@keyframes punkt{50%{opacity:.25}}
@keyframes auf{from{opacity:0;transform:translateY(4px)}}
.schnell,.zeiten,.vorschlag{display:flex;flex-wrap:wrap;gap:7px}
.schnell{margin-bottom:10px}
.schnell button,.zeiten button,.vorschlag button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:8px 13px;cursor:pointer;
 font-size:14px;font-weight:600}
.schnell button:hover,.zeiten button:hover,.vorschlag button:hover{border-color:var(--accent);color:var(--accent)}
.frage{display:flex;gap:8px}
.frage input,.mini input,.mini textarea,.mini select,.code input{flex:1;min-width:0;border:1px solid var(--line);background:#00000026;border-radius:14px;
 padding:11px 13px;font-size:16px}
.frage button,.mini .senden,.code button,.knopf{border:0;background:var(--accent);color:var(--on-accent);border-radius:14px;padding:0 16px;
 min-height:44px;font-weight:700;cursor:pointer}
.frage button:disabled,.mini .senden:disabled{opacity:.55;cursor:default}
.fein{margin:9px 2px 0;color:var(--muted);font-size:12.5px}
.mini{display:grid;gap:8px;align-self:stretch;padding:12px;border:1px dashed var(--line);border-radius:16px}
.mini label{font-size:13px;color:var(--soft);display:grid;gap:4px}
.mini label.haken{display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.mini label.haken input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent)}
.mini textarea{resize:vertical;min-height:84px}
.mini .reihe{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mini .senden{padding:10px 16px}
.mini .zurueck{border:1px solid var(--line);background:transparent;border-radius:14px;min-height:44px;padding:0 14px;cursor:pointer}
.mini small{color:var(--muted)}
.mini .meldung{color:var(--bad);font-size:13px;min-height:1em;margin:0}
.falle{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}

/* the cards */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.karten article{border:1px solid var(--line);background:var(--panel);border-radius:20px;padding:16px 18px;min-width:0;scroll-margin-top:16px}
.karten h2{margin:0 0 6px;font-size:17px}
.karten p{margin:0 0 8px;color:var(--soft);font-size:14.5px;line-height:1.55;overflow-wrap:anywhere}
.karten .leer{color:var(--muted);font-style:italic}
.karten .klein{color:var(--muted);font-size:13px}
.karten a{font-weight:700;text-decoration:none}
.knopf{padding:0 16px}
.code{display:flex;gap:7px;margin-top:4px}
.hinweis{min-height:1em;margin:6px 0 0;font-size:13.5px;color:var(--muted)}
.hinweis.schlecht{color:var(--bad)}
.geheim{margin-top:10px;display:grid;gap:8px}
.geheim section{padding:10px 12px;border-radius:14px;background:var(--me);border:1px solid var(--line)}
.geheim h3{margin:0 0 4px;font-size:15px}
.geheim p{margin:0;white-space:pre-line}
.geheim .zu{justify-self:start;border:1px solid var(--line);background:transparent;border-radius:999px;padding:6px 12px;cursor:pointer;font-size:13px}

/* the foot */
.fuss{max-width:1100px;margin:0 auto;padding:18px 24px 30px;color:var(--muted);font-size:13px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fuss a{color:var(--soft)}

/* Impressum and Datenschutz */
.recht{max-width:760px;margin:0 auto;padding:6px 24px 50px}
.recht h1{font-size:clamp(28px,5vw,40px);margin:10px 0 14px}
.recht h2{font-size:19px;margin:26px 0 6px}
.recht h3{font-size:16px;margin:18px 0 4px}
.recht p,.recht li{color:var(--soft);font-size:15px}
.recht ul{padding-left:20px}
.recht .stand{color:var(--muted);font-size:13px;margin-top:28px}
.recht .kasten{padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}
.recht address{font-style:normal;color:var(--text)}

@media (max-width:760px){
 .kopf{padding:14px 16px}.kopf nav{display:none}.kopf .sprache{margin-left:auto}
 main{padding:6px 16px 30px}
 .recht{padding:6px 16px 40px}
 .fuss{padding:16px 16px 26px}
 .nachricht{max-width:94%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.kugel,.nachricht,.tippen span{animation:none!important}}
@media (forced-colors:active){.kugel,.minikugel{forced-color-adjust:none}}