/* =====================================================================
   Omnio Sport Profi: nur die Teile, die es so nur auf dieser Seite gibt
   (Spielfeld im Hero, Anzeigetafel, Bausteine, Vergleich, Europaweit,
   Verweis auf den Schadenservice). Gleiche Gestaltung wie die Tennis-Seite.
   Kopf, Fußzeile, Anfrage, Über mich, Bewertungen, App, FAQ und Kontakt
   kommen unverändert aus basis.css.
   Farben: Omnio (marke.css). Gold nur als Akzent: Schild „Profi“, Zahlen der
   Anzeigetafel und Punkt im Spielfeld (Daniel, 29.09.2026, wie bei Tennis).
   ===================================================================== */
:root{
  --marine:var(--dark); --steel:var(--btn); --steel-h:var(--btn-hover);
  --ice:var(--tint); --ice-2:var(--tint-2); --paper:var(--bg);
  --display:var(--font-head); --body:var(--font-body);
  --gold:#D4A72C; --rt:8px;
}

/* Schild „Profi“ neben dem Logo */
.logo{display:flex;align-items:center;gap:10px}
.pro{display:inline-block;font:800 .95rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--marine);background:var(--gold);padding:5px 7px 4px;border-radius:4px}

/* Hero mit Spielfeld */
.hero{background:var(--surface)}
.court{position:absolute;right:-230px;top:-24px;width:640px;height:auto;pointer-events:none}
.hero .wrap{position:relative;display:grid;gap:30px;padding-block:34px 40px}
.hero-copy{display:grid;gap:20px;align-content:start}
.hero h1{font-size:clamp(3.6rem,17vw,7.2rem);line-height:.84}
.hero h1 > span{display:block}
.hero h1 .l2{color:var(--steel)}
.hero h1 .tag{width:max-content;max-width:100%;margin-top:14px;font-size:clamp(1.35rem,5.6vw,2.1rem);line-height:1;background:var(--gold);color:var(--marine);padding:8px 12px 6px;border-radius:4px}
.hero .lede{font-size:1.1rem;max-width:none}
.hero-note{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;color:var(--muted)}
.hero-note svg{width:20px;height:20px;color:var(--steel);flex:none;margin-top:2px}

.ic{width:44px;height:44px;border-radius:6px;background:var(--ice);color:var(--marine);display:grid;place-items:center;flex:none}
.ic svg{width:24px;height:24px}

.lineup{background:var(--surface);border:1px solid var(--line);border-radius:var(--rt);box-shadow:0 18px 40px rgba(11,65,89,.09);align-self:start;overflow:hidden}
.lineup-photo{margin:0;position:relative;aspect-ratio:16/8;background:var(--marine)}
.lineup-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.lineup-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,65,89,0) 45%,rgba(11,65,89,.85))}
.lineup-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;background:var(--marine);color:#fff}
.lineup-head strong{font:800 1.3rem/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.lineup-head span{font:700 .72rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--block-accent);white-space:nowrap}
.lineup a{display:grid;grid-template-columns:44px 1fr 20px;gap:14px;align-items:center;padding:14px 18px;text-decoration:none;border-top:1px solid var(--line)}
.lineup a:first-of-type{border-top:0}
.lineup a:hover{background:var(--paper)}
.lineup b{display:block;font:800 1.25rem/1.05 var(--display);text-transform:uppercase;color:var(--marine)}
.lineup small{display:block;font-size:.86rem;color:var(--muted);line-height:1.35;margin-top:3px}
.lineup .go{color:var(--steel);width:20px;height:20px}
.lineup-foot{padding:12px 18px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted);background:var(--paper)}
@media (min-width:900px){.hero .wrap{grid-template-columns:1.2fr 1fr;align-items:center;gap:56px;padding-block:64px}.court{right:-90px;top:-40px;width:860px}}

/* Anzeigetafel */
.board{background:var(--marine);color:#fff}
.board .wrap{display:grid;grid-template-columns:1fr 1fr}
.cell{padding:20px 14px 20px 0;display:grid;gap:5px;align-content:start}
.cell:nth-child(even){padding-left:16px;border-left:1px solid rgba(255,255,255,.14)}
.cell:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.14)}
.cell .pre{font:600 .72rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.cell strong{font:800 clamp(2.3rem,10vw,3.4rem)/.95 var(--display);color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.cell .lab{font-size:.84rem;line-height:1.3;color:rgba(255,255,255,.88)}
@media (min-width:900px){.board .wrap{grid-template-columns:repeat(4,1fr)}.cell:nth-child(n){padding:26px 22px;border-bottom:0;border-left:1px solid rgba(255,255,255,.14)}.cell:first-child{border-left:0;padding-left:0}}

/* Bausteine */
/* Sparten-Leiste: klebt unter der Kopfzeile, solange man in den Bausteinen ist */
.sparten{position:sticky;top:calc(env(safe-area-inset-top,0px) + 65px);z-index:30;background:rgba(244,248,252,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-block:1px solid var(--line)}
.sparten-row{position:relative;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-block:8px}
.sparten-row::-webkit-scrollbar{display:none}
.sparten a{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border-radius:6px;border:1.5px solid var(--ice-2);background:var(--surface);color:var(--marine);font:700 .88rem/1 var(--body);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.sparten a svg{width:18px;height:18px;color:var(--steel)}
.sparten a:hover{border-color:var(--steel)}
.sparten a[aria-current="true"]{background:var(--marine);border-color:var(--marine);color:#fff}
.sparten a[aria-current="true"] svg{color:var(--accent)}
@media (min-width:900px){.sparten-row{justify-content:center}}

.bs{display:grid;gap:24px;padding-block:32px 16px;scroll-margin-top:132px}
.bs-band{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:20px 18px;background:var(--marine);color:#fff;border-radius:var(--rt)}
.bs-band .ic{width:52px;height:52px;background:var(--accent);color:#fff}
.bs-band .ic svg{width:28px;height:28px}
.bs-band .wm{position:absolute;right:-24px;bottom:-34px;width:170px;height:170px;color:#fff;opacity:.08;pointer-events:none}
.bs-count{display:block;font:700 .72rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--block-accent);margin-bottom:7px}
.bs-band h3{color:#fff;font-size:clamp(1.8rem,7.2vw,3.3rem);line-height:.9;hyphens:manual}
.bs-claim{margin-top:7px;font-size:1rem;line-height:1.35;color:rgba(255,255,255,.85)}
.bs-grid{display:grid;gap:22px}
.bs-lead{display:grid;gap:14px;align-content:start;align-self:start}
.bs-lead p{color:var(--muted);font-size:1.02rem}
.bs-photo{margin:0;position:relative;border-radius:var(--rt);overflow:hidden;aspect-ratio:4/3;background:var(--marine)}
.bs-photo img{display:block;width:100%;height:100%;object-fit:cover}
.bs-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--accent)}
.lead-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px 8px 12px;font-weight:700;color:var(--marine);text-decoration:none;width:max-content;max-width:100%;background:var(--ice);border-left:4px solid var(--accent);border-radius:0 var(--rt) var(--rt) 0;transition:background .15s}
.lead-link svg{width:18px;height:18px;color:var(--link)}
.lead-link:hover{background:var(--ice-2)}
.bs-body{display:grid;gap:20px;align-content:start;min-width:0;padding:0}
@media (min-width:920px){.bs{padding-block:44px 24px}.bs-band{padding:26px 30px;gap:20px}.bs-band .ic{width:64px;height:64px}.bs-band .ic svg{width:34px;height:34px}.bs-band .wm{width:240px;height:240px;right:-30px;bottom:-60px}.bs-grid{grid-template-columns:5fr 7fr;gap:56px}.bs-lead{position:sticky;top:140px}}

/* Aufklapper in den Bausteinen */
.bs .more{border:1.5px solid var(--ice-2);border-radius:var(--rt);background:var(--surface)}
.bs .more > summary{display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:4px 14px;align-items:center;padding:14px 16px;min-height:56px}
.bs .more > summary::after{content:"+";grid-column:2;grid-row:1 / span 2;width:30px;height:30px;border-radius:6px;background:var(--marine);color:#fff;display:grid;place-items:center;font:800 1.3rem/1 var(--display);transition:transform .2s}
.more-t{display:flex;align-items:center;gap:8px;font:800 1.25rem/1.05 var(--display);text-transform:uppercase;color:var(--marine)}
.more-sub{font-size:.85rem;font-weight:500;color:var(--muted);line-height:1.35}
.more-t .pro{font-size:.78rem;background:var(--accent);color:#fff}
.more-lede{font-size:.93rem;color:var(--muted)}
.facts{margin:0}
.facts div{display:grid;grid-template-columns:1fr;gap:4px;padding:12px 0;border-top:1px solid var(--line)}
@media (min-width:480px){.facts div{grid-template-columns:128px 1fr;gap:14px;align-items:baseline}}
.facts dt{font:800 1.6rem/1 var(--display);text-transform:uppercase;color:var(--marine);font-variant-numeric:tabular-nums;white-space:nowrap}
.facts dd{margin:0;font-size:.93rem}
.bs .more .more-body{padding:4px 16px 18px;display:grid;gap:12px}
.bs .more .more-body ul{padding-left:0}
.bs .more .more-body .checks{grid-template-columns:1fr;gap:0}
.bs .more .more-body .checks li{padding:11px 0;border-top:1px solid var(--line)}
.bs .more .more-body .checks li:first-child{border-top:0;padding-top:4px}
.bs .more .more-body .hl-list{gap:10px}
.bs .more.hl{background:var(--ice);border-color:var(--ice-2)}
.bs .more.hl .more-sub{color:var(--link)}

/* Vergleich Sportunfähigkeit / Unfall */
.compare{margin-block:16px 8px;padding:22px 18px;border-radius:0 var(--rt) var(--rt) 0;background:var(--ice);border-left:5px solid var(--accent);display:grid;gap:18px;scroll-margin-top:132px}
.compare-head{display:grid;gap:10px}
.compare-head .eyebrow{width:max-content;background:var(--marine);color:#fff;padding:6px 10px 5px;border-radius:4px}
.compare-head h3{font-size:clamp(1.8rem,6vw,2.6rem)}
.compare-head p{color:var(--muted)}
.cmp{display:grid;gap:10px}
.cmp-col{background:var(--surface);border-radius:var(--rt);border:1px solid var(--ice-2);overflow:hidden}
.cmp-title{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--marine);color:#fff;font:800 1.3rem/1 var(--display);text-transform:uppercase}
.cmp-title .ic{width:34px;height:34px;background:var(--accent);color:#fff}
.cmp-title .ic svg{width:20px;height:20px}
.cmp dl{margin:0}
.cmp dl div{display:grid;gap:3px;padding:12px 16px;border-top:1px solid var(--line)}
.cmp dl div:first-child{border-top:0}
.cmp dt{font:700 .7rem/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.cmp dd{margin:0;font-size:.94rem;line-height:1.45}
.cmp-foot{font-size:.88rem;color:var(--muted)}
.compare .lead-link{background:var(--surface)}
.compare .lead-link:hover{background:var(--paper)}

@media (min-width:760px){.cmp{grid-template-columns:1fr 1fr;gap:14px}.compare{padding:30px}}

/* Bausteine: Listen, Varianten, Hinweise */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px 24px;grid-template-columns:1fr}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:.97rem;line-height:1.45}
.checks li::before{content:"";width:20px;height:20px;flex:none;margin-top:1px;border-radius:4px;background:var(--steel) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M5 10.5l3.2 3.2L15 7" fill="none" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/14px no-repeat}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--ice);border-radius:var(--rt)}
.seg button{min-height:44px;border:0;border-radius:6px;background:transparent;color:var(--marine);font:700 .95rem var(--body);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--marine);color:#fff}
.var{background:var(--marine);color:#fff;border-radius:var(--rt);padding:22px 20px;display:grid;gap:8px}
.var .pre{font:600 .74rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.var strong{font:800 clamp(3rem,13vw,4.4rem)/.9 var(--display);color:var(--gold);font-variant-numeric:tabular-nums}
.var p{color:rgba(255,255,255,.9);font-size:.97rem}
.ex{display:grid;gap:8px;padding:16px 18px;background:var(--ice);border-radius:var(--rt)}
.ex-lab{font:700 .72rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.ex p{font-size:.95rem;line-height:1.5}
.flag{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:var(--ice);border-radius:var(--rt);font-size:.94rem;font-weight:600;color:var(--marine);line-height:1.4}
.flag svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--link)}
.areas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.area{background:var(--surface);border:1px solid var(--line);border-radius:var(--rt);padding:14px;display:grid;gap:4px;align-content:start}
.area b{font:800 1.2rem/1 var(--display);text-transform:uppercase;color:var(--marine)}
.area span{font-size:.86rem;color:var(--muted);line-height:1.35}
.resid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.resid > div{display:grid;gap:4px;align-content:start;padding:14px 16px;background:var(--surface);border:1.5px solid var(--ice-2);border-radius:var(--rt)}
.resid > .resid-de{border-color:var(--steel)}
.resid-lab{font:700 .72rem/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.resid p{font-size:.93rem;line-height:1.45}
.seg-note{font-size:.9rem;color:var(--muted);margin-top:-8px}
.hl-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hl-list li{position:relative;padding-left:20px;font-size:.94rem;line-height:1.45}
.hl-list li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;background:var(--accent)}
.hl-list strong{color:var(--marine)}
.fine{margin-top:8px;font-size:.82rem;color:var(--muted)}

/* Europaweit & Vorteile */
.world-sec{background:var(--ice)}
.world{display:grid;gap:36px}
.fixture{background:var(--surface);border-radius:var(--rt);border:1px solid var(--line);overflow:hidden}
.fixture-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;background:var(--marine);color:#fff}
.fixture-head strong{font:800 1.25rem/1 var(--display);text-transform:uppercase}
.fixture-head span{font:700 .72rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--block-accent)}
.fixture dl{margin:0}
.fixture dl div{display:grid;gap:4px;padding:14px 18px;border-top:1px solid var(--line)}
.fixture dl div:first-child{border-top:0}
.fixture dt{font:700 .72rem/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.fixture dd{margin:0;font-weight:600;color:var(--marine);line-height:1.4}
@media (min-width:640px){.fixture dl div{grid-template-columns:190px 1fr;gap:16px;align-items:baseline}}
/* Zwischen 900 und 1060 px ist die Spalte zu schmal für Beschriftung und lange Wörter nebeneinander */
@media (min-width:900px) and (max-width:1060px){.fixture dl div{grid-template-columns:1fr;gap:4px}}
.sub{font-size:1.9rem}
.why{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.why li{display:grid;gap:3px;padding:14px 16px 14px 18px;background:var(--surface);border-left:4px solid var(--accent);border-radius:0 var(--rt) var(--rt) 0}
.why strong{color:var(--marine);font-size:1rem}
.why span{color:var(--muted);font-size:.93rem;line-height:1.45}
.sports{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sports i{font:800 1rem/1 var(--display);font-style:normal;text-transform:uppercase;letter-spacing:.03em;color:var(--marine);border:1.5px solid var(--ice-2);padding:7px 10px 6px;border-radius:4px}
.sports i.top{background:var(--marine);color:#fff;border-color:var(--marine)}
@media (min-width:900px){.world{grid-template-columns:1fr 1fr;gap:56px;align-items:start}}


/* Verweis auf den Schadenservice */
.claim-band{background:var(--surface);border-top:1px solid var(--line)}
.claim-band .wrap{display:grid;gap:18px;padding-block:32px;align-items:center}
.claim-row{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start}
.claim-row .ic{width:48px;height:48px;background:var(--marine);color:#fff}
.claim-row h2{font-size:1.6rem}
.claim-row p{color:var(--muted);font-size:.95rem;margin-top:6px}
@media (min-width:760px){.claim-band .wrap{grid-template-columns:1fr auto}}

/* Schmale Handys (30.09.2026): lange Wörter brechen statt herauszuragen */
.more-t,.cmp-title{min-width:0;overflow-wrap:anywhere;hyphens:auto}