/* Basis: Design-Tokens, Grundlayout, Kopfzeile, Buttons */
:root{
  --paper:#f4f3f0;--ink:#1c1a19;--muted:#5b5553;--line:#c9c5bf;--tone:#e6e5e3;--tone-2:#d6d4d1;
  --accent:#9c1220;--accent-deep:#82101b;--accent-pale:#ffd9dc;
  --night:#2a2a2a;
  --serif:Georgia,'Times New Roman',serif;--sans:Arial,Helvetica,sans-serif;
  --step-small:.875rem;
  --step-body:clamp(1.0625rem,1rem + .2vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .5vw,1.5rem);
  --step-head:clamp(1.625rem,1.3rem + 1.1vw,2.25rem);
  --step-display:clamp(2.75rem,2rem + 3vw,4.5rem);
  --content:1240px;--margin:clamp(20px,5vw,72px);--gap:clamp(20px,2.5vw,40px);--section:clamp(72px,8vw,120px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--step-body);line-height:1.6}
h1,h2,h3,p,figure,dl,dd,ul{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
p+p{margin-top:1em}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px;transition:text-decoration-thickness .2s,color .2s}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
::selection{background:var(--accent);color:#fff}
img{display:block;max-width:100%;height:auto}
.wrap{width:min(var(--content),100% - var(--margin) * 2);margin-inline:auto}
.lead{font-family:var(--serif);font-size:var(--step-lead);line-height:1.4}
.nowrap{white-space:nowrap}
.skip-link{position:absolute;left:var(--margin);top:-100px;background:var(--ink);color:#fff;padding:10px 14px;z-index:5}
.skip-link:focus{top:16px}
.header{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding-block:28px}
.wordmark{white-space:nowrap;font-family:var(--serif);font-size:var(--step-lead);letter-spacing:-.01em;text-decoration:none}
.wordmark span{color:var(--accent)}
.header nav{display:flex;flex-wrap:wrap;gap:8px clamp(16px,2.4vw,32px)}
.header nav a{text-decoration:none}
.header nav a:hover{text-decoration:underline}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:50px;padding:13px 22px;border:0;border-radius:0;background:var(--accent);color:#fff;font:inherit;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),background-color .2s,color .2s}
.button:hover{background:var(--accent-deep);transform:translateY(-2px)}
.button:active{transform:translateY(0) scale(.98)}
.button-light{background:var(--accent-pale);color:var(--accent)}
.button-light:hover{background:#fff}
.button-ghost{background:var(--accent-deep);color:#fff}
.button-ghost:hover{background:var(--ink)}
@media(max-width:680px){.header{flex-wrap:wrap;padding-block:20px}.header nav{gap:8px 20px}}
@media(max-width:440px){.header nav{width:100%;justify-content:space-between}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print{body{background:#fff;color:#000;font-size:11pt}.header nav,.button,.skip-link{display:none}.wrap{width:100%}}

/* Raster: jeder Abschnitt beginnt mit einer Linie, links der Titel (4 Spalten), rechts der Inhalt (8 Spalten) */
.block{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:24px;border-top:1px solid var(--ink);padding-block:28px var(--section)}
.block-head{grid-column:1 / 5}
.block-body{grid-column:5 / 13;min-width:0}
.block-head h2{font-size:var(--step-head)}
.block-body>.lead{max-width:40ch}
.measure-text{max-width:62ch}
.columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:48px}
.columns>*{min-width:0}
.columns h3{font-size:var(--step-lead);margin-bottom:12px}
.principle{margin-top:20px}
.principle strong{display:block;font-size:var(--step-small)}
.band{background:var(--tone)}
.band .block{border-top-color:transparent}
@media(max-width:1000px){.columns{grid-template-columns:1fr;gap:28px}}
@media(max-width:800px){.block-head,.block-body{grid-column:1 / -1}}
@media print{.block{display:block;padding:12pt 0}.columns{display:block}.columns>*{margin-top:8pt}.band{background:none}}

/* Einstieg: Name, Satz und Aktion links, Porträt rechts, darunter der Steckbrief in vier Zellen */
.hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;padding-top:clamp(40px,6vw,96px)}
.hero-text{grid-column:1 / 8}
.hero h1{font-size:var(--step-display);line-height:1.05;letter-spacing:-.025em;margin-bottom:24px}
.hero .lead{max-width:36ch}
.hero .button{margin-top:32px}
.hero-portrait{grid-column:9 / 13}
.hero-portrait img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--ink)}
.facts{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(48px,6vw,88px);margin-bottom:var(--section);border-top:1px solid var(--ink)}
.facts>div{padding-block:16px 0;min-width:0}
.facts dt{font-size:var(--step-small);font-weight:700;margin-bottom:6px}
.facts dd{line-height:1.45}
@media(prefers-reduced-motion:no-preference){
  .hero-text>*,.hero-portrait,.facts{animation:fade-up .8s var(--ease) both}
  .hero-text>:nth-child(2){animation-delay:.08s}
  .hero-text>:nth-child(3){animation-delay:.16s}
  .hero-portrait{animation-delay:.12s}
  .facts{animation-delay:.24s}
}
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}}
@media(max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.hero-text,.hero-portrait{grid-column:1 / -1}.hero-portrait{grid-row:1;width:min(100%,280px);margin-bottom:28px}}
@media(max-width:440px){.facts{grid-template-columns:1fr}}
@media print{.hero{display:block;padding:0}.hero-portrait{width:120pt;margin-top:12pt}.hero h1{font-size:30pt}.facts{display:block;margin:12pt 0}}

/* Projekte: je Projekt das Motiv in der Titelspalte (1–4), das Datenblatt im Inhaltsbereich (5–12) */
.project{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:20px;align-items:start;margin-top:56px}
.project-art{grid-column:1 / 5}
.project-copy{grid-column:5 / 13;max-width:68ch}
.project-art svg{display:block;width:100%;height:auto}
.project h3{font-size:var(--step-head);margin-bottom:12px}
.sheet{margin-block:24px 20px}
.sheet>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:var(--gap);padding-block:5px}
.sheet dt{font-weight:700;font-size:var(--step-small);padding-top:.15em}
.art-voice .field{fill:var(--tone)}
.wave rect{fill:var(--accent)}
.art-platform .field{fill:var(--night)}
.art-platform .app-a{fill:var(--accent-pale)}
.art-platform .app-b{fill:var(--paper)}
.art-platform .app-c{fill:var(--tone-2)}
.art-platform .base{fill:var(--accent)}
.art-platform text{font-family:var(--serif);font-size:28px;fill:var(--ink)}
.art-platform .base-label{font-size:40px;fill:#fff}
.art-host .field{fill:var(--accent-pale)}
.host rect{fill:var(--ink)}
.host .known{fill:var(--accent)}
@media(max-width:800px){.project-art,.project-copy{grid-column:1 / -1}.project-art{max-width:480px}}
@media(max-width:440px){.sheet>div{grid-template-columns:1fr;gap:2px}}
@media print{.project{display:block;break-inside:avoid;margin-top:12pt}.project-art{display:none}}

/* Persönlich: Freizeitbild unter dem Titel in der Titelspalte, Text im Inhaltsbereich */
.personal{max-width:62ch}
.personal-photo{margin-top:28px}
.personal-photo img{width:100%;aspect-ratio:4 / 3;object-fit:cover}
@media(max-width:800px){.personal-photo{max-width:480px}}
@media print{.personal{display:block}.personal-photo{display:none}}

/* Kontakt: Karminband im gleichen Raster, wechselnde Gesprächsfrage */
.contact{background:var(--accent);color:#fff}
.contact .block{border-top-color:transparent}
.contact-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap)}
.contact-links{list-style:none;padding:0;margin-top:24px;display:grid;gap:6px}
.question{font-family:var(--serif);font-size:var(--step-lead);line-height:1.35;min-height:2.7em;margin-bottom:20px}
.deck-actions{display:flex;flex-wrap:wrap;gap:12px}
.contact :focus-visible,.footer :focus-visible{outline-color:#fff}
@media(max-width:1000px){.contact-body{grid-template-columns:1fr}}
@media(max-width:680px){.deck-actions .button{width:100%}}
@media print{.contact{background:none;color:#000}.deck{display:none}}

/* Fußzeile */
.footer{background:var(--accent-deep);color:#fff;font-size:var(--step-small);padding-block:28px}
.footer-row{display:flex;flex-wrap:wrap;gap:12px 32px}
.footer-row a:last-child{margin-left:auto}
@media print{.footer{background:none;color:#000;padding:0}}

/* Einblenden beim Scrollen (nur mit Script, ohne Script bleibt alles sichtbar) */
@media(prefers-reduced-motion:no-preference){
  .js [data-reveal]>*{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .js [data-reveal]>:nth-child(2){transition-delay:.08s}
  .js [data-reveal].is-in>*{opacity:1;transform:none}
}

/* Rechtliche Seiten und 404 */
.legal{min-height:60vh;padding-block:clamp(48px,6vw,96px) var(--section)}
.legal>*{max-width:68ch}
.legal h1{font-size:var(--step-display);margin-bottom:32px;overflow-wrap:anywhere}
.legal h2{font-size:var(--step-lead);margin:48px 0 16px}
.legal p,.legal address{margin-bottom:1em;overflow-wrap:anywhere}
.legal address{font-style:normal}
.legal .button{margin-top:16px}
.legal-date{font-size:var(--step-small);color:var(--muted);margin-top:40px}
@media print{.legal{padding:0}}