/* ==========================================================================
   drhoke.com · Liquid glass design system
   --------------------------------------------------------------------------
   Materials
     .glass regular   frosted, for content (cards): readable text on top
     .glass clear     lighter, for floating controls (nav, language, buttons)
     .glass tinted    colored glass for emphasis (contact card, primary button)
     inset plate      no blur; used INSIDE glass so glass never sits on glass
   Every glass surface has the same three layers:
     1. translucent fill + backdrop blur/saturation (the "material")
     2. a gradient rim (::before), bright where light hits the top-left edge
     3. a specular sheen (::after) that follows the pointer on controls
   Light and dark appearance follow the operating system. "Reduce
   transparency" and browsers without backdrop-filter get solid surfaces.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Brand */
  --rose: #d9838f;
  --rose-deep: #6e2a35;
  --teal: #1f7287;

  /* Text */
  --text: #1e2d33;
  --muted: #36474e;
  --heading: #2b3d44;
  --charcoal: var(--heading);      /* legacy alias used by the legal pages */
  --accent-text: var(--rose-deep);
  --on-tint: #ffffff;

  /* Page background */
  --bg-base: #e3bdb9;
  --bg-gradient: linear-gradient(155deg, #f1dcd8 0%, #e8c3bf 32%, #dcaeab 60%, #d2b5b1 100%);
  --blob-1: rgba(236, 128, 142, 0.42);
  --blob-2: rgba(255, 196, 176, 0.5);
  --blob-3: rgba(31, 114, 135, 0.2);
  --blob-4: rgba(150, 78, 108, 0.22);

  /* Glass materials */
  --glass-regular: rgba(255, 255, 255, 0.44);
  --glass-clear: rgba(255, 255, 255, 0.24);
  --glass-lens: rgba(255, 255, 255, 0.78);
  --glass-tint: linear-gradient(145deg, rgba(110, 42, 53, 0.84) 0%, rgba(43, 61, 68, 0.88) 100%);
  --glass-blur: 26px;
  --glass-saturate: 185%;
  --rim-strong: rgba(255, 255, 255, 0.95);
  --rim-soft: rgba(255, 255, 255, 0.18);
  --rim-inner-top: rgba(255, 255, 255, 0.75);
  --rim-inner-bottom: rgba(255, 255, 255, 0.22);
  --sheen: rgba(255, 255, 255, 0.38);
  --glass-shadow: 0 1px 2px rgba(43, 61, 68, 0.05), 0 14px 44px rgba(43, 61, 68, 0.13);
  --glass-shadow-raised: 0 2px 4px rgba(43, 61, 68, 0.06), 0 18px 54px rgba(43, 61, 68, 0.18);

  /* Plates inside glass (no blur) */
  --plate: rgba(255, 255, 255, 0.5);
  --plate-hover: rgba(255, 255, 255, 0.74);
  --plate-border: rgba(255, 255, 255, 0.65);
  --logo-plate: rgba(255, 255, 255, 0.82);
  --inset-surface: rgba(255, 255, 255, 0.45);
  --inset-surface-strong: rgba(255, 255, 255, 0.6);
  --inset-border: rgba(255, 255, 255, 0.55);
  --divider: rgba(255, 255, 255, 0.55);

  /* Buttons */
  --btn-solid-bg: linear-gradient(180deg, rgba(56, 77, 86, 0.94) 0%, rgba(30, 45, 51, 0.96) 100%);
  --btn-solid-fg: #ffffff;
  --btn-solid-rim: rgba(255, 255, 255, 0.3);

  /* Header capsule once scrolled */
  --header-glass: rgba(255, 255, 255, 0.5);
  --scroll-edge: rgba(236, 210, 207, 0.82);

  /* Geometry: concentric radii (inner = outer minus the gap between them) */
  --radius-xl: 32px;
  --radius-lg: 22px;
  --radius-md: 18px;
  --radius-pill: 999px;
  --max-width: 1180px;
  --header-h: 84px;

  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-glass: cubic-bezier(0.3, 1.25, 0.5, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --rose: #e7909c;
    --text: #f4eceb;
    --muted: #d3c6c6;
    --heading: #f7efee;
    --accent-text: #f2aab4;
    --on-tint: #ffffff;

    --bg-base: #1d181d;
    --bg-gradient: linear-gradient(155deg, #2a1e25 0%, #211a20 38%, #1a1a1f 70%, #15191d 100%);
    --blob-1: rgba(217, 110, 128, 0.34);
    --blob-2: rgba(160, 82, 104, 0.32);
    --blob-3: rgba(31, 128, 150, 0.26);
    --blob-4: rgba(95, 60, 110, 0.32);

    --glass-regular: rgba(36, 30, 36, 0.48);
    --glass-clear: rgba(255, 255, 255, 0.08);
    --glass-lens: rgba(255, 255, 255, 0.2);
    --glass-tint: linear-gradient(145deg, rgba(150, 62, 78, 0.62) 0%, rgba(30, 64, 76, 0.66) 100%);
    --rim-strong: rgba(255, 255, 255, 0.42);
    --rim-soft: rgba(255, 255, 255, 0.06);
    --rim-inner-top: rgba(255, 255, 255, 0.22);
    --rim-inner-bottom: rgba(255, 255, 255, 0.05);
    --sheen: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 48px rgba(0, 0, 0, 0.38);
    --glass-shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.32), 0 20px 56px rgba(0, 0, 0, 0.46);

    --plate: rgba(255, 255, 255, 0.06);
    --plate-hover: rgba(255, 255, 255, 0.12);
    --plate-border: rgba(255, 255, 255, 0.12);
    --logo-plate: rgba(255, 255, 255, 0.9);
    --inset-surface: rgba(255, 255, 255, 0.06);
    --inset-surface-strong: rgba(255, 255, 255, 0.1);
    --inset-border: rgba(255, 255, 255, 0.12);
    --divider: rgba(255, 255, 255, 0.12);

    --btn-solid-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 232, 231, 0.92) 100%);
    --btn-solid-fg: #1e2d33;
    --btn-solid-rim: rgba(255, 255, 255, 0.8);

    --header-glass: rgba(40, 33, 40, 0.55);
    --scroll-edge: rgba(29, 24, 29, 0.82);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text);
  background: var(--bg-base);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(217, 131, 143, 0.35);
  color: var(--text);
}

[hidden] { display: none !important; }
picture { display: contents; }

/* Bilingual content (homepage only, html.i18n): English by default,
   German with html.lang-de. The privacy page has its own toggle rules. */
html.i18n:not(.lang-de) [data-lang="de"],
html.i18n.lang-de [data-lang="en"] { display: none !important; }

/* Controls that only work with JavaScript */
html:not(.js) .lang-switch { display: none; }

/* ─── Accessibility ─── */
.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: #1e2d33;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.25s var(--ease-out-expo);
}
.skip-link:focus { top: 16px; }

a:focus-visible,
button:focus-visible {
  outline: 2.5px solid var(--heading);
  outline-offset: 3px;
  border-radius: 8px;
}
.button:focus-visible,
.site-nav a:focus-visible,
.lang-switch button:focus-visible { border-radius: var(--radius-pill); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Background: soft colored light for the glass to bend ─── */
.background {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -2;
  background: var(--bg-gradient);
}
.background::before,
.background::after,
.blob {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
}
.blob.one { width: 42vw; height: 42vw; max-width: 560px; max-height: 560px; right: 2%; top: 4%; background: var(--blob-1); }
.blob.two { width: 36vw; height: 36vw; max-width: 480px; max-height: 480px; right: 22%; top: 38%; background: var(--blob-2); }
.blob.three { width: 30vw; height: 30vw; max-width: 420px; max-height: 420px; left: -6%; bottom: 4%; background: var(--blob-4); }
.background::before { width: 34vw; height: 34vw; max-width: 460px; max-height: 460px; right: -6%; bottom: -8%; background: var(--blob-3); }
.background::after { width: 26vw; height: 26vw; max-width: 360px; max-height: 360px; left: 34%; top: 62%; background: var(--blob-1); opacity: 0.6; }

/* ==========================================================================
   Glass material
   ========================================================================== */
.glass-card,
.contact-card,
.tool-card,
.site-nav,
.lang-switch,
.button,
.site-header--sticky.scrolled .container {
  position: relative;
  isolation: isolate;
}

/* 1 · material */
.glass-card,
.contact-card {
  background: var(--glass-regular);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-radius: var(--radius-xl);
  box-shadow:
    inset 0 1px 0 var(--rim-inner-top),
    inset 0 -1px 0 var(--rim-inner-bottom),
    var(--glass-shadow);
}
.site-nav,
.lang-switch,
.button-secondary {
  background: var(--glass-clear);
  -webkit-backdrop-filter: blur(18px) saturate(var(--glass-saturate)) brightness(1.04);
  backdrop-filter: blur(18px) saturate(var(--glass-saturate)) brightness(1.04);
  box-shadow:
    inset 0 1px 0 var(--rim-inner-top),
    inset 0 -1px 0 var(--rim-inner-bottom),
    0 1px 2px rgba(43, 61, 68, 0.05),
    0 8px 24px rgba(43, 61, 68, 0.1);
}
.contact-card { background: var(--glass-tint); }

/* 2 · rim: a 1px gradient edge, brightest where the light comes from */
.glass-card::before,
.contact-card::before,
.tool-card::before,
.site-nav::before,
.lang-switch::before,
.button::before,
.site-header--sticky.scrolled .container::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg,
    var(--rim-strong) 0%,
    var(--rim-soft) 34%,
    var(--rim-soft) 62%,
    var(--rim-strong) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  z-index: 1;
}

/* 3 · specular sheen: light catching the top edge; follows the pointer on
   controls (see --mx/--my in the page script) */
.glass-card::after,
.contact-card::after,
.site-nav::after,
.lang-switch::after,
.button::after,
.tool-card::after,
.site-header--sticky.scrolled .container::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 70% at var(--mx, 22%) var(--my, -10%), var(--sheen), transparent 60%);
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.3s ease;
}
.contact-card::after { background: radial-gradient(90% 60% at 18% -10%, rgba(255, 255, 255, 0.22), transparent 60%); }

/* ─── Scroll-triggered reveal ───
   Only hidden when JavaScript runs (html.js), so the page stays fully
   readable for crawlers, link previews and visitors without JS. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}
.js .reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ─── Layout ─── */
.container { width: min(var(--max-width), calc(100% - 64px)); margin: 0 auto; }

.site-header {
  width: 100%;
  padding-top: 44px;
  padding-bottom: 24px;
  position: relative;
  z-index: 10;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.logo-link {
  display: block;
  flex-shrink: 0;
  border-radius: 8px;
}
.logo-name {
  width: min(220px, 55vw);
  height: auto;
  display: block;
}
@media (prefers-color-scheme: dark) {
  /* The logo artwork is dark gray; lift it for the dark background */
  .logo-name { filter: brightness(0) invert(0.94); }
}

/* Floating header: controls sit on their own layer above the content.
   At the top it is open; once scrolled it condenses into one glass capsule. */
.site-header--sticky {
  position: sticky;
  top: 0;
}
/* The header changes size when it condenses. The page script gives it a
   matching margin-bottom, so the content below never jumps. Only cheap
   properties (opacity, transform) are animated here, never padding or width. */
.site-header--sticky .container { border-radius: var(--radius-pill); }
.site-header--sticky.scrolled .container { animation: capsule-in 0.4s var(--ease-glass); }
@keyframes capsule-in {
  from { opacity: 0.4; transform: translateY(-8px) scale(0.98); }
}
.site-header--sticky.scrolled {
  padding-top: 12px;
  padding-bottom: 0;
}
.site-header--sticky.scrolled .container {
  padding: 6px 6px 6px 22px;
  background: var(--header-glass);
  -webkit-backdrop-filter: blur(24px) saturate(var(--glass-saturate));
  backdrop-filter: blur(24px) saturate(var(--glass-saturate));
  box-shadow:
    inset 0 1px 0 var(--rim-inner-top),
    inset 0 -1px 0 var(--rim-inner-bottom),
    var(--glass-shadow-raised);
}
.site-header--sticky.scrolled .logo-name { width: 118px; }
/* Scroll edge: content fades softly under the floating bar */
.site-header--sticky::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 24px);
  background: linear-gradient(to bottom, var(--scroll-edge) 0%, var(--scroll-edge) 35%, transparent 100%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  -webkit-mask: linear-gradient(to bottom, #000 50%, transparent);
  mask: linear-gradient(to bottom, #000 50%, transparent);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.35s ease;
}
.site-header--sticky.scrolled::before { opacity: 1; }
/* A hairline between navigation and language inside the capsule */
.site-header--sticky.scrolled .lang-switch {
  border-left: 1px solid var(--divider);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  padding-left: 8px;
}
/* Inside the capsule the controls drop their own glass (no glass on glass) */
.site-header--sticky.scrolled .site-nav,
.site-header--sticky.scrolled .lang-switch {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.site-header--sticky.scrolled .site-nav::before,
.site-header--sticky.scrolled .site-nav::after,
.site-header--sticky.scrolled .lang-switch::before,
.site-header--sticky.scrolled .lang-switch::after { display: none; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ─── Capsule controls ─── */
.site-nav,
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: var(--radius-pill);
}
.site-nav a,
.lang-switch button {
  position: relative;
  z-index: 2;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--heading);
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-nav a:hover,
.lang-switch button:hover { background: var(--plate); }
/* The current item is a small lens: brighter glass with its own rim */
.site-nav a[aria-current="true"],
.lang-switch button[aria-pressed="true"] {
  background: var(--glass-lens);
  box-shadow:
    inset 0 1px 0 var(--rim-inner-top),
    inset 0 -1px 0 var(--rim-inner-bottom),
    0 2px 8px rgba(43, 61, 68, 0.12);
}
.lang-switch button { padding: 9px 12px; }

main { flex: 1; padding-bottom: 60px; }

/* ─── Hero ─── */
.hero {
  min-height: calc(100vh - 140px);
  display: flex;
  align-items: center;
  padding: 24px 0 72px;
}
.hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
}
.hero-text {
  flex: 1;
  min-width: 280px;
  max-width: 700px;
}

.hero-eyebrow,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0;
}
.hero-eyebrow::before,
.eyebrow::before {
  content: '';
  width: 30px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--rose), transparent);
  border-radius: 1px;
}
.eyebrow { font-size: 12px; margin-bottom: 14px; }

.subtitle {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 600;
  color: var(--heading);
  margin: 0 0 18px;
}

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.8;
  color: var(--muted);
  max-width: 620px;
  margin: 0;
}

/* ─── Typography ─── */
h1 {
  font-size: clamp(2.5rem, 5vw, 5.6rem);
  font-weight: 700;
  line-height: 0.95;
  margin: 22px 0 32px;
  letter-spacing: -0.04em;
  color: var(--text);
}

h2 {
  font-size: clamp(1.75rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.06;
  margin: 32px 0 14px;
  letter-spacing: -0.03em;
  color: var(--heading);
}

h3 { color: var(--heading); }

p {
  line-height: 1.8;
  color: var(--muted);
  margin: 0 0 16px;
  font-size: 1.05rem;
}

/* ─── Topic labels (not interactive) ─── */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--heading);
  letter-spacing: 0.01em;
}
.tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rose);
}

/* ─── Buttons: glass capsules ─── */
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  border: 0;
  cursor: pointer;
  transition: transform 0.45s var(--ease-glass), box-shadow 0.3s ease, background 0.3s ease;
}
.button > * { position: relative; z-index: 2; }
.button { -webkit-tap-highlight-color: transparent; }
@media (hover: hover) {
  .button:hover { transform: translateY(-2px) scale(1.015); }
}
.button:active { transform: scale(0.97); transition-duration: 0.12s; }

.button-large { padding: 18px 34px; font-size: 1.05rem; }

.button-primary {
  color: var(--btn-solid-fg);
  background: var(--btn-solid-bg);
  box-shadow:
    inset 0 1px 0 var(--btn-solid-rim),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 10px 28px rgba(30, 45, 51, 0.22);
}
.button-primary:hover {
  box-shadow:
    inset 0 1px 0 var(--btn-solid-rim),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 14px 36px rgba(30, 45, 51, 0.3);
}
.button-primary::after { background: radial-gradient(100% 80% at var(--mx, 30%) var(--my, -20%), rgba(255, 255, 255, 0.28), transparent 60%); }

.button-secondary { color: var(--heading); }
.button-secondary:hover { background: var(--plate-hover); }

.arrow { display: inline-block; transition: transform 0.35s var(--ease-glass); }
@media (hover: hover) {
  .button:hover .arrow,
  .tool-card:hover .arrow { transform: translateX(4px); }
}

/* ─── Links ─── */
a.content-link {
  color: var(--heading);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(var(--rose), var(--rose));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s var(--ease-out-expo);
  padding-bottom: 2px;
}
a.content-link:hover { background-size: 100% 2px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--heading);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 32px;
  transition: gap 0.3s var(--ease-out-expo), opacity 0.2s ease;
}
.back-link:hover { gap: 12px; opacity: 0.75; }

/* ─── Sections & Features ─── */
.section { padding: 64px 0 40px; }
.section-header { max-width: 760px; margin: 0 0 30px 0; }
.section-header h2 { margin-top: 6px; }

.feature-card { padding: 38px; }
.feature-card > * { position: relative; z-index: 2; }

.feature-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: center;
}
/* Logo comes first in the markup (so phones show logo, then text, in
   every card); on wide screens this card puts the logo on the right. */
.feature-grid-reverse { grid-template-columns: 1.1fr 0.9fr; }
.feature-grid-reverse .logo-panel { order: 2; }

/* Logos sit on a light plate in both appearances (their artwork needs it) */
.logo-panel {
  border-radius: var(--radius-lg);
  background: var(--logo-plate);
  border: 1px solid var(--plate-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(43, 61, 68, 0.06);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.logo-panel img { max-width: 100%; max-height: 150px; width: auto; height: auto; object-fit: contain; display: block; }

.feature-text { margin-bottom: 0; }
.feature-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; align-items: center; }

/* ─── Statistics Lab tools: plates inside the glass card ─── */
.tools {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--divider);
}
.tools-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--heading);
  margin: 0 0 16px;
}
.tools-title small {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin-left: 6px;
}
.tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tool-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 20px 18px;
  border-radius: var(--radius-md);
  background: var(--plate);
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0 1px 0 var(--rim-inner-top), 0 1px 2px rgba(43, 61, 68, 0.04);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.45s var(--ease-glass);
}
.tool-card > * { position: relative; z-index: 2; }
.tool-card::after { opacity: 0; }
@media (hover: hover) {
  .tool-card:hover {
    background: var(--plate-hover);
    box-shadow: inset 0 1px 0 var(--rim-inner-top), 0 10px 26px rgba(43, 61, 68, 0.12);
    transform: translateY(-2px);
  }
  .tool-card:hover::after { opacity: 1; }
}
.tool-card { -webkit-tap-highlight-color: transparent; }
.tool-card:active { background: var(--plate-hover); }
.tool-card:focus-visible { border-radius: var(--radius-md); }
.tool-name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--heading);
  margin: 0 0 8px;
}
.tool-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 14px;
  flex: 1;
}
.tool-more {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-text);
}

/* ─── Contact card: tinted glass ─── */
.contact-card {
  width: 100%;
  padding: 44px;
  margin: 56px 0;
  color: var(--on-tint);
}
.contact-card > * { position: relative; z-index: 2; }
.contact-card h2 { color: var(--on-tint); margin-top: 0; }
.contact-card p { color: rgba(255, 255, 255, 0.94); margin-bottom: 0; max-width: 680px; }
.contact-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.contact-address {
  margin-top: 22px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  user-select: all;
}
.copy-status {
  font-size: 14px;
  font-weight: 600;
  color: var(--on-tint);
  min-height: 1.2em;
}
.contact-card a:focus-visible,
.contact-card button:focus-visible { outline-color: #fff; }

/* On tinted glass: a bright primary capsule and clear secondary capsules */
.contact-card .button-primary {
  --btn-solid-bg: linear-gradient(180deg, #ffffff 0%, #f3ebea 100%);
  --btn-solid-fg: #1e2d33;
  --btn-solid-rim: rgba(255, 255, 255, 1);
}
.contact-card .button-secondary {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  --rim-inner-top: rgba(255, 255, 255, 0.4);
  --rim-strong: rgba(255, 255, 255, 0.6);
}
.contact-card .button-secondary:hover { background: rgba(255, 255, 255, 0.24); }

/* ─── Portrait in a glass frame (4:5, anchored to the hero text) ─── */
.portrait-wrapper {
  position: relative;
  flex-shrink: 0;
  align-self: center;
  padding: 10px;
  border-radius: 34px;
  background: var(--glass-clear);
  -webkit-backdrop-filter: blur(18px) saturate(var(--glass-saturate));
  backdrop-filter: blur(18px) saturate(var(--glass-saturate));
  box-shadow:
    inset 0 1px 0 var(--rim-inner-top),
    inset 0 -1px 0 var(--rim-inner-bottom),
    var(--glass-shadow-raised);
}
.portrait-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, var(--rim-strong), var(--rim-soft) 40%, var(--rim-soft) 60%, var(--rim-strong));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.portrait {
  width: var(--portrait-w, 290px);
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 24px;
  display: block;
}

/* ─── Footer ─── */
.site-footer {
  text-align: center;
  padding: 28px 0 52px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.footer-link {
  color: var(--heading);
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.footer-link:hover { opacity: 0.7; }

/* ─── Impressum / Datenschutz ─── */
.impressum-card {
  max-width: 800px;
  padding: 48px;
  margin: 0 auto;
}
.impressum-card > * { position: relative; z-index: 2; }
.impressum-card h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.1;
  margin-bottom: 24px;
}
.impressum-card h2 {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.3;
  margin-top: 28px;
  margin-bottom: 8px;
}

/* ==========================================================================
   Phones and tablets: same look, far less GPU work
   --------------------------------------------------------------------------
   Live backdrop blur is the most expensive thing a mobile browser can paint:
   every glass surface re-blurs whatever scrolls beneath it, every frame.
   On touch devices and narrow screens the background is already a soft,
   static gradient, so the large surfaces keep their translucent fill and
   rim but lose the live blur. Only the floating header capsule keeps it.
   The background light is drawn with gradients instead of blur filters.
   ========================================================================== */
@media (max-width: 960px), (hover: none) {
  .background { transform: translateZ(0); }
  .background::before,
  .background::after,
  .blob { filter: none; transform: scale(1.5); }
  .blob.one { background: radial-gradient(closest-side, var(--blob-1) 10%, transparent 100%); }
  .blob.two { background: radial-gradient(closest-side, var(--blob-2) 10%, transparent 100%); }
  .blob.three { background: radial-gradient(closest-side, var(--blob-4) 10%, transparent 100%); }
  .background::before { background: radial-gradient(closest-side, var(--blob-3) 10%, transparent 100%); }
  .background::after { background: radial-gradient(closest-side, var(--blob-1) 10%, transparent 100%); }

  .glass-card,
  .portrait-wrapper,
  .button-secondary,
  .site-nav,
  .lang-switch {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  :root { --glass-regular: rgba(255, 238, 238, 0.42); --glass-clear: rgba(255, 232, 232, 0.3); }
  .contact-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(145deg, rgba(110, 42, 53, 0.9) 0%, rgba(43, 61, 68, 0.93) 100%);
  }
  .site-header--sticky.scrolled .container {
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
  }
  .site-header--sticky::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Shorter, translate-only reveal */
  .js .reveal {
    transform: translateY(16px);
    transition-duration: 0.55s;
  }
}
@media (max-width: 960px) and (prefers-color-scheme: dark), (hover: none) and (prefers-color-scheme: dark) {
  :root { --glass-regular: rgba(36, 30, 36, 0.6); --glass-clear: rgba(255, 255, 255, 0.1); }
  .contact-card { background: linear-gradient(145deg, rgba(150, 62, 78, 0.72) 0%, rgba(30, 64, 76, 0.76) 100%); }
}

/* ==========================================================================
   Accessibility fallbacks
   ========================================================================== */

/* No backdrop-filter, or the visitor asked for less transparency:
   swap glass for solid, slightly translucent surfaces. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-regular: rgba(250, 238, 236, 0.94);
    --glass-clear: rgba(250, 238, 236, 0.9);
    --header-glass: rgba(250, 238, 236, 0.96);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --glass-regular: rgba(38, 32, 38, 0.96);
      --glass-clear: rgba(46, 40, 46, 0.94);
      --header-glass: rgba(38, 32, 38, 0.97);
    }
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-regular: rgba(250, 238, 236, 0.96);
    --glass-clear: rgba(250, 238, 236, 0.94);
    --header-glass: rgba(250, 238, 236, 0.98);
    --plate: rgba(255, 255, 255, 0.85);
  }
  .glass-card, .contact-card, .site-nav, .lang-switch, .button-secondary,
  .portrait-wrapper, .site-header--sticky.scrolled .container {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .contact-card { background: linear-gradient(145deg, #6e2a35, #2b3d44); }
}
@media (prefers-reduced-transparency: reduce) and (prefers-color-scheme: dark) {
  :root {
    --glass-regular: rgba(38, 32, 38, 0.97);
    --glass-clear: rgba(46, 40, 46, 0.95);
    --header-glass: rgba(38, 32, 38, 0.98);
    --plate: rgba(255, 255, 255, 0.1);
  }
}
@media (prefers-contrast: more) {
  :root {
    --muted: var(--text);
    --rim-strong: rgba(43, 61, 68, 0.6);
    --rim-soft: rgba(43, 61, 68, 0.35);
  }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .button:hover, .tool-card:hover { transform: none; }
}

/* ─── Tablet ─── */
@media (max-width: 1199px) {
  .portrait { --portrait-w: 260px; }
}

@media (max-width: 1080px) {
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .hero { min-height: 0; padding-top: 32px; padding-bottom: 56px; }
  .hero-content { flex-direction: column-reverse; text-align: center; align-items: center; gap: 36px; }
  .hero-text { display: flex; flex-direction: column; align-items: center; }
  .hero-eyebrow::before { display: none; }
  .tags, .cta-row { justify-content: center; }
  .feature-grid, .feature-grid-reverse { grid-template-columns: 1fr; gap: 28px; }
  .feature-grid-reverse .logo-panel { order: 0; }
  .portrait { --portrait-w: 190px; }
}

/* ─── Phone ─── */
@media (max-width: 640px) {
  :root { --header-h: 64px; --radius-xl: 26px; }
  .container { width: min(var(--max-width), calc(100% - 32px)); }
  .site-header { padding-top: 24px; padding-bottom: 12px; }
  .site-header .container { justify-content: center; gap: 14px; }
  .site-header--sticky.scrolled { padding-top: 8px; }
  .site-header--sticky.scrolled .container { padding: 4px; gap: 0; justify-content: center; }
  .site-header--sticky.scrolled .logo-link { display: none; }
  .header-actions { gap: 6px; }
  .site-nav, .lang-switch { padding: 4px; }
  .site-nav a { padding: 8px 11px; font-size: 13px; }
  .lang-switch button { padding: 8px 9px; font-size: 13px; }
  .section { padding-top: 40px; }
  .feature-card, .contact-card { padding: 24px; }
  .logo-panel { min-height: 150px; padding: 22px; }
  .tool-grid { grid-template-columns: 1fr; }
  .cta-row .button-large { width: 100%; }
  .contact-actions .button { flex: 1 1 100%; }
  .portrait { --portrait-w: 150px; border-radius: 18px; }
  .portrait-wrapper { padding: 7px; border-radius: 25px; }
  h1 { margin-bottom: 20px; }
  .impressum-card { padding: 32px 24px; }
}