/* ---------- Modal ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(48,32,26,.5);display:flex;align-items:flex-end;
  justify-content:center;z-index:60;backdrop-filter:blur(2px);
  animation:dimIn .18s ease both;
}
@keyframes dimIn{from{opacity:0;}to{opacity:1;}}
@media(min-width:600px){.overlay{align-items:center;}}
.modal{
  background:var(--ground);width:100%;max-width:480px;max-height:88vh;overflow-y:auto;
  border-radius:26px 26px 0 0;padding:24px 22px calc(28px + env(safe-area-inset-bottom, 0px));
  /* Rises from the bottom edge it is attached to, rather than appearing. */
  animation:sheetIn .28s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes sheetIn{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}
@media(min-width:600px){
  .modal{border-radius:24px;padding-bottom:28px;animation-name:dialogIn;}
  /* Centred on a big screen, so it grows into place instead of sliding. */
  @keyframes dialogIn{from{opacity:0;transform:translateY(8px) scale(.975);}to{opacity:1;transform:none;}}
}

/* Hover belongs to a mouse. On a touchscreen these fire on tap and then
   stay on the element afterwards, which reads as a flash and a stuck
   highlight. Kept in their original order so the more specific ones
   still win. */
@media (hover:hover) and (pointer:fine){
  nav.topnav button:hover{color:var(--accent-deep);}
  .btn:hover{filter:brightness(1.05);}
  
  
  .st-btn.ok:hover{background:var(--ok-soft);}
  .st-btn.no:hover{background:var(--warn-soft);}
  .st-btn:hover{background:var(--accent-soft);color:var(--accent-deep);}
  .st-btn.del:hover{background:var(--warn-soft);color:var(--warn);}
  .search-wrap .sw-clear:hover{color:var(--accent-deep);background:var(--accent-soft);}
  
  
  .cf-chip:hover{border-color:var(--accent);color:var(--accent-deep);}
  .az-leiste button:hover{background:var(--accent-soft);color:var(--accent-deep);}
  .cpick-row:hover{background:var(--accent-soft);color:var(--accent-deep);}
  .cpick-clear:hover{background:var(--surface);}
  .spick-toggle:hover{border-color:var(--accent);}
  .spick-row:hover{background:var(--accent-soft);color:var(--accent-deep);}
}

/* ---------- A picture on the whole screen ---------- */
.lightbox{
  position:fixed;inset:0;z-index:80;
  background:rgba(28,18,14,.93);
  display:flex;align-items:center;justify-content:center;
  padding:calc(52px + env(safe-area-inset-top, 0px)) 14px
          calc(22px + env(safe-area-inset-bottom, 0px));
  animation:dimIn .18s ease both;
}
.lb-stage{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:100%;max-height:100%;
  animation:shotIn .26s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes shotIn{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:scale(1);}}
.lb-stage.from-right{animation:fromRight .28s cubic-bezier(.22,.9,.3,1) both;}
.lb-stage.from-left{animation:fromLeft .28s cubic-bezier(.22,.9,.3,1) both;}
@keyframes fromRight{from{opacity:0;transform:translateX(11%);}to{opacity:1;transform:none;}}
@keyframes fromLeft{from{opacity:0;transform:translateX(-11%);}to{opacity:1;transform:none;}}
.lb-stage img{
  max-width:100%;min-height:0;flex:0 1 auto;
  object-fit:contain;border-radius:14px;background:rgba(255,255,255,.06);
}
.lb-stage figcaption{
  display:flex;flex-direction:column;gap:3px;text-align:center;flex:none;
  color:#F6ECE6;max-width:34rem;
}
.lb-stage .c{
  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#E3B9A6;
}
.lb-stage .t{font-size:15px;font-weight:600;overflow-wrap:anywhere;}
.lb-stage .n{font-size:12.5px;line-height:1.45;color:#D6C3BA;overflow-wrap:anywhere;}
.lb-stage .p{font-size:11px;color:#BCA69C;margin-top:2px;}
.lb-close,.lb-step{
  position:absolute;z-index:2;cursor:pointer;
  background:rgba(24,14,11,.62);color:#FFF;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(3px);
}
.lb-close{
  top:calc(12px + env(safe-area-inset-top, 0px));right:14px;
  width:38px;height:38px;font-size:15px;line-height:1;padding:0;
}
.lb-step{top:50%;transform:translateY(-50%);width:42px;height:42px;}
.lb-step svg{width:20px;height:20px;}
.lb-step.prev{left:8px;}
.lb-step.next{right:8px;}
@media (min-width:600px){ .lb-step.prev{left:18px;} .lb-step.next{right:18px;} }

/* Someone who has asked their device for less motion gets none of this. */
@media (prefers-reduced-motion:reduce){
  main.view.enter,.cat-body.swap,.tagblatt.swap,.cat-body.unfold,.cpick-list.unfold,.overlay,.modal,
  .lightbox,.lb-stage,.lb-stage.from-right,.lb-stage.from-left,
  .spick-list.unfold{animation:none;}
}
.modal h3{
  font-family:var(--font-display);font-weight:600;font-size:23px;color:var(--ink);margin:0 0 18px;
  font-variation-settings:'opsz' 60,'SOFT' 40;letter-spacing:-.015em;
}
.modal-close{
  float:right;background:var(--surface-2);border:none;font-size:15px;color:var(--ink-soft);
  cursor:pointer;width:32px;height:32px;border-radius:50%;line-height:1;
}

/* ---------- Contact ---------- */
.toast{
  /* Mittig ueber die Raender statt ueber left:50% - sonst steht der Meldung
     nur die halbe Bildschirmbreite zur Verfuegung und der Text bricht um. */
  /* Ueber der Reiterleiste, die unten anliegt - samt dem Rand, den sie
     unter sich freihaelt (--leiste-unten, siehe Politur). */
  position:fixed;bottom:calc(78px + var(--leiste-unten, env(safe-area-inset-bottom, 0px)));left:16px;right:16px;margin:0 auto;width:fit-content;
  transform:translateY(14px) scale(.96);
  /* Schrift auf Grund - das staerkste Paar in jedem Design. Vorher weiss auf
     dem Akzent: im Zentivo-Design ist der fast weisses Silber, die Meldung
     war dort kaum zu lesen. */
  background:var(--ink);color:var(--ground);
  box-shadow:0 12px 30px rgba(0,0,0,.3);
  padding:13px 22px;border-radius:999px;font-size:13.5px;font-weight:600;
  line-height:1.35;letter-spacing:.01em;
  /* Ueber allem, auch ueber einem offenen Dialog - sonst verschwindet die
     Meldung dahinter. */
  z-index:120;
  max-width:100%;text-align:center;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease, transform .34s cubic-bezier(.22,.9,.3,1);
}
.toast.show{opacity:1;transform:translateY(0) scale(1);}
/* Steht ein Dialog offen, rutscht die Meldung ganz nach unten - sonst legt
   sie sich mitten auf seine Knoepfe. */
body:has(.overlay) .toast{bottom:22px;}
@media(min-width:760px){.toast{bottom:30px;}}






















/* Ein Hinweis, der etwas von dir will: fehlender Beleg, offener Termin,
   eine Grenze, die naeher rueckt. */
.buch-hinweis{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--alert-soft);border:1px solid var(--alert);border-radius:var(--radius-sm);
  padding:12px 13px;margin-bottom:12px;
}
.buch-hinweis.ruhig{background:var(--surface-2);border-color:var(--line);}
.buch-hinweis.warn{background:var(--warn-soft);border-color:var(--warn);}
.buch-hinweis > svg{width:19px;height:19px;flex:none;margin-top:1px;color:var(--alert);}
.buch-hinweis.ruhig > svg{color:var(--ink-soft);}
.buch-hinweis.warn > svg{color:var(--warn);}
.bh-txt{flex:1;min-width:0;font-size:12.5px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere;}
.bh-txt strong{font-weight:700;}
.bh-txt .btn{margin-top:8px;}






.bu-datum{
  flex:none;width:44px;font-size:11px;font-weight:700;line-height:1.2;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;text-align:center;
}
.bu-datum small{display:block;font-size:9px;font-weight:700;letter-spacing:.04em;opacity:.85;}


.bu-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.bu-txt .n{font-size:13px;font-weight:600;line-height:1.3;overflow-wrap:anywhere;}
.bu-txt .s{font-size:10.5px;line-height:1.3;color:var(--ink-soft);overflow-wrap:anywhere;}



.bu-marken{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px;}
.bu-mark{
  font-size:9.5px;font-weight:700;letter-spacing:.03em;padding:2px 7px;border-radius:999px;
  background:var(--surface-2);color:var(--ink-soft);
}
.bu-mark.fehlt{background:var(--alert-soft);color:var(--alert);}
.bu-mark.storno{background:var(--off-soft);color:var(--off);}
.bu-mark.bar{background:var(--accent-soft);color:var(--accent-deep);}
.bu-mark.fest{background:var(--ok-soft);color:var(--ok);}












/* Auswertung, Umsatzsteuer und Kassenbuch teilen dieselbe schlichte Tabelle. */
.bu-tab{display:flex;flex-direction:column;}
.bu-zeile{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:8px 2px;border-bottom:1px solid var(--line);font-size:12.5px;line-height:1.4;
}
.bu-zeile:last-child{border-bottom:none;}
.bu-zeile .bz-n{min-width:0;overflow-wrap:anywhere;}
.bu-zeile .bz-n small{display:block;font-size:10.5px;color:var(--ink-soft);margin-top:2px;}



.bu-zeile.klein{font-size:11.5px;color:var(--ink-soft);}













.bu-tipp{font-size:11.5px;line-height:1.5;color:var(--ink-soft);margin:-10px 0 16px;}

















































/* Die Liste zum Aussuchen: eine Zeile je Eintrag mit Kaestchen davor. */
.wahl-kopf{
  display:flex;align-items:center;gap:8px;
  margin:-4px 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line);
}
.wahl-kopf .wahl-zahl{
  margin-left:auto;font-size:11.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap;
}
.wahl-liste{
  display:flex;flex-direction:column;gap:6px;
  max-height:46vh;overflow-y:auto;
  margin:0 -4px;padding:2px 4px;
}
.wahl-zeile{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:8px 11px 8px 9px;
  transition:border-color .15s,background .15s;
}
.wahl-zeile.on{border-color:var(--warn);background:var(--warn-soft);}
.wahl-box{
  flex:none;width:19px;height:19px;margin:0;cursor:pointer;
  accent-color:var(--warn);
}
.wahl-zeile .bu-datum{width:40px;}
.wahl-rechts{
  flex:none;font-size:12px;font-weight:700;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.wahl-rechts.ein{color:var(--ok);}
.wahl-rechts.aus{color:var(--warn);}




















h1,h2,h3{font-weight:600;}