/* Bis feststeht, welches Design gilt, bleibt der Inhalt unsichtbar - sonst
   blitzt beim Start kurz das Standarddesign auf. Die Animation ist die
   Notbremse: spaetestens nach 2,4 Sekunden zeigt sich die App auch dann,
   wenn beim Laden etwas klemmt. */
html[data-boot], html[data-boot] body{ background:transparent; }
html[data-boot] #app{
  visibility:hidden;
  animation:bootZeig 0s linear 2.4s forwards;
}
@keyframes bootZeig{ to{ visibility:visible; } }

/* ---------- Tokens: one light palette, used in every theme ---------- */
:root{
  color-scheme: light;
  /* A warm, dimmed daylight: the page is a soft beige rather than near-white,
     and a card is a light warm tone instead of pure white. Everything keeps
     its rose character, it just stops glaring on a bright screen. */
  --ground:#EDDFD8;
  /* Same colour as --ground, as channels, so the tab-bar scrim can fade
     it to fully transparent without going through grey. */
  --ground-rgb:237,223,216;
  --ground-2:#E3D2C9;
  --surface:#FBF5F1;
  --surface-2:#F0E1D9;
  --ink:#33251F;
  --ink-soft:#6F5C55;
  --accent:#9B6856;
  --accent-deep:#82513F;
  --accent-soft:#EEDBD2;
  --on-accent:#FFFFFF;
  --rose:#CE8B7F;
  --rose-soft:#F2DCD5;
  --line:#DFCBC1;
  /* Die beiden Planer - Woche und Monat - tragen einen eigenen Ton mit
     kraeftigerem Rand. So sieht man in jedem Design, dass ein Tag ein
     eigenes Kaestchen ist und nicht Teil des Hintergrunds. */
  --planer:#F7F5F3;
  --planer-line:#CDC2BC;
  /* Der heutige Tag faerbt im Wochenplan die ganze Spalte, nicht nur
     die Zahl - in jedem Design ein Hauch des eigenen Akzents. */
  --planer-heute:#F7E0D3;
  --warn:#9C2C17;
  --warn-soft:#F2D5CB;
  --ok:#2F5F47;
  --ok-soft:#DAE7DD;
  --alert:#9C4C0C;
  --alert-soft:#F6E1C9;
  --danger:#C4250F;
  /* An appointment that is still open reads yellow, one that was cancelled a
     clear red - the same three colours wherever an appointment shows up. */
  --wait:#7D5905;
  --wait-soft:#F8E6C0;
  --off:#B8210D;
  --off-soft:#F8DFD8;
  --on-danger:#FFFFFF;
  --alert-fill:#D4850B;
  /* On a dimmer ground a card needs a slightly deeper shadow to keep lifting
     off it. */
  --shadow:0 1px 2px rgba(74,42,30,.07), 0 10px 26px rgba(74,42,30,.09);
  --shadow-lift:0 4px 10px rgba(104,56,38,.15), 0 12px 26px rgba(104,56,38,.12);
  --radius:20px;
  --radius-sm:14px;
  /* Eine Schrift fuer alles - so hat Evi es gewollt: schlicht, modern und
     neutral statt verspielt. Ueberschriften unterscheiden sich nur durch
     Gewicht und engeren Satz, nicht durch eine zweite Schrift. */
  --font-display:'Instrument Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-body:'Instrument Sans','Segoe UI',system-ui,-apple-system,sans-serif;
}
/* The app commits to one light look. Whether the viewer's device is in dark
   mode, or they picked dark explicitly (which stamps data-theme on the root),
   the palette above is the only one defined, so it always applies.
   color-scheme is restated at the stamped selectors' own specificity so the
   native date and time pickers, dropdowns and scrollbars stay light too. */
:root,
:root[data-theme="dark"],
:root[data-theme="light"]{ color-scheme: light; }

*{box-sizing:border-box;}
/* Mobile browsers paint a grey rectangle over whatever you touch; that
   flash was the flicker on every press. */
html{-webkit-tap-highlight-color:transparent;}
/* Author styles beat the browser's own [hidden] rule, so any element this
   app hides through el.hidden while also setting display needs this. */
[hidden]{display:none!important;}
html,body{margin:0;padding:0;min-height:100%;}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
/* Rounded ends make every icon in the app read softer. */
svg{stroke-linecap:round;stroke-linejoin:round;}
#app{max-width:920px;margin:0 auto;padding-bottom:118px;}
a{color:var(--accent-deep);}
button{font-family:inherit;color:inherit;}
.focus-ring:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px;}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;}}