/* TM24 Public: Startseite, Geräteauswahl, Ankauf-Funnel, Checkout. Baut auf tm24-ui.css auf. */
/* Funnel-spezifisches Layout. Baut ausschließlich auf tm24-design.css auf. */
:where(.tm-ui svg[viewBox="0 0 24 24"]){fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tm-check svg{stroke:#fff;stroke-width:3}

.tm-topbar{background:var(--tm-surface);border-bottom:1px solid var(--tm-border);position:sticky;top:0;z-index:20}
.tm-topbar .tm-wrap{display:flex;align-items:center;justify-content:space-between;height:var(--tm-header-h,72px);gap:16px}
.tm-brand img{height:var(--tm-logo-h,34px);width:auto}
.tm-topnav{display:none;gap:4px}
.tm-topnav a{color:var(--tm-ink-2);font-weight:500;padding:8px 14px;border-radius:var(--tm-r-pill)}
.tm-topnav a:hover{background:var(--tm-surface-2);text-decoration:none}
.tm-topnav a.is-active{background:var(--tm-accent-soft);color:var(--tm-accent-ink)}
.tm-trust{display:none;align-items:center;gap:18px;color:var(--tm-muted);font-size:var(--tm-fs-sm)}
.tm-trust span{display:inline-flex;align-items:center;gap:6px}
.tm-trust svg{width:16px;height:16px;color:var(--tm-success);stroke-width:2.4}
@media (min-width:1000px){.tm-topnav,.tm-trust{display:flex}}

.tm-layout{display:grid;gap:24px;padding:24px var(--tm-gutter) 128px}
@media (min-width:960px){.tm-layout{grid-template-columns:minmax(0,7fr) minmax(320px,4fr);gap:48px;padding:40px var(--tm-gutter) 80px;align-items:start}}

.tm-device{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.tm-device img{width:56px;height:56px;object-fit:contain;border-radius:12px;background:var(--tm-surface);border:1px solid var(--tm-border);padding:4px}
.tm-device h1{font-size:var(--tm-fs-lg);font-weight:600}
.tm-device .tm-meta{color:var(--tm-muted);font-size:var(--tm-fs-sm);margin-top:2px}

.tm-steps{display:flex;gap:6px;padding:0;margin:0 0 28px}
.tm-steps li{list-style:none;flex:1;display:grid;gap:8px}
.tm-steps .tm-bar{height:4px;border-radius:2px;background:var(--tm-border);overflow:hidden;position:relative}
.tm-steps .tm-bar::after{content:"";position:absolute;inset:0;background:var(--tm-accent);transform:scaleX(0);transform-origin:left;transition:transform var(--tm-t-slow) var(--tm-ease-out)}
.tm-steps li.is-done .tm-bar::after,.tm-steps li.is-active .tm-bar::after{transform:scaleX(1)}
.tm-steps .tm-lbl{font-size:var(--tm-fs-xs);color:var(--tm-muted);font-weight:600}
.tm-steps li.is-active .tm-lbl{color:var(--tm-accent-ink)}
.tm-steps li.is-done .tm-lbl{color:var(--tm-ink-2)}
@media (max-width:420px){.tm-steps .tm-lbl{font-size:11px}}

.tm-step{display:none}
.tm-step.is-visible{display:block}
.tm-step-head{margin-bottom:20px}
.tm-step-head h2{font-size:var(--tm-fs-2xl);letter-spacing:-.02em}
@media (min-width:768px){.tm-step-head h2{font-size:var(--tm-fs-3xl)}}
.tm-step-head p{color:var(--tm-muted);margin-top:8px;max-width:58ch}
.tm-q{margin-bottom:28px}
.tm-q-title{font-weight:600;font-size:var(--tm-fs-md);margin-bottom:12px}
.tm-q-sub{font-size:var(--tm-fs-base);margin-bottom:10px}
.tm-q-title .tm-muted{font-weight:500}
.tm-q-help{color:var(--tm-muted);font-size:var(--tm-fs-sm);margin:-6px 0 12px;max-width:60ch}
.tm-q-followup{margin-top:14px;padding:16px;border-radius:var(--tm-r-md);background:var(--tm-surface-2);border:1px solid var(--tm-border)}
.tm-actions{display:none;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}
@media (min-width:960px){.tm-actions{display:flex}}

.tm-rows{display:grid;gap:10px;margin-bottom:24px}
.tm-row{display:grid;gap:12px;grid-template-columns:1fr;padding:16px;border:1px solid var(--tm-border);border-radius:var(--tm-r-md);background:var(--tm-surface);align-items:center}
.tm-row-text{display:grid;gap:2px}
.tm-row-text b{font-weight:600}
.tm-row-text span{color:var(--tm-muted);font-size:var(--tm-fs-sm)}
@media (min-width:700px){.tm-row{grid-template-columns:1fr auto}}
.tm-seg{display:inline-flex;background:var(--tm-surface-2);border:1px solid var(--tm-border);border-radius:var(--tm-r-pill);padding:3px;gap:2px;justify-self:start}
.tm-seg button{border:0;background:transparent;border-radius:var(--tm-r-pill);min-height:38px;padding:0 16px;font-weight:600;font-size:var(--tm-fs-sm);cursor:pointer;color:var(--tm-ink-2);white-space:nowrap;transition:background var(--tm-t-fast),color var(--tm-t-fast),transform var(--tm-t-fast) var(--tm-ease-out)}
.tm-seg button:active{transform:scale(.97)}
.tm-seg button[aria-pressed="true"]{background:var(--tm-surface);color:var(--tm-accent-ink);box-shadow:var(--tm-shadow-1)}
.tm-seg button[aria-pressed="true"].tm-neg{color:var(--tm-danger)}

.tm-battery{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.tm-battery{grid-template-columns:repeat(4,1fr)}}
.tm-battery .tm-choice{padding:14px}
.tm-battery .tm-choice-title{font-size:var(--tm-fs-base)}
.tm-exact{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}
.tm-exact .tm-input{max-width:96px}

.tm-panel{position:sticky;top:88px;display:none}
@media (min-width:960px){.tm-panel{display:block}}
.tm-price-hero{display:flex;gap:16px;align-items:center}
.tm-price-hero img{width:84px;height:84px;object-fit:contain;flex:none}
.tm-price-label{font-size:var(--tm-fs-xs);font-weight:600;color:var(--tm-muted);letter-spacing:.04em;text-transform:uppercase}
.tm-price{font-size:var(--tm-fs-4xl);font-weight:700;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;transition:color var(--tm-t-base)}
.tm-price.is-updating{color:var(--tm-accent)}
.tm-price-sub{color:var(--tm-muted);font-size:var(--tm-fs-sm);margin-top:6px}
.tm-facts{display:grid;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.tm-facts li{display:flex;justify-content:space-between;gap:12px;font-size:var(--tm-fs-sm)}
.tm-facts li span{color:var(--tm-muted)}
.tm-facts li b{font-weight:600;text-align:right}
.tm-facts li.is-empty b{color:#A9B0BF;font-weight:500}
.tm-assure{display:grid;gap:8px;margin-top:20px;padding-top:20px;border-top:1px solid var(--tm-border);font-size:var(--tm-fs-sm);color:var(--tm-ink-2)}
.tm-assure span{display:flex;gap:8px;align-items:center}
.tm-assure svg{width:16px;height:16px;color:var(--tm-success);flex:none;stroke-width:2.4}

.tm-sticky{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(10px);border-top:1px solid var(--tm-border);padding:12px var(--tm-gutter) calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:30}
.tm-sticky .tm-p{font-weight:700;font-size:var(--tm-fs-xl);letter-spacing:-.02em;line-height:1.1}
.tm-sticky .tm-s{font-size:var(--tm-fs-xs);color:var(--tm-muted)}
.tm-sticky .tm-btn{min-width:140px}
@media (min-width:960px){.tm-sticky{display:none}}

.tm-sum-grid{display:grid;gap:18px}
.tm-sum-device{font-weight:600;font-size:var(--tm-fs-md)}
.tm-sum-total{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 0;font-weight:600}
.tm-sum-total .tm-price{font-size:var(--tm-fs-3xl)}
.tm-sum-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.tm-next{display:grid;gap:14px;padding:0;margin:0}
.tm-next li{display:flex;gap:14px;align-items:flex-start;list-style:none}
.tm-next .tm-n{width:28px;height:28px;border-radius:50%;background:var(--tm-accent-soft);color:var(--tm-accent-ink);font-weight:700;display:grid;place-items:center;font-size:var(--tm-fs-sm);flex:none}
.tm-next b{display:block;font-weight:600}
.tm-next span{color:var(--tm-muted);font-size:var(--tm-fs-sm)}
.tm-answers{display:grid;gap:0 32px;grid-template-columns:1fr}
@media (min-width:640px){.tm-answers{grid-template-columns:1fr 1fr}}
.tm-answers div{display:flex;justify-content:space-between;gap:12px;font-size:var(--tm-fs-sm);padding:10px 0;border-bottom:1px solid var(--tm-border)}
.tm-answers div span{color:var(--tm-muted)}

.tm-state-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px}
.tm-state-icon svg{width:26px;height:26px}
.tm-state-icon.tm-danger{background:var(--tm-danger-soft);color:var(--tm-danger)}
.tm-state-icon.tm-warn{background:var(--tm-warn-soft);color:var(--tm-warn)}
.tm-lead{color:var(--tm-muted);margin-top:10px;max-width:58ch;font-size:var(--tm-fs-md);line-height:1.55}
.tm-lead b{color:var(--tm-ink)}
.tm-options{display:grid;gap:10px;margin-top:24px}
.tm-option{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border:1px solid var(--tm-border);border-radius:var(--tm-r-md);background:var(--tm-surface);color:var(--tm-ink);transition:border-color var(--tm-t-fast),transform var(--tm-t-fast) var(--tm-ease-out)}
.tm-option:hover{border-color:var(--tm-accent);text-decoration:none}
.tm-option:active{transform:scale(.99)}
.tm-option b{display:block;font-weight:600}
.tm-option span{display:block;color:var(--tm-muted);font-size:var(--tm-fs-sm);margin-top:2px}
.tm-option svg{width:20px;height:20px;color:var(--tm-muted);flex:none}
.tm-option.is-primary{border-color:var(--tm-accent);background:var(--tm-accent-soft)}
.tm-option.is-primary svg{color:var(--tm-accent)}
.tm-req{display:grid;gap:12px;margin-top:22px;max-width:440px}

/* --- v2: Zustand als Liste, Schäden mit Abzug, Extras --- */
.tm-conds{display:grid;border:1px solid var(--tm-border);border-radius:var(--tm-r-md);background:var(--tm-surface);overflow:hidden}
.tm-cond,.tm-sealed{display:grid;grid-template-columns:22px 1fr auto;gap:14px;align-items:center;width:100%;text-align:left;background:transparent;border:0;border-top:1px solid var(--tm-border);padding:18px 20px;cursor:pointer;transition:background var(--tm-t-fast)}
.tm-cond:first-child{border-top:0}
.tm-cond:hover,.tm-sealed:hover{background:var(--tm-surface-2)}
.tm-cond[aria-checked="true"],.tm-sealed[aria-checked="true"]{background:var(--tm-accent-soft)}
.tm-sealed{margin-top:12px;border:1px dashed var(--tm-border-strong);border-radius:var(--tm-r-md);background:transparent}
.tm-radio{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--tm-border-strong);display:grid;place-items:center;transition:border-color var(--tm-t-fast)}
.tm-radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--tm-accent);transform:scale(0);transition:transform var(--tm-t-base) var(--tm-ease-out)}
[aria-checked="true"] .tm-radio{border-color:var(--tm-accent)}
[aria-checked="true"] .tm-radio::after{transform:scale(1)}
.tm-cond-text{display:grid;gap:3px;min-width:0}
.tm-cond-text b{font-weight:650;font-size:var(--tm-fs-md)}
.tm-cond-text span{color:var(--tm-muted);font-size:var(--tm-fs-sm);line-height:1.45}
.tm-cond-price{font-weight:700;font-size:var(--tm-fs-lg);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.tm-cond-price small{display:block;font-size:var(--tm-fs-xs);font-weight:500;color:var(--tm-muted);line-height:1}
@media (max-width:480px){.tm-cond,.tm-sealed{grid-template-columns:22px 1fr;padding:16px}.tm-cond-price{grid-column:2;text-align:left}.tm-cond-price small{display:inline;margin-right:4px}}
.tm-hint{margin-top:16px;max-width:62ch}
.tm-q-sub{font-weight:600;font-size:var(--tm-fs-base);margin-bottom:10px}
.tm-q-sub .tm-muted,.tm-optional{font-weight:500;color:var(--tm-muted);font-size:var(--tm-fs-sm);margin-left:6px}
.tm-q-followup .tm-note{margin-top:14px}
.tm-dmg-list{display:grid;gap:8px}
.tm-dmg{background:var(--tm-surface);border:1px solid var(--tm-border);border-radius:var(--tm-r-sm);transition:border-color var(--tm-t-fast)}
.tm-dmg.is-on{border-color:var(--tm-accent)}
.tm-dmg-toggle{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;width:100%;padding:14px 16px;background:transparent;border:0;text-align:left;cursor:pointer}
.tm-dmg-toggle b{display:block;font-weight:600}
.tm-dmg-toggle span span{display:block;color:var(--tm-muted);font-size:var(--tm-fs-sm)}
.tm-box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--tm-border-strong);display:grid;place-items:center;transition:background var(--tm-t-fast),border-color var(--tm-t-fast)}
.tm-box svg{width:12px;height:12px;stroke:#fff;stroke-width:3;opacity:0;transition:opacity var(--tm-t-fast)}
.tm-dmg.is-on .tm-box{background:var(--tm-accent);border-color:var(--tm-accent)}
.tm-dmg.is-on .tm-box svg{opacity:1}
.tm-dmg-amt{font-weight:650;font-variant-numeric:tabular-nums;color:var(--tm-muted);font-size:var(--tm-fs-sm);white-space:nowrap}
.tm-dmg.is-on .tm-dmg-amt{color:var(--tm-ink)}
.tm-dmg-check{padding:0 16px 16px 50px;display:grid;gap:10px}
.tm-dmg-check p{font-size:var(--tm-fs-sm);color:var(--tm-ink-2);max-width:56ch}
@media (max-width:480px){.tm-dmg-check{padding-left:16px}}
.tm-deduct{margin-top:14px;padding:16px;border-radius:var(--tm-r-sm);background:var(--tm-surface);border:1px solid var(--tm-border);display:grid;gap:8px}
.tm-deduct>div{display:flex;justify-content:space-between;gap:12px;font-size:var(--tm-fs-sm)}
.tm-deduct>div span{color:var(--tm-ink-2)}
.tm-deduct-total{padding-top:8px;border-top:1px solid var(--tm-border)}
.tm-deduct-total b{font-size:var(--tm-fs-lg)}
.tm-exact-in{display:inline-flex;align-items:center;gap:8px}
.tm-exact-in .tm-input{max-width:110px}
.tm-extras{border:1px solid var(--tm-border);border-radius:var(--tm-r-md);background:var(--tm-surface);margin-bottom:24px}
.tm-extras summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;cursor:pointer}
.tm-extras summary::-webkit-details-marker{display:none}
.tm-extras summary b{display:block;font-weight:600}
.tm-extras summary span span{display:block;color:var(--tm-muted);font-size:var(--tm-fs-sm)}
.tm-extras summary svg{width:20px;height:20px;color:var(--tm-muted);transition:transform var(--tm-t-base) var(--tm-ease-out)}
.tm-extras[open] summary svg{transform:rotate(180deg)}
.tm-extras-body{padding:0 18px 18px;display:grid;gap:14px}
.tm-drop{display:flex;gap:14px;align-items:center;padding:16px;border:1.5px dashed var(--tm-border-strong);border-radius:var(--tm-r-sm);color:var(--tm-ink-2);cursor:pointer}
.tm-drop svg{width:22px;height:22px;color:var(--tm-accent);flex:none}
.tm-drop b{display:block;font-weight:600}
.tm-drop span{font-size:var(--tm-fs-sm);color:var(--tm-muted)}
.tm-sec{margin-top:16px}
.tm-sec h3{margin-bottom:14px}
.tm-answers{margin:0}
.tm-answers dt{color:var(--tm-muted)}
.tm-answers dd{margin:0;font-weight:600;text-align:right}
.tm-state-icon{background:var(--tm-danger-soft);color:var(--tm-danger)}
.tm-option{width:100%;text-align:left;cursor:pointer;font:inherit}
.tm-contact{margin-top:20px}
.tm-btn-ghost:disabled,.tm-btn-secondary:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* Startseite: Persuade-Modus. Baut auf tm24-design.css und funnel.css (Topbar) auf. */
.tm-status-m{display:inline-flex}
@media (min-width:1000px){.tm-status-m{display:none}}
.tm-hero{background:var(--tm-surface);border-bottom:1px solid var(--tm-border);padding:40px 0 0}
@media (min-width:960px){.tm-hero{padding:72px 0 0}}
.tm-hero-grid{display:grid;gap:32px;align-items:center}
@media (min-width:960px){.tm-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px}}
.tm-hero h1{font-size:clamp(30px,4.4vw,50px);line-height:1.06;letter-spacing:-.03em;font-weight:var(--tm-h-weight,800);max-width:16ch;text-wrap:balance}
.tm-hero-sub{color:var(--tm-ink-2);font-size:var(--tm-fs-md);margin-top:16px;max-width:46ch;line-height:1.55}
@media (min-width:768px){.tm-hero-sub{font-size:var(--tm-fs-lg)}}
.tm-search{position:relative;margin-top:28px;display:flex;align-items:center;gap:10px;background:var(--tm-surface);border:1.5px solid var(--tm-border-strong);border-radius:var(--tm-r-pill);padding:6px 6px 6px 18px;max-width:560px;box-shadow:var(--tm-shadow-2);transition:border-color var(--tm-t-fast),box-shadow var(--tm-t-fast)}
.tm-search:focus-within{border-color:var(--tm-accent);box-shadow:0 0 0 4px var(--tm-accent-ring),var(--tm-shadow-2)}
.tm-search>svg{width:20px;height:20px;color:var(--tm-muted);flex:none}
.tm-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:var(--tm-fs-md);height:44px}
.tm-search .tm-btn{flex:none}
@media (max-width:480px){.tm-search{flex-wrap:wrap;border-radius:var(--tm-r-md);padding:8px 8px 8px 16px}.tm-search .tm-btn{width:100%}}
.tm-suggest{position:absolute;left:0;right:0;top:calc(100% + 8px);list-style:none;margin:0;padding:6px;background:var(--tm-surface);border:1px solid var(--tm-border);border-radius:var(--tm-r-md);box-shadow:var(--tm-shadow-2);z-index:10}
.tm-suggest a{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:var(--tm-r-sm);color:var(--tm-ink)}
.tm-suggest a:hover{background:var(--tm-surface-2);text-decoration:none}
.tm-suggest img{width:36px;height:36px;object-fit:contain}
.tm-suggest b{display:block;font-weight:600}
.tm-suggest small{color:var(--tm-muted)}
.tm-suggest em{font-style:normal;font-weight:650;color:var(--tm-success);font-variant-numeric:tabular-nums}
.tm-popular{margin-top:16px;font-size:var(--tm-fs-sm);color:var(--tm-muted);display:flex;flex-wrap:wrap;gap:6px 14px}
.tm-popular a{color:var(--tm-ink-2);font-weight:500}
.tm-hero-visual{position:relative;justify-self:center;width:min(100%,380px)}
.tm-hero-visual img{width:100%;height:auto;mix-blend-mode:multiply;clip-path:inset(1.5%)}
.tm-quote{position:absolute;left:-8px;bottom:12%;display:grid;gap:2px;background:var(--tm-surface);border:1px solid var(--tm-border);border-radius:var(--tm-r-md);padding:14px 18px;box-shadow:var(--tm-shadow-2)}
.tm-quote-lbl{font-size:var(--tm-fs-xs);color:var(--tm-muted);font-weight:600}
.tm-quote-price{font-size:var(--tm-fs-2xl);font-weight:700;letter-spacing:-.02em}
.tm-quote-sub{font-size:var(--tm-fs-xs);color:var(--tm-success);font-weight:600}
@media (max-width:959px){.tm-hero-visual{width:min(40%,170px)}.tm-quote{left:auto;right:-12px;bottom:6%}}
.tm-facts-row{list-style:none;margin:40px 0 0;padding:20px 0;display:grid;gap:16px;grid-template-columns:1fr 1fr;border-top:1px solid var(--tm-border)}
@media (min-width:900px){.tm-facts-row{grid-template-columns:repeat(4,1fr);gap:24px}}
.tm-facts-row li{display:flex;gap:12px;align-items:flex-start;font-size:var(--tm-fs-sm);color:var(--tm-muted)}
.tm-facts-row b{display:block;color:var(--tm-ink);font-weight:600;font-size:var(--tm-fs-base)}
.tm-facts-row svg{width:22px;height:22px;color:var(--tm-accent);flex:none;margin-top:2px}
.tm-block{padding:56px var(--tm-gutter)}
@media (min-width:960px){.tm-block{padding:80px var(--tm-gutter)}}
.tm-block-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}
.tm-block h2,.tm-how h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;font-weight:750}
.tm-cats{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (min-width:900px){.tm-cats{grid-template-columns:repeat(4,1fr);gap:16px}}
.tm-cat{display:grid;gap:12px;padding:14px 14px 18px;background:var(--tm-surface);border:1px solid var(--tm-border);border-radius:var(--tm-r-md);color:var(--tm-ink);transition:border-color var(--tm-t-fast),transform var(--tm-t-base) var(--tm-ease-out)}
.tm-cat:hover{border-color:var(--tm-accent);text-decoration:none;transform:translateY(-2px)}
.tm-cat:active{transform:scale(.98)}
.tm-cat img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:10px;background:var(--tm-surface-2)}
.tm-cat span{font-weight:650;font-size:var(--tm-fs-md);padding:0 4px}
.tm-brand-line{margin-top:24px;color:var(--tm-muted);font-size:var(--tm-fs-sm);letter-spacing:.01em;line-height:1.8}
.tm-how{background:var(--tm-surface);border-top:1px solid var(--tm-border);border-bottom:1px solid var(--tm-border);padding:56px 0}
@media (min-width:960px){.tm-how{padding:80px 0}}
.tm-how-steps{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:28px}
@media (min-width:900px){.tm-how-steps{grid-template-columns:repeat(3,1fr);gap:40px}}
.tm-how-steps li{display:grid;gap:6px;align-content:start}
.tm-how-steps .tm-n{width:32px;height:32px;border-radius:50%;background:var(--tm-accent);color:#fff;font-weight:700;display:grid;place-items:center;margin-bottom:6px}
.tm-how-steps b{font-size:var(--tm-fs-lg);font-weight:650}
.tm-how-steps span:last-child{color:var(--tm-muted);max-width:36ch}
.tm-faq h2{margin-bottom:20px}
.tm-faq details{border-bottom:1px solid var(--tm-border);max-width:760px}
.tm-faq summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:600;font-size:var(--tm-fs-md);display:flex;justify-content:space-between;gap:16px}
.tm-faq summary::-webkit-details-marker{display:none}
.tm-faq summary::after{content:"+";color:var(--tm-muted);font-weight:400;font-size:22px;line-height:1;transition:transform var(--tm-t-base) var(--tm-ease-out)}
.tm-faq details[open] summary::after{transform:rotate(45deg)}
.tm-faq p{padding:0 0 18px;color:var(--tm-ink-2);max-width:64ch}
.tm-foot{background:var(--tm-navy,#06122E);color:var(--tm-on-navy-muted,#C7CDEA);padding:40px 0;font-size:var(--tm-fs-sm)}
.tm-foot-grid{display:grid;gap:24px}
@media (min-width:900px){.tm-foot-grid{grid-template-columns:2fr 1fr 1fr}}
.tm-foot-mark{display:block;font-weight:800;font-size:22px;letter-spacing:-.02em;color:#fff;margin-bottom:10px}.tm-foot-mark em{font-style:normal;color:var(--tm-red,#E30613)}
.tm-foot nav{display:grid;gap:8px}
.tm-foot a{color:var(--tm-on-navy-muted,#C7CDEA)}

/* ===== Geräteauswahl (geraet.html) ===== */
.tm-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:var(--tm-fs-sm);color:var(--tm-muted);margin:0 0 20px;list-style:none;padding:0}
.tm-crumbs li{display:flex;align-items:center;gap:6px}
.tm-crumbs li+li::before{content:"";width:6px;height:6px;border-right:1.5px solid var(--tm-border-strong);border-top:1.5px solid var(--tm-border-strong);transform:rotate(45deg);margin-right:4px}
.tm-crumbs a{color:var(--tm-ink-2);font-weight:500}
.tm-crumbs [aria-current]{color:var(--tm-ink);font-weight:600}
.tm-pick{padding:28px var(--tm-gutter) 96px}
@media (min-width:960px){.tm-pick{padding:40px var(--tm-gutter) 80px}}
.tm-pick-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 24px;margin-bottom:20px}
.tm-pick-head h1{font-size:clamp(24px,3vw,32px);letter-spacing:-.02em}
.tm-pick-head p{color:var(--tm-muted);margin-top:6px}
.tm-filter{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border:1.5px solid var(--tm-border);border-radius:var(--tm-r-pill);background:var(--tm-surface);width:min(100%,340px)}
.tm-filter:focus-within{border-color:var(--tm-accent);box-shadow:0 0 0 3px var(--tm-accent-ring)}
.tm-filter svg{width:18px;height:18px;color:var(--tm-muted);flex:none}
.tm-filter input{border:0;outline:0;background:transparent;font:inherit;flex:1;min-width:0}
.tm-brands{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.tm-brands{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.tm-brands{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tm-brand-tile{display:flex;justify-content:flex-start;align-items:center;gap:12px;min-height:64px;padding:8px 14px 8px 10px;background:var(--tm-surface);border:1px solid var(--tm-border);border-radius:var(--tm-r-md);color:var(--tm-ink);font-weight:650;font-size:var(--tm-fs-md);transition:border-color var(--tm-t-fast),transform var(--tm-t-fast) var(--tm-ease-out)}
/* Markenkachel: echtes Logo in fester Box, Name, Pfeil. Ohne Logodatei steht der Anfangsbuchstabe (kein erfundenes Logo). */
.tm-brand-logo{flex:none;width:44px;height:44px;display:grid;place-items:center;overflow:hidden;background:var(--tm-surface-2);border-radius:10px}
.tm-brand-logo img{width:auto;height:auto;max-width:34px;max-height:30px;object-fit:contain;mix-blend-mode:multiply}
.tm-brand-initial{font-weight:800;font-size:var(--tm-fs-lg);color:var(--tm-ink-2);line-height:1}
.tm-brand-name{flex:1;min-width:0;overflow-wrap:anywhere}
.tm-brand-arrow{flex:none;color:var(--tm-muted);font-weight:400}
.tm-brand-tile:hover{border-color:var(--tm-accent);text-decoration:none}
.tm-brand-tile:active{transform:scale(.98)}
.tm-brand-tile small{font-weight:500;color:var(--tm-muted);font-size:var(--tm-fs-sm)}
.tm-series{margin-top:32px}
.tm-series h2{font-size:var(--tm-fs-lg);margin-bottom:12px}
.tm-models{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.tm-models{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.tm-models{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tm-model{display:grid;gap:8px;align-content:start;padding:14px;background:var(--tm-surface);border:1px solid var(--tm-border);border-radius:var(--tm-r-md);color:var(--tm-ink);transition:border-color var(--tm-t-fast),transform var(--tm-t-base) var(--tm-ease-out)}
.tm-model:hover{border-color:var(--tm-accent);text-decoration:none;transform:translateY(-2px)}
.tm-model:active{transform:scale(.98)}
.tm-model-img{aspect-ratio:1;border-radius:10px;background:var(--tm-surface-2);display:grid;place-items:center;overflow:hidden;margin-bottom:4px}
.tm-model-img img{width:82%;height:82%;object-fit:contain}
.tm-model b{font-weight:650;font-size:var(--tm-fs-base);line-height:1.3}
.tm-model span{font-size:var(--tm-fs-sm);color:var(--tm-muted)}
.tm-model em{font-style:normal;font-weight:650;color:var(--tm-ink);font-size:var(--tm-fs-sm);font-variant-numeric:tabular-nums}
/* Platzhalter, solange kein freigegebenes Hauptbild existiert: neutrale Silhouette je Bauform */
.tm-ph{width:44%;height:auto;color:#C3C8D6}
.tm-variant{display:grid;gap:24px}
@media (min-width:960px){.tm-variant{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:start}}
.tm-variant-img{background:var(--tm-surface);border:1px solid var(--tm-border);border-radius:var(--tm-r-md);aspect-ratio:1;display:grid;place-items:center;max-width:440px;width:100%;justify-self:center}
.tm-variant-img img{width:76%;height:76%;object-fit:contain}
.tm-opt-group{display:grid;gap:10px}
.tm-opt-group+.tm-opt-group{margin-top:24px}
.tm-opt-label{font-weight:600;display:flex;justify-content:space-between;gap:12px}
.tm-opt-label span{font-weight:500;color:var(--tm-muted);font-size:var(--tm-fs-sm)}
.tm-storage{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.tm-opt{display:grid;gap:2px;text-align:left;padding:12px 14px;border:1.5px solid var(--tm-border);border-radius:var(--tm-r-sm);background:var(--tm-surface);cursor:pointer;color:var(--tm-ink);transition:border-color var(--tm-t-fast),background var(--tm-t-fast),transform var(--tm-t-fast) var(--tm-ease-out)}
.tm-opt:hover{border-color:var(--tm-border-strong)}
.tm-opt:active{transform:scale(.98)}
.tm-opt[aria-pressed="true"]{border-color:var(--tm-accent);background:var(--tm-accent-soft)}
.tm-opt b{font-weight:650}
.tm-opt small{color:var(--tm-muted);font-variant-numeric:tabular-nums;font-size:var(--tm-fs-sm)}
.tm-colors{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.tm-swatch{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(17,24,39,.18);flex:none}
.tm-opt-row{display:flex;align-items:center;gap:10px}
.tm-variant-go{margin-top:28px;display:grid;gap:10px}

/* ===== Checkout (daten.html) ===== */
.tm-form{display:grid;gap:32px}
.tm-fieldset{border:0;margin:0;padding:0;display:grid;gap:14px;min-width:0}
.tm-fieldset legend{font-weight:650;font-size:var(--tm-fs-lg);margin-bottom:6px;padding:0}
.tm-grid-2{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){.tm-grid-2{grid-template-columns:1fr 1fr}.tm-span-2{grid-column:1/-1}}
.tm-grid-plz{display:grid;gap:14px;grid-template-columns:110px minmax(0,1fr)}
.tm-pay{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tm-pay .tm-opt{display:flex;align-items:center;gap:12px;min-height:56px;font-weight:650}
.tm-order{position:sticky;top:88px;display:none}
@media (min-width:960px){.tm-order{display:block}}
.tm-order .tm-sum-line{font-size:var(--tm-fs-sm);padding:10px 0}
.tm-order .tm-sum-total .tm-price{font-size:var(--tm-fs-2xl)}
.tm-confirm{display:grid;gap:8px}
.tm-check-row{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;padding:14px 16px;background:var(--tm-surface);border:1px solid var(--tm-border);border-radius:var(--tm-r-sm);cursor:pointer;line-height:1.5;font-size:var(--tm-fs-sm);transition:border-color var(--tm-t-fast),background var(--tm-t-fast)}
.tm-check-row:hover{border-color:var(--tm-border-strong)}
.tm-check-row input{appearance:none;width:20px;height:20px;margin:1px 0 0;border:1.5px solid var(--tm-border-strong);border-radius:6px;cursor:pointer;background:var(--tm-surface);transition:background-color var(--tm-t-fast),border-color var(--tm-t-fast)}
.tm-check-row input:checked{background:var(--tm-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--tm-accent)}
.tm-check-row:has(input:checked){border-color:var(--tm-accent);background:var(--tm-accent-soft)}
.tm-check-row b{font-weight:650}
.tm-confirm-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.tm-counter{font-size:var(--tm-fs-sm);color:var(--tm-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.tm-submit{display:grid;gap:10px;margin-top:20px}
.tm-done{text-align:center;display:grid;justify-items:center;gap:14px;padding-block:24px}
.tm-done-icon{width:64px;height:64px;border-radius:50%;background:var(--tm-success-soft);color:var(--tm-success);display:grid;place-items:center}
.tm-done-icon svg{width:30px;height:30px;stroke-width:2.4}
.tm-done h1{font-size:clamp(26px,3.4vw,36px);letter-spacing:-.02em;max-width:22ch;text-wrap:balance}
.tm-done p{color:var(--tm-ink-2);max-width:52ch}
.tm-ticket{display:inline-flex;gap:8px;align-items:center;padding:8px 14px;border-radius:var(--tm-r-pill);background:var(--tm-surface);border:1px solid var(--tm-border);font-weight:600;font-variant-numeric:tabular-nums}
.tm-done .tm-next{text-align:left;max-width:520px;width:100%;margin-top:8px}
.tm-done-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}

/* ===== Zustände für echte Daten (Laden, nicht verfügbar) ===== */
.tm-deduct.is-unavailable{border-color:#F3D19C;background:var(--tm-warn-soft)}
.tm-deduct.is-unavailable p,.tm-deduct.is-unavailable b{color:var(--tm-warn)}

/* Produktfotos mit weißem Hintergrund nahtlos in die Bildfläche einblenden */
.tm-model-img img,.tm-variant-img img,.tm-price-hero img,.tm-device img,.tm-suggest img{mix-blend-mode:multiply}