/* BaerImBild – Visitenkarte. Farben aus der alten Seite. */
:root{
  --bg:#0e1211; --fg:#e8efe9; --muted:#a9b8ae; --accent:#9bb59f;
  --card:#131a17; --border:#26302a;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  min-height:100vh;
}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid #3a4a40}
a:hover{border-bottom-color:var(--accent)}

/* dezentes Sternenfeld */
.sky{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.s{position:absolute; inset:-20%}
.s1{background-image:radial-gradient(1px 1px at 20px 30px,#ffffff55 50%,transparent 51%),radial-gradient(1px 1px at 130px 90px,#ffffff44 50%,transparent 51%);background-size:200px 200px;animation:drift 60s linear infinite}
.s2{background-image:radial-gradient(1.6px 1.6px at 70px 40px,#ffffff66 50%,transparent 51%),radial-gradient(1.4px 1.4px at 190px 150px,#ffffff44 50%,transparent 51%);background-size:300px 300px;animation:drift 90s linear infinite reverse;opacity:.6}
@keyframes drift{to{transform:translate3d(-200px,-100px,0)}}
@media (prefers-reduced-motion:reduce){.s{animation:none}}

.wrap{max-width:900px; margin:0 auto; padding:2rem 16px 2rem}
.brand{display:flex; align-items:center; gap:.8rem; margin-bottom:1rem}
.logo{width:48px; height:48px}
.brandname{font-weight:700; font-size:1.15rem; letter-spacing:.01em}
.sub{color:var(--muted); font-size:.92rem}

/* Hero: Text links, freigestelltes Porträt rechts, unten weich auslaufend */
.hero{display:grid; grid-template-columns:1fr 320px; gap:1rem; align-items:end; margin:1.5rem 0 1rem; min-height:300px}
.hero-text{padding-bottom:1.5rem}
h1{margin:0 0 .8rem; font-size:2.4rem; line-height:1.15; letter-spacing:-.01em}
.lead{font-size:1.1rem; margin:0 0 1.2rem; color:var(--fg)}
.name{margin:0 0 1rem; font-weight:600}
.name span{font-weight:400; color:var(--muted)}
.btn{display:inline-block; padding:.5rem .95rem; border:1px solid var(--accent); border-radius:999px; background:none; color:var(--accent); font:inherit; cursor:pointer}
.btn:hover{background:#9bb59f1a}
.portrait-wrap{position:relative; justify-self:end; width:100%; max-width:320px}
.portrait-wrap::before{content:""; position:absolute; inset:0 -15% -10%; background:radial-gradient(ellipse closest-side at 50% 45%,#9bb59f24,transparent); z-index:-1}
.portrait{
  width:100%; height:auto; display:block;
  -webkit-mask-image:radial-gradient(ellipse 62% 70% at 50% 38%,#000 55%,transparent 100%);
          mask-image:radial-gradient(ellipse 62% 70% at 50% 38%,#000 55%,transparent 100%);
}

.card{background:color-mix(in oklab,var(--card),transparent 8%); border:1px solid var(--border); border-radius:16px; padding:1.25rem 1.4rem; margin-bottom:1rem}
h2{margin:0 0 .9rem; font-size:1.3rem; letter-spacing:.01em}
h3{margin:0 0 .5rem; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); font-weight:600}
.two{display:grid; grid-template-columns:1.15fr 1fr; gap:1.6rem}
ul{margin:0; padding-left:1.1rem}
li{margin:.4rem 0}
.examples{border-left:1px solid var(--border); padding-left:1.4rem}
.links{list-style:none; padding:0}
.links li{margin:0 0 .75rem}
.links a{font-weight:600}
.links span{display:block; color:var(--muted); font-size:.93rem}

.skills{margin:0; display:grid; grid-template-columns:auto 1fr; gap:.35rem 1rem}
.skills dt{color:var(--accent); font-weight:600; white-space:nowrap}
.skills dd{margin:0}

.cta{text-align:center; padding:1.6rem 1.4rem; border-color:#3a4f42; background:linear-gradient(180deg,#152019,#11181500)}
.cta h2{margin-bottom:.4rem}
.cta p{margin:0 auto 1.1rem; max-width:520px; color:var(--muted)}
.cta-buttons{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap}
.btn.primary{background:var(--accent); color:#0e1211; border-color:var(--accent); font-weight:600}
.btn.primary:hover{background:#b3c9b6}
html{scroll-behavior:smooth}

footer{margin-top:1.5rem; color:var(--muted); font-size:.9rem; text-align:center}

/* Rechtstexte */
.legal{max-width:680px}
.legal h1{font-size:1.6rem; margin-bottom:1rem}
.legal h2{margin-top:1.4rem; font-size:1.1rem}
.legal p{margin:.5rem 0}

@media (max-width:700px){
  .hero{grid-template-columns:1fr; min-height:0; align-items:start}
  .hero-text{order:2; padding-bottom:0}
  .portrait-wrap{order:1; max-width:230px; justify-self:center}
  h1{font-size:1.9rem}
  .two{grid-template-columns:1fr; gap:1.1rem}
  .examples{border-left:none; padding-left:0; border-top:1px solid var(--border); padding-top:1rem}
  .skills{grid-template-columns:1fr; gap:.15rem}
  .skills dd{margin-bottom:.45rem}
}