/* ============================================================
   Mobile Fassung der Schadensgutachten-Seite — Jans Mischung.

   AUTOMATISCH ERZEUGT aus den Varianten-Schichten.
   Neu bauen:  node app-varianten/mix/final.mjs
   Von Hand geaendert wird nur app-varianten/mobil-feinschliff.css;
   der Inhalt haengt unten dran und ueberlebt jeden Neubau.

   topbar      22 · Startseiten-Deck (Kimi)
   stats       22 · Startseiten-Deck (Kimi)
   begriffe    21 · Die Schadenakte (Codex)
   ablauf      25 · Regal (Claude)
   vergleich   25 · Regal (Claude)
   leistungen  Basis (freigegeben)
   faelle      21 · Die Schadenakte (Codex)
   kosten      20 · Service Flow (Codex)
   abschluss   Basis (freigegeben)

   Blockstudien:
   kt          Kostendetails · drei gleiche Zeilen (Claude)
   erg         Ergebnisstreifen · „Auszahlungssäulen" (Codex)
   abl         Ablauf · „Terminnotiz" (Codex)
   ============================================================ */

@media (max-width:640px){

  /* ---- grundton · 22 · Startseiten-Deck (Kimi) ---- */
  html #lx-sg{background:#F7F7F7;}

  /* ---- topbar · 22 · Startseiten-Deck (Kimi) ---- */
  html #lx-sg .topbar{position:sticky;top:0;z-index:60; background:rgba(247,247,247,.82); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:.5px solid rgba(51,49,50,.14);}
  html #lx-sg .topbar .pill-mini{transition:transform .15s ease,opacity .15s ease;}
  html #lx-sg .topbar .pill-mini:active{transform:scale(.96);opacity:.8;}

  /* ---- stats · 22 · Startseiten-Deck (Kimi) ---- */
  html #lx-sg .stats{margin-top:2.75rem;}
  html #lx-sg .stats-grid{display:block;background:#fff;border-radius:1.75rem; box-shadow:0 12px 30px rgba(15,37,66,.08);}
  html #lx-sg .stat{display:grid;grid-template-columns:minmax(5rem,max-content) minmax(0,1fr); column-gap:1rem;align-items:center; background:transparent;border:0;border-radius:0;box-shadow:none; padding:1.1rem 1.25rem;border-top:1px solid rgba(51,49,50,.1);}
  html #lx-sg .stats-grid .stat:first-child{border-top:0;}
  html #lx-sg .stat:hover{transform:none;box-shadow:none;}
  html #lx-sg .stat .big{grid-row:span 2;font-size:2.5rem;line-height:.95;letter-spacing:-.05em;color:#333132;}
  html #lx-sg .stat .big .u{font-size:1.25rem;color:#CC5500;}
  html #lx-sg .stat .lbl{align-self:end;margin-top:0;font-size:.6875rem;font-weight:800; letter-spacing:.14em;color:rgba(51,49,50,.72);}
  html #lx-sg .stat .note{align-self:start;margin-top:.2rem;font-size:.8125rem;line-height:1.45; color:rgba(51,49,50,.78);}

  /* ---- begriffe · 21 · Die Schadenakte (Codex) ---- */
  html #lx-sg .wig-v4 .wig4-arrow:active{transform:scale(.96); opacity:.8;}

  /* ---- faelle · 21 · Die Schadenakte (Codex) ---- */
  html #lx-sg .faelle .rv{transition-duration:.55s; transition-timing-function:cubic-bezier(.2,1,.3,1);}

  /* ---- begriffe · 21 · Die Schadenakte (Codex) ---- */
  html #lx-sg .wig-v4.wig4-static{padding:86px 0 92px;}
  html #lx-sg .wig-v4 .wig4-wrap{padding-inline:18px;}
  html #lx-sg .wig-v4 .wig4-head{display:block;}
  html #lx-sg .wig-v4 .wig4-title{font-size:40px; line-height:.98; letter-spacing:-.05em; color:#333132;}
  html #lx-sg .wig-v4 .wig4-title b{color:rgba(51,49,50,.55);}
  html #lx-sg .wig-v4 .wig4-intro{margin-top:16px; font-size:15.5px; line-height:1.62; color:rgba(51,49,50,.78);}
  html #lx-sg .wig-v4 .wig4-nav{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; width:100%; margin-top:28px; padding:0;}
  html #lx-sg .wig-v4 .wig4-count{font-family:'Google Sans', system-ui, -apple-system, sans-serif; font-size:12px; font-weight:700; color:rgba(51,49,50,.68);}
  html #lx-sg .wig-v4 .wig4-count .wig4-cur{min-width:auto; font-size:26px; font-weight:900; color:#333132;}
  html #lx-sg .wig-v4 .wig4-count .wig4-sep{font-size:14px; color:rgba(51,49,50,.68);}
  html #lx-sg .wig-v4 .wig4-count .wig4-tot{font-size:14px; color:rgba(51,49,50,.68);}
  html #lx-sg .wig-v4 .wig4-track{width:100%; height:2px; background:rgba(51,49,50,.12);}
  html #lx-sg .wig-v4 .wig4-bar{background:#167BFC;}
  html #lx-sg .wig-v4 .wig4-arrows{gap:8px;}
  html #lx-sg .wig-v4 .wig4-arrow{width:42px; height:42px; border:1px solid rgba(51,49,50,.08); background:#FFFFFF; color:#333132;}
  html #lx-sg .wig-v4 .wig4-deck{margin-top:32px;}
  html #lx-sg .wig-v4 .wig4-scroller{max-width:100vw; padding:6px 0 28px;}
  html #lx-sg .wig-v4 .wig4-track2{gap:16px; padding-inline:18px;}
  html #lx-sg .wig-v4 .wig4-card{width:clamp(250px,76vw,292px); min-height:318px; padding:24px; border:1px solid rgba(51,49,50,.06); border-radius:28px; background:#FFFFFF; box-shadow:0 12px 30px rgba(15,37,66,.08);}
  html #lx-sg .wig-v4 .wig4-card--accent{width:clamp(250px,76vw,292px); min-height:318px; padding:24px; border:1px solid rgba(51,49,50,.06); border-radius:28px; background:#FFFFFF; box-shadow:0 12px 30px rgba(15,37,66,.08);}
  html #lx-sg .wig-v4 .wig4-card:hover{transform:none; border-color:rgba(51,49,50,.06); box-shadow:0 12px 30px rgba(15,37,66,.08);}
  html #lx-sg .wig-v4 .wig4-card--accent:hover{transform:none; border-color:rgba(51,49,50,.06); box-shadow:0 12px 30px rgba(15,37,66,.08);}
  html #lx-sg .wig-v4 .wig4-card::before{left:24px; right:24px; height:3px; background:#167BFC;}
  html #lx-sg .wig-v4 .wig4-num{font-family:'Google Sans', system-ui, -apple-system, sans-serif; font-size:44px; font-weight:900; color:rgba(51,49,50,.55); opacity:1;}
  html #lx-sg .wig-v4 .wig4-tag{margin-top:20px; font-family:'Google Sans', system-ui, -apple-system, sans-serif; font-size:10px; font-weight:700; letter-spacing:.14em; color:rgba(51,49,50,.68);}
  html #lx-sg .wig-v4 .wig4-term{margin-top:10px; font-size:24px; line-height:1.06; color:#333132;}
  html #lx-sg .wig-v4 .wig4-desc{font-size:14.5px; line-height:1.6; color:rgba(51,49,50,.78);}
  html #lx-sg .wig-v4 .wig4-money .wig4-eur{font-family:'Google Sans', system-ui, -apple-system, sans-serif; font-size:24px; font-weight:900; color:#CC5500;}
  html #lx-sg .wig-v4 .wig4-card--accent .wig4-bignum{font-size:88px; color:#333132;}
  html #lx-sg .wig-v4 .wig4-card--accent .wig4-bignum span{color:#167BFC;}
  html #lx-sg .wig-v4 .wig4-card--accent .wig4-accent-lead{font-size:23px; color:#333132;}
  html #lx-sg .wig-v4 .wig4-card--accent .wig4-accent-sub{color:rgba(51,49,50,.78);}
  html #lx-sg .wig-v4 .wig4-card--accent .wig4-swipe{font-family:'Google Sans', system-ui, -apple-system, sans-serif; font-weight:700; color:#1C3190;}

  /* ---- faelle · 21 · Die Schadenakte (Codex) ---- */
  html #lx-sg .faelle{margin-top:92px;}
  html #lx-sg .faelle .wrap{padding-inline:18px;}
  html #lx-sg .case-grid{grid-template-columns:minmax(0,1fr); gap:46px;}
  html #lx-sg .case{min-width:0; padding-bottom:42px; border-bottom:1px solid rgba(51,49,50,.14); background:transparent;}
  html #lx-sg .case-img{border-radius:28px; box-shadow:0 10px 28px rgba(15,37,66,.06);}
  html #lx-sg .case-cap{margin-top:12px; font-size:11.5px; line-height:1.5; color:rgba(51,49,50,.68);}
  html #lx-sg .case .loc{margin-top:22px; font-family:'Google Sans', system-ui, -apple-system, sans-serif; font-size:10px; font-weight:700; letter-spacing:.14em; color:rgba(51,49,50,.68);}
  html #lx-sg .case h3{margin-top:9px; font-size:34px; line-height:.98; letter-spacing:-.05em;}
  html #lx-sg .case h3 .it{color:rgba(51,49,50,.55);}
  html #lx-sg .case p{margin-top:14px; font-size:14.5px; line-height:1.62; color:rgba(51,49,50,.78);}
  html #lx-sg .case-rule{margin:22px 0 18px; background:rgba(51,49,50,.12);}
  html #lx-sg .case-tab{grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; font-size:13.5px;}
  html #lx-sg .case-tab .sumrow.amt{font-size:24px; line-height:1;}

  /* ---- ablauf · 25 · Regal (Claude) ---- */
  html #lx-sg .steps{margin-top:56px;}

  /* ---- vergleich · 25 · Regal (Claude) ---- */
  html #lx-sg .vergleich{margin-top:56px;}
  html #lx-sg .duell{display:flex;align-items:stretch;gap:12px; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-left:var(--gut); margin-inline:calc(var(--gut) * -1); padding:4px var(--gut) 16px; -webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none;}
  html #lx-sg .duell::-webkit-scrollbar{display:none;}
  html #lx-sg .duell{background:transparent;border:0;border-radius:0;box-shadow:none;margin-top:20px;}
  html #lx-sg .duell-row{flex:0 0 80%;scroll-snap-align:start;display:block; background:#fff;border:1px solid rgba(51,49,50,.05);border-radius:22px; box-shadow:0 10px 28px rgba(15,37,66,.07); padding:18px 18px 20px;}
  html #lx-sg .duell-row+.duell-row .dc{border-top:0;}
  html #lx-sg .duell-row+.duell-row .dc.crit{border-top:0;}
  html #lx-sg .duell-row+.duell-row .dc.mine{border-top:0;}
  html #lx-sg .duell-row+.duell-row .dc.theirs{border-top:0;}
  html #lx-sg .duell .duell-head{display:none;}
  html #lx-sg .dc{padding:0;font-size:15px;line-height:1.5;}
  html #lx-sg .dc.crit{padding:0 0 14px;font-size:10px;letter-spacing:.14em;color:var(--blue);}
  html #lx-sg .dc.mine{padding-left:34px;}
  html #lx-sg .dc.theirs{padding-left:34px;}
  html #lx-sg .dc.theirs{margin-top:14px;padding-top:14px;border-top:1px solid rgba(51,49,50,.10); font-size:14px;}
  html #lx-sg .duell .ico{width:20px;height:20px;margin-left:-30px;vertical-align:-5px;margin-right:10px;}
  html #lx-sg .duell .ico svg{width:12px;height:12px;}
  html #lx-sg .dc.mine::before{margin-left:-30px;font-size:9px;margin-bottom:7px;}
  html #lx-sg .dc.theirs::before{margin-left:-30px;font-size:9px;margin-bottom:7px;}
  html #lx-sg .ergebnis{border-radius:22px;padding:26px 20px;margin-top:24px; box-shadow:0 20px 40px rgba(28,49,144,.20);}
  html #lx-sg .ergebnis h3{font-size:28px;letter-spacing:-.05em;line-height:1.04;}

  /* ---- ablauf · 25 · Regal (Claude) ---- */
  html #lx-sg .panel-steps{background:#fff;color:var(--ink);border-radius:22px;overflow:hidden; border:1px solid rgba(51,49,50,.05); box-shadow:0 10px 28px rgba(15,37,66,.07);}
  html #lx-sg .panel-photo{min-height:160px;}
  html #lx-sg .steps-body{padding:22px 18px 20px;}
  html #lx-sg .steps-body h2{color:var(--ink);font-size:29px;letter-spacing:-.05em;line-height:1.02;}
  html #lx-sg .steps-body .sub{color:rgba(51,49,50,.72);font-size:14.5px;margin-bottom:22px;}
  html #lx-sg .step{display:grid;grid-template-columns:30px minmax(0,1fr); column-gap:12px;row-gap:5px;align-items:start; border-bottom:1px solid rgba(51,49,50,.08); padding:0 0 16px;margin-bottom:16px;}
  html #lx-sg .step .idx{grid-column:1;grid-row:1 / span 2; width:30px;height:30px;border-radius:0;background:transparent; color:var(--blue);font-size:22px;font-weight:900;letter-spacing:-.05em; justify-content:flex-start;}
  html #lx-sg .step .idx svg{width:20px;height:20px;}
  html #lx-sg .step .meta{grid-column:2;grid-row:1;justify-self:start;margin-left:0;align-self:center; color:rgba(51,49,50,.72);font-size:10px;}
  html #lx-sg .step > div:not(.idx){grid-column:2;grid-row:2;}
  html #lx-sg .step h3{font-size:17.5px;letter-spacing:-.02em;margin-bottom:5px;}
  html #lx-sg .step p{font-size:14px;line-height:1.55;color:rgba(51,49,50,.74);}
  html #lx-sg .step.final{background:rgba(22,123,252,.07);border:0;border-radius:16px;padding:14px;margin-bottom:0;}
  html #lx-sg .step.final .idx{background:transparent;color:var(--blue);}
  html #lx-sg .step.final h3{color:var(--blue-deep);}
  html #lx-sg .step.final .meta{color:rgba(51,49,50,.72);}
  html #lx-sg .step.final p{color:rgba(51,49,50,.74);}

  /* ---- vergleich · 25 · Regal (Claude) ---- */
  html #lx-sg .duell-row:active{transform:scale(.97);opacity:.88;transition:transform .1s ease,opacity .1s ease;}

  /* ---- ablauf · 25 · Regal (Claude) ---- */
  html #lx-sg .panel-photo .grad{background:linear-gradient(180deg,rgba(15,37,66,.20) 0%,rgba(15,37,66,.55) 55%,rgba(15,37,66,.80) 100%);}

  /* ---- vergleich · 25 · Regal (Claude) ---- */
  html #lx-sg .dc.crit{color:var(--blue-deep);}

  /* ---- kosten · 20 · Service Flow (Codex) ---- */
  html #lx-sg .kosten .rv{transition-duration:.55s; transition-timing-function:cubic-bezier(.2,1,.3,1);}
  html #lx-sg .kosten{margin-top:76px;}
  html #lx-sg .kosten .wrap{padding-inline:16px;}
  html #lx-sg .kosten-inner{grid-template-columns:minmax(0,1fr); gap:32px;}
  html #lx-sg .pass-card{padding:26px 22px; border:1px solid rgba(51,49,50,.06); border-radius:28px; background:#FFFFFF; color:#333132; box-shadow:0 12px 30px rgba(15,37,66,.08);}
  html #lx-sg .pass-card::after{background:radial-gradient(120% 80% at 80% 0%,rgba(22,123,252,.08),transparent 55%);}
  html #lx-sg .pass-top{gap:12px; margin-bottom:30px;}
  html #lx-sg .pass-brand .lg{background:#0F2542;}
  html #lx-sg .pass-brand .lg svg{color:#FFFFFF;}
  html #lx-sg .pass-eb{font-size:9px; letter-spacing:.12em; color:rgba(51,49,50,.68); opacity:1;}
  html #lx-sg .pass-meta .eb{font-size:9px; letter-spacing:.12em; color:rgba(51,49,50,.68); opacity:1;}
  html #lx-sg .pass-bottom .rt .eb{font-size:9px; letter-spacing:.12em; color:rgba(51,49,50,.68); opacity:1;}
  html #lx-sg .pass-top .sub{font-size:12.5px; line-height:1.45; color:rgba(51,49,50,.78); opacity:1;}
  html #lx-sg .pass-top .rt .no{font-size:14px; color:#333132;}
  html #lx-sg .pass-figure{gap:12px; margin-bottom:30px;}
  html #lx-sg .pass-figure .big{font-size:clamp(76px,24vw,96px); color:#333132;}
  html #lx-sg .pass-figure .big .e{color:#CC5500;}
  html #lx-sg .pass-figure .lab{min-width:0; padding-bottom:7px;}
  html #lx-sg .pass-figure .lab .t{font-size:24px; color:#333132;}
  html #lx-sg .pass-figure .lab .d{font-size:12.5px; line-height:1.45; color:rgba(51,49,50,.78); opacity:1;}
  html #lx-sg .pass-meta{grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:28px;}
  html #lx-sg .pass-meta .vl{margin-top:5px; font-size:13px; line-height:1.25; color:#333132;}
  html #lx-sg .pass-meta .vs{margin-top:4px; font-size:11px; line-height:1.35; color:rgba(51,49,50,.68); opacity:1;}
  html #lx-sg .pass-bottom{gap:14px; padding-top:22px; border-top:1px solid rgba(51,49,50,.10);}
  html #lx-sg .barcode{gap:2px;}
  html #lx-sg .barcode span{width:2px; background:rgba(15,37,66,.68);}
  html #lx-sg .pass-bottom .rt .vl{color:#333132;}
  html #lx-sg .kosten-aside{gap:12px;}
  html #lx-sg .kosten-aside h2{margin-bottom:10px; font-size:34px; line-height:1; letter-spacing:-.05em;}
  html #lx-sg .kdet{padding:20px; border:1px solid rgba(51,49,50,.06); border-radius:22px; background:#FFFFFF; box-shadow:0 10px 28px rgba(15,37,66,.06);}
  html #lx-sg .kdet:hover{transform:none; box-shadow:0 10px 28px rgba(15,37,66,.06);}
  html #lx-sg .kdet .kt{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px;}
  html #lx-sg .kdet .kt h3{font-size:16px;}
  html #lx-sg .kdet .kt .pr{font-size:24px; line-height:1;}
  html #lx-sg .kdet .kt .pr.free{color:#CC5500;}
  html #lx-sg .kdet .kt .pr.money{color:#CC5500;}
  html #lx-sg .kdet p .money{color:#333132;}
  html #lx-sg .kdet p{font-size:13.5px; color:rgba(51,49,50,.78);}
}


/* ==================== Kostendetails · drei gleiche Zeilen (Claude) ==================== */
@media (max-width:640px){
  html #lx-sg .kosten-aside{gap:0;}
  html #lx-sg .kosten-aside h2{margin-bottom:6px;}
  html #lx-sg .kdet{background:transparent;border:0;border-radius:0;box-shadow:none; padding:18px 0;margin:0; border-top:1px solid rgba(51,49,50,.12);}
  html #lx-sg .kdet:hover{transform:none;box-shadow:none;}
  html #lx-sg .kdet:last-child{border-bottom:1px solid rgba(51,49,50,.12);}
  html #lx-sg .kdet .kt{display:grid;grid-template-columns:minmax(0,1fr) max-content; align-items:baseline;gap:12px;margin-bottom:6px;}
  html #lx-sg .kdet .kt h3{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink);}
  html #lx-sg .kdet .kt .pr{font-size:17px;font-weight:900;color:var(--navy);white-space:nowrap;}
  html #lx-sg .kdet .kt .pr .eu{color:var(--orange);}
  html #lx-sg .kdet p{font-size:13px;line-height:1.5;color:rgba(51,49,50,.75);}
  html #lx-sg .kdet p .money{color:var(--ink);font-weight:700;}
}

/* ==================== Ergebnisstreifen · „Auszahlungssäulen" (Codex) ==================== */
@media (max-width:640px){
  html #lx-sg .ergebnis{display:flex; flex-direction:column; gap:28px; min-width:0; margin-top:24px; padding:24px 20px 26px; border:1px solid rgba(51,49,50,.06); border-radius:28px; background:#FFFFFF; color:#333132; box-shadow:0 12px 30px rgba(15,37,66,.08);}
  html #lx-sg .ergebnis > div:first-child{min-width:0;}
  html #lx-sg .ergebnis .e-lbl{margin-bottom:12px; font-family:'Google Sans', system-ui, -apple-system, sans-serif; font-size:11px; font-weight:800; letter-spacing:.14em; color:#1C3190;}
  html #lx-sg .ergebnis h3{font-size:32px; line-height:1.02; letter-spacing:-.05em; color:#333132;}
  html #lx-sg .ergebnis h3 b{font-size:36px; color:#CC5500;}
  html #lx-sg .ergebnis .e-note{max-width:none; margin-top:16px; font-size:14px; line-height:1.58; color:rgba(51,49,50,.78);}
  html #lx-sg .bars{order:-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; min-width:0; padding:18px 18px 16px; border-radius:22px; background:#F7F7F7;}
  html #lx-sg .bar-row{display:flex; flex-direction:column; min-width:0;}
  html #lx-sg .bar-top{order:2; display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; margin:12px 0 0;}
  html #lx-sg .bar-name{min-width:0; font-size:13px; line-height:1.25; color:#333132; overflow-wrap:anywhere;}
  html #lx-sg .bar-name i span{color:#1C3190;}
  html #lx-sg .bar-val{min-width:0; font-family:'Google Sans', system-ui, -apple-system, sans-serif; font-size:12px; font-weight:700; line-height:1.35; letter-spacing:0; color:#1C3190; overflow-wrap:anywhere;}
  html #lx-sg .bar-row.theirs .bar-name{color:#333132;}
  html #lx-sg .bar-row.theirs .bar-val{color:#1C3190;}
  html #lx-sg .bar-track{position:relative; order:1; display:flex; align-items:flex-end; width:100%; height:156px; overflow:hidden; border-radius:18px 18px 8px 8px; background:rgba(51,49,50,.08);}
  html #lx-sg .bar-fill{width:100%; height:100%; border-radius:0; transition:height .8s cubic-bezier(.2,1,.3,1);}
  html #lx-sg .bar-row.mine .bar-fill{width:100%; height:100%; background:#167BFC;}
  html #lx-sg .bar-row.theirs .bar-fill{width:100%; height:82%; background:#0F2542;}
  html #lx-sg .bar-row.theirs .bar-track::after{content:""; position:absolute; top:0; right:0; left:0; width:100%; height:18%; border:0; border-bottom:2px solid #CC5500; background:repeating-linear-gradient(-45deg,rgba(204,85,0,.34) 0 3px,rgba(255,255,255,0) 3px 8px); opacity:1; transition:none;}
  html #lx-sg .bar-row.mine .bar-val{color:var(--blue-deep);}
  html #lx-sg .bar-row.mine .bar-name{color:var(--ink);}
  html #lx-sg .ergebnis > div:not(.bars){order:1;}
  html #lx-sg .ergebnis .bars{order:2;}
}

/* ==================== Ablauf · „Terminnotiz" (Codex) ==================== */
@media (max-width:640px){
  html #lx-sg .panel-photo{min-height:0; padding:18px 18px 0; background:#FFFFFF;}
  html #lx-sg .panel-photo img{display:none;}
  html #lx-sg .panel-photo .grad{display:none;}
  html #lx-sg .panel-photo .ticker{position:static; display:grid; grid-template-columns:10px minmax(0,1fr); column-gap:12px; row-gap:7px; padding:16px; border-radius:18px; background:#F7F7F7; box-shadow:0 4px 16px rgba(15,37,66,.06);}
  html #lx-sg .panel-photo .ticker::before{content:""; grid-column:1; grid-row:1 / span 2; align-self:start; width:10px; height:10px; margin-top:2px; border-radius:999px; background:#167BFC; box-shadow:0 0 0 5px rgba(22,123,252,.10);}
  html #lx-sg .panel-photo .ticker-lbl{grid-column:2; margin:0; font-family:'Google Sans', system-ui, -apple-system, sans-serif; font-size:11px; font-weight:700; line-height:1.3; letter-spacing:.12em; color:#1C3190;}
  html #lx-sg .panel-photo .ticker p{grid-column:2; max-width:none; margin:0; color:rgba(51,49,50,.82); font-size:14px; font-weight:500; line-height:1.55; overflow-wrap:anywhere;}
  html #lx-sg .step.final{position:relative; display:grid; grid-template-columns:42px minmax(0,1fr); column-gap:13px; row-gap:6px; margin:28px 0 0; padding:18px; border:1px solid rgba(51,49,50,.06); border-radius:18px; background:#F7F7F7; box-shadow:0 10px 28px rgba(15,37,66,.06);}
  html #lx-sg .step.final::before{content:""; position:absolute; top:-15px; left:0; right:0; height:1px; background:rgba(51,49,50,.10);}
  html #lx-sg .step.final .idx{grid-column:1; grid-row:1 / span 2; width:42px; height:42px; border-radius:14px; background:#0F2542; color:#FFFFFF; align-items:center; justify-content:center;}
  html #lx-sg .step.final .idx svg{width:19px; height:19px;}
  html #lx-sg .step.final .meta{grid-column:2; grid-row:1; align-self:center; margin:0; color:#1C3190; font-family:'Google Sans', system-ui, -apple-system, sans-serif; font-size:11px; font-weight:700; letter-spacing:.14em;}
  html #lx-sg .step.final > div:not(.idx){grid-column:1 / -1; grid-row:3; min-width:0; padding-top:8px;}
  html #lx-sg .step.final h3{margin-bottom:7px; color:#333132; font-size:20px; letter-spacing:-.025em;}
  html #lx-sg .step.final p{color:rgba(51,49,50,.82); font-size:14px; line-height:1.55; overflow-wrap:anywhere;}
}

/* ==================== Feinschliff von Hand ==================== */
/* ============================================================
   Feinschliff der mobilen Fassung — von Hand gepflegt.
   Wird von mix/final.mjs an mobil.css angehaengt und ueberlebt
   damit jeden Neubau der Mischung.

   Drei Aufgaben:
   1. Der Abschluss-CTA faellt auf dem Handy weg (Jans Wunsch).
   2. Blau wird staerker gesetzt — aber nur dort, wo es etwas
      bedeutet, nicht als Dekoration.
   3. Die Naht zwischen vier verschiedenen Handschriften glaetten.
   ============================================================ */

@media (max-width:640px){

  /* ---------------------------------------------------------
     1 · Abschluss
     Der CTA-Block und der Abbinder sind am 03.08.2026 aus dem
     Markup entfernt worden — auf allen Breiten, nicht nur mobil.
     Hier bleibt nur die Luft nach der letzten Kostenkarte, damit
     die Seite nicht unmittelbar an der Schnittkante endet.
     --------------------------------------------------------- */
  html #lx-sg .kosten{padding-bottom:56px;}   /* Desktop traegt 120px, das waere hier zu viel */

  /* ---------------------------------------------------------
     2 · Blau, semantisch gesetzt
     --------------------------------------------------------- */

  /* Der Schlussschritt ist der Moment, in dem das Ergebnis da ist —
     er bekommt als einziger Schritt eine eigene Flaeche. */
  html #lx-sg .step.final{
    background:var(--navy);border:0;border-radius:18px;
    padding:16px 16px 18px;margin-top:6px;
    box-shadow:0 16px 34px rgba(15,37,66,.22);
  }
  html #lx-sg .step.final .idx{
    background:var(--blue);color:#fff;border-radius:50%;
    width:30px;height:30px;
  }
  html #lx-sg .step.final .idx svg{width:17px;height:17px;color:#fff;}
  html #lx-sg .step.final h3{color:#fff;}
  html #lx-sg .step.final .meta{color:rgba(255,255,255,.72);}
  html #lx-sg .step.final p{color:rgba(255,255,255,.82);}

  /* Weiss auf Primaerblau traegt 3,98:1 — bei 13px zu wenig. Tiefblau
     bringt die Pille auf 9,5:1, ohne die CI zu verlassen. */
  html #lx-sg .topbar .pill-mini{background:var(--blue-deep);}

  /* Fall-Marker sind Kategorie, keine Deko — Tiefblau traegt bei 10px
     10,4:1, Primaerblau nur 3,98:1. */
  html #lx-sg .case .loc{color:var(--blue-deep);}

  /* Die Abschlusslinie der Leistungen war reines Schwarz und der
     haerteste Kontrast der ganzen Seite. */
  html #lx-sg .svc-row:last-of-type{border-bottom-color:rgba(28,49,144,.22);}
  html #lx-sg .case-rule{background:rgba(28,49,144,.16);}

  /* Die Kennzahlen trugen ausser dem orangen Einheitszeichen keine Farbe.
     Eine blaue Oberkante an der Karte sah nach Fehler aus — die Kurve
     schnitt sie an den Seiten ab. Die Versal-Labels sind der richtige
     Ort: sie benennen die Kategorie, und Tiefblau traegt bei 11px
     10,4:1 statt der 4,9:1 des bisherigen Graus. */
  html #lx-sg .stat .lbl{color:var(--blue-deep);}

  /* Die Kostenkarte ist auf dem Handy hell — dort traegt die dunkle
     Fassung des Logos, auf dem navyfarbenen Desktop die weisse. */
  html #lx-sg .pass-brand .lgo-w{display:none;}
  html #lx-sg .pass-brand .lgo-d{display:block;}
  html #lx-sg .pass-brand .lgo{height:20px;}

  /* Eine Regel fuer die ganze Seite: Versal-Labels benennen eine
     Kategorie und stehen deshalb in Tiefblau. Das gibt der Seite Blau
     an Stellen, wo es etwas bedeutet — und traegt bei 9 bis 11px
     10,4:1 statt der 4,9 des vorherigen Graus. */
  html #lx-sg .pass-eb,
  html #lx-sg .pass-meta .eb,
  html #lx-sg .pass-bottom .rt .eb,
  html #lx-sg .step .meta,
  html #lx-sg .dc.mine::before{color:var(--blue-deep);}
  /* Auf dunklem Grund bleibt es hell — dort traegt Tiefblau 1,4:1. */
  html #lx-sg .step.final .meta{color:rgba(255,255,255,.72);}

  /* Die Farbfuehrung der Preise regelt die Blockvariante „Staffel"
     (blocks/kosten-1.css). Nachjustiert auf Jans Ansage: blau ist
     dort nur der Messstrich, orange nur das Eurozeichen. Der Betrag
     steht in Navy, die Versal-Titel in Ink — beides ruhig, damit der
     Strich der einzige farbige Akzent der Sektion bleibt. */
  html #lx-sg .kdet .kt .pr,
  html #lx-sg .kdet .kt .pr.free,
  html #lx-sg .kdet .kt .pr.money{color:var(--navy);}
  html #lx-sg .kdet .kt .pr .eu{color:var(--orange);}
  html #lx-sg .kdet .kt h3{color:var(--ink);}
  html #lx-sg .kdet p .money{color:var(--ink);}

  /* ---------------------------------------------------------
     3 · Naht glaetten
     Der Vergleich kommt aus „Regal", laesst den Vorspann aber in
     Desktop-Groesse stehen — 21px Fliesztext neben 15px-Kacheln.
     --------------------------------------------------------- */
  html #lx-sg .vergleich .lead p{font-size:16px;line-height:1.6;}
  html #lx-sg .vergleich .lead{margin-bottom:4px;}
}