/* k-design.css v1.2 · shared stylesheet for every k-jahn.de site and app · https://apps.k-jahn.de/design/k-design.css */
/* k-jahn.de design tokens: generated from tokens.json; do not edit by hand */
:root, [data-theme="dark"] {
  --bg-0: #001121;
  --bg-1: #011a2d;
  --surface-1: #06243a;
  --surface-2: #0e2e46;
  --surface-3: #1a3b55;
  --line: #304e66;
  --line-strong: #68889f;
  --text: #f3efdc;
  --text-2: #a8c3d0;
  --text-3: #8da9ba;
  --action: var(--text);
  --on-action: var(--bg-1);
  --magenta: #c5297b;
  --on-magenta: #ffffff;
  --magenta-light: #f594c3;
  --magenta-tint: #511f36;
  --success: #6fd087;
  --success-tint: #163c20;
  --warning: #f0c551;
  --warning-tint: #413000;
  --danger: #fc7b6f;
  --danger-tint: #4f2420;
  --info: #85baff;
  --info-tint: #1a3453;
  --app-blog: #2ad7d7;
  --app-blog-tint: #013b3b;
  --app-launcher: var(--magenta-tint);
  --app-toyz: var(--magenta);
  --app-toyz-tint: var(--magenta-tint);
  --app-watch: #be9df7;
  --app-watch-tint: #382a4f;
  --app-cup: #f79643;
  --app-cup-tint: #4b290c;
  --app-reserve: #aed561;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --pad-mobile: 0.875rem;
  --pad-desktop: 1.25rem;
  --r-content: 0.5rem;
  --r-sheet: 1.25rem;
  --r-interactive: 62.5rem;
  --r-circle: 50%;
  --measure-prose: 68ch;
  --header-height: 3.5rem;
  --font-sans: "Barlow", system-ui, sans-serif;
  --font-condensed: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --heading-3xl-size: 2.25rem; --heading-3xl-leading: 1.05; --heading-3xl-weight: 700;
  --heading-2xl-size: 1.875rem; --heading-2xl-leading: 1.1; --heading-2xl-weight: 700;
  --heading-xl-size: 1.5rem; --heading-xl-leading: 1.15; --heading-xl-weight: 700;
  --heading-lg-size: 1.25rem; --heading-lg-leading: 1.2; --heading-lg-weight: 600;
  --heading-md-size: 1rem; --heading-md-leading: 1.25; --heading-md-weight: 600;
  --prose-size: 1.0625rem; --prose-leading: 1.6; --prose-weight: 400;
  --body-lg-size: 0.875rem; --body-lg-leading: 1.45; --body-lg-weight: 400;
  --body-size: 0.8125rem; --body-leading: 1.5; --body-weight: 400;
  --body-strong-size: 0.8125rem; --body-strong-leading: 1.5; --body-strong-weight: 500;
  --meta-size: 0.6875rem; --meta-leading: 1.4; --meta-weight: 400;
  --label-size: 0.6875rem; --label-leading: 1.2; --label-weight: 600;
}
/* Light theme: the blog. Put data-theme="light" on <html>. Aliases are re-declared so they follow the light values. */
[data-theme="light"] {
  color-scheme: light;
  --bg-0: #f3f7fa;
  --bg-1: #ffffff;
  --surface-1: #f1f7fb;
  --surface-2: #e7eff5;
  --surface-3: #d9e5ee;
  --line: #c9d6e0;
  --line-strong: #6b8496;
  --text: #011a2d;
  --text-2: #335166;
  --text-3: #4c677b;
  --action: var(--text);
  --on-action: var(--bg-1);
  --magenta: #c5297b;
  --on-magenta: #ffffff;
  --magenta-light: #ad1a6b;
  --magenta-tint: #ffe7f0;
  --success: #146d34;
  --success-tint: #dff6e2;
  --warning: #7e5900;
  --warning-tint: #fbedd5;
  --danger: #ba2b28;
  --danger-tint: #ffe9e6;
  --info: #1762b6;
  --info-tint: #e4f0ff;
  --app-blog: #008283;
  --app-blog-tint: #d5f6f6;
  --app-launcher: #f3efdc;
  --app-toyz: var(--magenta);
  --app-toyz-tint: var(--magenta-tint);
  --app-watch: #7444b4;
  --app-watch-tint: #f1ebff;
  --app-cup: #b85f08;
  --app-cup-tint: #ffeadc;
  --app-reserve: #607e15;
}

/* ------------------------------------------------------------------
   Base
   Load the fonts in each page's <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Barlow+Condensed:wght@600;700&display=swap" rel="stylesheet">
   ------------------------------------------------------------------ */
html { background: var(--bg-1); color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg-1);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--magenta-light); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 0.125rem solid var(--magenta-light);
  outline-offset: 0.125rem;
}
::selection { background: var(--magenta-tint); color: var(--text); }
[hidden] { display: none !important; }

.k-page { padding: 0 var(--pad-mobile); }

/* ------------------------------------------------------------------
   Type
   ------------------------------------------------------------------ */
.k-heading-3xl, .k-heading-2xl, .k-heading-xl, .k-heading-lg, .k-heading-md, .k-label {
  font-family: var(--font-condensed); margin: 0; color: var(--text);
}
.k-heading-3xl { font-size: var(--heading-3xl-size); line-height: var(--heading-3xl-leading); font-weight: var(--heading-3xl-weight); }
.k-heading-2xl { font-size: var(--heading-2xl-size); line-height: var(--heading-2xl-leading); font-weight: var(--heading-2xl-weight); }
.k-heading-xl  { font-size: var(--heading-xl-size);  line-height: var(--heading-xl-leading);  font-weight: var(--heading-xl-weight); }
.k-heading-lg  { font-size: var(--heading-lg-size);  line-height: var(--heading-lg-leading);  font-weight: var(--heading-lg-weight); }
.k-heading-md  { font-size: var(--heading-md-size);  line-height: var(--heading-md-leading);  font-weight: var(--heading-md-weight); }
.k-body    { font-size: var(--body-size);    line-height: var(--body-leading); }
.k-body-lg { font-size: var(--body-lg-size); line-height: var(--body-lg-leading); }
.k-meta    { font-size: var(--meta-size);    line-height: var(--meta-leading); color: var(--text-2); }
.k-label {
  font-size: var(--label-size); line-height: var(--label-leading); font-weight: var(--label-weight);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3);
}
.k-prose {
  max-width: var(--measure-prose);
  font-size: var(--prose-size); line-height: var(--prose-leading);
}

/* ------------------------------------------------------------------
   Header
   Markup: header.k-header > a.k-header__brand (img.k-header__logo + span.k-header__name),
           nav.k-header__nav > a.k-header__link[aria-current="page"],
           button.k-header__menu[aria-expanded][aria-controls]
   k-header.js adds .is-compact (name hidden) or .is-menu (menu button), and .is-open.
   ------------------------------------------------------------------ */
.k-header {
  position: relative;
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--header-height);
  padding: 0 var(--pad-mobile);
  background: var(--surface-1);
}
.k-header__brand { display: flex; align-items: center; gap: var(--space-3); flex: none; text-decoration: none; border-radius: var(--r-interactive); }
.k-header__logo { display: block; width: 2.5rem; height: 2.5rem; }
.k-header__name {
  font-family: var(--font-condensed);
  font-size: var(--heading-lg-size); line-height: var(--heading-lg-leading); font-weight: var(--heading-lg-weight);
  color: var(--text); white-space: nowrap;
}
.k-header__nav { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; justify-content: flex-end; gap: var(--space-1); }
.k-header__link {
  position: relative; flex: none;
  padding: var(--space-2);
  color: var(--text-2); text-decoration: none; white-space: nowrap;
  border-radius: var(--r-interactive);
}
.k-header__link:hover { background: var(--surface-3); color: var(--text); }
/* Apps with more than about five destinations: mark the secondary ones .k-header__link--more.
   Below 680px they leave the bar (they stay in the menu and in the footer links). */
.k-header:not(.is-menu) .k-header__link--more { display: none; }
.k-header__link[aria-current="page"] { color: var(--text); font-weight: var(--body-strong-weight); }
.k-header__link[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: 0.125rem;
  height: 0.125rem; border-radius: 0.0625rem; background: var(--magenta-light);
}
.k-header__menu {
  display: none; margin-left: auto; flex: none;
  width: 2.5rem; height: 2.5rem; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; color: var(--text);
  border: 0.0625rem solid var(--line-strong); border-radius: var(--r-circle);
  cursor: pointer;
}
.k-header__menu:hover { background: var(--surface-3); }
.k-header__menu svg { width: 1.125rem; height: 1.125rem; }
.k-header.is-compact .k-header__name {
  position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.k-header.is-menu .k-header__menu { display: inline-flex; }
.k-header.is-menu .k-header__nav {
  display: none; position: absolute; z-index: 10;
  top: calc(100% + var(--space-1)); right: var(--pad-mobile); min-width: 12rem;
  flex-direction: column; gap: 0; overflow: visible;
  padding: var(--space-2);
  background: var(--surface-2);
  border: 0.0625rem solid var(--line); border-radius: var(--r-content);
}
.k-header.is-menu.is-open .k-header__nav { display: flex; }
.k-header.is-menu .k-header__link { padding: var(--space-2) var(--space-3); font-size: var(--body-lg-size); }
.k-header.is-menu .k-header__link[aria-current="page"]::after {
  left: 0; right: auto; top: var(--space-2); bottom: var(--space-2); width: 0.125rem; height: auto;
}

/* ------------------------------------------------------------------
   Footer
   Markup: footer.k-footer > div.k-footer__app (optional; .k-footer__row > span.k-label + a…)
                            div.k-footer__shared > nav.k-footer__apps > a.k-footer__app-link (img + name)
                                                   a.k-footer__signout
   ------------------------------------------------------------------ */
.k-footer {
  display: grid; gap: 1.25rem;
  margin: var(--space-12) var(--pad-mobile) var(--pad-mobile);
  padding: var(--space-6) 1.25rem;
  background: var(--surface-1);
  border-radius: var(--r-content);
  text-align: center;
}
.k-footer__app {
  display: grid; justify-items: center; gap: var(--space-2);
  padding-bottom: 1.25rem; border-bottom: 0.0625rem solid var(--line);
}
.k-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-4); }
.k-footer__links a { color: var(--text-2); text-decoration: none; border-radius: var(--r-interactive); }
.k-footer__links a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.1875rem; }
.k-footer__shared { display: grid; justify-items: center; gap: 1.25rem; }
.k-footer__apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); width: 100%; }
.k-footer__app-link {
  display: grid; justify-items: center; gap: 0.375rem;
  padding: 0.625rem var(--space-1);
  font-size: var(--meta-size); line-height: var(--meta-leading);
  color: var(--text-2); text-decoration: none;
  border-radius: var(--r-content);
  --k-tile-tint: var(--surface-3);
}
.k-footer__app-link img { display: block; width: 2rem; height: 2rem; }
.k-footer__app-link:hover { background: var(--surface-2); color: var(--text); }
.k-footer__app-link[data-app="blog"]  { --k-tile-tint: var(--app-blog-tint); }
.k-footer__app-link[data-app="toyz"]  { --k-tile-tint: var(--app-toyz-tint); }
.k-footer__app-link[data-app="watch"] { --k-tile-tint: var(--app-watch-tint); }
.k-footer__app-link[data-app="cup"]   { --k-tile-tint: var(--app-cup-tint); }
.k-footer__app-link[aria-current="page"] { background: var(--k-tile-tint); color: var(--text); font-weight: var(--body-strong-weight); }
.k-footer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.k-footer__signout, .k-footer__all-apps { min-height: 2.25rem; }

/* ------------------------------------------------------------------
   Buttons: .k-btn + one of --primary, --secondary, --danger
   ------------------------------------------------------------------ */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 2.5rem; padding: 0 var(--space-4);
  font-family: var(--font-condensed);
  font-size: var(--heading-md-size); line-height: var(--heading-md-leading); font-weight: var(--heading-md-weight);
  text-decoration: none; cursor: pointer;
  border: 0.0625rem solid transparent; border-radius: var(--r-interactive);
}
.k-btn--primary { background: var(--action); color: var(--on-action); }
.k-btn--primary:hover { background: color-mix(in oklab, var(--action) 85%, var(--on-action)); }
.k-btn--secondary { background: transparent; color: var(--text); border-color: var(--line-strong); }
.k-btn--secondary:hover { background: var(--surface-3); }
.k-btn--danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.k-btn--danger:hover { background: var(--danger-tint); }
.k-btn svg { width: 1rem; height: 1rem; flex: none; }
.k-btn--small { min-height: 2rem; padding: 0 var(--space-3); font-size: var(--body-lg-size); }

/* Action rows: main actions first; a destructive action goes last in .k-actions__end,
   pushed to the far right (it drops to its own line, still right-aligned, when space runs out). */
.k-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.k-actions__end { margin-left: auto; }
.k-btn:disabled, .k-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* ------------------------------------------------------------------
   Status pills: .k-pill + one of --success, --warning, --danger, --info, --neutral
   Always carry a word; colour never stands alone.
   ------------------------------------------------------------------ */
.k-pill {
  display: inline-flex; align-items: center;
  padding: 0.125rem var(--space-2);
  font-size: var(--meta-size); line-height: var(--meta-leading); font-weight: var(--body-strong-weight);
  border-radius: var(--r-interactive); white-space: nowrap;
}
.k-pill--success { background: var(--success-tint); color: var(--success); }
.k-pill--warning { background: var(--warning-tint); color: var(--warning); }
.k-pill--danger  { background: var(--danger-tint);  color: var(--danger); }
.k-pill--info    { background: var(--info-tint);    color: var(--info); }
.k-pill--neutral { background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 0.0625rem var(--line-strong); }

/* ------------------------------------------------------------------
   Filter chips: button.k-chip[aria-pressed]; selected = aria-pressed="true"
   ------------------------------------------------------------------ */
.k-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.k-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.k-chips--scroll::-webkit-scrollbar { display: none; }
.k-chip {
  display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0;
  min-height: 2rem; padding: 0 var(--space-3);
  font-family: var(--font-sans); font-size: var(--body-size); line-height: var(--body-leading); white-space: nowrap;
  color: var(--text-2); background: var(--surface-2);
  border: 0; border-radius: var(--r-interactive);
  cursor: pointer;
}
.k-chip:hover { background: var(--surface-3); color: var(--text); }
.k-chip[aria-pressed="true"] { background: var(--action); color: var(--on-action); font-weight: var(--body-strong-weight); }
.k-chip__count { font-size: var(--meta-size); opacity: 0.75; }
/* Filter list: the same buttons as a plain vertical list, for sidebars */
.k-chips--list { flex-direction: column; flex-wrap: nowrap; gap: 0.125rem; }
.k-chips--list .k-chip {
  justify-content: space-between; width: 100%; min-height: 2rem; padding: 0 var(--space-2);
  background: transparent; border-radius: var(--r-content);
}
.k-chips--list .k-chip:hover { background: var(--surface-2); }
.k-chips--list .k-chip[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }

/* ------------------------------------------------------------------
   Fields and inputs
   .k-field > .k-label + .k-field__value   (read-only meta block)
   label.k-label + input.k-input            (editable)
   ------------------------------------------------------------------ */
.k-field {
  display: grid; gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2); border-radius: var(--r-content);
}
.k-field__value { font-size: var(--body-lg-size); line-height: var(--body-lg-leading); color: var(--text); }
.k-input {
  box-sizing: border-box; width: 100%; min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans); font-size: var(--body-lg-size); line-height: var(--body-lg-leading);
  color: var(--text); background: var(--surface-2);
  border: 0.0625rem solid var(--line-strong); border-radius: var(--r-content);
}
.k-input::placeholder { color: var(--text-3); }
.k-input:focus { border-color: var(--magenta-light); }
textarea.k-input { min-height: 5rem; resize: vertical; }
select.k-input {
  appearance: none; cursor: pointer; padding-right: 2.25rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 1.125rem) 50%, calc(100% - 0.8125rem) 50%;
  background-size: 0.3125rem 0.3125rem; background-repeat: no-repeat;
}
/* Detail grid for read-only fields: two columns, a cell can span the row */
.k-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.k-fields__wide { grid-column: 1 / -1; }

/* ------------------------------------------------------------------
   Cards and note boxes
   ------------------------------------------------------------------ */
.k-card { background: var(--surface-1); border-radius: var(--r-content); padding: var(--space-4); }
.k-note {
  padding: var(--space-3) var(--space-4);
  background: var(--info-tint); color: var(--text);
  border: 0.0625rem solid var(--info); border-radius: var(--r-content);
}
.k-note--success { background: var(--success-tint); border-color: var(--success); }
.k-note--warning { background: var(--warning-tint); border-color: var(--warning); }
.k-note--danger  { background: var(--danger-tint);  border-color: var(--danger); }

/* ------------------------------------------------------------------
   Launcher (apps.k-jahn.de)
   Markup: div.k-launcher > div.k-tiles > a.k-tile[data-app]
             (img.k-tile__logo + span.k-tile__name + span.k-tile__desc + p.k-tile__glimpse with <b> for numbers)
           section.k-more > span.k-label + div.k-more__links > a.k-btn.k-btn--secondary
   A tile without a glimpse simply leaves the p out.
   ------------------------------------------------------------------ */
.k-launcher { box-sizing: border-box; width: 100%; display: grid; gap: var(--space-6); max-width: 72rem; margin: 0 auto; padding: var(--space-6) var(--pad-mobile); }
.k-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-3); }
.k-tile {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.125rem var(--space-3);
  padding: var(--space-4);
  color: var(--text); text-decoration: none;
  background: var(--k-tile-tint, var(--surface-1));
  border: 0.0625rem solid transparent; border-radius: var(--r-content);
}
.k-tile[data-app="blog"]  { --k-tile-tint: var(--app-blog-tint);  --k-tile-ink: var(--app-blog); }
.k-tile[data-app="toyz"]  { --k-tile-tint: var(--app-toyz-tint);  --k-tile-ink: var(--magenta-light); }
.k-tile[data-app="watch"] { --k-tile-tint: var(--app-watch-tint); --k-tile-ink: var(--app-watch); }
.k-tile[data-app="cup"]   { --k-tile-tint: var(--app-cup-tint);   --k-tile-ink: var(--app-cup); }
.k-tile:hover { border-color: var(--k-tile-ink, var(--line-strong)); }
.k-tile__logo { grid-row: span 2; display: block; width: 2.75rem; height: 2.75rem; }
.k-tile__name {
  font-family: var(--font-condensed);
  font-size: var(--heading-lg-size); line-height: var(--heading-lg-leading); font-weight: var(--heading-lg-weight);
}
.k-tile__desc { font-size: var(--meta-size); line-height: var(--meta-leading); color: var(--text-2); }
.k-tile__glimpse {
  grid-column: 1 / -1; margin: var(--space-3) 0 0; padding-top: var(--space-3);
  border-top: 0.0625rem solid color-mix(in oklab, var(--text) 15%, transparent);
  color: var(--text-2);
}
.k-tile__glimpse b { color: var(--text); font-weight: var(--body-strong-weight); }
.k-more { display: grid; gap: var(--space-2); }
.k-more__links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.k-more__links .k-btn { min-height: 2.25rem; font-family: var(--font-sans); font-size: var(--body-size); font-weight: var(--body-weight); }

/* ------------------------------------------------------------------
   Image card: a picture with an optional status ribbon and corner badge
   Markup: figure.k-media-card[.k-media-card--faded][.k-media-card--success]
             > img.k-media-card__img + span.k-media-card__ribbon + span.k-media-card__badge
   Ribbon and badge are siblings of the image, so fading the image never fades them.
   ------------------------------------------------------------------ */
.k-media-card { position: relative; margin: 0; border-radius: var(--r-content); }
.k-media-card__img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-content); background: var(--surface-2); }
.k-media-card--faded .k-media-card__img { opacity: 0.45; }
.k-media-card--success { box-shadow: 0 0 0 0.125rem var(--success); }
.k-media-card__ribbon {
  position: absolute; top: var(--space-2); left: var(--space-2);
  padding: 0.125rem var(--space-2);
  font-family: var(--font-condensed); font-size: var(--label-size); line-height: var(--label-leading); font-weight: var(--label-weight);
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--success); color: var(--bg-1); border-radius: var(--r-interactive);
}
.k-media-card__badge {
  position: absolute; right: var(--space-2); bottom: var(--space-2);
  padding: 0.125rem var(--space-2);
  font-size: var(--meta-size); line-height: var(--meta-leading); font-weight: var(--body-strong-weight);
  background: var(--info-tint); color: var(--info); border-radius: var(--r-interactive); white-space: nowrap;
}

/* ------------------------------------------------------------------
   Desktop (the one breakpoint)
   ------------------------------------------------------------------ */
@media (min-width: 680px) {
  .k-page { padding: 0 var(--pad-desktop); }
  .k-header { padding: 0 var(--pad-desktop); }
  .k-header.is-menu .k-header__nav { right: var(--pad-desktop); }
  .k-footer { margin: var(--space-12) var(--pad-desktop) var(--pad-desktop); padding: var(--space-6); text-align: left; }
  .k-footer__app { justify-items: start; }
  .k-footer__links { justify-content: flex-start; }
  .k-footer__shared { display: flex; align-items: center; justify-content: space-between; }
  .k-footer__apps { display: flex; width: auto; }
  .k-footer__app-link { width: 5.5rem; }
  .k-launcher { padding: var(--space-8) var(--pad-desktop); }
}