/* bkaiser GmbH — company site.
   Rebuilt 2026-08-08. Replaces the shared openkring-website stylesheet, which was a
   generic light-only card system copied across five sites. licenses.html is generated
   with its own inline styles (scripts/gen-attribution.mjs), so nothing else reads this.

   DESIGN SYSTEM
   -------------
   Theme        one page theme, follows prefers-color-scheme. No section inverts.
   Accent       exactly one, --accent (#014DA2). The whole palette is derived from the
                logo: navy #002A7E (wordmark), tile #C2D9E4, mid blue #014DA2 (the
                bkg-app Ionic secondary). No second hue anywhere.
   Radius       surfaces 14px, controls 10px, chips 999px. No other radii.
   Type         Inter Tight 400/500/600/700, JetBrains Mono 400 for facts and figures.
   Motion       hover and focus transitions only.
   Script       one file, assets/site.js, purely to open the contact dialog. */

:root {
  color-scheme: light dark;

  --paper: #FBFCFD;
  --paper-2: #F1F5F9;
  --surface: #FFFFFF;
  --ink: #0E1B2A;
  --ink-soft: #4A5A6B;
  --ink-muted: #65727F;  /* 4.79:1 on --paper; #7A8896 failed AA at eyebrow sizes */
  --line: #DDE4EC;
  --line-strong: #C3CEDA;

  --brand: #002A7E;        /* logo wordmark navy */
  --accent: #014DA2;       /* 8.1:1 on white, so it works as fill and as text */
  --accent-ink: #013F86;   /* links and primary button, hover goes to --brand */
  --accent-soft: #E7EFF9;
  --accent-line: #C2D9E4;  /* the light blue tile behind "bk" in the logo */

  --r-lg: 14px;
  --r-md: 10px;
  --r-pill: 999px;

  --max-w: 1080px;
  --font: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0B1420;
    --paper-2: #111D2C;
    --surface: #13202F;
    --ink: #E6ECF2;
    --ink-soft: #A3B0BE;
    --ink-muted: #78889A;
    --line: #22303F;
    --line-strong: #35485D;

    --brand: #8FAAEA;
    --accent: #6EA8F5;
    --accent-ink: #7FB2F7;
    --accent-soft: #10233B;
    --accent-line: #244266;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }

h1, h2, h3 { margin: 0; letter-spacing: -0.02em; font-weight: 600; }
h1 { font-size: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem); line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.15; }
h3 { font-size: 1rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.875rem;
}

.lede {
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
}

.body { font-size: 0.9375rem; line-height: 1.7; color: var(--ink-soft); max-width: 62ch; }
.body + .body { margin-top: 0.875rem; }
.body strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- controls */

.btn {
  font: inherit;
  font-weight: 500;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: 0.6875rem 1.125rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.btn:hover { border-color: var(--ink-muted); }
.btn:active { transform: translateY(1px); }

.btn.primary {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: #FFFFFF;
}
.btn.primary:hover { background: var(--brand); border-color: var(--brand); }
@media (prefers-color-scheme: dark) {
  .btn.primary { color: #04121F; }
  .btn.primary:hover { background: var(--accent); border-color: var(--accent); }
}

.arrow { font-family: var(--mono); font-size: 0.875em; }

/* ---------------------------------------------------------------- header */

.site-head {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 68px;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; }

.brand-lockup { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; color: inherit; }
.brand-lockup img { width: 26px; height: 28px; display: block; }
.brand-lockup b { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; }
.brand-lockup span { font-weight: 400; color: var(--ink-muted); }

.site-nav { display: flex; align-items: center; gap: 1.5rem; font-size: 0.875rem; }
.site-nav a { color: var(--ink-soft); text-decoration: none; transition: color 0.15s ease; }
.site-nav a:hover { color: var(--ink); }
@media (max-width: 720px) { .site-nav a.opt { display: none; } }
@media (max-width: 460px) { .site-nav { gap: 1rem; font-size: 0.8125rem; } }

/* ---------------------------------------------------------------- sections */

section { padding: clamp(3.5rem, 6vw, 5.5rem) 0; }
section + section { border-top: 1px solid var(--line); }
.section-head { margin-bottom: 2.5rem; max-width: 52ch; }
.section-head .body { margin-top: 1rem; }

/* Hero: asymmetric split over a dimmed photograph. This is the one section that is
   dark in both themes. It is the masthead, not a mid-page theme flip: the scrim is
   heavy enough that every string clears WCAG AA against the darkest and the lightest
   part of the image, so the treatment does not depend on where the facade happens to
   be bright. */
.hero {
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
  color: #FFFFFF;
  background-color: #061224;
  background-image:
    linear-gradient(100deg, rgba(4, 14, 32, 0.95) 0%, rgba(4, 14, 32, 0.86) 48%, rgba(4, 14, 32, 0.7) 100%),
    image-set(url("https://bkaiser.imgix.net/tenant/bkg/app/welcome.jpg?auto=format,compress&fit=crop&crop=entropy&w=1400&q=52") 1x, url("https://bkaiser.imgix.net/tenant/bkg/app/welcome.jpg?auto=format,compress&fit=crop&crop=entropy&w=2400&q=42") 2x);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--line);
}
.hero .eyebrow { color: rgba(255, 255, 255, 0.68); }
.hero .lede { color: rgba(255, 255, 255, 0.82); margin-bottom: 2rem; }

/* Frosted panel on the photograph. Falls back to a solid navy fill where blur is
   unavailable or the visitor asked for less transparency. */
.hero .profile {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}
.hero .profile dt { color: rgba(255, 255, 255, 0.62); }
.hero .profile dd { color: #FFFFFF; }
@media (prefers-reduced-transparency: reduce) {
  .hero .profile { background: #0D1D33; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@supports not (backdrop-filter: blur(1px)) {
  .hero .profile { background: rgba(9, 22, 42, 0.86); }
}

/* On the photograph the primary button inverts: white fill, navy label. */
/* Literal values, not tokens: the hero is dark in BOTH themes, so var(--brand) and
   var(--accent-line) would flip to their lightened dark-mode variants here and put
   pale blue on a white button. */
.hero .btn.primary { background: #FFFFFF; border-color: #FFFFFF; color: #002A7E; }
.hero .btn.primary:hover { background: #C2D9E4; border-color: #C2D9E4; color: #002A7E; }
.hero .btn:not(.primary) {
  /* White on a 8% white wash, but that wash sits on the scrim, so the effective
     contrast is white-on-navy. Static analysers flag this; it is fine. */
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.32);
  color: #FFFFFF;
}
.hero .btn:not(.primary):hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.55); }
.hero :focus-visible { outline-color: #FFFFFF; }
.hero-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.55fr 1fr; } }
/* 26ch keeps the headline at two lines on desktop; below 900px it is allowed to run
   to three, which is where the split collapses anyway. */
.hero h1 { max-width: 26ch; margin-bottom: 1.5rem; }
.cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.profile {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 1.5rem;
}
.profile dl { margin: 0; display: grid; gap: 1rem; }
.profile dt {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.25rem;
}
.profile dd { margin: 0; font-size: 0.9375rem; line-height: 1.45; }
.profile dd.mono { font-family: var(--mono); font-size: 0.8125rem; }

/* Statement: single column, no card, the type carries it. */
.statement h2 { max-width: 20ch; margin-bottom: 1.5rem; }
.statement .body { font-size: 1rem; max-width: 58ch; }
.statement .rule { width: 48px; height: 3px; background: var(--accent); border-radius: var(--r-pill); margin-bottom: 2rem; }

/* Tätigkeit: bento, 4 cells, first one spans wide. */
.bento { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .bento { grid-template-columns: repeat(3, 1fr); } .bento .wide { grid-column: span 3; } }

.tile {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 1.5rem;
}
.tile.wide {
  background:
    linear-gradient(150deg, var(--accent-soft) 0%, transparent 62%),
    var(--surface);
  border-color: var(--accent-line);
}
.tile h3 { margin-bottom: 0.625rem; }
.tile p { font-size: 0.875rem; line-height: 1.65; color: var(--ink-soft); }
.tile .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.125rem; }
.chip {
  font-size: 0.8125rem;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink-soft);
}

/* Plattform: two co-branded panels side by side. */
.pair { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .pair { grid-template-columns: repeat(2, 1fr); } }

.panel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 1.75rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.panel:hover { border-color: var(--line-strong); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .panel:hover { transform: none; } }
.panel img { width: 52px; height: 52px; display: block; margin-bottom: 1.125rem; }
.panel h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.panel p { font-size: 0.875rem; line-height: 1.65; color: var(--ink-soft); flex: 1; }
.panel .go { margin-top: 1.25rem; font-size: 0.875rem; font-weight: 500; color: var(--accent-ink); }

.note-line {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--accent);
  background: var(--paper-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* Referenzen: three grouped clusters, one hairline per group, not per row. */
.clusters { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .clusters { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.cluster h3 { padding-bottom: 0.75rem; border-bottom: 1px solid var(--line-strong); margin-bottom: 1rem; }
.cluster ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; }
.cluster li { font-size: 0.875rem; line-height: 1.55; color: var(--ink-soft); }
.cluster li b { color: var(--ink); font-weight: 600; }

/* Mandate: horizontal scroll-snap slider. Native CSS, no JS, no library. The next
   card deliberately peeks past the right edge, which is the whole scroll affordance,
   so no "swipe" label is needed. The track is focusable so it can be scrolled by
   keyboard. */
.mandates {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 1.5rem;
  padding: 0.25rem 1.5rem 1.5rem;
  margin: 0 -1.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.mandates:focus-visible { outline-offset: -2px; }

.mandate {
  flex: 0 0 min(82%, 300px);   /* narrow enough that card 4 peeks at 1080px, which is the whole affordance */
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 1.5rem;
}
.mandate .period {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
}
.mandate h3 { font-size: 1.125rem; margin-bottom: 0.25rem; }
.mandate .role { font-size: 0.8125rem; font-weight: 500; color: var(--accent-ink); margin-bottom: 0.875rem; }
.mandate .period, .mandate .role { flex: none; }   /* only the description may grow */
.mandate .text { font-size: 0.875rem; line-height: 1.65; color: var(--ink-soft); flex: 1; }
.mandate dl {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.75rem;
}
.mandate dt {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.125rem;
}
.mandate dd { margin: 0; font-size: 0.8125rem; line-height: 1.45; }
.mandate dd.figure { font-family: var(--mono); font-size: 1.125rem; }

/* Kontakt */
.contact { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .contact { grid-template-columns: 1.1fr 1fr; } }
.contact .card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 1.75rem; }
.contact h3 { margin-bottom: 0.875rem; }
.contact .person { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1.25rem; }
.contact .person img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.contact .person b { display: block; font-size: 0.9375rem; font-weight: 600; }
.contact .person span { font-size: 0.8125rem; color: var(--ink-muted); }
.contact address { font-style: normal; font-size: 0.9375rem; line-height: 1.7; color: var(--ink-soft); }
.contact a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.contact .contact-hint { margin-top: 1rem; font-size: 0.8125rem; line-height: 1.6; color: var(--ink-soft); }
.contact .reg { margin-top: 1.125rem; font-family: var(--mono); font-size: 0.75rem; line-height: 1.8; color: var(--ink-muted); }
.contact .card p { font-size: 0.875rem; line-height: 1.7; color: var(--ink-soft); }

/* Rechtliches: disclosure group, keeps boilerplate off the main scroll. */
.legal { border-top: 1px solid var(--line); }
.legal details { border-bottom: 1px solid var(--line); }
.legal summary {
  cursor: pointer;
  list-style: none;
  padding: 1.125rem 2rem 1.125rem 0;
  font-size: 0.9375rem;
  font-weight: 500;
  position: relative;
}
.legal summary::-webkit-details-marker { display: none; }
.legal summary::after {
  content: '+';
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  color: var(--ink-muted);
}
.legal details[open] summary::after { content: '\2212'; }
.legal details p { padding: 0 0 1.25rem; font-size: 0.875rem; line-height: 1.7; color: var(--ink-soft); max-width: 66ch; }

/* ---------------------------------------------------------------- contact modal
   Native <dialog>. The body is an iframe onto the public form route of bkg-app, so
   the form is maintained once, in the app, with the okr form builder. */

.modal {
  width: min(560px, calc(100vw - 2rem));
  max-width: none;
  max-height: min(720px, calc(100dvh - 2rem));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
}
.modal::backdrop { background: rgba(4, 14, 32, 0.55); backdrop-filter: blur(3px); }

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 { font-size: 1.25rem; }
.modal-head p { font-size: 0.8125rem; line-height: 1.6; color: var(--ink-soft); margin-top: 0.375rem; }
.modal-close {
  font: inherit;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover { background: var(--paper-2); color: var(--ink); }
.modal iframe { display: block; width: 100%; height: 460px; border: 0; background: var(--surface); }
@media (max-width: 560px) { .modal iframe { height: 60dvh; } }

/* ---------------------------------------------------------------- footer */

.site-foot { border-top: 1px solid var(--line); padding: 2rem 0 2.5rem; }
.site-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.site-foot p, .site-foot nav { font-size: 0.8125rem; color: var(--ink-muted); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--ink); }
/* Swiss Made Software member label. 24px, footer right, per the brand reference.
   Self-hosted rather than pulled from the imgix CDN, because this site loads nothing
   from another server and says so in its own privacy section. */
.site-foot .swiss-made { display: inline-block; flex-shrink: 0; }
.site-foot .swiss-made img { height: 24px; width: auto; display: block; }

/* MOTION
   Deliberately hover and focus only. A CSS scroll-reveal (animation-timeline: view())
   was built and removed: it hides content until it scrolls into view, which fails
   whenever the timeline does not resolve, and a company site that renders blank is a
   far worse outcome than one that does not fade in. Nothing here needs animating to
   be understood. */