/* TAOM Design – Bausteine (TAOM Connect, Modul «Design»). Erzeugt aus der Design-Vorlage v1.
   Die Werte (--t-…) stehen im Backend unter «TAOM Connect › Design» und werden als Variablen in jede Seite geschrieben.
   Die Rückfallwerte unten gelten nur, wenn TAOM Connect die Variablen nicht ausgibt. */
:where(:root){--t-navy:#0f1727;--t-navy-2:#16213a;--t-navy-3:#16305a;--t-navy-rand:#26456f;--t-blau:#0b6bcb;--t-blau-dunkel:#0a5aa8;--t-akzent:#2f7fed;--t-himmel:#8fc1ff;--t-blau-rand:#cfe0ff;--t-blau-flaeche:#eaf2ff;--t-tinte:#172b4d;--t-grau:#5e6c84;--t-leise:#8a97ab;--t-auf-navy:#c9d3e3;--t-feldrand:#c6ccd6;--t-linie:#e3e9f2;--t-flaeche-2:#eef2f7;--t-flaeche:#f5f7fa;--t-weiss:#fff;--t-gruen:#0a7d3e;--t-gruen-hell:#e6f4ea;--t-amber:#b45309;--t-amber-hell:#fdf3e4;--t-rot:#c62828;--t-rot-hell:#fdecea;--t-viewer:#c026d3;--t-recorder:#f2b705;--t-training:#1f9d55;--t-lila:#7c3aed;--t-tuerkis:#0f766e;--t-knopf-navy:#1f6fe0;--t-knopf-navy-maus:#1a5fc4;--t-r-s:6px;--t-r-m:8px;--t-r-l:12px;--t-h-s:28px;--t-h-m:36px;--t-h-l:44px;--t-schrift:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;--t-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.t-knopf,.t-feld,.t-auswahl,.t-marke,.t-zahl,.t-hinweis,.t-menue,.t-fenster,.t-meldung,.t-tipp,.t-reiter,.t-haken input,.t-schalter input{box-sizing:border-box}
svg.ti{flex:none;fill:none;stroke:var(--t-ic,currentColor);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
svg.ti .a{fill:var(--t-ia,currentColor);stroke:none}
svg.ti .as{stroke:var(--t-ia,currentColor)}
svg.ti .f{fill:var(--t-ic,currentColor);stroke:none}
svg.ti .i{stroke-width:1.5}
svg.ti .t{stroke-width:3.5}
svg.ti .d{stroke-dasharray:3 3.2}
svg.ti .p{stroke-dasharray:.1 3.5}
svg.ti.s24{width:24px;height:24px}svg.ti.s16{width:16px;height:16px}svg.ti.s20{width:20px;height:20px}svg.ti.s32{width:32px;height:32px}svg.ti.s48{width:48px;height:48px}
.t-im-text svg.ti{--t-ic:currentColor;--t-ia:currentColor}

.t-knopf{-webkit-appearance:none;appearance:none;margin:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--t-h-m);padding:0 14px;border:1px solid transparent;border-radius:var(--t-r-m);background:var(--t-weiss);color:var(--t-tinte);font:600 14px/1 var(--t-schrift);white-space:nowrap;cursor:pointer;text-decoration:none;--t-ic:currentColor;--t-ia:currentColor}
.t-knopf svg.ti{width:16px;height:16px}
.t-knopf--s{height:var(--t-h-s);padding:0 10px;font-size:12px;gap:6px}
.t-knopf--l{height:var(--t-h-l);padding:0 20px;font-size:16px}
.t-knopf--l svg.ti{width:20px;height:20px}
.t-knopf--haupt{background:var(--t-blau);border-color:var(--t-blau);color:var(--t-weiss)}
.t-knopf--haupt:hover{background:var(--t-blau-dunkel);border-color:var(--t-blau-dunkel)}
.t-knopf--zweit{border-color:var(--t-feldrand)}
.t-knopf--zweit:hover{background:var(--t-flaeche-2)}
.t-knopf--still{background:transparent;color:var(--t-blau)}
.t-knopf--still:hover{background:var(--t-blau-flaeche)}
.t-knopf--gefahr{border-color:#eab7b1;color:var(--t-rot)}
.t-knopf--gefahr:hover{background:var(--t-rot-hell)}
.t-knopf--icon{width:var(--t-h-m);padding:0}
.t-knopf--icon.t-knopf--s{width:var(--t-h-s)}.t-knopf--icon.t-knopf--l{width:var(--t-h-l)}
.t-knopf:focus-visible{outline:2px solid var(--t-akzent);outline-offset:2px}
.t-knopf[disabled],.t-knopf.ist-aus{opacity:.5;cursor:not-allowed}
.t-knopf.ist-an{background:var(--t-blau-flaeche);border-color:var(--t-blau-rand);color:var(--t-blau)}
.t-auf-navy{background:var(--t-navy);color:var(--t-weiss)}
.t-auf-navy .t-knopf--haupt{background:var(--t-knopf-navy);border-color:var(--t-knopf-navy)}
.t-auf-navy .t-knopf--haupt:hover{background:var(--t-knopf-navy-maus);border-color:var(--t-knopf-navy-maus)}
.t-auf-navy .t-knopf--zweit{background:var(--t-navy-3);border-color:var(--t-navy-rand);color:#dbe6f7}
.t-auf-navy .t-knopf--zweit:hover{border-color:#3a5f96}
.t-auf-navy .t-knopf--viewer{background:rgba(192,38,211,.16);border-color:rgba(232,121,249,.6);color:var(--t-weiss)}
.t-auf-navy .t-knopf--still{color:var(--t-auf-navy)}
.t-auf-navy .t-knopf--still:hover{background:var(--t-navy-2);color:var(--t-weiss)}

.t-feldgruppe{display:flex;flex-direction:column;gap:6px;min-width:0}
.t-feldgruppe>label,.t-name{font:600 13px/18px var(--t-schrift);color:var(--t-tinte)}
.t-hilfe{font:400 12px/16px var(--t-schrift);color:var(--t-grau);margin-top:-2px}
.t-hilfe.ist-fehler{color:var(--t-rot)}
.t-feld,.t-auswahl{height:var(--t-h-m);width:100%;padding:0 12px;border:1px solid var(--t-feldrand);border-radius:var(--t-r-m);background:var(--t-weiss);color:var(--t-tinte);font:400 14px/20px var(--t-schrift);min-width:0}
.t-feld::placeholder{color:var(--t-leise)}
.t-feld:focus,.t-auswahl:focus{outline:0;border-color:var(--t-blau);box-shadow:0 0 0 3px rgba(47,127,237,.25)}
.t-feld.ist-fehler{border-color:var(--t-rot)}
.t-feld[disabled],.t-auswahl[disabled]{background:var(--t-flaeche-2);color:var(--t-leise)}
.t-feld--s,.t-auswahl--s{height:var(--t-h-s);font-size:12px;padding:0 10px}
.t-feld--l,.t-auswahl--l{height:var(--t-h-l);font-size:16px;padding:0 14px}
textarea.t-feld{height:auto;min-height:88px;padding:8px 12px;resize:vertical}
.t-auswahl{appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23172b4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.t-mit-icon{position:relative;display:block}
.t-mit-icon svg.ti{position:absolute;left:12px;top:50%;margin-top:-8px;width:16px;height:16px;--t-ic:var(--t-grau);pointer-events:none}
.t-mit-icon .t-feld{padding-left:36px}
.t-haken{display:inline-flex;align-items:center;gap:8px;font:400 14px/20px var(--t-schrift);cursor:pointer}
.t-haken input{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;border:1px solid var(--t-feldrand);border-radius:4px;background:var(--t-weiss);flex:none;cursor:pointer}
.t-haken input[type=radio]{border-radius:50%}
.t-haken input:checked{background:var(--t-blau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;border-color:var(--t-blau)}
.t-haken input[type=radio]:checked{background:radial-gradient(circle,var(--t-weiss) 0 3.5px,var(--t-blau) 4px)}
.t-schalter{display:inline-flex;align-items:center;gap:8px;font:400 14px/20px var(--t-schrift);cursor:pointer}
.t-schalter input{appearance:none;-webkit-appearance:none;width:36px;height:20px;margin:0;border-radius:999px;background:var(--t-feldrand);position:relative;flex:none;cursor:pointer;transition:background .12s}
.t-schalter input::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--t-weiss);transition:transform .12s}
.t-schalter input:checked{background:var(--t-blau)}
.t-schalter input:checked::after{transform:translateX(16px)}
@media (prefers-reduced-motion:reduce){.t-schalter input,.t-schalter input::after{transition:none}}
.t-marke{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--t-r-s);background:var(--t-flaeche-2);color:var(--t-tinte);font:600 12px/1 var(--t-schrift);white-space:nowrap;--t-ic:currentColor;--t-ia:currentColor}
.t-marke svg.ti{width:14px;height:14px}
.t-marke--pille{border-radius:999px}
.t-marke--blau{background:var(--t-blau-flaeche);color:var(--t-blau)}
.t-marke--gruen{background:var(--t-gruen-hell);color:var(--t-gruen)}
.t-marke--amber{background:var(--t-amber-hell);color:var(--t-amber)}
.t-marke--rot{background:var(--t-rot-hell);color:var(--t-rot)}
.t-marke--navy{background:var(--t-navy-3);color:#dbe6f7;border:1px solid var(--t-navy-rand)}
.t-zahl{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--t-rot);color:var(--t-weiss);font:700 11px/1 var(--t-schrift)}
.t-reiter{display:flex;gap:0;border-bottom:1px solid var(--t-linie);overflow-x:auto}
.t-reiter button{all:unset;box-sizing:border-box;height:var(--t-h-l);padding:0 14px;font:600 14px/1 var(--t-schrift);color:var(--t-grau);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.t-reiter button:hover{color:var(--t-tinte)}
.t-reiter button[aria-selected=true]{color:var(--t-tinte);border-bottom-color:var(--t-blau)}
.t-reiter button:focus-visible{outline:2px solid var(--t-akzent);outline-offset:-2px}
.t-hinweis{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--t-blau-rand);border-radius:var(--t-r-m);background:var(--t-blau-flaeche);font:400 14px/20px var(--t-schrift);--t-ic:var(--t-blau);--t-ia:var(--t-blau)}
.t-hinweis svg.ti{width:20px;height:20px}
.t-hinweis--gruen{background:var(--t-gruen-hell);border-color:#bfe3cb;--t-ic:var(--t-gruen)}
.t-hinweis--amber{background:var(--t-amber-hell);border-color:#f3d9ae;--t-ic:var(--t-amber)}
.t-hinweis--rot{background:var(--t-rot-hell);border-color:#f3c3be;--t-ic:var(--t-rot)}
.t-menue{width:220px;background:var(--t-weiss);border:1px solid var(--t-linie);border-radius:var(--t-r-m);box-shadow:0 8px 24px rgba(15,23,39,.14);padding:4px}
.t-menue button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;height:var(--t-h-m);padding:0 10px;border-radius:var(--t-r-s);font:400 14px/1 var(--t-schrift);cursor:pointer;--t-ic:var(--t-grau)}
.t-menue button svg.ti{width:16px;height:16px}
.t-menue button:hover{background:var(--t-flaeche-2)}
.t-menue button.ist-an{background:var(--t-blau-flaeche);color:var(--t-blau);--t-ic:var(--t-blau)}
.t-menue hr{border:0;border-top:1px solid var(--t-linie);margin:4px 0}
.t-tipp{display:inline-block;background:var(--t-navy);color:var(--t-weiss);font:400 12px/16px var(--t-schrift);padding:6px 8px;border-radius:var(--t-r-s)}
.t-fenster{width:min(460px,100%);background:var(--t-weiss);border-radius:var(--t-r-l);box-shadow:0 12px 32px rgba(15,23,39,.18);border:1px solid var(--t-linie)}
.t-fenster header{height:56px;padding:0 12px 0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--t-linie)}
.t-fenster header b{font:600 16px/24px var(--t-schrift)}
.t-fenster .inhalt{padding:20px}
.t-fenster footer{padding:16px 20px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--t-linie)}
.t-meldung{display:inline-flex;align-items:center;gap:10px;background:var(--t-navy-2);color:var(--t-weiss);border-radius:var(--t-r-m);padding:12px 16px;font:400 14px/20px var(--t-schrift);--t-ic:#7fd7a3}
.t-meldung svg.ti{width:20px;height:20px}
.t-auf-navy{--t-ia:var(--t-himmel)}