/* TOMORIS.Design · tomoris-consent.css · FREIWILLIG
   Gestaltung fuer <tm-consent> aus tomoris-measure.js: der Einwilligungsdialog von
   tomoris.com (weisse Karte, orange Oberkante, drei gleichwertige Knoepfe) fuer jede Domain.

   SETZT tomoris-tokens.css VORAUS wie jeder Baustein: Farben kommen nur aus Rollen, damit
   der Dialog Welt und Dunkelmodus der Anwendung traegt. tomoris.com selbst behaelt seinen
   eigenen Dialog (components/tomoris/analytics-consent.tsx) mit demselben Speicher.

   ZWEI ANSICHTEN (BA-594, Befund 67546): beim ersten Besuch kompakt, kurzer Text und zwei
   Knoepfe nebeneinander, mobil gut ein Viertel der Hoehe; "Auswahl im Einzelnen" und die
   Einstellungen im Footer zeigen beide Schalter. Eigene Checkboxen aus den Rollen, damit
   kein Browser sie im Dunkelmodus als gefuellte Flaeche zeichnet; gesperrt mit Hinweis.

   DREI GLEICHWERTIGE KNOEPFE: "Nur notwendig" ist so gross und so sichtbar wie "Alle
   akzeptieren" (DSB-Leitfaden, keine Lenkung ueber Farbe). Der Dialog sperrt die Seite
   nicht; Lesen und Navigieren bleiben moeglich. */
@layer tomoris.components {
  tm-consent{ display:contents }
  .tm-consent{ position:fixed; z-index:1200; inset-inline-end:24px; inset-block-end:24px; box-sizing:border-box;
    width:min(560px, calc(100vw - 48px)); max-height:calc(100dvh - 48px); overflow-y:auto; padding:24px;
    background:var(--tm-surface); color:var(--tm-text-1);
    border:1px solid var(--tm-border-elevated); border-block-start:4px solid var(--tm-brand-3);
    border-radius:var(--tm-radius-card, 0); box-shadow:var(--tm-shadow-overlay);
    font:400 15px/1.5 var(--tm-font, "Nunito Sans", Arial, sans-serif); text-align:start }
  .tm-consent--einzeln{ width:min(680px, calc(100vw - 48px)) }
  .tm-consent__kopf{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px }
  .tm-consent__titel{ margin:0 0 12px; font-family:inherit; font-weight:800; font-size:21px; line-height:1.3; letter-spacing:0; text-transform:none; color:inherit }
  .tm-consent__titel:focus{ outline:none }
  .tm-consent__text{ margin:0 0 16px; font-size:14px; color:inherit }
  .tm-consent a{ color:inherit; text-decoration:underline; text-underline-offset:3px }
  .tm-consent__wahl{ display:grid; gap:12px; margin:16px 0 20px }
  .tm-consent__wahl label{ display:flex; align-items:flex-start; gap:12px; cursor:pointer }
  .tm-consent__wahl input{ appearance:none; -webkit-appearance:none; display:grid; place-content:center; box-sizing:border-box;
    width:20px; height:20px; flex:0 0 20px; margin:2px 0 0; cursor:pointer;
    border:2px solid var(--tm-text-1); border-radius:2px; background:var(--tm-surface);
    transition:background var(--tm-dur-fast, .15s) var(--tm-ease, ease), border-color var(--tm-dur-fast, .15s) var(--tm-ease, ease) }
  .tm-consent__wahl input::after{ content:""; width:6px; height:11px; border:solid var(--tm-brand-4); border-width:0 2.5px 2.5px 0;
    transform:translateY(-1px) rotate(45deg) scale(0); transition:transform .12s ease-out }
  .tm-consent__wahl input:checked{ background:var(--tm-brand-3); border-color:var(--tm-brand-3) }
  .tm-consent__wahl input:checked::after{ transform:translateY(-1px) rotate(45deg) scale(1) }
  .tm-consent__wahl input:disabled{ cursor:not-allowed; border-color:var(--tm-border-strong); background:var(--tm-surface-2) }
  .tm-consent__gesperrt{ cursor:not-allowed }
  .tm-consent__gesperrt strong, .tm-consent__gesperrt small{ color:var(--tm-text-3) }
  .tm-consent__wahl .tm-consent__sperre{ margin-top:4px; font-weight:700; color:var(--tm-brand-3) }
  .tm-consent__sperre[hidden]{ display:none }
  .tm-consent__wahl strong, .tm-consent__wahl small{ display:block }
  .tm-consent__wahl strong{ font-size:15px; font-weight:800 }
  .tm-consent__wahl small{ font-size:13px; line-height:1.45; color:var(--tm-text-2) }
  .tm-consent__knoepfe{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px }
  .tm-consent--einzeln .tm-consent__knoepfe{ grid-template-columns:repeat(3, minmax(0, 1fr)) }
  .tm-consent__einzeln{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:4px 0; border:0; cursor:pointer;
    background:transparent; color:inherit; font:inherit; font-size:14px; font-weight:700; text-decoration:underline; text-underline-offset:3px }
  .tm-consent__einzeln::after{ content:""; width:7px; height:7px; border:solid currentColor; border-width:0 2px 2px 0; transform:translateY(-2px) rotate(45deg) }
  .tm-consent__knoepfe button{ min-height:46px; padding:10px 8px; cursor:pointer;
    border:1px solid var(--tm-text-1); border-radius:var(--tm-radius-button, 0);
    background:var(--tm-surface); color:var(--tm-text-1);
    font-family:inherit; font-weight:800; font-size:13px; line-height:1.3;
    transition:background var(--tm-dur-fast, .15s) var(--tm-ease, ease), color var(--tm-dur-fast, .15s) var(--tm-ease, ease) }
  .tm-consent__knoepfe button:hover{ background:var(--tm-text-1); color:var(--tm-surface) }
  .tm-consent__schliessen{ width:32px; height:32px; flex:0 0 32px; border:0; padding:0; cursor:pointer;
    background:transparent; color:inherit; font:400 28px/1 Arial, sans-serif }
  .tm-consent :focus-visible{ outline:var(--tm-focus-width, 3px) solid var(--tm-accent); outline-offset:var(--tm-focus-offset, 4px) }
  [data-tm-consent-settings]{ cursor:pointer }
  @media (max-width:560px){
    .tm-consent, .tm-consent--einzeln{ inset-inline-end:12px; inset-block-end:12px; width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:16px 16px 14px }
    .tm-consent__titel{ font-size:18px; margin-bottom:8px }
    .tm-consent__text{ margin-bottom:12px; font-size:13.5px }
    .tm-consent__knoepfe button{ min-height:44px }
    .tm-consent--einzeln .tm-consent__knoepfe{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
    .tm-consent--einzeln .tm-consent__knoepfe button:nth-child(2){ grid-column:1 / -1; grid-row:2 }
    .tm-consent__einzeln{ margin-top:10px }
  }
  @media (prefers-reduced-motion:reduce){ .tm-consent__knoepfe button, .tm-consent__wahl input, .tm-consent__wahl input::after{ transition:none } }
}