/* Toolbox: gemeinsames Grundgerüst für Startseite, Zufall und Ich aber LinkedIn.
   Reihenfolge im <head>: toolbox.css, dann das seiteneigene <style>, dann darkmode.css. */
:root{
  --beere:#7d1d54; --beere-dark:#5e1540; --violett:#69227b; --nacht:#26285b;
  --text:#2D3748; --muted:#4A5568; --linie:#EDF2F7; --hell:#F7FAFC; --gelb:#f5a524; --zart:#F4ECF7;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; min-height:100vh; display:flex; justify-content:center;
  padding:3rem 1.25rem 2rem; font-family:var(--font); line-height:1.65; color:var(--text);
  background:
    radial-gradient(60rem 30rem at 15% -10%, rgba(125,29,84,.12), transparent 60%),
    radial-gradient(50rem 26rem at 95% 0%, rgba(105,34,123,.12), transparent 55%),
    var(--hell);
}
main{width:100%; text-align:center}
.zurueck{display:inline-block; margin-bottom:1.2rem; color:var(--beere); font-weight:600; text-decoration:none; font-size:.95rem}
h1{font-size:clamp(1.9rem,1.3rem+2.4vw,3rem); line-height:1.12; letter-spacing:-.015em; color:var(--nacht); margin:0 0 .4em}
h1 .akzent{background:linear-gradient(100deg,var(--beere) 10%,var(--violett) 90%); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size:clamp(1.05rem,1rem+.4vw,1.2rem); color:var(--muted); margin:0 auto 2rem; max-width:34rem}
.beta{display:inline-block; vertical-align:middle; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--nacht); background:var(--gelb); border-radius:99px; padding:.2rem .7rem; position:relative; top:-.2em}

/* Knöpfe (Zufall, LinkedIn); der Darkside-Schalter hat eigene Regeln in darkmode.css */
button{font:inherit; font-weight:700; font-size:1.05rem; padding:.8rem 1.5rem; border:0; border-radius:.6rem; color:#fff; cursor:pointer;
  background:linear-gradient(100deg,var(--beere) 10%,var(--violett) 90%)}
button:hover{background:var(--beere-dark)}

/* Kontaktkasten, Fuß */
.kontakt{background:var(--zart); border-radius:1rem; padding:1.1rem 1.5rem; color:var(--nacht)}
.kontakt p{margin:0} .kontakt p+p{margin-top:.5rem}
.kontakt a{color:var(--beere); font-weight:700}
footer{max-width:40rem; margin:2.5rem auto 0; padding-top:1.25rem; border-top:1px solid #dbe3ef; font-size:.9rem; color:var(--muted)}
footer p{margin:0}
footer a{color:var(--beere)}
footer nav{display:flex; gap:.4rem 1.5rem; justify-content:center; flex-wrap:wrap; margin-top:.3rem}

/* Wissenskasten (Fragen und Antworten) */
.wissen{text-align:left; max-width:56rem; margin:1.6rem auto; padding:1.2rem 1.4rem; border-radius:1rem; border:1px solid var(--linie); background:var(--hell); color:var(--text)}
.wissen h2{margin:.2rem 0 .5rem; font-size:1.3rem; color:var(--nacht)}
.wissen h3{margin:1rem 0 .2rem; font-size:1.02rem; color:var(--nacht)}
.wissen p{margin:.3rem 0}
.wissen a{color:var(--beere); font-weight:700}
html[data-theme="dunkel"] .wissen a{color:#ff8fb1}

/* Nur für Bildschirmleser */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.leise{font-weight:400; color:var(--muted)}

@media (prefers-reduced-motion:reduce){ *{transition-duration:.01ms !important; animation-duration:.01ms !important} }