/* timetrack (Fachschaft-Informatik-Fork) — siehe Design.md.
   Ein Akzent (FS-INF-Blau statt Petrol), ein Signal (Grün für "läuft"), eine
   freie Farbe je Taster. */

:root {
    /* Ruhig und freundlich: weiches Off-White, ein zu nak-inf.de passendes
       Blau als Akzent. Kein Terminal-Grau, kein Papier-Beige. */
    --ground: #f4f6f5;
    --surface: #ffffff;
    --surface-sunk: #eef1f0;
    --line: #dfe4e3;
    --line-strong: #c3ccca;
    --text: #22302e;
    --text-weak: #6b7b78;
    --accent: #1d5c94;
    --accent-soft: #e4edf6;
    --live: #2f7d4f;
    --live-soft: #e2f0e7;
    --danger: #a4423c;
    --shadow: 34, 48, 46;

    /* Zahlen laufen in der Textschrift mit tabular-nums: sie zappeln beim Ticken
       nicht, sehen aber nicht nach Terminal aus. Titel in einer Serif — das nimmt
       der Oberflaeche das Werkzeug-Hafte. */
    --sans: ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;

    --radius: 10px;
    --shell: 72rem;
    --grain: .035;
}

@media (prefers-color-scheme: dark) {
    body::after { mix-blend-mode: screen; }

    :root {
        --ground: #141918;
        --surface: #1c2322;
        --surface-sunk: #171d1c;
        --line: #2c3634;
        --line-strong: #465451;
        --text: #eaefed;
        --text-weak: #98a8a4;
        --accent: #7fb2e0;
        --accent-soft: #1c2a38;
        --live: #62c98a;
        --live-soft: #1a2c22;
        --danger: #e28c86;
        --shadow: 0, 0, 0;
        --grain: .06;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--text);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.45;
}

/* Feine Körnung über der ganzen Fläche. Flächen aus reinem Hex wirken wie aus
   dem Generator; ein Hauch Rauschen gibt ihnen Papier-Charakter. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: var(--grain);
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ziffern sollen beim Ticken nicht zappeln — ohne Monospace-Anmutung. */
.clock, .num, .dial-clock, .figure dd, code {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

h1, h2, h3, .mark, .dial-label, .taster-name, .stage-what {
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
    left: 1rem; top: .5rem;
    z-index: 10;
    background: var(--surface);
    padding: .5rem .75rem;
    border: 1px solid var(--line-strong);
}

.label {
    font-size: 13px;
    color: var(--text-weak);
    margin: 0 0 .3rem;
    font-weight: 500;
}

/* Kleingedrucktes, das erklärt statt zu schmücken. */
.hint { margin: 0; font-size: 12.5px; color: var(--text-weak); max-width: 78ch; }
.muted { color: var(--text-weak); }
.quiet-link { font-size: 12.5px; color: var(--text-weak); }

/* Der Kennfarben-Punkt eines Tasters. Die Farbe sitzt bewusst als kleiner
   Marker am Namen und nicht als breiter Balken an der Kartenkante. */
.dot {
    display: inline-block;
    width: .55rem; height: .55rem;
    border-radius: 50%;
    background: var(--accent-here, var(--accent));
    flex: 0 0 auto;
}

/* ------------------------------------------------------------------ Kopfzeile */

.topbar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: .55rem clamp(.75rem, 3vw, 1.5rem);
    background: var(--surface);
    border-bottom: 1px solid var(--line-strong);
}

.mark {
    font-family: var(--serif);
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: -.022em;
}

/* Ein offener Ring: Stoppuhr, ohne ein Icon-Set dafür zu laden. */
.mark-glyph {
    width: 14px; height: 14px;
    border: 3px solid var(--accent);
    border-radius: 50%;
    border-top-color: transparent;
}

.nav {
    display: flex;
    gap: 1.1rem;
    flex-wrap: wrap;
    margin-right: auto;
}
.nav a {
    color: var(--text-weak);
    text-decoration: none;
    font-size: 14px;
    padding: .35rem 0;
    border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--text); border-bottom-color: var(--line-strong); }
/* Wo bin ich? Ohne Markierung sucht man das bei vier Seiten jedes Mal neu. */
.nav a.here { color: var(--text); border-bottom-color: var(--accent); }

.whoami { display: flex; align-items: center; gap: .9rem; font-size: 13px; }
.whoami-name { color: var(--text-weak); }
.whoami-out { color: var(--text-weak); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.whoami-out:hover { color: var(--text); border-bottom-color: var(--text); }

/* --------------------------------------------------------------------- Rahmen */

.shell {
    position: relative;
    z-index: 2;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 1.25rem clamp(.75rem, 3vw, 1.5rem) 2rem;
    display: grid;
    gap: 1rem;
}

.footer {
    position: relative;
    z-index: 2;
    max-width: var(--shell);
    margin: 0 auto;
    padding: .75rem clamp(.75rem, 3vw, 1.5rem) 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-weak);
    border-top: 1px solid var(--line);
}

.flash {
    padding: .7rem .9rem;
    border-left: 3px solid var(--accent);
    background: var(--surface);
    font-size: 14px;
}
.flash-error { border-left-color: var(--danger); }

/* ------------------------------------------------------------------- Die Bühne */

/* Der zentrale Knopf steht mittig und allein. Alles andere auf der Seite ist
   linksbündig — die Symmetrie ist hier eine Aussage, kein Default. */
.stage {
    display: grid;
    justify-items: center;
    gap: .5rem;
    padding: clamp(1.25rem, 4vw, 2.25rem) 1rem clamp(1rem, 3vw, 1.5rem);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
}

.stage-form {
    display: grid;
    justify-items: center;
    gap: .75rem;
    margin: 0;
    width: 100%;
}

.stage-what {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(1.35rem, 4vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -.015em;
    text-align: center;
    overflow-wrap: anywhere;
}

.stage-status {
    margin: 0;
    color: var(--text-weak);
    font-size: 13.5px;
    text-align: center;
    max-width: 34ch;
}
.stage-status strong { color: var(--text); font-weight: 600; }

.dial {
    display: grid;
    place-content: center;
    gap: .1rem;
    width: clamp(10.5rem, 30vw, 14.5rem);
    aspect-ratio: 1;
    border-radius: 50%;
    border: none;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    /* Physische Tiefe aus einem Lichtverlauf und gestaffelten Ringen: innere
       Haarlinie, Luft, dann der Kennring der Tätigkeit. */
    background:
            radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--surface) 93%, white), var(--surface) 78%),
            var(--surface);
    box-shadow:
            inset 0 0 0 1px var(--line),
            0 0 0 5px var(--surface),
            0 0 0 6px var(--accent-here, var(--accent)),
            0 24px 44px -26px rgba(var(--shadow), .7);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.dial:hover { background: var(--accent-soft); }
.dial:active {
    transform: translateY(2px) scale(.985);
    box-shadow:
            inset 0 2px 6px -2px rgba(var(--shadow), .45),
            inset 0 0 0 1px var(--line),
            0 0 0 5px var(--surface),
            0 0 0 6px var(--accent-here, var(--accent));
}

.dial-running {
    box-shadow:
            inset 0 0 0 1px var(--live-soft),
            0 0 0 5px var(--surface),
            0 0 0 6px var(--live),
            0 20px 38px -28px color-mix(in srgb, var(--live) 55%, transparent);
}
.dial-running:hover { background: var(--live-soft); }

.dial-label {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent);
}
.dial-running .dial-label { color: var(--live); }

.dial-clock {
    font-size: clamp(1.5rem, 4.2vw, 2rem);
    line-height: 1.05;
    letter-spacing: -.01em;
}
.dial-running .dial-clock { color: var(--live); }
.dial-clock-idle { color: var(--text-weak); }

/* Die drei Zahlen unter dem Knopf. Kein Karten-Raster: nur Zahlen mit
   Beschriftung, durch Trennstriche gefasst. */
.figures {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    margin: .25rem 0 0;
    padding: 0;
    border-top: 1px solid var(--line);
    padding-top: .7rem;
    width: min(100%, 34rem);
    align-items: end;
}
/* Bricht eine Beschriftung um, sollen die Zahlen trotzdem auf einer Linie
   stehen — sonst tanzt die dritte Spalte aus der Reihe. */
.figure {
    flex: 1 1 7rem;
    text-align: center;
    padding: 0 .8rem;
    display: grid;
    align-content: end;
}
.figure + .figure { border-left: 1px solid var(--line); }
.figure dt { font-size: 12px; color: var(--text-weak); }
.figure dd {
    margin: .1rem 0 0;
    font-size: 1.05rem;
    font-weight: 650;
}

.stage-note {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .6rem .8rem;
    width: min(100%, 30rem);
    min-width: 0;
    margin: .35rem 0 0;
    padding: .8rem .9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-sunk);
}
.stage-note legend {
    padding: 0 .35rem;
    font-size: 12.5px;
    color: var(--text-weak);
}
.stage-note .hint { grid-column: 1 / -1; }

.stage-discard { margin: .2rem 0 0; }

/* ---------------------------------------------------------------------- Taster */

.group { display: grid; gap: .4rem; }
.group-title {
    margin: 0;
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-weak);
    display: flex;
    align-items: center;
    gap: .7rem;
}
/* Eine Linie, die den Rest der Zeile füllt — Gruppentitel als Trennschild. */
.group-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

.taster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .5rem;
}
.taster-form { margin: 0; display: contents; }

.taster {
    display: grid;
    gap: .3rem;
    width: 100%;
    min-height: 3.6rem;
    padding: .7rem .8rem;
    align-content: center;
    text-align: left;
    background: var(--surface);
    color: var(--text);
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    font: inherit;
    transition: transform .06s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.taster:hover {
    background: var(--surface-sunk);
    border-color: var(--line-strong);
    box-shadow: 0 6px 16px -12px rgba(var(--shadow), .6);
}
.taster:active { transform: translateY(2px); box-shadow: none; }

.taster-running {
    border-color: var(--live);
    box-shadow: inset 0 0 0 2px var(--live-soft);
}

.taster-name {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.15;
    letter-spacing: -.01em;
    /* Notbremse fuer sehr lange Namen; getrennt wird nicht, das zerlegt
       Woerter wie "Eigenentwicklung" unnoetig. */
    overflow-wrap: break-word;
    min-width: 0;
}
.taster-hint { font-size: 12.5px; color: var(--text-weak); }
.taster-clock { font-size: 1.15rem; color: var(--live); line-height: 1.1; }
.taster-project { font-size: 12.5px; color: var(--text-weak); overflow-wrap: anywhere; }

/* -------------------------------------------------------- Panels und Tabellen */

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .9rem 1rem;
    display: grid;
    gap: .7rem;
}

.panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.panel h1, .panel h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -.012em;
}
.panel h2.label {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-weak);
}

/* Eine Frage, die eine Entscheidung braucht: mehr Luft, kein Tabellen-Layout. */
.panel-ask {
    gap: 1rem;
    padding: clamp(1.1rem, 3vw, 1.75rem);
    max-width: 46rem;
}
.panel-ask h1 { font-size: clamp(1.4rem, 4vw, 1.9rem); }
.panel-ask p { margin: 0; max-width: 56ch; }

.table-scroll { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.table th, .table td {
    text-align: left;
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.table thead th {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-weak);
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
}
.table tbody tr:hover { background: var(--surface-sunk); }
.table td.num, .table th.num { text-align: right; white-space: nowrap; }
.table .note { color: var(--text-weak); }
.table tfoot th, .table tfoot td { border-bottom: none; border-top: 1px solid var(--line-strong); font-weight: 650; }
.strong { font-weight: 700; }

/* Zwei Spalten Fakten: Beschriftung links, Wert rechts daneben. */
.table-facts th[scope=row] { font-weight: 500; color: var(--text-weak); width: 14rem; }
.table-facts td.num { text-align: left; }

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.25rem;
}
.summary-list { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.summary-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .3rem 0;
    border-bottom: 1px dotted var(--line);
}

/* ----------------------------------------------------------- Formularelemente */

.field { display: grid; gap: .25rem; }
.field-wide { grid-column: 1 / -1; }

input[type=text], input[type=date], input[type=color], select, textarea {
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: .5rem .6rem;
    width: 100%;
    min-width: 0;
}
input[type=color] { padding: .2rem; height: 2.6rem; max-width: 5rem; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .75rem;
    align-items: end;
}
/* Der Absende-Button soll nicht auf Spaltenbreite gestreckt werden. */
.form-grid > .field > .btn { justify-self: start; }
.form-grid > .field:last-child { max-width: max-content; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    /* Fingerfreundlich: mit Innenabstand kommt jeder Knopf über 44px Höhe. */
    min-height: 2.5rem;
    padding: .45rem .9rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--surface);
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { background: var(--text-weak); border-color: var(--text-weak); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); color: var(--text); border-color: var(--line-strong); }
.btn-small { min-height: 2.1rem; padding: .35rem .7rem; font-size: 13px; }
.btn-large { font-size: 15px; min-height: 2.9rem; padding: .65rem 1.4rem; }

.link-button {
    font: inherit;
    font-size: 13px;
    background: none;
    border: none;
    padding: .25rem 0;
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.link-button.danger { color: var(--danger); }

.inline { display: inline; margin: 0; }
.row-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
/* Inline-Umbenennen: Feld und Button bleiben auf einer Zeile. */
.row-actions input[type=text] { width: auto; flex: 1 1 10rem; min-width: 8rem; }
.row-actions .btn { flex: 0 0 auto; }

.empty {
    background: var(--surface);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: grid;
    gap: .7rem;
    justify-items: start;
}
.empty h1, .empty h2 { margin: 0; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.empty p { margin: 0; color: var(--text-weak); max-width: 52ch; }
/* Der erste Besuch: hier ist die Aufforderung der ganze Inhalt der Seite. */
.empty-first { padding: clamp(1.5rem, 5vw, 2.5rem); }
.empty-first h1 { font-size: clamp(1.5rem, 4vw, 2rem); }

.tag {
    display: inline-block;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .1rem .4rem;
    border: 1px solid var(--line-strong);
    color: var(--text-weak);
    border-radius: 2px;
}
.tag-live { color: var(--live); border-color: var(--live); }

details.editor { border-top: 1px dotted var(--line); padding-top: .5rem; }
/* Eigenes Auf-/Zu-Zeichen statt des Browser-Dreiecks (das bricht in eine
   eigene Zeile und sticht farbig heraus). */
details.editor summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--accent);
    list-style: none;
    white-space: nowrap;
    padding: .3rem 0;
}
details.editor summary::-webkit-details-marker { display: none; }
/* Ein zurueckhaltender Winkel statt Plus/Minus — Zeichen wie "+" lesen sich
   wie ein Bedienelement aus einem Entwicklerwerkzeug. */
details.editor summary::after { content: ' ›'; }
details.editor[open] summary::after { content: ' ⌄'; }
details.editor > form { margin-top: .6rem; }

.danger-zone { border-color: var(--danger); }
.danger-zone .btn { background: var(--danger); border-color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------ Anmeldung / Abmeldung */

/* Die öffentlichen Seiten: Text links, ein grosser offener Ring rechts. Bewusst
   keine mittige Karte im Nichts — das ist der Anmeldebildschirm, den jedes
   Baukasten-Frontend hat. */
.gate {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    max-width: var(--shell);
    margin: 0 auto;
    padding: clamp(2rem, 8vh, 6rem) clamp(1.25rem, 5vw, 3rem);
    display: grid;
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 4rem);
}
@media (max-width: 62rem) {
    .gate { grid-template-columns: minmax(0, 1fr); min-height: auto; }
    .gate-figure { display: none; }
}

.gate-body { display: grid; gap: .9rem; }

.gate-mark {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .5rem;
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--text-weak);
    letter-spacing: -.015em;
}

.gate-body h1 {
    font-family: var(--serif);
    font-size: clamp(1.9rem, 5.5vw, 3rem);
    line-height: 1.1;
    letter-spacing: -.025em;
    margin: 0;
    font-weight: 600;
    max-width: 24ch;
}

.gate-text { margin: 0; font-size: 15px; color: var(--text-weak); max-width: 46ch; }
.gate-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }
.gate-sub { margin: .4rem 0 0; font-size: 13px; color: var(--text-weak); max-width: 46ch; }
.gate-sub + .gate-sub { margin-top: .2rem; }
.gate-note { margin: 0; font-size: 12.5px; color: var(--text-weak); max-width: 46ch; }

/* Der Ring rechts: dieselbe Geste wie der Knopf in der Anwendung, nur riesig
   und aus der Mitte gerückt. Rein dekorativ, daher aria-hidden. */
.gate-figure {
    position: relative;
    justify-self: end;
    width: min(24rem, 34vw);
    aspect-ratio: 1;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
}
.gate-figure::before {
    content: '';
    position: absolute;
    inset: 12%;
    border: 6px solid var(--accent-soft);
    border-top-color: var(--accent);
    border-radius: 50%;
    transform: rotate(-24deg);
}
/* Der Zeiger, aus der Mitte heraus. */
.gate-figure::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 18%;
    width: 2px;
    height: 32%;
    border-radius: 2px;
    background: var(--line-strong);
    /* Drehpunkt in der Mitte des Rings, damit der Zeiger dort ansetzt und nicht
       frei im Bild schwebt. */
    transform-origin: bottom center;
    transform: translateX(-1px) rotate(31deg);
    box-shadow: 0 3px 0 0 var(--line-strong);
}