/* =====================================================================
   TM24 Design System – Prototyp v1 (12.10.2026)
   Ein Token-Namensraum (--tm-*), eine Schrift (Figtree, lokal lizenziert),
   eine Akzentfarbe (TM24-Blau #003B8F, Stand 13.10.2026), drei Radien, zwei Schatten, eine Typo-Skala.
   Farbwerte sind identisch mit templates/NOVAChild/css/tm24-brand-tokens.css.
   Kein !important. Kein Bootstrap. Keine Icon-Font.
   ===================================================================== */

@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url("../assets/fonts/figtree-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url("../assets/fonts/figtree-latin-ext.woff2") format("woff2");unicode-range:U+0100-02AF,U+0300-0301,U+0303-0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* Farben – neutral kühl, eine Akzentfarbe (TM24-Blau #003B8F), semantische Zustände */
  --tm-blue:#003B8F;--tm-blue-bright:#0039E8;--tm-blue-dark:#002A6B;--tm-blue-soft:#EAF0FF;
  --tm-red:#E30613;--tm-navy:#06122E;--tm-navy-2:#0F1F4A;--tm-on-navy:#FFFFFF;--tm-on-navy-muted:#C7CDEA;--tm-on-navy-accent:#9FB4FF;
  --tm-bg:#F4F5F9;
  --tm-surface:#FFFFFF;
  --tm-surface-2:#F8F9FC;
  --tm-border:#E3E6EE;
  --tm-border-strong:#C9CFDD;
  --tm-ink:#111827;
  --tm-ink-2:#3B4458;
  --tm-muted:#6B7385;
  --tm-accent:#003B8F;
  --tm-accent-ink:#002A6B;
  --tm-accent-soft:#EAF0FF;
  --tm-accent-ring:rgba(0,59,143,.22);
  --tm-success:#15803D;
  --tm-success-soft:#E9F7EE;
  --tm-warn:#B45309;
  --tm-warn-soft:#FFF4E5;
  --tm-danger:#B91C1C;
  --tm-danger-soft:#FDECEC;
  /* Typografie */
  --tm-font:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tm-fs-xs:12px;--tm-fs-sm:13px;--tm-fs-base:15px;--tm-fs-md:16px;--tm-fs-lg:18px;
  --tm-fs-xl:20px;--tm-fs-2xl:24px;--tm-fs-3xl:30px;--tm-fs-4xl:38px;
  /* Form */
  --tm-r-sm:10px;--tm-r-md:14px;--tm-r-pill:999px;
  --tm-shadow-1:0 1px 2px rgba(17,24,39,.04),0 1px 1px rgba(17,24,39,.03);
  --tm-shadow-2:0 12px 32px -12px rgba(17,24,39,.18),0 2px 6px rgba(17,24,39,.05);
  /* Bewegung */
  --tm-ease-out:cubic-bezier(.23,1,.32,1);
  --tm-ease-in-out:cubic-bezier(.77,0,.175,1);
  --tm-t-fast:140ms;--tm-t-base:200ms;--tm-t-slow:280ms;
  /* Layout */
  --tm-max:1120px;--tm-gutter:16px;
  color-scheme:light;
}
@media (min-width:768px){:root{--tm-gutter:24px}}

.tm-ui *,.tm-ui *::before,.tm-ui *::after{box-sizing:border-box}
.tm-ui [hidden]{display:none !important}
:where(.tm-ui) ::selection{background:var(--tm-accent-soft);color:var(--tm-accent-ink)}
.tm-ui{accent-color:var(--tm-accent);caret-color:var(--tm-accent);scrollbar-color:#C9CFDD transparent}
:where(.tm-ui) a{text-underline-offset:3px}
html:has(> body.tm-ui){-webkit-text-size-adjust:100%;scroll-behavior:smooth}
.tm-ui{margin:0;background:var(--tm-bg);color:var(--tm-ink);font-family:var(--tm-font);font-size:var(--tm-fs-base);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(.tm-ui) :is(h1,h2,h3,h4){margin:0;font-weight:650;letter-spacing:-.01em;line-height:1.2}
:where(.tm-ui) h1{font-size:var(--tm-fs-3xl);letter-spacing:-.02em}
:where(.tm-ui) h2{font-size:var(--tm-fs-2xl)}
:where(.tm-ui) h3{font-size:var(--tm-fs-lg)}
:where(.tm-ui) p{margin:0}
:where(.tm-ui) a{color:var(--tm-accent);text-decoration:none}
:where(.tm-ui) a:hover{text-decoration:underline}
:where(.tm-ui) img{max-width:100%;height:auto;display:block}
:where(.tm-ui) button{font:inherit;color:inherit}
:where(.tm-ui) :focus-visible{outline:2px solid var(--tm-accent);outline-offset:2px;border-radius:var(--tm-r-sm)}
.tm-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.tm-muted{color:var(--tm-muted)}
.tm-small{font-size:var(--tm-fs-sm)}
.tm-xs{font-size:var(--tm-fs-xs)}
.tm-num{font-variant-numeric:tabular-nums}
.tm-wrap{max-width:var(--tm-max);margin:0 auto;padding:0 var(--tm-gutter)}

/* ---------- Buttons ---------- */
.tm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--tm-r-pill);border:1px solid transparent;font-weight:600;font-size:var(--tm-fs-base);cursor:pointer;white-space:nowrap;user-select:none;transition:transform var(--tm-t-fast) var(--tm-ease-out),background var(--tm-t-fast),border-color var(--tm-t-fast),color var(--tm-t-fast),box-shadow var(--tm-t-fast)}
.tm-btn:active{transform:scale(.97)}
.tm-btn-primary{background:var(--tm-accent);color:#fff}
.tm-btn-primary:hover{background:var(--tm-accent-ink)}
.tm-btn-primary:disabled{background:#A8B8DA;cursor:not-allowed;transform:none}
.tm-btn-secondary{background:var(--tm-surface);border-color:var(--tm-border-strong);color:var(--tm-ink)}
.tm-btn-secondary:hover{border-color:var(--tm-ink-2);background:var(--tm-surface-2)}
.tm-btn-ghost{background:transparent;color:var(--tm-accent);padding:0 12px;min-height:40px}
.tm-btn-ghost:hover{background:var(--tm-accent-soft)}
.tm-btn-lg{min-height:52px;padding:0 28px;font-size:var(--tm-fs-md)}
.tm-btn-sm{min-height:34px;padding:0 14px;font-size:var(--tm-fs-sm)}
.tm-btn-block{width:100%}
.tm-btn svg{width:18px;height:18px;flex:none}

/* ---------- Karten / Flächen ---------- */
.tm-card{background:var(--tm-surface);border:1px solid var(--tm-border);border-radius:var(--tm-r-md)}
.tm-card-pad{padding:20px}
@media (min-width:768px){.tm-card-pad{padding:28px}}
.tm-divider{height:1px;background:var(--tm-border);margin:20px 0}

/* ---------- Pills / Badges ---------- */
.tm-pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--tm-r-pill);font-size:var(--tm-fs-xs);font-weight:600;letter-spacing:.01em;white-space:nowrap}
.tm-pill-neutral{background:var(--tm-surface-2);color:var(--tm-ink-2);border:1px solid var(--tm-border)}
.tm-pill-accent{background:var(--tm-accent-soft);color:var(--tm-accent-ink)}
.tm-pill-success{background:var(--tm-success-soft);color:var(--tm-success)}
.tm-pill-warn{background:var(--tm-warn-soft);color:var(--tm-warn)}
.tm-pill-danger{background:var(--tm-danger-soft);color:var(--tm-danger)}
.tm-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* ---------- Auswahlkarten (Zustand, Ja/Nein) ---------- */
.tm-choice{position:relative;display:block;width:100%;text-align:left;background:var(--tm-surface);border:1.5px solid var(--tm-border);border-radius:var(--tm-r-md);padding:16px 18px;cursor:pointer;transition:border-color var(--tm-t-fast),box-shadow var(--tm-t-fast),transform var(--tm-t-fast) var(--tm-ease-out),background var(--tm-t-fast)}
.tm-choice:hover{border-color:var(--tm-border-strong);background:var(--tm-surface)}
.tm-choice:active{transform:scale(.985)}
.tm-choice[aria-pressed="true"],.tm-choice.is-selected{border-color:var(--tm-accent);box-shadow:0 0 0 3px var(--tm-accent-ring)}
.tm-choice-title{font-weight:600;font-size:var(--tm-fs-md);display:flex;align-items:center;justify-content:space-between;gap:12px}
.tm-choice-desc{display:block;color:var(--tm-muted);font-size:var(--tm-fs-sm);margin-top:4px;line-height:1.45}
.tm-choice-price{display:block;font-weight:700;font-size:var(--tm-fs-lg);margin-top:12px;color:var(--tm-ink);font-variant-numeric:tabular-nums}
.tm-choice-price small{font-weight:500;color:var(--tm-muted);font-size:var(--tm-fs-sm);margin-right:4px}
.tm-check{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--tm-border-strong);display:inline-grid;place-items:center;flex:none;transition:background var(--tm-t-fast),border-color var(--tm-t-fast)}
.tm-check svg{width:12px;height:12px;opacity:0;transform:scale(.6);transition:opacity var(--tm-t-fast),transform var(--tm-t-fast) var(--tm-ease-out)}
.tm-choice[aria-pressed="true"] .tm-check,.tm-choice.is-selected .tm-check{background:var(--tm-accent);border-color:var(--tm-accent)}
.tm-choice[aria-pressed="true"] .tm-check svg,.tm-choice.is-selected .tm-check svg{opacity:1;transform:scale(1)}
.tm-choice-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:640px){.tm-choice-grid{grid-template-columns:1fr 1fr}}
.tm-yesno{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tm-yesno .tm-choice{padding:14px 16px;min-height:56px;display:flex;align-items:center;gap:10px;font-weight:600}
.tm-chips{display:flex;flex-wrap:wrap;gap:8px}
.tm-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:var(--tm-r-pill);border:1.5px solid var(--tm-border);background:var(--tm-surface);cursor:pointer;font-weight:500;font-size:var(--tm-fs-sm);transition:border-color var(--tm-t-fast),background var(--tm-t-fast),transform var(--tm-t-fast) var(--tm-ease-out)}
.tm-chip:hover{border-color:var(--tm-border-strong)}
.tm-chip:active{transform:scale(.97)}
.tm-chip[aria-pressed="true"]{border-color:var(--tm-accent);background:var(--tm-accent-soft);color:var(--tm-accent-ink)}

/* ---------- Formulare ---------- */
.tm-field{display:grid;gap:6px;align-content:start}
.tm-label{font-weight:600;font-size:var(--tm-fs-sm);color:var(--tm-ink-2)}
.tm-help{font-size:var(--tm-fs-sm);color:var(--tm-muted)}
.tm-input{min-height:46px;padding:0 14px;border:1.5px solid var(--tm-border);border-radius:var(--tm-r-sm);background:var(--tm-surface);font:inherit;width:100%;transition:border-color var(--tm-t-fast),box-shadow var(--tm-t-fast)}
.tm-input:focus{outline:none;border-color:var(--tm-accent);box-shadow:0 0 0 3px var(--tm-accent-ring)}
.tm-input::placeholder{color:#9AA1B2}

/* ---------- Hinweise ---------- */
.tm-note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--tm-r-sm);font-size:var(--tm-fs-sm);line-height:1.5}
.tm-note svg{width:18px;height:18px;flex:none;margin-top:1px}
.tm-note-info{background:var(--tm-accent-soft);color:var(--tm-accent-ink)}
.tm-note-success{background:var(--tm-success-soft);color:var(--tm-success)}
.tm-note-warn{background:var(--tm-warn-soft);color:var(--tm-warn)}
.tm-note-danger{background:var(--tm-danger-soft);color:var(--tm-danger)}

/* ---------- Tabellen (Cockpit) ---------- */
.tm-table{width:100%;border-collapse:collapse;font-size:var(--tm-fs-sm)}
.tm-table th{text-align:left;font-weight:600;color:var(--tm-muted);font-size:var(--tm-fs-xs);letter-spacing:.02em;padding:10px 12px;border-bottom:1px solid var(--tm-border);white-space:nowrap}
.tm-table td{padding:12px;border-bottom:1px solid var(--tm-border);vertical-align:middle}
.tm-table tr:last-child td{border-bottom:0}
.tm-table tbody tr{transition:background var(--tm-t-fast)}
.tm-table tbody tr:hover{background:var(--tm-surface-2)}
.tm-table .tm-right{text-align:right}

/* ---------- Bewegung ---------- */
.tm-fade-in{animation:tm-fade var(--tm-t-slow) var(--tm-ease-out) both}
@keyframes tm-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tm-ui *,.tm-ui *::before,.tm-ui *::after{animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms;scroll-behavior:auto}}

/* Gemeinsam genutzt von Ankaufseite und Cockpit */
.tm-sum-line{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--tm-border);font-size:var(--tm-fs-base)}
.tm-sum-line span{color:var(--tm-ink-2)}
.tm-area{min-height:88px;padding:12px 14px;resize:vertical;line-height:1.5}
.tm-sum-line.tm-minus b{color:var(--tm-danger)}
.tm-label .tm-opt-txt{font-weight:500;color:var(--tm-muted);margin-left:4px}
.tm-input.is-error{border-color:var(--tm-danger);box-shadow:0 0 0 3px rgba(185,28,28,.12)}
.tm-error{display:flex;gap:6px;align-items:center;color:var(--tm-danger);font-size:var(--tm-fs-sm);font-weight:500}
.tm-error svg{width:16px;height:16px;flex:none}
.tm-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7385' 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;background-size:18px;padding-right:40px}
.tm-skel{display:inline-block;border-radius:6px;background:linear-gradient(90deg,var(--tm-surface-2) 0%,#E6E9F1 50%,var(--tm-surface-2) 100%);background-size:200% 100%;animation:tm-shimmer 1.2s linear infinite;height:1em;vertical-align:middle}
@keyframes tm-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}