/* DFL · Anlagen: Zustand, Verschleiß, Sanierung (D75, dfl_anlagen_patch.js) – nur Tokens (Kenney Tag/Nacht) */

/* Zustandsbalken (Kenney: 12 px, 2-px-Rand, Strich bei 30 %) */
.anl-akku { position: relative; display: block; height: 12px; border: 2px solid var(--k-rand, var(--border, #3b3a37)); border-radius: 6px;
  background: var(--bg4, #343a50); box-sizing: border-box; overflow: hidden; min-width: 0; }
.anl-akku > i { display: block; height: 100%; }
.anl-akku > em { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--text, #f5f6fa); opacity: .55; }
.anl-akku.klein { height: 10px; }
.anl-akku > i.gut, .anl-ok > i.gut { background: var(--app-gut, #3d9a2a); }
.anl-akku > i.mittel, .anl-ok > i.mittel { background: var(--app-mittel, #d29a0c); }
.anl-akku > i.schlecht, .anl-ok > i.schlecht { background: var(--app-schlecht, #d0402f); }

/* Front Office: Karte „Anlagen“ */
.dfl-anlagen-fo { display: flex; flex-direction: column; gap: 8px; }
.dfl-anlagen-fo .fo-zeile span { display: inline-flex; align-items: center; gap: 6px; }
.dfl-anlagen-fo .fo-zeile b { font-size: 18px; }
.anl-liste { display: flex; flex-direction: column; gap: 4px; }
.anl-zeile { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr) 84px; gap: 10px; align-items: center; width: 100%; min-height: 48px;
  padding: 6px 8px; border: 0; border-radius: 12px; background: var(--bg3, #262a3a); color: var(--text, #f5f6fa); text-align: left; cursor: pointer;
  font: inherit; }
.anl-zeile:focus-visible, .anl-block .app-knopf:focus-visible { outline: 2px solid var(--k-blau, #3498db); outline-offset: 2px; }
.anl-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.anl-name > i { font-size: 18px; color: var(--text2, #a4b0be); flex: none; }
.anl-name > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.anl-name b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anl-name small { font-size: 11.5px; color: var(--text3, #8a95a6); white-space: nowrap; }
.anl-wert { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; font-variant-numeric: tabular-nums; }
.anl-wert b { font-size: 13.5px; }
.anl-wert small { font-size: 11.5px; color: var(--text3, #8a95a6); white-space: nowrap; }
.anl-fuss { font-size: 12px; color: var(--text3, #8a95a6); }
.anl-fuss .schlecht { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: var(--k-schlecht-fg, var(--app-schlecht, #d0402f)); }

/* Blatt „Anlagen“ */
.anl-summe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; }
.anl-summe > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--bg3, #262a3a); min-width: 0; }
.anl-summe b { font: 800 16px var(--font-zahl, var(--font-display, system-ui)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.anl-summe span { font-size: 11.5px; color: var(--text3, #8a95a6); }
.anl-text { margin: 0 2px 10px; font-size: 13px; color: var(--text2, #a4b0be); }
.anl-bloecke { display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; }
.anl-block { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border-radius: 14px; background: var(--bg2, #1e2230);
  border: 2px solid var(--k-rand, var(--border, #30363d)); }
.anl-block.schlecht { border-color: var(--app-schlecht, #d0402f); }
.anl-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.anl-prozent { font: 800 17px var(--font-zahl, var(--font-display, system-ui)); font-variant-numeric: tabular-nums; }
.anl-block.gut .anl-prozent { color: var(--k-gut-fg, var(--app-gut, #3d9a2a)); }
.anl-block.mittel .anl-prozent { color: var(--k-mittel-fg, var(--app-mittel, #d29a0c)); }
.anl-block.schlecht .anl-prozent { color: var(--k-schlecht-fg, var(--app-schlecht, #d0402f)); }
.anl-info { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 12px; color: var(--text2, #a4b0be); }
.anl-block .app-knopf { min-height: 42px; flex: none; width: 100%; }
.anl-block .app-knopf[disabled], .anl-sanieren[disabled] { opacity: .5; cursor: not-allowed; }

/* Verein & Stadion: Block in der Anlagen-Karte */
.anl-im-karte { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 2px solid var(--k-rand, var(--border, #30363d)); }
.anl-im-karte.schlecht .fc-stat b { color: var(--k-schlecht-fg, var(--app-schlecht, #d0402f)); }
.anl-im-karte .anl-sanieren { margin-top: 2px; }

/* Office: Stadion-Kachel */
.anl-ok { margin-top: 3px; }
.anl-ok > i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; }

/* Anlagen-Bilder (dfl_anlagen_bilder.js, Nutzer 2026-10-14): Gebäude des Vereinsgeländes je Stufe (app/anlagen, durchsichtig) auf Token-Fläche.
   Die Bilder stehen nur hier (url) – so legt sie der Service Worker in den Cache. */
.fc-img-wrap.anl-wrap { height: auto; aspect-ratio: 576 / 320; background: var(--k-info-bg, var(--bg3, #262a3a)); }
.anl-bild { background-position: center; background-size: contain; background-repeat: no-repeat; }
.fc-img.anl-bild { width: 100%; height: 100%; }
.anl-bild-stadion-1 { background-image: url('../app/anlagen/stadion-1.webp'); }
.anl-bild-stadion-2 { background-image: url('../app/anlagen/stadion-2.webp'); }
.anl-bild-stadion-3 { background-image: url('../app/anlagen/stadion-3.webp'); }
.anl-bild-stadion-4 { background-image: url('../app/anlagen/stadion-4.webp'); }
.anl-bild-stadion-5 { background-image: url('../app/anlagen/stadion-5.webp'); }
.anl-bild-rund-1 { background-image: url('../app/anlagen/rund-1.webp'); }
.anl-bild-rund-2 { background-image: url('../app/anlagen/rund-2.webp'); }
.anl-bild-rund-3 { background-image: url('../app/anlagen/rund-3.webp'); }
.anl-bild-rund-4 { background-image: url('../app/anlagen/rund-4.webp'); }
.anl-bild-rund-5 { background-image: url('../app/anlagen/rund-5.webp'); }
.anl-bild-training-1 { background-image: url('../app/anlagen/training-1.webp'); }
.anl-bild-training-2 { background-image: url('../app/anlagen/training-2.webp'); }
.anl-bild-training-3 { background-image: url('../app/anlagen/training-3.webp'); }
.anl-bild-training-4 { background-image: url('../app/anlagen/training-4.webp'); }
.anl-bild-training-5 { background-image: url('../app/anlagen/training-5.webp'); }
.anl-bild-fanshop-1 { background-image: url('../app/anlagen/fanshop-1.webp'); }
.anl-bild-fanshop-2 { background-image: url('../app/anlagen/fanshop-2.webp'); }
.anl-bild-fanshop-3 { background-image: url('../app/anlagen/fanshop-3.webp'); }
.anl-bild-fanshop-4 { background-image: url('../app/anlagen/fanshop-4.webp'); }
.anl-bild-fanshop-5 { background-image: url('../app/anlagen/fanshop-5.webp'); }
.anl-bild-scouting-1 { background-image: url('../app/anlagen/scouting-1.webp'); }
.anl-bild-scouting-2 { background-image: url('../app/anlagen/scouting-2.webp'); }
.anl-bild-scouting-3 { background-image: url('../app/anlagen/scouting-3.webp'); }
.anl-bild-scouting-4 { background-image: url('../app/anlagen/scouting-4.webp'); }
.anl-bild-scouting-5 { background-image: url('../app/anlagen/scouting-5.webp'); }
.anl-bild-medizin-1 { background-image: url('../app/anlagen/medizin-1.webp'); }
.anl-bild-medizin-2 { background-image: url('../app/anlagen/medizin-2.webp'); }
.anl-bild-medizin-3 { background-image: url('../app/anlagen/medizin-3.webp'); }
.anl-bild-medizin-4 { background-image: url('../app/anlagen/medizin-4.webp'); }
.anl-bild-medizin-5 { background-image: url('../app/anlagen/medizin-5.webp'); }
.fc-roi-ico.anl-vorschau { width: 72px; height: 40px; flex: none; margin: -2px 2px -2px -2px; border-radius: 8px;
  background-color: var(--k-info-bg, var(--bg3, #262a3a)); border: 2px solid var(--k-linie, var(--border, #30363d)); }
.fc-roi:has(.anl-vorschau) { align-items: center; }
.med-naechste:has(> .anl-vorschau) { display: grid; grid-template-columns: minmax(0, 1fr) 72px; column-gap: 10px; align-items: start; }
.med-naechste > .anl-vorschau { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 72px; height: 40px; border-radius: 8px;
  background-color: var(--k-info-bg, var(--bg3, #262a3a)); border: 2px solid var(--k-linie, var(--border, #30363d)); }
.anl-bau { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--k-mittel-bg, var(--bg3, #262a3a)); border: 2px solid var(--k-linie, var(--border, #30363d)); }
.anl-bau-kopf { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--k-mittel-fg, var(--text, #f5f6fa)); }
.anl-bau-kopf > i { font-size: 18px; flex: none; }
.fc-maxed > i, .anl-zurueck > i { font-size: 1.15em; vertical-align: -2px; }

@media (max-width: 360px) {
  .anl-zeile { grid-template-columns: minmax(0, 104px) minmax(0, 1fr) 78px; gap: 8px; }
  .anl-summe b { font-size: 14px; }
}

/* Stadionform wählen (2026-10-17) */
.anl-form { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; font-size: 13px; color: var(--text2); }
.anl-form > span { margin-right: 4px; font-weight: 600; }
.anl-form-k { flex: 1; min-height: 36px; border-radius: 10px; border: 2px solid var(--k-rand); background: var(--bg2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.anl-form-k.an { background: var(--accent); color: var(--accent-ink, #fff); border-color: var(--accent); }