/* Riverlabs, round 3: the company page and its documents.
   The look is the Sales OS concept "Die Betriebssystem-Fabrik" (cover and back page, 31.10.2026): the glass R
   photographed on seamless cobalt (its night twin in dark mode), the original wordmark from my.riverlabs.de,
   Geist 700 at -0.035em for display, white type on the picture, a fine-print block in columns over a hairline.
   Tokens and reasons: drafts/v3/ART-DIRECTION.md. */

@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin-ext-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --cobalt: #2c4bfd;                    /* Riverlabs OS accent */
  --ground: #3456fc;                    /* edges of the cobalt landscape photographs (16:9 #3455FC, 21:9 #3459FC) */
  --ink-on: #ffffff;                    /* 5.4:1 on the cobalt ground (measured 02.11.2026) */
  --ink-on-2: rgb(255 255 255 / .94);   /* 5.0:1 on cobalt: lower fails, hierarchy comes from size and weight */
  --rule-on: rgb(255 255 255 / .24);

  --doc: #ffffff;                       /* reading ground of the documents */
  --doc-2: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: rgb(29 29 31 / .78);
  --rule: rgb(29 29 31 / .12);
  --link: #2c4bfd;
  --ok: #1a7f37;                        /* "running" state: 5.1:1 on white (#1f8a3b was 4.4:1) */
  --surface: #f5f5f7;                   /* the business card: a tone step, never a shadow */
  --track: rgb(29 29 31 / .07);         /* the 24-hour tracks of the week (a surface, no text on it) */
  --hours: #2c4bfd;                     /* the opening hours on the tracks */
  --link-line: rgb(44 75 253 / .45);    /* prose links: the ink stays, the blue is the line under it */
  --btn: #2c4bfd;                       /* the one filled button per page: white on it 5.9:1 */
  --btn-hover: #2340e0;
  --frame: #1d1d1f;                     /* the frame of the objection notice */
  --btn-on: #ffffff;                    /* the home's contact button: white on the ground, its words the ground (5.4:1) */
  --btn-on-hover: #e7ebff;
  --ok-on: #6ee68a;                     /* the live dot on cobalt and night: 3.4:1 and 12:1 (#1a7f37 gave 1.1:1 on cobalt) */
  /* the 3D map (ART-DIRECTION v6 §4): an object like the business card, greys only; cobalt is the house and the way */
  --map-ground: #f5f5f7;
  --map-block: #e8e8ed;
  --map-block-top: #ffffff;
  --map-road: #ffffff;
  --map-road-casing: #d7d7dc;
  --map-water: #e1e1e6;
  --map-park: #ededf0;
  --map-label: #4d4d50;
  --map-accent: #2c4bfd;
  --map-route: #2c4bfd;
  --optical: -.03em;                    /* display C/B side bearing: ink meets the wordmark and hairline edge */

  --face: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(2.25rem, min(1rem + 4.2vw, 9svh), 4.5rem);
  --fs-body: clamp(1.0625rem, 1rem + .25vw, 1.25rem);
  --fs-fine: .75rem;

  --edge: clamp(20px, 4.4vw, 64px);
  --pt: max(calc(var(--edge) * .7), env(safe-area-inset-top));
  --wrap: max(var(--edge), calc((100vw - 1280px) / 2));   /* documents: 1280 px measure, centred */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  /* Tastwerk settle spring (k 380, c 34, m .8) sampled for 420 ms: travel on screen without overshoot */
  --spring-settle: linear(0, .1, .288, .475, .63, .748, .833, .891, .93, .955, .972, .983, .99, .994, .996, .998, .999, .999, 1);

  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #020527;                  /* edges of every night photograph, measured */
    --ink-on-2: rgb(255 255 255 / .74);
    --rule-on: rgb(255 255 255 / .2);
    --doc: #020527;
    --doc-2: #0b1033;
    --ink: #f5f5f7;
    --ink-2: rgb(245 245 247 / .72);
    --rule: rgb(245 245 247 / .14);
    --link: #9aaaff;
    --ok: #4cd964;
    --surface: #0b1033;
    --track: rgb(245 245 247 / .10);
    --hours: #9aaaff;
    --link-line: rgb(154 170 255 / .5);
    --frame: #f5f5f7;
    --btn-on-hover: #e1e1e5;
    --map-ground: #0b1033;
    --map-block: #191e3f;
    --map-block-top: #2c304e;
    --map-road: #20253f;
    --map-road-casing: #060a2d;
    --map-water: #05092b;
    --map-park: #10153a;
    --map-label: #9395a5;
    --map-accent: #9aaaff;
    --map-route: #9aaaff;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--face);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
img, svg { display: block; }
a { color: inherit; }
:focus, :focus-visible { outline: none; }
/* public company site: a quiet ring for keyboard focus (ART-DIRECTION.md), on links and buttons only, so a
   dialog heading that takes focus on open shows nothing */
a:focus-visible, button:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
::selection { background: var(--cobalt); color: #fff; }
/* on the cobalt and night grounds a cobalt selection vanished into the page: there it inverts */
.home ::selection, .doc-foot ::selection { background: var(--ink-on); color: var(--ground); }

.wordmark { height: 20px; width: auto; aspect-ratio: 138.59 / 20; }
/* read by screen readers, not shown: the confirmations of the copy buttons */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
svg.wordmark { overflow: visible; fill: currentColor; }

/* =================================================================== Home */

/* Landscape: the picture fills everything above the fine print. The hairline of the fine print sits on the
   picture's lower edge, as on the concept's back page, so the glass group never meets the legal text. */
.home {
  min-height: 100svh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--ground);
  color: var(--ink-on);
  overscroll-behavior: none;
}

.stage { grid-area: 1 / 1; position: relative; overflow: hidden; background: var(--ground); }
.stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% 50%;
}

.hero {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: var(--pt) max(var(--edge), env(safe-area-inset-right)) 0 max(var(--edge), env(safe-area-inset-left));
}

.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.bar .brand { view-transition-name: brand; }
/* Header right on every page but the 404 (.bar on the home, .doc-bar elsewhere): at most two words, "Kontakt" on
   imprint and privacy (the one route, 600 white), then the other language's name (500, --ink-on-2). The underline
   fades in on hover, a press gives .97. Below 640 px the words stay quieter than the wordmark beside them. */
.bar-nav { display: flex; gap: 24px; font-size: .9375rem; font-weight: 500; }
.bar-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-on-2);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: transparent;
  transition: text-decoration-color 160ms ease, color 160ms ease, transform 120ms var(--ease-out);
}
.bar-nav a:active { transform: scale(.97); }
.bar-nav .bar-ct { color: var(--ink-on); font-weight: 500; }   /* 600 marks the current page, never a route */
@media (hover: hover) and (pointer: fine) { .bar-nav a:hover { color: var(--ink-on); text-decoration-color: currentColor; } }
@media (max-width: 640px) { .bar-nav { gap: 16px; font-size: var(--fs-fine); } }
/* Narrow portrait screens that show the 16:9 picture (the folded iPhone Duo's cover, 382 × 580): the R's box ends at
   85 % of the width, 4 to 9 px into the word; the language stays in the fine print one scroll down. */
@media (min-aspect-ratio: 3/5) and (max-aspect-ratio: 6/5) and (max-width: 460px) { .home .bar-nav { display: none; } }

/* Before the entrance starts (set in <head>, removed by home.js, or after 3 s if it never runs): the words and picture wait. */
.boot .home .brand, .boot .home .copy, .boot .home .stage img { opacity: 0; }

/* The boot mark: the flat R alone in the optical centre, before it takes its place in the wordmark. */
.boot-mark {
  display: none;
  position: fixed;
  z-index: 3;
  left: 50%;
  top: 46%;
  height: 64px;
  aspect-ratio: 110 / 144;
  translate: -50% -50%;
  transform-origin: 0 0;      /* home.js computes the FLIP from the top left corner */
  overflow: clip;
  color: #fff;
  pointer-events: none;
}
.boot-mark svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.booting .boot-mark { display: block; }
@media (max-width: 640px) { .boot-mark { height: 48px; } }

.copy {
  --col: min(46vw, 720px);
  align-self: end;
  width: var(--col);
  padding-bottom: clamp(28px, 5.5svh, 56px);
}
/* widest headline line in em, measured in the page with Geist 700 at -0.035em: "Custom software." 8.105,
   "Individuelle Software." 9.916; 2 % added for WebKit's wider rendering */
.home { --h1-em: 8.27; }
html[lang="de"] .home { --h1-em: 10.12; }
.home h1 {
  margin: 0;
  font-weight: 700;
  font-size: min(var(--fs-display), calc(var(--col) / var(--h1-em)));
  line-height: 1.02;
  letter-spacing: -.035em;
  margin-inline-start: var(--optical);
}
.home h1 .line { display: block; }
.home h1 .w { display: inline-block; }        /* the entrance moves the headline word by word */
.lead {
  margin: 24px 0 0;
  max-width: 30em;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-on-2);
  text-wrap: pretty;
}
.act {
  margin-top: 28px;
  display: flex;
  align-items: baseline;                       /* the clock stands on the contact's baseline */
  flex-wrap: wrap;
  gap: 4px 48px;
}
.home .act { align-items: center; gap: 12px 32px; }   /* a surface has no baseline: the clock centres beside it */
/* where the clock goes under the button (phones, or beside the R): flush left, 12 px below it */
@media (max-aspect-ratio: 6/5) and (max-width: 600px), (max-aspect-ratio: 3/5) {
  .home .act { align-items: flex-start; gap: 12px 0; }
}
.clock-below .home .act { align-items: flex-start; gap: 12px 0; }
.contact {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: calc(var(--fs-body) * 1.25);      /* the one action: the strongest line after the headline */
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;                          /* the link text is the address (round 5); an address never breaks */
  color: var(--ink-on);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgb(255 255 255 / .55);
  transition: text-decoration-color 160ms ease, transform 120ms var(--ease-out);
}
.contact:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .contact:hover { text-decoration-color: #fff; }
}
/* The home's one action (ART-DIRECTION v6 §2): a white rectangle whose words are the ground, as if cut out of it; it
   leads to the contact page. During phone hours a green dot stands before the word (hours.js, home.js). */
.cta {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  height: 2.25em;
  padding: 0 .7em 0 .8em;
  font-size: calc(var(--fs-body) * 1.25);
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  background: var(--btn-on);
  color: var(--ground);
  text-decoration: none;
  transition: background-color 160ms ease, transform 120ms var(--ease-out);
}
.cta .i { width: 1em; height: 1em; transition: transform 160ms ease; }
.cta-dot { position: relative; flex: none; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: var(--ok); }
.cta-dot[hidden] { display: none; }
.cta-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ok); opacity: 0; pointer-events: none; }
.cta-dot.ping::after { animation: halo 1200ms var(--ease-out); }
.cta:active { transform: scale(.97); }
.cta:focus-visible { outline: 2px solid var(--ink-on); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: var(--btn-on-hover); }
  .cta:hover .i { transform: translateX(3px); }
  .cta:hover .i-out { transform: translate(2px, -2px); }   /* out to another site: the arrow leaves up and right */
}
.nowrap { white-space: nowrap; }
/* Meta block beside the contact: the clock (its line is reserved, so nothing moves when it appears). */
.meta { display: grid; min-height: calc(1.55 * var(--fs-fine)); font-size: var(--fs-fine); line-height: 1.55; }
.clock {
  position: relative;
  display: grid;
  justify-items: start;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-on-2);
  font: inherit;
  text-align: left;
  font-variant-numeric: tabular-nums;
  cursor: default;
  transition: transform 120ms var(--ease-out);
}
.clock[hidden] { display: none; }
.clock::before { content: ""; position: absolute; inset: -12px -8px -14px; }     /* 44.6 px hit area, clear of the button 12 px above */
.clock:active { transform: scale(.97); }
.clock-state { grid-area: 1 / 1; white-space: nowrap; transition: opacity 160ms ease; }
.clock-detail { opacity: 0; }
.clock.is-detail .clock-now, .clock:focus-visible .clock-now { opacity: 0; }
.clock.is-detail .clock-detail, .clock:focus-visible .clock-detail { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .clock:hover .clock-now { opacity: 0; }
  .clock:hover .clock-detail { opacity: 1; }
}
.clock .t { font-weight: 600; }
.clock .c { display: inline-block; position: relative; overflow: clip; vertical-align: top; }
.clock .c > span { display: inline-block; }
.clock-below .act { flex-direction: column; align-items: flex-start; gap: 0; }

/* Fine print: the back page of the concept, in columns under a hairline. */
.fine {
  grid-area: 2 / 1;
  position: relative;
  margin: 0 max(var(--edge), env(safe-area-inset-right)) 0 max(var(--edge), env(safe-area-inset-left));
  padding: 16px 0 max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid transparent;         /* the hairline is ::before, so the entrance can draw it in */
  display: grid;
  /* one fixed grid for every row: four equal columns, so the gaps never follow the length of the text */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 32px;
  font-size: var(--fs-fine);
  line-height: 1.55;
  color: var(--ink-on-2);
  font-variant-numeric: tabular-nums;
}
.fine::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: var(--rule-on);
  transform-origin: 0 50%;
}
.fine p { margin: 0; }
.fine b { display: block; color: var(--ink-on); font-weight: 600; }
.fine a { text-decoration: none; }
/* the one way onward in the fine print, so the one link that keeps its underline (ART-DIRECTION v6 §3) */
.fine a.ct-page { display: inline-block; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / .55); transform-origin: 0 50%; transition: text-decoration-color 160ms ease, transform 120ms var(--ease-out); }
.fine a.ct-page:active { transform: scale(.97); }
/* the landline and the contact page stand on two 18.6 px lines: each grows away from the other (12 px), never into it */
.fine .ct a { position: relative; }
.fine .ct a::before { content: ""; position: absolute; inset: -12px -6px -1px; }
.fine .ct a.ct-page::before { inset: -1px -6px -12px; }
.fine span.ct-page { font-weight: 600; }
/* The closing row on the same columns, one track per part, never shared: the legal links, the language pair,
   the year. Narrower layouts stack the parts instead of letting one run into the next (Duo cover, 02.11.2026). */
.fine .legal { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; }
.fine .legal-links { grid-column: 1 / 3; }
.fine .lang { grid-column: 3; }
.fine .copyright { grid-column: 4; }
.fine nav { display: flex; flex-wrap: wrap; column-gap: 20px; }
.fine nav a { position: relative; color: var(--ink-on); }
.fine nav a::before { content: ""; position: absolute; inset: -13px -10px; }   /* 44 px hit area, no overlap at gap 20 */
/* every link in the closing row: the same resting underline, faded in on hover, the same press */
.fine .legal a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: transparent;
  transform-origin: 0 50%;
  transition: text-decoration-color 160ms ease, transform 120ms var(--ease-out);
}
.fine .legal a:active { transform: scale(.97); }
.fine .legal-links a { font-weight: 500; }            /* every link in the row 500 */
/* the legal page being read: named, not linked, at 600 like the contact column on the contact page */
.fine .legal-links [aria-current] { color: var(--ink-on); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .fine a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .fine a.ct-page:hover { text-decoration-color: currentColor; }
  .fine .legal a:hover { text-decoration-color: currentColor; text-underline-offset: 4px; }
}
/* Language pair: both names in a fixed order, the current one 600 with a standing underline, the other the link */
.fine .lang { column-gap: 16px; }
.fine .lang > * {
  display: inline-flex;
  align-items: center;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.fine .lang [aria-current] { font-weight: 600; text-decoration-color: currentColor; }
.fine .lang a { font-weight: 500; }
.fine .lang a::before { inset: -13px -8px; }

/* The copy column stays at 46 % on wide screens too: the 21:9 picture's R starts at about 52 % (1280 to 1920 px). */
/* Narrow landscape windows and landscape phones: the fine print in three columns, the links on their own row. */
@media (min-aspect-ratio: 6/5) and (max-width: 1100px) {
  .fine { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; }
  .fine .md { order: 1; }
  .fine .legal { order: 5; }
  .fine .legal-links { grid-column: 1; }
  .fine .lang { grid-column: 2; }
  .fine .copyright { grid-column: 3; }
}
/* Landscape phones: the picture takes the whole first screen, the fine print follows below. */
@media (min-aspect-ratio: 6/5) and (max-height: 520px) {
  .home { grid-template-rows: minmax(100svh, auto) auto; }
  .home h1 { font-size: min(2rem, calc(var(--col) / var(--h1-em))); }
  .lead { margin-top: 12px; font-size: 1rem; }
  .act { margin-top: 10px; }
  .copy { padding-bottom: 20px; }
}
/* Very wide windows: show more of the floor so the tiles stay whole; the empty sky above the R gives way. */
@media (min-aspect-ratio: 23/10) {
  .stage img { object-position: 75% 70%; }
}
@media (prefers-color-scheme: light) and (max-aspect-ratio: 3/5) {
  :root { --ground: #345afd; }        /* edge of the cobalt portrait */
}

/* Portrait screens: the picture sits at the top at its own width, the words on the even ground below it. */
@media (max-aspect-ratio: 6/5) {
  .stage { position: absolute; top: 0; left: 0; right: 0; }
  /* the night light pool under the tiles reaches the picture's lower edge: let it settle into the ground */
  .stage::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 12%;
    background: linear-gradient(to bottom, transparent, var(--ground));
    pointer-events: none;
  }
  .stage img { position: static; width: 100%; height: auto; aspect-ratio: auto 16 / 9; object-fit: initial; }   /* the 2:3 attributes reserved the wrong height before the 16:9 file arrived */
  .hero { grid-area: 1 / 1; grid-template-rows: auto 1fr; }
  .copy {
    --col: min(640px, calc(100vw - 2 * var(--edge)));
    width: auto;
    max-width: 640px;
    align-self: end;                             /* the words sit on the fine print, as on the desktop */
    /* below the glass group: 97 % of a 16:9 picture shown at full width (night tiles), plus 24 px */
    padding-top: calc(54.6vw + 24px - 44px - var(--pt));
    padding-bottom: 40px;
  }
  .fine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  .wordmark { height: 16px; }
  /* two columns: links and language side by side, each item 44 px tall, the year on a row of its own below */
  .fine .legal { row-gap: 4px; }
  .fine .legal-links { grid-column: 1; }
  .fine .lang { grid-column: 2; }
  .fine .copyright { grid-column: 1 / -1; }
  .fine .legal nav > * { min-height: 44px; display: inline-flex; align-items: center; }
  .fine .legal nav > a::before { inset: 0 -8px; }     /* the item is 44 px tall itself; only widen it */
}

/* Small portrait screens on iOS (phones, the folded iPhone Duo): Safari paints the page under its floating glass
   bar, 98 px below the layout viewport (measured 02.11.2026: 874 - 62 - 714 on the iPhone 18 Pro, 678 - 580 on the
   Duo cover; env(safe-area-inset-bottom) reads 0 and 100lvh - 100svh only 40 and 18). The first screen keeps that
   zone as even ground: the hero grows by it, the words keep their place above the bar, the fine print follows below. */
:root { --glass: 0px; }
@supports (-webkit-touch-callout: none) {
  @media (max-aspect-ratio: 6/5) and (max-width: 600px) { :root { --glass: 98px; } }
}
@media (max-aspect-ratio: 6/5) and (max-width: 600px) {
  .hero { min-height: calc(100svh + var(--glass)); }
  .copy { padding-bottom: calc(16px + var(--glass)); }
  /* as on phones, so nothing changes between the languages or the two iPhones (critic, 02.11.2026): the clock
     under the contact, and links, language and year each on a row of their own (side by side in a 160 px track,
     the four links read as one list) */
  .act { flex-direction: column; align-items: flex-start; gap: 0; }
  .fine .legal { grid-template-columns: 1fr; row-gap: 0; }
  .fine .legal-links, .fine .lang, .fine .copyright { grid-column: 1 / -1; }
  .fine .copyright { margin-top: 10px; }
}

/* Phones: portrait picture; the first screen holds picture and words, the fine print follows below. */
@media (max-aspect-ratio: 3/5) {
  .stage img { aspect-ratio: auto 2 / 3; }
  .hero { min-height: calc(100svh + var(--glass)); grid-template-rows: auto 1fr; }
  .copy {
    align-self: end;
    /* below the glass tiles: 65 % of a 2:3 picture at full width, plus 16 px (the night light pool may glow behind) */
    padding-top: calc(97.5vw + 16px - 44px - var(--pt));
    padding-bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--glass));
  }
  .home h1 { font-size: min(clamp(2rem, 9.2vw, 2.5rem), calc(var(--col) / var(--h1-em))); }
  .lead { margin-top: 14px; font-size: 1.0625rem; line-height: 1.45; }
  .act { margin-top: 10px; flex-direction: column; align-items: flex-start; gap: 0; }
  .fine { grid-template-columns: 1fr; gap: 14px; padding: 24px 0 max(28px, env(safe-area-inset-bottom)); }
  /* one column: links, language, year, each on its own row */
  .fine .legal { grid-template-columns: 1fr; row-gap: 0; }
  .fine .legal-links, .fine .lang, .fine .copyright { grid-column: 1; }
  .fine .copyright { margin-top: 10px; }
}
@media (max-aspect-ratio: 3/5) and (max-height: 700px) {
  .home h1 { font-size: min(clamp(1.875rem, 8.6vw, 2.25rem), calc(var(--col) / var(--h1-em))); }
  .lead { margin-top: 10px; font-size: 1rem; line-height: 1.42; }
  .act { margin-top: 4px; }
  .copy { padding-bottom: calc(14px + var(--glass)); }
}

/* ============================================================== Documents */

/* The legal pages are the concept's booklet: a cobalt cover (night in dark mode) holding the bar, the title and the
   document's meta row, white pages, and the cobalt back page. The page ground is the cover colour, so the page
   rubber-bands in cobalt at both ends and only the reading area is white. */
.doc-page { background: var(--ground); color: var(--ink); }
.doc-page main { display: block; }
.doc-bar ::selection, .doc-cover ::selection { background: var(--ink-on); color: var(--ground); }

.doc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: max(20px, env(safe-area-inset-top)) max(var(--wrap), env(safe-area-inset-right)) 0 max(var(--wrap), env(safe-area-inset-left));
  min-height: 84px;
  color: var(--ink-on);
}
.doc-bar .brand { view-transition-name: brand; }
/* The cover: title, the one line under it, then the meta row on a hairline (the date, and the language pair that
   leads to this page in the other language). */
.doc-cover {
  color: var(--ink-on);
  /* a cover, not a hero: at 1440 × 900 the first screen shows the title and the start of the text (critic 02.11.2026) */
  padding: clamp(40px, 5vw, 72px) max(var(--wrap), env(safe-area-inset-right)) clamp(32px, 3vw, 44px) max(var(--wrap), env(safe-area-inset-left));
}
.doc-cover h1 {
  margin: 0;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 700;
  margin-inline-start: var(--optical);
  view-transition-name: doc-title;
}
.doc-cover .sub { margin: 20px 0 0; max-width: 34em; font-size: var(--fs-body); line-height: 1.5; color: var(--ink-on-2); text-wrap: pretty; }
.doc-cover .note { margin: 12px 0 0; max-width: 46em; font-size: .9375rem; line-height: 1.5; color: var(--ink-on-2); text-wrap: pretty; }
.doc-cover .glance { margin: 16px 0 0; font-size: .9375rem; }
.doc-cover .note a, .doc-cover .glance a {
  color: var(--ink-on);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgb(255 255 255 / .55);
  transition: text-decoration-color 160ms ease;
}
.doc-cover .glance a { display: inline-flex; align-items: center; min-height: 44px; }
@media (hover: hover) and (pointer: fine) {
  .doc-cover .note a:hover, .doc-cover .glance a:hover { text-decoration-color: currentColor; }
}
.doc-cover .meta {
  margin-top: 32px;
  padding-top: 4px;
  border-top: 1px solid var(--rule-on);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 24px;
  font-size: var(--fs-fine);
  line-height: 1.55;
  color: var(--ink-on-2);
  font-variant-numeric: tabular-nums;
}
.doc-cover .meta > :first-child { min-height: 44px; display: inline-grid; align-items: center; }
/* the language pair, the same component as in the fine print */
.lang { display: flex; column-gap: 16px; }
.doc-cover .lang > * {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-on);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.doc-cover .lang [aria-current] { font-weight: 600; text-decoration-color: currentColor; }
.doc-cover .lang a { font-weight: 500; text-decoration-color: transparent; transition: text-decoration-color 160ms ease, transform 120ms var(--ease-out); transform-origin: 0 50%; }
.doc-cover .lang a::before { content: ""; position: absolute; inset: 0 -8px; }
.doc-cover .lang a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .doc-cover .lang a:hover { text-decoration-color: currentColor; } }

/* "Stand" answers a hover, focus or tap with how long ago that was (assets/doc.js): two stacked layers, the
   longer one sets the width, so nothing beside it moves. */
.flip {
  position: relative;
  display: inline-grid;
  justify-items: start;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
  -webkit-user-select: text;
  user-select: text;
}
.flip::before { content: ""; position: absolute; inset: -12px -8px; }
.flip > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity 160ms ease, transform 160ms var(--ease-out); }
.flip > .b { opacity: 0; transform: translateY(.3em); }
.flip.is-b > .a, .flip:focus-visible > .a { opacity: 0; }
.flip.is-b > .b, .flip:focus-visible > .b { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .flip:hover > .a { opacity: 0; }
  .flip:hover > .b { opacity: 1; transform: none; }
}

.doc-body {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 46rem);
  gap: clamp(32px, 6vw, 96px);
  padding: clamp(40px, 5vw, 72px) max(var(--wrap), env(safe-area-inset-right)) clamp(64px, 10vw, 128px) max(var(--wrap), env(safe-area-inset-left));
  background: var(--doc);
}
/* dark: cover and pages share the night, so a hairline marks the seam (as above the foot) */
@media (prefers-color-scheme: dark) { .doc-body { border-top: 1px solid var(--rule); } }

/* Contents: a 2 px marker on the list's hairline travels to the section, or sections, in view (assets/doc.js). */
.toc { position: sticky; top: 32px; align-self: start; font-size: .9375rem; line-height: 1.4; }
.toc ol { position: relative; list-style: none; margin: 0; padding: 0 0 0 16px; display: grid; border-left: 1px solid var(--rule); }
.toc a {
  display: grid;
  grid-template-columns: 2em 1fr;
  padding: 11px 0;                      /* 43 px rows: hit area */
  color: var(--ink-2);
  text-decoration: none;
  transition: color 160ms ease;
}
.toc a span { font-variant-numeric: tabular-nums; }
.toc a[aria-current="true"] { color: var(--ink); }   /* colour only: a weight change reflowed the list on scroll */
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--ink); } }
.toc-mark {
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 1px;
  background: var(--link);
  transform-origin: 0 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.toc-mark.on { opacity: 1; }
.toc-mark.glide { transition: opacity 160ms ease, transform 420ms var(--spring-settle); }

/* Contents on phones and tablets (below 1024 px): one 48 px row between hairlines, "Inhalt" 600 and the count; open,
   the list in the h2's number column, 44 px rows, and the count gives way to "Schließen". No icon, no motion
   (it opens in place); assets/doc.js closes it after a jump. */
.toc-m { display: none; border-block: 1px solid var(--rule); font-size: var(--fs-body); line-height: 1.4; }
.toc-m summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 48px;
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.toc-m summary::-webkit-details-marker { display: none; }
.toc-m-t { font-weight: 600; }
.toc-m-n, .toc-m-x { grid-area: 1 / 2; justify-self: end; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.toc-m-x, .toc-m[open] .toc-m-n { visibility: hidden; }
.toc-m[open] .toc-m-x { visibility: visible; }
.toc-m ol { list-style: none; margin: 0; padding: 0 0 10px; }
.toc-m a {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: baseline;
  padding: 10px 0;                      /* 44 px rows */
  color: var(--ink);
  text-decoration: none;
  text-wrap: pretty;
}
.toc-m a span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.toc-m a:active { color: var(--ink-2); }

/* hyphenate only long words, never closer than 4 letters to either end (no "ih-ren"); the company name never breaks */
.prose {
  font-size: 1.0625rem; line-height: 1.6; max-width: 46rem; text-wrap: pretty;
  hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4;
}
.prose .nh { hyphens: manual; -webkit-hyphens: manual; }
/* a jump lands the heading below the iPhone's status bar (59 to 62 px), as .c-sec does on the contact page */
.prose section, .prose h3[id] { scroll-margin-top: calc(32px + env(safe-area-inset-top)); }
.prose h2 { margin: 0 0 14px; font-size: 1.25rem; line-height: 1.25; font-weight: 700; letter-spacing: -.012em; display: grid; grid-template-columns: 2.75rem 1fr; align-items: baseline; }
/* the section number is the link to its section; with script a click copies it and the check stands in for the
   number while "Link kopiert" fades in after the title */
.prose h2 .num {
  position: relative;
  display: inline-grid;
  justify-items: start;
  color: var(--ink-2);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: color 160ms ease;
}
.prose h2 .num::before { content: ""; position: absolute; inset: -12px -10px -12px -8px; }
.prose h2 .num > * { grid-area: 1 / 1; transition: opacity 160ms ease, transform 220ms var(--spring-settle); }
.prose h2 .num svg { width: .8em; height: .8em; align-self: center; fill: var(--link); opacity: 0; transform: scale(.6); }
.prose h2 .num.is-done .n { opacity: 0; }
.prose h2 .num.is-done svg { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .prose h2 .num:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}
/* out of flow, so the heading never grows when it appears (on phones it wrapped to a second line and pushed the
   page down 25 px): after the title where the last line has room, otherwise just above the title (.up, doc.js) */
.prose h2 .t { position: relative; }
.prose h2 .copied {
  position: absolute;
  margin: .45em 0 0 12px;
  font-size: var(--fs-fine);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--link);
  white-space: nowrap;
  pointer-events: none;
}
.prose h2 .copied.up { left: 0; bottom: 100%; margin: 0 0 4px; }
/* subsections on the section's axis: "3.1" (or the icon of an unnumbered subsection) in the number column */
.prose h3, .prose h4 { margin: 32px 0 8px; font-size: 1.0625rem; line-height: 1.35; font-weight: 600; display: grid; grid-template-columns: 2.75rem 1fr; align-items: baseline; }
.prose h3 .num { color: var(--ink-2); font-weight: 400; font-variant-numeric: tabular-nums; }
.prose h3 .num .i { width: 20px; height: 20px; transform: translateY(.2em); }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; }
.prose section + section { margin-top: 64px; }
/* list items carry a 5 px square on the middle of the capitals instead of a bullet */
.prose ul:not(.tiles):not(.ilist) { list-style: none; padding-left: 20px; }
.prose ul:not(.tiles):not(.ilist) > li { position: relative; }
.prose ul:not(.tiles):not(.ilist) > li::before { content: ""; position: absolute; left: -20px; top: calc(.83em - 2.5px); width: 5px; height: 5px; background: var(--ink-2); }
.prose li + li { margin-top: 8px; }
.prose a[href^="mailto"], .prose a[href^="tel"] { white-space: nowrap; }
/* Links in the prose: the text stays ink at 500, the blue is the line under it; hover turns both blue. A link that
   leaves the site ends in an arrow (the address is its text), so the reader knows before the click. */
.prose a:not(.num):not(.btn):not(.tile) {
  hyphens: manual;
  -webkit-hyphens: manual;
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--link-line);
  text-underline-offset: .22em;
  text-decoration-skip-ink: auto;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .prose a:not(.num):not(.btn):not(.tile):hover { color: var(--link); text-decoration-color: var(--link); }
}
.prose a.ext { white-space: nowrap; }
.i, .i-ext, .i-act, .i-lead { display: inline-block; flex: none; fill: currentColor; }
.i-ext { width: .8em; height: .8em; margin-left: .15em; vertical-align: -.04em; color: var(--ink-2); transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .prose a.ext:hover .i-ext { color: currentColor; } }
/* citations of the law: one unbreakable, quieter unit, never a link */
.prose .law { white-space: nowrap; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.prose strong .law { color: inherit; }

.facts { margin: 0 0 8px; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); border-top: 1px solid var(--rule); }
.facts dt, .facts dd { margin: 0; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.facts dt { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); padding-right: 24px; hyphens: manual; -webkit-hyphens: manual; }
.facts dt .i { width: 18px; height: 18px; margin-top: .2em; }
.facts dd { font-weight: 500; font-variant-numeric: tabular-nums; }
.facts + .facts { border-top: 0; }

/* Copy: the register number, the VAT ID and the postal address carry a quiet "Kopieren" at the end of their row
   (on hover with a mouse, always on touch); after a click it reads "Kopiert" with a check for 1.6 s. */
.copyable { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.copyable .v { min-width: 0; }
/* rows directly under a section title start without a line, so the line never reads as the title's underline */
.prose h2 + .facts, .prose h2 + .reach > .facts:first-child { border-top: 0; }
.copy-btn {
  position: relative;
  flex: none;
  display: inline-grid;
  justify-items: end;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: 500 var(--fs-fine)/1.55 var(--face);
  color: var(--ink-2);
  cursor: pointer;
  transition: color 160ms ease, transform 120ms var(--ease-out);
}
.copy-btn::before { content: ""; position: absolute; inset: -14px -10px; }
.copy-btn:active { transform: scale(.97); }
.copy-btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; transition: opacity 160ms ease, transform 160ms var(--ease-out); }
.copy-btn .done { color: var(--link); opacity: 0; transform: translateY(4px); }
.copy-btn .done svg { width: 11px; height: 11px; fill: currentColor; transform: scale(.6); transition: transform 220ms var(--spring-settle); }
.copy-btn.is-done .idle { opacity: 0; transform: translateY(-4px); }
.copy-btn.is-done .done { opacity: 1; transform: none; }
.copy-btn.is-done .done svg { transform: none; }
.copy-btn.is-failed .idle { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .copy-btn .idle { opacity: 0; }
  .copyable:hover .copy-btn .idle, .copy-btn:focus-visible .idle { opacity: 1; }
  .copyable:hover .copy-btn.is-done .idle, .copy-btn.is-done:focus-visible .idle { opacity: 0; }
  .copy-btn:hover { color: var(--ink); }
  .copyable[data-copy] .v { cursor: copy; }
}

/* ------------------------------------------------------------------ legal page objects (ART-DIRECTION v5)
   Facts become objects: the business card, the week of opening hours with its now marker, the one filled button,
   tiles to scan, the framed objection notice and sheets. Radius 0, no shadow, hairlines; colour only for meaning. */

/* The business card: the company's address as the object it is, a tone step without a shadow. */
.prose .card { margin: 0 0 16px; max-width: 30rem; padding: 28px; background: var(--surface); }
.prose .card p, .prose .addr p { margin: 0; }
.card.copyable { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px; }
.card .v { display: grid; gap: 14px; }
.card-name { display: grid; gap: 18px; justify-items: start; }
.card-name .wordmark { height: 16px; }
.card-name b { font-size: 1.25rem; line-height: 1.2; font-weight: 700; letter-spacing: -.012em; }
.card-addr, .addr p { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; line-height: 1.5; }
.card-addr .i, .addr .i { width: 18px; height: 18px; margin-top: .2em; color: var(--ink-2); }
.card .copy-btn .idle, .reach .copy-btn .idle { opacity: 1; }   /* on the card and in the contact the word always shows */
/* another body's address (the supervisory authority): the card's anatomy without the surface */
.prose .addr { margin: 0 0 12px; display: grid; gap: 10px; }
.addr-name b { font-weight: 600; }

/* The contact on the imprint: phone and e-mail, the state now with the time in Berlin, the week on 24-hour tracks
   with the hours in cobalt and a marker at now, and the button that books a meeting (assets/reach.js). */
.reach .facts { margin: 0; }
.hours { margin-top: 28px; }
.prose .reach-now { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; font-variant-numeric: tabular-nums; }
.reach-now[hidden] { display: none; }
.reach-now .dot { position: relative; flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.reach-now.is-open .dot { background: var(--ok); box-shadow: none; }
.reach-now .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ok); opacity: 0; pointer-events: none; }
.reach-now.is-open .dot.ping::after { animation: halo 1200ms var(--ease-out); }
@keyframes halo { from { transform: scale(1); opacity: .35; } to { transform: scale(2.4); opacity: 0; } }
.reach-state { font-weight: 600; }
.reach-when, .reach-clock { color: var(--ink-2); }
.reach-when::before, .reach-clock::before { content: "·"; margin-right: 8px; }
.reach-clock .here .t { font-weight: 600; color: var(--ink); }
.prose .reach-hint { margin: 2px 0 0 16px; color: var(--ink-2); }
.reach-hint a { font-weight: 600; }
.reach-hint[hidden], .reach-local[hidden] { display: none; }
/* with script the state and its hint arrive a moment after the first paint; their lines are held empty until then,
   so the week and the button below never jump (CLS 0.086 at 390 px before) */
@media (scripting: enabled) {
  .reach-now[hidden] { display: flex; visibility: hidden; min-height: 1lh; }
  .reach-hint[hidden] { display: block; visibility: hidden; min-height: 1lh; }
}
.prose .week { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.week li { display: grid; grid-template-columns: 3.6em minmax(0, 1fr) 6.5em; align-items: center; column-gap: 14px; }
.week .d { font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.week .x { font-size: .8125rem; line-height: 1.3; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.week li.today .x { color: var(--ink); }
.week li.today .d { color: var(--ink); font-weight: 600; }
.week .track { position: relative; height: 8px; background: var(--track); container-type: inline-size; }
.week .win { position: absolute; inset: 0 auto 0 37.5%; width: 37.5%; background: var(--hours); }
.week li.holiday .win { display: none; }
.week .now { position: absolute; top: -5px; bottom: -5px; left: -1px; width: 2px; background: var(--ink); transform: translateX(calc(var(--now, 0) * 100cqw)); }
.week .now.glide { transition: transform 420ms var(--spring-settle); }
.week .ticks .track { height: auto; background: none; font-size: var(--fs-fine); line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.week .ticks .track span { position: absolute; bottom: 0; transform: translateX(-50%); }
.week .ticks .track span:nth-child(1) { left: 0; transform: none; }
.week .ticks .track span:nth-child(2) { left: 25%; }
.week .ticks .track span:nth-child(3) { left: 50%; }
.week .ticks .track span:nth-child(4) { left: 75%; }
.week .ticks .track span:nth-child(5) { left: 100%; transform: translateX(-100%); }
.week .ticks { height: 12px; }
.prose .hours-line { margin: 16px 0 0; font-size: .9375rem; color: var(--ink-2); }
.hours-line b { font-weight: 500; color: var(--ink); }
.prose .reach-local { margin: 4px 0 0; font-size: .9375rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* the one filled button of the page, cobalt with white; beside it what it opens */
.prose .book { margin: 28px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 20px 0 16px;
  background: var(--btn);
  color: #fff;
  font: 600 1rem/1 var(--face);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease, transform 120ms var(--ease-out);
}
.btn .i { width: 20px; height: 20px; }
.btn .i-ext { width: 16px; height: 16px; margin: 0; color: #fff; opacity: .8; }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }   /* neutral: cobalt on the night ground was 2.9:1 */
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--btn-hover); } }
.book-note { flex: 1 1 16rem; font-size: .875rem; line-height: 1.5; color: var(--ink-2); }
.book-note .where { white-space: nowrap; font-weight: 600; color: var(--ink); }

/* Tiles to scan: "At a glance" and the rights; a hairline above each, icon, title, one line. */
.prose .tiles { list-style: none; margin: 4px 0 20px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.tiles > li { border-top: 1px solid var(--rule); }
.prose .tiles > li + li { margin-top: 0; }
.prose a.ref { white-space: nowrap; }
.tiles > li, .tile { display: grid; align-content: start; justify-items: start; gap: 4px; padding: 16px 0 22px; }
.tiles .i { width: 24px; height: 24px; margin-bottom: 8px; color: var(--ink); }
.tiles b { font-weight: 600; line-height: 1.35; }
.tiles b + span { font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.tiles.rights > li { padding: 0; justify-items: stretch; }   /* the whole cell is the link, the envelope at its right edge */
.tiles .txt { line-height: 1.5; color: var(--ink-2); }
.tiles .txt b { color: var(--ink); }
.prose a.tile { white-space: normal; }
.tile { position: relative; padding-right: 28px; color: inherit; text-decoration: none; transition: transform 120ms var(--ease-out); }
.tile .i-act { position: absolute; top: 20px; right: 0; width: 16px; height: 16px; color: var(--ink-2); transition: color 160ms ease, transform 160ms var(--ease-out); }
.tile:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .tile:hover .i-act { color: var(--link); transform: translateX(2px); }
  .tile:hover b { text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: var(--link-line); text-underline-offset: .22em; }
}

/* A list with an icon beside each line (the server log data), on hairlines like the facts. */
.prose .ilist { list-style: none; margin: 4px 0 16px; padding: 0; border-top: 1px solid var(--rule); }
.ilist > li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.ilist > li + li { margin-top: 0; }
.ilist .i { width: 20px; height: 20px; margin-top: .15em; color: var(--ink-2); }

/* The right to object, set apart from all other information (Art. 21(4) GDPR): framed on all four sides. */
.objection { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 16px; margin: 8px 0 0; padding: 24px 28px; border: 1px solid var(--frame); }
.objection .i-lead { width: 24px; height: 24px; color: var(--ink); }
.prose .objection-body > :last-child { margin-bottom: 0; }
.prose .objection-head { margin: 0 0 10px; font-weight: 600; }
.prose .objection-act { margin: 0; }
.objection-act .to { color: var(--ink-2); white-space: nowrap; }

/* Sheets: a table on hairlines; on phones each row becomes a block with the column names beside its values. */
.sheet { margin: 8px 0 24px; }
.sheet table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.45; }
.sheet th, .sheet td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); }
.sheet th:last-child, .sheet td:last-child { padding-right: 0; }
.sheet thead th { padding-top: 0; font-size: var(--fs-fine); font-weight: 600; color: var(--ink-2); }
.sheet tbody th { font-weight: 600; white-space: nowrap; hyphens: manual; -webkit-hyphens: manual; }
.sheet tbody th .i { width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: -.2em; color: var(--ink-2); }

.doc-foot {
  background: #3456fc;
  color: #fff;
  /* + --glass: on iPhones the foot runs on under Safari's floating bar, so the zone below the last line is cobalt,
     not the white page (critic 02.11.2026), and the last line clears the bar at the end of the page */
  padding: clamp(48px, 7vw, 88px) max(var(--wrap), env(safe-area-inset-right)) calc(max(28px, env(safe-area-inset-bottom)) + var(--glass)) max(var(--wrap), env(safe-area-inset-left));
}
/* dark: page and foot share the night ground, so a full-width hairline marks the seam (as above the document body) */
@media (prefers-color-scheme: dark) { .doc-foot { background: #020527; border-top: 1px solid var(--rule); } }
.doc-foot .claim { margin: 28px 0 56px; font-size: clamp(1.75rem, 1rem + 2.4vw, 2.75rem); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; max-width: 18em; }
/* "Berlin" in the claim: a hover, focus or tap shows where exactly, under the word (assets/doc.js) */
.claim .berlin { position: relative; }
.claim button.berlin { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: default; }
/* 44 px to tap on phones, where the claim's word is only 30 px tall */
.claim button.berlin::before { content: ""; position: absolute; inset: -8px -4px; }
.claim .geo {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  font-size: var(--fs-fine);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--ink-on-2);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms var(--ease-out);
  pointer-events: none;
}
.claim .berlin.is-on .geo, .claim .berlin:focus-visible .geo { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .claim .berlin[tabindex] { text-decoration: underline dotted 1px; text-decoration-color: rgb(255 255 255 / .5); text-underline-offset: .14em; }
  .claim .berlin:hover .geo { opacity: 1; transform: none; }
}
.doc-foot .fine { margin: 0; --ink-on-2: rgb(255 255 255 / .94); }
@media (prefers-color-scheme: dark) { .doc-foot .fine { --ink-on-2: rgb(255 255 255 / .74); } }
.print-stamp { display: none; }

/* 404.html: the cover takes the screen, so the miss gets one bold move; the foot keeps only the company facts. */
.not-found { min-height: calc(100svh + var(--glass)); display: grid; grid-template-rows: auto 1fr auto; }
.not-found .doc-cover { display: flex; flex-direction: column; justify-content: center; }
/* the English line is the quieter second line in both schemes: .78 white keeps 4:1 on cobalt at display size */
.not-found h1 span { display: block; color: rgb(255 255 255 / .78); }
.not-found .missing { margin: 28px 0 0; max-width: 34em; font-size: var(--fs-body); line-height: 1.5; color: var(--ink-on-2); overflow-wrap: anywhere; }
.not-found .missing b { color: var(--ink-on); font-weight: 600; }
/* the likely page is the one action: its own line at the size of the home's contact link */
.not-found .suggest { margin: 6px 0 0; font-size: calc(var(--fs-body) * 1.25); font-weight: 600; letter-spacing: -.01em; }
.not-found .suggest a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-on);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgb(255 255 255 / .55);
  transition: text-decoration-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) { .not-found .suggest a:hover { text-decoration-color: currentColor; } }
.not-found .glance { display: flex; flex-wrap: wrap; column-gap: 28px; margin-top: 20px; }
.not-found .glance a { font-weight: 500; }
.not-found .doc-foot { padding-top: clamp(24px, 3vw, 40px); }
/* dark: the cover and the foot share the night, and the facts bring their own hairline; one line, not two */
@media (prefers-color-scheme: dark) { .not-found .doc-foot { border-top: 0; } }

@media (max-width: 1023px) {
  .doc-body { grid-template-columns: minmax(0, 1fr); }
  /* no sticky list below 1024 px: on a phone twelve entries filled the first screen before the § 5 DDG facts; the
     folded row .toc-m stands in for it */
  .toc { display: none; }
  .toc-m { display: block; }
  .doc-foot .fine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  .doc-foot .fine .md { order: 0; }          /* two columns: company beside its director, as on the home page */
  .doc-foot .fine .legal-links { grid-column: 1; }
  .doc-foot .fine .lang { grid-column: 2; }
  .doc-foot .fine .copyright { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dt { padding-bottom: 0; border-bottom: 0; font-size: .9375rem; }
  .facts dd { padding-top: 2px; }
  .prose h2, .prose h3, .prose h4, .toc-m a { grid-template-columns: 2.5rem 1fr; }
  .prose .card { padding: 20px; }
  .prose section + section { margin-top: 48px; }
  .prose .tiles { grid-template-columns: minmax(0, 1fr); }
  .tiles > li, .tile { padding-bottom: 18px; }
  .prose .tiles:not(.rights) > li { grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; }
  .tiles:not(.rights) .i { grid-row: 1; width: 20px; height: 20px; margin: 0; align-self: center; }
  .tiles:not(.rights) b, .tiles:not(.rights) b + span { grid-column: 2; }
  .tile { grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; }
  .tile .i { width: 20px; height: 20px; margin: .15em 0 0; }
  .objection { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 20px; }
  .prose .book { gap: 12px; }
  .btn { width: 100%; justify-content: center; }
  .week li { grid-template-columns: 3.4em minmax(0, 1fr) 5.6em; column-gap: 10px; }
  /* the state on its own line, what follows on the next, aligned with the word, without a leading dot */
  .reach-state { flex-basis: calc(100% - 16px); }
  .reach-when { margin-left: 16px; }
  .reach-when::before { content: none; }
  .reach-now[hidden] { min-height: calc(2lh + 2px); }       /* state and when on two lines */
  .reach-hint[hidden] { min-height: 2lh; }
  .week .ticks .track span:nth-child(2), .week .ticks .track span:nth-child(4) { display: none; }
  .sheet thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sheet table, .sheet tbody, .sheet tr, .sheet th, .sheet td { display: block; }
  .sheet table { border-top: 1px solid var(--rule); }
  .sheet tr { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .sheet th, .sheet td { padding: 2px 0; border: 0; }
  .sheet tbody th { padding-bottom: 6px; }
  /* the label hangs in the padding, so a cell's inline spans (.nh) stay in its text instead of becoming grid cells */
  .sheet td { position: relative; padding-left: calc(7rem + 12px); }
  .sheet td::before { content: attr(data-label); position: absolute; left: 0; width: 7rem; color: var(--ink-2); font-size: .875rem; line-height: 1.6; }
  .doc-foot .fine { grid-template-columns: 1fr; gap: 14px; }
  .doc-foot .fine .legal { grid-template-columns: 1fr; row-gap: 0; }
  .doc-foot .fine .legal-links, .doc-foot .fine .lang, .doc-foot .fine .copyright { grid-column: 1; }
  .doc-foot .fine .copyright { margin-top: 10px; }
  .doc-foot .fine .legal nav > * { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Moving between the legal pages and their languages turns the page: the title and the wordmark hold their place
   while the rest cross-fades (cross-document view transitions; browsers without them load as usual). The home
   opts out on arrival (assets/boot.js), because it has its own entrance. */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 300ms; animation-timing-function: var(--ease-out); }

/* ======================================================== Privacy status */

dialog.status-sheet {
  margin: auto;
  width: min(560px, calc(100vw - 32px));
  max-height: min(720px, calc(100svh - 32px));
  padding: 0;
  border: 0;
  border-radius: 0;                     /* radius 0 like the page (ART-DIRECTION); 20 px broke the 16 px corner cap */
  background: var(--doc);
  color: var(--ink);
  box-shadow: 0 24px 80px rgb(2 5 39 / .28), 0 2px 8px rgb(2 5 39 / .12);
  overflow: hidden;                     /* only .body scrolls (critic 02.11.2026: the close button was out of view) */
}
dialog.status-sheet::backdrop { background: rgb(2 5 39 / .5); }
/* dark: the sheet on the page's own night had no edge; it stands on the raised ground with a hairline, and the
   backdrop dims the page enough that the sheet reads as the one thing in front */
@media (prefers-color-scheme: dark) {
  dialog.status-sheet { background: var(--doc-2); border: 1px solid var(--rule); }
  dialog.status-sheet::backdrop { background: rgb(0 0 0 / .55); }
}
.status-sheet .in { display: flex; flex-direction: column; max-height: min(720px, calc(100svh - 32px)); }
.status-sheet .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px 16px;              /* the button's edge on the list's edge */
  border-bottom: 1px solid var(--rule);
}
.status-sheet .body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 28px 40px;              /* the same 40 px at the end as above the list, so the last row never sits on the edge */
  /* a row cut by the lower edge fades out instead of ending in a hard cut, which says the list goes on; at the end
     of the list only the empty padding lies in the fade */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
}
.status-sheet h2 { margin: 0; font-size: 1.5rem; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; text-wrap: balance; }
.status-sheet .intro { margin: 0 0 20px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.status-sheet .to-policy-row { margin: 20px 0 0; font-size: 15px; }
.status-sheet .to-policy { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.status-sheet ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.status-sheet li { display: grid; align-items: baseline; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.status-sheet li b { font-weight: 600; font-size: 15px; }
.status-sheet li p { grid-column: 1 / -1; margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.status-sheet .state { font-size: 13px; font-weight: 600; color: var(--ink-2); text-align: right; }
.status-sheet .state.on { color: var(--ok); }
/* closing is the side action of a sheet that only informs: ink text on a hairline, not the brightest thing on
   the screen (a filled white block outshone the title in dark mode, critic 02.11.2026) */
.status-sheet button {
  flex: none;
  font: 600 15px/1 var(--face);
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--rule);
  border-radius: 0;                     /* no pills (ART-DIRECTION bans) */
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: transform 120ms var(--ease-out), border-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) { .status-sheet button:hover { border-color: var(--ink-2); } }
.status-sheet button:active { transform: scale(.97); }
/* phones: the sheet takes the whole screen, so no page text shows below it behind Safari's toolbar; the end of the
   list clears the floating toolbar and the home indicator */
@media (max-width: 640px) {
  dialog.status-sheet { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; box-shadow: none; }
  .status-sheet .in { height: 100%; max-height: none; }
  .status-sheet .head { padding: max(16px, env(safe-area-inset-top)) 20px 14px; }
  .status-sheet .body { padding: 16px 20px calc(96px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ================================================================== Print */

/* The legal pages are what people print or save as PDF: A4, black on white whatever the screen scheme, no cobalt
   fill, nothing fixed or sticky, no contents list; the foot keeps only the company facts. The home page prints its
   words plainly. */
@page { size: A4; margin: 18mm 16mm 16mm; }
/* ============================================================ Contact page */

/* The home's first screen with another glass object (ART-DIRECTION v6): Cedric's house at Zimmerstraße 94 in glass on
   cobalt (night in dark mode), the words bottom left; then the booklet's white pages with the week of phone hours and
   the 3D map, and the cobalt back page. */
.contact-page { --col: min(43vw, 720px); position: relative; }   /* the house starts at 49 % of a 1024 × 768 window */
.c-stage { position: absolute; top: 0; left: 0; right: 0; height: calc(100svh + var(--glass)); }
.contact-page .doc-bar { position: relative; z-index: 1; }
.c-cover {
  position: relative;
  z-index: 1;
  min-height: calc(100svh + var(--glass) - 84px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 24px max(var(--wrap), env(safe-area-inset-right)) calc(clamp(28px, 5.5svh, 56px) + var(--glass)) max(var(--wrap), env(safe-area-inset-left));
  color: var(--ink-on);
}
.c-cover ::selection { background: var(--ink-on); color: var(--ground); }
.c-cover h1 {
  margin: 0;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 700;
  margin-inline-start: var(--optical);
}
.c-cover .lead { max-width: min(30em, var(--col)); }
/* the state now, on the ground: the dot green during phone hours, a ring outside them */
.c-cover .reach-now {
  margin: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
  max-width: var(--col);
  font-size: .9375rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
/* on the cover always as on phones: the state on its own line, what follows aligned with the word below it, so a
   longer state, language or a visitor's own time never wraps into a line that starts with a dot (critic, 1024 px) */
.c-cover .reach-state { flex-basis: calc(100% - 16px); }
.c-cover .reach-when { margin-left: 16px; }
.c-cover .reach-when::before { content: none; }
.c-cover .reach-now[hidden] { min-height: calc(2lh + 2px); }
.c-cover .reach-now .dot { box-shadow: inset 0 0 0 1.5px var(--ink-on-2); }
.c-cover .reach-now.is-open .dot { background: var(--ok-on); box-shadow: none; }
.c-cover .reach-now .dot::after { background: var(--ok-on); }
.c-cover .reach-when, .c-cover .reach-clock { color: var(--ink-on-2); }
.c-cover .reach-clock .here .t { color: var(--ink-on); }
/* call, write or book, in the lead's order: the two addresses, then the home's white button for the booking */
.c-cover .act { margin-top: 6px; align-items: center; gap: 8px 40px; }

.c-body {
  position: relative;
  z-index: 1;
  display: grid;
  row-gap: clamp(64px, 8vw, 112px);
  padding: clamp(48px, 6vw, 96px) max(var(--wrap), env(safe-area-inset-right)) clamp(64px, 10vw, 128px) max(var(--wrap), env(safe-area-inset-left));
  background: var(--doc);
}
@media (prefers-color-scheme: dark) { .c-body { border-top: 1px solid var(--rule); } }
.c-sec { scroll-margin-top: calc(32px + env(safe-area-inset-top)); }   /* a jump to #anfahrt clears the status bar */
.c-sec h2 { margin: 0 0 28px; font-size: clamp(1.5rem, 1rem + 1.2vw, 2rem); line-height: 1.1; letter-spacing: -.02em; font-weight: 700; }
/* Phone hours like Getting here: the object on two thirds (the week), what to do beside it (the booking button) */
.c-sec > .prose { max-width: none; }
.c-sec .reach { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 32px; align-items: start; }
.c-sec .reach .hours { margin: 0; }
.c-sec .prose .week { margin-top: 0; }
.c-sec .prose .book { margin: 0; flex-direction: column; align-items: flex-start; gap: 14px; }
.c-sec .book-note { flex: none; max-width: 22rem; }

/* Getting here: the map on two thirds, the business card and the stations on foot beside it */
.visit { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.visit > .map { margin: 0; aspect-ratio: 4 / 3; background: var(--map-ground); }
@media (min-width: 1280px) { .visit > .map { aspect-ratio: 16 / 10; } }
.visit-side .card { margin: 0; }
.prose .walks-head { margin: 28px 0 8px; font-size: .875rem; font-weight: 600; }
.prose .walks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.walks li { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.prose .walks li + li { margin-top: 0; }
.walks .lines { display: inline-flex; gap: 10px; font-size: .875rem; font-weight: 600; }
.walks .ln { display: inline-flex; align-items: center; gap: 6px; }
.walks .ln::before { content: ""; width: 10px; height: 10px; background: var(--ln); }
.ln-u2 { --ln: #da421e; }          /* BVG line colours: content, like a photograph's colours */
.ln-u6 { --ln: #8c6dab; }
.walks .stop { font-weight: 500; }
.walks .way { font-size: .9375rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the company as a contact card: a text link under the business card, 44 px tall */
.prose .vcard { margin: 6px 0 0; font-size: .9375rem; }
.prose .vcard a { display: inline-flex; align-items: center; min-height: 44px; }
.prose .visit-note { margin: 20px 0 0; font-size: .9375rem; color: var(--ink-2); text-wrap: pretty; }
.prose .routes { margin: 6px 0 0; font-size: .9375rem; color: var(--ink-2); }
/* beside the map, the route line closes on the map's lower edge, so both columns end together */
@media (min-width: 1024px) {
  .visit-side { align-self: stretch; display: flex; flex-direction: column; }
  .prose .visit-side .routes, .visit-side .routes { margin-top: auto; padding-top: 6px; }
}
.routes a { position: relative; margin-right: 14px; }
.routes a::before { content: ""; position: absolute; inset: -12.5px -8px; }   /* 44 px tall; 16 px of the 18 px gap shared */

@media (max-width: 1023px) {
  .c-sec .reach { grid-template-columns: minmax(0, 1fr); }
  .c-sec .prose .book { margin-top: 28px; }
  .visit { grid-template-columns: minmax(0, 1fr); }
  .visit > .map { margin-inline: calc(-1 * max(var(--wrap), env(safe-area-inset-left))); aspect-ratio: 4 / 5; }
}

/* Portrait screens: the picture at its own width under the bar (the house's roof would meet the bar's links), the
   words on the even ground below the house. */
@media (max-aspect-ratio: 6/5) {
  .c-stage { top: max(84px, calc(env(safe-area-inset-top) + 64px)); height: auto; }
  .c-stage img { position: static; width: 100%; height: auto; aspect-ratio: auto 16 / 9; object-fit: initial;
    /* the picture's top edge fades into the ground under the bar, so no seam shows (critic, iPhone) */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40px); mask-image: linear-gradient(to bottom, transparent, #000 40px); }
  .c-stage::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 12%;
    background: linear-gradient(to bottom, transparent, var(--ground));
    pointer-events: none;
  }
  .contact-page { --col: min(640px, calc(100vw - 2 * var(--wrap))); }
  .c-cover { padding-top: calc(44vw + 24px); padding-bottom: calc(40px + var(--glass)); }   /* house base at 78 % of 16:9 */
}
@media (max-aspect-ratio: 3/5) {
  .c-stage img { aspect-ratio: auto 2 / 3; }
  .c-cover { padding-top: calc(80vw + 20px); padding-bottom: calc(max(20px, env(safe-area-inset-bottom)) + var(--glass)); }   /* house base at 53 % of 2:3 */
  .c-cover h1 { font-size: clamp(2.25rem, 10vw, 2.75rem); }
  .c-cover .lead { margin-top: 14px; font-size: 1.0625rem; line-height: 1.45; }
  .c-cover .reach-now { margin-top: 18px; }
}
/* where the contact goes into a column (phones, narrow portrait windows): phone, mail, then the button 12 px below */
@media (max-aspect-ratio: 6/5) and (max-width: 600px), (max-aspect-ratio: 3/5) {
  .c-cover .act { flex-direction: column; align-items: flex-start; gap: 0; }
  .c-cover .act .cta { margin-top: 12px; }
}

@media print {
  :root {
    color-scheme: light;
    --doc: #fff; --ink: #000; --ink-2: rgb(0 0 0 / .72); --rule: rgb(0 0 0 / .2); --link: #000;
    --ground: #fff; --ink-on: #000; --ink-on-2: rgb(0 0 0 / .72); --rule-on: rgb(0 0 0 / .2);
    --wrap: 0px; --edge: 0px;
  }
  html, body { background: #fff; }
  body { font-size: 10pt; }

  .doc-page, .not-found { display: block; min-height: 0; background: #fff; }
  .doc-bar { padding: 0; min-height: 0; color: #000; }
  .doc-bar .brand { min-height: 0; }
  .bar-nav, .toc, .toc-m, .vcard, .glance, dialog, .copy-btn, .here, .geo, .doc-cover .lang { display: none; }
  .doc-cover { padding: 10mm 0 6mm; color: #000; }
  .doc-cover h1 { font-size: 24pt; margin-inline-start: 0; }
  .doc-cover .sub { margin-top: 3mm; font-size: 11pt; max-width: none; }
  .doc-cover .note { font-size: 9pt; }
  .doc-cover .meta { margin-top: 3mm; padding-top: 0; border: 0; font-size: 8.5pt; }
  .doc-cover .meta > :first-child { min-height: 0; }
  .flip > .b { display: none; }
  .flip > .a { opacity: 1; }
  .doc-body { display: block; padding: 6mm 0 0; border: 0; background: none; }
  .prose h2 .num svg, .prose h2 .copied { display: none; }
  .prose h2 .num .n { opacity: 1; }
  .prose .address { border: 0; padding: 0; }
  /* the translation note names where the German original is, also on paper */
  .doc-cover .note a::after { content: " (riverlabs.de" attr(href) ")"; font-weight: 400; }
  .prose { font-size: 10pt; line-height: 1.45; max-width: none; }
  .prose section + section { margin-top: 7mm; }
  .prose h2, .prose h3, .prose h4 { break-after: avoid; break-inside: avoid; }
  .prose h2 { font-size: 12pt; }
  .prose h3, .prose h4 { font-size: 10.5pt; margin-top: 5mm; }
  .prose p, .prose li { orphans: 3; widows: 3; }
  .prose a { color: inherit; }
  .prose a:not(.num):not(.btn):not(.tile) { text-decoration: none; }   /* on paper links are black without the line */
  .facts { grid-template-columns: minmax(0, 42mm) minmax(0, 1fr); }
  .facts dt, .facts dd { padding: 1.6mm 0; break-inside: avoid; }
  /* the objects on paper: the card as a framed block, the hours as their sentence, the button as its address */
  .i, .i-ext, .i-act, .i-lead { color: #000; }
  .facts dt .i, .card-addr .i, .addr .i, .ilist .i, .prose h3 .num .i { width: 3.6mm; height: 3.6mm; }
  .tiles .i, .objection .i-lead { width: 4.6mm; height: 4.6mm; }
  .prose .card { background: none; border: .5pt solid rgb(0 0 0 / .3); padding: 4mm; break-inside: avoid; }
  .card .wordmark { height: 3.6mm; }
  .reach-now, .reach-hint, .week, .reach-local, .book-note .where, .tile .i-act, .prose a.ext .i-ext { display: none !important; }
  .hours { margin-top: 3mm; }
  .prose .hours-line { margin: 0; }
  .prose .book { margin-top: 3mm; }
  .btn { height: auto; padding: 0; background: none; color: #000; font-size: 10pt; gap: 0; }
  .btn .i, .btn .i-ext { display: none; }
  .btn::after { content: ": " attr(href); font-weight: 400; }
  .book-note { font-size: 8.5pt; color: rgb(0 0 0 / .72); }
  .prose .tiles { column-gap: 6mm; }
  .tiles > li, .tile { padding: 2.5mm 0 3mm; break-inside: avoid; }
  .objection { border: 1pt solid #000; padding: 4mm 5mm; break-inside: avoid; }
  .sheet tr { break-inside: avoid; }
  .sheet table { font-size: 9pt; }

  .doc-foot { background: none; color: #000; border-top: 1px solid var(--rule); padding: 6mm 0 0; margin-top: 8mm; break-inside: avoid; }
  .doc-foot .brand, .doc-foot .claim, .fine .legal { display: none; }
  .doc-foot .fine { --ink-on-2: rgb(0 0 0 / .72); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 6mm; font-size: 8pt; }
  .fine::before { display: none; }
  /* the stamp says when the sheet was printed and which version it holds (text completed by assets/doc.js) */
  .print-stamp { display: block; margin: 5mm 0 0; font-size: 8pt; color: rgb(0 0 0 / .72); }

  /* home: the words only, on white */
  .home { display: block; min-height: 0; color: #000; }
  .stage, .boot-mark, .bar-nav, .clock { display: none; }
  .boot .home .brand, .boot .home .copy { opacity: 1; }
  .hero { padding: 0; min-height: 0; display: block; }
  .copy { width: auto; padding: 12mm 0 10mm; }
  .home h1 { font-size: 28pt; margin-inline-start: 0; }
  .lead { font-size: 12pt; }
  .contact { font-size: 13pt; text-decoration-color: currentColor; }
  .cta { height: auto; padding: 0; background: none; color: #000; font-size: 13pt; }
  .cta .i, .cta-dot { display: none; }
  .home .fine { margin: 0; padding-top: 6mm; border-top: 1px solid var(--rule); font-size: 8pt; }

  /* contact page: the words, the hours as their sentence, the card and the stations; no picture, no map */
  .c-cover { display: block; min-height: 0; padding: 10mm 0 6mm; color: #000; }
  .c-cover h1 { font-size: 24pt; margin-inline-start: 0; }
  .c-cover .lead { margin-top: 3mm; font-size: 11pt; max-width: none; }
  .c-cover .act { margin-top: 3mm; gap: 0 8mm; }
  .c-cover .act .cta { display: none; }      /* the booking is a website; on paper the phone and the address remain */
  .c-body { display: block; padding: 0; border: 0; background: none; }
  .c-sec + .c-sec { margin-top: 7mm; }
  .c-sec h2 { margin: 0 0 3mm; font-size: 12pt; break-after: avoid; }
  .visit { display: block; }
  .visit > .map, .routes { display: none; }
  .visit-side { break-inside: avoid; }
  .walks li { padding: 1.6mm 0; }
  .walks .ln::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}