/* Projektzeiten – zuerst fürs Handy gebaut, auf dem PC breiter */
:root {
    --bg: #f2f4f7;
    --karte: #ffffff;
    --text: #18202c;
    --leise: #667085;
    --linie: #e4e7ec;
    --feld: #ffffff;
    --akzent: #1d4ed8;
    --akzent-hell: #e0e8ff;
    --gruen: #067647; --gruen-bg: #dcfae6;
    --blau: #1d4ed8;  --blau-bg: #e0e8ff;
    --orange: #b54708; --orange-bg: #fef0c7;
    --rot: #b42318;   --rot-bg: #fee4e2;
    --grau: #475467;  --grau-bg: #eaecf0;
    --radius: 14px;
    --nav-h: 64px;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0d1117; --karte: #161b22; --text: #e6edf3; --leise: #8b949e; --linie: #30363d; --feld: #0d1117;
        --akzent: #6d9bff; --akzent-hell: #1c2a4d;
        --gruen: #56d364; --gruen-bg: #12301b;
        --blau: #79a6ff;  --blau-bg: #1c2a4d;
        --orange: #f0a35a; --orange-bg: #3a2610;
        --rot: #ff7b72;   --rot-bg: #3d1614;
        --grau: #b1bac4;  --grau-bg: #262c36;
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; background: var(--bg); color: var(--text);
    font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px);
}
body.ohne-nav { padding-bottom: 24px; }
a { color: inherit; text-decoration: none; }
h2 { font-size: 1rem; margin: 0 0 .75rem; }
.leise { color: var(--leise); }
.klein { font-size: .85rem; }
.gross { font-size: 1.05rem; font-weight: 600; margin: .15rem 0; }
small { display: block; font-size: .8rem; }
code { background: var(--grau-bg); padding: 0 .3em; border-radius: 4px; }

/* Kopfleiste */
.leiste {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: .5rem;
    padding: calc(env(safe-area-inset-top) + .6rem) 1rem .6rem;
    background: var(--akzent); color: #fff;
}
@media (prefers-color-scheme: dark) { .leiste { background: #1a2748; } }
.leiste h1 { font-size: 1.15rem; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zurueck { font-size: 2rem; line-height: 1; padding: 0 .4rem 0 0; margin-top: -.2rem; }
.leiste-knopf { background: rgba(255,255,255,.18); padding: .4rem .8rem; border-radius: 999px; font-weight: 600; font-size: .9rem; }

main { padding: .75rem; display: flex; flex-direction: column; gap: .75rem; }

/* Karten & Raster */
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem; }
.raster { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 900px) {
    main { padding: 1rem 1.5rem; }
    .raster { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
}
.leer { text-align: center; }

/* Kennzahlen */
.kacheln { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 700px) { .kacheln { grid-template-columns: repeat(4, 1fr); } }
.kachel { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: .85rem 1rem; }
.kachel b { display: block; font-size: 1.6rem; line-height: 1.1; }
.kachel span { color: var(--leise); font-size: .8rem; }
.kachel.rot b { color: var(--rot); }

/* Balken */
.balken { padding: .45rem 0; }
.balken-kopf { display: flex; justify-content: space-between; gap: .75rem; font-size: .9rem; margin-bottom: .3rem; }
.balken-kopf span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.raster > *, .kacheln > * { min-width: 0; }
.balken-kopf span:last-child { white-space: nowrap; color: var(--leise); }
.balken-bahn { height: 8px; background: var(--grau-bg); border-radius: 99px; overflow: hidden; }
.balken-bahn.duenn { height: 4px; margin-top: .5rem; }
.balken-bahn i { display: block; height: 100%; background: var(--akzent); border-radius: 99px; }
.balken.ueber .balken-bahn i { background: var(--rot); }
.balken.ueber .balken-kopf span:last-child { color: var(--rot); font-weight: 600; }
.block-link { display: block; border-radius: 8px; }
.block-link + .block-link { border-top: 1px solid var(--linie); }

/* Listen */
.liste { display: flex; flex-direction: column; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.liste:empty { display: none; }
.eintrag { display: flex; gap: .75rem; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid var(--linie); }
.eintrag:last-child { border-bottom: 0; }
.eintrag:active, .zeile-link:active { background: var(--akzent-hell); }
.wachsen { flex: 1; min-width: 0; }
.stunden { font-size: 1.35rem; font-weight: 700; white-space: nowrap; }
.stunden small { display: inline; font-size: .8rem; font-weight: 400; color: var(--leise); margin-left: 2px; }
.tag { display: flex; justify-content: space-between; margin: .5rem .25rem -.25rem; font-size: .85rem; color: var(--leise); font-weight: 600; }
.zeile-link { display: flex; gap: .75rem; align-items: flex-start; padding: .6rem 0; border-top: 1px solid var(--linie); }
.zeile-link:first-of-type { border-top: 0; }
.zeile { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.projekt { display: block; }
.projekt .balken { padding-bottom: 0; }

.aufgabe .titel { font-weight: 500; margin: .1rem 0 .3rem; }
.aufgabe.erledigt .titel { text-decoration: line-through; color: var(--leise); }
.marken { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.haken {
    width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--linie); background: var(--feld);
    color: #fff; font-size: 1.1rem; cursor: pointer; flex: none;
}
.erledigt .haken { background: var(--gruen); border-color: var(--gruen); }

/* Marken & Chips */
.marke { display: inline-block; padding: .1rem .5rem; border-radius: 99px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.marke.gruen { color: var(--gruen); background: var(--gruen-bg); }
.marke.blau { color: var(--blau); background: var(--blau-bg); }
.marke.orange { color: var(--orange); background: var(--orange-bg); }
.marke.rot { color: var(--rot); background: var(--rot-bg); }
.marke.grau { color: var(--grau); background: var(--grau-bg); }
.datum-chip { flex: none; font-size: .8rem; font-weight: 700; padding: .2rem .5rem; border-radius: 8px; background: var(--grau-bg); }
.datum-chip.rot { background: var(--rot-bg); color: var(--rot); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
    border: 1px solid var(--linie); background: var(--karte); color: var(--text);
    padding: .55rem .9rem; border-radius: 99px; font: inherit; font-size: .9rem; cursor: pointer;
}
.chip.an { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.chip-select select { padding: .5rem .8rem; border-radius: 99px; width: auto; }

/* Formulare */
.formular { display: flex; flex-direction: column; gap: .9rem; }
label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--leise); font-weight: 500; }
input, select, textarea {
    font: inherit; font-size: 16px; /* verhindert Zoom auf iOS */
    color: var(--text); background: var(--feld);
    border: 1px solid var(--linie); border-radius: 10px; padding: .7rem .8rem; width: 100%;
    min-height: 46px;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: -1px; border-color: transparent; }
input[type=range] { padding: 0; border: 0; min-height: 32px; accent-color: var(--akzent); }
output { color: var(--text); font-weight: 700; }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-items: end; }
.schalter { flex-direction: row; align-items: center; gap: .6rem; color: var(--text); min-height: 46px; }
.schalter input { width: 22px; height: 22px; min-height: 0; accent-color: var(--akzent); }
@media (min-width: 900px) { .formular { max-width: 760px; } }

.knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .25rem; }
.knopf {
    display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto;
    min-height: 48px; padding: .6rem 1.1rem; border-radius: 12px; border: 0; cursor: pointer;
    background: var(--akzent); color: #fff; font: inherit; font-weight: 600;
}
.knopf.zweit { background: var(--akzent-hell); color: var(--akzent); }
.knopf.gefahr { background: var(--rot); }
.knopf.gefahr-text { background: transparent; color: var(--rot); flex: 0 0 auto; }
.loeschen { text-align: center; }

/* Ausklapp-Bereiche */
details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; }
details > summary::-webkit-details-marker { display: none; }
.filter summary { font-weight: 600; }
.filter summary .rechts { margin-left: auto; font-weight: 700; }
.filter form { display: flex; flex-direction: column; gap: .75rem; margin-top: .9rem; }
.bereich > summary h2 { margin: 0; flex: 1; }
.bereich > summary::after, .filter > summary::after { content: '›'; font-size: 1.4rem; transition: transform .15s; color: var(--leise); }
.bereich[open] > summary::after, .filter[open] > summary::after { transform: rotate(90deg); }
.bereich .liste { margin-top: .9rem; }
.stamm-zeile { border-bottom: 1px solid var(--linie); }
.stamm-zeile:last-child { border-bottom: 0; }
.stamm-zeile > summary { padding: .75rem 1rem; }
.stamm-zeile > form { padding: 0 1rem 1rem; }
.stamm-zeile.neu { border: 1px dashed var(--linie); border-radius: 12px; margin-top: .75rem; }
.stamm-zeile.neu > summary { color: var(--akzent); font-weight: 600; }
.anmelden { max-width: 420px; margin: 2rem auto; width: 100%; }

/* Meldungen */
.hinweis { padding: .75rem 1rem; border-radius: 12px; font-weight: 500; transition: opacity .4s; }
.hinweis.ok { background: var(--gruen-bg); color: var(--gruen); }
.hinweis.fehler { background: var(--rot-bg); color: var(--rot); }
.hinweis.weg { opacity: 0; }

/* Unten: Navigation + Plus-Knopf */
.tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--karte); border-top: 1px solid var(--linie);
}
.tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: .7rem; color: var(--leise); }
.tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabs a.aktiv { color: var(--akzent); font-weight: 600; }
.fab {
    position: fixed; right: 1rem; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 1rem); z-index: 21;
    width: 58px; height: 58px; border-radius: 18px; background: var(--akzent); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 300;
    box-shadow: 0 6px 18px rgba(29, 78, 216, .35);
}

/* Rückfrage */
dialog { border: 0; border-radius: 18px; padding: 1.25rem; width: min(92vw, 420px); background: var(--karte); color: var(--text); }
dialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog h2 { font-size: 1.1rem; }
dialog p { color: var(--leise); margin: 0 0 1rem; }