/* 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.

   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(680px, 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__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{ width:19px; height:19px; flex:0 0 19px; margin:3px 0 0; accent-color:var(--tm-accent) }
  .tm-consent__wahl input:disabled + span{ opacity:.6 }
  .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(3, minmax(0, 1fr)); gap:10px }
  .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{ inset-inline-end:12px; inset-block-end:12px; width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:18px }
    .tm-consent__titel{ font-size:19px }
    .tm-consent__knoepfe{ grid-template-columns:1fr }
    .tm-consent__knoepfe button{ min-height:44px }
  }
  @media (prefers-reduced-motion:reduce){ .tm-consent__knoepfe button{ transition:none } }
}