/* Pyros theme stylesheet: Direktdraht (setup/directions/chosen.md).

   Warm graphite and copper, rounded surfaces, a floating pill header, and on
   the home page a copper wire that runs past every section to the contact
   band. Two palettes: dark is the default on every first visit, whatever the
   visitor's system says; a switch in the header changes to light. The choice
   lives in localStorage (key fp-theme) and an inline script in the <head>
   sets it before the first paint (partials/document/open.html).

   Structure of this file:
     fonts, tokens, base, header, page, footer, controls, frames, elements,
     forms, layouts, lightbox, pager, reduced motion, print.

   Breakpoints, mobile first:
     48em   columns: hero beside its portrait, card grids, two-col, footer
     62em   the header's menu goes horizontal (six entries, two languages and
            the buttons need that much room inside the pill)

   Every block element sits in one div.ce-frame.ce-frame--<name>. The frame
   owns the spacing and the side insets; the element inside is content. */

/* ----------------------------------------------------------------- fonts */

/* Variable faces split by unicode range as Google Fonts serves them: the
   latin file holds everything German needs, the latin-ext file is fetched
   only for a page that uses a character from its range. The CSS is served
   at /css/theme.css, so ../fonts/ is the published /fonts/. */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin-variable.woff2") format("woff2");
  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: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin-ext-variable.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-variable.woff2") format("woff2");
  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: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-ext-variable.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- tokens */

/* Palette. Ratios are WCAG 2.2 contrast, computed, not estimated (AA: 4.5:1
   text, 3:1 large text and UI). */
:root {
  color-scheme: dark;

  --color-bg: #141210;             /* page */
  --color-surface: #231f1b;        /* pill, cards, accordion, form, footer */
  --color-text: #f6f2ec;           /* 16.76:1 on bg, 14.67:1 on surface */
  --color-muted: #bfb7ac;          /* 9.42:1 on bg, 8.25:1 on surface */
  --color-line: #7a7166;           /* rules, field borders: 3.90:1 on bg, 3.41:1 on surface */
  --color-accent: #e8955c;         /* copper: buttons, cta band: 7.91:1 on bg, 6.92:1 on surface */
  --color-accent-hover: #f2ae7e;   /* primary hover */
  --color-on-accent: #1c120a;      /* on accent 7.79:1, on hover 9.76:1 */
  --color-link: #e8955c;           /* links, wire, focus ring, as accent */
  --color-block: #2e2923;          /* image placeholder fill */
  --color-block-text: #c8c0b5;     /* 8.00:1 on block */
  --color-field: #141210;          /* form field background; text 16.76:1 */
  --shadow: 0 0 0;                 /* RGB triplet for rgb(var(--shadow) / .28) */
  --overlay: 20 18 16;             /* lightbox scrim and video facade: always dark */
  --on-dark: 246 242 236;          /* lightbox controls: always on the dark scrim */

  /* Type. Headings Schibsted Grotesk 800 and 900, the rest Hanken Grotesk. */
  --font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-base: clamp(1rem, .96rem + .2vw, 1.125rem);       /* 16 to 18px */
  --text-sm: .9rem;
  --text-lead: clamp(1.125rem, 1.02rem + .55vw, 1.4375rem);/* 18 to 23px */
  --text-card: clamp(1.375rem, 1.27rem + .4vw, 1.625rem);  /* 22 to 26px */
  --text-quote: clamp(1.5625rem, 1.2rem + 1.6vw, 2.25rem); /* 25 to 36px */
  --text-section: clamp(1.75rem, 1.3rem + 1.7vw, 2.625rem);/* 28 to 42px */
  --text-title: clamp(2.375rem, 1.5rem + 3.7vw, 4.75rem);  /* 38 to 76px */
  --text-hero: clamp(2.125rem, 1.1rem + 4.2vw, 3.375rem);  /* 34 to 54px, phone */
  --text-cta: clamp(1.75rem, 1.15rem + 2.7vw, 2.875rem);   /* 28 to 46px */

  /* Radii. */
  --radius-pill: 999px;            /* menu, buttons */
  --radius-hero: 28px;             /* hero image, cta band, form surface */
  --radius-surface: 24px;          /* cards, accordion, footer, photos */
  --radius-small: 14px;            /* images in cards, form fields */

  /* Layout. */
  --container: 1280px;             /* the shell; 640px halves give the portrait its 5:6 */
  --measure: 42rem;                /* running text */
  --inset-start: 16px;             /* frame's side padding */
  --inset-end: 16px;
  --frame-gap: 48px;               /* between sections */
  --frame-gap-tight: 24px;         /* an intro text and what it introduces */
  --wire-x: 16px;                  /* the wire's left edge inside the shell */
  --wire-inset: 40px;              /* frame's inset on the home page, clears the wire */
  --header-space: 96px;            /* room the fixed pill takes at the top */
}

:root[data-theme="light"] {
  color-scheme: light;

  --color-bg: #f2f1ee;
  --color-surface: #ffffff;
  --color-text: #1a1714;           /* 15.80:1 on bg, 17.85:1 on surface */
  --color-muted: #574f47;          /* 7.11:1 on bg, 8.03:1 on surface */
  --color-line: #8f867b;           /* 3.17:1 on bg, 3.58:1 on surface */
  --color-accent: #9a4a17;         /* 5.52:1 on bg, 6.24:1 on surface */
  --color-accent-hover: #7e3b10;
  --color-on-accent: #ffffff;      /* on accent 6.24:1, on hover 8.33:1 */
  --color-link: #9a4a17;
  --color-block: #e3e0da;
  --color-block-text: #574f47;     /* 6.10:1 on block */
  --color-field: #f2f1ee;          /* text 15.80:1 */
  --shadow: 26 23 20;
}

@media (min-width: 48em) {
  :root {
    --text-hero: clamp(2.125rem, 4.5vw, 3.75rem);          /* to 60px, half a screen wide */
    --inset-start: 56px;
    --inset-end: 56px;
    --frame-gap: 72px;
    --frame-gap-tight: 28px;
    --wire-x: 64px;
    --wire-inset: 128px;
    --header-space: 120px;
  }
}

/* ------------------------------------------------------------------ base */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* In-page anchors (#c-<uid>) must land clear of the fixed pill. */
  scroll-padding-top: var(--header-space);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
}

:where(h1, h2, h3, h4) {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.04em;
  overflow-wrap: break-word;
}

:where(p, ul, ol, figure, blockquote, address, dl, dd) { margin: 0; }

:where(ul, ol) { padding-left: 1.3em; }

:where(address) { font-style: normal; }

:where(img, svg) { display: block; max-width: 100%; }

:where(img) { height: auto; }

:where(a) { color: var(--color-link); text-underline-offset: .15em; }

:where(a:hover) { text-decoration-thickness: 2px; }

:where(code) {
  font-size: .9em;
  padding: .1em .3em;
  border-radius: 6px;
  background: var(--color-block);
}

:where(strong, b) { font-weight: 700; }

/* German compounds on narrow screens. */
@media (max-width: 47.99em) {
  :where(h1, h2, h3, .ce-card__heading) {
    hyphens: auto;
    hyphenate-limit-chars: 13 5 5;
  }
}

:focus-visible {
  outline: 3px solid var(--color-link);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 30;
  padding: .7em 1.2em;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; }

.skip-link:focus-visible { outline-color: var(--color-text); }

.sr-only,
.page--home .page__header {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

/* A floating pill, fixed on every width. Markup: partials/header.html. The
   wrapper spans the viewport and lets clicks through; only the pill takes
   them, so nothing at the page's edge is blocked. */
.site-header {
  position: fixed;
  top: 10px;
  left: 0;
  right: 0;
  z-index: 20;
  pointer-events: none;
}

.site-header__inner {
  pointer-events: auto;
  width: calc(100% - 20px);
  max-width: calc(var(--container) - 64px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: 0 10px 30px rgb(var(--shadow) / .28);
}

.site-header__brand {
  margin-right: auto;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -.04em;
  white-space: nowrap;
  color: var(--color-text);
  text-decoration: none;
}

/* Phone: the toggle closes the row. The menu rises as a sheet from the
   bottom edge, the pill stays where it is. */
.site-nav { order: 3; }

.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.site-nav__toggle-close { display: none; }

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-open { display: none; }

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-close { display: inline; }

.site-nav__menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__toggle[aria-expanded="true"] + .site-nav__menu {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  max-height: calc(100vh - 76px);
  max-height: calc(100dvh - 76px);
  overflow-y: auto;
  padding: 20px 22px calc(24px + env(safe-area-inset-bottom, 0px));
  border-radius: var(--radius-surface) var(--radius-surface) 0 0;
  background: var(--color-surface);
  box-shadow: 0 -12px 30px rgb(var(--shadow) / .4);
}

.site-nav__link {
  display: block;
  padding: 5px 0;
  font-family: var(--font-display);
  font-size: 1.6875rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--color-text);
  text-decoration: none;
}

.site-nav__link[aria-current],
.site-nav__sublink[aria-current] { color: var(--color-link); }

.site-nav__sub {
  list-style: none;
  margin: 0 0 6px;
  padding: 0 0 0 14px;
}

.site-nav__sublink {
  display: block;
  padding: 4px 0;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}

/* The contact page's entry: the copper button at the foot of the sheet. */
.site-nav__item--cta { margin-top: 12px; }

.site-nav__item--cta .site-nav__link,
.site-nav__item--cta .site-nav__link[aria-current] {
  padding: 14px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
}

/* Only desktop shows this one: there the button comes after the language
   and mode controls, and the DOM order keeps the tab order the same. */
.site-header__cta { display: none; }

.site-lang { font-size: .8125rem; }

.site-lang__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

.site-lang__link {
  color: var(--color-muted);
  text-decoration: none;
}

.site-lang__link:hover { color: var(--color-text); }

.site-lang__link[aria-current] {
  color: var(--color-text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.site-mode {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

/* The head script always sets data-theme, so without it there is no script
   to run the switch either. */
:root:not([data-theme]) .site-mode { display: none; }

.site-mode__moon { display: none; }

:root[data-theme="light"] .site-mode__sun { display: none; }

:root[data-theme="light"] .site-mode__moon { display: block; }

@media (min-width: 48em) {
  .site-header { top: 22px; }

  .site-header__inner { width: calc(100% - 64px); }
}

@media (min-width: 62em) {
  .site-header__inner {
    gap: 26px;
    padding: 9px 10px 9px 28px;
  }

  .site-header__brand {
    margin-right: 12px;
    font-size: 1.5rem;
  }

  /* The menu pushes the rest to the right edge; the language switch cannot
     do it, a page in one language has none. */
  .site-nav {
    order: 0;
    margin-right: auto;
  }

  .site-nav__toggle { display: none; }

  .site-nav__menu,
  .site-nav__toggle[aria-expanded="true"] + .site-nav__menu {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 26px;
    max-height: none;
    overflow: visible;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .site-nav__link {
    padding: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
  }

  .site-nav__item--cta { display: none; }

  .site-nav__item--parent { position: relative; }

  /* The dropdown hangs below the pill; the bridge keeps hover alive across
     the gap. */
  .site-nav__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: -14px;
    z-index: 21;
    min-width: 14rem;
    margin: 18px 0 0;
    padding: 10px 14px;
    border-radius: 20px;
    background: var(--color-surface);
    box-shadow: 0 10px 30px rgb(var(--shadow) / .28);
  }

  .site-nav__sub::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
  }

  .site-nav__item--parent:is(:hover, :focus-within) .site-nav__sub { display: block; }

  .site-lang { font-size: .9375rem; }

  .site-lang__list { gap: 12px; }

  .site-mode {
    width: 40px;
    height: 40px;
  }

  .site-header__cta {
    display: block;
    padding: 11px 22px;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
  }

  .site-header__cta:hover { background: var(--color-accent-hover); }

  .site-header__cta:focus-visible { outline-offset: 4px; }
}

/* The button that lies over the first screen on a phone: placed against the
   page, not the viewport, so it scrolls away with that screen and never
   covers what comes after. Markup: partials/phone-cta.html. */
.site-phone-cta {
  position: absolute;
  left: 14px;
  right: 14px;
  top: calc(100vh - 68px);
  top: calc(100svh - 68px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 24px rgb(var(--shadow) / .35);
}

.site-phone-cta:hover { background: var(--color-accent-hover); }

@media (min-width: 48em) {
  .site-phone-cta { display: none; }
}

/* ------------------------------------------------------------------ page */

.site-main { flex: 1 0 auto; }

.container {
  max-width: var(--container);
  margin-inline: auto;
}

.page__header {
  padding: var(--header-space) var(--inset-end) 24px var(--inset-start);
}

.page__title {
  font-size: var(--text-title);
  line-height: 1;
  letter-spacing: -.05em;
}

.page__lead {
  margin-top: 14px;
  max-width: 26em;
  font-size: var(--text-lead);
  line-height: 1.35;
  color: var(--color-muted);
}

@media (min-width: 48em) {
  .page__header { padding: 144px var(--inset-end) 40px var(--inset-start); }
}

/* The 404 page and the no-layout fallback: copy without a frame. */
.page__content > :is(p, ul, ol, h2, h3) {
  max-width: var(--measure);
  margin-inline: var(--inset-start) var(--inset-end);
}

.page__content > p:last-child { margin-bottom: var(--frame-gap); }

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

.site-footer {
  flex: none;
  padding: 0 10px calc(10px + env(safe-area-inset-bottom, 0px));
}

.site-footer__inner {
  max-width: calc(var(--container) - 64px);
  margin-inline: auto;
  display: grid;
  gap: 20px;
  padding: 24px 20px;
  border-radius: var(--radius-surface);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 1rem;
}

.site-footer__about { display: grid; gap: 4px; }

.site-footer__brand {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -.04em;
  line-height: 1.2;
  color: var(--color-text);
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.site-footer__link { color: var(--color-text); }

.site-footer__copy { font-size: var(--text-sm); }

@media (min-width: 48em) {
  .site-footer { padding: 0 32px 32px; }

  .site-footer__inner {
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 48px;
    padding: 28px 32px;
  }
}

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

/* Buttons: the button element and the submit of the hosted contact form.
   Each state names its background and its text. */
.ce-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.ce-btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.ce-btn--primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-on-accent);
}

.ce-btn--secondary {
  background: transparent;
  border-color: var(--color-line);
  color: var(--color-text);
}

.ce-btn--secondary:hover {
  background: transparent;
  border-color: var(--color-text);
  color: var(--color-text);
}

/* Button chips sit inline, beside text if the paragraph has any, so a flex
   row is no option here. The margins keep wrapped rows apart, and with the
   space between the chips make their 12px gap. */
p > .ce-btn { margin: 0 8px 8px 0; }

p:has(> .ce-btn) { margin-bottom: -8px; }

/* ---------------------------------------------------------------- frames */

.ce-frame {
  --frame-top: var(--frame-gap);
  position: relative;
  padding: var(--frame-top) var(--inset-end) 0 var(--inset-start);
}

/* A text introduces what follows it. */
.ce-frame--text + :is(.ce-frame--text, .ce-frame--cards, .ce-frame--accordion, .ce-frame--image, .ce-frame--page-teasers) { --frame-top: var(--frame-gap-tight); }

/* On an inner page the page header is the gap above the first frame. */
.ce-layout__slot > .ce-frame:first-child { --frame-top: 0px; }

.ce-layout__slot--main > .ce-frame:last-child { padding-bottom: var(--frame-gap); }

.ce-layout__slot--footer { padding-bottom: var(--frame-gap); }

.ce-frame--spacer { --frame-top: 0px; }

/* The wire. It belongs to the theme, not to the content: on the home page
   every frame after the hero draws its piece, so a section an editor adds,
   moves or deletes keeps it whole. It leaves the hero picture, and the cta
   ends it at its node. */
.page--home { --inset-start: var(--wire-inset); }

.page--home .ce-frame:not(.ce-frame--hero)::before {
  content: "";
  position: absolute;
  left: var(--wire-x);
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-link);
}

.page--home :is(.ce-frame--text, .ce-frame--quote, .ce-frame--text-media, .ce-frame--cta)::after {
  content: "";
  position: absolute;
  left: calc(var(--wire-x) - 8px);
  top: calc(var(--frame-top) + 8px);
  width: 19px;
  height: 19px;
  border: 3px solid var(--color-link);
  border-radius: 50%;
  background: var(--color-bg);
}

.page--home .ce-frame--cta::before {
  bottom: auto;
  height: calc(var(--frame-top) + 14px);
}

@media (min-width: 48em) {
  .page--home .ce-frame--hero + .ce-frame::before { top: -14px; }
}

/* -------------------------------------------------------------- elements */

/* --- hero -------------------------------------------------------------- */

/* The first screen, inside the shell. With an image the two halves of the
   1280px shell give the portrait 5:6. On a phone the picture sits on top in
   a wider cut, which is why the portrait needs air around the head. */
.ce-frame--hero { padding: 0; }

.ce-hero { display: grid; }

.ce-hero__figure {
  position: relative;
  overflow: hidden;
  margin: 6px 6px 0;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  background: var(--color-block);
}

.ce-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.ce-hero__inner {
  display: grid;
  gap: 12px;
  align-content: center;
  padding: 22px 16px 80px;
}

.ce-hero:not(.ce-hero--image) .ce-hero__inner { padding-top: var(--header-space); }

.ce-hero__hello {
  font-weight: 700;
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.375rem);
  color: var(--color-link);
}

.ce-hero__heading {
  font-size: var(--text-hero);
  line-height: 1;
  letter-spacing: -.045em;
}

.ce-hero__body { display: grid; gap: 22px; }

/* On a phone the button over the first screen does the hero's work. Only
   when that button is there: the :has() keeps the hero's own buttons on a
   page without one. The buttons go, not their paragraph, which may hold
   text as well. */
@media (max-width: 47.99em) {
  body:has(.site-phone-cta) .ce-hero__body .ce-btn { display: none; }
}

.ce-hero__body p:first-child:not(:has(> .ce-btn)) {
  max-width: 26em;
  font-size: clamp(1rem, .9rem + .5vw, 1.3125rem);
  line-height: 1.4;
}

@media (min-width: 48em) {
  .ce-hero--image {
    grid-template-columns: 1fr 1fr;
    min-height: 760px;
  }

  .ce-hero__figure {
    aspect-ratio: auto;
    margin: 14px 0 14px 14px;
    border-radius: var(--radius-hero);
  }

  .ce-hero__img {
    position: absolute;
    inset: 0;
    object-position: 50% 30%;
  }

  .ce-hero__inner {
    gap: 22px;
    padding: 136px clamp(24px, 5vw, 64px) 64px;
  }

  .ce-hero:not(.ce-hero--image) .ce-hero__inner { padding: 144px var(--inset-end) 40px var(--inset-start); }
}

/* --- text -------------------------------------------------------------- */

.ce-text > * + *,
.ce-text-media__body > * + * { margin-top: 1em; }

.ce-text :is(h2, h3, h4) + *,
.ce-text-media__body :is(h2, h3, h4) + * { margin-top: .6em; }

.ce-text > * + :is(h2, h3, h4),
.ce-text-media__body > * + :is(h2, h3, h4) { margin-top: 1.6em; }

.ce-text > :is(p, ul, ol, h3, h4),
.ce-text-media__body > :is(p, ul, ol, h3, h4) { max-width: var(--measure); }

.ce-text h2,
.ce-text-media__body h2 { font-size: var(--text-section); }

.ce-text h3,
.ce-text-media__body h3 {
  font-size: clamp(1.375rem, 1.2rem + .75vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.03em;
}

.ce-text h4,
.ce-text-media__body h4 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.ce-text li + li,
.ce-text-media__body li + li { margin-top: .3em; }

.ce-text li::marker,
.ce-text-media__body li::marker { color: var(--color-link); }

/* GFM tables: scrolled inside their wrapper, never the page. */
.ce-table {
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-small);
  background: var(--color-surface);
}

.ce-table__table {
  width: 100%;
  border-collapse: collapse;
}

.ce-table__table :is(th, td) {
  padding: .7em 1em;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.ce-table__table thead th { font-weight: 700; }

.ce-table__table tbody tr:last-child td { border-bottom: 0; }

/* --- icon (inline) ----------------------------------------------------- */

.ce-icon {
  display: inline-block;
  vertical-align: -.125em;
  color: var(--color-link);
}

.ce-icon svg {
  display: block;
  width: 1em;
  height: 1em;
}

.ce-btn .ce-icon { color: inherit; }

/* --- image, with its hidden img rows ----------------------------------- */

.ce-images {
  display: grid;
  gap: 18px;
}

.ce-figure {
  min-width: 0;
}

.ce-figure > a { display: block; }

.ce-figure__img {
  width: 100%;
  border-radius: var(--radius-surface);
}

.ce-figure__caption {
  padding-top: 8px;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.ce-lightbox { cursor: zoom-in; }

/* Several images in one grid share a shape. */
@media (min-width: 40em) {
  .ce-images--cols-2,
  .ce-images--cols-3,
  .ce-images--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  :is(.ce-images--cols-2, .ce-images--cols-3, .ce-images--cols-4) .ce-figure__img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}

@media (min-width: 48em) {
  .ce-images--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .ce-images--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- text-media -------------------------------------------------------- */

.ce-text-media {
  display: grid;
  gap: 24px;
  align-items: center;
}

.ce-text-media__media,
.ce-text-media__body { min-width: 0; }

@media (min-width: 48em) {
  .ce-text-media--left { grid-template-columns: 320px minmax(0, 1fr); }

  .ce-text-media--right { grid-template-columns: minmax(0, 1fr) 320px; }

  .ce-text-media--right .ce-text-media__media { order: 2; }

  .ce-text-media { gap: 48px; }

  /* Without images the body stands alone. */
  .ce-text-media:not(:has(> .ce-text-media__media)) { grid-template-columns: minmax(0, 1fr); }

  /* Several images need more room than one. */
  .ce-text-media--left:has(.ce-images--cols-2, .ce-images--cols-3, .ce-images--cols-4) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .ce-text-media--right:has(.ce-images--cols-2, .ce-images--cols-3, .ce-images--cols-4) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* --- cards, with their hidden card rows -------------------------------- */

.ce-cards {
  display: grid;
  gap: 18px;
}

@media (min-width: 40em) {
  .ce-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62em) {
  .ce-cards--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .ce-cards--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ce-card {
  display: block;
  min-width: 0;
  padding: 26px;
  border-radius: var(--radius-surface);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
}

a.ce-card:hover .ce-card__heading { color: var(--color-link); }

.ce-card__figure {
  overflow: hidden;
  margin-bottom: 18px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-small);
  background: var(--color-block);
}

.ce-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ce-card__heading {
  margin-bottom: 8px;
  font-size: var(--text-card);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
}

.ce-card__text { color: var(--color-muted); }

/* --- quote ------------------------------------------------------------- */

.ce-quote {
  display: grid;
  gap: 16px;
  max-width: 880px;
}

.ce-quote__body {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-quote);
  line-height: 1.14;
  letter-spacing: -.03em;
}

.ce-quote__body a { color: var(--color-link); }

.ce-quote__attribution { color: var(--color-muted); }

/* --- accordion, with its visible accordion-item children --------------- */

.ce-accordion {
  padding: 8px 20px;
  border-radius: var(--radius-surface);
  background: var(--color-surface);
}

.ce-accordion__item { border-bottom: 1px solid var(--color-line); }

.ce-accordion__item:last-child { border-bottom: 0; }

.ce-accordion__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 18px 0;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.ce-accordion__summary::-webkit-details-marker { display: none; }

.ce-accordion__summary::after {
  content: "+";
  flex: none;
  font-weight: 400;
  font-size: 1.625rem;
  line-height: 1;
  color: var(--color-link);
}

.ce-accordion__item[open] .ce-accordion__summary::after { content: "\2212"; }

.ce-accordion__body {
  padding-bottom: 18px;
  color: var(--color-muted);
}

.ce-accordion__body > * + * { margin-top: .8em; }

@media (min-width: 48em) {
  .ce-accordion { padding: 8px 28px; }

  .ce-accordion__summary { font-size: 1.25rem; }
}

/* --- cta --------------------------------------------------------------- */

.ce-frame--cta { padding-bottom: var(--frame-gap); }

.ce-cta {
  border-radius: var(--radius-hero);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.ce-cta__inner {
  display: grid;
  gap: 18px;
  align-items: center;
  padding: 28px 24px;
}

.ce-cta__heading {
  font-size: var(--text-cta);
  line-height: 1.02;
}

.ce-cta__body {
  display: grid;
  gap: 14px;
  justify-items: start;
  font-size: 1.1875rem;
  line-height: 1.4;
  max-width: 22em;
}

.ce-cta a:not(.ce-btn) { color: inherit; }

.ce-cta .ce-btn--primary {
  background: var(--color-on-accent);
  border-color: var(--color-on-accent);
  color: var(--color-accent);
}

.ce-cta .ce-btn--primary:hover {
  background: transparent;
  border-color: var(--color-on-accent);
  color: var(--color-on-accent);
}

.ce-cta .ce-btn--secondary {
  background: transparent;
  border-color: var(--color-on-accent);
  color: var(--color-on-accent);
}

.ce-cta .ce-btn--secondary:hover {
  background: var(--color-on-accent);
  border-color: var(--color-on-accent);
  color: var(--color-accent);
}

.ce-cta :focus-visible { outline-color: var(--color-on-accent); }

@media (min-width: 48em) {
  .ce-cta__inner {
    gap: 32px;
    padding: 48px 52px;
  }

  .ce-cta__inner:has(> .ce-cta__heading) { grid-template-columns: 1fr auto; }
}

/* --- video-embed ------------------------------------------------------- */

/* Not offered in the insert dialog (consent), kept for a page that has one.
   The facade is dark in both modes: it stands for a video. */
.ce-video {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-surface);
  background: #231f1b;
  color: rgb(var(--on-dark));
}

.ce-video__consent {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  border: 0;
  border-radius: var(--radius-surface);
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.ce-video__consent:focus-visible {
  outline-color: rgb(var(--on-dark));
  outline-offset: -6px;
}

.ce-video__play {
  position: relative;
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 8px;
  border-radius: 50%;
  background: #e8955c;
  transition: transform .15s ease;
}

.ce-video__consent:is(:hover, :focus-visible) .ce-video__play { transform: scale(1.06); }

.ce-video__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-38%, -50%);
  border-style: solid;
  border-width: .8rem 0 .8rem 1.3rem;
  border-color: transparent transparent transparent #1c120a;
}

.ce-video__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-card);
  line-height: 1.25;
}

.ce-video__note {
  font-size: var(--text-sm);
  color: #bfb7ac;
}

.ce-video__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius-surface);
}

/* --- spacer ------------------------------------------------------------ */

.ce-spacer--s { height: 16px; }

.ce-spacer--m { height: 40px; }

.ce-spacer--l { height: 64px; }

.ce-spacer--xl { height: 96px; }

/* --- page teasers, also the child pages of a section ------------------- */

.ce-teasers__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

@media (min-width: 40em) {
  .ce-teasers__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62em) {
  .ce-teasers__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ce-teasers__item {
  position: relative;
  padding: 26px;
  border-radius: var(--radius-surface);
  background: var(--color-surface);
}

.ce-teasers__title {
  font-size: var(--text-card);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
}

.ce-teasers__link {
  color: var(--color-text);
  text-decoration: none;
}

/* The whole tile is the link. */
.ce-teasers__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.ce-teasers__link:hover { color: var(--color-link); }

.ce-teasers__summary {
  margin-top: 8px;
  color: var(--color-muted);
}

/* The section listing of _default/list.html sits outside any frame. */
.page > .ce-teasers {
  padding: 0 var(--inset-end) var(--frame-gap) var(--inset-start);
}

/* --- html -------------------------------------------------------------- */

.ce-html { overflow-wrap: anywhere; }

/* ----------------------------------------------------------------- forms */

/* The classes the hosted contact form renders (theme contract item 20) and
   its own consent row. A form inside two-col sits on that layout's surface;
   anywhere else it brings its own. */
.ce-form__heading {
  margin-bottom: 18px;
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.125rem);
}

.dh-form__intro { margin-bottom: 18px; color: var(--color-muted); }

.dh-form__result {
  padding: 12px 16px;
  border-radius: var(--radius-small);
  background: var(--color-block);
  color: var(--color-text);
}

.ce-form__form {
  display: grid;
  gap: 20px;
}

.ce-form__field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ce-form__label {
  font-weight: 600;
  font-size: .9em;
}

.ce-form__input,
.ce-form__textarea {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-small);
  background: var(--color-field);
  color: var(--color-text);
  font: inherit;
}

.ce-form__textarea {
  min-height: 150px;
  resize: vertical;
}

.ce-form__field:has(.ce-form__textarea),
.dh-form__consent,
.ce-form__submit { grid-column: 1 / -1; }

.ce-form__submit { justify-self: start; }

.dh-form__consent {
  font-size: .86em;
  line-height: 1.4;
  color: var(--color-muted);
}

.dh-form__consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--color-link);
}

.dh-form__consent a { color: var(--color-text); }

@media (min-width: 48em) {
  .ce-form__form { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------- layouts */

/* one-col needs nothing: its frames set their own insets. two-col is the
   Kontakt page: a round surface beside the sidebar. Its frames drop their
   insets, the columns carry them. */
.ce-layout--two-col .ce-layout__cols {
  display: grid;
  gap: 24px;
  padding: 0 var(--inset-end) var(--frame-gap) var(--inset-start);
}

.ce-layout--two-col :is(.ce-layout__slot--main, .ce-layout__slot--sidebar) .ce-frame {
  padding: 0;
}

.ce-layout--two-col .ce-layout__slot--main {
  min-width: 0;
  padding: 20px;
  border-radius: var(--radius-hero);
  background: var(--color-surface);
}

.ce-layout--two-col .ce-layout__slot--main .ce-frame + .ce-frame { padding-top: 24px; }

.ce-layout__slot--sidebar {
  min-width: 0;
  display: grid;
  gap: 18px;
  align-content: start;
}

.ce-layout__slot--sidebar .ce-figure__img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.ce-layout__slot--sidebar .ce-text { padding-inline: 6px; }

.ce-layout__slot--sidebar .ce-text > * + * { margin-top: 2px; }

.ce-layout__slot--sidebar .ce-text h2 {
  margin-bottom: 8px;
  font-size: 1.875rem;
}

@media (min-width: 48em) {
  .ce-layout--two-col .ce-layout__cols { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

  .ce-layout--two-col .ce-layout__slot--main { padding: 36px; }
}

/* -------------------------------------------------------------- lightbox */

/* Native <dialog>, built by assets/js/lightbox.js. Dark in both modes. */
.ce-lightbox__dialog {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(var(--on-dark));
}

.ce-lightbox__dialog[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ce-lightbox__dialog::backdrop { background: rgb(var(--overlay) / .92); }

.ce-lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 90rem);
  max-height: 86vh;
  border-radius: var(--radius-small);
}

.ce-lightbox__close,
.ce-lightbox__prev,
.ce-lightbox__next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgb(var(--on-dark) / .12);
  color: rgb(var(--on-dark));
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.ce-lightbox__close:hover,
.ce-lightbox__prev:hover,
.ce-lightbox__next:hover { background: rgb(var(--on-dark) / .24); }

.ce-lightbox__close { top: 1rem; right: 1rem; }

.ce-lightbox__prev,
.ce-lightbox__next {
  top: 50%;
  transform: translateY(-50%);
}

.ce-lightbox__prev { left: 1rem; }

.ce-lightbox__next { right: 1rem; }

/* the display: flex above would otherwise override [hidden] */
.ce-lightbox__prev[hidden],
.ce-lightbox__next[hidden] { display: none; }

.ce-lightbox__close:focus-visible,
.ce-lightbox__prev:focus-visible,
.ce-lightbox__next:focus-visible { outline-color: rgb(var(--on-dark)); }

/* ----------------------------------------------------------------- pager */

/* For the news and categories bundles, should the site gain them. */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 40px;
}

.pager__pages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pager__number,
.pager__link {
  display: inline-block;
  min-width: 2.75rem;
  padding: .6em .8em;
  text-align: center;
}

.pager__number[aria-current="page"] {
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}

.pager__link[aria-disabled="true"] { color: var(--color-muted); }

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .ce-video__play { transition: none; }

  .ce-video__consent:is(:hover, :focus-visible) .ce-video__play { transform: none; }
}

/* ----------------------------------------------------------------- print */

@media print {
  .site-header,
  .site-phone-cta,
  .skip-link { display: none; }

  .page__header { padding-top: 0; }
}