/* -------------------------------------------------------------------------
   Personal-App - Gestaltung

   Ruhige Farbwelt zum Logo: ein neutrales, gedecktes Grau als Grund,
   weisse Karten darauf, Pinseltinte fuer alles, was man anfassen kann.
   Kein warmer Stich - das Logo ist schwarze Tinte auf Papier, und ein
   cremefarbener Grund haette ihm einen Ton untergeschoben, den es nicht hat.
   Gruen, Rot, Gelb und Blau bleiben den Zustaenden vorbehalten - sie tragen
   Bedeutung, nicht die Marke.

   Bedienelemente sind eckig, Behaelter bleiben gerundet: Was man drueckt,
   hat eine Kante, worin etwas steht, eine Rundung. Das trennt die beiden
   Ebenen ohne eine weitere Farbe.
   Zuerst fuers Handy gebaut, ab 760px breiter Satz fuer den Schreibtisch.
   ------------------------------------------------------------------------- */

:root {
  /* Marke - das Schwarz der Pinselschrift */
  --tinte:       #232321;
  --tinte-tief:  #101010;
  --tinte-weich: #454541;
  --papier-warm: #eaeae7;

  /* Flaechen */
  --grund:      #e6e6e3;
  --karte:      #ffffff;
  --karte-hoch: #efefec;   /* Eingabefelder, Kennzahlen - leicht abgesetzt */
  --rand:       #d6d6d2;
  --rand-stark: #b9b9b4;

  /* Schrift */
  --text:       #1e1e1c;
  --text-leise: #5c5c57;

  /* Bedeutungen */
  --akzent:     var(--tinte);
  --gut:        #4d7a2b;
  --warnung:    #ab7010;
  --fehler:     #c0362c;
  --info:       #2d6690;

  --radius:     16px;
  --schatten:   0 8px 24px rgba(32, 32, 30, .09), 0 2px 5px rgba(32, 32, 30, .05);
  --nav-hoehe:  62px;
}

* { box-sizing: border-box; }

/* Ein Element mit hidden bleibt unsichtbar - immer. Ohne diese Regel setzt
   jede spaetere display-Angabe das Attribut ausser Kraft, und man sucht den
   Fehler lange an der falschen Stelle. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--grund);
  background-image:
    radial-gradient(1200px 560px at 50% -10%, #f0f0ee 0%, rgba(240,240,238,0) 60%),
    linear-gradient(180deg, #e9e9e6 0%, #dededa 100%);
  background-attachment: fixed;
  color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(var(--nav-hoehe) + env(safe-area-inset-bottom));
  overscroll-behavior-y: contain;
}

/* --- Hintergrundbild der Anmeldeseite ---------------------------------
   Das Foto liegt hinter einem hellen Schleier. Ohne ihn waere die Schrift
   auf einem Bild mit hellen und dunklen Stellen nirgends verlaesslich
   lesbar - und lesbar muss sie sein, nicht huebsch. */
body.mit-bild {
  /* Der Koerper ist sonst nur so hoch wie sein Inhalt - das Bild endete
     dann mitten auf dem Bildschirm. dvh beruecksichtigt die ein- und
     ausfahrende Adressleiste auf dem Handy. */
  min-height: 100vh;
  min-height: 100dvh;
  background-image:
    linear-gradient(rgba(230, 230, 227, .86), rgba(224, 224, 220, .90)),
    var(--bild);
  background-size: cover, cover;
  background-position: center, center;
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
}
/* Die Karte hebt sich vom Bild ab, ohne es ganz zu verdecken. */
body.mit-bild .karte {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(3px);
  box-shadow: 0 12px 34px rgba(32, 32, 30, .16), 0 2px 6px rgba(32, 32, 30, .08);
}
body.mit-bild .logofeld {
  background: rgba(230, 230, 227, .72);
  padding: 10px 18px;
  backdrop-filter: blur(2px);
}
/* Auf kleinen Geraeten kostet ein fest stehendes Bild Rechenzeit und ruckelt
   beim Scrollen - dort laeuft es einfach mit. */
@media (max-width: 760px) {
  body.mit-bild { background-attachment: scroll, scroll; }
}

/* --- Kopfzeile -------------------------------------------------------- */
header.oben {
  position: sticky; top: 0; z-index: 40;
  background: rgba(230, 230, 227, .93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rand);
  padding: calc(env(safe-area-inset-top) + 9px) 16px 9px;
  text-align: center; position: sticky;
}
/* Das Logo traegt die Marke, der Seitentitel steht klein darunter. */
.kopflogo { display: block; }
.kopflogo img { height: 36px; width: auto; display: block; margin: 0 auto; }
header.oben h1 {
  font-size: 13px; margin: 5px 0 0; font-weight: 650; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-leise);
}
.kopfkuerzel {
  position: absolute; right: 14px; top: calc(env(safe-area-inset-top) + 9px);
  width: 38px; height: 38px; border-radius: 0;
  border: 1.5px solid var(--rand-stark); background: #fbfbfa;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--text-leise);
  text-decoration: none;
}
.kopfkuerzel:hover { border-color: var(--tinte); color: var(--tinte); }

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

/* --- Karten ----------------------------------------------------------- */
.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--schatten);
}
.karte > h2 { margin: 0 0 12px; font-size: 13px; letter-spacing: .6px;
              text-transform: uppercase; color: var(--tinte-weich); font-weight: 700; }
.karte > h2 .zahl { color: var(--tinte); }
.karte.schmal { padding: 12px 14px; }

/* --- Kennzahlen ------------------------------------------------------- */
.kennzahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.kennzahlen.vier { grid-template-columns: repeat(2, 1fr); }
.kennzahl {
  background: var(--karte-hoch); border-radius: 12px; padding: 12px;
  border: 1px solid var(--rand);
}
.kennzahl .wert { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums;
                  line-height: 1.1; }
.kennzahl .wert.klein { font-size: 19px; }
.kennzahl .name { font-size: 11.5px; color: var(--text-leise); margin-top: 3px;
                  text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.kennzahl.gold { background: #efefec; border-color: #d6d6d2; }
.kennzahl.gold .wert { color: var(--tinte); }
.kennzahl.gut { background: #f0f6ea; border-color: #d6e6c6; }
.kennzahl.gut .wert { color: var(--gut); }
.kennzahl.warn { background: #fdf4e4; border-color: #f0dfba; }
.kennzahl.warn .wert { color: var(--warnung); }

/* --- Formulare -------------------------------------------------------- */
label { display: block; font-size: 13.5px; color: var(--text-leise); margin: 0 0 5px;
        font-weight: 600; }
input, select, textarea {
  width: 100%; padding: 12px 13px; font-size: 16px;  /* 16px = iOS zoomt nicht */
  background: #fbfbfa; color: var(--text);
  border: 1.5px solid var(--rand-stark); border-radius: 0;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--tinte); box-shadow: 0 0 0 3px rgba(35, 35, 33, .16);
}
input::placeholder, textarea::placeholder { color: #75756f; }

/* Safari gibt Datums- und Uhrzeitfeldern eine eigene Mindestbreite und rechnet
   das native Innenpolster obendrauf - dann stehen sie am iPhone ueber den Rand
   der Karte hinaus. Das native Aussehen abschalten macht sie berechenbar. */
input[type=date], input[type=time], input[type=number], input[type=month] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
}
input[type=date]::-webkit-date-and-time-value,
input[type=time]::-webkit-date-and-time-value { text-align: left; }
/* Der Kalender- bzw. Uhrknopf soll nicht zusaetzlich Platz beanspruchen. */
input[type=date]::-webkit-calendar-picker-indicator { margin-left: 0; }
input[type=checkbox] { width: auto; margin-right: 8px; accent-color: var(--tinte); }
textarea { min-height: 84px; resize: vertical; }
.feld { margin-bottom: 14px; }
.feld .hilfe { font-size: 12.5px; color: var(--text-leise); margin-top: 5px; line-height: 1.45; }
.feld.fehlerhaft input, .feld.fehlerhaft select, .feld.fehlerhaft textarea {
  border-color: var(--fehler); background: #fdf3f2;
}
.feld .feldfehler { font-size: 12.5px; color: var(--fehler); margin-top: 5px; font-weight: 600; }
.reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 12px; }
.reihe.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
fieldset { border: none; padding: 0; margin: 0 0 22px; }
fieldset > legend { font-size: 13px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--tinte-weich); font-weight: 700; padding: 0; margin-bottom: 12px;
  border-bottom: 2px solid var(--rand); width: 100%; padding-bottom: 7px; }

/* --- Schalter --------------------------------------------------------- */
.knopf, button, .knopf:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 17px; font-size: 15px; font-weight: 650; font-family: inherit;
  border-radius: 0; border: 1.5px solid var(--rand-stark);
  background: #fbfbfa; color: var(--text);
  cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.knopf:hover, button:hover { border-color: var(--tinte); color: var(--tinte); }
button:active, .knopf:active { transform: scale(.985); }
.knopf.haupt, button.haupt {
  background: var(--tinte); color: #fff; border-color: var(--tinte);
  box-shadow: 0 4px 14px rgba(35, 35, 33, .26);
}
.knopf.haupt:hover, button.haupt:hover { background: var(--tinte-tief); color: #fff; }
.knopf.gut, button.gut {
  background: var(--gut); border-color: var(--gut); color: #fff;
  box-shadow: 0 4px 14px rgba(77, 122, 43, .24);
}
.knopf.gut:hover, button.gut:hover { color: #fff; border-color: var(--gut); }
.knopf.rot, button.rot { background: var(--fehler); border-color: var(--fehler); color: #fff; }
.knopf.rot:hover, button.rot:hover { color: #fff; }
.knopf.leise { background: transparent; color: var(--text-leise); border-color: var(--rand); }
/* Eine getroffene Auswahl - markiert, aber kein Handlungsaufruf. */
.knopf.gewaehlt { border-color: var(--gut); color: var(--gut); background: #f2f7ed;
                  border-width: 2px; }
.knopf.voll, button.voll { width: 100%; }
.knopf.klein, button.klein { padding: 8px 12px; font-size: 13.5px; }
.knopfreihe { display: flex; gap: 9px; flex-wrap: wrap; }

/* --- Meldungen -------------------------------------------------------- */
.meldung {
  padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; font-size: 14.5px;
  border: 1px solid; line-height: 1.5;
}
.meldung.gut     { background: #eff6e9; border-color: #cfe2bd; color: #38571c; }
.meldung.fehler  { background: #fdeceb; border-color: #f2c5c1; color: #96201c; }
.meldung.hinweis { background: #fdf3e0; border-color: #f0ddb6; color: #855e18; }
.meldung.info    { background: #eef4f9; border-color: #cbdeef; color: #2a5679; }

/* --- Tabellen --------------------------------------------------------- */
.tabellenrahmen { overflow-x: auto; -webkit-overflow-scrolling: touch;
                  margin: 0 -16px; padding: 0 16px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 9px; text-align: left; border-bottom: 1px solid var(--rand);
         white-space: nowrap; }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px;
     color: var(--text-leise); font-weight: 700; position: sticky; top: 0;
     background: var(--karte); }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #f4f4f2; }
tfoot td { font-weight: 700; border-top: 2px solid var(--rand-stark); border-bottom: none;
           color: var(--tinte); background: #f4f4f2; }
tr.feiertag td { background: #fdf3e0; }
tr.sonntag td  { background: #f2f6fa; }

/* Am Handy zaehlt jeder Millimeter: enger setzen, damit die Statusspalte
   noch ins Bild passt und nicht weggescrollt werden muss. */
@media (max-width: 520px) {
  table { font-size: 13px; }
  th, td { padding: 9px 5px; }
  th { font-size: 10.5px; letter-spacing: .2px; }
  .marke { padding: 3px 7px; font-size: 11px; }
  .knopf.klein, button.klein { padding: 6px 9px; font-size: 12.5px; }
  /* Der Stift statt des Wortes - so bleibt die Zeile im Bild. */
  .knopf.stift { padding: 6px 8px; font-size: 15px; line-height: 1; }
}

/* --- Listeneintraege -------------------------------------------------- */
.eintrag {
  display: flex; align-items: center; gap: 12px; padding: 13px 0;
  border-bottom: 1px solid var(--rand); text-decoration: none; color: inherit;
}
.eintrag:last-child { border-bottom: none; }
.eintrag .haupttext { flex: 1; min-width: 0; }
.eintrag .titel { font-weight: 650; font-size: 15px; }
.eintrag .unter { font-size: 12.5px; color: var(--text-leise); margin-top: 2px; }
.eintrag .wert { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 16px;
                 color: var(--tinte); }
.eintrag .pfeil { color: #83837c; font-size: 18px; }
a.eintrag:hover .titel { color: var(--tinte); }

/* --- Reservierungen ---------------------------------------------------- */
.zeitspalte {
  flex: none; width: 84px; font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 14px; color: var(--tinte);
  background: #efefec; border: 1px solid #d6d6d2;
  padding: 7px 4px; text-align: center; line-height: 1.25;
}

/* --- Marken ----------------------------------------------------------- */
.marke {
  display: inline-block; padding: 3px 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  background: #eaeae7; color: var(--text-leise); border: 1px solid var(--rand);
}
.marke.gut     { background: #e8f2df; color: #3d6721; border-color: #cfe2bd; }
.marke.warn    { background: #fdf0d8; color: #8a5f12; border-color: #f0ddb6; }
.marke.rot     { background: #fce8e6; color: #a32a24; border-color: #f2c5c1; }
.marke.info    { background: #e9f1f8; color: #275a80; border-color: #cbdeef; }
.marke.gesperrt::before { content: "\1F512  "; }

/* --- Navigation unten ------------------------------------------------- */
nav.unten {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; background: rgba(251, 251, 250, .97);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--rand);
  box-shadow: 0 -4px 18px rgba(32, 32, 30, .07);
  padding-bottom: env(safe-area-inset-bottom);
}
nav.unten a {
  flex: 1; text-align: center; padding: 9px 2px 8px; text-decoration: none;
  color: var(--text-leise); font-size: 10px; font-weight: 600;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  -webkit-tap-highlight-color: transparent; position: relative;
}
nav.unten a.aktiv { color: var(--tinte); }
nav.unten svg { width: 22px; height: 22px; stroke-width: 1.8; flex: none; }
nav.unten .punkt {
  position: absolute; top: 6px; right: 50%; margin-right: -18px;
  background: var(--tinte); color: #fff;
  font-size: 10px; min-width: 17px; height: 17px; line-height: 17px; padding: 0 4px;
  font-weight: 700;
}

/* --- Jahreskalender --------------------------------------------------- */
.jahr { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
        gap: 14px; }
.monat { background: var(--karte); border: 1px solid var(--rand);
         border-radius: var(--radius); padding: 12px; box-shadow: var(--schatten); }
.monat h3 { margin: 0 0 9px; font-size: 14px; font-weight: 700; color: var(--tinte-weich); }
/* minmax(0,...) statt 1fr: sonst erzwingt aspect-ratio unten eine
   Mindestbreite und das Raster laeuft aus der Monatskarte heraus. */
.raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.raster .kopf { font-size: 10px; color: #75756f; text-align: center;
                padding-bottom: 4px; font-weight: 700; }
.tag {
  aspect-ratio: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; position: relative;
  font-variant-numeric: tabular-nums;
}
.tag.leer { visibility: hidden; }
.tag.wochenende { color: #75756f; }
.tag.feiertag { background: #fdeccd; color: #8a5f12; font-weight: 700; }
.tag.wunsch { background: #dceaf5; color: #25506f; }
.tag.genehmigt { background: var(--gut); color: #fff; font-weight: 700; }
.tag.eigen::after {
  content: ""; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--tinte);
}
.tag.heute { outline: 2px solid var(--tinte); outline-offset: -2px; }
.legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px;
           color: var(--text-leise); margin-top: 10px; }
.legende span { display: flex; align-items: center; gap: 6px; }
.legende i { width: 12px; height: 12px; display: inline-block; }

/* --- Rechner im Eintragsformular -------------------------------------- */
.rechner {
  background: #f4f4f2; border: 1.5px dashed #cfcfca;
  border-radius: 12px; padding: 13px; margin-bottom: 14px; font-size: 14px;
}
.rechner .gross { font-size: 27px; font-weight: 700; color: var(--tinte);
                  font-variant-numeric: tabular-nums; line-height: 1.15; }
.rechner .aufteilung { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 9px;
                       font-size: 12.5px; color: var(--text-leise); }
.rechner .aufteilung b { color: var(--text); font-variant-numeric: tabular-nums; }
.rechner.still { opacity: .6; }

/* --- Verfuegbarkeitskalender ------------------------------------------ */
.raster.verfuegbar { gap: 4px; }
.vtag {
  aspect-ratio: 1; min-width: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; cursor: pointer; font-family: inherit;
  border: 1.5px solid #f0cdc9; background: #fdeeec;
  -webkit-tap-highlight-color: transparent;
}
.vtag .nr { font-size: 10px; color: var(--text-leise); line-height: 1;
            font-variant-numeric: tabular-nums; }
.vtag .zeichen { font-size: 14px; font-weight: 700; line-height: 1.1;
                 color: var(--fehler); letter-spacing: -.5px; }
/* Zugesagt: gruen. Ganztags kraeftig, einzelne Schichten heller. */
.vtag.ganztags { background: #e4f0d8; border-color: #b9d5a0; }
.vtag.ganztags .zeichen { color: #3d6721; font-size: 17px; }
.vtag.teils { background: #eef6e6; border-color: #cbe0b6; }
.vtag.teils .zeichen { color: #3d6721; font-size: 12.5px; }
.vtag.feiertag .nr { color: var(--warnung); font-weight: 700; }
.vtag.wochenende .nr { font-style: italic; }
.vtag.heute { outline: 2px solid var(--tinte); outline-offset: -2px; }
.vtag.vergangen { opacity: .45; }
.vtag:active { transform: scale(.94); }

.legende .lz {
  width: 19px; height: 19px; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.legende .lz.rot { background: #fdeeec; color: var(--fehler); border: 1px solid #f0cdc9; }
.legende .lz.gruen { background: #e4f0d8; color: #3d6721; border: 1px solid #b9d5a0; }

/* Die Auswahl, die beim Antippen eines Tages hochkommt. */
.tagwahl { position: fixed; inset: 0; z-index: 90; display: none;
           align-items: flex-end; justify-content: center; }
.tagwahl.offen { display: flex; }
.tagwahl-flaeche { position: absolute; inset: 0; background: rgba(28, 28, 26, .45); }
.tagwahl-feld {
  position: relative; width: 100%; max-width: 430px;
  background: var(--karte); border-radius: 20px 20px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 34px rgba(28, 28, 26, .3);
  animation: hoch .18s ease-out;
}
@keyframes hoch { from { transform: translateY(14px); opacity: .6; } }
.tagwahl-kopf { font-weight: 700; font-size: 16px; margin-bottom: 12px;
                text-align: center; color: var(--tinte-weich); }
.wahl {
  width: 100%; margin-bottom: 8px; justify-content: flex-start; gap: 12px;
  font-size: 15px; padding: 13px 15px;
}
.wahl b { display: inline-flex; align-items: center; justify-content: center;
          width: 26px; height: 26px; font-size: 14px; flex: none; }
/* Alle Auswahlknoepfe sind schlicht - nur das Zeichen traegt die Farbe.
   Ein vollflaechig roter Knopf wirkt wie eine Warnung, dabei ist "nicht
   verfuegbar" der Normalfall. */
.wahl.gruen, .wahl.rot {
  background: #fbfbfa; color: var(--text); border-color: var(--rand-stark);
  box-shadow: none;
}
.wahl.gruen:hover, .wahl.rot:hover { border-color: var(--tinte); color: var(--text); }
.wahl.gruen b { background: #e4f0d8; color: #3d6721; }
.wahl.rot b { background: #fdeeec; color: var(--fehler); }
.wahl.aktiv { border-color: var(--gut); background: #f4f9ef; }
.wahl.schliessen { justify-content: center; color: var(--text-leise); margin-top: 4px; }

@media (min-width: 620px) {
  .tagwahl { align-items: center; }
  .tagwahl-feld { border-radius: 18px; padding-bottom: 16px; }
}

/* --- Gespraechsfaden -------------------------------------------------- */
.verlauf { display: flex; flex-direction: column; gap: 10px; max-height: 62vh;
           overflow-y: auto; padding: 2px; }
.blase {
  max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 14.5px;
  line-height: 1.5; border: 1px solid var(--rand); position: relative;
}
.blase .text { white-space: pre-wrap; word-break: break-word; }
.blase .zeit { font-size: 11px; color: var(--text-leise); margin-top: 5px; }
.blase .bezug {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
  font-weight: 700; color: var(--tinte-weich); margin-bottom: 4px;
}
/* Eigene Nachrichten rechts und in Hausfarbe, fremde links und hell. */
.blase.eigen {
  align-self: flex-end; background: #fdece9; border-color: #f4cec8;
  border-bottom-right-radius: 5px;
}
.blase.eigen .bezug { color: var(--tinte); }
.blase.fremd {
  align-self: flex-start; background: var(--karte-hoch);
  border-bottom-left-radius: 5px;
}
.verlauf .leer { padding: 22px 12px; }

/* --- Logo ------------------------------------------------------------- */
.logo { width: min(250px, 66vw); height: auto; display: block; margin: 0 auto; }
.logofeld { display: inline-block; }
.gruss { font-size: 15px; color: var(--text-leise); margin: 16px 0 0; }
.gruss b { color: var(--tinte-weich); font-weight: 700; }

/* --- Datei ansehen ---------------------------------------------------- */
/* Die Hoehe richtet sich nach dem Fenster, damit unter dem Dokument noch die
   Navigationsleiste sichtbar bleibt - dort steht der Weg zurueck. */
.dateiansicht { display: block; width: 100%; margin: 12px 0 4px;
                border: 1px solid var(--rand); border-radius: var(--radius);
                background: #fff; }
iframe.dateiansicht { height: min(68vh, 900px); }
img.dateiansicht    { height: auto; }

/* --- Verschiedenes ---------------------------------------------------- */
.leise { color: var(--text-leise); font-size: 13.5px; }
.mini  { font-size: 12px; color: var(--text-leise); }
.zentriert { text-align: center; }
.blaettern { display: flex; align-items: center; justify-content: space-between;
             gap: 10px; margin-bottom: 14px; }
.blaettern .titel { font-weight: 700; font-size: 16px; }
.leer { text-align: center; padding: 34px 16px; color: var(--text-leise); }
.leer .zeichen { font-size: 40px; opacity: .5; display: block; margin-bottom: 10px; }
details.aufklapp { border: 1px solid var(--rand); border-radius: 12px; padding: 12px;
                   margin-bottom: 10px; background: var(--karte-hoch); }
details.aufklapp summary { cursor: pointer; font-weight: 650; font-size: 14.5px;
                           list-style: none; color: var(--tinte-weich); }
details.aufklapp summary::-webkit-details-marker { display: none; }
details.aufklapp summary::before { content: "\25B8"; color: var(--tinte);
  display: inline-block; width: 1.1em; }
details.aufklapp[open] summary::before { content: "\25BE"; }
details.aufklapp > *:not(summary) { margin-top: 12px; }
a { color: var(--tinte-weich); text-underline-offset: 2px; }
a:hover { color: var(--tinte); }
hr { border: none; border-top: 1px solid var(--rand); margin: 18px 0; }
code { background: var(--karte-hoch); padding: 2px 6px;
       font-size: .92em; border: 1px solid var(--rand); }
.fortschritt { height: 8px; background: #dededa;
               overflow: hidden; margin-top: 8px; }
.fortschritt i { display: block; height: 100%; background: var(--tinte); }

/* --- Breiter Bildschirm ----------------------------------------------- */
@media (min-width: 760px) {
  .kennzahlen, .kennzahlen.vier { grid-template-columns: repeat(4, 1fr); }
  .inhalt { padding: 22px; }
  .tabellenrahmen { margin: 0; padding: 0; }
  body { padding-bottom: 20px; }
  /* Am Schreibtisch bleibt die Navigation oben kleben, die Kopfzeile
     scrollt mit - sonst laegen beide uebereinander. */
  header.oben { position: static; padding-top: 16px; padding-bottom: 12px; }
  .kopflogo img { height: 42px; }
  .kopfkuerzel { top: 16px; }
  nav.unten {
    position: sticky; top: 0; bottom: auto; border-top: none;
    border-bottom: 1px solid var(--rand); max-width: 1180px; margin: 0 auto;
    box-shadow: 0 4px 18px rgba(32, 32, 30, .07);
  }
  nav.unten a { flex-direction: row; font-size: 13.5px; padding: 12px 8px; }
  nav.unten svg { width: 18px; height: 18px; }
  nav.unten .punkt { position: static; margin: 0; }
}

@media print {
  nav.unten, header.oben, .knopfreihe, .blaettern { display: none; }
  body { background: #fff; color: #000; padding: 0; }
  .karte { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  th { background: #eee; color: #000; }
}

/* ==========================================================================
   Betriebshandbuch
   Bedient wird es im Stehen, mit einer Hand, oft mit nassen Fingern. Darum
   grosse Antippflaechen, ruhige Flaechen und Schrittnummern, die man aus
   einem Meter Abstand noch findet.
   ========================================================================== */

.hb-suche { padding-bottom: 16px; }
.hb-suchlabel { display: block; font-weight: 600; margin-bottom: 8px; }
.hb-suchreihe { display: flex; gap: 8px; }
.hb-suchreihe input { flex: 1; min-width: 0; }

/* Bereichskacheln */
.hb-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.hb-kachel {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px; text-decoration: none; color: var(--text);
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten);
}
.hb-kachel:active { background: var(--karte-hoch); }
.hb-name { font-weight: 600; line-height: 1.25; }

/* Bereichskuerzel - das Zeichen, an dem man den Bereich wiedererkennt */
.hb-kuerzel {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 26px; padding: 0 7px;
  background: var(--tinte); color: #fff;
  font-weight: 700; font-size: 13px;
  letter-spacing: .5px; flex: none;
}
.hb-kuerzel.gross { min-width: 44px; height: 34px; font-size: 16px; align-self: flex-start; }

.hb-zeile { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.hb-zeile .haupttext { display: flex; flex-direction: column; gap: 2px; }
.mini { font-size: 13px; }

/* Kopfdaten der Anleitung */
.hb-fakten { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.hb-fakten div {
  background: var(--karte-hoch); border: 1px solid var(--rand);
  padding: 7px 11px;
}
.hb-fakten dt { font-size: 12px; color: var(--text-leise); margin: 0; }
.hb-fakten dd { margin: 2px 0 0; font-weight: 600; font-size: 14px; }

.hb-warnung { margin-top: 14px; }
.hb-material { margin-top: 14px; }
.hb-stueck {
  display: inline-block; margin: 3px 4px 0 0; padding: 4px 10px;
  background: var(--karte-hoch); border: 1px solid var(--rand);
  font-size: 14px;
}

/* Die Schrittliste. Eigene Nummerierung, weil die des Browsers zu klein und
   zu blass ist, um sie im Gehen wiederzufinden. */
.hb-schritte { list-style: none; counter-reset: hb; margin: 0; padding: 0; }
.hb-schritte > li {
  counter-increment: hb;
  position: relative;
  padding: 0 0 18px 44px;
  border-left: 2px solid var(--rand);
  margin-left: 15px;
}
.hb-schritte > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.hb-schritte > li::before {
  content: counter(hb);
  position: absolute; left: -16px; top: -2px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tinte); color: #fff;
  border: 3px solid var(--karte);
  border-radius: 50%; font-weight: 700; font-size: 14px;
}
.hb-text { display: block; font-size: 16px; line-height: 1.45; }
.hb-hinweis, .hb-achtung {
  display: block; margin-top: 7px; padding: 8px 11px;
  border-radius: 10px; font-size: 14.5px; line-height: 1.4;
}
.hb-hinweis { background: var(--karte-hoch); border-left: 3px solid var(--info); }
.hb-achtung { background: #fdf1ea; border-left: 3px solid var(--fehler); color: #7d2b22; }

.hb-klemmt { padding: 12px 0; border-bottom: 1px solid var(--rand); }
.hb-klemmt:last-child { border-bottom: 0; padding-bottom: 0; }
.hb-fall { font-weight: 600; margin-bottom: 3px; }

/* Verwaltung */
.hb-schalter { margin: 0 0 12px; }
.hb-verwalten { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
/* 270px, damit die Knoepfe auf schmalen Schirmen unter den Titel rutschen,
   statt ihn in einen dreizeiligen Umbruch zu quetschen. */
.hb-verwalten .haupttext { flex: 1; min-width: 270px; }
.hb-verwalten.aus .titel, .hb-verwalten.aus .leise { opacity: .55; }
.hb-knoepfe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Das Schrittfeld. Feste Schriftbreite, damit die Zusatzzeichen > und !
   untereinander stehen und man Ausrutscher sofort sieht. */
.hb-feld {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px; line-height: 1.6;
}
.hb-versteckt {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.hb-beispiel { margin-top: 10px; }
.hb-beispiel summary { cursor: pointer; color: var(--text-leise); font-size: 14px; }
.hb-beispiel pre {
  margin: 8px 0 0; padding: 11px;
  background: var(--karte-hoch); border: 1px solid var(--rand);
  border-radius: 10px; font-size: 13.5px; line-height: 1.55;
  white-space: pre-wrap;
}

/* Einstiegskachel auf den Startseiten - eine Karte, die als Ganzes ein Link ist */
.hb-einstieg {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: var(--text);
}
.hb-einstieg:active { background: var(--karte-hoch); }
.hb-einstieg .hb-name { display: block; font-weight: 600; margin-bottom: 2px; }
.hb-einstieg .leise { display: block; font-size: 14px; line-height: 1.4; }

/* Die Handbuchkachel unter "Betrieb". Sie steht ganz oben und darf auffallen:
   Das Handbuch ist der Teil, den der Betrieb selbst pflegt, und er taucht in
   der unteren Navigation nicht auf - ohne diese Kachel wuerde er ihn suchen. */
.hb-gross {
  border-left: 5px solid var(--tinte);
  background: linear-gradient(180deg, #f7f7f5 0%, var(--karte) 60%);
}
.hb-gross-kopf { display: flex; align-items: flex-start; gap: 14px; }
.hb-gross-kopf h2 { margin: 0 0 3px; }
.hb-gross-kopf .leise { margin: 0; font-size: 14.5px; line-height: 1.45; }
.hb-gross .knopfreihe { margin-top: 14px; }

/* Knopf zum Selbstbeantragen eines fehlenden Nachweises (§ 43 IfSG).
   Steht im Textblock des Eintrags, deshalb inline-flex und eigener Abstand. */
.knopf.antrag {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
}

/* Kopf der Dateiansicht - bleibt beim Blaettern stehen. Ohne ihn gibt es in
   der Fensteransicht auf dem Handy keinen Weg aus einem langen PDF heraus. */
.ansicht-kopf {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: -16px -16px 0;
  padding: 12px 16px;
  background: var(--karte);
  border-bottom: 1px solid var(--rand);
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Lohnimport: die Kontrollseite. Je Seite eine Zeile mit Nummer und Auswahl -
   der Inhaber vergleicht die Nummer mit dem Ausdruck, wenn etwas unklar ist. */
.lohn-stufen { margin: 6px 0 0; padding-left: 20px; }
.lohn-stufen li { margin-bottom: 4px; line-height: 1.45; }

.lohn-seite { display: flex; align-items: flex-start; gap: 12px; }
.lohn-seite .haupttext { flex: 1; min-width: 0; }
.lohn-nummer {
  flex: none; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--karte-hoch); border: 1px solid var(--rand);
  border-radius: 50%; font-weight: 700; font-size: 13px; color: var(--text-leise);
}
/* Offene Seiten fallen auf - sie sind das, was noch Arbeit macht. */
.lohn-seite.offen .lohn-nummer {
  background: #fdf1ea; border-color: var(--fehler); color: var(--fehler);
}
.lohn-wahl { width: 100%; }
.lohn-auszug {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px; color: var(--text-leise);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Ein Link, der gerade seine Datei holt. Ohne Rueckmeldung tippt man zweimal. */
.knopf.laedt, a.laedt { opacity: .6; pointer-events: none; }

/* Die Handbuchkachel auf der Mitarbeiter-Startseite. Sie fuehrt zu dem, was
   man im Betrieb am dringendsten braucht - deshalb gross und mit Zeichen
   statt eines kleinen Fragezeichens. */
.hb-einstieg-gross { display: block; text-decoration: none; color: var(--text); }
.hb-einstieg-gross:active { background: var(--karte-hoch); }
.hb-einstieg-gross h2 { margin: 0 0 3px; }
.hb-einstieg-gross .leise { margin: 0; font-size: 14.5px; line-height: 1.45; }
.hb-zeichen {
  flex: none;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tinte); color: #fff;
}
.hb-zeichen svg { width: 30px; height: 30px; }
.hb-gross-knopf { display: block; text-align: center; margin-top: 14px; }

/* Hinweise aus dem Betrieb - in der Verwaltung */
.hb-vorschlag { display: flex; align-items: flex-start; gap: 12px; }
.hb-vorschlag .haupttext { flex: 1; min-width: 0; }
.hb-vorschlag .unter { white-space: pre-wrap; }

/* Der Meldeweg an der Anleitung. Zugeklappt, damit er beim Lesen nicht
   stoert - aber vorhanden, wo der Fehler auffaellt. */
.hb-melden summary {
  cursor: pointer; font-weight: 600; color: var(--text);
  padding: 2px 0;
}
.hb-melden .leise { font-size: 14.5px; line-height: 1.45; margin: 8px 0 10px; }

/* Der Öffnen-Link neben einem Ladeknopf. Er ruft die Datei direkt auf - iOS
   zeigt dann seine Vorschau mit "In Excel öffnen". Bewusst unauffälliger als
   der Ladeknopf: Er verlässt die App, und das soll man sehen. */
.oeffnen::after { content: " ↗"; }

/* Die Ausgabewege je Tabelle. Vorher standen vier gleich aussehende Knöpfe
   nebeneinander - man sah nicht, welcher zu welcher Tabelle gehört. */
.ausgabe { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ausgabe-zeile {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 11px;
  background: var(--karte-hoch); border: 1px solid var(--rand);
  border-radius: 12px;
}
.ausgabe-name { font-weight: 600; flex: 1; min-width: 92px; }

/* Die Tabellenansicht in der App. Sie ersetzt den Umweg über die
   Dateivorschau von iOS - die übernimmt auf dem iPhone den ganzen Bildschirm
   und lässt keinen Weg zurück. */
.tabellenrahmen.breit { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabelle-daten { border-collapse: collapse; width: max-content; min-width: 100%; }
.tabelle-daten th, .tabelle-daten td {
  padding: 7px 10px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--rand); font-size: 14px;
}
.tabelle-daten th {
  background: var(--karte-hoch); font-size: 12.5px; font-weight: 700;
  position: sticky; top: 0;
}
.tabelle-daten td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle-daten tr:last-child td { border-bottom: 0; }

/* Ein Knopf, der etwas Unwiderrufliches tut. Rot umrandet statt rot gefüllt:
   Er soll auffallen, aber nicht einladen. */
.knopf.gefahr, button.gefahr {
  border-color: var(--fehler);
  color: var(--fehler);
  background: transparent;
}
.knopf.gefahr:active, button.gefahr:active { background: #fdf1ea; }

/* Nach links wischen legt das Löschen frei - wie in den Listen von iOS.
   Die Aktion liegt unter dem Eintrag und wird vom Verschieben freigelegt. */
.wisch { position: relative; overflow: hidden; }
.wisch + .wisch { border-top: 1px solid var(--rand); }
.wisch-aktion {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; align-items: stretch;
}
.wisch-aktion button {
  border: 0; border-radius: 0; width: 104px;
  background: var(--fehler); color: #fff;
  font-weight: 700; font-size: 15px;
}
.wisch-inhalt {
  position: relative; background: var(--karte);
  transition: transform .18s ease;
  will-change: transform;
  /* Senkrecht scrollen soll weiter gehen, waagerecht uebernehmen wir. */
  touch-action: pan-y;
}
.wisch.offen .wisch-inhalt { transform: translateX(-104px); }
.wisch.zieht .wisch-inhalt { transition: none; }