/*
 * Zeitwirtschaft — eigenstaendige, zurueckhaltende Gestaltung.
 *
 * Schriften: Zilla Slab fuer Ueberschriften, Karla fuer Fliesstext,
 * IBM Plex Mono fuer alle Zahlen und Zeiten (siehe Kopf der Seite, dort werden
 * die Schriften ueber Google Fonts geladen - die einzige externe Quelle).
 *
 * Farben stehen als Tokens auf :root und werden unter
 * @media (prefers-color-scheme: dark) durch die dunkle Fassung ersetzt. Jede Farbe
 * hat auf :root einen echten Wert, keine ist ausschliesslich im Dunkelblock definiert.
 *
 * Palette: Papierton mit Gruenstich als Grund, Tinte fast schwarz mit Gruenstich als
 * Text, Messing als Akzent, Petrol fuer Plus (Ueberstunden), Rost fuer Minus
 * (Fehlzeit), Violett fuer Abwesenheit.
 */

:root {
    --farbe-papier: #f2f1e6;
    --farbe-papier-erhoben: #fbfaf3;
    --farbe-rand: #d9d6c3;

    --farbe-tinte: #171c16;
    --farbe-tinte-gedaempft: #545a4d;

    --farbe-messing: #a3812f;
    --farbe-messing-dunkel: #7a5f21;

    --farbe-petrol: #17615f;
    --farbe-rost: #a1462a;
    --farbe-violett: #6a4b8a;

    --farbe-fokus: #7a5f21;
    --schatten-karte: 0 1px 2px rgba(23, 28, 22, 0.08), 0 4px 12px rgba(23, 28, 22, 0.06);

    --schrift-ueberschrift: 'Zilla Slab', Georgia, 'Times New Roman', serif;
    --schrift-text: 'Karla', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --schrift-zahlen: 'IBM Plex Mono', 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --farbe-papier: #14170f;
        --farbe-papier-erhoben: #1c2016;
        --farbe-rand: #363c2c;

        --farbe-tinte: #eceee2;
        --farbe-tinte-gedaempft: #a9ae9c;

        --farbe-messing: #c9a24f;
        --farbe-messing-dunkel: #e2bd6f;

        --farbe-petrol: #4fa6a3;
        --farbe-rost: #cf7452;
        --farbe-violett: #a687c9;

        --farbe-fokus: #e2bd6f;
        --schatten-karte: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.35);

        color-scheme: dark;
    }
}

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

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

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--farbe-papier);
    color: var(--farbe-tinte);
    font-family: var(--schrift-text);
    font-size: 1rem;
    line-height: 1.5;
}

h1, h2, h3, h4 {
    font-family: var(--schrift-ueberschrift);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 0.6em;
    color: var(--farbe-tinte);
}

/* Eine Ueberschrift, auf die etwas vorangeht, braucht Luft nach oben - sonst klebt
   sie am Knopf oder Formular davor. Die erste Ueberschrift eines Abschnitts bleibt
   ohne Abstand, weil der Abschnitt selbst schon einen Innenabstand hat. */
* + h2,
* + h3 {
    margin-top: 1.6rem;
}

* + h4 {
    margin-top: 1.1rem;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--farbe-messing-dunkel);
}

/* Zahlen und Zeiten immer in Ziffernbreite und in der Mono-Schrift. */
time, .zahl, .knopf-zeit, input[type="time"], input[type="date"], input[type="number"] {
    font-family: var(--schrift-zahlen);
    font-variant-numeric: tabular-nums;
}

/* Sichtbarer Fokusrahmen fuer Tastaturbedienung. */
:focus-visible {
    outline: 3px solid var(--farbe-fokus);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Kopfleiste ----------------------------------------------------------- */

/*
 * Die Leiste liegt als Glasstreifen ueber dem Inhalt: halbdurchsichtiger Papierton
 * plus backdrop-filter. Der volle Farbwert steht zuerst und gilt allein, wenn der
 * Browser backdrop-filter nicht kann - ohne die Weichzeichnung waere eine
 * durchsichtige Leiste vor scrollendem Text unlesbar. Erst der @supports-Block
 * nimmt Deckkraft weg.
 */
.kopfleiste {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    padding: 0.6rem 1rem;
    background-color: var(--farbe-papier-erhoben);
    border-bottom: 1px solid var(--farbe-rand);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .kopfleiste {
        background-color: color-mix(in srgb, var(--farbe-papier-erhoben) 72%, transparent);
        -webkit-backdrop-filter: blur(14px) saturate(1.6);
        backdrop-filter: blur(14px) saturate(1.6);
        border-bottom-color: color-mix(in srgb, var(--farbe-rand) 70%, transparent);
        box-shadow: 0 1px 0 color-mix(in srgb, var(--farbe-papier-erhoben) 45%, transparent);
    }
}

.kopfleiste-marke {
    font-family: var(--schrift-ueberschrift);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.01em;
    color: var(--farbe-tinte);
    text-decoration: none;
    white-space: nowrap;
}

.kopfleiste-marke::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    background-color: var(--farbe-messing);
    vertical-align: baseline;
}

/*
 * Die Navigation traegt neun Punkte. Auf dem Telefon passt das in keine Zeile, und
 * Umbruch machte die Leiste dort dreizeilig. Sie wird deshalb zu einem waagerecht
 * scrollbaren Streifen - der Seitenkoerper selbst scrollt dabei nicht mit.
 */
.kopfleiste-navigation {
    flex: 1 1 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.kopfleiste-navigation::-webkit-scrollbar {
    display: none;
}

.kopfleiste-navigation ul {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kopfleiste-navigation a {
    display: block;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    color: var(--farbe-tinte-gedaempft);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
    transition: background-color 120ms ease, color 120ms ease;
}

.kopfleiste-navigation a:hover,
.kopfleiste-navigation a:focus-visible {
    color: var(--farbe-tinte);
    background-color: color-mix(in srgb, var(--farbe-tinte) 7%, transparent);
}

/* Der aktive Punkt wird ueber aria-current markiert. Damit tragen Darstellung und
   Vorlesehilfe dieselbe Aussage, statt sie in einer eigenen Klasse zu verdoppeln. */
.kopfleiste-navigation a[aria-current='page'] {
    color: var(--farbe-tinte);
    font-weight: 700;
    background-color: color-mix(in srgb, var(--farbe-messing) 20%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--farbe-messing) 45%, transparent);
}

.kopfleiste-benutzer {
    display: flex;
    align-items: center;
    gap: 0.5rem 0.9rem;
    flex-wrap: wrap;
    margin-left: auto;
    font-size: 0.9rem;
    color: var(--farbe-tinte-gedaempft);
}

.kopfleiste-benutzer a {
    color: var(--farbe-tinte-gedaempft);
    text-decoration: none;
}

.kopfleiste-benutzer a:hover,
.kopfleiste-benutzer a:focus-visible {
    color: var(--farbe-tinte);
}

.kopfleiste-benutzer a[aria-current='page'] {
    color: var(--farbe-tinte);
    font-weight: 700;
}

/* Der eigene Name ist eine Angabe, kein Bedienelement, und tritt entsprechend zurueck. */
.kopfleiste-name {
    font-weight: 700;
    color: var(--farbe-tinte);
}

/* Ab Tablettbreite ist Platz fuer eine einzige Zeile. */
@media (min-width: 60rem) {
    .kopfleiste {
        padding: 0.6rem 2rem;
        flex-wrap: nowrap;
    }

    .kopfleiste-navigation {
        flex: 1 1 auto;
    }
}

/* --- Layout ---------------------------------------------------------------- */

.huelle {
    flex: 1;
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 1rem;
}

.fusszeile {
    padding: 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--farbe-tinte-gedaempft);
    border-top: 1px solid var(--farbe-rand);
}

.fusszeile p {
    margin: 0;
}

/* --- Karte ------------------------------------------------------------------ */

.karte {
    background-color: var(--farbe-papier-erhoben);
    border: 1px solid var(--farbe-rand);
    border-radius: 0.75rem;
    box-shadow: var(--schatten-karte);
    padding: 1.5rem;
}

/* --- Anmeldung / Einladung: eigenstaendiges, mittiges Layout ---------------- */

.anmeldung-huelle {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 1.5rem;
}

.anmeldung-karte {
    width: 100%;
    max-width: 24rem;
}

.anmeldung-untertitel {
    color: var(--farbe-tinte-gedaempft);
}

/* --- Formularfelder ---------------------------------------------------------- */

.feld-gruppe {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.feld {
    font-weight: 500;
    font-size: 0.9rem;
}

/* Ankreuzfelder und Auswahlknoepfe sind hier ausdruecklich ausgenommen. Die Regel
   setzt width: 100%, und das machte aus jeder Checkbox einen seitenbreiten Kasten,
   unter dem die Beschriftung landete. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    font: inherit;
    color: var(--farbe-tinte);
    background-color: var(--farbe-papier);
    border: 1px solid var(--farbe-rand);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    width: 100%;
}

/* Ohne accent-color malt das Betriebssystem seine eigene Farbe - auf dem iPhone ein
   kraeftiges Blau, das in dieser Palette wie ein Fremdkoerper wirkt. Die native
   Darstellung bleibt erhalten, nur die Farbe kommt aus dem eigenen Satz; damit
   bleiben auch Bedienbarkeit und Barrierefreiheit unangetastet. */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--farbe-messing);
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
    margin: 0;
}

/* Eine Beschriftung, die ein Ankreuzfeld enthaelt, wird zur Zeile: Kaestchen links,
   Text daneben, beide senkrecht mittig. */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0;
    cursor: pointer;
    font-weight: normal;
}

fieldset {
    border: 1px solid var(--farbe-rand);
    border-radius: 0.75rem;
    padding: 0.9rem 1.1rem 1.1rem;
    margin: 0 0 1rem;
    min-width: 0;
}

legend {
    padding: 0 0.45rem;
    font-family: var(--schrift-ueberschrift);
    font-size: 0.95rem;
    color: var(--farbe-tinte-gedaempft);
}

input::placeholder {
    color: var(--farbe-tinte-gedaempft);
}

/* --- Knoepfe ------------------------------------------------------------------ */

/* Bewusst am Element und nicht nur an der Klasse: sechs Knoepfe in den Vorlagen
   trugen class="knopf" nicht und erschienen deshalb in der Systemdarstellung des
   Geraets - auf dem iPhone als blaue Pille. Wer die Klasse vergisst, bekommt jetzt
   trotzdem das richtige Aussehen. */
button,
.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--farbe-rand);
    border-radius: 0.6rem;
    padding: 0.6rem 1.1rem;
    background-color: var(--farbe-papier-erhoben);
    color: var(--farbe-tinte);
    transition: background-color 0.15s ease, transform 0.05s ease;
}

button:hover,
.knopf:hover {
    background-color: var(--farbe-papier);
}

button:active,
.knopf:active {
    transform: translateY(1px);
}

.knopf-haupt {
    width: 100%;
    background-color: var(--farbe-messing);
    border-color: var(--farbe-messing-dunkel);
    color: var(--farbe-tinte);
    font-size: 1.05rem;
    padding: 0.9rem 1.1rem;
}

.knopf-haupt:hover {
    background-color: var(--farbe-messing-dunkel);
}

/*
 * Start/Stopp der Zeiterfassung: mobil zuerst gross und mit dem Daumen erreichbar.
 * Wird von der Erfassungsseite eines anderen Agenten genutzt.
 */
.knopf-start-stopp {
    width: 100%;
    min-height: 4.5rem;
    font-size: 1.3rem;
    border-radius: 1rem;
}

/* --- Pille (kleine Statusmarkierung) -------------------------------------- */

.pille {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background-color: var(--farbe-papier);
    border: 1px solid var(--farbe-rand);
    color: var(--farbe-tinte-gedaempft);
}

/* --- Plus / Minus / Abwesenheit --------------------------------------------- */

.plus {
    color: var(--farbe-petrol);
}

.minus {
    color: var(--farbe-rost);
}

.pille.plus {
    background-color: color-mix(in srgb, var(--farbe-petrol) 15%, var(--farbe-papier));
    border-color: var(--farbe-petrol);
    color: var(--farbe-petrol);
}

.pille.minus {
    background-color: color-mix(in srgb, var(--farbe-rost) 15%, var(--farbe-papier));
    border-color: var(--farbe-rost);
    color: var(--farbe-rost);
}

.pille.abwesenheit {
    background-color: color-mix(in srgb, var(--farbe-violett) 15%, var(--farbe-papier));
    border-color: var(--farbe-violett);
    color: var(--farbe-violett);
}

/* --- Tabelle: der Seitenkoerper scrollt nie waagerecht, nur ihr Behaelter ---- */

.tabelle {
    overflow-x: auto;
    border: 1px solid var(--farbe-rand);
    border-radius: 0.75rem;
}

.tabelle table {
    width: 100%;
    border-collapse: collapse;
}

/*
 * Kein Umbruch und angeheftete erste Spalte galten frueher fuer JEDE Tabelle. Beides
 * war fuer die Rechtematrix gedacht und machte die Projektauswertung auf dem Telefon
 * unbrauchbar: der Kundenname ist dort die erste Spalte, konnte nicht umbrechen, zog
 * die Spalte ueber die ganze Breite und blieb beim seitlichen Scrollen stehen - man
 * sah drei gleiche Kundennamen und keine einzige Stundenzahl. Deshalb tragen jetzt
 * nur noch die Tabellen, die es brauchen, diese Eigenschaft.
 */
.tabelle-rechtematrix {
    white-space: nowrap;
}

.tabelle th, .tabelle td {
    text-align: left;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--farbe-rand);
}

.tabelle th {
    font-weight: 600;
    background-color: var(--farbe-papier-erhoben);
    position: sticky;
    top: 0;
}

.tabelle tbody tr:last-child td {
    border-bottom: none;
}

/* --- Flash-Nachrichten -------------------------------------------------------- */

.flash {
    border-radius: 0.6rem;
    border: 1px solid var(--farbe-rand);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.flash-erfolg {
    background-color: color-mix(in srgb, var(--farbe-petrol) 12%, var(--farbe-papier-erhoben));
    border-color: var(--farbe-petrol);
    color: var(--farbe-petrol);
}

.flash-fehler {
    background-color: color-mix(in srgb, var(--farbe-rost) 12%, var(--farbe-papier-erhoben));
    border-color: var(--farbe-rost);
    color: var(--farbe-rost);
}

.flash-info {
    background-color: color-mix(in srgb, var(--farbe-messing) 12%, var(--farbe-papier-erhoben));
    border-color: var(--farbe-messing);
    color: var(--farbe-messing-dunkel);
}

/* --- Mobil zuerst: ab hier mehr Luft auf breiteren Bildschirmen -------------- */

@media (min-width: 40rem) {
    .huelle {
        padding: 1.5rem 2rem;
    }
}

/* Knopfreihe unter einem Formular. Umbricht auf schmalen Geraeten, statt den
   Seitenkoerper waagerecht zu sprengen. */
.knopfleiste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

/* Tabellen bekommen ihren Scroll-Container ueber .tabelle. Zusaetzlich hier eine
   Sicherung: kein Element darf den Seitenkoerper waagerecht aufziehen. Genau das
   war auf den Verwaltungsseiten passiert - die Tabellen dort trugen Klassen
   (tabelle-benutzer, tabelle-rechtematrix ...), die es im Stylesheet nie gab, und
   standen ohne Scroll-Container in der Seite. */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

.tabelle {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Die Rechtematrix ist die breiteste Tabelle der Anwendung. Auf dem Telefon soll
   die erste Spalte stehen bleiben, damit erkennbar ist, um welches Recht es geht.
   Ausdruecklich nur dort: in einer schmalen Tabelle verdeckt eine angeheftete erste
   Spalte die Zahlen daneben, statt zu helfen. */
.tabelle-rechtematrix th:first-child,
.tabelle-rechtematrix td:first-child {
    position: sticky;
    left: 0;
    background: var(--farbe-papier-erhoben);
}

/* --- Kartenraster ----------------------------------------------------------
   .karten und .karte-verweis wurden in Vorlagen verwendet, ohne dass es sie hier
   je gab. Die Folge auf dem Telefon: ein <a class="karte"> ist ein Inline-Element,
   und ein Inline-Element mit Innenabstand ueberlappt seine Nachbarn vertikal statt
   sie zu stapeln - die Karten schoben sich treppenfoermig uebereinander.
   Mobil eine Spalte, ab 40rem so viele wie hineinpassen. */
.karten {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    margin-top: 1.2rem;
}

@media (min-width: 40rem) {
    .karten {
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    }
}

/* Eine Karte, die selbst ein Verweis ist. display: flex macht aus dem Inline-
   Element einen Block - das ist die eigentliche Behebung. */
.karte-verweis {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-decoration: none;
    color: inherit;
}

.karte-verweis strong {
    font-family: var(--schrift-ueberschrift);
    font-size: 1.05rem;
}

.karte-verweis span {
    color: var(--farbe-tinte-gedaempft);
    font-size: 0.92rem;
}

.karte-verweis:hover,
.karte-verweis:focus-visible {
    border-color: var(--farbe-messing);
}

/* --- Abstaende in Formularen ------------------------------------------------
   Es gab bisher keine einzige Regel fuer form. Auf der Rollenseite standen dadurch
   zwei getrennte Formulare - "Rechte speichern" und "Rolle loeschen" - unmittelbar
   aneinander, ohne jeden Abstand, und die Knoepfe klebten am Gruppenrahmen darueber.

   Der Nachbarschaftswaehler gibt jedem Kind ausser dem ersten einen Abstand nach
   oben. Damit stimmt der senkrechte Rhythmus, ohne dass an jedem einzelnen Element
   ein Abstand gepflegt werden muss - genau die Pflege, die hier schon dreimal
   vergessen wurde. */
form > * + * {
    margin-top: 0.9rem;
}

form + form {
    margin-top: 0.9rem;
}

/* Ein Formular, dessen Inhalt in einer Reihe liegt, bringt seinen Abstand ueber
   gap mit - dort waere der Nachbarschaftswaehler doppelt gemoppelt. */
.knopfleiste > * + *,
.feld-gruppe > * + * {
    margin-top: 0;
}

/* Versteckte Felder duerfen keinen Abstand erzeugen, sonst entsteht eine Luecke
   ohne sichtbaren Inhalt. */
form > input[type="hidden"] + * {
    margin-top: 0;
}

form > input[type="hidden"] {
    margin-top: 0;
}

/* --- Abschnitte -------------------------------------------------------------
   Es gab keine Regel fuer section. Auf der Rollenseite folgt Abschnitt auf
   Abschnitt, jeder mit einer Ueberschrift als erstem Kind - dadurch griff auch der
   Nachbarschaftswaehler fuer Ueberschriften nicht, denn dort gibt es kein
   vorangehendes Geschwisterelement. Ergebnis: die Ueberschrift der naechsten Rolle
   klebte am Knopf der vorherigen.

   Wieder am Element und nicht an einer Klasse: die Vorlagen benutzen Namen wie
   abschnitt-rolle und abschnitt-rolle-anlegen, die es im Stylesheet nie gab. */
section + section {
    margin-top: 2rem;
}

section > h2:first-child,
section > h3:first-child {
    margin-top: 0;
}

/* --- Nachgezogene Klassen ---------------------------------------------------
   Ein Abgleich aller Klassen aus templates/ gegen die drei Stylesheets ergab 65
   Namen ohne jede Regel. Die meisten sind harmlose Haken auf Elementen, die schon
   eine Elementregel tragen (form, section, .karte, .tabelle) - die bleiben
   absichtlich ungestylt. Die folgenden dagegen sollten sichtbar etwas bedeuten und
   taten es nicht. */

/* Zerstoerende Knoepfe ("Löschen", "Ablehnen") sahen aus wie jeder andere Knopf.
   Rost nur als Rand und Schrift, gefuellt erst beim Zeigen: die Seite soll nicht
   von roten Flaechen dominiert werden, aber der Griff soll auffallen. */
.knopf-gefahr {
    color: var(--farbe-rost);
    border-color: color-mix(in srgb, var(--farbe-rost) 45%, var(--farbe-rand));
}

.knopf-gefahr:hover,
.knopf-gefahr:focus-visible {
    color: var(--farbe-papier-erhoben);
    background-color: var(--farbe-rost);
    border-color: var(--farbe-rost);
}

/* Die Zusammenfassung unter Tag, Woche, Ueberstunden und Importvorschau ist die
   Zeile, wegen der die Seite ueberhaupt aufgerufen wird. Sie stand als gewoehnlicher
   Absatz da. Zahlen in der Zahlenschrift, damit Stunden untereinander fluchten. */
.zusammenfassung {
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    border-left: 3px solid var(--farbe-messing);
    background-color: color-mix(in srgb, var(--farbe-messing) 10%, var(--farbe-papier-erhoben));
    font-family: var(--schrift-zahlen);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Behaelter der Wochentagspillen auf den offenen Tagen. .pille selbst war definiert,
   der Behaelter nicht - die Pillen klebten dadurch aneinander. */
.pillen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.5rem 0;
}

/* Kennzeichnet eine Rolle als mitgelieferte Vorlage. */
.kennzeichen-vorlage {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--farbe-violett) 18%, var(--farbe-papier));
    color: var(--farbe-tinte);
    font-family: var(--schrift-text);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

/* Erlaeuternder Nebensatz, kein Fliesstext. */
.hinweis {
    color: var(--farbe-tinte-gedaempft);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Fehlerliste der Importvorschau. Ohne eigene Regel las sie sich wie eine
   gewoehnliche Aufzaehlung, obwohl dort steht, was nicht importiert werden kann. */
.liste {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
    line-height: 1.6;
}

.liste-fehler {
    padding: 0.6rem 0.75rem 0.6rem 2rem;
    border-radius: 0.6rem;
    border-left: 3px solid var(--farbe-rost);
    background-color: color-mix(in srgb, var(--farbe-rost) 10%, var(--farbe-papier-erhoben));
}

/* Der laufende Timer ist der einzige Zustand der Seite, der sich ohne Zutun
   aendert. Petrol als Akzent trennt ihn von den Messing-Bedienelementen. */
.timer {
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--farbe-rand);
    background-color: var(--farbe-papier-erhoben);
}

.timer-laeuft {
    border-color: color-mix(in srgb, var(--farbe-petrol) 55%, var(--farbe-rand));
    background-color: color-mix(in srgb, var(--farbe-petrol) 10%, var(--farbe-papier-erhoben));
}

.timer-laeuft > p {
    margin-top: 0;
    font-family: var(--schrift-zahlen);
    font-variant-numeric: tabular-nums;
}

/* Der Einladungslink wird von Hand kopiert und weitergegeben. Er darf an jeder
   Stelle umbrechen, sonst zieht er auf dem Telefon die Seite waagerecht auf. */
.hinweis-einladungslink {
    padding: 0.6rem 0.75rem;
    border-radius: 0.6rem;
    background-color: var(--farbe-papier);
    border: 1px solid var(--farbe-rand);
    font-family: var(--schrift-zahlen);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

/* Der Zeitausgleich braucht eine Erklaerung direkt am Knopf, weil er als einziger
   Abwesenheitsgrund den Saldo senkt statt ihn unberuehrt zu lassen. */
.knopf-mit-hinweis {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-width: 18rem;
}

.hinweis-zeitausgleich {
    color: var(--farbe-tinte-gedaempft);
    font-size: 0.78rem;
    line-height: 1.45;
}

/* Ein Formular, dessen Felder nebeneinander liegen. Der Abstand kommt hier ueber
   gap, deshalb wird der Nachbarschaftswaehler aus der Elementregel zurueckgenommen. */
.formular-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem;
}

.formular-inline > * + * {
    margin-top: 0;
}

/* --- Projektauswertung: Kundenbloecke ---------------------------------------
   Eine Tabelle mit Kundenspalte war hier falsch: der Kundenname wiederholte sich
   je Projekt und war auf dem Telefon das Einzige, was ins Bild passte. Jetzt ist
   der Kunde die Klammer und das Projekt die Position darunter - dieselbe Ordnung,
   in der auch eine Rechnung geschrieben wird. */

.kundenblock {
    padding: 0.9rem 1rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 0.75rem;
    background-color: var(--farbe-papier-erhoben);
}

.kundenblock + .kundenblock {
    margin-top: 0.75rem;
}

.kundenblock-kunde {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    line-height: 1.35;
    /* Lange Firmennamen duerfen umbrechen. Genau das war vorher verboten. */
    overflow-wrap: anywhere;
}

.posten {
    margin: 0;
    padding: 0;
    list-style: none;
}

.posten-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    padding: 0.45rem 0;
    border-top: 1px solid var(--farbe-rand);
}

.posten-name {
    flex: 1 1 12rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Zahl und Anzahl bleiben zusammen und rechtsbuendig, damit die Stunden aller
   Positionen untereinander fluchten. */
.posten-wert {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-left: auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.posten-anzahl {
    color: var(--farbe-tinte-gedaempft);
    font-size: 0.8rem;
}

.posten-zeile-tief {
    justify-content: flex-start;
    font-size: 0.9rem;
}

.kundenblock-summe {
    margin: 0.6rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--farbe-rand);
    font-weight: 700;
    text-align: right;
    overflow-wrap: anywhere;
}

.gesamtsumme {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    border-left: 3px solid var(--farbe-messing);
    background-color: color-mix(in srgb, var(--farbe-messing) 12%, var(--farbe-papier-erhoben));
    font-family: var(--schrift-zahlen);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* Beschreibung und Mitarbeitername stehen unter dem Projektnamen bzw. dem Datum,
   nicht daneben: auf dem Telefon ist neben der Stundenzahl kein Platz mehr. */
.posten-name > * {
    display: block;
}

.posten-beschreibung {
    color: var(--farbe-tinte-gedaempft);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

/* Der laufende Timer: die mitlaufende Uhr ist die Hauptaussage der Karte und wird
   entsprechend gross gesetzt. Der Wert kommt aus
   assets/controllers/timer_controller.js und wechselt jede Sekunde - deshalb
   tabular-nums, sonst zappelt die Zeile bei jeder Ziffer. */
.timer-stand {
    margin: 0;
    font-family: var(--schrift-zahlen);
    font-variant-numeric: tabular-nums;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--farbe-petrol);
}

.timer-woran {
    margin: 0.35rem 0 0;
    color: var(--farbe-tinte-gedaempft);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

/* --- Bereichsleiste (Mitarbeiter / Firma / Admin) ---------------------------
   Sitzt zwischen Marke und Hauptnavigation und trennt die drei Sichten. Als
   Segmentleiste und nicht als Reiter: Reiter gehoeren zu einer Seite, hier wird
   der ganze Arbeitsbereich gewechselt. */

.bereiche {
    display: flex;
    gap: 0.15rem;
    padding: 0.15rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--farbe-tinte) 8%, transparent);
}

.bereich {
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    color: var(--farbe-tinte-gedaempft);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 120ms ease, color 120ms ease;
}

.bereich:hover,
.bereich:focus-visible {
    color: var(--farbe-tinte);
}

.bereich-aktiv {
    color: var(--farbe-tinte);
    background-color: var(--farbe-papier-erhoben);
    box-shadow: var(--schatten-karte);
}

/* Gibt es nur einen Bereich, steht dort sein Name statt einer Leiste - ohne
   Schaltflaechen-Anmutung, denn es gibt nichts zu klicken. */
.bereich-fest {
    padding-left: 0;
    color: var(--farbe-tinte-gedaempft);
    background: none;
}

/* Hinweise nach dem Arbeitszeitgesetz auf der Erfassungsseite.
   Messing statt Rost: das ist kein Fehler des Benutzers, sondern ein Hinweis auf
   eine gesetzliche Vorgabe. Die Buchung bleibt gueltig. */
.arbeitszeit-hinweise {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 0.6rem;
    border-left: 3px solid var(--farbe-messing);
    background-color: color-mix(in srgb, var(--farbe-messing) 12%, var(--farbe-papier-erhoben));
}

.arbeitszeit-hinweise > h2 {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
}

.arbeitszeit-hinweise .liste {
    margin: 0;
    font-size: 0.9rem;
}

/* Der Betrag steht neben den Stunden und tritt gegenueber ihnen zurueck: gebucht
   werden Stunden, der Euro-Wert ist die Ableitung daraus. */
.posten-betrag {
    color: var(--farbe-tinte-gedaempft);
}

/* Der einmalig angezeigte Schnittstellen-Schluessel. Umbruch erzwungen, weil er
   69 Zeichen lang ist und auf einem Telefon sonst waagerecht ueberlaeuft - und
   ausgerechnet dieser Wert muss vollstaendig lesbar sein, er wird nie wieder
   angezeigt. */
.token-klartext {
    display: block;
    padding: 0.75rem;
    background: var(--farbe-papier-erhoben);
    border: 1px solid var(--farbe-rand);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
    user-select: all;
}

/* Ankreuzfeld mit Beschriftung in einer Zeile. */
.haken {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
}


/* Die selteneren Verwaltungswege ueber der Firmenuebersicht. Eine Zeile, keine
   Kachelwand: es sind Verweise, keine eigenstaendigen Bereiche - und eine
   Kachelwand haette dieselbe Ueberladung erzeugt, die aus der Kopfleiste
   genommen wurde. */
.weitere-wege {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
}

.weitere-wege a {
    color: var(--farbe-tinte-gedaempft);
    text-decoration: none;
    border-bottom: 1px solid var(--farbe-rand);
    padding-bottom: 1px;
}

.weitere-wege a:hover,
.weitere-wege a:focus-visible {
    color: var(--farbe-tinte);
    border-bottom-color: var(--farbe-messing);
}


.autospeichern-meldung {
    font-size: 0.85rem;
    color: var(--farbe-tinte-gedaempft);
}

.autospeichern-meldung[data-zustand='schlecht'] {
    color: var(--farbe-rost);
}

/* Die Leiste steht auf JEDER Seite und ist nicht der Inhalt, sondern das
   Werkzeug daneben. Sie darf deshalb nur eine Zeile hoch sein: was sie an Hoehe
   nimmt, nimmt sie dem eigentlichen Inhalt, und zwar dauerhaft.

   nowrap ist hier die tragende Zeile. Mit wrap brach die Leiste bei knapp
   zwanzig Bedienelementen auf zwei bis drei Zeilen um und wirkte klobig. Damit
   nowrap nicht ueberlaeuft, geben die Felder darunter nach: die Beschreibung
   schrumpft zuerst (flex-shrink), die festen Groessen sind klein gehalten. */
.trackingleiste {
    position: sticky;
    top: 0;
    z-index: 19;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    background-color: var(--farbe-papier-erhoben);
    border-bottom: 1px solid var(--farbe-rand);
}

.trackingleiste-form {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    min-width: 0;
}

/* Weiter oben sorgt `form > * + *` fuer 0.9rem Abstand zwischen Formularfeldern,
   und `form + form` fuer denselben Abstand zwischen zwei Formularen. Beides ist
   fuer untereinander stehende Formulare richtig und hier falsch: In einer Zeile
   bringt der Container seinen Abstand ueber gap mit.

   Gemessen, bevor diese Ausnahme stand: Das erste Formular war 44.8 Pixel hoch,
   obwohl kein Kind darin ueber 30.4 hinausging - genau die 14.4 Pixel des
   margin-top. Die Leiste kam damit auf 54 statt 39 Pixel, und die Knoepfe sassen
   sieben Pixel ueber den Eingabefeldern.

   Fuer .knopfleiste und .feld-gruppe steht die gleiche Ausnahme bereits oben;
   diese Leiste ist der dritte Fall derselben Art. */
.trackingleiste-form > * + *,
.trackingleiste > form + form {
    margin-top: 0;
}

/* Eingabefelder und Knoepfe tragen sonst die Masse der Formularseiten. In einer
   Leiste, die eine Zeile hoch sein soll, ist das zu viel - hier gilt eine feste,
   knappe Hoehe fuer alles gleichermassen, damit nichts aus der Zeile ragt.

   DIE SELEKTOREN SEHEN UMSTAENDLICH AUS UND MUESSEN ES SEIN. Weiter oben steht

       input:not([type="checkbox"]):not([type="radio"]), select, textarea

   mit width: 100% und grosszuegigem Innenabstand. Das ist Spezifitaet (0,2,1).
   Ein naheliegendes `.trackingleiste :is(input, select, button, .knopf)` kommt
   nur auf (0,2,0) und VERLIERT - gemessen: das Beginn-Feld war dann 736 statt
   136 Pixel breit, frass die ganze Zeile, und die uebrigen Elemente wurden
   darueber hinaus geschoben, bis die Knoepfe im Formular davor lagen.

   Deshalb dieselbe Struktur wie die globale Regel, plus die Container-Klasse. */
.trackingleiste input:not([type="checkbox"]):not([type="radio"]),
.trackingleiste select,
.trackingleiste button,
.trackingleiste .knopf {
    height: 1.9rem;
    padding-block: 0;
    padding-inline: 0.45rem;
    font-size: 0.85rem;
    line-height: 1.9rem;
}

.trackingleiste-uhr {
    font-family: var(--schrift-zahlen);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-width: 4.6rem;
    flex: 0 0 auto;
}

.trackingleiste-uhr-ruht {
    color: var(--farbe-tinte-gedaempft);
}

/* Alle Breiten in dieser Leiste kommen aus flex-basis, nicht aus width. Das ist
   kein Geschmack, sondern der Ausweg aus dem Spezifitaetsproblem oben: Bei einem
   Flex-Element schlaegt flex-basis das geerbte width: 100%, und zwar unabhaengig
   davon, welcher Selektor staerker ist. Eine andere Eigenschaft zu nehmen ist
   billiger, als den Selektorkampf an jeder einzelnen Stelle zu wiederholen.

   Die Beschreibung ist das einzige Feld, das beliebig schrumpfen darf: Sie ist
   das laengste und zugleich das, bei dem ein abgeschnittener Blick am wenigsten
   kostet - der volle Text steht beim Hineinklicken da. */
.trackingleiste-text {
    flex: 1 1 10rem;
    min-width: 5rem;
}

.trackingleiste-projekt {
    flex: 0 1 11rem;
    min-width: 6rem;
}

.trackingleiste-manuell {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Auf schmalen Fenstern passt keine Zeile mit zehn Elementen. Dort darf sie
   wieder umbrechen - und sie klebt nicht oben fest, weil ein grosser Teil des
   kleinen Bildschirms sonst dauerhaft belegt waere.

   Die Grenze liegt bei 58rem und nicht bei den 40rem der uebrigen Oberflaeche.
   Sie ist gemessen, nicht geschaetzt: Im Browser bei abnehmender Fensterbreite
   ueberlappen die Elemente erstmals zwischen 920 und 880 Pixeln, sobald
   Beschreibung und Projekt an ihrer Mindestbreite angekommen sind und nowrap
   nicht mehr nachgeben kann. 58rem sind 928 Pixel und liegen damit knapp
   oberhalb dieser Kante.

   Ein zu spaeter Umbruch faellt nicht auf, solange man nur am grossen Monitor
   nachsieht - kaputt ist er erst im halbierten Fenster. Die erste Fassung stand
   bei 48rem und war dort nachweislich kaputt. */
@media (max-width: 58rem) {
    .trackingleiste {
        position: static;
        flex-wrap: wrap;
    }

    .trackingleiste-form {
        flex-wrap: wrap;
    }

    .trackingleiste-manuell {
        margin-left: 0;
    }
}

/* Datum und Uhrzeit in einem Feld brauchen Platz - aber einen festen, nicht den
   ganzen Rest der Zeile. */
.trackingleiste-beginn {
    flex: 0 0 9.5rem;
}

/* Der Stern war 28 mal 21 Pixel gross - gemeldet am 09.09.2026 als "Favoriten
   funktion hat mobile nicht funktioniert", und im Browser nachgemessen. Apple
   nennt 44 mal 44 als Untergrenze fuer ein Tippziel, Google 48 mal 48.
   2.75rem sind 44 Pixel.

   Das Zeichen bleibt gleich gross; das ZIEL waechst. Deshalb min-width und
   min-height statt einer groesseren Schrift - ein riesiger Stern saehe in einer
   Tabellenzeile falsch aus. */
.knopf-stern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
    background: none;
    border: none;
    color: var(--farbe-messing);
    cursor: pointer;
}

.knopf-stern[aria-pressed='false'] {
    color: var(--farbe-tinte-gedaempft);
}

.trackingleiste-pause {
    flex: 0 0 auto;
    font-size: 0.8rem;
    white-space: nowrap;
    color: var(--farbe-tinte-gedaempft);
}

/* Ein Knopf, der nur ein Zeichen traegt.
   
   MINDESTENS 44 MAL 44 PIXEL (2.75rem), weil ein Zeichen von sich aus kein
   Tippziel ergibt. Derselbe Fehler wie beim Favoritenstern: 09.09.2026 gemeldet,
   im Browser nachgemessen, 28 mal 21 Pixel. */
.knopf-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    /* Polsterung weg und line-height 1, damit die Box genau min-width/min-height
       gross ist. Das allein zentriert NICHT - nachgemessen: Ein Schriftzeichen
       blieb damit exakt gleich weit aus der Mitte. Dafuer sorgt die gezeichnete
       Form im Knopf, siehe .symbol-kreuz. */
    padding: 0;
    line-height: 1;
    text-align: center;
}

/* In der Trackingleiste darf er auf BREITEN Schirmen kompakt sein: Dort wird
   mit der Maus geklickt, und die trifft auch 1.9rem. Unterhalb von 58rem
   bricht die Leiste ohnehin um - dann ist Platz fuer das volle Tippziel, und
   dort wird mit dem Finger bedient. */
@media (min-width: 58rem) {
    .trackingleiste .knopf-symbol {
        min-width: 1.9rem;
        min-height: 1.9rem;
        width: 1.9rem;
    }
}

/* --- Projektauswahl mit eigener Vorschlagsliste ---------------------------
   Die native <datalist> war auf dem Handy unbrauchbar: Vorschläge erscheinen
   dort bestenfalls als schmale Leiste über der Tastatur, oft gar nicht, und
   ohne vorher zu tippen kommt man an die Liste überhaupt nicht heran.

   Diese Liste geht beim Antippen auf und zeigt dann alles. Die Einträge sind
   bewusst hoch genug für einen Daumen — 2.75rem ist die untere Grenze, ab der
   ein Ziel zuverlässig getroffen wird. */

.projektfeld {
    position: relative;
}

.projektfeld > input[type='text'] {
    width: 100%;
}

.projektfeld-liste {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    max-height: 15rem;
    margin: 0.15rem 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    background-color: var(--farbe-papier);
    border: 1px solid var(--farbe-rand);
    border-radius: 0.5rem;
    box-shadow: 0 6px 24px rgb(0 0 0 / 12%);
    /* Damit die Liste auf dem Handy mit Schwung scrollt und nicht klemmt. */
    -webkit-overflow-scrolling: touch;
}

.projektfeld-liste[hidden] {
    display: none;
}

.projektfeld-liste li {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    cursor: pointer;
    border-bottom: 1px solid var(--farbe-rand);
}

.projektfeld-liste li:last-child {
    border-bottom: none;
}

.projektfeld-liste li:hover,
.projektfeld-liste li.markiert {
    background-color: var(--farbe-papier-erhoben);
}

/* In der Trackingleiste ist der Platz knapp; dort darf die Liste breiter sein
   als das Feld, damit lange Projektnamen lesbar bleiben. */
.trackingleiste .projektfeld-liste {
    min-width: 16rem;
}

@media (max-width: 48rem) {
    /* Auf dem Handy so breit wie möglich - der Name samt Kunde ist lang. */
    .projektfeld-liste {
        min-width: 0;
        max-height: 60vh;
    }
}

/* Das Ankreuzfeld der Anmeldung: Text und Kästchen auf einer Linie, der
   Hinweis darunter. */
.feld-kreuz {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0;
    font-size: 0.95rem;
}

.feld-kreuz small {
    grid-column: 2;
    font-size: 0.8rem;
    color: var(--farbe-tinte-gedaempft);
}

/* Überschrift und die eine Handlung, die auf der Seite ansteht, in einer Zeile.
   Auf schmalen Fenstern rutscht der Knopf unter die Überschrift. */
.seitenkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.seitenkopf h1 {
    margin: 0;
}

/* Die beiden Handgriffe am Konto: Passwort zurücksetzen und löschen. */
.benutzer-aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--farbe-rand);
}

.benutzer-aktionen form {
    margin: 0;
}

.benutzer-aktionen .hinweis {
    margin: 0;
    font-size: 0.8rem;
}

/* Betragsfelder: rechtsbündig und schmal, Zahlen gehören untereinander. */
.feld-betrag {
    max-width: 7rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Auf dem Telefon war die Projektliste 712 Pixel breit bei 390 Pixel Schirm -
   man musste seitlich scrollen, um den Favoritenstern ueberhaupt zu sehen. Das
   war die zweite Haelfte desselben gemeldeten Fehlers.

   Statt die Tabelle zu quetschen, verliert sie auf schmalen Schirmen die
   Spalten, die dort nicht gebraucht werden: Der Stundensatz wird selten
   geaendert und steht am Schreibtisch zur Verfuegung. Name, Stern und Speichern
   bleiben - das ist, was man unterwegs tut. */
@media (max-width: 48rem) {
    .tabelle-projekte :is(th, td):nth-child(2),
    .tabelle-projekte :is(th, td):nth-child(3) {
        display: none;
    }
}

/* --- Balkendiagramm ------------------------------------------------------
   Selbst gezeichnet, ohne Fremdbibliothek: Ein Balken ist ein Rechteck. Die
   Farben kommen aus der Palette, damit das Bild in jedem Theme sitzt. */

.balken {
    display: block;
    width: 100%;
    max-width: 45rem;
    height: auto;
    margin: 0.5rem 0 0.25rem;
}

.balken-linie {
    stroke: var(--farbe-rand);
    stroke-width: 1;
}

.balken-soll {
    fill: var(--farbe-rand);
}

.balken-ist {
    fill: var(--farbe-messing);
}

.balken-name {
    fill: var(--farbe-tinte-gedaempft);
    font-size: 11px;
}

.balken-legende {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1rem;
    font-size: 0.8rem;
    color: var(--farbe-tinte-gedaempft);
}

.balken-punkt {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0.15rem;
}

.balken-punkt-ist {
    background-color: var(--farbe-messing);
}

.balken-punkt-soll {
    background-color: var(--farbe-rand);
    margin-left: 0.6rem;
}

/* Zwei Felder in einer Zelle: Stunden über Betrag. Nebeneinander wären sie in
   der ohnehin breiten Projekttabelle nicht unterzubringen. */
.zelle-budget {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* NEBENEINANDER STATT UEBEREINANDER. Zwei gestapelte Felder verdoppelten die
   Zeilenhoehe der ganzen Tabelle, und bei "Wartung und Support" ragte der Block
   sichtbar ueber die Zeilengrenze hinaus - am 11.09.2026 im Bild nachgewiesen.
   Nebeneinander passen sie in eine Zeilenhoehe; wird es zu eng, brechen sie um. */
.zelle-budget .feld-betrag {
    flex: 1 1 6rem;
    min-inline-size: 0;
}

/* Budgetfortschritt in der Projektauswertung (N6). Der Balken ergaenzt die Zahl
   daneben, er ersetzt sie nicht - vorgelesen wird die Zahl. */
.posten-zeile-budget {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-top: 0;
}

.budget-balken {
    display: block;
    flex: 1 1 auto;
    max-width: 14rem;
    height: 0.45rem;
    border-radius: 0.25rem;
    background-color: var(--farbe-rand);
    overflow: hidden;
}

.budget-balken-fuellung {
    display: block;
    height: 100%;
    background-color: var(--farbe-messing);
}

.budget-balken-voll {
    background-color: var(--farbe-rost);
}

.budget-text {
    color: var(--farbe-tinte-gedaempft);
}

.budget-text-warnung {
    color: var(--farbe-rost);
    font-weight: 600;
}

/* Nur fuer Vorleseprogramme: sichtbar fuer die Technik, unsichtbar auf dem Schirm.
   Gebraucht fuer Spaltenueberschriften, die als Text die Tabelle stoeren wuerden. */
.nur-vorleser {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 48rem) {
    .tabelle-projekte :is(th, td):nth-child(4) {
        display: none;
    }
}

/* Zustandsmarke in Listen, etwa "Entwurf" statt einer Rechnungsnummer (N7).
   Bewusst kein Rot: Ein Entwurf ist kein Fehler, sondern ein Zwischenstand. */
.marke {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background-color: var(--farbe-rand);
    color: var(--farbe-tinte-gedaempft);
}

.marke-entwurf {
    background-color: var(--farbe-papier-erhoben);
    border: 1px solid var(--farbe-rand);
}

/* Gezeichnetes Kreuz fuer Symbolknoepfe. Die Striche fuellen den viewBox
   symmetrisch, damit die Mitte der Form die Mitte des Knopfes ist - unabhaengig
   davon, welche Schrift geladen wurde. */
.symbol-kreuz {
    display: block;
    width: 0.9rem;
    height: 0.9rem;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
}

/* Die Wochensumme steht ueber der Liste und ist die Zahl, fuer die man herschaut.
   Etwas groesser als der Fliesstext, damit man sie findet, ohne zu suchen. */
.zusammenfassung-woche {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
}

/* Vorübergehende Anzeige des in Kimai laufenden Timers (10.09.2026), solange in
   beiden Systemen parallel getrackt wird. Bewusst zurückhaltend: Es ist eine
   fremde Zeit, nicht unsere - sie soll informieren und nicht mit der eigenen
   Erfassung konkurrieren. */
.karte-kimai {
    border-left: 3px solid var(--farbe-petrol);
}

/* Modusschalter in der Trackingleiste: Sync mit Kimai an oder aus. Zurückhaltend,
   weil er selten angefasst wird und nicht mit Start und Stopp konkurrieren soll. */
.trackingleiste-sync {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--farbe-tinte-gedaempft);
    white-space: nowrap;
}

/* Übersicht Woche/Monat auf der Erfassungsseite.

   Der TAGESKOPF trägt die Trennung, nicht die Summenzeile am Ende: Beim Lesen
   einer Liste sucht das Auge nach oben, wo etwas anfängt. Deshalb eine eigene
   Zeile je Tag mit abgesetzter Fläche und kräftigerer Schrift. */
.uebersicht-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.zeile-tagkopf > * {
    background-color: var(--farbe-papier-erhoben);
    border-top: 2px solid var(--farbe-rand);
    font-weight: 600;
    text-align: left;
}

.spalte-dauer {
    text-align: right;
    white-space: nowrap;
}

/* Die Wochen- oder Monatssumme steht über der Spalte, die sie zusammenfasst. */
.spalte-summe {
    display: block;
    font-weight: 700;
    font-size: 1rem;
}

/* ---------------------------------------------------------------------------
   TIPPZIELE: mindestens 24 mal 24 Pixel
   ---------------------------------------------------------------------------
   Am 11.09.2026 im Browser gemessen, auf JEDER Seite und in JEDER Breite:
   "Profil" 34x22, "Einstellungen" 91x22, "Manuell" 47x19, das Hinweisband
   242x19, "Kundenverwaltung" 124x17, die Kaestchen 18x18.

   WCAG 2.2 verlangt 24x24 CSS-Pixel (Erfolgskriterium 2.5.8). Das betrifft
   nicht nur Telefone: Ein 17 Pixel hohes Ziel trifft auch mit der Maus nur, wer
   eine ruhige Hand hat.

   AUSGENOMMEN SIND VERWEISE MITTEN IM FLIESSTEXT - dort erlaubt die Norm es
   ausdruecklich, weil die Zeilenhoehe die Groesse vorgibt und ein aufgeblasener
   Verweis den Absatz zerreissen wuerde. Hier stehen deshalb nur Verweise, die
   FUER SICH stehen: Navigation, Hinweisbaender, Kopf- und Fusszeile.
   --------------------------------------------------------------------------- */

.kopfleiste-navigation a,
.kopfleiste-benutzer a,
.trackingleiste-manuell,
.hinweis-offene-tage a,
/* JEDER VERWEIS, DER ALLEIN IN EINEM ABSATZ STEHT. Die erste Fassung dieser
   Regel nannte nur ".karte > p.hinweis > a" und liess damit zwei der sechs
   gemeldeten Verweise unberuehrt: "Kundenverwaltung" (124x17) steht in einem
   Absatz ausserhalb einer Karte, "Zeiten aus Clockify uebernehmen" (236x19) in
   einem Absatz ganz ohne Klasse. Nachgemessen am 11.09.2026 - die Regel war zu
   eng, nicht der Befund falsch.

   Ein Verweis, der allein in einem Absatz steht, ist immer ein eigenstaendiges
   Ziel und nie ein Verweis im Fliesstext. */
p > a:only-child {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding-block: 0.15rem;
}

/* Die Kaestchen selbst. 18 Pixel sind die Vorgabe des Browsers; sie stammt aus
   einer Zeit, in der niemand mit dem Finger bedient hat. */
input[type='checkbox'],
input[type='radio'] {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    accent-color: var(--farbe-messing);
}

/* Ein Kaestchen ohne Abstand zu seiner Beschriftung klebt; mit zu viel Abstand
   gehoert es optisch nicht mehr dazu. */
label > input[type='checkbox'],
label > input[type='radio'] {
    margin-inline-end: 0.4rem;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   PROJEKTTABELLE AUF SCHMALEN SCHIRMEN: gestapelt statt gequetscht
   ---------------------------------------------------------------------------
   Am 11.09.2026 bei 360 Pixel nachgemessen: Die Namensfelder waren auf "On",
   "Wa", "We" zusammengedrueckt, und "Speichern" ragte ueber den Rand. Spalten
   auszublenden allein reicht nicht - solange die Zeile ein Tabellenraster
   bleibt, teilen sich die verbliebenen Spalten die Breite nach Gutduenken.

   Gestapelt bekommt jedes Feld die volle Breite. Der Name steht oben, darunter
   der Kunde, und Stern, Haken und Speichern sitzen in einer Reihe. Das ist
   dieselbe Anordnung, die man auch auf Papier waehlen wuerde.

   Stundensatz und Budget bleiben unterwegs verborgen: Sie werden selten
   geaendert, und jedes zusaetzliche Feld ist eine Bildschirmlaenge mehr.
   --------------------------------------------------------------------------- */

@media (max-width: 48rem) {
    .tabelle-projekte,
    .tabelle-projekte tbody,
    .tabelle-projekte tr,
    .tabelle-projekte td {
        display: block;
        inline-size: 100%;
    }

    .tabelle-projekte thead {
        display: none;
    }

    /* Der Kunde darf wieder erscheinen - gestapelt ist dafuer Platz. */
    .tabelle-projekte :is(th, td):nth-child(2) {
        display: block;
    }

    .tabelle-projekte tr:not(.zeile-kundenkopf) {
        padding: 0.75rem;
        border-block-end: 1px solid var(--farbe-rand);
    }

    .tabelle-projekte tr.zeile-kundenkopf {
        display: block;
        padding: 0.75rem 0.75rem 0.25rem;
    }

    .tabelle-projekte tr.zeile-kundenkopf th {
        display: block;
        inline-size: 100%;
    }

    .tabelle-projekte td {
        padding-inline: 0;
        padding-block: 0.2rem;
    }

    .tabelle-projekte td input[type='text'] {
        inline-size: 100%;
    }

    /* Stern, Haken und Speichern in eine Reihe: drei kleine Dinge, die
       zusammengehoeren, brauchen keine drei Zeilen. */
    .tabelle-projekte td:nth-last-child(-n+3) {
        display: inline-block;
        inline-size: auto;
        vertical-align: middle;
        margin-inline-end: 0.75rem;
    }
}

/* ---------------------------------------------------------------------------
   FELDBREITEN: so breit wie ihr Inhalt, nicht wie die Seite
   ---------------------------------------------------------------------------
   Am 11.09.2026 gemessen: Das Feld "Pause (Minuten)" war 1064 Pixel breit - fuer
   eine zweistellige Zahl. Ein Feld, das viel breiter ist als sein Inhalt, luegt
   ueber die erwartete Eingabe und laesst das Formular zerfasern.

   Der Fliesstext der Anwendung bricht bei rund 65 Zeichen um; Formularfelder
   duerfen nicht deutlich breiter sein, sonst laeuft das Auge beim Springen
   zwischen Beschriftung und Feld ins Leere.
   --------------------------------------------------------------------------- */

.formular input[type='text'],
.formular input[type='email'],
.formular input[type='password'],
.formular input[type='date'],
.formular input[type='time'],
.formular input[type='datetime-local'],
.formular input[type='number'],
.formular select {
    max-inline-size: 26rem;
}

/* Beschreibungen duerfen breit sein - dort steht Fliesstext. */
.formular textarea,
.formular input[name='beschreibung'] {
    max-inline-size: 44rem;
}

/* Zahlenfelder brauchen wenig: Minuten, Stundensaetze, Betraege. */
.formular input[name='pauseMinuten'],
.formular input[inputmode='decimal'] {
    max-inline-size: 12rem;
}

/* In Tabellenzeilen gilt die Grenze nicht - dort gibt die Spalte die Breite vor. */
.tabelle .formular input,
table .formular input,
table input {
    max-inline-size: none;
}

/* Die Anmeldekarte ist selbst schmal; dort waere eine zweite Grenze doppelt. */
.karte-anmeldung .formular input {
    max-inline-size: none;
}

/* ---------------------------------------------------------------------------
   NAVIGATION UMBRECHEN STATT VERSTECKEN
   ---------------------------------------------------------------------------
   Die Leiste scrollte seitlich, mit `scrollbar-width: none`. Damit war bei 1440
   "Einstellu…" abgeschnitten und bei 360 blieb vom letzten Punkt nur ein "M" -
   ohne jeden Hinweis, dass dort noch etwas ist. Versteckter Inhalt ohne
   Anzeichen ist fuer Tastatur und Vorleseprogramm erreichbar, fuer das Auge
   aber nicht: Man sucht nicht, was man nicht vermutet.

   Umbrechen kostet eine zweite Zeile und zeigt dafuer alles.
   --------------------------------------------------------------------------- */

.kopfleiste-navigation {
    overflow-x: visible;
}

.kopfleiste-navigation ul {
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

/* ---------------------------------------------------------------------------
   TRACKINGLEISTE: das Beschreibungsfeld darf wachsen
   ---------------------------------------------------------------------------
   Gemessen am 11.09.2026: "Woran arbeiten Sie?" war auf "Woran arb" gestutzt,
   die Projektsuche auf "Projekt such". Beides sind die Felder, in die man
   tatsaechlich tippt - und beide waren schmaler als ihr eigener Platzhalter.
   Ein Platzhalter, den man nicht zu Ende lesen kann, ist keine Hilfe.

   Auf schmalen Schirmen bricht die Leiste jetzt um, statt alles zu quetschen.
   --------------------------------------------------------------------------- */

.trackingleiste-form input[name='beschreibung'] {
    flex: 1 1 14rem;
    min-inline-size: 0;
}

.trackingleiste-form input[name='projektId'],
.trackingleiste-form input[list] {
    flex: 1 1 10rem;
    min-inline-size: 0;
}

@media (max-width: 48rem) {
    .trackingleiste-form {
        flex-wrap: wrap;
        row-gap: 0.35rem;
    }
}

/* ---------------------------------------------------------------------------
   AUFKLAPPBARE ABSCHNITTE
   ---------------------------------------------------------------------------
   Der Browser bringt Aufklappen von sich aus mit - Tastatur, Vorleseprogramm und
   Suchfunktion kennen es. Deshalb <details> und keine eigene Mechanik mit
   Skript: Selbstgebautes Aufklappen ist die haeufigste Stelle, an der eine
   Anwendung fuer Tastaturbedienung unbrauchbar wird.
   --------------------------------------------------------------------------- */

.aufklappbar > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    cursor: pointer;
    list-style: none;
}

.aufklappbar > summary::-webkit-details-marker {
    display: none;
}

/* Ein eigenes Zeichen statt des Browserdreiecks: Es dreht sich beim Aufklappen
   und zeigt damit den Zustand, ohne dass man ihn vorlesen muesste. */
.aufklappbar > summary::before {
    content: '▸';
    display: inline-block;
    color: var(--farbe-messing);
    transition: transform 0.15s ease;
}

.aufklappbar[open] > summary::before {
    transform: rotate(90deg);
}

.aufklappbar > summary h2 {
    margin: 0;
}

.aufklappbar > summary small {
    font-family: var(--schrift-text);
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--farbe-tinte-gedaempft);
}

@media (prefers-reduced-motion: reduce) {
    .aufklappbar > summary::before {
        transition: none;
    }
}

/* Die drei Zahlen, an denen ein Zusammenfuehren entschieden wird. Nebeneinander,
   damit sie sich vergleichen lassen, und umbrechend fuer schmale Anzeigen. */
.kennzahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.kennzahlen dd {
    margin: 0;
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
}

/* Ein Abbrechen-Verweis NEBEN einem Knopf ist ein eigenstaendiges Bedienelement,
   kein Wort in einem Satz - die Ausnahme fuer Fliesstext aus WCAG 2.5.8 gilt hier
   nicht. Gemessen am 12.09.2026 auf der Zusammenfuehren-Seite: 78x19 Pixel.
   Die aeltere Regel traf ihn nicht, weil sie p > a:only-child verlangt und hier
   ein Knopf danebensteht. */
.knopfleiste a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.5rem;
}

/* Reiter zwischen Rechnungen und Angeboten. Ein Ueberpunkt statt zweier
   Menuepunkte - Vorschlag von Alexander am 12.09.2026. */
.reiter ul {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    /* --farbe-rand und nicht ein erfundener Name: Nur ein Wert, den es wirklich
       gibt, laesst sich von einem Theme ueberschreiben. Ein Ersatzwert haette
       das verdeckt - es saehe richtig aus und waere tot. */
    border-bottom: 1px solid var(--farbe-rand);
}

.reiter a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 1rem;
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

/* Der aktive Reiter traegt aria-current - die Farbe haengt an der Bedeutung und
   nicht an einer zusaetzlichen Klasse, die jemand vergessen kann. */
.reiter a[aria-current='page'] {
    border-bottom-color: var(--farbe-messing);
    font-weight: 600;
}

/* Knoepfe in einer Leiste gleich breit. Jeder steckt in einem eigenen Formular;
   ohne Mindestbreite wird jeder so breit wie sein Wort, und das sieht aus wie
   ein Versehen. Befund von Alexander am 12.09.2026. */
.knopfleiste-gleich .knopf {
    min-width: 9rem;
    justify-content: center;
}

/* Sagt, ob ein Angebot versandfertig ist. "Verwirrend ob ein angebot schon
   fertig" - eine Liste aus Zahlen beantwortet das nicht. */
.hinweis-warnung,
.hinweis-fertig {
    margin: 0 0 1rem;
    padding: .5rem .75rem;
    border-left: 4px solid;
    font-size: .95rem;
}

.hinweis-warnung {
    border-left-color: #a3312f;
}

.hinweis-fertig {
    border-left-color: #2f7a3d;
}

/* Der Baukasten fuers Blatt (N12.7).

   LINKS DIE BAUSTEINE, RECHTS DAS BLATT. Auf dem Handy untereinander: Zwei
   Spalten auf 390 Pixeln waeren zwei unlesbare Spalten. */
/* AUF DEM HANDY STEHT DAS BLATT OBEN (N12.9).

   Alexander am 13.09.2026: "beim klicken springt der browser und dann ist es
   wieder doof."

   Der Grund: Die Einstellungskaesten standen UEBER dem Blatt. Klappte einer auf,
   wuchs alles darueber - und das Blatt rutschte unter dem Finger weg. Jetzt
   liegt das Blatt zuoberst; was darunter aufklappt, bewegt es nicht mehr. */
.baukasten {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.baukasten-buehne-spalte { order: -1; }

@media (min-width: 60rem) {
    /* Nebeneinander steht das Blatt wieder rechts, wo man es erwartet. */
    .baukasten-buehne-spalte { order: 0; }
}

@media (min-width: 60rem) {
    .baukasten { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}

.baukasten-spalte { min-width: 0; }
/* Das Blatt bleibt beim Scrollen stehen - aber erst ab Tabletbreite. Auf dem
   Handy liegen die Spalten untereinander, und ein klebendes Blatt verdeckte dort
   die Bausteine darunter. */
@media (min-width: 60rem) {
    .baukasten-buehne-spalte { position: sticky; top: 1rem; align-self: start; }
}

.bausteinliste {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.bausteinknopf {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .4rem .6rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 4px;
    background: var(--farbe-papier-erhoben);
    color: var(--farbe-tinte);
    cursor: pointer;
    text-align: left;
    font: inherit;
}

/* Der gewaehlte Baustein ist der, dessen Kasten offen ist - das muss man sehen. */
.bausteinknopf-gewaehlt {
    border-color: var(--farbe-messing);
    box-shadow: inset 0 0 0 1px var(--farbe-messing);
}

/* Nicht auf dem Blatt: sichtbar, aber zurueckgenommen. Ganz ausblenden hiesse,
   man findet ihn nicht wieder. */
.bausteinknopf-aus { opacity: .55; }

.bausteinname { font-size: .9rem; }
.bausteinart { font-size: .65rem; color: var(--farbe-tinte-gedaempft); }

/* Anzahl-Marke vor einer zusammengefassten Tagesgruppe (z.B. „2" Einträge mit
   gleicher Beschreibung) und die aufgeklappte Einzelliste darunter. */
.anzahl-marke {
    display: inline-block;
    min-width: 1.4em;
    padding: .05rem .4rem;
    border-radius: 1em;
    background: var(--farbe-messing);
    color: var(--farbe-papier);
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
}
.gruppe-einzeln {
    margin: .4rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .6rem;
}
.gruppe-einzeln > li {
    border-top: 1px solid var(--farbe-rand);
    padding-top: .5rem;
}

/* Zeigt im Editor, ob der bearbeitete Aufbau noch die Vorgabe ist (ruhig,
   graugetönt) oder schon geändert (Rost, damit es auffällt). */
.aufbau-vorgabe,
.aufbau-geaendert {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .45rem;
    border-radius: .7rem;
    font-size: .7rem;
    font-weight: 600;
}
.aufbau-vorgabe {
    background: var(--farbe-papier-erhoben);
    color: var(--farbe-tinte-gedaempft);
    border: 1px solid var(--farbe-rand);
}
.aufbau-geaendert {
    background: var(--farbe-papier-erhoben);
    color: var(--farbe-rost);
    border: 1px solid var(--farbe-rost);
}

.bausteinkasten {
    border: 1px solid var(--farbe-rand);
    border-radius: 4px;
    padding: .75rem;
    margin-bottom: .75rem;
    background: var(--farbe-papier-erhoben);
}

.bausteinkasten h3 { margin: 0 0 .5rem; font-size: .95rem; }

.baustein-felder {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .35rem .6rem;
    align-items: center;
    font-size: .85rem;
}

.baustein-felder input,
.baustein-felder select { width: 100%; }

.baustein-schalter { display: block; font-size: .85rem; margin: .25rem 0; }
.bausteinkasten textarea { width: 100%; }

/* DIE BUEHNE: ein A4-Blatt, in dem das Probeblatt steckt.

   HOECHSTENS IN ORIGINALGROESSE (N14): Auf einem breiten Bildschirm zog sich das
   Blatt sonst ueber die ganze Spalte und wurde VERGROESSERT - unscharf, und die
   Griffe lagen weit auseinander. Alexander am 14.09.2026: "Auf dem Desktop sieht
   es doof aus." 793,7 px sind 210 mm bei 96 dpi, also genau ein A4-Blatt. */
.blatt-buehne {
    position: relative;
    aspect-ratio: 210 / 297;
    width: 100%;
    max-width: 793.7px;
    margin-inline: auto;
    border: 1px solid var(--farbe-rand);
    box-shadow: var(--schatten-karte);
    background: #fff;
    overflow: hidden;
    touch-action: none;
}

/* Der Rahmen ist genau ein A4-Blatt breit (210 mm = 793,7 px bei 96 dpi).

   DIE VERKLEINERUNG RECHNET JAVASCRIPT, nicht CSS (N14).

   Hier stand einmal transform: scale(min(1, calc(100cqw / 793.7px))). Eine
   Laenge durch eine Laenge zu teilen und das in min() zu stecken, verstehen
   nicht alle Browser gleich - und wo es scheitert, faellt die GANZE
   Transformation weg. Das Blatt wurde dann in Originalgroesse gerendert, passte
   nicht in die Buehne und wurde abgeschnitten: Alexander am 14.09.2026 mit drei
   Bildern, "Mobile ist es auch jetzt falsch gebaut".

   Gemessene Pixel koennen das nicht. Ohne JavaScript bleibt das Blatt
   unverkleinert - sichtbar, nur gross. Das ist der bessere Rueckfall. */
.blatt-probe {
    position: absolute;
    top: 0;
    left: 0;
    width: 793.7px;
    height: 1122.5px;
    border: 0;
    transform-origin: top left;
}

/* DER RAHMEN UM DEN GEWAEHLTEN BAUSTEIN (N12.8).

   Alexander am 13.09.2026: "wenn man erst draufklickt, dann kommt dieser
   Griffbereich da". Vorher lagen fuenf Chips dauerhaft auf dem Blatt - das sah
   nie nach Papier aus. */
.ziehschatten {
    position: absolute;
    box-sizing: border-box;
    border: 2px dashed var(--farbe-messing);
    background: rgba(163, 129, 47, .12);
    border-radius: 2px;
    pointer-events: none;
    will-change: transform;
    z-index: 2;
}

/* Die Platzhalterliste steht neben dem Textfeld, nicht als Wand davor. */
.platzhalterliste { margin: .4rem 0; font-size: .8rem; }
.platzhalterliste summary { cursor: pointer; color: var(--farbe-tinte-gedaempft); }
.platzhalterliste dl { margin: .4rem 0 0; display: grid; gap: .15rem; }
.platzhalterliste dl div { display: flex; gap: .5rem; }
.platzhalterliste dt { min-width: 6.5rem; }
.platzhalterliste code { font-family: var(--schrift-zahlen); }
.platzhalterliste dd { margin: 0; color: var(--farbe-tinte-gedaempft); }

/* Die Liste der Bausteine auf dem Blatt: auswaehlen links, entfernen rechts. */
.bausteinzeile { display: flex; align-items: stretch; gap: .3rem; width: 100%; }
.bausteinzeile .bausteinknopf { flex: 1; }
.bausteinweg { padding: 0 .6rem; line-height: 1; }

/* Die benannten Aufbauten (N13): umschalten, kopieren, umbenennen, loeschen. */
.aufbauten { margin-bottom: 1rem; }
.aufbauten h2 { margin-bottom: .4rem; }
.aufbau-werkzeuge { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.aufbau-formular { display: flex; gap: .3rem; align-items: center; }
.aufbau-formular input[type="text"] { width: 10rem; }

/* Der Tagesablauf der Automatik (N14): je Zeile eine Uhrzeit und was geschieht. */
.tagesablauf { border: 1px solid var(--farbe-rand); border-radius: 4px; padding: .75rem; }
.tagesablauf-zeile { display: flex; gap: .5rem; align-items: center; margin: .3rem 0; }
.tagesablauf-zeile input[type="time"] { width: 8rem; }

/* Nur fuer Vorleseprogramme sichtbar.

   Die Zeilen des Tagesablaufs brauchen je Feld eine Beschriftung - sonst hoert
   man "Uhrzeit, Auswahl" ohne zu wissen, zu welcher Zeile das gehoert. Sichtbar
   waere dieselbe Beschriftung achtmal untereinander nur Laerm. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Die Karte fuer Bilder und Zuruecksetzen (N14).

   Alexander am 14.09.2026: "unten bilder und zurücksetzen hat ganze breite nicht
   nur content bereich." Eine Zeile Erklaerung ueber 1100 Pixel liest niemand zu
   Ende, und ein Dateifeld in dieser Breite sieht aus wie ein Fehler.

   DIE GRENZE STEHT AN DER KARTE, nicht an den Feldern: So bleiben Beschriftung,
   Feld und Erklaerung zusammen - eine Spalte, kein Band ueber den Bildschirm. */
.karte-schmal {
    max-width: 44rem;
}

.karte-schmal .formular input[type="file"],
.karte-schmal .formular input[type="text"] {
    max-width: 100%;
}

/* Beschriftung ueber das Feld, nicht daneben: Nebeneinander wandert das Feld bei
   langen Beschriftungen nach rechts aus dem Blick. */
.karte-schmal .formular label {
    display: block;
    margin-bottom: .25rem;
}