/* Gerüst des Dashboards (aus web/designs-vorschau.html übernommen). Farben kommen aus designs.css. */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* ---------- Gemeinsames Gerüst ---------- */
#mdv-wurzel{min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font-body);padding:16px;font-size:15px;line-height:1.45}
.top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;max-width:1180px;margin:0 auto 16px}
.brand{font-family:var(--font-head);font-weight:var(--head-w);font-size:1.35rem;letter-spacing:.01em}
.brand small{display:block;font-weight:400;font-size:.8rem;color:var(--muted)}
.wahl{display:flex;flex-wrap:wrap;gap:6px}
.wahl button,.modus button,.kopfknopf{font:inherit;font-size:.9rem;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:calc(var(--radius) * .6);padding:8px 13px;cursor:pointer;min-height:40px;box-shadow:var(--shadow)}
.wahl button[aria-pressed="true"]{background:var(--accent);color:var(--bg-on-accent,#fff);border-color:var(--accent);font-weight:650}
.hinweis{max-width:1180px;margin:0 auto 14px;font-size:.85rem;color:var(--muted);border:1px dashed var(--border);border-radius:calc(var(--radius) * .6);padding:8px 12px}
.raster{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.kachel{grid-column:span 4;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);min-width:0}
.kachel.breit{grid-column:span 8}
.kachel h2{font-family:var(--font-head);font-weight:var(--head-w);font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:10px;display:flex;justify-content:space-between;gap:8px}
.kachel h2{justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:2px 0}
.kachel h2 .zusatz{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfeile{flex:none}
.kachel{container-type:inline-size}
@container (max-width:300px){.kachel h2 .zusatz{display:none}.kachel h2{letter-spacing:.04em;font-size:.72rem}.pfeile button{width:32px;height:32px}.kachel h2::before{margin-right:6px}}
.kachel h2::before{content:"\22EE\22EE";letter-spacing:-.05em;margin-right:10px;opacity:.55;cursor:grab;font-size:1.15em;line-height:1}
.kachel h2 .zusatz{font-weight:400;text-transform:none;letter-spacing:0;margin-left:auto}
.gross{font-family:var(--font-head);font-size:2.3rem;font-weight:var(--head-w);line-height:1.1}
.klein{color:var(--muted);font-size:.9rem}
.up{color:var(--up)}.down{color:var(--down)}
.wetter{display:flex;align-items:center;gap:14px}
.wetter svg{width:56px;height:56px;flex:none;color:var(--accent)}
.tage{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px;text-align:center;font-size:.85rem;color:var(--muted)}
.tage b{display:block;color:var(--text);font-weight:600}
.chart{width:100%;height:120px;display:block;margin:8px 0 4px;color:var(--accent)}
.chart .gitter{stroke:var(--border);stroke-width:1}
.liste{list-style:none}
.liste li{padding:8px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:10px}
.liste li:last-child{border-bottom:0}
.liste .zeit{color:var(--muted);font-size:.82rem;white-space:nowrap}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{font-weight:600;color:var(--muted);text-align:left;font-size:.78rem;padding:4px 0;border-bottom:1px solid var(--border)}
td{padding:6px 0;border-bottom:1px solid var(--border)}
td:last-child,th:last-child{text-align:right}
tr:last-child td{border-bottom:0}
.kachel h2{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.pfeile{display:flex;gap:4px;margin-left:12px}
.kachel h2 .pfeile{margin-left:auto;font-size:1rem}
.pfeile button{font:inherit;line-height:1;width:36px;height:36px;color:var(--text);background:transparent;border:1px solid var(--border);border-radius:calc(var(--radius) * .5);cursor:pointer}
.pfeile button:focus-visible,.reset:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kachel.zieht{opacity:.35;outline:2px dashed var(--accent);outline-offset:3px}
.kachel.geist{position:fixed;z-index:50;pointer-events:none;margin:0;grid-column:auto;opacity:.95;box-shadow:0 14px 34px rgba(0,0,0,.35);transform:rotate(1.2deg)}
body.zieht-aktiv,body.zieht-aktiv *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
.kat{position:sticky;top:0;z-index:20;background:var(--bg);max-width:1180px;margin:0 auto 14px;display:flex;flex-wrap:wrap;gap:6px 18px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:4px 0}
.kat button{font:inherit;font-weight:600;color:var(--text);background:none;border:0;border-bottom:3px solid transparent;padding:8px 2px;min-height:40px;cursor:pointer}
.kat button[aria-pressed="true"]{border-bottom-color:var(--accent)}
.kat button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.quelle{margin-top:12px;padding-top:8px;border-top:1px solid var(--border);font-size:.78rem;color:var(--muted)}
.kachel[hidden]{display:none}
.reset{font:inherit;color:var(--muted);background:none;border:0;text-decoration:underline;cursor:pointer;padding:6px 2px;min-height:36px}
.hinweis{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;align-items:center}
@media (max-width:860px){.kachel,.kachel.breit{grid-column:span 12}.raster{grid-template-columns:repeat(12,1fr)}#mdv-wurzel{padding:12px}}

/* Zusätze für das gebaute Dashboard */
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-body,system-ui,sans-serif)}
.kachel h2 .titel{min-width:0}
.kachel h2 .zusatz{margin-left:auto}
.fehler{margin:10px 0 0;padding:8px 10px;border:1px solid var(--down);border-radius:calc(var(--radius) * .5);color:var(--text);display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.fehler[hidden]{display:none}
.fehler button{font:inherit;color:var(--text);background:transparent;border:1px solid var(--border);border-radius:calc(var(--radius) * .5);padding:6px 10px;min-height:36px;cursor:pointer}
.hinweis-speicher{max-width:1180px;margin:0 auto 14px;padding:8px 12px;border:1px solid var(--down);border-radius:calc(var(--radius) * .5)}
.hinweis-speicher[hidden]{display:none}
.fuss{max-width:1180px;margin:16px auto 0;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.fuss select,.fuss button.hinzufuegen{font:inherit;min-height:40px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:calc(var(--radius) * .6);padding:6px 12px}
.werkzeuge{display:flex;gap:8px;flex-wrap:wrap}
.werkzeuge button{font:inherit;min-height:40px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:calc(var(--radius) * .6);padding:6px 12px;cursor:pointer}
.kachel .inhalt{min-width:0;overflow-wrap:anywhere}
dialog{margin:auto;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);max-width:min(520px,92vw)}
.notiz{width:100%;min-height:8em;font:inherit;color:var(--text);background:transparent;border:1px solid var(--border);border-radius:calc(var(--radius) * .5);padding:8px;resize:vertical}
.aufgabenzeile{display:flex;gap:8px;margin-bottom:6px}
.aufgabenzeile input{flex:1;min-width:0;font:inherit;color:var(--text);background:transparent;border:1px solid var(--border);border-radius:calc(var(--radius) * .5);padding:6px 8px;min-height:36px}
.aufgabenzeile button,.liste .weg{font:inherit;color:var(--text);background:transparent;border:1px solid var(--border);border-radius:calc(var(--radius) * .5);padding:4px 10px;min-height:36px;cursor:pointer}
.liste li input[type="checkbox"]{margin-right:8px;width:18px;height:18px}
.liste li .text{flex:1}
/* Einstellungsdialog */
dialog.einstellungen{width:min(480px,92vw);padding:20px 22px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
dialog.einstellungen::backdrop{background:rgba(0,0,0,.45)}
dialog.einstellungen h3{margin:0 0 14px;font-family:var(--font-head);font-weight:var(--head-w);font-size:1.15rem}
.feldliste{display:grid;gap:14px}
.feld{display:grid;gap:5px}
.feldname{font-size:.85rem;font-weight:600;color:var(--muted)}
.feld input[type="text"],.feld select,.feld textarea{width:100%;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:calc(var(--radius) * .5);padding:8px 10px;min-height:40px}
.feld textarea{resize:vertical;min-height:90px}
.feld input[type="checkbox"]{width:22px;height:22px;justify-self:start}
.feldfehler{color:var(--down);font-size:.85rem;min-height:0}
.knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.knoepfe button{font:inherit;min-height:42px;padding:8px 16px;color:var(--text);background:transparent;border:1px solid var(--border);border-radius:calc(var(--radius) * .6);cursor:pointer}
.knoepfe .speichern{background:var(--accent);border-color:var(--accent);color:var(--bg-on-accent,#fff);font-weight:650}
.knoepfe .entfernen{margin-left:auto;color:var(--down);border-color:var(--down)}
.knoepfe button:focus-visible,.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ausgeblendet{max-width:1180px;margin:14px auto 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--muted)}
.ausgeblendet[hidden]{display:none}
.ausgeblendet button{font:inherit;min-height:38px;padding:6px 12px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:calc(var(--radius) * .6);cursor:pointer}
/* Sport, Nachrichten, Wetter */
.tabelle td,.tabelle th{padding:5px 6px}
.tabelle td:nth-child(2),.tabelle th:nth-child(2){text-align:left}
.tabelle td:nth-child(3),.tabelle td:nth-child(4),.tabelle th:nth-child(3),.tabelle th:nth-child(4){text-align:right}
.tabelle td.punkte{font-weight:700}
.tabelle tr.eigen td{font-weight:700;background:color-mix(in srgb, var(--accent) 16%, transparent)}
.nachrichtenliste li{display:block}
.nachrichtenliste a,.nachrichtenliste .meldung-titel{font-weight:600;color:var(--text);text-decoration:none}
.nachrichtenliste a:hover{text-decoration:underline}
.nachrichtenliste a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wetter-ort{margin-bottom:4px}
/* Aktien: Karten */
.tv-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tv-karte{min-width:0;border:1px solid var(--border);border-radius:calc(var(--radius) * .6);overflow:hidden}
/* Wetter */
.etikett{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px}
.wetter-oben{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px 24px}
.wetter-temp{display:flex;align-items:center;gap:12px}
.wetter-ico{display:inline-flex;color:var(--accent)}
.wetter-ico svg{width:100%;height:100%}
.wetter-temp .wetter-ico{width:44px;height:44px}
.stunde .wetter-ico,.tag .wetter-ico{width:32px;height:32px}
.wetter-rechts p{margin:0 0 3px;text-align:right}
.stunden{display:flex;gap:6px;overflow-x:auto;margin:14px 0;padding:12px;background:color-mix(in srgb, var(--text) 5%, transparent);border-radius:calc(var(--radius) * .6)}
.stunden:empty,.tageliste:empty,.tage-titel:empty,.wetter-oben:empty{display:none}
.stunde{flex:1 0 62px;display:grid;justify-items:center;gap:4px;text-align:center}
.tage-titel{margin:6px 0 8px}
.tageliste{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;text-align:center}
.tag{display:grid;justify-items:center;align-content:start;gap:4px}
@container (max-width:520px){.tageliste{grid-template-columns:repeat(4,1fr)}}
/* Feiertage, Fristen, Countdown, Lesezeichen, Weltzeit, Kamera, Heute vor Jahren */
.feiertagsliste li,.fristenliste li,.heutevorliste li,.lesezeichenliste li{display:block}
.heutevorliste a,.lesezeichenliste a,.fristenliste a{color:var(--text);text-decoration:none}
.heutevorliste a:hover,.lesezeichenliste a:hover{text-decoration:underline}
.weltzeitliste li b{font-variant-numeric:tabular-nums}
.kamerabild{display:block;width:100%;height:auto;margin-bottom:8px;border-radius:calc(var(--radius) * .5);background:var(--border)}
.pegelliste li>b{white-space:nowrap}
.kachel input[type="file"]{max-width:100%;font:inherit;font-size:.85rem}
.kopfrechts{display:flex;gap:8px;align-items:center}
.kopfknopf{display:inline-flex;align-items:center;text-decoration:none}
a.kopfknopf:hover,.kopfknopf:hover{border-color:var(--accent)}
.ansicht{position:relative}
.ansicht .wahl{position:absolute;right:0;top:calc(100% + 6px);z-index:30;flex-direction:column;flex-wrap:nowrap;gap:4px;min-width:170px;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:calc(var(--radius) * .6);box-shadow:0 10px 28px rgba(0,0,0,.2)}
.ansicht .wahl[hidden]{display:none}
.ansicht .wahl button{box-shadow:none;text-align:left}
.tabellenrahmen{overflow-x:auto;margin-bottom:10px}
.tabellenrahmen .abschnitt{margin:6px 0;font-weight:650}
.tabelle th.rechts,.tabelle td.rechts{text-align:right}
.tabellenrahmen .tabelle th,.tabellenrahmen .tabelle td{text-align:left}
.tabellenrahmen .tabelle th.rechts,.tabellenrahmen .tabelle td.rechts{text-align:right}
.rechenfeld{display:grid;gap:4px;margin-bottom:8px;font-size:.85rem;color:var(--muted)}
.rechenfeld input,.kachel select{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:calc(var(--radius) * .5);padding:8px 10px;min-height:40px;width:100%}
.kachel select{margin-bottom:8px}
.timeranzeige.abgelaufen{color:var(--accent)}
.timerknoepfe{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.timerknoepfe button{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:calc(var(--radius) * .5);padding:6px 12px;min-height:40px;cursor:pointer}
.erinnerungsliste li{display:block}
.markenblock{display:flex;align-items:center;gap:12px}
.markenblock .logo{flex:none;border-radius:10px}