/* ==========================================================================
   ANYA POLEZHAEVA · Einwilligungsseite (Gestaltung "Weißraum")
   Gleiche Tokens wie die Startseite. Ruhiges, weißes Produktformular.

   PALETTE   --paper #FFF · --warm #F8F6F2 · --ink #24211E · --muted #6A635C
             --line #E6E0D8 · --clay #9C6B4E (nur: Häkchen-Kästchen, Fokus,
             Hover, kleine Markierungen)
   SCHRIFT   Jost 400-600 für alles Funktionale, Newsreader 500 für Titel,
             Newsreader-Kursive für die getippte Unterschrift.
   LAYOUT    Desktop: Formular in Spalten 1-8, rechts (9-12) eine mitlaufende
             Zusammenfassung mit Absende-Button. Mobil: dieselbe Zusammenfassung
             als feste Leiste unten ("Du erlaubst: Instagram, Website" + Button).
             Erlaubnisse sind breite Zeilen mit großem quadratischem Kästchen
             links, das sich in Ton (clay) füllt und ein Häkchen zeichnet.
   QUITTUNG  wie ein Museumsetikett: zentriert, viel Weiß, Haarlinien,
             Referenznummer, druckbar (nur die Karte wird gedruckt).
   ========================================================================== */
:root{
  --paper:#FFFFFF; --warm:#F8F6F2; --ink:#24211E; --muted:#6A635C; --line:#E6E0D8;
  --clay:#9C6B4E; --error:#A3392B;
  --sans:'Jost', ui-sans-serif, system-ui, sans-serif;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --max:1240px; --gut:clamp(16px, 4.2vw, 48px); --gap:24px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --bar-h:0px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased; padding-bottom:var(--bar-h); }
@media (min-width:960px){ body{ font-size:18px; } }
img{ display:block; max-width:100%; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; }
.wrap{ width:100%; max-width:calc(var(--max) + 2 * var(--gut)); margin-inline:auto; padding-inline:var(--gut); }
h1,h2,h3{ font-family:var(--serif); font-weight:500; margin:0; text-wrap:balance; }
h1 em,h2 em{ font-style:italic; }
p{ margin:0 0 1em; }
.kicker{ font:500 12px/1.4 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin:0 0 18px; }
.kicker .n{ color:var(--ink); margin-right:.9em; }
.tlink{ text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat; padding-bottom:2px; transition:color .25s; }
.tlink:hover{ color:var(--clay); }
.sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* header */
.head .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:16px; }
@media (min-width:960px){ .head .wrap{ height:88px; } }
.brand{ text-decoration:none; display:flex; flex-direction:column; gap:2px; padding:6px 0; }
.brand b{ font:500 13px/1.2 var(--sans); letter-spacing:.22em; text-transform:uppercase; white-space:nowrap; }
.brand span{ font-size:12px; line-height:1.2; color:var(--muted); letter-spacing:.04em; }
@media (min-width:960px){ .brand b{ font-size:15px; letter-spacing:.28em; } .brand span{ font-size:13px; } }
.head-right{ display:flex; align-items:center; gap:clamp(8px, 3vw, 40px); }
.back{ font-size:15px; letter-spacing:.02em; display:none; }
/* Sprachumschalter DE / RU (site/lang.js merkt sich die Wahl) */
.lang{ display:flex; align-items:center; font:500 12px/1 var(--sans); letter-spacing:.16em; }
.lang a{ position:relative; display:inline-flex; align-items:center; min-height:44px; padding:0 8px; text-decoration:none; color:var(--muted); transition:color .25s; }
.lang a:hover{ color:var(--clay); }
.lang a[aria-current]{ color:var(--ink); }
.lang a + a::before{ content:""; position:absolute; left:0; top:50%; width:1px; height:12px; margin-top:-6px; background:#CFC7BC; }
@media (min-width:600px){ .back{ display:inline; } }

/* layout */
.layout{ display:grid; grid-template-columns:minmax(0,1fr); column-gap:var(--gap); padding-bottom:clamp(56px, 8vw, 120px); }
@media (min-width:1000px){ .layout{ grid-template-columns:repeat(12, minmax(0,1fr)); } .main{ grid-column:1/9; } .aside{ grid-column:9/13; } }
.intro{ padding:clamp(24px, 5vw, 72px) 0 clamp(28px, 4vw, 48px); }
.intro h1{ font-size:clamp(2.3rem, 1.5rem + 3.2vw, 4.2rem); line-height:1.04; letter-spacing:-.015em; max-width:15ch; margin-bottom:28px; }
.intro p{ max-width:34em; color:var(--muted); }
.intro .meta{ display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:24px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.intro .meta span{ display:inline-flex; align-items:center; gap:10px; }
.intro .meta span::before{ content:""; width:14px; height:1px; background:var(--clay); }

.blk{ border-top:1px solid var(--ink); padding-top:28px; margin-top:clamp(40px, 5vw, 64px); }
.bh{ flex-direction:column-reverse; align-items:flex-start!important; gap:10px!important; }
@media (min-width:640px){ .bh{ flex-direction:row; align-items:baseline!important; } }
.blk-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 24px; margin-bottom:24px; }
.blk h2{ font-size:clamp(1.6rem, 1.2rem + 1.3vw, 2.3rem); line-height:1.12; }
.blk .hint{ color:var(--muted); font-size:15px; margin:-12px 0 24px; max-width:36em; }

/* fields */
.fields{ display:grid; grid-template-columns:1fr; gap:30px var(--gap); }
@media (min-width:640px){ .fields{ grid-template-columns:1fr 1fr; } .fields .full{ grid-column:1/-1; } }
.field label.lab{ display:block; font:500 12px/1.4 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.field label i{ font-style:normal; color:var(--clay); }
.field .opt{ text-transform:none; letter-spacing:.02em; font-weight:400; }
.field input[type=text],.field input[type=email],.field input[type=date],.field select{ width:100%; min-height:52px; border:0; border-bottom:1px solid #8F877E; border-radius:0; background:transparent; padding:10px 0 12px; font:400 19px/1.4 var(--sans); color:var(--ink); -webkit-appearance:none; appearance:none; }
.field select{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' fill='none' stroke='%2324211E' stroke-width='1.2'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E") right 4px center no-repeat; padding-right:28px; cursor:pointer; }
.field select:invalid,.field select option[value=""]{ color:#7A7168; }
.field select option{ color:var(--ink); }
.field select.empty{ color:#7A7168; }
.field input::placeholder{ color:#7A7168; }
.field input:focus,.field select:focus{ outline:none; border-bottom-color:var(--ink); box-shadow:0 1px 0 0 var(--ink); }
.field input:focus-visible,.field select:focus-visible{ border-bottom-color:var(--clay); box-shadow:0 2px 0 0 var(--clay); }
.field .err{ display:none; color:var(--error); font-size:14px; margin:8px 0 0; }
.field.invalid input{ border-bottom-color:var(--error); }
.field.invalid .err{ display:block; }

/* permission rows */
.shortcuts{ display:flex; gap:4px 20px; font-size:14px; }
.shortcuts button{ background:none; border:0; padding:0; min-height:44px; color:var(--muted); cursor:pointer; letter-spacing:.02em; }
.shortcuts button span{ background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat; padding-bottom:2px; }
.shortcuts button:hover{ color:var(--clay); }
.perms{ list-style:none; margin:0; padding:0; border-bottom:1px solid var(--line); }
.perm{ position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:20px; align-items:center; padding:22px 4px 22px 0; border-top:1px solid var(--line); cursor:pointer; transition:background .25s; }
@media (min-width:640px){ .perm{ grid-template-columns:auto 1fr auto; column-gap:28px; padding:26px 0; } }
.perm:hover{ background:var(--warm); box-shadow:-12px 0 0 var(--warm), 12px 0 0 var(--warm); }
.perm input{ position:absolute; opacity:0; width:1px; height:1px; }
.box{ width:34px; height:34px; border:1.5px solid #8F877E; background:var(--paper); display:grid; place-items:center; transition:background .25s var(--ease), border-color .25s; flex:none; }
.box svg{ width:20px; height:20px; }
.box path{ fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .35s var(--ease) .08s; }
.perm input:checked ~ .box{ background:var(--clay); border-color:var(--clay); }
.perm input:checked ~ .box path{ stroke-dashoffset:0; }
.perm input:focus-visible ~ .box{ outline:2px solid var(--clay); outline-offset:3px; }
.perm .t b{ display:block; font-weight:500; font-size:18px; line-height:1.3; }
.perm .t span{ display:block; color:var(--muted); font-size:15px; line-height:1.45; margin-top:4px; }
.perm .state{ display:none; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); white-space:nowrap; min-width:7.5em; text-align:right; }
@media (min-width:640px){ .perm .state{ display:block; } }
.perm input:checked ~ .state{ color:var(--clay); }
.perm .state .on{ display:none; }
.perm input:checked ~ .state .on{ display:inline; }
.perm input:checked ~ .state .off{ display:none; }

.radio-q{ margin-top:36px; border:0; padding:0; min-width:0; }
.radio-q legend{ font-weight:500; font-size:18px; padding:0; margin-bottom:6px; }
.radio-q p{ color:var(--muted); font-size:15px; margin:0 0 14px; }
.radios{ display:flex; flex-wrap:wrap; gap:12px; }
.radios label{ position:relative; cursor:pointer; }
.radios input{ position:absolute; opacity:0; width:1px; height:1px; }
.radios span{ display:inline-flex; align-items:center; gap:12px; min-height:52px; padding:0 22px 0 16px; border:1px solid var(--line); font-size:16px; transition:border-color .2s, background .2s; }
.radios span::before{ content:""; width:18px; height:18px; border-radius:50%; border:1.5px solid #8F877E; transition:border .2s, box-shadow .2s; }
.radios label:hover span{ border-color:var(--ink); }
.radios input:checked + span{ border-color:var(--ink); background:var(--warm); }
.radios input:checked + span::before{ border:5px solid var(--clay); }
.radios input:focus-visible + span{ outline:2px solid var(--clay); outline-offset:2px; }

.reveal{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); }
.reveal > div{ overflow:hidden; }
.reveal.open{ grid-template-rows:1fr; }
.kids-panel{ padding:20px 0 4px 54px; }
@media (min-width:640px){ .kids-panel{ padding-left:62px; } }
.kids-panel p{ color:var(--muted); font-size:15px; max-width:34em; }
.kids-panel .custody{ margin:18px 0 28px; }
.blk .privacy-hint{ margin:16px 0 0; font-size:14px; }

/* good to know */
details.know{ border-top:1px solid var(--ink); margin-top:clamp(40px, 5vw, 64px); }
details.know summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:24px 0; cursor:pointer; min-height:44px; }
details.know summary::-webkit-details-marker{ display:none; }
details.know summary h2{ font-size:clamp(1.6rem, 1.2rem + 1.3vw, 2.3rem); line-height:1.12; }
details.know summary .pm{ width:18px; height:18px; position:relative; flex:none; }
details.know summary .pm::before,details.know summary .pm::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1.2px; background:var(--ink); transition:transform .3s var(--ease); }
details.know summary .pm::after{ transform:rotate(90deg); }
details.know[open] summary .pm::after{ transform:rotate(0); }
.know ul{ list-style:none; margin:0; padding:0; font-size:16px; }
.know li{ display:grid; grid-template-columns:24px 1fr; gap:8px; padding:12px 0; border-top:1px solid var(--line); color:var(--ink); }
.know li::before{ content:""; width:12px; height:1px; background:var(--clay); margin-top:.8em; }
.know li small{ color:var(--muted); font-size:14px; }

/* signature */
.sig-typed input{ font:italic 500 clamp(1.6rem, 1.3rem + 1vw, 2.1rem)/1.2 var(--serif)!important; padding-bottom:8px!important; }
.pad-wrap{ margin-top:30px; }
.pad-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.pad-head button{ background:none; border:0; padding:0 0 0 12px; min-height:44px; font-size:14px; color:var(--muted); cursor:pointer; }
.pad-head button span{ background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat; padding-bottom:2px; }
.pad-head button:hover{ color:var(--clay); }
.pad{ position:relative; height:180px; background:var(--warm); border:1px solid var(--line); touch-action:none; cursor:crosshair; }
.pad canvas{ position:absolute; inset:0; width:100%; height:100%; }
.pad .base{ position:absolute; left:24px; right:24px; bottom:44px; border-top:1px solid #CFC7BC; pointer-events:none; }
.pad .ph{ position:absolute; left:24px; bottom:16px; font-size:13px; color:var(--muted); pointer-events:none; transition:opacity .3s; }
.pad.has .ph{ opacity:0; }
.signed-date{ display:flex; gap:12px; align-items:baseline; margin-top:22px; font-size:15px; color:var(--muted); }
.signed-date b{ color:var(--ink); font-weight:500; }

/* aside summary: sticky on desktop, fixed bar on mobile */
.aside{ position:relative; }
.sum{ position:fixed; z-index:30; left:0; right:0; bottom:0; background:rgba(255,255,255,.97); backdrop-filter:blur(8px); border-top:1px solid var(--line); box-shadow:0 -10px 30px rgba(36,33,30,.06); padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom)); }
.sum .k,.sum .rows,.sum .note{ display:none; }
.sum .live{ font-size:14px; line-height:1.35; margin:0 0 10px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sum .live b{ color:var(--ink); font-weight:500; }
.btn{ display:flex; width:100%; align-items:center; justify-content:center; gap:14px; min-height:54px; padding:0 28px; border:1px solid var(--ink); background:var(--ink); color:#fff; font:500 14px var(--sans); letter-spacing:.18em; text-transform:uppercase; cursor:pointer; transition:background .25s, color .25s; text-decoration:none; }
.btn:hover{ background:transparent; color:var(--ink); }
.btn svg{ width:26px; height:10px; flex:none; }
@media (min-width:1000px){
  .sum{ position:sticky; top:32px; left:auto; right:auto; bottom:auto; margin-top:clamp(24px, 5vw, 72px); padding:28px 0 0; background:none; backdrop-filter:none; box-shadow:none; border-top:1px solid var(--ink); }
  .sum .k{ display:block; }
  .sum .rows{ display:block; list-style:none; margin:0 0 20px; padding:0; font-size:15px; }
  .sum .rows li{ display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
  .sum .rows li span:last-child{ color:var(--muted); white-space:nowrap; }
  .sum .rows li.on span:last-child{ color:var(--clay); }
  .sum .rows li:first-child{ border-top:1px solid var(--line); }
  .sum .live{ font-size:16px; margin-bottom:20px; -webkit-line-clamp:unset; display:block; }
  .sum .note{ display:block; font-size:13px; color:var(--muted); margin:14px 0 0; }
}
.form-errors{ color:var(--error); font-size:14px; margin:0 0 10px; display:none; }
.form-errors.show{ display:block; }

/* ---------- receipt (museum label) ---------- */
.receipt-page{ padding-block:clamp(40px, 7vw, 112px) clamp(64px, 9vw, 140px); }
[hidden]{ display:none!important; }
.r-top{ text-align:center; max-width:560px; margin:0 auto 36px; }
.r-top .ok{ width:56px; height:56px; margin:0 auto 22px; border:1.5px solid var(--clay); border-radius:50%; display:grid; place-items:center; }
.r-top .ok svg{ width:24px; height:24px; }
.r-top .ok path{ fill:none; stroke:var(--clay); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:30; stroke-dashoffset:30; animation:draw .6s var(--ease) .2s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.r-top h1{ font-size:clamp(2rem, 1.5rem + 2vw, 3rem); line-height:1.08; margin-bottom:14px; }
.r-top p{ color:var(--muted); margin:0; }
.r-top .kicker{ margin-bottom:14px; }
.card{ max-width:560px; margin:0 auto; background:var(--paper); border:1px solid var(--line); padding:clamp(24px, 6vw, 52px); box-shadow:0 1px 0 var(--line), 0 30px 60px -40px rgba(36,33,30,.25); }
.card .c-head{ display:flex; justify-content:space-between; gap:12px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); padding-bottom:22px; border-bottom:1px solid var(--line); }
.card .c-head b{ white-space:nowrap; color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:.14em; }
.card h2{ font-size:clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); line-height:1.08; margin:28px 0 6px; overflow-wrap:anywhere; }
.card .sub{ font:italic 500 1.1rem/1.4 var(--serif); color:var(--muted); margin:0 0 26px; }
.card dl{ margin:0; font-size:15px; }
.card dl div{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:11px 0; border-top:1px solid var(--line); }
.card dt{ color:var(--ink); }
.card dd{ margin:0; white-space:nowrap; color:var(--muted); display:flex; align-items:center; gap:8px; }
.card dd.yes{ color:var(--clay); font-weight:500; }
.card dd .mk{ font-size:14px; }
.card .group{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:24px 0 8px; }
.card .sign{ margin-top:26px; padding-top:20px; border-top:1px solid var(--ink); }
.card .sign .typed{ font:italic 500 1.7rem/1.2 var(--serif); overflow-wrap:anywhere; }
.card .sign img{ max-width:min(100%, 300px); height:auto; margin:6px 0 0; }
.card .sign small{ display:block; color:var(--muted); font-size:13px; margin-top:10px; }
.card .nothing{ font:italic 500 1.15rem/1.4 var(--serif); margin:18px 0 0; }
.r-foot{ max-width:560px; margin:32px auto 0; text-align:center; }
.r-foot p{ color:var(--muted); font-size:15px; }
.r-foot p b{ color:var(--ink); font-weight:500; overflow-wrap:anywhere; }
.r-actions{ display:flex; flex-wrap:wrap; gap:16px 28px; justify-content:center; align-items:center; margin-top:24px; }
.r-actions .btn{ width:auto; }
.r-actions a{ font-size:15px; padding:12px 0; }

.foot{ border-top:1px solid var(--line); background:var(--warm); padding:28px 0 calc(28px + env(safe-area-inset-bottom)); font-size:13px; color:var(--muted); }
.foot .wrap{ align-items:center; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; }
.foot a{ text-decoration:none; padding:12px 0; }
.foot a:hover{ color:var(--clay); }
.foot nav{ display:flex; gap:20px; }

.hp{ position:absolute!important; left:-10000px; width:1px; height:1px; overflow:hidden; }
.layout.busy .btn{ opacity:.55; cursor:progress; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms!important; animation-duration:.01ms!important; animation-delay:0s!important; }
}
@media print{
  body{ padding:0; background:#fff; }
  body > *:not(main){ display:none!important; }
  main > *:not(.receipt-page){ display:none!important; }
  .r-top .ok,.r-actions,.r-foot{ display:none!important; }
  .receipt-page{ padding:0; }
  .r-top{ margin-bottom:16px; }
  .card{ box-shadow:none; border-color:#ccc; max-width:none; }
}
/* Version der Website im Fuß (_tools/version.py erhöht sie überall) */
.ver{ margin-left:.9em; padding-left:.9em; border-left:1px solid var(--line); letter-spacing:.06em; font-variant-numeric:tabular-nums; }