/* hilfmirmal v11 · Kurs-Tor (weiches E-Mail-Tor vor den Kursen). Verhalten: assets/v11/kurs-tor.js.
   Nur Selektoren mit hmm-tor-Klassen bzw. dialog.hmm-tor, damit nichts mit dem Kurs-CSS (n8n, KI-Manager
   samt Dunkelmodus) kollidiert. Die Regeln sind bewusst etwas spezifischer (dialog.hmm-tor …) als die
   Element- und Themenregeln der Kurse (label, h2, button, [data-theme] …). Der Dialog ist immer hell.
   Zwei Ausnahmen mit der Klasse .hmm-kurs-gesperrt aus dem Vertrag (deploy/kurs-zugang.md): im Druck blendet
   html[data-hmm-kurs-zugang="gesperrt"] die gesperrten Teile aus, und html.hmm-tor-vorab verbirgt sie, bis das Tor steht.
   Farben, Schriften und Radien aus designsystem/tokens.json, hier als --hmm-* gespiegelt. */

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../../fonts/InstrumentSerif-Regular.woff2?v=60c06664') format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('../../fonts/Inter-400.woff2?v=48a0c250') format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url('../../fonts/Inter-500.woff2?v=a1eab7f4') format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url('../../fonts/Inter-600.woff2?v=9a3d22c4') format('woff2')}

/* ---------- Tokens (nur im Tor gültig) ---------- */
dialog.hmm-tor{
  --hmm-paper:#fdfdfc;
  --hmm-sky-2:#9fcdee;
  --hmm-sky-pale:#e8f4fd;
  --hmm-sky-air:#f3f9fe;
  --hmm-ink:#1d2b36;
  --hmm-ink-2:#3e4f5b;
  --hmm-ink-3:#5f6e79;
  --hmm-blue:#3f6f8f;
  --hmm-blue-deep:#2f5a76;
  --hmm-line:rgba(29,43,54,.12);
  --hmm-card-shadow:0 40px 90px -50px rgba(29,43,54,.38);
  --hmm-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --hmm-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --hmm-ease:cubic-bezier(.16,1,.3,1);
}
.hmm-tor,.hmm-tor *{box-sizing:border-box}
.hmm-tor-offen{overflow:hidden}

/* Kein Aufblitzen auf ganz gesperrten Seiten: Das Kopf-Schnipsel setzt html.hmm-tor-vorab, solange der Kurs nicht frei
   ist; kurs-tor.js nimmt die Klasse weg, sobald das Tor steht. Lädt das Skript nicht, zeigt die Animation den Inhalt
   nach 4 s trotzdem (fail-open wie das Tor). Unsichtbar statt ausgeblendet: kein Sprung im Layout. */
html.hmm-tor-vorab .hmm-kurs-gesperrt{visibility:hidden;animation:hmm-tor-vorab 0s linear 4s forwards}
@keyframes hmm-tor-vorab{to{visibility:visible}}

/* ---------- Dialog ---------- */
/* Natives <dialog> mit showModal(): Top-Layer über Kopf, Seitenleiste und Kursmenü, der Rest ist inert. */
dialog.hmm-tor{position:fixed;inset:0;width:min(31rem,calc(100% - 32px));max-width:none;height:auto;height:fit-content;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:26px;background:var(--hmm-paper);color:var(--hmm-ink);color-scheme:light;font-family:var(--hmm-sans);font-size:1rem;font-weight:400;line-height:1.5;letter-spacing:0;text-align:left;text-transform:none;overflow:auto;overscroll-behavior:contain;box-shadow:var(--hmm-card-shadow),0 0 0 1px var(--hmm-line)}
dialog.hmm-tor:not([open]){display:none}
dialog.hmm-tor::backdrop{background:rgba(29,43,54,.55)}

dialog.hmm-tor .hmm-tor-form{display:flex;flex-direction:column;margin:0;padding:clamp(22px,5vw,36px)}

/* Kopf: Eriks gezeichnetes Porträt, darunter seine Blase (er spricht hier selbst) */
dialog.hmm-tor .hmm-tor-kopf{display:flex;align-items:center;gap:.9rem;margin:0}
dialog.hmm-tor .hmm-tor-avatar{display:block;flex:none;width:56px;height:56px;max-width:none;margin:0;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--hmm-paper),0 0 0 3.5px var(--hmm-sky-2)}
dialog.hmm-tor .hmm-tor-kopftext{min-width:0}
dialog.hmm-tor .hmm-tor-kicker{display:block;margin:0 0 .25rem;color:var(--hmm-blue-deep);font:600 .74rem/1.3 var(--hmm-sans);letter-spacing:.14em;text-transform:uppercase}
dialog.hmm-tor .hmm-tor-kicker[hidden]{display:none}
dialog.hmm-tor .hmm-tor-titel{margin:0;padding:0;color:var(--hmm-ink);font-family:var(--hmm-serif);font-size:clamp(1.9rem,1.55rem + 1.3vw,2.45rem);font-style:normal;font-weight:400;line-height:1.05;letter-spacing:-.01em;text-transform:none;text-wrap:balance}
dialog.hmm-tor .hmm-tor-text{margin:1.1rem 0 0;padding:.85rem 1.1rem;border-radius:6px 20px 20px 20px;background:var(--hmm-sky-pale);color:var(--hmm-ink-2);font-size:1rem;font-weight:400;line-height:1.5}
dialog.hmm-tor .hmm-tor-nobr{white-space:nowrap}
dialog.hmm-tor .hmm-tor-fein{margin:.6rem 0 0;color:var(--hmm-ink-3);font-size:.88rem;line-height:1.45}
dialog.hmm-tor .hmm-tor-link{color:var(--hmm-blue-deep);font-weight:500;text-decoration:underline;text-underline-offset:.2em}
dialog.hmm-tor .hmm-tor-link:hover{color:var(--hmm-ink)}

/* Feld */
dialog.hmm-tor .hmm-tor-gruppe{margin:1.3rem 0 0}
dialog.hmm-tor .hmm-tor-label{display:block;margin:0 0 .45rem;padding:0;color:var(--hmm-blue-deep);font:600 .76rem/1.3 var(--hmm-sans);letter-spacing:.12em;text-transform:uppercase}
dialog.hmm-tor .hmm-tor-feld{display:block;width:100%;min-height:52px;margin:0;padding:.75rem 1rem;border:1.5px solid var(--hmm-ink-3);border-radius:14px;background:var(--hmm-paper);color:var(--hmm-ink);font:400 1.05rem/1.3 var(--hmm-sans);letter-spacing:0;box-shadow:none;-webkit-appearance:none;appearance:none}
dialog.hmm-tor .hmm-tor-feld:focus{outline:2px solid var(--hmm-blue);outline-offset:2px;border-color:var(--hmm-blue);border-radius:14px}
dialog.hmm-tor .hmm-tor-feld[aria-invalid="true"]{border-width:2px;border-color:var(--hmm-blue-deep)}

/* Brief: eigene, freiwillige Einwilligung */
dialog.hmm-tor .hmm-tor-wahl{display:flex;align-items:flex-start;gap:.75rem;min-height:44px;margin:1rem 0 0;padding:.25rem 0;color:var(--hmm-ink);font-size:.98rem;font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none;cursor:pointer}
dialog.hmm-tor .hmm-tor-haken{flex:none;width:22px;height:22px;margin:.05rem 0 0;padding:0;accent-color:var(--hmm-blue-deep);cursor:pointer}
dialog.hmm-tor .hmm-tor-haken:focus-visible{outline:2px solid var(--hmm-blue);outline-offset:3px;border-radius:4px}
dialog.hmm-tor .hmm-tor-wahl-text{display:flex;flex-direction:column;gap:.1rem}
dialog.hmm-tor .hmm-tor-wahl-haupt{color:var(--hmm-ink)}
dialog.hmm-tor .hmm-tor-wahl-fein{color:var(--hmm-ink-3);font-size:.86rem;font-weight:400}

/* Honigtopf: für Menschen unsichtbar und nicht fokussierbar */
dialog.hmm-tor .hmm-tor-falle{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Fehler (Live-Region role=alert). Leer bleibt sie im Baum, nimmt aber keinen Platz ein. Kein Fehlerrot im
   Designsystem: Text plus Balken in blue-deep. */
dialog.hmm-tor .hmm-tor-fehler{margin:1rem 0 0;padding:.7rem 1rem;border-left:3px solid var(--hmm-blue-deep);border-radius:4px 12px 12px 4px;background:var(--hmm-sky-pale);color:var(--hmm-ink);font-size:.95rem;font-weight:600;line-height:1.4}
dialog.hmm-tor .hmm-tor-fehler:empty{margin:0;padding:0;border:0;background:none}

/* Knöpfe */
dialog.hmm-tor .hmm-tor-aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;margin:1.4rem 0 0}
dialog.hmm-tor .hmm-tor-los{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:52px;margin:0;padding:.7rem 1.5rem .7rem 1.7rem;border:1.5px solid var(--hmm-ink);border-radius:999px;background:var(--hmm-ink);color:var(--hmm-paper);font:600 1.02rem/1.2 var(--hmm-sans);letter-spacing:0;text-transform:none;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color .25s,border-color .25s}
dialog.hmm-tor .hmm-tor-los::after{content:"";flex:none;width:.42rem;height:.42rem;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
dialog.hmm-tor .hmm-tor-los:hover{background:var(--hmm-blue);border-color:var(--hmm-blue)}
dialog.hmm-tor[aria-busy="true"] .hmm-tor-los{opacity:.72;cursor:progress}
dialog.hmm-tor .hmm-tor-zurueck{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:.4rem .25rem;border:0;border-radius:8px;background:none;color:var(--hmm-ink-2);font:500 .95rem/1.2 var(--hmm-sans);letter-spacing:0;text-transform:none;text-decoration:underline;text-underline-offset:.25em;cursor:pointer;-webkit-appearance:none;appearance:none}
dialog.hmm-tor .hmm-tor-zurueck:hover{color:var(--hmm-blue-deep)}

/* Tastaturrahmen wie in der Schale */
dialog.hmm-tor .hmm-tor-los:focus-visible{outline:2px solid var(--hmm-blue);outline-offset:3px;border-radius:999px}
dialog.hmm-tor .hmm-tor-zurueck:focus-visible,dialog.hmm-tor .hmm-tor-link:focus-visible{outline:2px solid var(--hmm-blue);outline-offset:3px;border-radius:6px}

/* ---------- Schmal (Handy, ab 320 px) ---------- */
@media (max-width:479px){
  dialog.hmm-tor{width:calc(100% - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);border-radius:22px}
  dialog.hmm-tor .hmm-tor-form{padding:22px 18px 18px}
  dialog.hmm-tor .hmm-tor-avatar{width:48px;height:48px}
  dialog.hmm-tor .hmm-tor-aktionen{flex-direction:column;align-items:stretch}
  dialog.hmm-tor .hmm-tor-los{width:100%}
}

/* ---------- Bewegung: nur ohne reduced-motion ---------- */
@media (prefers-reduced-motion:no-preference){
  dialog.hmm-tor[open]{animation:hmm-tor-ein .42s var(--hmm-ease)}
  dialog.hmm-tor[open]::backdrop{animation:hmm-tor-blende .3s ease}
}
@keyframes hmm-tor-ein{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes hmm-tor-blende{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  dialog.hmm-tor .hmm-tor-los{transition:none}
}

/* Erzwungene Farben (Windows-Kontrastmodus): Rahmen sichtbar halten */
@media (forced-colors:active){
  dialog.hmm-tor{border:2px solid CanvasText}
  dialog.hmm-tor .hmm-tor-fehler:not(:empty){border:2px solid CanvasText}
}

@media print{
  dialog.hmm-tor{display:none!important}
  /* Gesperrte Teile druckt nur, wer freigeschaltet ist (wie im KI-Manager; passt zur JSON-LD-Markierung) */
  html[data-hmm-kurs-zugang="gesperrt"] .hmm-kurs-gesperrt{display:none!important}
}