/* STIL D (v2) — ERZEUGT von tools/stild/basis_scopen.py aus public/_alle/basis.css. Nicht von Hand ändern. */
.haut-beton .vD, .haut-beton .vB {
  --flasche:#17352a; --flasche2:#21493a; --flasche3:#2c5a48; --krepp:#ecd9a0; --kreppTief:#d9c07c;
  --tinte:#1d1f1a; --papier:#fffefb; --grund:#f2f0e8; --zebra:#f7f5ee; --matt:#55564d; --haar:#d9d6ca; --kante:#b5b2a4;
  --gut:#3d661b; --rot:#b5341f; --senf:#e0a51f; --creme:#f4f1e4;
  --plakat:"Plakat","Arial Narrow",Impact,sans-serif; --serif:Palatino,"Palatino Linotype",Georgia,serif;
  --sans:system-ui,"Segoe UI",Roboto,Arial,sans-serif;
}
.haut-beton .vD img { display:block; }
.haut-beton .vD .pk { font-family:var(--plakat); font-weight:900; text-transform:uppercase; line-height:.92; letter-spacing:.005em; }
.haut-beton .vD .krepp { display:inline-block; background:var(--krepp); color:var(--tinte); padding:3px 10px 2px; box-shadow:0 1px 0 var(--kreppTief); }
.haut-beton .vD .foto { object-fit:cover; background:#ccc; }
.haut-beton .vD .zahl { font-variant-numeric:tabular-nums; }
.haut-beton .vD .pfeil.steigend { color:var(--gut); }
.haut-beton .vD .pfeil.fallend { color:var(--rot); }
.haut-beton .vD .pfeil.konstant { color:#8a8b80; }
.haut-beton .vD .skopf { display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding-bottom:7px; margin-bottom:14px; border-bottom:3px solid var(--tinte); }
.haut-beton .vD .skopf h1 { margin:0; font-size:38px; }
.haut-beton .vD .skopf .unter { text-align:right; font-size:13px; color:var(--matt); line-height:1.4; max-width:460px; }
.haut-beton .vD .skopf .unter b { color:var(--tinte); }
.haut-beton .vD .kz { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
.haut-beton .vD .kz > div { background:var(--papier); border:1px solid var(--kante); padding:12px 14px 11px; }
.haut-beton .vD .kz b { display:block; font-family:var(--plakat); font-weight:900; font-size:40px; line-height:1; }
.haut-beton .vD .kz span { display:block; font-size:13px; margin-top:5px; color:#3f4038; }
.haut-beton .vD .kz i { display:block; font-style:normal; font-size:11.5px; color:#6a6b61; margin-top:7px; padding-top:6px; border-top:1px solid #e3e1d6; }
.haut-beton .vD .kz .gut b { color:var(--gut); }
.haut-beton .vD .kz .warn b { color:var(--rot); }
.haut-beton .vD .vergl { display:grid; grid-template-columns:86px 1fr 34px; gap:8px; align-items:center; font-size:12.5px; margin:7px 0; }
.haut-beton .vD .vergl .bal { height:10px; background:#e6e3d6; position:relative; }
.haut-beton .vD .vergl .bal i { position:absolute; top:0; bottom:0; left:50%; }
.haut-beton .vD .vergl .bal i.plus { background:var(--gut); }
.haut-beton .vD .vergl .bal i.minus { background:var(--rot); right:50%; left:auto; }
.haut-beton .vD .vergl .bal::after { content:""; position:absolute; left:50%; top:-3px; bottom:-3px; border-left:1px solid var(--tinte); }
.haut-beton .vD .zitat { font-family:var(--serif); font-style:italic; font-size:15.5px; line-height:1.35; }
.haut-beton .vD .uhr { font-family:var(--sans); font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.haut-beton .vD .tab { width:100%; border-collapse:collapse; font-size:13.5px; }
.haut-beton .vD .tab td, .haut-beton .vD .tab th { padding:6px 8px; border-bottom:1px solid #ebe9df; text-align:left; }
.haut-beton .vD .tab th { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--matt); font-weight:600; border-bottom:2px solid var(--tinte); }
.haut-beton .vD .tab td.z, .haut-beton .vD .tab th.z { text-align:right; font-variant-numeric:tabular-nums; }
.haut-beton .vD .tab img { width:20px; height:20px; object-fit:contain; display:inline-block; vertical-align:-5px; margin-right:8px; }
.haut-beton .vD .tab tr.ich td { background:var(--krepp); font-weight:700; }
.haut-beton .vD .post { display:flex; gap:10px; padding:8px 0; border-top:1px solid #ebe9df; font-size:13.5px; }
.haut-beton .vD .post:first-of-type { border-top:0; }
.haut-beton .vD .post i { width:8px; height:8px; border-radius:4px; background:var(--rot); margin-top:6px; flex:none; }
.haut-beton .vD .status.elf { background:var(--flasche); color:var(--creme); }
.haut-beton .vD .status.bank { background:var(--krepp); color:var(--tinte); }
.haut-beton .vD .status.frei { background:#e6e3d6; color:var(--matt); }
.haut-beton .vB .seite { padding-top:18px; }
.haut-beton .vB .dach { font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gut); font-weight:700; margin-bottom:6px; }
.haut-beton .vB .skopf { border-bottom:1px solid var(--tinte); padding-bottom:8px; margin-bottom:0; }
.haut-beton .vB .skopf h1 { font-size:34px; }
.haut-beton .vB .skopf .unter { font-family:var(--serif); font-style:italic; font-size:14.5px; }
.haut-beton .vB .zeileZahlen { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--tinte); margin-bottom:26px; }
.haut-beton .vB .zeileZahlen > div { padding:16px 18px 14px; border-left:1px solid var(--haar); }
.haut-beton .vB .zeileZahlen > div:first-child { border-left:0; padding-left:0; }
.haut-beton .vB .zeileZahlen b { display:block; font-family:var(--plakat); font-weight:900; font-size:38px; line-height:1; }
.haut-beton .vB .zeileZahlen span { display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--matt); margin-top:6px; }
.haut-beton .vB .zeileZahlen em { display:block; font-family:var(--serif); font-size:14px; color:var(--tinte); margin-top:4px; }
.haut-beton .vB h2.abs { font-family:var(--plakat); font-weight:900; text-transform:uppercase; font-size:24px; margin:0 0 10px; padding-bottom:6px; border-bottom:1px solid var(--haar); display:flex; justify-content:space-between; align-items:baseline; }
.haut-beton .vB h2.abs small { font-family:var(--sans); font-weight:400; font-size:12px; text-transform:none; color:var(--matt); }
.haut-beton .vB .elfRaster { display:grid; grid-template-columns:1fr 290px; gap:34px; }
.haut-beton .vB .feldB { position:relative; background:#f6f4ec; border:1px solid var(--haar); padding:20px 18px 24px; }
.haut-beton .vB .feldB svg.linien { position:absolute; inset:0; width:100%; height:100%; }
.haut-beton .vB .reihe { display:flex; justify-content:space-around; margin:10px 0 26px; position:relative; }
.haut-beton .vB .mann { width:120px; text-align:center; cursor:pointer; }
.haut-beton .vB .mann img { width:70px; height:70px; border-radius:50%; margin:0 auto; border:2px solid var(--papier); box-shadow:0 0 0 1px var(--kante); }
.haut-beton .vB .mann:hover img { box-shadow:0 0 0 2px var(--flasche); }
.haut-beton .vB .mann .nm { font-weight:700; font-size:13.5px; margin-top:6px; }
.haut-beton .vB .mann .pos { font-size:10.5px; letter-spacing:.14em; color:var(--matt); text-transform:uppercase; }
.haut-beton .vB .mann .st { font-family:var(--plakat); font-weight:900; font-size:20px; color:var(--flasche); }
.haut-beton .vB .mann.warn img { box-shadow:0 0 0 2px var(--senf); }
.haut-beton .vB .mann .bahn { font-family:var(--serif); font-style:italic; font-size:12.5px; color:#7d5c0b; }
.haut-beton .vB .bankZeile { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid #ecebe3; font-size:13.5px; }
.haut-beton .vB .bankZeile img { width:32px; height:32px; border-radius:50%; }
.haut-beton .vB .bankZeile .z { margin-left:auto; font-variant-numeric:tabular-nums; font-weight:700; }
.haut-beton .vB .bankZeile small { color:var(--matt); font-size:11.5px; margin-left:4px; }
.haut-beton .vB .anm { font-family:var(--serif); font-style:italic; font-size:15.5px; line-height:1.4; border-left:3px solid var(--flasche); padding:4px 0 4px 14px; margin:18px 0; }
.haut-beton .vB .vergl .bal { background:#eceae1; height:6px; }
.haut-beton .vB .lageRaster { display:grid; grid-template-columns:1.4fr 1fr; gap:34px; }
.haut-beton .vB .ansetzung { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:22px 0 18px; border-bottom:1px solid var(--haar); margin-bottom:16px; }
.haut-beton .vB .ansetzung .klub { display:flex; align-items:center; gap:12px; }
.haut-beton .vB .ansetzung .klub.re { flex-direction:row-reverse; text-align:right; }
.haut-beton .vB .ansetzung img { width:64px; height:64px; object-fit:contain; }
.haut-beton .vB .ansetzung .nm { font-family:var(--plakat); font-weight:900; text-transform:uppercase; font-size:24px; line-height:1; }
.haut-beton .vB .ansetzung small { display:block; font-size:12px; color:var(--matt); margin-top:4px; }
.haut-beton .vB .ansetzung .mitte { text-align:center; font-family:var(--serif); font-style:italic; font-size:15px; }
.haut-beton .vB .ansetzung .mitte b { display:block; font-style:normal; font-size:30px; }
.haut-beton .vB .tab th { border-bottom:1px solid var(--tinte); }
.haut-beton .vB .tab tr.ich td { background:#eef2ec; color:var(--flasche); }
.haut-beton .vB .tab tr.ich td:first-child { box-shadow:inset 3px 0 0 var(--flasche); }
.haut-beton .vB .kaderTab td { padding:7px 8px; vertical-align:middle; }
.haut-beton .vB .kaderTab img { width:34px; height:34px; border-radius:50%; margin:0; vertical-align:middle; }
.haut-beton .vB .kaderTab .nm { font-weight:700; }
.haut-beton .vB .kaderTab .nm small { display:block; font-weight:400; font-size:11.5px; color:var(--matt); }
.haut-beton .vB .kaderTab tr.gruppe td { padding:20px 0 6px; border-bottom:1px solid var(--tinte); font-family:var(--plakat); font-weight:900; font-size:22px; text-transform:uppercase; background:none; }
.haut-beton .vB .kaderTab tr.gruppe td small { font-family:var(--sans); font-weight:400; font-size:12px; text-transform:none; color:var(--matt); margin-left:10px; }
.haut-beton .vB .kaderTab tbody tr:not(.gruppe):hover td { background:var(--zebra); cursor:pointer; }
.haut-beton .vB .rolle { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; }
.haut-beton .vB .rolle.elf { color:var(--flasche); }
.haut-beton .vB .rolle.bank { color:#7d5c0b; }
.haut-beton .vB .rolle.frei { color:#9a9b91; }
.haut-beton .vB .stBal { display:inline-block; width:56px; height:5px; background:#eceae1; vertical-align:middle; margin-left:8px; position:relative; }
.haut-beton .vB .stBal i { position:absolute; left:0; top:0; bottom:0; background:var(--flasche); }
.haut-beton .vD .spielleiste { display:grid; grid-template-columns:1.5fr auto 1.4fr; align-items:center; gap:28px; padding:2px 0 14px; border-bottom:1px solid var(--tinte); margin-bottom:16px; }
.haut-beton .vD .gegner { display:flex; gap:12px; align-items:center; }
.haut-beton .vD .gegner img { width:46px; height:46px; object-fit:contain; }
.haut-beton .vD .gegner small, .haut-beton .vD .kraft small, .haut-beton .vD .steuer label { display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--matt); font-weight:600; }
.haut-beton .vD .gegner b { display:block; font-family:var(--plakat); font-weight:900; text-transform:uppercase; font-size:23px; line-height:1.05; margin-top:2px; }
.haut-beton .vD .gegner span { font-size:13px; color:var(--matt); }
.haut-beton .vD .kraft { text-align:center; }
.haut-beton .vD .kraft b { display:block; font-family:var(--plakat); font-weight:900; font-size:34px; line-height:1; margin-top:3px; }
.haut-beton .vD .kraft b i { font-style:normal; font-family:var(--sans); font-weight:700; color:var(--matt); font-size:22px; vertical-align:4px; margin:0 3px; }
.haut-beton .vD .kraft span { font-size:12px; color:var(--gut); font-weight:600; }
.haut-beton .vD .steuer { display:flex; justify-content:flex-end; align-items:flex-end; gap:14px; }
.haut-beton .vD .wahl { font:600 14px var(--sans); background:var(--papier); border:1px solid var(--kante); padding:6px 10px; margin-top:3px; cursor:pointer; }
.haut-beton .vD .tipp { display:block; font-family:var(--serif); font-style:italic; font-size:12.5px; color:var(--gut); margin-top:3px; }
.haut-beton .vD .segment { display:flex; border:1px solid var(--tinte); margin-top:3px; }
.haut-beton .vD .segment button { font:600 12px var(--sans); letter-spacing:.08em; text-transform:uppercase; border:0; background:var(--papier); padding:7px 12px; cursor:pointer; }
.haut-beton .vD .segment button.an { background:var(--flasche); color:var(--creme); }
.haut-beton .vD .elfRaster { display:grid; grid-template-columns:1fr 250px; gap:28px; }
.haut-beton .vD .feldD { position:relative; background:#f3f5ee; border:1px solid var(--haar); display:grid; grid-template-columns:.95fr 1fr 1fr .95fr; min-height:470px; }
.haut-beton .vD .feldD svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.haut-beton .vD .sp { display:flex; flex-direction:column; position:relative; padding:10px 10px 12px; }
.haut-beton .vD .spKopf { display:flex; justify-content:space-between; align-items:baseline; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--matt); font-weight:600; padding-bottom:5px; margin-bottom:4px; border-bottom:1px solid #17352a26; }
.haut-beton .vD .spKopf b { color:var(--tinte); }
.haut-beton .vD .spKopf span { font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.haut-beton .vD .spKopf span.plus { color:var(--gut); }
.haut-beton .vD .spKopf span.minus { color:var(--rot); }
.haut-beton .vD .spLeute { flex:1; display:flex; flex-direction:column; justify-content:space-around; gap:8px; }
.haut-beton .vD .mann { width:auto; text-align:left; display:flex; align-items:center; gap:9px; background:var(--papier); border:1px solid var(--haar); padding:5px 9px 5px 5px; cursor:pointer; position:relative; }
.haut-beton .vD .mann:hover { border-color:var(--flasche); }
.haut-beton .vD .mann img { width:40px; height:40px; border-radius:50%; margin:0; border:0; box-shadow:none; flex:none; }
.haut-beton .vD .mann .nm { font-weight:700; font-size:13px; margin:0; line-height:1.15; }
.haut-beton .vD .mann .pos { font-size:11px; letter-spacing:.06em; color:var(--matt); text-transform:none; }
.haut-beton .vD .mann .st { margin-left:auto; font-family:var(--plakat); font-weight:900; font-size:22px; color:var(--flasche); }
.haut-beton .vD .mann.warn { border-color:var(--senf); box-shadow:inset 3px 0 0 var(--senf); }
.haut-beton .vD .mann .bahn { display:block; font-family:var(--serif); font-style:italic; font-size:11.5px; color:#7d5c0b; }
.haut-beton .vD .hinweis { border-left:3px solid var(--senf); background:#fbf6e6; padding:8px 11px; font-size:13px; line-height:1.35; margin-bottom:18px; }
.haut-beton .vD .hinweis b { display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#7d5c0b; margin-bottom:2px; }
.haut-beton .vD .feldHandy, .haut-beton .vD .bankStreifen { display:none; }
@media (max-width:760px) {
.haut-beton .vD .spielleiste { grid-template-columns:1fr auto; gap:8px 12px; padding:0 0 10px; margin-bottom:10px; }
.haut-beton .vD .gegner img { width:34px; height:34px; }
.haut-beton .vD .gegner b { font-size:18px; }
.haut-beton .vD .gegner span { font-size:12px; }
.haut-beton .vD .kraft { text-align:right; }
.haut-beton .vD .kraft b { font-size:26px; }
.haut-beton .vD .kraft b i { font-size:16px; vertical-align:3px; }
.haut-beton .vD .steuer { grid-column:1 / -1; justify-content:space-between; gap:10px; }
.haut-beton .vD .steuer > div { flex:1; }
.haut-beton .vD .wahl { width:100%; text-align:left; }
.haut-beton .vD .segment button { flex:1; }
.haut-beton .vD .elfRaster { grid-template-columns:1fr; gap:14px; }
.haut-beton .vD .elfRaster > * { min-width:0; }
.haut-beton .vD .feldD { display:none; }
.haut-beton .vD .feldHandy { display:block; position:relative; background:#f3f5ee; border:1px solid var(--haar); padding:6px 4px 8px; }
.haut-beton .vD .feldHandy svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.haut-beton .vD .hReihe { position:relative; padding:4px 0 6px; }
.haut-beton .vD .hReihe .rk { display:flex; justify-content:space-between; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--matt); font-weight:600; padding:0 6px 3px; }
.haut-beton .vD .hReihe .rk span.plus { color:var(--gut); }
.haut-beton .vD .hReihe .rk span.minus { color:var(--rot); }
.haut-beton .vD .hLeute { display:flex; justify-content:space-around; }
.haut-beton .vD .hMann { width:84px; text-align:center; position:relative; }
.haut-beton .vD .hMann img { width:46px; height:46px; border-radius:50%; margin:0 auto; border:2px solid var(--papier); box-shadow:0 0 0 1px var(--kante); }
.haut-beton .vD .hMann.warn img { box-shadow:0 0 0 2px var(--senf); }
.haut-beton .vD .hMann .st { position:absolute; top:-2px; left:calc(50% + 14px); background:var(--flasche); color:var(--creme); font:800 11px var(--sans); padding:1px 4px; }
.haut-beton .vD .hMann .nm { font-weight:700; font-size:11.5px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.haut-beton .vD .hMann .pos { font-size:9.5px; letter-spacing:.1em; color:var(--matt); }
.haut-beton .vD .hMann .bahn { font-family:var(--serif); font-style:italic; font-size:10.5px; color:#7d5c0b; }
.haut-beton .vD .bankListe { display:none; }
.haut-beton .vD .bankStreifen { display:flex; gap:10px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:none; }
.haut-beton .vD .bankStreifen > div { flex:none; width:66px; text-align:center; font-size:11px; }
.haut-beton .vD .bankStreifen img { width:42px; height:42px; border-radius:50%; margin:0 auto 3px; }
.haut-beton .vD .bankStreifen b { display:block; color:var(--flasche); }
.haut-beton .vD .hinweis { margin-bottom:10px; }
}
.haut-beton .vD .zielWort { display:block; font-family:var(--plakat); font-weight:900; font-size:24px; text-transform:uppercase; line-height:1.05; margin-top:3px; }
.haut-beton .vD .haupt { font:600 12px var(--sans); letter-spacing:.1em; text-transform:uppercase; background:var(--flasche); color:var(--creme); border:0; padding:10px 14px; margin-top:3px; cursor:pointer; }
.haut-beton .vD .leise { font:600 12px var(--sans); background:none; border:0; color:var(--flasche); cursor:pointer; padding:4px 0; white-space:nowrap; }
.haut-beton .vD .leise:hover { text-decoration:underline; }
.haut-beton .vD .lageD { display:grid; grid-template-columns:1fr 380px; gap:34px; }
.haut-beton .vD .lageD > * { min-width:0; }
.haut-beton .vD .aufgabe { display:grid; grid-template-columns:78px 1fr auto; gap:12px; align-items:baseline; padding:10px 0; border-bottom:1px solid #ecebe3; font-size:14px; }
.haut-beton .vD .aufgabe .art { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:#7d5c0b; }
.haut-beton .vD .vereinZeile { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--tinte); margin-top:26px; }
.haut-beton .vD .vereinZeile > div { padding:10px 12px 0; border-left:1px solid var(--haar); }
.haut-beton .vD .vereinZeile > div:first-child { border-left:0; padding-left:0; }
.haut-beton .vD .vereinZeile small { display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--matt); font-weight:600; }
.haut-beton .vD .vereinZeile b { display:block; font-size:15px; margin-top:3px; }
.haut-beton .vD .tab.kompakt td { padding:5px 6px; }
.haut-beton .vD .tabKnopf { display:none; }
.haut-beton .vD .filterleiste { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:2px 0 14px; border-bottom:1px solid var(--tinte); margin-bottom:6px; }
.haut-beton .vD .filterleiste .segment { margin:0; }
.haut-beton .vD .filterleiste .segment button i, .haut-beton .vD .schalter i { font-style:normal; color:var(--matt); font-weight:500; margin-left:3px; }
.haut-beton .vD .filterleiste .segment button.an i { color:#b9cdbf; }
.haut-beton .vD .schalter { font:600 12px var(--sans); letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--kante); background:var(--papier); padding:7px 12px; cursor:pointer; }
.haut-beton .vD .schalter.an { border-color:var(--rot); color:var(--rot); box-shadow:inset 0 -2px 0 var(--rot); }
.haut-beton .vD .summe { margin-left:auto; font-size:13px; color:var(--matt); }
.haut-beton .vD .summe b { color:var(--tinte); }
.haut-beton .vD .kaderD th[data-kf] { cursor:pointer; user-select:none; }
.haut-beton .vD .kaderD th[data-kf]:hover, .haut-beton .vD .kaderD th.sortiert { color:var(--tinte); }
.haut-beton .vD .bald { color:var(--rot); font-weight:700; }
.haut-beton .vD .kaderKarten { display:none; }
@media (max-width:760px) {
.haut-beton .vD .lageD { grid-template-columns:1fr; gap:20px; }
.haut-beton .vD .aufgabe { grid-template-columns:1fr auto; gap:2px 10px; }
.haut-beton .vD .aufgabe .art { grid-column:1 / -1; }
.haut-beton .vD .vereinZeile { grid-template-columns:1fr 1fr; }
.haut-beton .vD .vereinZeile > div:nth-child(3) { border-left:0; padding-left:0; }
.haut-beton .vD .tab.kompakt:not(.ganz) tr.fern { display:none; }
.haut-beton .vD .tabKnopf { display:block; margin-top:6px; }
.haut-beton .vD .filterleiste { gap:8px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -12px 6px; padding:2px 12px 12px; }
.haut-beton .vD .filterleiste > * { flex:none; }
.haut-beton .vD .summe { display:none; }
.haut-beton .vD .filterleiste .segment button { flex:none; padding:7px 10px; white-space:nowrap; }
.haut-beton .vD .schalter { white-space:nowrap; }
.haut-beton .vD .kaderD { display:none; }
.haut-beton .vD .kaderKarten { display:block; }
.haut-beton .vD .kk { display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid #ecebe3; }
.haut-beton .vD .kk img { width:44px; height:44px; border-radius:50%; }
.haut-beton .vD .kk .nm { font-weight:700; font-size:14px; }
.haut-beton .vD .kk .nm .rolle { margin-left:6px; }
.haut-beton .vD .kk .zl { font-size:12px; color:var(--matt); margin-top:1px; }
.haut-beton .vD .kk .st { font-family:var(--plakat); font-weight:900; font-size:28px; color:var(--flasche); }
}
.haut-beton .vD .lageHandy { display:none; }
@media (max-width:760px) {
.haut-beton .vD .lageDesk { display:none; }
.haut-beton .vD .lageHandy { display:block; }
.haut-beton .vD .lageHandy a { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; cursor:pointer; }
.haut-beton .vD .lageHandy em { font-style:normal; font-size:22px; color:var(--kante); margin-left:auto; padding-left:6px; }
.haut-beton .vD .spielKarte { padding:14px 14px; background:var(--flasche); color:var(--creme) !important; margin:2px 0 18px; }
.haut-beton .vD .spielKarte img { width:40px; height:40px; object-fit:contain; }
.haut-beton .vD .spielKarte .was b { display:block; font-family:var(--plakat); font-weight:900; font-size:24px; text-transform:uppercase; line-height:1; }
.haut-beton .vD .spielKarte .was span { font-size:12.5px; color:#b9cdbf; }
.haut-beton .vD .spielKarte .kr { margin-left:auto; font-family:var(--plakat); font-weight:900; font-size:26px; }
.haut-beton .vD .spielKarte .kr i { font-style:normal; color:#b9cdbf; margin:0 2px; }
.haut-beton .vD .spielKarte em { color:#b9cdbf; margin-left:0; }
.haut-beton .vD .hListe a { padding:14px 2px; border-bottom:1px solid #ecebe3; font-size:15px; }
.haut-beton .vD .hListe a:first-child { border-top:1px solid #ecebe3; }
.haut-beton .vD .hTab { display:block !important; margin-top:22px; }
.haut-beton .vD .hTab > div { display:grid; grid-template-columns:22px 20px 1fr auto; gap:10px; align-items:center; padding:8px 2px; font-size:14px; color:var(--matt); }
.haut-beton .vD .hTab img { width:20px; height:20px; object-fit:contain; }
.haut-beton .vD .hTab .pl { text-align:right; font-variant-numeric:tabular-nums; }
.haut-beton .vD .hTab .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.haut-beton .vD .hTab > div.ich { color:var(--tinte); font-weight:700; box-shadow:inset 3px 0 0 var(--flasche); background:#eef2ec; }
}
.haut-beton .vD .anpfiff { display:block; width:100%; font:800 14px var(--sans); letter-spacing:.12em; text-transform:uppercase; background:var(--flasche); color:var(--creme); border:0; padding:14px 18px; cursor:pointer; box-shadow:inset 0 -3px 0 #0e241b; }
.haut-beton .vD .anpfiff.pokal { background:#7d5c0b; }
.haut-beton .vD .anpfiff.relegation { background:var(--rot); }
.haut-beton .vD .anpfiffFeld { min-width:300px; }
.haut-beton .vD .anpfiffFeld .tipp { color:#7d5c0b; font-size:12.5px; }
.haut-beton .vD .chip { display:inline-block; min-width:30px; text-align:center; font:700 11.5px var(--sans); padding:2px 5px; margin-left:3px; color:#fff; letter-spacing:0; text-transform:none; }
.haut-beton .vD .chip.s { background:var(--gut); }
.haut-beton .vD .chip.u { background:#8a8b80; }
.haut-beton .vD .chip.n { background:var(--rot); }
.haut-beton .vD .plan { display:grid; grid-template-columns:30px 18px 22px 1fr auto; gap:8px; align-items:center; padding:6px 0; border-bottom:1px solid #ecebe3; font-size:13.5px; }
.haut-beton .vD .plan img { width:20px; height:20px; object-fit:contain; }
.haut-beton .vD .plan .st { color:var(--matt); text-align:right; }
.haut-beton .vD .plan .ha { font-weight:700; color:var(--matt); font-size:11.5px; }
.haut-beton .vD .plan .dt { color:var(--matt); font-size:12.5px; }
.haut-beton .vD .plan .erg { font-variant-numeric:tabular-nums; }
.haut-beton .vD .plan .erg.s { color:var(--gut); }
.haut-beton .vD .plan .erg.n { color:var(--rot); }
.haut-beton .vD .plan.naechst { background:#eef2ec; box-shadow:inset 3px 0 0 var(--flasche); font-weight:700; }
.haut-beton .vD .bilanzGross { display:flex; gap:14px; align-items:center; }
.haut-beton .vD .bilanzGross b { font-family:var(--plakat); font-weight:900; font-size:52px; line-height:1; }
.haut-beton .vD .bilanzGross span { font-size:13.5px; color:var(--matt); line-height:1.45; }
.haut-beton .vD .zielText { font-family:var(--serif); font-style:italic; font-size:15px; margin:0 0 8px; }
.haut-beton .vD .geduld { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--matt); }
.haut-beton .vD .geduld i { flex:1; height:6px; background:#e6e3d6; position:relative; min-width:60px; }
.haut-beton .vD .geduld i b { position:absolute; left:0; top:0; bottom:0; background:var(--flasche); }
.haut-beton .vD .geduld .zahl { font-weight:700; color:var(--tinte); }
.haut-beton .vD .vereinDl { margin:0; }
.haut-beton .vD .vereinDl > div { display:grid; grid-template-columns:96px 1fr; gap:8px; padding:5px 0; border-bottom:1px solid #ecebe3; font-size:13.5px; }
.haut-beton .vD .vereinDl dt { color:var(--matt); }
.haut-beton .vD .vereinDl dd { margin:0; }
.haut-beton .vD .neu { display:flex; gap:12px; align-items:center; border:1px solid var(--haar); padding:8px; cursor:pointer; }
.haut-beton .vD .neu img { width:84px; height:52px; object-fit:cover; }
.haut-beton .vD .neu b { display:block; font-size:13.5px; }
.haut-beton .vD .neu span { font-size:12px; color:var(--matt); }
.haut-beton .vD .neu em { font-style:normal; font-size:22px; color:var(--kante); margin-left:auto; }
@media (max-width:760px) {
.haut-beton .vD .lageHandy .anpfiff { margin:-8px 0 6px; padding:16px; }
.haut-beton .vD .hinweisKlein { font-size:12.5px; color:#7d5c0b; margin:0 0 14px; line-height:1.35; }
.haut-beton .vD .akkGruppe { margin:18px 0 16px; border-top:1px solid #ecebe3; }
.haut-beton .vD .akk > a { padding:13px 2px; border-bottom:1px solid #ecebe3; font-size:15px; justify-content:space-between; }
.haut-beton .vD .akk > a .chips { margin-left:auto; }
.haut-beton .vD .akk > a .geduld { flex:1; margin-left:12px; }
.haut-beton .vD .akk .leise2 { color:var(--matt); font-size:13px; margin-left:auto; }
.haut-beton .vD .akkInhalt { padding:6px 2px 12px; border-bottom:1px solid #ecebe3; }
}
@media (max-width: 760px) {
.haut-beton .vD .skopf { flex-direction:column; align-items:flex-start; }
.haut-beton .vD .skopf .unter { text-align:left; }
.haut-beton .vD .skopf h1 { font-size:32px !important; }
.haut-beton .vD .kz, .haut-beton .vB .zeileZahlen { grid-template-columns:1fr 1fr; }
.haut-beton .vB .elfRaster, .haut-beton .vB .lageRaster { grid-template-columns:1fr; }
.haut-beton .vB .mann { width:74px; }
.haut-beton .vB .mann img { width:48px; height:48px; }
.haut-beton .vB .mann .nm { font-size:11.5px; }
.haut-beton .vB .kaderTab .weg { display:none; }
}
.haut-beton .vD .kraft span.minus { color: var(--rot); }
.haut-beton .vD svg.ik { width:1.15em; height:1.15em; vertical-align:-0.2em; flex:none; }

/* ── v2 IM SPIEL (von Hand, in basis_scopen.py): eine umgestellte Seite zeigt nur ihre Stil-D-Box ── */
.haut-beton .seite.sdAn > :not(.sdBox) { display:none !important; }
.haut-beton .sdBox { font-family:var(--sans); color:var(--tinte); }
/* Türen wie im Prüfstand (seite.html): gepunktete Linie = klickbar; .still = Text ohne Aktion.
 * In :where(), damit sie so SCHWACH bleiben wie `.tat` in seite.html — sonst schlagen sie die Knopffarben der Module
 * (`.vD .haupt`: Creme auf Flaschengrün wurde Tinte auf Flaschengrün, 07.11.2026). Gegen `.haut-beton a` reicht (0,2,0). */
.haut-beton .vD :where(a.tat) { cursor:pointer; color:inherit; text-decoration:none; border-bottom:1px dotted var(--flasche); }
.haut-beton .vD :where(a.tat:hover) { background:#eef2ec; }
.haut-beton .vD :where(a.tat.knopf, .tat.still) { border-bottom:0; }
.haut-beton .vD :where(.tat.still) { cursor:default; }
.haut-beton .vD .sdFehler { white-space:pre-wrap; color:var(--rot); font-size:12px; }
.haut-beton .sdStadion canvas { display:block; width:100%; height:auto; }
.haut-beton .sdStadion .lupe { border-top:2px solid #0f1a14; }
.haut-beton .sdStadionZeile { display:block; font-size:12px; color:var(--matt); padding:4px 0; }
/* alte Kästen (Vertrag, Verhandlung) als Dialog über der Stil-D-Seite; sichtbar, solange das Spiel sie anzeigt */
.sdDialogBox { position:fixed !important; z-index:900; left:50%; top:10vh; transform:translateX(-50%); width:min(620px, 94vw); max-height:78vh; overflow:auto;
  box-shadow:0 24px 70px rgba(0,0,0,.55); }
/* KOPF UND REITER AM TELEFON — nur v2: v1 hat kein Viewport-Meta und wird dort mit 980 px gezeigt, v2 seit 07.11.2026
 * mit echter Breite. Die Kopfzeile war dafür nie gebaut (Vereinszeile 0 px breit, Reiter überlappt). */
@media (max-width:760px) {
  html[data-stil="d"].haut-beton #kopf { flex-wrap:wrap; height:auto; min-height:0; align-items:center; column-gap:10px; row-gap:6px; padding:8px 12px; }
  html[data-stil="d"].haut-beton #kopfPortrait, html[data-stil="d"].haut-beton #kopfWappen { width:52px; height:52px; flex:0 0 52px; margin:0; }
  html[data-stil="d"].haut-beton #kopfPortrait > *, html[data-stil="d"].haut-beton #kopfWappen > * { width:100%; height:100%; object-fit:cover; }
  html[data-stil="d"].haut-beton #kopfVerein { flex:1 1 0; min-width:0; margin:0; padding-right:120px; }
  html[data-stil="d"].haut-beton #kopfVerein .kvName { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:17px; }
  html[data-stil="d"].haut-beton #kopfVerein .kvUnter { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; }
  html[data-stil="d"].haut-beton #kopfStatus { order:9; flex:1 0 100%; width:100%; margin:0; overflow-x:auto; justify-content:space-between; }
  html[data-stil="d"].haut-beton #kopfStatus .ksZelle { flex:0 0 auto; }
  html[data-stil="d"].haut-beton #reiter { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  html[data-stil="d"].haut-beton #reiter > * { flex:0 0 auto; width:auto; overflow:visible; }
  /* Elf: die Tauschliste ragte am Telefon 13 px über den Rand (gemessen 07.11.2026) */
  .haut-beton .vD .tauschListe { max-width:100%; overflow-x:auto; }
}
/* gewählter Spieler in der Elf (erster Klick von feldKlick) */
.haut-beton .vD .mann.gewaehlt { outline:3px solid var(--flasche); outline-offset:-3px; }
/* kleine Auswahl an der Klickstelle (H.wahl, Einsatzposition) */
.haut-beton .sdWahl { position:fixed; z-index:950; display:flex; flex-direction:column; min-width:200px; background:#fff;
  border:1px solid var(--flasche); box-shadow:0 12px 36px rgba(0,0,0,.35); font-family:var(--sans); }
.haut-beton .sdWahl button, .haut-beton .sdWahl button:hover:not(:disabled) { all:unset; display:block; padding:9px 14px; cursor:pointer;
  color:var(--tinte); background:#fff; font-size:14px; }
.haut-beton .sdWahl button:hover:not(:disabled) { background:#eef2ec; }
.haut-beton .sdWahl button.an, .haut-beton .sdWahl button.an:hover:not(:disabled) { font-weight:700; color:var(--flasche); }

/* ÜBERSCHRIFTEN OHNE SPERRUNG: haut.css gibt jeder h1/h2/h3 0,16 em (`.haut-beton h2`, 0,1,1). Die Skizzen setzen
 * keine — im Spiel liefen „So kommt jemand auf die Liste“ und erst recht die kleine Zeile rechts daneben gesperrt über
 * die ganze Breite (Nutzerbild 07.11.2026). In :where(), damit Module ihre eigene Sperrung behalten. */
.haut-beton .vD :where(h1, h2, h3, h4, h5) { letter-spacing:normal; }
.haut-beton .vD h2.abs small { letter-spacing:0; }

/* ══ DIE HÜLLE IN STIL D (07.11.2026, Nutzer: „also navigation is old“) ══
 * Kopf und beide Leisten wie die Skizzen-Hülle (_alle/basis.css .kopf/.nav, Variante B): Papier statt Verlauf,
 * Unterstrich statt grüner Fläche, keine Symbole. Nur Farben/Schrift/Abstände — das Markup bleibt das des Spiels
 * (Klicks, Zähler, Beta-Etikett). Werte fest statt Tokens: --zebra u. a. gibt es in haut.css mit anderer Bedeutung. */
html[data-stil="d"].haut-beton #kopf { background:#fffefb; border-bottom:1px solid #d9d6ca; --kopfBild:58px; padding-top:8px; padding-bottom:8px;
  font-family:system-ui,"Segoe UI",Roboto,Arial,sans-serif; }
html[data-stil="d"].haut-beton #kopf::after { display:none; }
html[data-stil="d"].haut-beton #kopfVerein .kvName { font-family:system-ui,"Segoe UI",Roboto,Arial,sans-serif; font-weight:700; font-size:20px; letter-spacing:0; color:#1d1f1a; }
html[data-stil="d"].haut-beton #kopfVerein .kvUnter { font-size:11.5px; letter-spacing:.14em; color:#55564d; }
html[data-stil="d"].haut-beton .ksZelle { border-left-color:#d9d6ca; }
html[data-stil="d"].haut-beton .ksZelle i { font-size:10px; letter-spacing:.14em; color:#6b6c63; }
html[data-stil="d"].haut-beton .ksZelle b { font-size:17px; color:#1d1f1a; }
html[data-stil="d"].haut-beton .ksZelle b.gut { color:#3d661b; } html[data-stil="d"].haut-beton .ksZelle b.warn { color:#b5341f; }
html[data-stil="d"].haut-beton #reiter, html[data-stil="d"].haut-beton #unterreiter { background:#fffefb; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
html[data-stil="d"].haut-beton #reiter { border-bottom:1px solid #d9d6ca; }
html[data-stil="d"].haut-beton #unterreiter { border-bottom:1px solid #1d1f1a; }
html[data-stil="d"].haut-beton #reiter > *, html[data-stil="d"].haut-beton #unterreiter > * {
  flex:0 0 auto; width:auto; display:flex; align-items:center; gap:0; position:relative;
  padding:13px 18px 12px; border:0; background:none; box-shadow:none; color:#6b6c63;
  font:600 12px/1 system-ui,"Segoe UI",Roboto,Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
html[data-stil="d"].haut-beton #unterreiter > * { padding:10px 16px 9px; font-size:11.5px; }
html[data-stil="d"].haut-beton #reiter > * svg:not(.ik), html[data-stil="d"].haut-beton #unterreiter > * svg:not(.ik) { display:none; }
/* Lucide-Icons in Leisten und Kopf (stild.js sdIkonen); .vD-Regel greift hier nicht, darum eigene Grösse */
html[data-stil="d"].haut-beton svg.ik.navIk { display:inline-block; width:15px; height:15px; margin-right:8px; flex:none; opacity:.8; }
html[data-stil="d"].haut-beton #unterreiter svg.ik.navIk { width:14px; height:14px; margin-right:7px; }
html[data-stil="d"].haut-beton #reiter > .aktiv svg.ik.navIk, html[data-stil="d"].haut-beton #unterreiter > .aktiv svg.ik.navIk { opacity:1; }
html[data-stil="d"].haut-beton svg.ik.kopfIk { width:12px; height:12px; margin-right:5px; vertical-align:-2px; }
html[data-stil="d"].haut-beton #reiter > *:hover, html[data-stil="d"].haut-beton #unterreiter > *:hover { color:#1d1f1a; background:none; }
html[data-stil="d"].haut-beton #reiter > .aktiv, html[data-stil="d"].haut-beton #unterreiter > .aktiv {
  color:#1d1f1a; background:none; font-weight:700; box-shadow:inset 0 -3px 0 #17352a; }
html[data-stil="d"].haut-beton #unterreiter > .aktiv { box-shadow:inset 0 -2px 0 #17352a; }
html[data-stil="d"].haut-beton #reiter .navbadge, html[data-stil="d"].haut-beton #unterreiter .navbadge { position:static; display:inline-block;
  min-width:16px; height:16px; line-height:16px; padding:0 4px; border-radius:8px; margin-left:6px; background:#b5341f; color:#fff;
  font:600 10px/16px system-ui,sans-serif; letter-spacing:0; text-align:center; }
html[data-stil="d"].haut-beton #reiter .navpunkt, html[data-stil="d"].haut-beton #unterreiter .navpunkt { position:static; margin-left:6px; }
html[data-stil="d"].haut-beton #inhalt { background:#fffefb; }
/* Kicker und Zeitung sind EIN Blatt (Einschub im Kicker) — die Zeitung hat in v2 keinen eigenen Reiter mehr */
html[data-stil="d"].haut-beton #unterreiter > [data-seite="zeitung"] { display:none; }
/* ══ GRÜNER KOPF (08.11.2026, Nutzer: „header and content should have different background?“, Variante H1) ══
 * Kopf und Ressortleiste sind der RAHMEN (Flaschengrün), Unterleiste und Inhalt das Papier. Gesperrte Grossbuchstaben
 * nur noch in der Ressortleiste; Saison, Kennzahl-Etiketten und Seiten in normaler Schreibung. Vorher standen sechs
 * gesperrte Grossbuchstaben-Zeilen untereinander, alle auf demselben Creme. */
html[data-stil="d"].haut-beton #kopf, html[data-stil="d"].haut-beton #reiter { background:#17352a; border-bottom:0; }
html[data-stil="d"].haut-beton #kopfVerein .kvName { color:#f4f1e4; }
/* stil.css gibt dem Wappenfeld `background:#fff` — auf dem Papierkopf unsichtbar, auf Grün ein weisses Quadrat
 * um jedes runde Wappen (Nutzer 08.11.2026: „how about this white space around the logo?“) */
html[data-stil="d"].haut-beton #kopfWappen { background:transparent; }
html[data-stil="d"].haut-beton #kopfVerein .kvUnter { color:#b9cdbf; letter-spacing:.04em; text-transform:none; }
html[data-stil="d"].haut-beton .ksZelle { border-left-color:#2c5a48; }
html[data-stil="d"].haut-beton .ksZelle i { color:#b9cdbf; letter-spacing:.04em; text-transform:none; font-size:11px; }
html[data-stil="d"].haut-beton .ksZelle b { color:#f4f1e4; }
html[data-stil="d"].haut-beton .ksZelle b.gut { color:#b7d98f; } html[data-stil="d"].haut-beton .ksZelle b.warn { color:#f0a08f; }
html[data-stil="d"].haut-beton #reiter > * { color:#b9cdbf; }
html[data-stil="d"].haut-beton #reiter > *:hover, html[data-stil="d"].haut-beton #reiter > .aktiv { color:#f4f1e4; }
html[data-stil="d"].haut-beton #reiter > .aktiv { box-shadow:inset 0 -3px 0 #ecd9a0; }
html[data-stil="d"].haut-beton #unterreiter > * { text-transform:none; letter-spacing:0; font-size:14px; font-weight:500; }
html[data-stil="d"].haut-beton #unterreiter > .aktiv { font-weight:700; }
/* ══ SEITEN MIT ECHTEN FORMULAREN im Stil D (07.11.2026) ══
 * Optionen, Fehler melden, Ideen, Namen, Warteliste behalten ihr Markup: Passwortfelder, Datei-Ablage, Kader-Editor
 * sind echte Eingaben, die Skizzen zeichneten sie nur als Attrappen. Hier nur Papier, Schrift, Felder und Knöpfe.
 * Knöpfe umrandet, der GEWÄHLTE Wert gefüllt (wie die Segmentschalter der Stil-D-Seiten). Kein `display` auf .seite. */
html[data-stil="d"].haut-beton .seite:is([data-seite="extras"],[data-seite="fehler"],[data-seite="ideen"],[data-seite="namen"],[data-seite="warteliste"]) {
  font-family:system-ui,"Segoe UI",Roboto,Arial,sans-serif; color:#1d1f1a; background:#fffefb; }
html[data-stil="d"].haut-beton .seite:is([data-seite="extras"],[data-seite="fehler"],[data-seite="ideen"],[data-seite="namen"],[data-seite="warteliste"]) :is(.spalte, .flaeche) {
  background:none; border:0; box-shadow:none; padding:0 24px 8px; max-width:1100px; }
html[data-stil="d"].haut-beton .seite:is([data-seite="extras"],[data-seite="fehler"],[data-seite="ideen"],[data-seite="namen"],[data-seite="warteliste"]) .titel {
  font:700 12px/1.2 system-ui,"Segoe UI",Roboto,Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#1d1f1a;
  background:none; border:0; border-bottom:1px solid #d9d6ca; padding:0 0 6px; margin:26px 0 10px; }
html[data-stil="d"].haut-beton .seite:is([data-seite="extras"],[data-seite="fehler"],[data-seite="ideen"],[data-seite="namen"],[data-seite="warteliste"]) :is(.zeile, p, label, li) { font-size:14px; line-height:1.45; }
html[data-stil="d"].haut-beton .seite:is([data-seite="extras"],[data-seite="fehler"],[data-seite="ideen"],[data-seite="namen"],[data-seite="warteliste"]) .klein { font-size:13px; color:#55564d; }
html[data-stil="d"].haut-beton .seite:is([data-seite="extras"],[data-seite="fehler"],[data-seite="ideen"],[data-seite="namen"],[data-seite="warteliste"]) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select) {
  font:14px system-ui,"Segoe UI",Roboto,Arial,sans-serif; color:#1d1f1a; background:#fff; border:1px solid #b5b2a4; border-radius:0; padding:7px 10px; }
html[data-stil="d"].haut-beton .seite:is([data-seite="extras"],[data-seite="fehler"],[data-seite="ideen"],[data-seite="namen"],[data-seite="warteliste"]) button,
html[data-stil="d"].haut-beton .seite:is([data-seite="extras"],[data-seite="fehler"],[data-seite="ideen"],[data-seite="namen"],[data-seite="warteliste"]) button:hover:not(:disabled) {
  font:600 12px/1 system-ui,"Segoe UI",Roboto,Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase;
  background:#fffefb; color:#1d1f1a; border:1px solid #1d1f1a; border-radius:0; box-shadow:none; padding:9px 13px; }
html[data-stil="d"].haut-beton .seite:is([data-seite="extras"],[data-seite="fehler"],[data-seite="ideen"],[data-seite="namen"],[data-seite="warteliste"]) button:hover:not(:disabled) { background:#eef2ec; }
html[data-stil="d"].haut-beton .seite:is([data-seite="extras"],[data-seite="fehler"],[data-seite="ideen"],[data-seite="namen"],[data-seite="warteliste"]) :is(button.gewaehlt, button.versenkt),
html[data-stil="d"].haut-beton .seite:is([data-seite="extras"],[data-seite="fehler"],[data-seite="ideen"],[data-seite="namen"],[data-seite="warteliste"]) :is(button.gewaehlt, button.versenkt):hover:not(:disabled) {
  background:#17352a; color:#f4f1e4; border-color:#17352a; }
html[data-stil="d"].haut-beton .seite[data-seite="extras"] :is(button[onclick^="kontoLoeschen"], button[onclick^="beenden"]) { color:#b5341f; border-color:#b5341f; }
/* Optionen: was man oft braucht (Spielstände, Tempo, Ansicht) zuerst, das Konto danach — und kein Kasten mit eigenem
 * Rollbalken in der Seite. `display` auf der Seite NUR mit .aktiv (verdrahtung.test.ts, CLAUDE.md). */
html[data-stil="d"].haut-beton .seite.aktiv[data-seite="extras"] { display:flex; flex-direction:column; }
html[data-stil="d"].haut-beton .seite[data-seite="extras"] > :last-child { order:-1; }
html[data-stil="d"].haut-beton .seite[data-seite="extras"] > * { height:auto !important; max-height:none !important; overflow:visible !important; flex:none; }

/* ══ NACHRICHTEN im Stil D ══ Das Postfach funktioniert (öffnen, gelesen, Antworten über nxAktion) — die Skizze war
 * eine Attrappe mit fester Auswahl. Hier: Papier statt Nachtblau, lesbare Grössen, Knöpfe wie überall. */
html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] #nxWrap { font-family:system-ui,"Segoe UI",Roboto,Arial,sans-serif; color:#1d1f1a; background:#fffefb; border:0; }
html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-top { background:none; border:0; border-bottom:1px solid #1d1f1a; padding:4px 24px 10px; }
html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-top h2 { font:700 18px/1.25 system-ui,"Segoe UI",Roboto,Arial,sans-serif; letter-spacing:0; text-transform:none; color:#1d1f1a; margin:0; }
html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-body { background:#fffefb; border:0; }
/* nur am Schreibtisch breiter — am Telefon bleibt die Aufteilung des Spiels */
@media (min-width:761px) { html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-body { grid-template-columns:minmax(300px, 380px) minmax(0, 1fr); } }
html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] #nxChip:empty { display:none; }
html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-list { background:#fffefb; border-right:1px solid #d9d6ca; }
html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-row { padding:12px 16px; border-bottom:1px solid #ecebe3; background:none; }
html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-row:hover { background:#f7f5ee; }
html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-from { font-size:13px; font-weight:700; color:#1d1f1a; }
html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-when { font-size:11.5px; color:#55564d; }
html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-subj { font-size:12.5px; color:#1d1f1a; }
html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-prev { font-size:12px; color:#55564d; }
html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-tag { font-size:9px; line-height:1.3; padding:0 4px; letter-spacing:.04em; }
html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-dot { background:#17352a; }
html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-detail { background:#fff; color:#1d1f1a; padding:22px 28px; }
html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-dtitle { font-size:18px; font-weight:700; color:#1d1f1a; }
html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-dsub { font-size:12px; color:#55564d; }
html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-mail { font-size:13px; line-height:1.55; color:#1d1f1a; background:none; }
html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-big { font:700 26px/1.1 system-ui,"Segoe UI",Roboto,Arial,sans-serif; color:#3d661b; }
html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] :is(.nx-btn, #nxAlle), html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] :is(.nx-btn, #nxAlle):hover:not(:disabled) {
  font:600 12px/1 system-ui,"Segoe UI",Roboto,Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase;
  background:#fffefb; color:#1d1f1a; border:1px solid #1d1f1a; border-radius:0; padding:9px 13px; box-shadow:none; }
html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-btn.prim, html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-btn.prim:hover:not(:disabled) {
  background:#17352a; color:#f4f1e4; border-color:#17352a; }

/* ══ TICKER im Stil D ══ Die Liste gehört während des Spiels dem Abspielwerk (zeichneTicker: `if (lauf) return`),
 * darum bleibt das Markup; hier nur Ergebniskopf, lesbare Zeilen und Knöpfe wie überall. */
/* SCHRIFTGRÖSSE WIE DER KICKER-FLIESSTEXT (Nutzer 10.11.2026: „I find ticker and other pages a bit too large … maybe the
 * ones from kicker text is better?“): Zeilen 13,5 statt 14 px, Titel 17 statt 20, Uhr 19 statt 22; Mails ebenso 13,5 statt 14,5.
 * Nachrichten am 11.11.2026 noch einen Schritt kleiner („i also still feel font size is a bit too big“): Absender 13,
 * Betreff 12,5, Text 13, Titel 18. */
html[data-stil="d"].haut-beton .seite[data-seite="ticker"] { font-family:system-ui,"Segoe UI",Roboto,Arial,sans-serif; color:#1d1f1a; background:#fffefb; }
html[data-stil="d"].haut-beton .seite[data-seite="ticker"] .versenkt { background:none; border:0; box-shadow:none; padding:4px 24px; }
html[data-stil="d"].haut-beton .seite[data-seite="ticker"] #tickerTitel { font:700 17px/1.25 system-ui,"Segoe UI",Roboto,Arial,sans-serif; letter-spacing:0; text-transform:none; color:#1d1f1a;
  background:none; border:0; border-bottom:1px solid #1d1f1a; padding:4px 0 8px; }
html[data-stil="d"].haut-beton .seite[data-seite="ticker"] #tickerUhr { font:700 19px/1 system-ui,"Segoe UI",Roboto,Arial,sans-serif !important; font-variant-numeric:tabular-nums; color:#17352a; background:none !important; }
html[data-stil="d"].haut-beton .seite[data-seite="ticker"] button, html[data-stil="d"].haut-beton .seite[data-seite="ticker"] button:hover:not(:disabled) { font:600 12px/1 system-ui,"Segoe UI",Roboto,Arial,sans-serif !important; letter-spacing:.08em; text-transform:uppercase;
  background:#fffefb !important; color:#1d1f1a !important; border:1px solid #1d1f1a; border-radius:0; box-shadow:none; padding:8px 12px; }
html[data-stil="d"].haut-beton .seite[data-seite="ticker"] button.gewaehlt, html[data-stil="d"].haut-beton .seite[data-seite="ticker"] button.gewaehlt:hover:not(:disabled) { background:#17352a !important; color:#f4f1e4 !important; border-color:#17352a; }
html[data-stil="d"].haut-beton .seite[data-seite="ticker"] #tickerListe > div, html[data-stil="d"].haut-beton .seite[data-seite="ticker"] #tickerEuropaListe > div { font-size:13.5px; line-height:1.45; padding:5px 0; border-bottom:1px solid #ecebe3; background:none; color:#1d1f1a; }
html[data-stil="d"].haut-beton .seite[data-seite="ticker"] .t-min { display:inline-block; width:44px; font-weight:700; color:#55564d; font-variant-numeric:tabular-nums; }
html[data-stil="d"].haut-beton .seite[data-seite="ticker"] .t-wichtig { font-weight:700; }
/* nur das ALTE Markup (.t-tor) — `.tor` traf seit dem Stil-D-Ticker auch dessen Punkte und Zeilen (12.11.2026) */
html[data-stil="d"].haut-beton .seite[data-seite="ticker"] .t-tor { font-weight:700; background:#f3ead0 !important; }

/* der Einschub im echten Blatt: dieselbe Spaltenbreite wie das Blatt */
.haut-beton .sdEinschub { background:#fff; }
.haut-beton .sdEinschub .sbBlatt { box-shadow:none; }

/* ══ TELEFON (v2) — steht ZULETZT, damit es die Schreibtischregeln oben schlägt (gleiche Stärke, spätere Regel;
 * 08.11.2026: der Kopf-Block der Hülle überschrieb die 17 px des Telefons mit 20 px, das Beta-Schild deckte den
 * Vereinsnamen ab, „Belastbar“ fiel aus dem Bild, im Postfach stand das Lesefeld als Streifen neben der Liste). ══ */
.sdNxZurueck { display:none; }
@media (max-width:760px) {
  html[data-stil="d"].haut-beton #betaEtikett { top:6px; right:8px; left:auto; transform:none; height:22px; box-shadow:none; }
  html[data-stil="d"].haut-beton #betaEtikett .beB { font-size:12px; line-height:22px; padding:0 6px; }
  html[data-stil="d"].haut-beton #betaEtikett button { height:22px; line-height:22px; padding:0 8px; }
  html[data-stil="d"].haut-beton #kopfVerein { padding-right:0; padding-top:18px; }
  html[data-stil="d"].haut-beton #kopfVerein .kvName { font-size:17px; line-height:1.2; white-space:normal;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  html[data-stil="d"].haut-beton #kopfVerein .kvUnter { font-size:11px; letter-spacing:.02em; }
  /* zwei Ids: `.haut-beton #kopf #kopfStatus` aus haut.css (order 5, flex none, margin-left auto) schlägt sonst alles */
  html[data-stil="d"].haut-beton #kopf #kopfStatus { order:9; flex:1 0 100%; width:100%; margin:4px 0 0; display:grid;
    grid-template-columns:1fr 1fr; row-gap:8px; overflow:visible; }
  html[data-stil="d"].haut-beton #kopf #kopfPortrait { order:0; } html[data-stil="d"].haut-beton #kopf #kopfWappen { order:1; }
  html[data-stil="d"].haut-beton #kopf #kopfVerein { order:2; }
  html[data-stil="d"].haut-beton #kopfStatus .ksZelle { border-left:0; padding:0 4px; min-width:0; }
  html[data-stil="d"].haut-beton #kopfStatus .ksZelle b { font-size:16px; }
  /* Postfach: Liste ODER Nachricht, beide über die volle Breite (stild.js setzt .nxOffen beim Öffnen) */
  html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-body { grid-template-columns:minmax(0, 1fr); }
  html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] #nxWrap:not(.nxOffen) .nx-detail { display:none; }
  html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] #nxWrap.nxOffen .nx-list { display:none; }
  html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-detail { padding:14px 16px; }
  html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-top { padding:10px 16px; }
  html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-top h2,
  html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-badge { display:none !important; }
  html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] #nxAlle { white-space:nowrap; margin-left:auto; }
  html[data-stil="d"].haut-beton .seite[data-seite="nachrichten"] .nx-row { padding:12px 16px; }
  html[data-stil="d"].haut-beton .sdNxZurueck, html[data-stil="d"].haut-beton .sdNxZurueck:hover:not(:disabled) {
    display:inline-block; margin:0 0 12px; padding:6px 0; background:none; border:0; box-shadow:none; color:#17352a;
    font:600 13px system-ui,"Segoe UI",Roboto,Arial,sans-serif; letter-spacing:0; text-transform:none; cursor:pointer; }
}