/* PC-Ansichten (Breitbild ≥ 1100 px). Am Handy greift nichts davon. Entwürfe: Board „rothen.app PC-Ansichten“. */
.sp-held { display: none; }

@media (min-width: 1100px) {
    /* Lernen: befreite Kinder als schmale Zeile über die volle Breite, hinter den übrigen */
    .kind-raster > .ln-befreit { grid-column: 1 / -1; order: 1; align-self: start; }

    /* ───── Termine: Woche (Zeitraster) + Monat ───── */
    .app-content.breit .cal-toolbar { display: none; }
    .tw-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; margin-top: .5rem; }
    .tw-layout > .tm-monat:only-child { grid-column: 1 / -1; }
    .tw-raster, .tm-monat { padding: 12px 14px; margin: 0; }
    .tw-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    .tw-nav b { font-size: 1rem; }
    .tw-nav .tw-heute { height: 32px; padding: 0 12px; font-size: .8rem; }
    .tw-nav small { margin-left: auto; font-size: .72rem; color: var(--rothn-text-muted); font-weight: 600; }
    .tw-zeile { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); }
    .tw-kopf { border-bottom: 2px solid #E3E8ED; }
    .tw-tag { border: 0; background: none; font: inherit; font-size: .78rem; font-weight: 800; color: var(--rothn-text-muted); padding: 6px 4px; cursor: pointer; border-radius: 8px 8px 0 0; }
    .tw-tag:hover { background: #F3F5F7; }
    .tw-tag.heute { color: var(--rothn-primary-dark); background: var(--rothn-primary-soft); }
    .tw-ganz { border-bottom: 1px solid #E3E8ED; min-height: 30px; }
    .tw-std { font-size: .66rem; font-weight: 700; color: var(--rothn-text-muted); padding: 6px 4px 0 0; text-align: right; }
    .tw-ganz-zelle { display: flex; flex-direction: column; gap: 2px; padding: 3px; border-left: 1px solid #EEF1F4; min-width: 0; }
    .tw-chip { border: 0; font: inherit; font-size: .72rem; font-weight: 700; text-align: left; padding: 2px 6px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .tw-body { position: relative; }
    .tw-achse { position: relative; }
    .tw-achse span { position: absolute; right: 6px; transform: translateY(-50%); font-size: .66rem; font-weight: 700; color: var(--rothn-text-muted); }
    .tw-achse span:first-child { transform: none; }
    .tw-spalte { position: relative; border-left: 1px solid #EEF1F4; }
    .tw-spalte.heute { background: rgba(15, 118, 110, .04); }
    .tw-spalte > i { position: absolute; left: 0; right: 0; border-top: 1px solid #F0F2F5; }
    .tw-jetzt { position: absolute; left: 0; right: 0; height: 2px; background: #B42318; z-index: 2; }
    .tw-evt { position: absolute; border: 0; font: inherit; text-align: left; border-radius: 8px; padding: 3px 6px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; gap: 1px; z-index: 1; }
    .tw-evt b { font-size: .74rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .tw-evt small { font-size: .66rem; font-weight: 700; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .tw-evt:hover, .tw-chip:hover { filter: brightness(.96); }
    .tw-evt.an, .tw-chip.an { box-shadow: 0 0 0 2px var(--rothn-primary); }
    .q-app { background: #FCE8C4; color: #7A4B00; }
    .q-outlook { background: #E8DFF5; color: #4C2A85; }
    .q-pruef { background: #FEF3C7; color: #92400E; border-left: 3px solid #D97706; }
    .tw-seite { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }
    .tw-seite .card { margin: 0; }
    .tw-naechste { padding: 12px 14px; }
    .tw-s-titel { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--rothn-text-muted); margin-bottom: 6px; }
    .tw-leer { font-size: .82rem; color: var(--rothn-text-muted); }
    .tw-n-zeile { display: grid; grid-template-columns: 70px 1fr; gap: 8px; width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; padding: 7px 4px; border-top: 1px solid #F0F2F5; cursor: pointer; border-radius: 8px; }
    .tw-n-zeile:hover { background: #F6F8FA; }
    .tw-n-zeile .wann { font-size: .72rem; font-weight: 800; color: var(--rothn-text-muted); line-height: 1.3; }
    .tw-n-zeile .was { font-size: .85rem; font-weight: 700; display: flex; gap: 6px; align-items: baseline; }
    .tw-n-zeile .was i { width: 8px; height: 8px; border-radius: 50%; flex: none; border: 0; }
    .tw-n-zeile .was i.q-app { background: #E0A93B; } .tw-n-zeile .was i.q-outlook { background: #8B6CC7; } .tw-n-zeile .was i.q-pruef { background: #D97706; }
    .tm-raster { display: grid; grid-template-columns: 40px repeat(7, minmax(0, 1fr)); gap: 4px; }
    .tm-k { font-size: .7rem; font-weight: 800; color: var(--rothn-text-muted); text-align: center; padding-bottom: 2px; }
    .tm-kw { font-size: .7rem; font-weight: 800; color: #8A96A3; text-align: center; padding-top: 8px; }
    .tm-tag { min-height: 104px; background: #F6F8FA; border-radius: 10px; padding: 5px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-width: 0; }
    .tm-tag:hover { background: #EEF2F5; }
    .tm-tag.we { background: #F1F3F6; }
    .tm-tag.fremd { opacity: .45; }
    .tm-tag.heute { box-shadow: inset 0 0 0 2px var(--rothn-primary); background: #fff; }
    .tm-nr { font-size: .8rem; font-weight: 800; margin-bottom: 2px; }
    .tm-tag.heute .tm-nr { color: var(--rothn-primary-dark); }
    .tm-mehr { font-size: .68rem; font-weight: 700; color: var(--rothn-text-muted); padding-left: 4px; }

    /* ───── Noten: Matrix Fächer × Kinder ───── */
    .nt-matrix { margin-top: .75rem; padding: 14px 18px; }
    .nt-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .nt-kopf b { font-size: 1rem; }
    .nt-kopf small { margin-left: auto; font-size: .75rem; color: var(--rothn-text-muted); font-weight: 600; }
    .nt-zeile { display: grid; gap: 6px; align-items: center; padding: 4px 0; }
    .nt-zeile.kopf { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--rothn-text-muted); border-bottom: 2px solid #E3E8ED; padding-bottom: 6px; }
    .nt-zeile.kopf > div:not(:first-child), .nt-zeile.summe > div:not(:first-child) { text-align: center; }
    .nt-zeile.grau { opacity: .55; }
    .nt-zeile.summe { font-weight: 800; border-top: 2px solid #E3E8ED; margin-top: 4px; padding-top: 8px; }
    .nt-fach { font-weight: 700; }
    .nt-zelle { height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .nt-zelle.leer { background: #F3F5F7; color: #8A96A3; font-weight: 700; }
    .nt-zelle small { font-size: .7rem; font-weight: 800; color: var(--rothn-text-muted); }
    .nt-zelle small.hoch { color: #B45309; }
    .nt-zelle small.tief { color: #1D4ED8; }
    .nt-verlauf { margin-top: 12px; padding-top: 10px; border-top: 1px solid #EEF1F4; }
    .nt-v-titel { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--rothn-text-muted); margin-bottom: 6px; }
    .nt-v-zeile { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; padding: 4px 0; font-size: .85rem; }
    .nt-v-zeile > b { width: 90px; }
    .nt-v-zeile span { color: var(--rothn-text-muted); font-weight: 600; }
    .nt-v-zeile span b { color: var(--rothn-text); }
    .nt-v-zeile span.an b { color: var(--rothn-primary); }

    /* ───── Lernen: Wochenüberblick ───── */
    .ln-ueber { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 1rem; align-items: stretch; }
    .ln-ueber > .card { margin: 0; padding: 14px 16px; }
    .ln-kind-kopf { display: flex; align-items: baseline; }
    .ln-kind-kopf span { margin-left: auto; font-size: 1.5rem; font-weight: 800; }
    .ln-kind-kopf span.ok { color: var(--rothn-success); }
    .ln-kind-kopf small { font-size: .75rem; color: var(--rothn-text-muted); }
    .ln-balken { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
    .ln-tag { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .7rem; font-weight: 700; color: var(--rothn-text-muted); }
    .ln-tag.heute { color: var(--rothn-primary); }
    .ln-saeule { width: 100%; height: 80px; background: #F3F5F7; border-radius: 8px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
    .ln-tag.heute .ln-saeule { outline: 2px solid var(--rothn-primary); }
    .ln-saeule i { display: block; width: 100%; }
    .ln-saeule i.ok { background: var(--rothn-primary); }
    .ln-saeule i.wartet { background: var(--rothn-warn); }
    .ln-saldo { margin-top: 8px; font-size: .8rem; font-weight: 700; color: var(--rothn-danger); }
    .ln-f-zeile { display: grid; gap: 8px; padding: 7px 0; border-bottom: 1px solid #EEF1F4; font-weight: 700; font-variant-numeric: tabular-nums; }
    .ln-f-zeile > div:not(:first-child) { text-align: right; }
    .ln-f-zeile.kopf { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--rothn-text-muted); border-bottom: 2px solid #E3E8ED; padding-top: 0; }
    .ln-f-zeile .leer { color: #8A96A3; }
    .ln-f-leer { font-size: .8rem; color: var(--rothn-text-muted); padding-top: 8px; }

    /* ───── Ämtli: Wochen-Matrix ───── */
    .am-matrix { margin-top: 1rem; padding: 14px 18px; }
    .am-m-zeile { display: grid; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid #EEF1F4; }
    .am-m-zeile.kopf { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--rothn-text-muted); border-bottom: 2px solid #E3E8ED; padding-top: 0; }
    .am-m-zeile.bald { opacity: .55; }
    .am-m-titel { font-weight: 700; }
    .am-m-titel small { display: block; font-size: .72rem; color: var(--rothn-text-muted); font-weight: 600; }
    .am-m-zelle { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
    .am-m-zelle b { font-size: .72rem; margin-left: 4px; }
    .am-m-zelle b.ok { color: var(--rothn-success); }
    .am-m-zelle b.nein { color: var(--rothn-danger); }
    .am-m-leer { color: #8A96A3; font-size: .8rem; font-weight: 700; }
    .am-strich { display: inline-block; width: 26px; height: 9px; border-radius: 5px; background: #E3E8ED; }
    .am-strich.ok { background: var(--rothn-primary); }
    .am-strich.wartet { background: var(--rothn-warn); }
    .am-strich.nein { background: var(--rothn-danger); }
    .am-m-legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: .75rem; color: var(--rothn-text-muted); font-weight: 600; padding-top: 10px; }
    .am-m-legende i { display: inline-block; width: 14px; height: 8px; margin-right: 6px; vertical-align: 1px; }

    /* ───── Medienzeit: Wochen-Heatmap ───── */
    .mz-heat { padding: 14px 18px; margin-bottom: .25rem; }
    .mz-heat-zeile { display: grid; grid-template-columns: 170px repeat(7, minmax(0, 1fr)) 110px; gap: 8px; align-items: center; margin-bottom: 8px; }
    .mz-heat-zeile.kopf { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--rothn-text-muted); text-align: center; }
    .mz-heat-zeile.kopf > div:first-child { text-align: left; }
    .mz-heat-zeile.kopf .heute { color: var(--rothn-primary); }
    .mz-heat-zeile small { display: block; font-size: .72rem; color: var(--rothn-text-muted); font-weight: 600; }
    .mz-heat-zeile .minus { color: var(--rothn-danger); font-weight: 800; }
    .mz-zelle { height: 50px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; line-height: 1.1; }
    .mz-zelle small { font-size: .62rem; opacity: .85; display: block; color: inherit; }
    .mz-zelle.zukunft, .mz-zelle.null { background: #F3F5F7; color: #8A96A3; }
    .mz-zelle.wenig { background: #CDE9E5; }
    .mz-zelle.mittel { background: #9FD4CC; }
    .mz-zelle.voll { background: var(--rothn-primary); color: #fff; }
    .mz-zelle.ueber { background: var(--rothn-danger); color: #fff; }
    .mz-zelle.heute { outline: 2px solid var(--rothn-primary); outline-offset: 2px; }
    .mz-woche { text-align: right; font-size: 1.2rem; font-weight: 800; }
    .mz-heat-legende { font-size: .75rem; color: var(--rothn-text-muted); font-weight: 600; }

    /* ───── Sackgeld: Wochen-Tabelle aller Kinder ───── */
    .sg-tabelle { margin-top: 1rem; padding: 14px 18px; }
    .sg-tab-kopf { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
    .sg-tab-kopf span { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--rothn-text-muted); }
    .sg-tab-kopf small { margin-left: auto; font-size: .75rem; color: var(--rothn-text-muted); font-weight: 600; }
    .sg-tab-zeile { display: grid; gap: 10px; padding: 8px 0; border-bottom: 1px solid #EEF1F4; font-variant-numeric: tabular-nums; font-weight: 700; align-items: center; }
    .sg-tab-zeile > div:not(:first-child) { text-align: right; }
    .sg-tab-zeile.kopf { font-size: .72rem; font-weight: 800; color: var(--rothn-text-muted); border-bottom: 2px solid #E3E8ED; }
    .sg-tab-zeile.summe { border-bottom: none; font-weight: 800; }
    .sg-tab-zeile small { color: var(--rothn-text-muted); font-weight: 600; }
    .sg-tab-zeile .minus { color: var(--rothn-danger); }
    .sg-tab-zeile .leer { color: #8A96A3; }

    /* ───── Ideen: Board nach Status ───── */
    .id-board { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
    .id-spalte { background: #EAEEF2; border-radius: 18px; padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
    .id-spalte > .card { margin: 0 !important; }
    .id-kopf { font-weight: 800; padding: 4px 6px 2px; }
    .id-kopf span { font-size: .8rem; color: var(--rothn-text-muted); margin-left: 4px; }
    .id-leer { border: 2px dashed #CDD5DD; border-radius: 14px; padding: 14px; text-align: center; font-size: .8rem; color: var(--rothn-text-muted); font-weight: 700; }
    .id-mehr { border: none; background: transparent; font: inherit; font-size: .8rem; font-weight: 800; color: var(--rothn-primary); cursor: pointer; padding: 4px; }
    .id-spalte .ablehnung-linie { margin: 4px 0; }

    /* ───── Spielabend: Partien links, Ruhmeshalle rechts ───── */
    .sp-zwei { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; }
    .sp-rechts > .card { margin-top: 0 !important; position: sticky; top: 16px; }
    .sp-zwei .karten-raster { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
    .sp-held { display: block; border: 2px solid var(--rothn-primary); margin-bottom: 12px; padding: 14px 16px; }
    .sp-held-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .sp-held-name { font-weight: 800; font-size: 1.05rem; }
    .sp-held-seiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 10px; }
    .sp-held-seite { background: #F3F5F7; border-radius: 14px; padding: 10px 12px; }
    .sp-held-seite.vorne { background: color-mix(in srgb, var(--rothn-primary) 10%, white); }
    .sp-held-pkt { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; }
    .sp-held-balken { height: 8px; border-radius: 4px; background: #E3E8ED; overflow: hidden; }
    .sp-held-balken > div { height: 100%; background: var(--rothn-primary); border-radius: 4px; }
    .sp-held-knoepfe { display: flex; gap: 8px; margin-top: 12px; }
    .sp-held-knoepfe .btn { width: auto; padding: 0 1.1rem; }
}