/* Design "ruhig" – Warm & ruhig (docs/DESIGN.md §1).
   Things/Headspace feeling: cream page with a soft warm glow, near-white surfaces without hard
   lines, lots of air, very soft large shadows, rounded corners (16/20 px), coral as the one
   accent (coral → rose for the main action), pastel tones for the four fields, sage green for
   "geschafft". Dark: warm dark grey (never black), light coral, muted pastel fields.
   Headings and UI words: Nunito 800/700, body text Atkinson Hyperlegible.
   Language of states: "chosen" = peach fill + coral ring (chips, segments, tabs, cards),
   "done" = sage, "urgent" = butter highlighter. Token contract: see the head of pop.css. */

/* @light */
[data-design="ruhig"] {
  color-scheme: light;
  --bg: #FAF5EE;
  --surface: #FFFEFB;
  --surface-2: #F3ECE2;
  --ink: #2F2924;
  --ink-soft: #6B6056;
  --line: #ECE3D7;
  --field-border: #958979;
  --accent: #BF4536;
  --accent-ink: #FFFFFF;
  --accent-soft: #FDE5DC;
  --accent-gradient: linear-gradient(135deg, #C64D36 0%, #B73F45 100%);
  --marker: #FCE7A8;
  --marker-ink: #2F2924;
  --ok: #3D7A55;
  --ok-ink: #FFFFFF;
  --ok-soft: #E3F0E3;
  --danger: #9E3450;
  --danger-ink: #FFFFFF;
  --danger-soft: #F8E2E6;
  --q-sofort: #FDE3D9;
  --q-sofort-ink: #8E3521;
  --q-planen: #DFEBF7;
  --q-planen-ink: #285A80;
  --q-schnell: #FBEFCB;
  --q-schnell-ink: #6E4E0B;
  --q-spaeter: #E5EEDF;
  --q-spaeter-ink: #45593C;
  --radius: 16px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(110, 72, 40, .05), 0 8px 26px -6px rgba(110, 72, 40, .12);
  --shadow-lg: 0 2px 6px rgba(110, 72, 40, .05), 0 26px 60px -14px rgba(110, 72, 40, .26);
  --font-head: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tile-gap: 12px;
  --focus: #2D6E8E;
  --head-scale: 1.04;
  --head-weight: 800;
  --head-tracking: -0.012em;
  --backdrop: rgba(62, 42, 28, .34);
}

/* @dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-design="ruhig"],
  :root:not([data-theme="light"]) [data-design="ruhig"] {
    color-scheme: dark;
    --bg: #1E1C1A;
    --surface: #2A2623;
    --surface-2: #36312C;
    --ink: #F5EEE6;
    --ink-soft: #C4B8AB;
    --line: #3E3833;
    --field-border: #8F8478;
    --accent: #FF9F88;
    --accent-ink: #2B0F08;
    --accent-soft: #46281F;
    --accent-gradient: linear-gradient(135deg, #FFAD8F 0%, #FF8A7A 100%);
    --marker: #5A4A22;
    --marker-ink: #FFE7A6;
    --ok: #8FD3A0;
    --ok-ink: #0F2416;
    --ok-soft: #22352A;
    --danger: #FF9DB0;
    --danger-ink: #2E0A14;
    --danger-soft: #45222B;
    --q-sofort: #48291F;
    --q-sofort-ink: #FFC4B3;
    --q-planen: #1F3446;
    --q-planen-ink: #AAD3F0;
    --q-schnell: #443821;
    --q-schnell-ink: #F3D68D;
    --q-spaeter: #2C3528;
    --q-spaeter-ink: #C7D6B7;
    --shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 12px 32px -8px rgba(0, 0, 0, .5);
    --shadow-lg: 0 2px 8px rgba(0, 0, 0, .3), 0 28px 64px -12px rgba(0, 0, 0, .7);
    --focus: #8CC8EE;
    --backdrop: rgba(8, 6, 4, .6);
  }
}
:root[data-theme="dark"][data-design="ruhig"],
:root[data-theme="dark"] [data-design="ruhig"] {
  color-scheme: dark;
  --bg: #1E1C1A;
  --surface: #2A2623;
  --surface-2: #36312C;
  --ink: #F5EEE6;
  --ink-soft: #C4B8AB;
  --line: #3E3833;
  --field-border: #8F8478;
  --accent: #FF9F88;
  --accent-ink: #2B0F08;
  --accent-soft: #46281F;
  --accent-gradient: linear-gradient(135deg, #FFAD8F 0%, #FF8A7A 100%);
  --marker: #5A4A22;
  --marker-ink: #FFE7A6;
  --ok: #8FD3A0;
  --ok-ink: #0F2416;
  --ok-soft: #22352A;
  --danger: #FF9DB0;
  --danger-ink: #2E0A14;
  --danger-soft: #45222B;
  --q-sofort: #48291F;
  --q-sofort-ink: #FFC4B3;
  --q-planen: #1F3446;
  --q-planen-ink: #AAD3F0;
  --q-schnell: #443821;
  --q-schnell-ink: #F3D68D;
  --q-spaeter: #2C3528;
  --q-spaeter-ink: #C7D6B7;
  --shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 12px 32px -8px rgba(0, 0, 0, .5);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, .3), 0 28px 64px -12px rgba(0, 0, 0, .7);
  --focus: #8CC8EE;
  --backdrop: rgba(8, 6, 4, .6);
}

/* ========================================================== ruhig specifics */
/* Everything below is scoped to [data-design="ruhig"] and uses the tokens above only. */

/* Coloured shadows (main action, quick capture, highlighted tile): a warm coral haze in light,
   a plain dark shadow in dark mode (a light "shadow" on a dark page would read as neon). */
[data-design="ruhig"] {
  --ruhig-glow: color-mix(in srgb, var(--accent) 55%, transparent);
  --ruhig-glow-soft: color-mix(in srgb, var(--accent) 22%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-design="ruhig"],
  :root:not([data-theme="light"]) [data-design="ruhig"] {
    --ruhig-glow: rgba(0, 0, 0, .55);
    --ruhig-glow-soft: rgba(0, 0, 0, .3);
  }
}
:root[data-theme="dark"][data-design="ruhig"],
:root[data-theme="dark"] [data-design="ruhig"] {
  --ruhig-glow: rgba(0, 0, 0, .55);
  --ruhig-glow-soft: rgba(0, 0, 0, .3);
}

/* ------------------------------------------------------------- atmosphere */
/* A soft warm glow at the top of the page (a sunrise, not a pattern); the sticky top bar is
   frosted instead of drawing a line. */
@media screen {
  :root[data-design="ruhig"] body,
  .design-preview[data-design="ruhig"] {
    background-image:
      radial-gradient(120% 360px at 88% -140px, color-mix(in srgb, var(--accent-soft) 85%, transparent), transparent 72%),
      radial-gradient(90% 300px at 0% -120px, color-mix(in srgb, var(--marker) 38%, transparent), transparent 70%);
    background-repeat: no-repeat;
  }
}
[data-design="ruhig"] .topbar {
  border-bottom-color: transparent;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}
[data-design="ruhig"] .brand__mark { border-radius: 11px; box-shadow: 0 4px 12px -4px var(--ruhig-glow); }
[data-design="ruhig"] .icon-btn:hover { background: color-mix(in srgb, var(--surface-2) 80%, transparent); }
[data-design="ruhig"] .eyebrow { letter-spacing: .01em; }
[data-design="ruhig"] .page-header { margin-bottom: var(--space-5); }

/* ------------------------------------------------- bottom bar as a soft dock */
/* Same place, same five entries – it only floats a little above the edge. */
@media screen and (max-width: 899.98px) {
  :root[data-design="ruhig"] { scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  :root[data-design="ruhig"] body { padding-bottom: calc(var(--bar-h) + 34px + env(safe-area-inset-bottom)); }
  [data-design="ruhig"] .bottomnav {
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 4px; border: 0; border-radius: 26px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: var(--shadow-lg);
  }
  [data-design="ruhig"] .bottomnav a { border-radius: 22px; }
  /* The page fades into the background below the dock instead of showing text in the gap. */
  :root[data-design="ruhig"] body[data-chrome]::after {
    content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 19; pointer-events: none;
    height: calc(var(--bar-h) + 30px + env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg) 55%);
  }
  [data-design="ruhig"] .toast-region,
  [data-design="ruhig"] .quick-capture { bottom: calc(var(--bar-h) + 30px + env(safe-area-inset-bottom)); }
  [data-design="ruhig"] [data-error-box] { bottom: calc(var(--bar-h) + 36px + env(safe-area-inset-bottom)); }
}
[data-design="ruhig"] .bottomnav a[aria-current="page"] { color: var(--accent); font-weight: 800; }
[data-design="ruhig"] .bottomnav a[aria-current="page"] .icon { background: var(--accent-soft); color: var(--accent); }
[data-design="ruhig"] .gallery-phone .bottomnav { margin: 0 10px 10px; padding: 4px; border: 0; border-radius: 26px; box-shadow: var(--shadow-lg); }
@media (min-width: 900px) {
  [data-design="ruhig"] .topnav a[aria-current="page"] { color: var(--ink); background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
}

/* ------------------------------------------------------ quick capture (FAB) */
[data-design="ruhig"] .quick-capture__btn {
  --focus: var(--ink);
  background: var(--accent-gradient); color: var(--accent-ink);
  box-shadow: 0 2px 4px var(--ruhig-glow-soft), 0 14px 30px -8px var(--ruhig-glow);
}

/* ------------------------------------------------------------------ toasts */
[data-design="ruhig"] .toast { border-radius: 22px; padding-left: 20px; }
[data-design="ruhig"] .toast__undo { box-shadow: none; }

/* ------------------------------------------------------------- bottom sheet */
[data-design="ruhig"] .sheet { border-radius: 30px 30px 0 0; box-shadow: inset 0 1px 0 var(--line), var(--shadow-lg); }
[data-design="ruhig"] .sheet__handle { height: 28px; }
[data-design="ruhig"] .sheet__handle::before { width: 40px; height: 5px; background: var(--field-border); opacity: .4; }
[data-design="ruhig"] .sheet__header { padding-left: 20px; padding-right: 12px; }
[data-design="ruhig"] .sheet__content { padding-left: 20px; padding-right: 20px; }
[data-design="ruhig"] .sheet__close { background: var(--surface-2); }
/* ::backdrop does not inherit custom properties in every browser – the token where it does,
   a calm warm dim otherwise. */
[data-design="ruhig"] dialog.sheet::backdrop {
  background: var(--backdrop, rgba(46, 32, 22, .4));
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
@media (min-width: 900px) {
  [data-design="ruhig"] dialog.sheet { border-radius: 28px; }
}

/* ---------------------------------------------------------- cards and lists */
[data-design="ruhig"] .card,
[data-design="ruhig"] .tile,
[data-design="ruhig"] .kpi,
[data-design="ruhig"] .quad,
[data-design="ruhig"] .counter-btn { border-color: transparent; }
[data-design="ruhig"] .card { padding: 18px; }
[data-design="ruhig"] .card--ok,
[data-design="ruhig"] .card--danger { border-left: 0; }
[data-design="ruhig"] .card--ok { box-shadow: inset 5px 0 0 var(--ok), var(--shadow); }
[data-design="ruhig"] .card--danger { box-shadow: inset 5px 0 0 var(--danger), var(--shadow); }
[data-design="ruhig"] .list-item--urgent { border-radius: 14px; }
[data-design="ruhig"] .kpi { padding: 14px 16px; }
[data-design="ruhig"] .table-wrap { box-shadow: var(--shadow); }
[data-design="ruhig"] .table th { background: var(--surface-2); }

/* Notices and messages: a soft fill and a small round dot instead of a hard edge. */
[data-design="ruhig"] .message,
[data-design="ruhig"] .notice--ok,
[data-design="ruhig"] .notice--danger {
  position: relative; border-left: 0; border-radius: var(--radius-lg); padding-left: 40px;
}
[data-design="ruhig"] .message::before,
[data-design="ruhig"] .notice--ok::before,
[data-design="ruhig"] .notice--danger::before {
  content: ""; position: absolute; left: 18px; top: calc(var(--space-3) + .75em - 5px);
  width: 10px; height: 10px; border-radius: 50%; background: var(--ink-soft);
}
[data-design="ruhig"] .message--success { background: var(--ok-soft); box-shadow: none; }
[data-design="ruhig"] .message--success::before,
[data-design="ruhig"] .notice--ok::before { background: var(--ok); }
[data-design="ruhig"] .message--error { box-shadow: none; }
[data-design="ruhig"] .message--error::before,
[data-design="ruhig"] .notice--danger::before { background: var(--danger); }
[data-design="ruhig"] .message--warning { box-shadow: none; }
[data-design="ruhig"] .message--warning::before { background: var(--marker-ink); }

/* ----------------------------------------------------------------- buttons */
/* Kept weak (:where) so module rules for special buttons (icon-only, e.g. the rule search) win. */
:where([data-design="ruhig"]) .btn { border-radius: var(--radius); padding-left: 22px; padding-right: 22px; }
:where([data-design="ruhig"]) .btn--small { padding-left: 16px; padding-right: 16px; }
[data-design="ruhig"] .btn--primary {
  box-shadow: 0 1px 2px var(--ruhig-glow-soft), 0 10px 24px -8px var(--ruhig-glow);
}
[data-design="ruhig"] .btn--primary:hover { filter: brightness(1.05); }
[data-design="ruhig"] .btn--outline { border-color: var(--field-border); }
[data-design="ruhig"] .btn--ghost { color: var(--ink); }
[data-design="ruhig"] .link-btn { text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); text-underline-offset: 4px; }

/* ------------------------------------------------- badges, stickers, chips */
[data-design="ruhig"] .badge { padding: 2px 11px; }
[data-design="ruhig"] .badge--ok,
[data-design="ruhig"] .badge--danger { box-shadow: none; }
[data-design="ruhig"] .badge--ok::before,
[data-design="ruhig"] .badge--danger::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none;
}
[data-design="ruhig"] .badge--danger::before { background: var(--danger); }
/* Stickers are calm pills: no tilt, no shadow. */
[data-design="ruhig"] .sticker { border-radius: 999px; transform: none; box-shadow: none; padding: 2px 11px; letter-spacing: .01em; }
[data-design="ruhig"] .chip { border-color: transparent; background: var(--surface-2); }

/* Chosen = peach fill + coral ring (chips, filter chips, tabs, segments, design cards). */
[data-design="ruhig"] .chip-btn { border-color: var(--line); }
[data-design="ruhig"] .chip-btn:hover { border-color: var(--field-border); }
[data-design="ruhig"] .chip-btn[aria-pressed="true"],
[data-design="ruhig"] .chip-btn:has(input:checked),
[data-design="ruhig"] .chip-btn[aria-current="page"],
[data-design="ruhig"] .chip-btn[aria-current="true"] {
  background: var(--accent-soft); border-color: var(--accent); color: var(--ink); font-weight: 800;
}
[data-design="ruhig"] .segmented,
[data-design="ruhig"] .chips--segment { padding: 4px; background: var(--surface-2); }
[data-design="ruhig"] .segmented > .chip-btn,
[data-design="ruhig"] .chips--segment > .chip-btn { border: 0; background: transparent; color: var(--ink-soft); }
[data-design="ruhig"] .segmented > .chip-btn[aria-pressed="true"],
[data-design="ruhig"] .segmented > .chip-btn[aria-current="page"],
[data-design="ruhig"] .segmented > .chip-btn:has(input:checked),
[data-design="ruhig"] .chips--segment > .chip-btn[aria-pressed="true"],
[data-design="ruhig"] .chips--segment > .chip-btn:has(input:checked) {
  background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--accent), 0 4px 12px -4px var(--ruhig-glow-soft);
}
[data-design="ruhig"] .tabs a { background: transparent; color: var(--ink-soft); box-shadow: inset 0 0 0 2px var(--line); }
[data-design="ruhig"] .tabs a:hover { color: var(--ink); }
[data-design="ruhig"] .tabs a[aria-current="page"] {
  background: var(--accent-soft); color: var(--ink); font-weight: 800; box-shadow: inset 0 0 0 2px var(--accent);
}
[data-design="ruhig"] .design-card { border-color: var(--line); }
[data-design="ruhig"] .design-card[aria-pressed="true"],
[data-design="ruhig"] .swatch[aria-pressed="true"] {
  border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); background: var(--accent-soft);
}
[data-design="ruhig"] .swatch { border-color: var(--line); }

/* ------------------------------------------------------------------- forms */
[data-design="ruhig"] input[type="text"], [data-design="ruhig"] input[type="email"],
[data-design="ruhig"] input[type="password"], [data-design="ruhig"] input[type="number"],
[data-design="ruhig"] input[type="date"], [data-design="ruhig"] input[type="time"],
[data-design="ruhig"] input[type="datetime-local"], [data-design="ruhig"] input[type="search"],
[data-design="ruhig"] input[type="tel"], [data-design="ruhig"] input[type="url"],
[data-design="ruhig"] input[type="month"], [data-design="ruhig"] select, [data-design="ruhig"] textarea {
  border-radius: 14px; padding-left: 16px; padding-right: 16px;
}
[data-design="ruhig"] input:focus-visible, [data-design="ruhig"] select:focus-visible,
[data-design="ruhig"] textarea:focus-visible { box-shadow: 0 0 0 5px color-mix(in srgb, var(--focus) 18%, transparent); }
[data-design="ruhig"] fieldset { border-color: var(--line); border-radius: var(--radius-lg); }
[data-design="ruhig"] input[type="checkbox"].toggle { border-color: transparent; background: var(--field-border); }
[data-design="ruhig"] input[type="checkbox"].toggle::after { background: var(--surface); box-shadow: var(--shadow); }
[data-design="ruhig"] input[type="checkbox"].toggle:checked { background: var(--ok); }
[data-design="ruhig"] input[type="checkbox"].toggle:checked::after { background: var(--ok-ink); }

/* -------------------------------------------------------------- story bar */
/* Open = soft track, next = coral ring with a warm halo, done = sage ring with a check. */
[data-design="ruhig"] .stories { gap: 8px; }
[data-design="ruhig"] .story__ring {
  padding: 4px;
  background: conic-gradient(var(--accent) calc(var(--progress) * 360deg), color-mix(in srgb, var(--field-border) 35%, var(--line)) 0);
}
[data-design="ruhig"] .story__inner { border-width: 3px; }
[data-design="ruhig"] .story--done .story__ring { background: var(--ok); }
[data-design="ruhig"] .story--done .story__inner { background: var(--ok-soft); color: var(--ok); }
[data-design="ruhig"] .story--next .story__ring {
  background: var(--accent-gradient);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent), 0 8px 20px -6px var(--ruhig-glow);
}
[data-design="ruhig"] .story--next .story__inner { background: var(--accent-soft); color: var(--ink); }
[data-design="ruhig"] .story--next .story__label { color: var(--ink); font-weight: 800; }
[data-design="ruhig"] .story__label { color: var(--ink-soft); }

/* ------------------------------------------------------------------ tiles */
/* Calm cards; the icon sits in a small peach bubble (the person's colour when the tile has one). */
[data-design="ruhig"] .tile { padding: 16px; gap: 8px; }
[data-design="ruhig"] .tile__label { gap: 8px; }
[data-design="ruhig"] .tile__label .icon {
  box-sizing: content-box; width: 16px; height: 16px; padding: 6px; border-radius: 11px;
  background: var(--accent-soft); color: var(--accent);
}
[data-design="ruhig"] .tile[data-color] .tile__label .icon { background: var(--person-soft); color: var(--person); }
[data-design="ruhig"] .tile[data-color]:has(.tile__label .icon) .tile__label::before { display: none; }
[data-design="ruhig"] .tile--accent {
  background: linear-gradient(150deg, var(--accent-soft) 0%, color-mix(in srgb, var(--accent-soft) 55%, var(--surface)) 100%);
  color: var(--ink);
  box-shadow: 0 2px 4px var(--ruhig-glow-soft), 0 16px 34px -14px var(--ruhig-glow);
}
[data-design="ruhig"] .tile--accent .tile__label { color: var(--ink); }
[data-design="ruhig"] .tile--accent .tile__preview { color: var(--ink-soft); }
[data-design="ruhig"] .tile--accent .tile__value { color: var(--accent); }
[data-design="ruhig"] .tile--accent .tile__label .icon,
[data-design="ruhig"] .tile--accent[data-color] .tile__label .icon {
  background: var(--accent-gradient); color: var(--accent-ink);
}
[data-design="ruhig"] .tile--urgent .tile__label .icon,
[data-design="ruhig"] .tile--urgent[data-color] .tile__label .icon {
  background: color-mix(in srgb, var(--marker-ink) 12%, transparent); color: var(--marker-ink);
}
[data-design="ruhig"] .tile__value { letter-spacing: -0.02em; }
/* Phones: Heute's overview fits one screen and ends above the quick-capture button
   (docs/DESIGN.md §3) – a little less air inside the tiles than on a tablet. */
@media (max-width: 639px) {
  [data-design="ruhig"] .tiles { --tile-gap: 10px; }
  [data-design="ruhig"] .tile { padding: 12px 14px; gap: 4px; }
  [data-design="ruhig"] .tile__label { gap: 6px; }
  [data-design="ruhig"] .tile__label .icon { padding: 5px; }
}
@media (max-width: 639px) and (max-height: 740px) {
  [data-design="ruhig"] .tile { padding: 10px 12px; gap: 2px; }
  [data-design="ruhig"] .tile__label .icon { width: 14px; height: 14px; padding: 4px; border-radius: 9px; }
  [data-design="ruhig"] .tile__preview { -webkit-line-clamp: 1; line-clamp: 1; }
}

/* --------------------------------------------------------- compact matrix */
[data-design="ruhig"] .quad { padding: 14px; gap: 8px; }
[data-design="ruhig"] .quad__title { font-size: .92rem; }
[data-design="ruhig"] .quad__item {
  padding: 5px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}
[data-design="ruhig"] .quad__item--avatar { padding-left: 5px; }
[data-design="ruhig"] a.quad:hover { box-shadow: var(--shadow); }

/* ------------------------------------------------------------- chat list */
/* Separators start after the avatar (like a messenger; rows without one keep the full line);
   the "Eilt" dot is coral. */
[data-design="ruhig"] .chatlist > li + li .chat:has(> .chat__avatar) {
  border-top: 0;
  background: linear-gradient(var(--line), var(--line)) no-repeat 54px 0 / calc(100% - 54px) 1px;
}
[data-design="ruhig"] .chat { padding: 12px 2px; }
[data-design="ruhig"] .chat__dot { box-shadow: 0 3px 8px -2px var(--ruhig-glow); }

/* -------------------------------------------------------- three-up grid */
[data-design="ruhig"] .grid3 { gap: 6px; }
[data-design="ruhig"] .gridcell { border-radius: 16px; padding: 10px; }
[data-design="ruhig"] .gridcell__stamp {
  border-radius: 999px; padding: 2px 9px; transform: translateX(-50%) rotate(-7deg);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

/* ------------------------------------------------------------ kpi strip */
[data-design="ruhig"] .kpi-strip { gap: 8px; background: transparent; border: 0; overflow: visible; }
[data-design="ruhig"] .kpi-strip__item { border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; }

/* ------------------------------------------------------------- add bar */
[data-design="ruhig"] .addbar {
  border: 2px solid transparent; box-shadow: var(--shadow); color: var(--ink-soft);
}
[data-design="ruhig"] .addbar:hover { border-color: var(--accent); }
[data-design="ruhig"] .addbar__plus { box-shadow: 0 6px 14px -6px var(--ruhig-glow); }

/* ---------------------------------------------------------- meeting mode */
[data-design="ruhig"] .slides__progress { background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
[data-design="ruhig"] .slides__bar { height: 6px; border-radius: 3px; }
[data-design="ruhig"] .slides__bar > span { border-radius: 3px; }
[data-design="ruhig"] .slide__timer.is-long { border-radius: 999px; padding: 0 9px; }
[data-design="ruhig"] .slide__title { letter-spacing: -0.02em; }
[data-design="ruhig"] .slide__actions {
  border-top-color: transparent;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
[data-design="ruhig"] .slide__stamp {
  border-width: 3px; border-radius: 999px; padding: 6px 18px; transform: rotate(-6deg);
  background: var(--ok-soft); box-shadow: var(--shadow); letter-spacing: .08em;
}

/* -------------------------------------------------------- Theke-Tablet */
[data-design="ruhig"] .counter-btn { box-shadow: var(--shadow); }
[data-design="ruhig"] .counter-btn.is-bumped { border-color: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent), var(--shadow); }
[data-design="ruhig"] .counter-toggle { border: 2px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
[data-design="ruhig"] .counter-toggle[aria-pressed="true"] { background: var(--marker); border-color: var(--marker-ink); }

/* ----------------------------------------------------------- avatars */
[data-design="ruhig"] .avatar--l { box-shadow: var(--shadow); }
[data-design="ruhig"] .avatar--empty { box-shadow: none; }

/* ------------------------------------------------ quests and progress */
[data-design="ruhig"] .quest-progress__bar,
[data-design="ruhig"] .quest-progress__bar::-webkit-progress-bar { border-radius: 999px; }
[data-design="ruhig"] .quest-progress__bar::-webkit-progress-value { border-radius: 999px; }
[data-design="ruhig"] .quest--next .quest__mark { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
[data-design="ruhig"] .bar { border-radius: 999px; }

/* ---------------------------------------------- module parts (To-Dos) */
[data-design="ruhig"] .todo { border-color: transparent; background: var(--bg); border-radius: 16px; }
[data-design="ruhig"] .todo__stamp,
[data-design="ruhig"] .hall-card__stamp {
  border-radius: 999px; padding: 0 12px; background: var(--ok-soft); transform: rotate(-6deg);
}
[data-design="ruhig"] .todo__stamp { transform: translateY(-50%) rotate(-6deg); }
[data-design="ruhig"] .hall-card { border-color: transparent; }
[data-design="ruhig"] .quadrant { border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; }

/* Big module labels speak in sentence case here – capitals would shout. */
[data-design="ruhig"] .notes-new__label,
[data-design="ruhig"] .theke-total__label,
[data-design="ruhig"] .visitors-hero__label { text-transform: none; letter-spacing: var(--head-tracking); }

/* ------------------------------------------------- touch feedback (calm) */
/* A soft press on every big tap target; transitions are switched off globally by
   prefers-reduced-motion (hausbuch.css). */
[data-design="ruhig"] a.quad,
[data-design="ruhig"] a.gridcell,
[data-design="ruhig"] .story__ring { transition: transform .12s ease, box-shadow .15s ease; }
[data-design="ruhig"] a.quad:active,
[data-design="ruhig"] a.gridcell:active { transform: scale(.98); }
[data-design="ruhig"] a.story:active .story__ring { transform: scale(.95); }
[data-design="ruhig"] a.chat { border-radius: 14px; transition: background-color .15s ease; }
[data-design="ruhig"] .chatlist a.chat:active { background-color: var(--surface-2); }

/* ------------------------------------------------------ joyful moments */
/* Effects (effekte.css) in the palette of the design: coral, apricot, butter, sage, sky,
   lavender. Higher specificity than the :root defaults of effekte.css (loaded later). */
:root[data-design="ruhig"] {
  --fx-confetti-0: #E8735A;
  --fx-confetti-1: #F0A04B;
  --fx-confetti-2: #E3B53B;
  --fx-confetti-3: #5FA673;
  --fx-confetti-4: #5B9BD5;
  --fx-confetti-5: #A08AD8;
  --fx-spark-0: #F0A04B;
  --fx-spark-2: #E8735A;
  --fx-star-0: #E3B53B;
  --fx-star-1: #E8735A;
  --fx-star-2: #5B9BD5;
  --fx-bubble-edge: var(--line);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-design="ruhig"] {
    --fx-confetti-0: #FF9F88;
    --fx-confetti-1: #FFC285;
    --fx-confetti-2: #F6D98A;
    --fx-confetti-3: #9EDBAD;
    --fx-confetti-4: #9CCBF0;
    --fx-confetti-5: #C9B8F5;
    --fx-spark-0: #FFC285;
    --fx-spark-2: #FF9F88;
    --fx-star-0: #F6D98A;
    --fx-star-1: #FF9F88;
    --fx-star-2: #9CCBF0;
  }
}
:root[data-theme="dark"][data-design="ruhig"] {
  --fx-confetti-0: #FF9F88;
  --fx-confetti-1: #FFC285;
  --fx-confetti-2: #F6D98A;
  --fx-confetti-3: #9EDBAD;
  --fx-confetti-4: #9CCBF0;
  --fx-confetti-5: #C9B8F5;
  --fx-spark-0: #FFC285;
  --fx-spark-2: #FF9F88;
  --fx-star-0: #F6D98A;
  --fx-star-1: #FF9F88;
  --fx-star-2: #9CCBF0;
}