/* Salon-Kalender: ruhige, kompakte Oberfläche. Nur Systemschriften, nichts von außen.
   Farben als Variablen; Dunkelmodus folgt der Geräteeinstellung. */
:root {
  --bg: #f4f6f8; --flaeche: #ffffff; --flaeche2: #eef2f5;
  --text: #1c2630; --text2: #4a5866; --linie: #dfe5ea; --linie2: #edf0f3; --rand: #aab7c3;
  --blau: #245c9e; --gruen: #2a7d4f; --rot: #b3261e; --jetzt: #d9433a; --fokus: #f0a500;
  --blau-k: #245c9e; --gruen-k: #2a7d4f; --rot-k: #b3261e; /* Knopffarben mit weißer Schrift (mind. 4,5:1) */
  --warn-bg: #fff4d6; --warn-rand: #e0a100; --info-bg: #e8f1fb;
  --schatten: 0 1px 2px rgba(20,35,50,.08);
  --raster-stark: #5f6f7e; --raster-mittel: #98a6b3; --raster-dezent: #c3cdd6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12181e; --flaeche: #1b232b; --flaeche2: #242e38;
    --text: #e9eef2; --text2: #aebbc7; --linie: #33404c; --linie2: #28323c; --rand: #566676;
    --blau: #5b9bd8; --gruen: #3d9a69; --rot: #e0645b; --jetzt: #ff6b61;
    --blau-k: #2f6fb5; --gruen-k: #2a7d4f; --rot-k: #b3261e;
    --warn-bg: #3a3116; --warn-rand: #b88a10; --info-bg: #1c2d3f;
    --schatten: none;
    --raster-stark: #8b9cac; --raster-mittel: #627384; --raster-dezent: #46535f;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 18px/1.3 system-ui, "Segoe UI", Roboto, Arial, sans-serif; color: var(--text); background: var(--bg); }
h1 { font-size: 1.05em; margin: 0; }
h2 { font-size: 1.15em; margin: 0 0 .5em; }
button, select, input { font: inherit; }

/* ---------- Knöpfe ---------- */
button {
  min-height: 44px; min-width: 44px; padding: 6px 14px; border-radius: 10px;
  border: 1px solid var(--rand); background: var(--flaeche); color: var(--text); cursor: pointer;
  font-size: 16px; line-height: 1.15; box-shadow: var(--schatten);
}
button:hover:not(:disabled) { background: var(--flaeche2); }
button.primaer { background: var(--blau-k); border-color: var(--blau-k); color: #fff; }
button.primaer:hover:not(:disabled) { background: var(--blau-k); filter: brightness(1.1); }
button.ja { background: var(--gruen-k); border-color: var(--gruen-k); color: #fff; font-weight: 700; }
button.nein { background: var(--rot-k); border-color: var(--rot-k); color: #fff; font-weight: 700; }
button.ja:hover:not(:disabled), button.nein:hover:not(:disabled), button.gewaehlt:hover:not(:disabled) { filter: brightness(1.1); }
button.gewaehlt { background: var(--blau-k); border-color: var(--blau-k); color: #fff; font-weight: 700; }
button:disabled { opacity: .45; cursor: default; }
a.knopf {
  display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none;
  min-height: 48px; min-width: 44px; padding: 6px 14px; border-radius: 10px; flex: 1 1 140px; font-size: 16px;
  border: 1px solid var(--rand); background: var(--flaeche); color: var(--text);
}
a.knopf.primaer { background: var(--blau-k); border-color: var(--blau-k); color: #fff; }
a.knopf.ja { background: var(--gruen-k); border-color: var(--gruen-k); color: #fff; font-weight: 700; }
a.knopf:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
#nummerfehler:empty { display: none; }

/* ---------- Kopfleiste: eine Zeile (Tablet), zwei Zeilen (Handy) ---------- */
#kopf {
  background: var(--flaeche); z-index: 5; padding: 6px 8px; border-bottom: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between;
}
.zeile { display: flex; gap: 6px; align-items: center; }
.zeile.nav { flex: 1 1 100%; min-width: 0; }
.zeile.aktionen { flex: 1 1 100%; }
.zeile.nav h1 { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 6px; }
.zeile.nav button { min-height: 44px; padding: 4px 12px; flex: 0 0 auto; }
.zeile.nav #heute { font-weight: 600; }
.zeile.nav #hilfe { font-weight: 700; border-radius: 50%; padding: 0; width: 44px; }
.zeile.aktionen button { display: flex; align-items: center; gap: 6px; justify-content: center; padding: 4px 12px; flex: 1 1 auto; }
.zeile.aktionen .sym { font-size: 1.15em; line-height: 1; }
/* Beschriftung: ab 900 px das ausgeschriebene Wort; darunter das Kurzwort (data-kurz), nur ein Text sichtbar */
@media (max-width: 899px) {
  .zeile.aktionen .txt { font-size: 0; }
  .zeile.aktionen .txt::after { content: attr(data-kurz); font-size: 14px; }
}
/* Ab 700 px sticky; unter 1100 px zwei Zeilen (Datum bekommt die ganze Zeile), darüber eine Zeile */
@media (min-width: 700px) { #kopf { position: sticky; top: 0; } }
@media (min-width: 1100px) {
  #kopf { flex-wrap: nowrap; }
  .zeile.nav { flex: 1 1 auto; }
  .zeile.aktionen { flex: 0 1 auto; }
  .zeile.nav h1 { flex: 0 1 auto; }
  .zeile.nav #hilfe { margin-left: 6px; }
}
@media (max-width: 699px) {
  #kopf { padding: 4px 6px; gap: 4px; }
  .zeile.nav { gap: 4px; }
  .zeile.nav button { padding: 4px 8px; }
  .zeile.nav #hilfe { padding: 0; }
  .zeile.aktionen { gap: 4px; }
  .zeile.aktionen button { flex: 1 1 0; flex-direction: column; gap: 0; padding: 3px 1px; min-height: 50px; min-width: 0; }
  .zeile.aktionen .txt::after { font-size: 13px; line-height: 1.1; }
  .zeile.aktionen .sym { font-size: 18px; }
  .zeile.nav h1 { font-size: 1em; margin-left: 2px; }
}
/* schmale Handys (360/375 px): "Rückgängig" war 2 px breiter als der Knopf */
@media (max-width: 420px) { .zeile.aktionen .txt::after { font-size: 12px; } }

main { padding: 6px 8px 8px; }
.abstand-oben { margin-top: 16px; }

.geschlossen { text-align: center; font-size: 1.8em; padding: 40px 10px; background: var(--flaeche2); border-radius: 12px; }
.geschlossen .klein { display: block; font-size: .5em; margin-top: 10px; }
.banner { background: var(--warn-bg); border: 1px solid var(--warn-rand); border-radius: 10px; padding: 6px 12px; margin-bottom: 6px; }

.hinweis { display: flex; align-items: center; gap: 8px; background: var(--info-bg); border: 1px solid var(--blau); border-radius: 10px; padding: 3px 4px 3px 12px; margin-bottom: 4px; font-size: 16px; }
.hinweis span { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.hinweis small { display: block; font-size: 13px; }
@media (max-width: 699px) { .hinweis { font-size: 14px; } .hinweis small { font-size: 12px; } .hinweis button { font-size: 14px; padding: 4px 8px; } }
.hinweis button { flex: 0 0 auto; min-height: 40px; padding: 4px 12px; font-size: 15px; }

/* ---------- Tagesraster ---------- */
.gitter { display: grid; grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1fr); position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; overflow: clip; box-shadow: var(--schatten); }
.kopfzelle { position: sticky; top: var(--kopfhoehe, 0px); z-index: 4; height: 34px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; background: var(--flaeche2); border-bottom: 1px solid var(--linie); border-left: 1px solid var(--linie); padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopfzelle:first-child { border-left: 0; }
.spalte { position: relative; border-left: 1px solid var(--linie); cursor: pointer; }
.zeiten { position: relative; }
.zeiten span { position: absolute; right: 5px; font-size: 13px; line-height: 1; color: var(--text2); transform: translateY(-50%); background: var(--flaeche); padding: 0 1px; }
.zeiten span.stunde { font-size: 14px; font-weight: 700; color: var(--text); }
.zeiten span:first-child { transform: translateY(0); }
.zeiten span:last-child { transform: translateY(-100%); }
/* Raster alle 15 Min.: Stunde dick und durchgezogen, halbe Stunde mittel, Viertelstunde dünn gestrichelt (Unterschied nicht nur über die Farbe) */
.linie { position: absolute; left: 0; right: 0; pointer-events: none; }
.linie.stunde { border-top: 2px solid var(--raster-stark); }
.linie.halb { border-top: 1px solid var(--raster-mittel); }
.linie.viertel { border-top: 1px dashed var(--raster-dezent); }
.jetzt { position: absolute; left: 0; right: 0; border-top: 2px solid var(--jetzt); opacity: .85; pointer-events: none; z-index: 3; }
.jetzt::before { content: ""; position: absolute; left: -1px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--jetzt); }

/* ---------- Termin-Blöcke: je Leistung eine dezente Farbe (Akzent links, Tönung innen) ---------- */
.block {
  --ak: #3b82c4;
  position: absolute; overflow: hidden; border-radius: 8px; padding: 1px 6px 1px 7px; text-align: left;
  min-height: 0; min-width: 0; font-size: 14px; line-height: 1.15; color: var(--text); z-index: 2;
  /* Handy: Schrift mindestens 15 px (Regel unten) */
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
  background: color-mix(in srgb, var(--ak) 17%, var(--flaeche));
  border: 1px solid color-mix(in srgb, var(--ak) 45%, var(--flaeche));
  border-left: 4px solid var(--ak);
  box-shadow: var(--schatten);
}
.block.l-schneiden_damen, i.l-schneiden_damen { --ak: #3b82c4; }
.block.l-schneiden_herren, i.l-schneiden_herren { --ak: #2a9d8f; }
.block.l-foehnen_styling, i.l-foehnen_styling { --ak: #8e6bbf; }
.block.l-faerben_ansatz, i.l-faerben_ansatz { --ak: #d9822b; }
.block.l-faerben_komplett, i.l-faerben_komplett { --ak: #c8506b; }
.block.l-straehnen, i.l-straehnen { --ak: #b8941f; }

/* Zeichenerklärung */
.legende-zeile { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linie2); font-size: 16px; }
.legende-zeile:first-of-type { border-top: 0; }
.legende-muster { flex: 0 0 56px; display: flex; justify-content: center; align-items: center; font-size: 22px; min-height: 28px; }
.legende-schraffur { width: 44px; height: 24px; border: 1px solid var(--rand); border-radius: 4px; background: repeating-linear-gradient(45deg, rgba(60,70,80,.3) 0 5px, transparent 5px 10px); }
.legende-jetzt { display: block; width: 48px; border-top: 2px solid var(--jetzt); position: relative; }
.legende-jetzt::before { content: ""; position: absolute; left: -1px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--jetzt); }
.legende-farben { display: flex; gap: 3px; }
.legende-farben i { width: 6px; height: 24px; border-radius: 2px; background: var(--ak); }
.block:hover { filter: brightness(.98); }
.block .inhalt { display: block; width: 100%; flex: 1 1 0; min-height: 0; overflow: hidden; }
.block b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block .kn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block .kn.umbruch { white-space: normal; overflow: visible; text-overflow: clip; } /* Zeile 2 darf umbrechen, wenn der Block hoch genug ist (passeTextAn prüft die Höhe) */
.block b.inl { display: inline; font-size: inherit; overflow: visible; } /* einzeilig: fetter Kundenname vor "· Leistung" */
.kacheln .haken { font-weight: 800; margin-right: 5px; } /* Haken (und Nummer) auf gewählten Leistungs-Kacheln */
@media (max-width: 699px) { .block { font-size: 15px; } .block b { font-size: 16px; } .zeiten span { font-size: 14px; } }
.block.kurz .inhalt { white-space: nowrap; text-overflow: ellipsis; }
.block.kurz { justify-content: center; padding-top: 0; padding-bottom: 0; line-height: 1.05; }
.block.traeger { z-index: 1; }
.block.stapel { right: 2px; left: auto; width: 44px; min-height: 44px; justify-content: center; align-items: center; font-weight: bold; font-size: 16px; background: var(--warn-bg); border: 1px solid var(--warn-rand); border-left-width: 1px; z-index: 4; }
.block.innen { z-index: 3; box-shadow: 0 0 0 2px var(--flaeche); }
/* Status ohne Farbe: erledigt = Haken im Text und Rahmen; Einwirkzeit = Schraffur und Sanduhr */
/* Bestätigt (fertig): grüner Grund + Haken im Text + grüner Rahmen; die Leistungsfarbe bleibt als breiter Streifen links */
.block.fertig { background: color-mix(in srgb, var(--gruen) 30%, var(--flaeche)); border: 2px solid var(--gruen); border-left: 7px solid var(--ak); padding-left: 5px; font-weight: 600; }
.block.fertig.mit-ueberhang { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* Überhang / Restzeit: Streifen unter dem Block, hinter anderen Terminen (z-index 1), antippbar */
.zusatz { position: absolute; z-index: 1; padding: 0 4px; min-height: 0; min-width: 0; overflow: hidden; display: flex; align-items: flex-start; justify-content: flex-end; font-size: 13px; font-weight: 700; line-height: 1.1; color: var(--text); box-shadow: none; }
.zusatz.ueberhang { border: 2px solid var(--gruen); border-top: 0; border-left: 7px solid var(--ak); border-radius: 0 0 8px 8px; opacity: .8;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--gruen) 42%, var(--flaeche)) 0 6px, color-mix(in srgb, var(--gruen) 14%, var(--flaeche)) 6px 12px); }
.zusatz.rest { border: 2px dashed var(--gruen); border-top: 0; border-radius: 0 0 8px 8px; background: transparent; opacity: .9; color: var(--text2); }
.zusatz .etikett { background: var(--flaeche); border-radius: 4px; padding: 0 4px; white-space: nowrap; border: 1px solid var(--gruen); margin-top: 1px; }
.zusatz.rest .etikett { border-style: dashed; }
/* Beschriftung der Streifen: eigene Schicht über den Terminen, nie antippbar (der Streifen darunter bleibt die Fläche) */
.zusatz-etikett { position: absolute; z-index: 4; pointer-events: none; box-sizing: border-box; display: flex; align-items: flex-start; justify-content: flex-end; padding: 0 4px; overflow: hidden; font-size: 13px; font-weight: 700; line-height: 1.1; color: var(--text); }
.zusatz-etikett .etikett { background: var(--flaeche); border-radius: 4px; padding: 0 4px; white-space: nowrap; border: 1px solid var(--gruen); }
.zusatz-etikett.flach { font-size: 10px; line-height: 1; }
.zusatz-etikett.flach .etikett { padding: 0 3px; border-radius: 3px; }
.zusatz:hover:not(:disabled) { background-color: transparent; }
.legende-fertig, .legende-ueberhang, .legende-rest { display: flex; align-items: center; justify-content: center; width: 52px; height: 28px; font-size: 16px; font-weight: 700; border: 2px solid var(--gruen); border-radius: 6px; border-left-width: 6px; }
.legende-fertig { background: color-mix(in srgb, var(--gruen) 30%, var(--flaeche)); }
.legende-ueberhang { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--gruen) 42%, var(--flaeche)) 0 6px, color-mix(in srgb, var(--gruen) 14%, var(--flaeche)) 6px 12px); font-size: 14px; }
.legende-rest { border-style: dashed; border-left-style: dashed; font-size: 14px; }
.block.einwirk::after { content: ""; position: absolute; left: 0; right: 0; background: repeating-linear-gradient(45deg, rgba(60,70,80,.16) 0 5px, transparent 5px 10px); top: var(--e-top); height: var(--e-hoehe); pointer-events: none; }
.block.einwirk.kurz .inhalt { padding-right: 16px; }
.block.einwirk::before { content: "⏳"; position: absolute; right: 3px; bottom: 2px; font-size: 12px; line-height: 1; z-index: 1; }
.block.einwirk.kurz::before { top: 50%; bottom: auto; transform: translateY(-50%); }

.warnung { background: var(--warn-bg); border: 1px solid var(--warn-rand); border-radius: 10px; padding: 8px 12px; }
.knoepfe button.gross-ja { flex: 1 1 100%; min-height: 52px; font-size: 1.05em; }

/* ---------- Dialoge: kompakt, gruppiert ---------- */
dialog { border: 1px solid var(--linie); border-radius: 16px; padding: 14px 16px; max-width: min(560px, 96vw); width: 96vw; max-height: 94vh; overflow: auto; background: var(--flaeche); color: var(--text); box-shadow: 0 10px 40px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(10,20,30,.5); }
dialog h2 { font-size: 1.2em; margin: 0 0 8px; }
.reihe { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 8px 0; align-items: center; border-top: 1px solid var(--linie2); }
h2 + .reihe, h2 + div > .reihe:first-child { border-top: 0; }
.reihe > label { flex: 0 0 100%; font-weight: 600; font-size: 15px; color: var(--text2); }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; width: 100%; }
.kacheln button { min-height: 52px; font-size: 16px; padding: 4px 8px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.knoepfe button { flex: 1 1 130px; min-height: 48px; }
.gross-text { font-size: 1.1em; font-weight: 600; margin: 6px 0 8px; white-space: pre-line; }
.wert { font-size: 1.15em; font-weight: 700; min-width: 4.5em; text-align: center; }
select, input[type=text], input[type=tel], input[type=date], input[type=email], input[type=password] { min-height: 44px; padding: 4px 10px; border: 1px solid var(--rand); border-radius: 10px; background: var(--flaeche); color: var(--text); font-size: 16px; }
input[type=text], input[type=tel] { width: 100%; }
details { margin-top: 6px; border-top: 1px solid var(--linie2); }
summary { cursor: pointer; font-weight: 600; padding: 10px 0; min-height: 44px; }
.klein { font-size: 14px; color: var(--text2); }
dialog p.klein, dialog ul.klein { margin: 6px 0; }
dialog ul.klein { padding-left: 20px; }

#meldung { position: fixed; left: 8px; right: 8px; bottom: 8px; max-width: 640px; margin: 0 auto; background: #263238; color: #fff; padding: 8px 8px 8px 14px; border-radius: 12px; z-index: 50; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 16px; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
#meldung button { min-height: 40px; padding: 4px 12px; }
#meldung[hidden] { display: none; }
#meldung span { flex: 1 1 12em; }

button.gewaehlt .klein { color: #fff; }

/* Versteckt heißt versteckt (display:none), auch wenn ein Element sonst display:flex hat */
[hidden] { display: none !important; }

/* Anmeldebildschirm (nur im Online-Modus): mittige Karte auf ruhigem Hintergrund, sonst nichts */
body.anmeldemodus { background: var(--bg); }
#login:not([hidden]) {
  --karte: var(--flaeche);
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; transition: opacity .2s ease;
}
#login.aus { opacity: 0; }
.login-karte {
  width: 100%; max-width: 420px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 20px;
  padding: 32px 28px 24px; box-shadow: 0 8px 32px rgba(20,35,50,.10); animation: login-ein .35s ease both;
}
.login-kopf { text-align: center; margin-bottom: 24px; }
.login-logo { display: inline-flex; color: var(--blau-k); margin-bottom: 8px; }
.login-kopf h1 { font-size: 1.6em; letter-spacing: .01em; margin: 0 0 6px; }
.login-sub { margin: 0; color: var(--text2); font-size: 16px; line-height: 1.4; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-feld label { display: block; font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.login-feld input {
  width: 100%; min-height: 52px; padding: 8px 14px; font-size: 18px; color: var(--text);
  background: var(--bg); border: 1px solid var(--rand); border-radius: 12px;
}
.login-feld input[aria-invalid=true] { border-color: var(--rot); box-shadow: 0 0 0 1px var(--rot); }
.login-pw { position: relative; }
.login-pw input { padding-right: 112px; }
.login-zeigen {
  position: absolute; top: 4px; right: 4px; bottom: 4px; min-height: 44px; min-width: 96px; padding: 0 12px;
  border: 0; box-shadow: none; background: transparent; color: var(--blau-k); font-weight: 600; font-size: 16px;
}
@media (prefers-color-scheme: dark) { .login-zeigen, .login-logo { color: var(--blau); } }
.login-fehler { margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 16px; line-height: 1.4;
  background: var(--warn-bg); border: 1px solid var(--warn-rand); color: var(--text); }
.login-fehler:empty { display: none; }
.login-knopf {
  width: 100%; min-height: 54px; font-size: 18px; font-weight: 700; border-radius: 12px;
  background: var(--blau-k); border-color: var(--blau-k); color: #fff;
}
.login-knopf:hover:not(:disabled) { background: var(--blau-k); filter: brightness(1.1); }
.login-knopf.zweit { background: var(--flaeche); color: var(--text); border-color: var(--rand); font-weight: 600; }
.login-knopf:disabled { opacity: .7; cursor: progress; }
.login-knoepfe { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.login-hinweis { margin: 20px 0 0; text-align: center; font-size: 14px; color: var(--text2); }
@keyframes login-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.einblenden { animation: app-ein .35s ease both; }
@keyframes app-ein { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 420px) { #login:not([hidden]) { padding: 12px; } .login-karte { padding: 24px 18px 20px; border-radius: 16px; } }
@media (max-height: 480px) { #login:not([hidden]) { align-items: flex-start; } .login-kopf { margin-bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { .login-karte, .einblenden { animation: none; } #login:not([hidden]) { transition: none; } }

/* Verbindungsfehler (nur im Modus 'supabase'), bleibt sichtbar, bis es wieder klappt */
#verbindung:not([hidden]) { position: sticky; top: 0; z-index: 20; background: var(--rot); color: #fff; font-weight: 700; padding: 8px 14px; text-align: center; }