/* =====================================================================
   Omnio Sport Tennis: nur die Teile, die es so nur auf dieser Seite gibt
   (Tennisplatz im Hero, Anzeigetafel, Bausteine, Vergleich, Beispiel
   Kreuzbandriss, Europaweit, Verweis auf den Schadenservice).
   Kopf, Fußzeile, Anfrage, Über mich, Bewertungen, App, FAQ und Kontakt
   kommen unverändert aus basis.css.
   Farben: Omnio (marke.css). Gold nur als Tennis-Akzent: Schild „Tennis“,
   Zahlen der Anzeigetafel und Ball (Daniel, 29.09.2026).
   ===================================================================== */
: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 „Tennis“ 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 Tennisplatz */
.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}
.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)}

/* Ein Fall durchgerechnet (Kreuzbandriss): Zeitstrahl mit Rechnung, Ergebnis als Anzeigetafel */
.case{margin-block:28px 8px;padding:24px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--rt);display:grid;gap:22px;scroll-margin-top:132px}
.case-head{display:grid;gap:10px}
.case-head h3{font-size:clamp(1.8rem,6vw,2.6rem)}
.case-head p{color:var(--muted)}
.case-story{display:grid;gap:8px;padding:16px 18px;background:var(--ice);border-radius:var(--rt)}
.case-story p{font-size:.97rem;line-height:1.55}
.case-small{font-size:.88rem;color:var(--muted);line-height:1.45}
.case .cmp-col{border-color:var(--line)}
.case-steps{list-style:none;margin:0;padding:0;display:grid}
.case-steps li{display:grid;gap:6px 20px;padding:18px 0;border-top:1px solid var(--line)}
.case-steps li:first-child{border-top:0;padding-top:0}
.case-steps li > div{display:grid;gap:8px;min-width:0}
.case-steps .when{font:800 1.3rem/1 var(--display);text-transform:uppercase;color:var(--steel);font-variant-numeric:tabular-nums}
.case-steps li.key .when{color:var(--marine)}
.case-steps h4{margin:0;font:800 1.35rem/1.05 var(--display);text-transform:uppercase;color:var(--marine)}
.case-steps p:not(.case-small){font-size:.95rem;line-height:1.5}
.case .calc{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;width:max-content;max-width:100%;padding:7px 12px;background:var(--ice);border-left:4px solid var(--accent);border-radius:0 6px 6px 0;font-weight:600;color:var(--marine);font-variant-numeric:tabular-nums}
.case .calc b{font:800 1.4rem/1 var(--display)}
.case .src{display:flex;flex-wrap:wrap;gap:6px}
.tg{font:700 .68rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:5px 7px;border-radius:4px}
.tg.su{background:var(--marine);color:#fff}
.tg.uv{background:var(--ice);color:var(--steel);box-shadow:inset 0 0 0 1px var(--ice-2)}
.case-total{display:grid;grid-template-columns:1fr 1fr;padding:4px 16px;background:var(--marine);color:#fff;border-radius:var(--rt)}
.case-total > div{display:grid;gap:5px;align-content:start;padding:16px 10px 16px 0;min-width:0}
.case-total > div:nth-child(even){padding-left:14px;border-left:1px solid rgba(255,255,255,.14)}
.case-total > div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.14)}
.case-total .pre{font:600 .7rem/1.25 var(--body);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);hyphens:manual;overflow-wrap:break-word}
.case-total strong{font:800 clamp(1.4rem,6.6vw,2.7rem)/.95 var(--display);color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.case-total .lab{font-size:.82rem;line-height:1.3;color:rgba(255,255,255,.85)}
.case .why li{background:var(--paper)}
@media (min-width:640px){.case-steps li{grid-template-columns:132px minmax(0,1fr)}.case-steps .when{padding-top:3px}}
@media (min-width:760px){.case{padding:32px}.case .why{grid-template-columns:1fr 1fr}.case-total{grid-template-columns:repeat(4,1fr);padding:4px 22px}.case-total strong{font-size:clamp(1.4rem,3.4vw,2.7rem)}.case-total > div:nth-child(n){padding:22px 16px;border-bottom:0;border-left:1px solid rgba(255,255,255,.14)}.case-total > div:first-child{border-left:0;padding-left:0}}
@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}
.area.wide{grid-column:1 / -1}
.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)}
.seek{display:grid;gap:12px}

/* 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}}

/* Über mich: Tennisfoto im Hochformat (Daniel, 26.09.2026) */
#wir .me-photo img{aspect-ratio:4/5}

/* 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}