/* ---------- One-tap status: tick for happened, cross for cancelled ---------- */
.st-btn{
  background:none;border:1px solid transparent;cursor:pointer;
  padding:5px;border-radius:9px;display:flex;flex:none;color:var(--ink-soft);
  transition:background .15s,border-color .15s,transform .12s;
}
.st-btn svg{width:15px;height:15px;}
.st-btn:active{transform:scale(.94);}
.st-btn.ok{color:var(--ok);}
.st-btn.no{color:var(--warn);}
.st-btn.ok.on{background:var(--ok-soft);border-color:var(--ok);}
.st-btn.no.on{background:var(--warn-soft);border-color:var(--warn);}

.tag-done{
  display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;
  background:var(--ok-soft);color:var(--ok);white-space:nowrap;
}
.tag-open{
  display:inline-block;font-size:10px;font-weight:600;padding:2px 8px;border-radius:999px;
  white-space:nowrap;
  background:var(--surface-2);color:var(--ink-soft);
  border:1px dashed var(--line);
}
.state-line{margin-top:4px;}
.is-done .t,
.is-done .time,
.is-done .ca-time{background:var(--ok-soft);color:var(--ok);}
.ca-row.is-done .ca-date{color:var(--ok);}


/* ---------- Cancelled appointments: struck through, still readable ---------- */
.is-cancelled .t,
.is-cancelled .time,
.is-cancelled .ca-time{background:var(--off-soft);color:var(--off);}
.is-cancelled .t,
.is-cancelled .time,
.is-cancelled .ca-time,
.is-cancelled .who,
.is-cancelled .what,
.is-cancelled .svc,
.is-cancelled .ca-date,
.is-cancelled .ml-when,
.is-cancelled .ml-who{
  text-decoration:line-through;
  text-decoration-thickness:1px;
  text-decoration-color:var(--warn);
}
.tag-cancel{
  display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;
  background:var(--warn-soft);color:var(--warn);white-space:nowrap;
}
.cancel-why{
  font-size:10.5px;line-height:1.4;color:var(--warn);margin-top:3px;
  overflow-wrap:anywhere;
}

/* ---------- Customer file: appointment history ---------- */
.ca-row{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 13px;margin-bottom:8px;box-shadow:var(--shadow);
}
.ca-top{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;}
.ca-row.upcoming{border-left:3px solid var(--accent);}
.ca-row.past{background:var(--surface-2);border-color:transparent;box-shadow:none;}
.ca-date{
  font-family:var(--font-display);font-weight:700;font-size:13px;flex:none;
  font-variant-numeric:tabular-nums;color:var(--accent-deep);
}
.ca-row.past .ca-date{color:var(--ink-soft);}
.ca-row .svc{flex:1;min-width:0;font-size:13px;font-weight:600;overflow-wrap:anywhere;}
.ca-row .when{font-size:11.5px;color:var(--ink-soft);margin-top:4px;}
/* The same field the week and day lists use, one size down for this row. */
.ca-row .ca-time{
  display:inline-block;flex:none;
  font-family:var(--font-display);font-weight:600;font-size:12px;
  color:var(--wait);background:var(--wait-soft);
  padding:3px 8px;border-radius:8px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.ca-row.is-done .ca-time{background:var(--ok-soft);color:var(--ok);}
.ca-row .ca-acts{margin-top:7px;max-width:340px;}

/* ---------- Customer file: notices that need attention ---------- */
.flag-box{
  background:var(--warn-soft);border-radius:var(--radius-sm);
  border-left:3px solid var(--warn);
  padding:13px 15px;margin-bottom:12px;
}
.flag-box .ft{font-size:13px;font-weight:700;color:var(--warn);}
.flag-box .fw{font-size:12.5px;line-height:1.5;color:var(--ink);margin-top:4px;}
.flag-box .fn{font-size:11.5px;line-height:1.45;color:var(--ink-soft);margin-top:6px;}




/* Small and quiet in the file; a tap opens the picture full screen. */
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
@media (min-width:480px){ .photo-grid{grid-template-columns:repeat(5,1fr);} }
@media (min-width:700px){ .photo-grid{grid-template-columns:repeat(7,1fr);} }
.photo-item{position:relative;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);}
.photo-item img{width:100%;max-width:100%;aspect-ratio:1;object-fit:cover;display:block;}
.photo-item button.del{
  position:absolute;top:3px;right:3px;background:rgba(24,12,20,.5);color:#fff;border:none;
  border-radius:50%;width:17px;height:17px;cursor:pointer;font-size:8.5px;line-height:1;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);
  padding:0;
}

/* ---------- Month overview: what is coming up ---------- */
.ml-row{
  display:flex;gap:11px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 12px;margin-bottom:7px;box-shadow:var(--shadow);cursor:pointer;
}
.ml-row.is-today{border-color:var(--accent);}
.ml-when{
  font-family:var(--font-display);font-weight:700;font-size:13px;flex:none;min-width:72px;
  color:var(--accent-deep);font-variant-numeric:tabular-nums;line-height:1.3;
  white-space:nowrap;
}
.ml-when small{display:block;font-family:var(--font-body);font-size:9.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);margin-top:2px;}
.ml-row .avatar{width:30px;height:30px;align-self:center;}
@media (max-width:370px){ .ml-row .avatar{width:26px;height:26px;} }
.ml-body{flex:1;min-width:0;}
.ml-who{font-size:13px;font-weight:600;overflow-wrap:anywhere;}
.ml-what{font-size:11px;color:var(--ink-soft);margin-top:1px;overflow-wrap:anywhere;}

/* Ueberschrift, Blatt, Tag darunter - drei ruhige Bloecke statt Kaesten im
   Kasten. Der Monat steht gross, die Navigation rechts daneben. */
.cal-kopf{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  margin:2px 0 14px;
}
.ck-titel h1{
  font-family:var(--font-display);font-size:26px;font-weight:700;line-height:1.1;
  margin:0;letter-spacing:-.01em;color:var(--ink);
}
.ck-titel h1 span{color:var(--ink-soft);font-weight:400;}
.ck-titel p{margin:5px 0 0;font-size:12.5px;color:var(--ink-soft);}
.ck-nav{display:flex;align-items:center;gap:6px;flex:none;}
.cal-pfeil{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
}
.cal-pfeil svg{width:17px;height:17px;}
.cal-pfeil:active{transform:scale(.94);}
.cal-heute{
  height:36px;padding:0 13px;border-radius:999px;cursor:pointer;
  background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent-deep);
  font-family:var(--font-body);font-size:12.5px;font-weight:700;
}
.cal-heute:active{transform:scale(.96);}

/* Das Blatt traegt keine Kaestchen mehr: nur Zahlen, ein Kreis fuer heute
   und darunter ein Punkt je Termin. */
.cal-blatt{margin-bottom:18px;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal-dow{
  font-size:10px;text-align:center;color:var(--ink-soft);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding-bottom:8px;
}
.cal-tag{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* Keine Seitenverhaeltnis-Vorgabe: die wuerde die Breite an der Hoehe des
     Inhalts festmachen und das Raster auf schmalen Geraeten aus der Seite
     schieben. Die Spalte gibt die Breite vor, der Inhalt die Hoehe. */
  gap:2px;min-height:46px;width:100%;padding:4px 0 5px;cursor:pointer;
  background:none;border:1.5px solid transparent;border-radius:13px;color:var(--ink);
  font-family:var(--font-body);
}
.cal-tag.pad{cursor:default;}
.ct-zahl{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  font-size:14.5px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1;
}
.cal-tag.vorbei .ct-zahl{color:var(--ink-soft);opacity:.85;}
.cal-tag.heute .ct-zahl{background:var(--accent);color:var(--on-accent);font-weight:700;opacity:1;}
.cal-tag.sel{border-color:var(--accent);}
.cal-tag.sel .ct-zahl{font-weight:700;}
.cal-tag:active{transform:scale(.94);}
/* Die Marken unter der Zahl sagen ohne Worte, was der Tag traegt: eine
   Person fuer den Termin, ein Kreuz fuer die Absage, eine Uhr fuer das freie
   Zeitfenster. Jedes Zeichen bekommt seine Groesse vorgeschrieben - ohne die
   nimmt sich ein SVG, was es findet, und zieht die Zelle auseinander. */
.ct-punkte{display:flex;gap:4px;height:10px;align-items:center;}
.ct-punkte i{display:flex;align-items:center;gap:1px;}
.ct-punkte i svg{width:11px;height:11px;flex:none;}
/* Die Anzahl steht neben ihrem Zeichen, nicht darauf - auf elf Pixeln
   bleibt eine aufgesetzte Ziffer nicht lesbar. */
.ct-punkte i b{
  font-size:8.5px;font-weight:700;line-height:1;
  /* <i> kippt seinen Inhalt schraeg - die Zahl soll gerade stehen. */
  font-style:normal;font-variant-numeric:tabular-nums;
}
/* Umrisszeichnungen sind fuer diese Groesse zu fein gezogen - hier duerfen
   sie kraeftiger sein als ueberall sonst in der App. */
.ct-punkte i.frei svg{stroke-width:2.6;}
.ct-punkte i.termin{color:var(--accent);}
.ct-punkte i.ab{color:var(--off);}
.ct-punkte i.frei{color:var(--ok);}
.cal-tag.vorbei .ct-punkte i{opacity:.5;}
@media (max-width:400px){
  .ct-zahl{width:26px;height:26px;font-size:13.5px;}
  .cal-tag{min-height:42px;border-radius:11px;padding:3px 0 4px;}
  /* Auf einem schmalen Handy ist eine Spalte keine 45 Pixel breit - das Wort
     rueckt enger zusammen, statt abgeschnitten zu werden. */
  .ct-zu{font-size:6.5px;letter-spacing:-.03em;}
  .ct-zu .zz{font-size:8px;margin-right:1px;}
  /* Auf einem schmalen Handy ist eine Spalte keine 45 Pixel breit - dort
     ruecken Zeichen und Zahl enger zusammen, statt aus dem Tag zu laufen. */
  .ct-punkte{gap:2px;}
  .ct-punkte i svg{width:9.5px;height:9.5px;}
  .ct-punkte i b{font-size:7.5px;}
}

.cal-legende{
  display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;
  margin-top:12px;font-size:10.5px;color:var(--ink-soft);
}
.cal-legende span{display:inline-flex;align-items:center;gap:5px;}
.cal-legende i{display:flex;flex:none;}
.cal-legende i svg{width:12px;height:12px;}
.cal-legende i.frei svg{stroke-width:2.4;}
.cal-legende .lg-punkt{color:var(--accent);}
.cal-legende .lg-punkt.ab{color:var(--off);}
.cal-legende .lg-frei{color:var(--ok);}

/* Der gewaehlte Tag: alles offen, nichts zum Aufklappen. */
.tagblatt{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 13px 4px;box-shadow:var(--shadow);
}
.tb-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line);
}
.tb-wann strong{display:block;font-family:var(--font-display);font-size:18px;line-height:1.15;}
.tb-wann span{font-size:12px;color:var(--ink-soft);}
.tb-tasten{display:flex;gap:7px;flex:none;}
.tb-teil{margin-bottom:12px;}
.tb-label{
  font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:8px;
}
/* Ein vergebenes Fenster steht nicht mehr in der Liste - diese Zeile sagt,
   dass es das trotzdem noch gibt. */
.tb-zu{
  margin:8px 2px 0;font-size:11.5px;line-height:1.5;color:var(--ink-soft);
}
.tb-leer{
  background:var(--surface-2);border-radius:var(--radius-sm);
  padding:16px 14px;font-size:13px;color:var(--ink-soft);text-align:center;
}
@media (max-width:400px){
  .tb-kopf{align-items:flex-start;}
  .tb-tasten{width:100%;}
  .tb-tasten .btn{flex:1;}
}