/* ---------------------------------------------------------------
   Termintool Heizungswartung
   Handgeschriebenes CSS, kein Framework, kein Build-Step.

   Grundsaetze der Buchungsstrecke:
   - grosse Schaltflaechen, Mindesthoehe 56px, auch mit Handschuhen bedienbar
   - hoher Kontrast, Schriftgroesse ab 18px, Zielgruppe ist gemischt bis alt
   - keine Animationen, keine Modalfenster
   - funktioniert ohne JavaScript
   --------------------------------------------------------------- */

:root {
    --farbe-text: #1a1a1a;
    --farbe-grau: #5a5a5a;
    --farbe-linie: #c9c9c9;
    --farbe-flaeche: #f4f4f4;
    --farbe-weiss: #ffffff;
    --farbe-primaer: #12508f;
    --farbe-primaer-dunkel: #0d3c6c;
    --farbe-erfolg: #1c6b34;
    --farbe-warnung: #8a5a00;
    --farbe-fehler: #a11b1b;
    --radius: 6px;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--farbe-text);
    background: var(--farbe-flaeche);
    line-height: 1.5;
}

body.bewohner { font-size: 18px; }
body.intern   { font-size: 16px; }

/* ---------------------------------------------------------- Kopf */

.kopf {
    background: var(--farbe-primaer);
    color: #fff;
    padding: 14px 16px;
}

.kopf-inhalt {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
}

.kopf-titel {
    font-size: 1.1em;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.kopf-zusatz { color: #d7e4f2; }

.nav {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.nav a {
    color: #e8f0f8;
    text-decoration: none;
    padding: 4px 0;
}

.nav a:hover { text-decoration: underline; }
.nav-abmelden { opacity: .8; }

.testbanner {
    background: #ffe8b0;
    border-bottom: 2px solid #d9a500;
    color: #4a3600;
    padding: 8px 16px;
    text-align: center;
    font-size: .95em;
}

/* ------------------------------------------------------- Inhalt */

.inhalt {
    max-width: 640px;
    margin: 0 auto;
    padding: 16px 16px 48px;
}

.inhalt-breit  { max-width: 1200px; }
.inhalt-schmal { max-width: 420px; padding-top: 48px; }

.karte {
    background: var(--farbe-weiss);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
}

h1 { font-size: 1.5em; margin: 0 0 4px; }
h2 { font-size: 1.2em; margin: 24px 0 8px; }
h3 { font-size: 1.05em; margin: 16px 0 6px; }

p { margin: 0 0 12px; }

.hinweis { color: var(--farbe-grau); font-size: .95em; }

/* -------------------------------------------------- Schrittzahl */

.schritte {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    font-size: .9em;
    color: var(--farbe-grau);
}

.schritt {
    flex: 1;
    padding: 6px 4px;
    text-align: center;
    border-bottom: 4px solid var(--farbe-linie);
}

.schritt-aktiv {
    color: var(--farbe-primaer);
    font-weight: 700;
    border-bottom-color: var(--farbe-primaer);
}

.schritt-fertig { border-bottom-color: var(--farbe-erfolg); }

/* ------------------------------------------------------ Formular */

label { display: block; font-weight: 600; margin: 16px 0 6px; }

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
    width: 100%;
    min-height: 52px;
    padding: 12px;
    font-size: 1em;
    font-family: inherit;
    color: var(--farbe-text);
    background: var(--farbe-weiss);
    border: 2px solid var(--farbe-linie);
    border-radius: var(--radius);
}

textarea { min-height: 90px; resize: vertical; }

input:focus, select:focus, textarea:focus {
    outline: 3px solid #9cc0e6;
    border-color: var(--farbe-primaer);
}

.pflicht { color: var(--farbe-fehler); }

/* Grosse Auswahlkacheln statt Radiobuttons in Miniaturgroesse */

.auswahl { display: grid; gap: 10px; margin-top: 8px; }

.auswahl-zwei { grid-template-columns: repeat(2, 1fr); }
.auswahl-drei { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 380px) {
    .auswahl-drei { grid-template-columns: repeat(2, 1fr); }
}

.kachel {
    position: relative;
    display: block;
    margin: 0;
    font-weight: 600;
}

.kachel input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.kachel > span {
    display: block;
    min-height: 56px;
    padding: 14px 10px;
    text-align: center;
    background: var(--farbe-weiss);
    border: 2px solid var(--farbe-linie);
    border-radius: var(--radius);
}

.kachel input:checked + span {
    background: var(--farbe-primaer);
    border-color: var(--farbe-primaer);
    color: #fff;
}

.kachel input:focus + span { outline: 3px solid #9cc0e6; }

.kachel input:disabled + span {
    background: #ececec;
    color: #8d8d8d;
    border-color: #dcdcdc;
}

/* Zeitfenster-Auswahl */

.fenster-liste { display: grid; gap: 10px; }

.fenster {
    display: block;
    margin: 0;
    font-weight: 400;
}

.fenster input { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* Nur die direkte Huelle bekommt den Rahmen. Ohne den Kindselektor
   erwischt die Regel auch .fenster-zeit und .fenster-rest, die dann wie
   verschachtelte Knoepfe aussehen. */
.fenster > span {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 64px;
    padding: 14px 16px;
    background: var(--farbe-weiss);
    border: 2px solid var(--farbe-linie);
    border-radius: var(--radius);
}

.fenster input:checked + span {
    border-color: var(--farbe-primaer);
    background: #eaf2fb;
}

.fenster input:disabled + span { background: #ececec; color: #8d8d8d; }

.fenster-zeit { font-weight: 700; font-size: 1.05em; }
.fenster-rest { font-size: .9em; color: var(--farbe-grau); }

/* ----------------------------------------------------- Schaltfl. */

.knopf {
    display: inline-block;
    width: 100%;
    min-height: 60px;
    margin-top: 24px;
    padding: 16px 20px;
    font-size: 1.05em;
    font-family: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: var(--farbe-primaer);
    border: 2px solid var(--farbe-primaer);
    border-radius: var(--radius);
    cursor: pointer;
}

.knopf:hover { background: var(--farbe-primaer-dunkel); }

.knopf-zweit {
    color: var(--farbe-primaer);
    background: var(--farbe-weiss);
}

.knopf-zweit:hover { background: #eaf2fb; }

.knopf-gefahr {
    background: var(--farbe-fehler);
    border-color: var(--farbe-fehler);
}

.knopf-klein {
    width: auto;
    min-height: 44px;
    margin-top: 0;
    padding: 10px 16px;
    font-size: .95em;
}

.zurueck {
    display: inline-block;
    margin-top: 16px;
    color: var(--farbe-primaer);
}

/* ------------------------------------------------------ Meldungen */

.meldung {
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: var(--radius);
    border-left: 6px solid;
}

.meldung-erfolg  { background: #e6f3ea; border-color: var(--farbe-erfolg); color: #14431f; }
.meldung-fehler  { background: #fbeaea; border-color: var(--farbe-fehler); color: #6d1212; }
.meldung-hinweis { background: #eaf2fb; border-color: var(--farbe-primaer); color: #0d3c6c; }
.meldung-warnung { background: #fff3d9; border-color: var(--farbe-warnung); color: #4a3600; }

.fehlerliste { margin: 0; padding-left: 20px; }

/* --------------------------------------------------------- Fuss */

.fuss {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 16px 32px;
    color: var(--farbe-grau);
    font-size: .9em;
}

.fuss a { color: var(--farbe-grau); }

/* -------------------------------------------------- Zusammenfass. */

.zusammenfassung {
    background: #eaf2fb;
    border: 1px solid #b9d2ea;
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 16px;
}

.zusammenfassung dl { margin: 0; }
.zusammenfassung dt { font-size: .85em; color: var(--farbe-grau); }
.zusammenfassung dd { margin: 0 0 10px; font-weight: 700; }
.zusammenfassung dd:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- Tabellen */

.tabelle {
    width: 100%;
    border-collapse: collapse;
    background: var(--farbe-weiss);
}

.tabelle th,
.tabelle td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--farbe-linie);
    vertical-align: top;
}

.tabelle th {
    background: #eef2f6;
    font-size: .9em;
    text-transform: uppercase;
    letter-spacing: .03em;
}

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

.tabelle-umbruch { overflow-x: auto; }

/* Statusfarben der Belegungsuebersicht */

.status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .85em;
    font-weight: 700;
    white-space: nowrap;
}

.status-offen             { background: #ececec; color: #444; }
.status-gebucht           { background: #dbe9f8; color: #0d3c6c; }
.status-erledigt          { background: #dcefe2; color: #14431f; }
.status-nicht_angetroffen { background: #ffe6c7; color: #6b3d00; }
.status-problem           { background: #fbdada; color: #6d1212; }
.status-storniert         { background: #ececec; color: #767676; text-decoration: line-through; }

/* ------------------------------------------------ Kennzahlkacheln */

.kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.kennzahl {
    background: var(--farbe-weiss);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    padding: 12px 14px;
}

.kennzahl-wert  { font-size: 1.8em; font-weight: 700; line-height: 1.1; }
.kennzahl-titel { font-size: .85em; color: var(--farbe-grau); }

/* ------------------------------------------------ Monteuransicht */

.auftrag {
    background: var(--farbe-weiss);
    border: 1px solid var(--farbe-linie);
    border-left: 8px solid var(--farbe-primaer);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 14px;
}

.auftrag-erledigt          { border-left-color: var(--farbe-erfolg); opacity: .75; }
.auftrag-nicht_angetroffen { border-left-color: #d98200; }
.auftrag-problem           { border-left-color: var(--farbe-fehler); }

.auftrag-kopf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
}

.auftrag-wohnung { font-size: 1.2em; font-weight: 700; }
.auftrag-name    { font-size: 1.05em; }

.auftrag-tel {
    display: inline-block;
    margin: 8px 0;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--farbe-primaer);
}

/* Notizen muessen ohne Aufklappen sichtbar sein */

.notiz {
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: var(--radius);
    border-left: 5px solid;
}

.notiz-titel {
    display: block;
    font-size: .8em;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 2px;
}

.notiz-wohnung { background: #fff3d9; border-color: var(--farbe-warnung); color: #4a3600; }
.notiz-buero   { background: #eaf2fb; border-color: var(--farbe-primaer); color: #0d3c6c; }
.notiz-status  { background: #f0f0f0; border-color: #8d8d8d; color: #333; }

.notiz-marke {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--farbe-warnung);
    color: #fff;
    font-size: .75em;
    font-weight: 700;
}

.status-knoepfe {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}

@media (max-width: 480px) {
    .status-knoepfe { grid-template-columns: 1fr; }
}

.status-knopf {
    min-height: 56px;
    padding: 12px;
    font-size: 1em;
    font-family: inherit;
    font-weight: 700;
    border-radius: var(--radius);
    border: 2px solid var(--farbe-linie);
    background: var(--farbe-weiss);
    cursor: pointer;
}

.status-knopf-erledigt { border-color: var(--farbe-erfolg); color: var(--farbe-erfolg); }
.status-knopf-nicht    { border-color: #d98200; color: #8a5a00; }
.status-knopf-problem  { border-color: var(--farbe-fehler); color: var(--farbe-fehler); }

.griff {
    cursor: grab;
    color: var(--farbe-grau);
    font-size: 1.4em;
    padding-right: 8px;
    user-select: none;
}

.sortier-platzhalter { opacity: .4; }

/* ----------------------------------------------------- Sonstiges */

.zeile {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.zeile > * { flex: 1 1 180px; }

.werkzeugleiste {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.qr-kasten {
    text-align: center;
    background: var(--farbe-weiss);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    padding: 16px;
}

.qr-kasten img { width: 200px; height: 200px; }

.link-kasten {
    word-break: break-all;
    font-family: Consolas, "Courier New", monospace;
    background: #f0f0f0;
    padding: 8px 10px;
    border-radius: var(--radius);
}

details summary {
    cursor: pointer;
    padding: 8px 0;
    font-weight: 600;
}

/* Einwilligungshaken. Bewusst ein sichtbares Kaestchen, damit die
   Browser-Pflichtfeldmeldung angezeigt werden kann. */

.einwilligung {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 24px 0 0;
    font-weight: 400;
}

.einwilligung input[type="checkbox"] {
    width: 28px;
    height: 28px;
    min-height: 28px;
    margin: 2px 0 0;
    flex: 0 0 auto;
}

.einwilligung span { flex: 1; }

/* Fixterminwunsch in der Belegungsuebersicht */
.notiz-wunsch { background: #e9f7ee; border-color: #2e7d4f; color: #14432a; }

/* Knoepfe nebeneinander, umbrechend auf schmalen Schirmen */
.aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* Verlauf einer Buchung, aelteste unten */
.verlauf {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    font-size: 13px;
}

.verlauf li {
    padding: 5px 0;
    border-top: 1px solid var(--farbe-rahmen, #d5d5d5);
}

.verlauf-zeit {
    display: inline-block;
    min-width: 105px;
    color: #666;
}

/* Absage ist der Ausnahmefall, nicht der Normalweg */
.absage { margin-top: 22px; }
.absage summary { color: #666; font-size: 15px; }
.absage .knopf-gefahr { margin-top: 10px; }


/* ---------------------------------------------------------------
   Loeschen als zurueckhaltender Textknopf.
   Eine Zerstoerungsaktion soll auffindbar sein, aber nicht um
   Aufmerksamkeit buhlen. Ein grosser roter Block neben jeder Zeile
   zieht das Auge genau dorthin, wo man am wenigsten klicken soll.
   --------------------------------------------------------------- */
.loeschlink {
    background: none;
    border: 0;
    padding: 4px 2px;
    margin: 0;
    min-height: 0;
    width: auto;
    color: #8a8a8a;
    font-size: .9em;
    font-family: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.loeschlink:hover,
.loeschlink:focus { color: var(--farbe-gefahr, #a11b1b); }

.fenster-zeile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
}

.fenster-zeile form { margin: 0; }

/* Aktionsspalte: Hauptweg oben, Loeschen klein darunter */
td.aktionen {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

td.aktionen form { margin: 0; }

/* ---------------------------------------------------------------
   Tagesliste: ein Eintrag je Wohnung, aufklappbar.
   Zugeklappt steht da, was man im Vorbeigehen braucht. Die
   Eingabefelder erscheinen erst beim Antippen - vorher standen sie
   als zweite Liste darunter, und man hat oben gesucht und unten
   wiedergefunden.
   --------------------------------------------------------------- */
.auftrag > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    min-height: 44px;
}

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

.auftrag > summary::after {
    content: "▾";
    float: right;
    color: #888;
    margin-left: 8px;
}

.auftrag[open] > summary::after { content: "▴"; }
.auftrag[open] > summary { border-bottom: 1px solid var(--farbe-rahmen, #d5d5d5); }

.auftrag-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.auftrag-zweitzeile {
    display: block;
    margin-top: 4px;
    color: #555;
    font-size: .95em;
}

.auftrag-inhalt { padding: 12px 14px; }
.auftrag-inhalt form { margin-top: 12px; }

/* Der Ziehgriff darf das Aufklappen nicht ausloesen */
.auftrag .griff { cursor: grab; padding-right: 6px; touch-action: none; }

.auftragsliste-offen { margin-top: 8px; }