/* RE—WRITE · Melanie Reimer — Markengrundlage. Jede spätere Seite bedient sich nur hier. */
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/assets/fonts/atkinson-hyperlegible-next-latin.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/assets/fonts/atkinson-hyperlegible-next-italic-latin.woff2) format("woff2");font-style:italic;font-weight:200 800;font-display:swap}
:root{
  /* Farbwelt: 60 Kalk · 30 Salbei · 10 Rosé */
  --kalk:#F6F4EF;      /* Grund, 60 % */
  --leinen:#ECE7DF;    /* Zweitfläche, warm */
  --salbei-hell:#DCE3D5; /* blasses Grün, 30 % */
  --salbei:#8FA08C;    /* Linien, Icons */
  --salbei-tief:#3F5146; /* Knopf, Hauptaktion */
  --wald:#1F2A24;      /* dunkle Bühne, nur für den Ablauf */
  --erde:#2D2521;      /* Schrift, statt Schwarz */
  --erde-weich:#6B5E56;/* Nebenschrift */
  --rose:#EBD3CB;      /* Akzent, 10 % */
  --rose-tief:#B07C6E; /* Akzentlinie, Kursivwort auf hell */
  --weiss:#FFFDFA;
  /* Schrift: Faktor 1,25 ab 18 px */
  --f-xs:14px;--f-s:16px;--f-m:18px;--f-l:22.5px;--f-xl:28px;--f-2xl:35px;--f-3xl:44px;--f-4xl:55px;--f-5xl:69px;
  /* Abstände: 8er-Raster */
  --r1:8px;--r2:16px;--r3:24px;--r4:32px;--r5:48px;--r6:64px;--r7:96px;--r8:128px;
  /* Ecken */
  --ecke-s:6px;--ecke-m:14px;--ecke-l:28px;--ecke-rund:999px;
  /* Bewegung */
  --lauf:cubic-bezier(.16,1,.3,1);--t-kurz:.18s;--t-mittel:.5s;--t-lang:1.1s;
  --serif:"Instrument Serif",Georgia,serif;--sans:"Atkinson",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--kalk);color:var(--erde);font:400 var(--f-m)/1.62 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;margin:0;color:var(--erde)}
h1{font-size:clamp(42px,6.4vw,var(--f-5xl));line-height:1.04}
h2{font-size:clamp(32px,4.4vw,var(--f-4xl));line-height:1.08}
h3{font-size:var(--f-xl);line-height:1.2}
h1 i,h2 i,h3 i,.kursiv{font-style:italic;font-weight:400;color:var(--rose-tief);}
.dunkel h1 i,.dunkel h2 i,.dunkel h3 i{color:var(--rose)}
.marke-zeile{font:700 var(--f-xs)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--erde-weich)}
.lead{font-size:var(--f-l);line-height:1.5;color:var(--erde-weich);max-width:36ch}
p{max-width:62ch}
a{color:inherit}
/* Knopf: ein Objekt, kein Fleck — gewölbt, Lichtkante, ruhiger Schimmer */
.knopf{--k:var(--salbei-tief);position:relative;display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 30px;border-radius:var(--ecke-rund);border:0;cursor:pointer;
  font:700 var(--f-m)/1 var(--sans);letter-spacing:.01em;color:var(--weiss);text-decoration:none;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#566b5e 0%,var(--k) 55%,#33443a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.18),0 10px 24px -10px rgba(31,42,36,.55),0 2px 4px rgba(31,42,36,.18);
  transition:transform var(--t-kurz) var(--lauf),box-shadow var(--t-kurz) var(--lauf),filter var(--t-kurz)}
.knopf::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,rgba(235,211,203,.38) 50%,transparent 65%);transform:translateX(-120%);animation:schimmer 5.5s var(--lauf) infinite 1.5s}
.knopf .pfeil{transition:transform var(--t-kurz) var(--lauf)}
.knopf:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -2px 0 rgba(0,0,0,.18),0 16px 30px -12px rgba(31,42,36,.6),0 2px 4px rgba(31,42,36,.18)}
.knopf:hover .pfeil{transform:translateX(4px)}
.knopf:active{transform:translateY(1px);filter:brightness(.95);box-shadow:inset 0 2px 6px rgba(0,0,0,.25)}
.knopf:focus-visible{outline:3px solid var(--rose-tief);outline-offset:4px}
.knopf[disabled],.knopf.aus{background:#c9ccc4;color:#7d8079;box-shadow:none;cursor:not-allowed}
.knopf[disabled]::after,.knopf.aus::after{display:none}
.knopf.hell{--k:var(--rose);color:var(--erde);background:linear-gradient(180deg,#f6e6e0 0%,var(--rose) 55%,#dcbcb1 100%)}
@keyframes schimmer{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}}
.textlink{font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--rose-tief);padding-bottom:2px}
.textlink:hover{border-color:var(--erde)}
/* Formular */
.feld{display:grid;gap:6px;margin-bottom:var(--r3)}
.feld label{font-size:var(--f-s);font-weight:700}
.feld input,.feld textarea{font:inherit;color:var(--erde);background:var(--weiss);border:1.5px solid #d6d0c7;border-radius:var(--ecke-m);padding:14px 16px;min-height:54px;transition:border-color var(--t-kurz),box-shadow var(--t-kurz)}
.feld textarea{min-height:120px;resize:vertical}
.feld input:hover,.feld textarea:hover{border-color:var(--salbei)}
.feld input:focus,.feld textarea:focus{outline:0;border-color:var(--salbei-tief);box-shadow:0 0 0 4px rgba(143,160,140,.28)}
.feld.fehler input{border-color:#a5483c;box-shadow:0 0 0 4px rgba(165,72,60,.12)}
.feld .hinweis{font-size:var(--f-xs);color:var(--erde-weich)}
.feld.fehler .hinweis{color:#a5483c}
.haken{display:flex;gap:10px;align-items:flex-start;font-size:var(--f-xs);color:var(--erde-weich)}
.haken input{width:20px;height:20px;accent-color:var(--salbei-tief);margin-top:2px}
/* Icon: 1,5er Linie, runde Enden, Salbei */
.icon{width:28px;height:28px;stroke:var(--salbei-tief);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* Logo */
.logo{display:inline-flex;align-items:baseline;gap:.08em;font-family:var(--serif);font-weight:400;letter-spacing:.02em;color:var(--erde);text-decoration:none;font-size:26px;line-height:1}
.logo .re{font-weight:400;letter-spacing:.06em}
.logo .strich{display:inline-block;width:1.05em;height:.07em;background:var(--rose-tief);margin:0 .12em;transform:translateY(-.3em);border-radius:2px}
.logo .rest{font-style:italic;font-weight:400}
.logo-zusatz{display:block;font:700 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--erde-weich);margin-top:7px}
.dunkel .logo,.dunkel .logo-zusatz{color:var(--kalk)}
.dunkel .logo .strich{background:var(--rose)}
.einblenden{opacity:0;transform:translateY(24px);transition:opacity var(--t-lang) var(--lauf),transform var(--t-lang) var(--lauf)}
.einblenden.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.einblenden{opacity:1;transform:none}}

.logo .logo-svg{height:1.5em;width:auto;display:block;overflow:visible}
@media (max-width:600px){.w-kopf .logo .logo-svg{height:1.15em}}
@media (max-width:380px){.w-kopf .logo .logo-svg{height:.98em}}