/* AR42 · Riso-Stil. Gemeinsame Basis für Startseite und Projektseiten.
   Projektseiten setzen ihre Akzentfarben über --a1/--a2/--a3. */
:root{
  --paper:#f6f1e7;
  --ink:#1d1a16;
  --dim:#6b6358;
  --line:rgba(29,26,22,.14);
  --card:#fffaf1;
  --tomato:#ff5b3a;
  --cobalt:#2b4bff;
  --sun:#ffc21a;
  --mint:#25c48a;
  --pink:#ff8fc7;
  --a1:var(--cobalt);--a2:var(--pink);--a3:var(--sun);
  --body:"Bricolage Grotesque",system-ui,sans-serif;
  --disp:"Bricolage Grotesque",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  /* feste Töne für Text auf Akzentflächen – bleiben in beiden Schemata gleich */
  --cream:#f6f1e7;
  --dark:#1d1a16;
  --soft:#3b352e;
  --shadow:var(--ink);
  /* Aliasse für Seiten-CSS */
  --bg:var(--paper);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#17130f;
  --ink:#f1e9dc;
  --dim:#a39889;
  --line:rgba(241,233,220,.16);
  --card:#221d18;
  --soft:#cfc5b6;
  --cobalt:#4f68ff;
  --shadow:rgba(241,233,220,.28);
  color-scheme:dark;
}
:root[data-theme="dark"] .grain{mix-blend-mode:overlay;opacity:.18}
:root[data-theme="dark"] .blend,:root[data-theme="dark"] .blend-m{mix-blend-mode:screen}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.55;overflow-x:clip}
a{color:inherit}
::selection{background:var(--sun)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .25 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

.wrap{width:min(1100px,100% - 40px);margin-inline:auto}

/* Logo: skaliert nur über font-size, Proportionen bleiben überall gleich */
.logo{display:inline-flex;align-items:center;gap:.06em;font-family:var(--disp);font-weight:800;font-size:24px;line-height:1;letter-spacing:-.01em;text-decoration:none;color:var(--ink);white-space:nowrap}
.logo b{display:inline-grid;place-items:center;flex:none;width:2.05em;height:2.05em;border-radius:50%;font-size:.7em;font-weight:800;letter-spacing:-.02em;
  background:var(--tomato);color:var(--cream);transform:rotate(-8deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.logo:hover b{transform:rotate(8deg)}

nav.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-weight:600;
  position:sticky;top:0;z-index:40;transition:box-shadow .3s,background-color .3s;
  /* Hintergrund über die volle Fensterbreite, obwohl die Leiste im .wrap sitzt */
  background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:0 0 0 100vmax color-mix(in srgb,var(--paper) 82%,transparent);clip-path:inset(0 -100vmax)}
nav.top::after{content:"";position:absolute;left:-100vmax;right:-100vmax;bottom:0;height:1px;background:var(--line);opacity:0;transition:opacity .3s}
nav.top.gescrollt::after{opacity:1}
html{scroll-padding-top:70px}
nav.top .links a{text-decoration:none;margin-left:22px}
nav.top .links a:hover{text-decoration:underline wavy var(--tomato);text-underline-offset:5px}
nav.top .right{display:flex;align-items:center;gap:18px}
.toggles{display:flex;align-items:center;gap:8px}
.lang{display:flex;border:2px solid var(--ink);border-radius:99px;overflow:hidden}
.lang-btn,.theme-btn{font:inherit;font-size:13px;font-weight:600;color:var(--ink);background:none;border:0;cursor:pointer;padding:5px 10px;line-height:1}
.lang-btn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.theme-btn{width:34px;height:34px;padding:0;border:2px solid var(--ink);border-radius:50%;font-size:16px;transition:transform .4s}
.theme-btn:hover{transform:rotate(-20deg)}

h1,h2,h3{font-family:var(--disp);letter-spacing:-.025em}
h2{font-size:clamp(34px,5vw,56px);font-weight:800;line-height:1;margin-bottom:22px}
section{padding:72px 0}
.eyebrow{display:inline-block;font-weight:600;font-size:14px;padding:4px 12px;border-radius:99px;background:var(--a3);color:var(--dark);margin-bottom:14px;transform:rotate(-2deg)}
p.intro{max-width:60ch;color:var(--soft)}

/* Sticker-Karten */
.stickers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px}
.sticker{position:relative;display:block;text-decoration:none;padding:28px;border-radius:28px;min-height:240px;color:var(--dark);
  transform:rotate(var(--r,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
a.sticker:hover{transform:rotate(0) translateY(-6px)}
.sticker .tag{display:inline-block;background:var(--cream);border-radius:99px;padding:3px 12px;font-size:13px;font-weight:600}
.sticker h3{font-size:40px;font-weight:800;line-height:1;margin:42px 0 10px}
.sticker p{max-width:28ch}
.sticker .go{position:absolute;right:22px;top:22px;width:46px;height:46px;border-radius:50%;background:var(--dark);color:var(--cream);display:grid;place-items:center;font-size:20px;transition:transform .4s}
a.sticker:hover .go{transform:rotate(-45deg)}

/* Karten für Inhalte */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:30px}
.card{background:var(--card);border:2px solid var(--ink);border-radius:22px;padding:22px;box-shadow:5px 5px 0 var(--shadow);transition:transform .3s,box-shadow .3s}
.card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--shadow)}
.card h3{font-size:20px;margin-bottom:6px}
.card p{font-size:16px;color:var(--soft);line-height:1.5}

/* Projektseiten-Kopf */
.p-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;padding:56px 0 40px}
.p-hero h1{font-size:clamp(52px,9vw,112px);font-weight:800;line-height:.92;margin:14px 0 22px}
.p-hero .lead{font-size:clamp(19px,2.2vw,23px);max-width:32ch}
.p-hero .art{position:relative;justify-self:center;width:min(300px,62vw);aspect-ratio:1}
.p-hero .art::before{content:"";position:absolute;inset:-6%;border-radius:47% 53% 44% 56%/52% 44% 56% 48%;background:var(--a2);animation:wob 28s ease-in-out infinite}
.p-hero .art img{position:relative;width:100%;height:100%;object-fit:contain}
.badge{display:inline-block;font-weight:600;font-size:14px;padding:5px 14px;border-radius:99px;background:var(--a1);color:var(--cream)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:99px;font-weight:600;text-decoration:none;font-size:16px;border:2px solid var(--ink);background:var(--paper);transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--shadow)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.off{opacity:.5;pointer-events:none}
.fine{margin-top:12px;font-size:14px;color:var(--dim)}

.steps{counter-reset:s;display:grid;gap:18px;margin-top:28px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.steps li{list-style:none;counter-increment:s;padding:24px;border-radius:22px;background:var(--card);border:2px solid var(--ink)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--a1);color:var(--cream);font-weight:800;margin-bottom:12px}
kbd{font-family:var(--mono);font-size:.82em;padding:2px 7px;border:1.5px solid var(--ink);border-bottom-width:3px;border-radius:7px;background:var(--paper);white-space:nowrap}

details{border-bottom:2px dashed var(--line);padding:18px 0}
details summary{cursor:pointer;font-weight:600;font-size:19px;list-style:none;display:flex;justify-content:space-between;gap:16px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--a2);color:var(--dark);transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:10px;color:var(--soft);max-width:68ch}

footer{padding:40px 0 60px;font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
footer a{text-decoration:none}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

@keyframes wob{50%{transform:rotate(10deg) scale(1.03)}}

@media (max-width:760px){
  .p-hero{grid-template-columns:1fr;padding-top:20px;gap:24px}
  .p-hero .art{order:-1;width:150px;justify-self:start;margin-left:10px}
  nav.top .links a{margin-left:12px}
  nav.top .right{gap:10px}
  nav.top .links{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}