/* Personal site. Layout and interactions are original; no third-party UI code. */
:root {
  --bg:var(--ds-bg); --bg-alt:var(--ds-raised); --ink:var(--ds-text);
  --ink-2:var(--ds-raised); --muted:var(--ds-muted); --faint:var(--ds-muted);
  --line:var(--ds-line); --accent:var(--ds-accent); --accent-dark:var(--ds-accent);
  --accent-2:var(--ds-accent); --accent-soft:var(--ds-raised); --radius:18px; --radius-sm:10px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--ds-bg); color:var(--ds-text); font:17px/1.75 var(--ds-font); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:5px; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
:focus-visible { outline:3px solid var(--ds-focus); outline-offset:5px; }
img { display:block; max-width:100%; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { line-height:1.15; letter-spacing:-.045em; text-wrap:balance; }
h1 { font-size:clamp(2.7rem,5.1vw,6rem); font-weight:650; }
h2 { font-size:clamp(1.9rem,3.1vw,3.4rem); font-weight:600; }
h3 { font-size:clamp(1.25rem,1.6vw,1.7rem); font-weight:600; }
.container { width:min(1880px,calc(100% - clamp(40px,9vw,260px))); margin-inline:auto; }
.icon-arrow { width:20px; height:20px; flex:none; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; top:8px; left:16px; transform:translateY(-180%); z-index:100; padding:10px 18px; background:var(--ds-accent); color:var(--ds-on-accent); border-radius:8px; }
.skip-link:focus { transform:none; }
.site-header { position:sticky; top:0; z-index:50; background:var(--ds-bg); border-bottom:1px solid var(--ds-line); }
.nav { min-height:82px; display:flex; align-items:center; gap:28px; }
.brand { display:inline-flex; align-items:center; gap:12px; font-weight:650; text-decoration:none; line-height:1.25; }
.mark { display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:11px; background:#3459db; color:#fff; }
.mark svg { width:100%; height:100%; display:block; }
.nav-links { margin-left:auto; display:flex; align-items:center; gap:28px; }
.nav-links a { font-size:14px; text-decoration:none; color:var(--ds-muted); }
.nav-links a:hover,.nav-links a.is-active { color:var(--ds-text); }
.nav-links a.is-active { text-decoration:underline; text-decoration-color:var(--ds-accent); }
.nav-tools { display:flex; gap:8px; }
.theme-switch,.nav-toggle { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--ds-line); border-radius:12px; background:var(--ds-surface); color:var(--ds-text); }
.theme-switch svg { width:20px; height:20px; }
.nav-toggle { display:none; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:48px; padding:12px 22px; border:1px solid var(--ds-line); border-radius:10px; font-size:14px; font-weight:600; text-decoration:none; transition:transform .2s,background .2s; }
.btn-primary,.nav-links a.btn-primary { background:var(--ds-text); color:var(--ds-bg); border-color:transparent; }
.btn:hover { transform:translateY(-2px); }
.btn-ghost { background:var(--ds-surface); color:var(--ds-text); }
.personal-kicker,.eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:24px; font:500 11px/1.5 var(--ds-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ds-muted); }
.personal-kicker::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ds-accent); }
.personal-hero { padding:clamp(54px,7vw,120px) 0 0; position:relative; }
.personal-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:clamp(48px,10vw,220px); align-items:center; }
.personal-intro { min-width:0; max-width:1000px; }
.hero-greeting { color:var(--ds-muted); font-size:19px; margin-bottom:12px; }
.personal-intro h1 { margin-bottom:22px; font-size:clamp(3rem,5.4vw,6.9rem); line-height:1.04; }
.name-dot { color:var(--ds-accent); }
.hero-manifesto { font-size:clamp(1.45rem,2.3vw,2.55rem); line-height:1.3; letter-spacing:-.035em; color:var(--ds-muted); }
.hero-manifesto br { display:none; }
.hero-manifesto br::after { content:" "; }
.personal-lead { max-width:62ch; margin-top:24px; font-size:clamp(1rem,1.1vw,1.3rem); color:var(--ds-muted); line-height:1.75; }
.personal-intro .personal-lead { max-width:58ch; }
.personal-actions { display:flex; flex-wrap:wrap; gap:24px; align-items:center; margin-top:28px; }
.personal-text-link { font-size:14px; text-decoration:none; padding:10px 0; border-bottom:1px solid var(--ds-line); }
.personal-text-link span { margin-left:14px; color:var(--ds-accent); }
.hero-canvas { width:280px; max-width:100%; justify-self:end; transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .2s ease-out; }
.portrait-image { position:relative; overflow:hidden; aspect-ratio:4/5; border:1px solid var(--ds-line); border-radius:22px; background:var(--ds-raised); display:grid; place-items:center; }
.hero-canvas img { width:100%; height:100%; object-fit:cover; object-position:50% 40%; transform:translateY(var(--depth-y,0px)) scale(1.1); }
.portrait-initials { color:var(--ds-accent); font-size:7rem; line-height:1; font-weight:500; }
.canvas-caption { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-top:16px; color:var(--ds-muted); }
.portrait-label { font:11px/1.6 var(--ds-mono); }
.canvas-caption a { min-width:40px; min-height:40px; display:grid; place-items:center; border:1px solid var(--ds-line); border-radius:50%; }
.hero-bottom { display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between; margin-top:54px; padding:24px 0; border-bottom:1px solid var(--ds-line); color:var(--ds-muted); }
.tech-labels { display:flex; flex-wrap:wrap; gap:10px 22px; font:12px/1.7 var(--ds-mono); }
.tech-labels>span { display:flex; align-items:center; gap:22px; }
.tech-labels>span:not(:last-child)::after { content:"/"; color:var(--ds-line); }
.hero-scroll { text-decoration:none; font:12px var(--ds-mono); }
.hero-scroll span { margin-left:16px; }
.personal-section { padding:clamp(60px,6vw,110px) 0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:32px; margin-bottom:34px; }
.section-heading > div { min-width:0; }
.section-heading .personal-lead { max-width:40ch; }
.section-number { font:12px var(--ds-mono); color:var(--ds-muted); white-space:nowrap; }
.personal-project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.personal-project { min-width:0; padding:24px; border:1px solid var(--ds-line); border-radius:18px; background:var(--ds-surface); transition:border-color .2s,transform .3s; }
.personal-project:hover { border-color:var(--ds-accent); transform:translateY(-3px); }
.project-visual { position:relative; overflow:hidden; height:104px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--ds-line); margin-bottom:24px; padding-bottom:20px; color:var(--ds-accent); }
.project-visual:has(img) { height:auto; aspect-ratio:1.8; border:0; border-radius:10px; background:var(--ds-raised); padding:0; }
.project-visual img { width:100%; height:100%; object-fit:contain; transform:translateY(var(--depth-y,0px)) scale(1.04); transition:transform .35s; }
.personal-project:hover img { transform:translateY(var(--depth-y,0px)) scale(1.07); }
.project-symbol { width:64px; height:64px; flex:none; }
.project-index { font:12px var(--ds-mono); color:var(--ds-muted); }
.project-visual:has(img) .project-index { position:absolute; top:12px; left:12px; padding:4px 8px; border-radius:6px; background:var(--ds-bg); }
.project-body p { margin-top:12px; color:var(--ds-muted); overflow-wrap:anywhere; }
.project-body a { display:inline-flex; align-items:center; gap:18px; margin-top:22px; font-size:14px; }
.project-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.project-tags span { padding:3px 10px; background:var(--ds-raised); border-radius:6px; font:11px/1.8 var(--ds-mono); color:var(--ds-muted); }
.personal-about { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(42px,7vw,140px); }
.about-intro { position:sticky; top:120px; align-self:start; }
.about-details { min-width:0; }
.personal-copy { margin-top:20px; color:var(--ds-muted); overflow-wrap:anywhere; max-width:72ch; }
.about-details>.personal-copy:first-child { margin-top:0; }
.personal-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:32px 0 0; }
.personal-facts>div { padding-top:18px; border-top:1px solid var(--ds-line); }
.personal-facts dt { font:11px/1.7 var(--ds-mono); text-transform:uppercase; letter-spacing:.04em; color:var(--ds-muted); }
.personal-facts dd { margin:8px 0 0; line-height:1.65; font-size:15px; overflow-wrap:anywhere; }
.stack-section { border-top:1px solid var(--ds-line); }
.stack-layout { display:block; }
.stack-list { display:grid; gap:0; border-top:1px solid var(--ds-line); }
.stack-list details { border-bottom:1px solid var(--ds-line); }
.stack-list details[open] { display:grid; grid-template-columns:minmax(230px,.7fr) minmax(0,1.3fr); align-items:start; gap:24px; }
.stack-list summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:24px; justify-content:space-between; padding:24px 0; font-size:clamp(1.25rem,1.6vw,1.65rem); font-weight:550; letter-spacing:-.03em; }
.stack-list summary::-webkit-details-marker { display:none; }
.stack-list summary::after { content:"+"; color:var(--ds-accent); font-size:20px; }
.stack-list details[open] summary::after { content:"−"; }
.stack-list details p { padding:24px 0; color:var(--ds-muted); max-width:65ch; }
.personal-contact { padding-top:0; }
.personal-contact-inner { border-top:1px solid var(--ds-line); border-bottom:1px solid var(--ds-line); padding:clamp(38px,5vw,84px) 0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:center; }
.personal-contact h2 { font-size:clamp(2rem,4.2vw,4.8rem); max-width:22ch; }
.personal-mail { display:inline-block; margin-top:24px; color:var(--ds-accent); font-size:clamp(1.2rem,2vw,2.2rem); letter-spacing:-.02em; overflow-wrap:anywhere; }
.contact-arrow { display:grid; place-items:center; border:1px solid var(--ds-line); border-radius:50%; width:104px; height:104px; color:var(--ds-accent); }
.contact-arrow .icon-arrow { width:44px; height:44px; }
.site-footer { padding:30px 0 24px; }
.footer-grid,.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:24px; }
.footer-links { display:flex; flex-wrap:wrap; gap:22px; }
.footer-links a { font-size:13px; text-decoration:none; color:var(--ds-muted); }
.footer-bottom { margin-top:26px; color:var(--ds-muted); font:11px/1.7 var(--ds-mono); }
.footer-social { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.foot-soc { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--ds-line); border-radius:50%; transition:color .2s,border-color .2s; }
.foot-soc:hover { color:var(--ds-accent); border-color:var(--ds-accent); }
.foot-soc svg { width:18px; height:18px; fill:currentColor; }
.legal { width:min(820px,calc(100% - 48px)); margin:0 auto; padding:64px 0 100px; overflow-wrap:anywhere; }
.legal .back { display:inline-block; margin-bottom:30px; font-size:14px; }
.legal h1 { font-size:clamp(2.5rem,5vw,4.6rem); }
.legal h2 { font-size:1.35rem; letter-spacing:-.025em; margin:36px 0 16px; }
.legal p,.legal address { margin-top:16px; color:var(--ds-muted); white-space:pre-line; font-style:normal; }
.legal li { color:var(--ds-muted); }
.legal-document { width:min(1500px,calc(100% - clamp(40px,8vw,180px))); }
.legal-heading { padding-bottom:40px; border-bottom:1px solid var(--ds-line); }
.legal-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:clamp(32px,6vw,100px); padding-top:42px; }
.legal-toc { display:flex; flex-direction:column; gap:10px; position:sticky; top:110px; align-self:start; max-height:calc(100svh - 135px); overflow:auto; padding-right:15px; }
.legal-toc>span { margin-bottom:10px; font:11px var(--ds-mono); color:var(--ds-muted); text-transform:uppercase; letter-spacing:.06em; }
.legal-toc a { text-decoration:none; color:var(--ds-muted); font-size:13px; line-height:1.6; }
.legal-toc a:hover { color:var(--ds-accent); }
.legal-body { max-width:78ch; min-width:0; }
.legal-section { padding-bottom:26px; border-bottom:1px solid var(--ds-line); margin-bottom:28px; }
.legal-section h2 { margin-top:0; scroll-margin-top:110px; }
.legal-document .legal-section p { white-space:normal; }
.field { margin-bottom:20px; }
.field label { display:block; margin-bottom:8px; font-weight:600; }
.field input,.field textarea { width:100%; border:1px solid var(--ds-line); border-radius:10px; padding:13px; background:var(--ds-surface); color:var(--ds-text); }
.maint-wrap { width:min(720px,calc(100% - 40px)); margin:10vh auto; }
.maint-card { padding:40px; border:1px solid var(--ds-line); border-radius:20px; background:var(--ds-surface); }
.maint-card p { margin:24px 0; color:var(--ds-muted); }
.maint-badge,.maint-foot { color:var(--ds-muted); font-size:13px; }
.maint-banner { border-radius:20px; margin-bottom:24px; }
.lightbox { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; background:#080e0bee; padding:24px; }
.lightbox.open { display:flex; }
.lightbox img { max-height:90vh; max-width:95vw; object-fit:contain; }
.lightbox .x { position:absolute; right:20px; top:20px; width:44px; height:44px; border:1px solid #adb8ae; border-radius:50%; background:#191f1b; color:#fff; font-size:24px; }
/* ── Review mini-page (bewertung.php) ──────────────────────────────────────── */
.rev-body  {
  background: var(--bg-alt);
  min-height: 100vh;
}
.rev-preview-bar  {
  position: sticky;
  top: 0;
  z-index:60;
  background: #fbbf24;
  color: #1a1400;
  text-align: center;
  padding: 9px 16px;
  font-weight: 700;
  font-size: 14px;
}
.rev-preview-bar a  {
  color: #1a1400;
  text-decoration: underline;
}
.rev-wrap  {
  display: grid;
  place-items: start center;
  padding: 40px 20px 60px;
}
.rev-card  {
  width: 100%;
  max-width: 560px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow:none;
  padding: 38px 34px;
}
.rev-brand  {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.rev-mono  {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background:var(--ds-accent);
  color:var(--ds-on-accent);
  font-weight: 800;
  font-size: 18px;
}
.rev-brandname  {
  font-weight: 700;
  font-size: 16px;
}
.rev-card h1  {
  font-size: 26px;
  margin: 0 0 10px;
}
.rev-lead  {
  color: var(--muted);
  margin: 0 0 24px;
  line-height: 1.6;
}
.rev-form  {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rev-field  {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rev-label  {
  font-weight: 600;
  font-size: 14.5px;
}
.rev-req  {
  color: #dc2626;
}
.rev-opt  {
  color: var(--faint);
  font-weight: 400;
  font-size: 13px;
}
.rev-card input[type="text"], .rev-card textarea  {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  font: inherit;
  background: var(--bg-alt);
  color: var(--ink);
}
.rev-card input[type="text"]:focus, .rev-card textarea:focus  {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
}
.rev-card textarea  {
  resize: vertical;
}
/* Interactive star picker: reversed row so :hover ~ styles preceding (=higher) stars. */
.stars  {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
}
.stars input  {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.stars label  {
  cursor: pointer;
  color: #d5dae8;
  line-height: 0;
  transition: color .12s ease, transform .12s ease;
}
.stars label svg  {
  width: 38px;
  height: 38px;
  fill: currentColor;
}
.stars label:hover, .stars label:hover ~ label, .stars input:checked ~ label  {
  color: #f5b301;
}
.stars label:hover  {
  transform: scale(1.12);
}
.stars input:focus-visible ~ label  {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.rev-criteria  {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rev-crit  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
}
.rev-crit-label  {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.rev-criteria .stars label svg  {
  width: 30px;
  height: 30px;
}
.rev-counter  {
  font-size: 12.5px;
  color: var(--faint);
  margin-top: 4px;
}
.rev-counter.ok  {
  color: #16a34a;
  font-weight: 600;
}
.rev-submit:disabled  {
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(.3);
}
.rev-namechoice  {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.rev-name-opt  {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.rev-name-opt input  {
  position: absolute;
  opacity: 0;
}
.rev-name-opt.is-on  {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.rev-name-k  {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--faint);
}
.rev-name-v  {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.rev-consent  {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
  cursor: pointer;
}
.rev-consent input  {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  flex: none;
}
.rev-note  {
  font-size: 12.5px;
  color: var(--faint);
  margin: 0;
  line-height: 1.5;
}
.rev-note a  {
  color: var(--accent);
}
.rev-submit  {
  justify-content: center;
  width: 100%;
}
.rev-error  {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: 11px;
  padding: 12px 15px;
  margin-bottom: 20px;
  font-size: 14px;
  display: grid;
  gap: 4px;
}
.rev-done-icon  {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  margin: 4px 0 18px;
}
.rev-done-icon svg  {
  width: 34px;
  height: 34px;
}
.rev-hp  {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.rev-foot  {
  margin: 26px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--faint);
}
@media (prefers-reduced-motion: reduce)  {
  .stars label  {
    transition: none;
  }
}
.rev-card {
  background:var(--ds-surface);
  color:var(--ds-text);
  border-color:var(--ds-line);
  box-shadow:none
}
.rev-card input,.rev-card textarea {
  background:var(--ds-bg);
  color:var(--ds-text)
}
.rev-done-icon {
  background:var(--ds-raised);
  color:var(--ds-accent)
}

.reveal { opacity:1; transform:none; }
.motion-ready .reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease,transform .6s ease; }
.motion-ready .reveal.in { opacity:1; transform:none; }
@media(min-width:1800px) {
  body { font-size:clamp(18px,.63vw,22px); }
  .nav { min-height:92px; }
  .brand { font-size:21px; }
  .nav-links a { font-size:17px; }
  .personal-kicker { font-size:12px; }
  .btn { min-height:52px; font-size:16px; }
  .personal-intro .personal-lead { max-width:62ch; }
}
@media(min-width:1100px) {
  .personal-project-grid:has(>.personal-project:nth-child(3):last-child) { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:1000px) {
  .personal-hero-grid { gap:40px; grid-template-columns:minmax(0,1fr) 240px; }
  .hero-canvas { width:240px; }
  .nav-links { gap:18px; }
  .personal-about { gap:40px; }
  .legal-layout { grid-template-columns:210px minmax(0,1fr); gap:32px; }
}
@media(max-width:760px) {
  html { scroll-padding-top:90px; }
  .container { width:calc(100% - 40px); }
  .nav { min-height:74px; gap:12px; }
  .brand { font-size:14px; }
  .nav-tools { margin-left:auto; }
  .nav-toggle { display:grid; }
  .nav-links { display:none; position:absolute; top:74px; left:0; right:0; padding:20px; background:var(--ds-surface); border-bottom:1px solid var(--ds-line); }
  .nav-links.open { display:flex; flex-direction:column; align-items:stretch; gap:8px; }
  .nav-links a { padding:12px; min-height:44px; }
  .personal-hero { padding-top:38px; }
  .personal-hero-grid { grid-template-columns:1fr; gap:32px; }
  .personal-intro h1 { font-size:clamp(2.65rem,10vw,4.8rem); }
  .hero-manifesto { font-size:1.45rem; }
  .personal-lead { margin-top:20px; }
  .hero-canvas { width:220px; justify-self:start; }
  .portrait-image { aspect-ratio:1; }
  .hero-bottom { margin-top:32px; padding-block:22px; gap:22px; }
  .tech-labels { font-size:10px; gap:8px 14px; }
  .tech-labels>span { gap:14px; }
  .hero-scroll { font-size:11px; }
  .personal-section { padding:54px 0; }
  .section-heading { flex-direction:column; gap:20px; align-items:start; }
  .personal-project-grid { grid-template-columns:1fr; }
  .personal-project { padding:22px; }
  .personal-about { grid-template-columns:1fr; gap:26px; }
  .about-intro { position:static; }
  .personal-facts { grid-template-columns:1fr; gap:18px; }
  .stack-section .section-heading { display:block; }
  .stack-list details[open] { grid-template-columns:1fr; gap:0; }
  .stack-list summary { padding:20px 0; }
  .stack-list details p { padding:0 0 22px; }
  .personal-contact { padding-top:0; }
  .personal-contact-inner { grid-template-columns:1fr; gap:26px; }
  .contact-arrow { width:64px; height:64px; }
  .contact-arrow .icon-arrow { width:28px; height:28px; }
  .footer-grid { flex-direction:column; align-items:start; }
  .footer-links { gap:14px 20px; }
  .legal-layout { grid-template-columns:1fr; padding-top:24px; }
  .legal-toc { position:static; max-height:220px; padding:18px; border:1px solid var(--ds-line); border-radius:12px; }
}
@media(max-width:380px) {
 .container { width:calc(100% - 32px); }
 .brand { gap:8px; font-size:12px; }
 .mark { width:32px; height:32px; }
 .theme-switch,.nav-toggle { width:40px; height:40px; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation:none!important; transition:none!important; }
 .motion-ready .reveal { opacity:1; transform:none; }
 .hero-canvas,.hero-canvas img,.project-visual img,.personal-project:hover img { transform:none; }
}
/* Cookie consent (lib/analytics.php, assets/js/consent.js): compact, fixed at the bottom, never
   a wall. Both choices share one style — equal prominence for "Akzeptieren" and "Ablehnen". */
.consent[hidden] { display:none; }
.consent { position:fixed; left:0; right:0; bottom:0; z-index:90; padding:0 16px max(16px, env(safe-area-inset-bottom)); pointer-events:none; }
.consent-inner { pointer-events:auto; width:min(1040px,100%); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 24px; align-items:center; padding:16px 20px; background:var(--ds-raised); color:var(--ds-text); border:1px solid var(--ds-line); border-radius:var(--ds-radius-sm); box-shadow:0 12px 32px rgba(0,0,0,.28); }
.consent-title { grid-column:1; margin:0; font-size:15px; font-weight:700; letter-spacing:0; }
.consent-text { grid-column:1; margin:0; font-size:14px; line-height:1.5; color:var(--ds-text); }
.consent-text a { color:var(--ds-accent); text-decoration:underline; text-underline-offset:2px; }
.consent-actions { grid-column:2; grid-row:1 / span 2; display:flex; gap:12px; }
.consent-btn { min-height:48px; min-width:132px; padding:12px 20px; border:1px solid var(--ds-text); border-radius:10px; background:var(--ds-surface); color:var(--ds-text); font:inherit; font-size:15px; font-weight:600; cursor:pointer; }
.consent-btn:hover { background:var(--ds-bg); }
.footer-consent { min-height:24px; padding:0; border:0; background:none; color:var(--ds-muted); font:inherit; font-size:13px; cursor:pointer; }
.footer-consent:hover { color:var(--ds-text); }
@media (prefers-reduced-motion:no-preference) {
 .consent-inner { animation:consent-in .24s ease-out; }
 @keyframes consent-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
}
@media(max-width:760px) {
 .consent { padding:0 8px max(8px, env(safe-area-inset-bottom)); }
 .consent-inner { grid-template-columns:1fr; padding:12px 16px; gap:6px; }
 .consent-title { font-size:14px; }
 .consent-text { font-size:13px; }
 .consent-actions { grid-column:1; grid-row:auto; margin-top:6px; }
 .consent-btn { flex:1 1 0; min-width:0; }
}