/* ============================================================
   Rechtsseiten - Tokens identisch zu index.html / finishing.html
   ============================================================ */
:root{
  --aj-ground:#e9ebea;
  --aj-ground-deep:#d8dbda;
  --aj-surface:#f6f7f7;
  --aj-ink:#17181a;
  --aj-ink-muted:#5e6664;
  --aj-accent:#b8342a;
  --aj-display:"Cabinet Grotesk",system-ui,sans-serif;
  --aj-body:"Inter Tight",system-ui,sans-serif;
  --aj-mono:"IBM Plex Mono",ui-monospace,monospace;

  --line-14:color-mix(in srgb, var(--aj-ink) 14%, transparent);
  --line-18:color-mix(in srgb, var(--aj-ink) 18%, transparent);
  --pad:1.5rem;
  --shell:1400px;
}
@media (min-width:768px){ :root{ --pad:2.5rem; } }

*{box-sizing:border-box}
html{scroll-behavior:smooth; color-scheme:light}
body{
  margin:0;
  background:var(--aj-ground);
  color:var(--aj-ink);
  font-family:var(--aj-body);
  font-size:1rem; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--aj-accent); color:var(--aj-ground)}
a{color:inherit}
.aj-display{font-family:var(--aj-display); letter-spacing:-.035em; font-weight:800; line-height:.95}
.aj-mono{font-family:var(--aj-mono); letter-spacing:.08em; text-transform:uppercase; font-size:11px}
.shell{margin-inline:auto; max-width:var(--shell); padding-inline:var(--pad)}

.top{
  position:fixed; inset-inline:0; top:0; z-index:50; height:72px;
  border-bottom:1px solid var(--line-14);
  background:color-mix(in srgb, var(--aj-ground) 88%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.top .shell{display:flex; height:100%; align-items:center; justify-content:space-between}
.top a{text-decoration:none}
.brand{font-size:1.125rem}
.top nav{display:flex; align-items:center; gap:1.1rem}
.top nav a:not(.slidebtn){letter-spacing:.08em}
@media (min-width:768px){ .top nav{gap:2.5rem} }

main{padding-top:72px}
.doc .shell{max-width:820px; padding-block:6rem}
@media (min-width:768px){ .doc .shell{padding-block:9rem} }
.doc .eyebrow{margin:0 0 1.25rem; color:var(--aj-ink-muted)}
.doc h1{margin:0; font-size:2.25rem}
@media (min-width:768px){ .doc h1{font-size:3rem; line-height:1} }
.doc h2{margin:3.5rem 0 0; font-size:1.25rem; font-weight:500; padding-top:1.5rem; border-top:1px solid var(--line-18)}
.doc h3{margin:2rem 0 0; font-size:1rem; font-weight:500}
.doc p, .doc li{line-height:1.75; color:var(--aj-ink-muted)}
.doc p{margin:1rem 0 0; max-width:70ch}
.doc ul, .doc ol{margin:1rem 0 0; padding-left:1.25rem; max-width:70ch}
.doc li{margin-top:.5rem}
.doc .updated{margin-top:3rem; color:var(--aj-ink-muted)}

/* Platzhalter, die vor dem Livegang ersetzt werden muessen */
.ph{
  background:color-mix(in srgb, var(--aj-accent) 12%, transparent);
  color:var(--aj-ink); padding:.05em .35em; font-family:var(--aj-mono); font-size:12px;
}
.notice{
  margin-top:2.5rem; border:1px solid var(--aj-accent); padding:1.25rem 1.5rem;
  color:var(--aj-ink); line-height:1.625; max-width:70ch;
}
.notice strong{font-weight:500}

/* Kopfzeile mit Schliessen-Button (Rechtsseiten + CV) */
.doc-head{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.doc .doc-head{margin:0 0 1.25rem}
.cv .doc-head{margin:0 0 1rem}
.doc .doc-head .eyebrow, .cv .doc-head .eyebrow{margin:0}
.closebtn{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem; margin:-.5rem -.5rem -.5rem 0;
  color:var(--aj-ink-muted); text-decoration:none;
  transition:color .2s ease;
}
.closebtn:hover{color:var(--aj-accent)}
.closebtn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round}

.foot{border-top:1px solid var(--line-14)}
.foot .shell{display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  gap:.75rem; padding-block:2rem; color:var(--aj-ink-muted)}
@media (min-width:768px){ .foot .shell{flex-direction:row} }
.foot a{text-decoration:underline; text-underline-offset:4px}
.foot .legal{display:flex; flex-wrap:wrap; justify-content:center; gap:1.25rem}

:focus-visible{outline:2px solid var(--aj-accent); outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
}