/* [EINWILLIGUNG-DOI 2026-11-01] /anmelden/, /anmelden/bestaetigt/, /anmelden/abgemeldet/.
   Erweitert hiddin-light.css (Tokens, .btn, .field, .form-card, .form-msg); hier nur, was diese Seiten brauchen. */
:root{--an-ease:cubic-bezier(.23,1,.32,1)}
::selection{background:var(--green-md);color:var(--forest)}
.an-page{min-height:100svh;display:flex;flex-direction:column}
.an-top{display:flex;justify-content:space-between;align-items:center;width:100%;padding-block:16px}
/* Tap-Ziele mindestens 44 px (global: Sprachknoepfe 38x34, Logo 34 hoch) */
.an-top .nav-logo{min-height:44px}
.an-top .lang-btn{min-width:44px;min-height:44px}
.an-page main{flex:1;padding:clamp(12px,5vh,56px) 0 56px}

/* Mobil: Kopf, Formular, Ablauf, App-Ausschnitte untereinander. Ab 960px: links Kopf, Ablauf und App, rechts das Formular. */
.an-grid{display:grid;grid-template-areas:"head" "form" "steps" "shots";row-gap:32px;max-width:560px;margin:0 auto}
.an-head{grid-area:head}
.an-form{grid-area:form}
.an-steps{grid-area:steps}
.an-shots{grid-area:shots}
@media (min-width:960px){
  .an-grid{max-width:1140px;grid-template-columns:minmax(0,1fr) minmax(0,500px);grid-template-areas:"head form" "steps form" "shots form";grid-template-rows:auto auto 1fr;column-gap:clamp(48px,6vw,96px);row-gap:44px;align-items:start}
  .an-head{padding-top:12px}
}

.an-head h1{font-family:var(--head);font-weight:800;font-size:clamp(2.25rem,5.4vw,4.75rem);line-height:1.02;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.an-head h1 em{font-family:var(--display);font-weight:400;font-style:italic;letter-spacing:-.01em;color:var(--ember-dark)}
.an-head .an-lead{margin-top:16px;max-width:38ch;font-size:1.125rem;line-height:1.55;color:var(--ink2)}

.an-steps h2{font-family:var(--head);font-weight:700;font-size:1.375rem;letter-spacing:-.01em;color:var(--ink);margin-bottom:16px}
.an-steps ol{list-style:none;display:grid;gap:18px;counter-reset:an-step}
.an-steps li{display:grid;grid-template-columns:32px 1fr;column-gap:14px;counter-increment:an-step}
.an-steps li::before{content:counter(an-step);grid-row:span 2;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--green-lt);color:var(--forest);font-family:var(--head);font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums}
.an-steps h3{font-family:var(--head);font-weight:600;font-size:1rem;line-height:1.35;color:var(--ink);padding-top:5px}
.an-steps p{font-size:1rem;line-height:1.55;color:var(--ink2);max-width:46ch}

/* Zwei Ausschnitte aus der App, je Rolle einer; die nicht gewaehlte Rolle tritt zurueck */
.an-shots{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0}
.an-shots figure{margin:0}
.an-shots img{display:block;width:100%;height:auto;aspect-ratio:540/760;object-fit:cover;object-position:top;border-radius:20px;background:var(--card);transition:opacity 200ms ease}
.an-shots figcaption{margin-top:10px;font-size:.9375rem;line-height:1.45;color:var(--ink2);transition:color 200ms ease}
.an-shots figcaption strong{display:block;font-family:var(--head);font-weight:700;color:var(--ink);transition:color 200ms ease}
/* Nur das Bild tritt zurueck (auf dem Kind, weil die Auftritts-Animation der figure ihre Deckkraft festhaelt);
   die Bildunterschrift bleibt Text und wird nur grauer: --ink3 auf --bg 6,3:1 statt 1,97:1 mit opacity */
.an-shots[data-rolle="restaurant"] .an-shot-creator img,.an-shots[data-rolle="creator"] .an-shot-restaurant img{opacity:.4}
.an-shots[data-rolle="restaurant"] .an-shot-creator figcaption,.an-shots[data-rolle="restaurant"] .an-shot-creator figcaption strong,
.an-shots[data-rolle="creator"] .an-shot-restaurant figcaption,.an-shots[data-rolle="creator"] .an-shot-restaurant figcaption strong{color:var(--ink3)}
@media (min-width:960px){.an-shots{max-width:480px}}

/* Einmaliger Auftritt beim Laden: Teile steigen nacheinander auf, ohne Skript und ohne die Bedienung zu sperren */
.an-rise{animation:an-rise 420ms var(--an-ease) both;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes an-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Formular-Karte: wie .form-card, aber ohne Rahmen und Schatten im Ruhezustand */
.an-form .form-card{max-width:none;margin:0;border:0;border-radius:24px;box-shadow:none;padding:clamp(20px,4vw,36px)}
.an-form input,.an-form select{caret-color:var(--forest)}
.an-form .field{margin-bottom:18px}
.an-form .field label{font-size:.95rem}
.an-form .field-hint{font-size:.9375rem;line-height:1.5;color:var(--ink3)}
/* Textfelder: hiddin-light.css setzt den Fokus-Rahmen mit schwaecherer Spezifitaet als den Ruhe-Rahmen,
   darum blieb er grau; hier greift er. Fehler: roter Rahmen und Ton, im Fokus zusaetzlich ein Ring. */
.an-form .form-card input:not([type=checkbox]):not([type=radio]):focus{border-color:var(--green);background:#fff}
.an-form .form-card input[aria-invalid="true"]:not([type=checkbox]):not([type=radio]){border-color:var(--ember-text);background:var(--ember-lt)}
.an-form .form-card input[aria-invalid="true"]:not([type=checkbox]):not([type=radio]):focus{background:#fff;box-shadow:none;outline:2px solid var(--ember-text);outline-offset:2px}
/* Meldung: ueber dem Knopf, oder (anmelden.js verschiebt sie) direkt am Feld */
.an-form .form-msg{margin:0 0 18px;outline-offset:2px}
.an-form .field>.form-msg{margin:0}
.an-form .an-roles>.form-msg{margin:10px 0 0}
.an-form .an-consent+.form-msg{margin:0 0 12px}
.an-form .form-msg:empty{padding:0;margin:0}
.an-notice{border-radius:14px;padding:14px 16px;margin-bottom:22px;background:var(--gold-lt);color:var(--ink);font-size:.95rem;line-height:1.5}

/* Rollen-Auswahl: zwei Kacheln, das native Radio bleibt fokussierbar und wird als Punkt gezeichnet */
.an-roles{border:0;margin:0 0 22px;min-width:0}
.an-roles legend{font-family:var(--head);font-weight:600;font-size:1rem;color:var(--ink);margin-bottom:10px;padding:0}
.an-role-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:479px){.an-role-grid{grid-template-columns:1fr}.an-role{min-height:0}}
.an-role{position:relative;display:grid;grid-template-columns:1fr auto;align-items:start;gap:4px 10px;min-height:92px;padding:14px 14px 16px;border-radius:14px;background:var(--bg);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color 200ms ease,color 200ms ease,transform 160ms var(--an-ease)}
.an-role input{appearance:none;-webkit-appearance:none;grid-column:2;grid-row:1;width:20px;height:20px;margin:1px 0 0;border:2px solid var(--ink3);border-radius:50%;background:var(--card);cursor:pointer;transition:border-color 200ms ease,border-width 200ms ease,background-color 200ms ease}
.an-role input:checked{border:6px solid #fff;background:var(--ember-dark)}
/* Fokusring auf Radio und Checkbox: --ember-dark auf --bg 4,3:1. hiddin-light.css:297 gaebe nur einen
   hellgruenen Schein (1,21:1) und nimmt den Umriss weg. */
.an-form .an-role input:focus,.an-form .an-consent input:focus{box-shadow:none}
.an-form .an-role input:focus-visible{outline:3px solid var(--ember-dark);outline-offset:3px}
/* Gewaehlte Kachel ist --forest: dort waere --ember-dark nur 2,6:1, Weiss steht bei 11:1 */
.an-form .an-role input:checked:focus-visible{outline-color:#fff}
.an-role-t{grid-column:1;grid-row:1;font-family:var(--head);font-weight:700;font-size:1.0625rem;line-height:1.3}
.an-role-d{grid-column:1 / -1;grid-row:2;font-family:var(--body);font-weight:400;font-size:.9375rem;line-height:1.4;color:var(--ink2);transition:color 200ms ease}
.an-role:has(input:checked){background:var(--forest);color:#fff}
.an-role:has(input:checked) .an-role-d{color:rgba(255,255,255,.86)}
.an-role:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.an-role:not(:has(input:checked)):hover{background:var(--green-lt)}}
.an-roles[aria-invalid="true"] .an-role:not(:has(input:checked)){outline:2px solid var(--ember-text);outline-offset:-2px}

/* Einwilligungen: je ein eigener Block, damit klar ist, dass es zwei getrennte Entscheidungen sind */
.an-form label.an-consent{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin-bottom:12px;border-radius:14px;background:var(--bg);font-family:var(--body);font-weight:400;font-size:1rem;line-height:1.55;color:var(--ink);cursor:pointer;transition:color 200ms ease}
.an-consent input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--forest);cursor:pointer;transition:opacity 200ms ease}
.an-form .an-consent input:focus-visible{outline:3px solid var(--ember-dark);outline-offset:2px;border-radius:4px}
.an-form label.an-consent[data-off]{color:var(--ink3);cursor:not-allowed}
.an-consent[data-off] input{opacity:.5;cursor:not-allowed}
.an-consent[data-invalid]{outline:2px solid var(--ember-text);outline-offset:-2px}
.an-privacy{font-size:.9375rem;line-height:1.5;color:var(--ink3);margin:6px 0 22px}
.an-privacy a,.an-done a,.an-msg a{color:var(--forest);text-underline-offset:3px}
/* Links im Fliesstext: die Zeile bleibt wie sie ist, die Trefferflaeche waechst auf 44 px Hoehe */
.an-privacy a,.an-msg p a:not(.btn){position:relative}
.an-privacy a::after,.an-msg p a:not(.btn)::after{content:"";position:absolute;inset:-13px -2px}

.an-submit{min-height:56px;font-size:1.05rem;box-shadow:none;transition:transform 160ms var(--an-ease),background-color 200ms ease,opacity 200ms ease}
.an-submit:hover{box-shadow:none}
.an-submit:active{transform:scale(.97)}
/* aria-disabled statt disabled, damit der Fokus beim Senden auf dem Knopf bleibt */
.an-submit[aria-disabled="true"]{opacity:.7;cursor:default;transform:none}
.an-fine{margin-top:12px;font-size:.9375rem;line-height:1.5;color:var(--ink3);text-align:center}

/* Bestaetigung nach dem Absenden: einmaliger Moment, kurzes Einblenden von unten */
.an-done{text-align:left}
.an-done[data-in]{animation:an-in 260ms var(--an-ease) both}
.an-done-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--green-lt);color:var(--forest);margin-bottom:18px}
.an-done-icon svg{width:24px;height:24px}
.an-done h2{font-family:var(--head);font-weight:800;font-size:clamp(1.6rem,4vw,2rem);letter-spacing:-.02em;line-height:1.1;color:var(--ink);outline:0}
.an-done .an-done-p{margin-top:10px;font-size:1.125rem;line-height:1.5;color:var(--ink)}
.an-done .an-done-addr{margin-top:16px;font-size:1rem;color:var(--ink2);overflow-wrap:anywhere}
.an-done .an-done-addr strong{color:var(--ink);font-weight:600}
.an-done .an-done-note{margin-top:8px;font-size:.95rem;line-height:1.55;color:var(--ink2)}
.an-done .btn{margin-top:22px}
@keyframes an-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Bestaetigt- und Abgemeldet-Seite: eine Spalte */
.an-msg{max-width:640px;margin:0 auto}
/* Ergebnisseiten sind Meldungen, keine Bühne: kleinere Überschrift als auf /anmelden/ */
.an-msg h1{font-size:clamp(2.25rem,4.6vw,3.5rem)}
.an-msg .an-lead{margin-top:16px;font-size:1.125rem;line-height:1.55;color:var(--ink2)}
.an-msg .an-sub{margin-top:14px;font-size:1rem;line-height:1.55;color:var(--ink2)}
.an-msg .store-badges{margin-top:16px}
.an-msg .an-actions{margin-top:32px}
.an-msg .btn{transition:transform 160ms var(--an-ease),border-color 200ms ease}
.an-msg .btn:active{transform:scale(.97)}
.an-app{margin-top:36px;padding:20px;border-radius:20px;background:var(--card)}
.an-app p{font-family:var(--head);font-weight:600;font-size:1.05rem;color:var(--ink)}

/* padding-block: die 24 px links und rechts kommen von .wrap (vorher mit padding:24px 0 ueberschrieben) */
.an-foot{padding-block:12px 24px;font-size:.9375rem;color:var(--ink3)}
.an-foot nav{display:flex;flex-wrap:wrap;gap:0 20px}
.an-foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink3);text-underline-offset:3px}
.an-foot a:hover{color:var(--forest)}
.an-foot .an-credit{margin:0;font-size:.8125rem}
.an-foot .an-credit a{display:inline;min-height:0;text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto} /* anmelden.js holt Feld und Meldung per scrollIntoView ins Bild: dann ohne Gleiten */
  .an-role,.an-submit,.an-msg .btn{transition:background-color 200ms ease,color 200ms ease,opacity 200ms ease}
  .an-role:active,.an-submit:active,.an-msg .btn:active{transform:none}
  .an-done[data-in]{animation:an-fade 200ms ease both}
  .an-rise{animation:an-fade 200ms ease both;animation-delay:0ms}
}
@keyframes an-fade{from{opacity:0}to{opacity:1}}