/* ----------------------------------------------------------
   ProScola — site v1
   Tokens map to 2023 Mini Style Guide; accent is Warm Machine.
   ---------------------------------------------------------- */

@font-face {
  font-family: "Lexend";
  src: url("fonts/lexend/lexend-variable.woff2") format("woff2-variations"),
       url("fonts/lexend/lexend-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Brand — locked to style guide (fallback values; see light-dark() block below) */
  --pr-ink: #22215F;
  --pr-paper: #FFFFFF;
  --pr-paper-tint: #FAFAFE;
  --pr-paper-tint-lavender: #F5F4FF;
  --pr-lavender: #DFDEFF;
  --pr-muted: #6E6E85;
  --pr-hairline: #E8E8F2;

  --pr-ring-orange: #EF964A;
  --pr-ring-orange-light: #EFB94A;
  --pr-ring-coral: #E6454A;
  --pr-ring-coral-light: #E66F4A;
  --pr-ring-green: #58C20F;
  --pr-ring-green-light: #A1D950;
  --pr-ring-teal: #00AACE;
  --pr-ring-teal-light: #65CEBD;

  /* Accent — Warm Machine (owner-approved 2026-04-23) */
  --pr-accent: #C2410C;
  --pr-accent-hover: #9A340A;
  --pr-accent-ring: rgba(194, 65, 12, 0.15);

  /* Type */
  --pr-font: "Lexend", system-ui, -apple-system, Segoe UI, sans-serif;

  /* Type scale — 1.25 modular (14 · 17 · 21 · 27 · 34 · 42 · 53) */
  --text-xs: 16.1px;
  --text-sm: 19.5px;
  --text-md: 24.1px;
  --text-lg: 31px;
  --text-xl: 39.1px;
  --text-2xl: 48.3px;
  --text-3xl: 60.9px;

  /* Spacing scale — 8pt base. THIS IS THE SPACING STANDARD for the site:
     every vertical gap lands on a multiple of 8. Page rhythm is
     clamp(48px, 5.5vw, 88px) for section padding; block gaps step
     48 / 32 / 24 / 16 / 8. Set 2026-09-15 alongside the 1.15x type scale. */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-3xl: 128px;

  /* Shape + motion */
  --pr-radius: 8px;
  --pr-radius-lg: 16px;
  --pr-shadow-sm: 0 1px 2px rgba(34, 33, 95, 0.06);
  --pr-shadow-md: 0 8px 24px rgba(34, 33, 95, 0.08);
  --pr-shadow-lg: 0 14px 34px rgba(34, 33, 95, 0.12);
  --pr-transition: 320ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --pr-container: 1200px;
  --pr-gutter: clamp(20px, 4vw, 40px);
}

/* Dark-mode-ready tokens. Activates automatically if color-scheme is changed
   to "light dark" at :root. For now color-scheme is light, so these resolve
   to the light values only. Modern browsers only; falls through to the
   single-value tokens above on older browsers. */
@supports (color: light-dark(#000, #FFF)) {
  :root {
    --pr-ink: light-dark(#22215F, #F5F5F7);
    --pr-paper: light-dark(#FFFFFF, #0E0D28);
    --pr-paper-tint: light-dark(#FAFAFE, #151333);
    --pr-paper-tint-lavender: light-dark(#F5F4FF, #1B1A40);
    --pr-lavender: light-dark(#DFDEFF, #201F42);
    --pr-muted: light-dark(#6E6E85, #9A9AB8);
    --pr-hairline: light-dark(#E8E8F2, #2A2A4A);
  }
}

/* ----- reset / base ------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--pr-font);
  font-weight: 400;
  font-size: 19.5px;
  line-height: 1.55;
  color: var(--pr-ink);
  background: var(--pr-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--pr-accent); text-decoration: none; }
a:hover { color: var(--pr-accent-hover); }
button { font: inherit; cursor: pointer; }

/* ----- focus ring (global, dark double outline for visibility) ----------- */
:focus-visible {
  outline: 2px solid var(--pr-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--pr-paper);
  border-radius: inherit;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pr-ink);
  color: var(--pr-paper);
  padding: 12px 16px;
  border-radius: var(--pr-radius);
  z-index: 100;
}
.skip-link:focus { left: 16px; top: 16px; }

.container {
  max-width: var(--pr-container);
  margin: 0 auto;
  padding-inline: var(--pr-gutter);
}

/* ----- header ------------------------------------------- */
.site-header {
  padding: 14px 0;
  border-bottom: 1px solid var(--pr-hairline);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
body { padding-top: 84px; }
@media (max-width: 720px) { body { padding-top: 70px; } }
.site-header .container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
}
.logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  flex-shrink: 0;
}
.logo img { height: 52px; width: auto; }
.site-nav {
  display: flex;
  gap: 22px;
  margin: 0;
  font-size: 17.2px;
  font-weight: 500;
}
.site-nav a {
  color: var(--pr-ink);
  text-decoration: none;
  transition: color var(--pr-transition);
}
.site-nav a:hover,
.site-nav a:focus-visible { color: var(--pr-accent); }
.header-cluster {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
  margin: 0 auto;
}
.header-klapp {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  flex-shrink: 0;
  transition: transform var(--pr-transition);
}
.header-klapp img { height: 50px; width: auto; border-radius: 50%; }
.header-klapp:hover { transform: translateY(-1px); }
.locale-toggle {
  position: absolute;
  right: var(--pr-gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16.1px;
  font-weight: 500;
  color: var(--pr-muted);
}
.locale-toggle a {
  color: var(--pr-muted);
  text-decoration: none;
  transition: color var(--pr-transition);
  padding: 4px 2px;
}
.locale-toggle a[aria-current="page"] { color: var(--pr-ink); }
.locale-toggle a:hover,
.locale-toggle a:focus-visible { color: var(--pr-accent); }

/* ----- nav toggle (hamburger, mobile only) -------------- */
.nav-toggle {
  display: none;
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  margin-left: 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle .bar {
  display: block;
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--pr-ink);
  border-radius: 1px;
  transition: top 200ms ease, transform 200ms ease, opacity 150ms ease;
}
.nav-toggle .bar:nth-child(1) { top: 11px; }
.nav-toggle .bar:nth-child(2) { top: 17px; }
.nav-toggle .bar:nth-child(3) { top: 23px; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { top: 17px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { top: 17px; transform: rotate(-45deg); }

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .header-cluster { margin: 0; }
  .header-klapp { display: none; }
  .locale-toggle { position: static; transform: none; margin-left: auto; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 20px 24px 24px;
    gap: 16px;
    background: var(--pr-paper);
    border-bottom: 1px solid var(--pr-hairline);
    box-shadow: var(--pr-shadow-md);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform 220ms ease, opacity 180ms ease, visibility 180ms;
    z-index: 9;
  }
  .site-nav a {
    font-size: 19.5px;
    padding: 6px 0;
  }
  body.nav-open .site-nav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  body.nav-open { overflow: hidden; }
}

/* ----- hero --------------------------------------------- */
.hero {
  padding: clamp(48px, 7vw, 80px) 0 clamp(40px, 5vw, 64px);
  background: var(--pr-paper);
}
.hero .img-slot,
#scolets .img-slot {
  border-radius: var(--pr-radius-lg);
  box-shadow: none;
  outline: none;
  overflow: hidden;
  background: transparent;
}
.hero .img-slot img {
  display: block;
  width: 100%;
  height: auto;
}

/* Homepage block rhythm — alternating white / dilute lavender surface.
   The lavender cousin (#F5F4FF) is ProScola's brand surface; logo lavender
   (#DFDEFF) stays unique to the mark. See proscola-logo-strategy memory. */
body.home .eos-hero         { background: var(--pr-paper); }
body.home .time-math        { background: var(--pr-paper-tint-lavender); }
body.home .report-assistant { background: var(--pr-paper-tint-lavender); } /* HUB360 family with time-math */
body.home .creative-example { background: var(--pr-paper); }
body.home .manifesto        { background: var(--pr-paper-tint-lavender); }
body.home .product-glimpse  { background: var(--pr-paper); }
body.home .pricing-preview  { background: var(--pr-paper-tint-lavender); }
body.home .partnership      { background: var(--pr-paper); }
body.home .faq              { background: var(--pr-paper-tint-lavender); }
body.home .closing-cta      { background: var(--pr-paper); }
/* Legacy aliases kept so /produkt etc. continue to work. */
body.home .hero            { background: var(--pr-paper); }
body.home .unification     { background: var(--pr-paper); }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
.hero-copy .eyebrow {
  margin: 0 0 18px;
  font-size: 17.2px;
  font-weight: 500;
  color: var(--pr-accent);
  letter-spacing: 0;
}
.hero-copy h1 {
  font-family: var(--pr-font);
  font-weight: 600;
  font-size: clamp(39.1px, 4.83vw, 55.2px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--pr-ink);
  margin: 0 0 20px;
}
.hero-copy .audience-note {
  margin: 20px 0 0;
  font-size: 16.1px;
  color: var(--pr-muted);
}
.hero-copy h1 .line { display: block; }
@media (max-width: 480px) {
  .hero-copy h1 .line { display: inline; }
}
.hero-copy .subline {
  font-size: clamp(20.7px, 1.84vw, 24.1px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--pr-ink);
  opacity: 0.78;
  margin: 0 0 36px;
  max-width: 40ch;
}
.hero-copy .subline .line { display: block; }
@media (max-width: 480px) {
  .hero-copy .subline .line { display: inline; }
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
/* ----- img-slot + placeholder overlay -------------------- */
/* .is-placeholder must not appear in production HTML (launch gate). */
.img-slot {
  position: relative;
  display: block;
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  box-shadow: var(--pr-shadow-md);
  outline: 1px solid rgba(34, 33, 95, 0.08);
  outline-offset: -1px;
}
.img-slot img {
  display: block;
  width: 100%;
  height: auto;
}
.img-slot.is-placeholder::after {
  content: "PLACEHOLDER · " attr(data-slot);
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  font-family: var(--pr-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: rgba(194, 65, 12, 0.94);
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
}

/* ----- principle line (homepage human-led-AI claim) ------ */
.principle-line {
  font-family: var(--pr-font);
  font-size: clamp(25.3px, 3.45vw, 34.5px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--pr-ink);
  text-align: center;
  margin: 0 auto 48px;
  max-width: 720px;
}

/* ----- product page hierarchy line (Kurs › Lernpfad › Scolet) ---- */
.hierarchy-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 12px;
  text-align: center;
  margin: 56px auto 80px;
  max-width: 760px;
  font-size: 18.4px;
  line-height: 1.5;
  color: var(--pr-muted);
}
.hierarchy-line strong {
  font-size: 20.7px;
  font-weight: 600;
  color: var(--pr-ink);
  letter-spacing: 0.005em;
}
.hierarchy-arrow {
  font-size: 25.3px;
  color: rgba(34, 33, 95, 0.32);
  font-weight: 300;
}
.hierarchy-note {
  display: block;
  width: 100%;
  margin-top: 12px;
  font-size: 16.1px;
  color: var(--pr-muted);
}

/* ----- method-section (10 pedagogical approaches) -------- */
.method-section {
  margin: 64px 0;
}
.method-section > .module-tag,
.method-section > #method-title { text-align: center; }
.method-section h2 {
  margin: 8px 0 12px;
}
.method-intro {
  max-width: 620px;
  font-size: 19.5px;
  line-height: 1.5;
  color: var(--pr-muted);
  margin: 0 auto 40px;
  text-align: center;
}
.method-banner {
  margin: 8px 0 56px;
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  box-shadow: var(--pr-shadow-md);
  outline: 1px solid rgba(34, 33, 95, 0.06);
  outline-offset: -1px;
}
.method-banner img {
  display: block;
  width: 100%;
  height: auto;
}
.method-figure {
  margin: 8px auto 32px;
  max-width: 920px;
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  box-shadow: var(--pr-shadow-md);
  outline: 1px solid rgba(34, 33, 95, 0.08);
  outline-offset: -1px;
  background: #fff;
}
.method-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== Pedagogical-approach flip cards ===== */
.approach-picker {
  margin: clamp(8px, 2vw, 20px) 0 28px;
}
.approach-picker-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  margin-bottom: clamp(18px, 2.2vw, 26px);
}
.approach-picker-head h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--pr-ink);
}
.approach-picker-head .approach-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-xs);
  color: var(--pr-muted);
  white-space: nowrap;
}
.approach-picker-head .approach-hint svg { width: 15px; height: 15px; opacity: 0.8; }
.approach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.approach-card {
  position: relative;
  display: block;
  width: 100%;
  height: 234px;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
  perspective: 1600px;
  border-radius: var(--pr-radius-lg);
}
.approach-card:focus-visible { outline: 2px solid var(--pr-accent); outline-offset: 3px; }
.approach-card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.34, 1.2, 0.4, 1);
}
.approach-card:hover .approach-card-inner,
.approach-card.is-flipped .approach-card-inner {
  transform: rotateY(180deg);
}
.approach-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  border: 1px solid var(--pr-hairline);
  border-radius: var(--pr-radius-lg);
  background: var(--pr-paper);
  box-shadow: var(--pr-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--pr-transition);
}
.approach-card:hover .approach-face { box-shadow: var(--pr-shadow-md); }

/* --- front --- */
.approach-front { justify-content: center; align-items: center; }
.approach-front::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 24px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c, var(--pr-accent));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--c, var(--pr-accent)) 14%, transparent);
}
/* Repeating ProScola logo palette across the grid */
.approach-card:nth-child(8n+1) { --c: #00AACE; }
.approach-card:nth-child(8n+2) { --c: #58C20F; }
.approach-card:nth-child(8n+3) { --c: #EF964A; }
.approach-card:nth-child(8n+4) { --c: #E6454A; }
.approach-card:nth-child(8n+5) { --c: #65CEBD; }
.approach-card:nth-child(8n+6) { --c: #A1D950; }
.approach-card:nth-child(8n+7) { --c: #EFB94A; }
.approach-card:nth-child(8n+8) { --c: #E66F4A; }
.approach-kicker {
  position: absolute;
  top: 22px;
  left: 24px;
  font-size: 13.8px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pr-accent);
}
.approach-title {
  position: relative;
  font-size: 24.1px;
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--pr-ink);
  text-align: center;
  padding: 0 6px;
  text-wrap: balance;
}
.approach-cue {
  position: absolute;
  bottom: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pr-hairline);
  border-radius: 50%;
  color: var(--pr-muted);
  background: var(--pr-paper);
  transition: transform var(--pr-transition), color var(--pr-transition), border-color var(--pr-transition);
}
.approach-cue svg { width: 16px; height: 16px; }
.approach-card:hover .approach-cue {
  color: var(--c, var(--pr-accent));
  border-color: var(--c, var(--pr-accent));
  transform: rotate(-45deg);
}

/* --- back --- */
.approach-back {
  transform: rotateY(180deg);
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 11px;
  background: var(--pr-ink);
  border-color: var(--pr-ink);
}
.approach-back-label {
  font-size: 13.2px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c, #B9B8E8);
}
.approach-back-text {
  font-size: 16.7px;
  line-height: 1.52;
  color: rgba(255, 255, 255, 0.92);
}

/* --- feature card (Arts · Crafts · Tech · Sports) --- */
.approach-card--feature .approach-front {
  background: var(--pr-paper-tint-lavender);
  border-color: var(--pr-lavender);
}
.approach-card.approach-card--feature { --c: var(--pr-accent); }
.approach-card--feature .approach-front::before { display: none; }
.approach-card--feature .approach-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pr-accent);
}
.approach-card--feature .approach-kicker svg { width: 15px; height: 15px; }
.approach-card--feature .approach-cue { border-color: var(--pr-lavender); }
.approach-card--feature .approach-back {
  background: var(--pr-accent);
  border-color: var(--pr-accent);
}
.approach-card--feature .approach-back-label { color: rgba(255, 255, 255, 0.78); }

@media (max-width: 560px) {
  .approach-grid { grid-template-columns: 1fr; }
  .approach-card { height: 208px; }
  .approach-front::after { font-size: 73.6px; }
  .approach-picker-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .approach-card-inner { transition: none; }
  .approach-card:hover .approach-cue { transform: none; }
}
.method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 56px;
  margin-bottom: 32px;
}
.method-row {
  border-top: 1px solid rgba(34, 33, 95, 0.12);
  padding-top: 16px;
}
.method-row h3 {
  font-size: 19.5px;
  font-weight: 600;
  color: var(--pr-ink);
  margin: 0 0 6px;
  line-height: 1.3;
}
.method-row p {
  font-size: 16.1px;
  line-height: 1.55;
  color: var(--pr-muted);
  margin: 0;
}
.method-note {
  font-size: 16.1px;
  color: var(--pr-muted);
}
.method-note a {
  color: var(--pr-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 720px) {
  .method-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ----- scolet-types (12-type subsection inside ScoLets) -- */
.scolet-types {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(34, 33, 95, 0.08);
}
.scolet-types h3 {
  font-size: 23px;
  font-weight: 600;
  color: var(--pr-ink);
  margin: 0 0 28px;
  letter-spacing: -0.005em;
}
.scolet-types-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 40px;
}
/* image-card variant — replaces the 12-card text grid with two reference screenshots */
.scolet-types-grid-images {
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.scolet-image-card {
  margin: 0;
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(34, 33, 95, 0.06);
}
.scolet-image-card img {
  width: 100%;
  height: auto;
  display: block;
}
.scolet-types-grid-images .scolet-row-more {
  grid-column: 1 / -1;
  background: #FFFFFF;
  border: 1px solid rgba(34, 33, 95, 0.06);
  border-radius: var(--pr-radius);
  padding: 22px 26px;
}
@media (max-width: 720px) {
  .scolet-types-grid-images { grid-template-columns: 1fr; }
}
.scolet-row h4 {
  font-size: 17.2px;
  font-weight: 600;
  color: var(--pr-ink);
  margin: 0 0 4px;
  line-height: 1.3;
}
.scolet-row p {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--pr-muted);
  margin: 0;
}
@media (max-width: 880px) {
  .scolet-types-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 32px; }
}
@media (max-width: 520px) {
  .scolet-types-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ----- hero trust credentials (flags + Lehrplan/Pilotschule line) ---- */
.trust-credentials {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: clamp(32px, 5vw, 48px);
}
.trust-flags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.trust-flags .footer-flag       { height: 70px; }
.trust-flags .footer-flag-basel { height: 75px; }
.trust-flags .footer-flag-swiss { height: 65px; }
.trust-line {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pr-muted);
  opacity: 0.85;
}

/* ----- footer credentials (flags + Lehrplan 21 stamp) --- */
.footer-credentials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}
.footer-flag {
  display: block;
  height: 28px;
  width: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(34, 33, 95, 0.08));
}
.footer-flag-basel { height: 30px; }
.footer-flag-swiss { height: 26px; }
.footer-stamp {
  margin: 8px 0 0;
  text-align: center;
  font-size: clamp(16.1px, 1.72vw, 19.5px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pr-muted);
  opacity: 0.75;
}

/* ----- module tagline (italic accent line under H2) ----- */
.module-tagline {
  font-style: italic;
  font-size: 19.5px;
  color: var(--pr-muted);
  margin: -8px 0 16px;
  letter-spacing: 0.005em;
}

/* ----- module figure (secondary image inside a module) -- */
.module-figure {
  margin: 56px 0 0;
  padding: 0;
}
.module-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pr-radius-lg);
  box-shadow: var(--pr-shadow-md);
  outline: 1px solid rgba(34, 33, 95, 0.06);
  outline-offset: -1px;
}
.module-figure figcaption {
  margin-bottom: 14px;
  font-size: 16.1px;
  line-height: 1.5;
  color: var(--pr-muted);
  text-align: center;
}

/* ----- pillars-section (Five Pillars on produkt) -------- */
.pillars-section {
  margin: 64px 0;
}
.pillars-section h2 {
  margin: 8px 0 12px;
}
.pillars-intro {
  max-width: 620px;
  font-size: 19.5px;
  line-height: 1.5;
  color: var(--pr-muted);
  margin: 0 0 48px;
}
.pillars-stance {
  margin: 16px 0 40px;
  font-size: clamp(23px, 2.53vw, 29.9px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--pr-ink);
  max-width: 720px;
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.pillar-card {
  position: relative;
  padding: 24px 20px 22px;
  border-radius: var(--pr-radius);
  background: #FFFFFF;
  border: 1px solid rgba(34, 33, 95, 0.08);
  transition: transform var(--pr-transition), box-shadow var(--pr-transition), border-color var(--pr-transition);
}
.pillar-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pr-shadow-md);
  border-color: var(--pillar-accent);
}
.pillar-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pillar-accent);
  margin-bottom: 14px;
}
.pillar-card h3 {
  font-size: 18.4px;
  font-weight: 600;
  color: var(--pr-ink);
  line-height: 1.3;
  margin: 0 0 8px;
}
.pillar-card p {
  font-size: 16.1px;
  line-height: 1.5;
  color: var(--pr-muted);
  margin: 0;
}
@media (max-width: 1100px) {
  .pillars-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 460px) {
  .pillars-grid { grid-template-columns: 1fr; }
}

/* ----- problem-shift (homepage) ------------------------- */
.problem-shift {
  padding: clamp(60px, 7vw, 96px) 0;
  background: var(--pr-paper);
}
.problem-shift-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
}
.ps-outcomes-top {
  margin: 0 0 48px !important;
}
.ps-col {
  position: relative;
  padding-left: 20px;
  border-left: 2px solid rgba(34, 33, 95, 0.12);
}
.ps-eyebrow {
  font-size: 13.8px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 12px;
}
.ps-eyebrow-problem { color: #E6454A; }
.ps-eyebrow-shift { color: #58C20F; }
.ps-statement {
  font-size: clamp(20.7px, 2.53vw, 25.3px);
  line-height: 1.45;
  color: var(--pr-ink);
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.ps-outcomes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 36px;
}
.ps-outcomes li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17.2px;
  color: var(--pr-ink);
}
.ps-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 720px) {
  .problem-shift-grid { grid-template-columns: 1fr; gap: 28px; }
  .ps-outcomes { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ----- product-module text-only variant (no spacer) ---- */
.product-module-text {
  max-width: 780px;
}
.product-module-text h2 {
  margin: 8px 0 14px;
}
.product-module-text > p {
  margin: 0 0 18px;
}
.product-module-text ul {
  margin: 0;
  padding-left: 20px;
}

/* ----- hub360 list with brand-colour dots ---------------- */
.hub360-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 32px;
}
.hub360-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 19.5px;
  color: var(--pr-ink);
}
.hub360-list .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .hub360-list { grid-template-columns: 1fr; }
}

/* ----- demo-outline (3-bullet outline under each demo video slot) ---- */
.demo-outline {
  list-style: none;
  padding: 0;
  margin: 32px auto 0;
  max-width: 720px;
  display: grid;
  gap: 12px;
}
.demo-outline li {
  position: relative;
  padding-left: 28px;
  font-size: 18.4px;
  line-height: 1.55;
  color: var(--pr-ink);
}
.demo-outline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 14px;
  height: 1px;
  background: rgba(34, 33, 95, 0.3);
}

/* ----- empty image spacer (awaiting real product screenshot) ---- */
.img-spacer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 28px;
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: var(--pr-radius-lg);
  background: repeating-linear-gradient(
    135deg,
    rgba(34, 33, 95, 0.03),
    rgba(34, 33, 95, 0.03) 10px,
    rgba(34, 33, 95, 0.06) 10px,
    rgba(34, 33, 95, 0.06) 20px
  );
  border: 2px dashed rgba(34, 33, 95, 0.22);
  color: rgba(34, 33, 95, 0.7);
}
.img-spacer .spacer-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(194, 65, 12, 0.9);
}
.img-spacer .spacer-label {
  font-size: 17.2px;
  font-weight: 500;
  line-height: 1.4;
  max-width: 320px;
}
.img-spacer .spacer-meta {
  font-size: 13.8px;
  color: rgba(34, 33, 95, 0.55);
}

/* ----- buttons ------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  font-weight: 500;
  font-size: 18.4px;
  border-radius: var(--pr-radius);
  border: 1px solid transparent;
  transition: background var(--pr-transition), color var(--pr-transition),
              border-color var(--pr-transition), transform var(--pr-transition),
              box-shadow var(--pr-transition);
  text-decoration: none;
  position: relative;
}
.btn-primary {
  background: var(--pr-accent);
  color: var(--pr-paper);
}
.btn-primary::after {
  content: "→";
  display: inline-block;
  margin-left: 2px;
  transition: transform var(--pr-transition);
}
.btn-primary:hover {
  background: var(--pr-accent-hover);
  color: var(--pr-paper);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(194, 65, 12, 0.24);
}
.btn-primary:hover::after { transform: translateX(4px); }
.btn-primary:focus-visible {
  background: var(--pr-accent-hover);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 2px var(--pr-paper),
    0 0 0 4px var(--pr-accent),
    0 10px 24px rgba(194, 65, 12, 0.24);
}
.btn-secondary {
  background: transparent;
  color: var(--pr-ink);
  border-color: var(--pr-hairline);
}
.btn-secondary:hover {
  border-color: var(--pr-ink);
  color: var(--pr-ink);
  transform: translateY(-2px);
}
/* ----- Demo CTA: ProScola-green gradient (Demo buchen / Book a Demo) ----- */
.btn-demo {
  background: linear-gradient(135deg, #6BCF1C 0%, #58C20F 45%, #3E9C08 100%);
  color: #FFFFFF;
  border-color: transparent;
}
.btn-demo::after {
  content: "→";
  display: inline-block;
  margin-left: 2px;
  transition: transform var(--pr-transition);
}
.btn-demo:hover {
  background: linear-gradient(135deg, #5FC614 0%, #4DB30C 45%, #348908 100%);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(88, 194, 15, 0.30);
}
.btn-demo:hover::after { transform: translateX(4px); }
.btn-demo:focus-visible {
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow:
    0 0 0 2px var(--pr-paper),
    0 0 0 4px #58C20F,
    0 10px 24px rgba(88, 194, 15, 0.30);
}

/* ----- Klapp login lockup (badge coin stacked above a blue pill) -----
   The round Klapp logo sits centred above a Klapp-blue pill. Whole <a> clicks. */
.btn-klapp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
  text-decoration: none;
  isolation: isolate;
  transition: transform var(--pr-transition);
}
.btn-klapp .klapp-badge {
  width: 82px;
  height: 82px;
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
  filter: drop-shadow(0 4px 9px rgba(0, 56, 84, 0.30));
}
.btn-klapp .klapp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  min-width: 172px;
  padding: 0 34px;
  background: #00A0E4;
  border-radius: 999px;
  box-shadow: 0 9px 22px rgba(0, 160, 228, 0.40);
  transition: background var(--pr-transition), box-shadow var(--pr-transition);
}
.btn-klapp .klapp-login {
  font-family: var(--pr-font);
  font-weight: 600;
  font-size: 23px;
  line-height: 1;
  letter-spacing: -0.005em;
  color: #FFFFFF;
  white-space: nowrap;
}
.btn-klapp:hover { transform: translateY(-2px); }
.btn-klapp:hover .klapp-pill {
  background: #0090CE;
  box-shadow: 0 13px 30px rgba(0, 160, 228, 0.48);
}
.btn-klapp:focus-visible .klapp-pill {
  box-shadow: 0 0 0 2px var(--pr-paper), 0 0 0 4px #00A0E4,
              0 10px 24px rgba(0, 160, 228, 0.30);
}
.btn-klapp.btn-klapp-large .klapp-badge { width: 94px; height: 94px; }
.btn-klapp.btn-klapp-large .klapp-pill {
  height: 66px;
  min-width: 196px;
  padding: 0 40px;
}
.btn-klapp.btn-klapp-large .klapp-login { font-size: 25.3px; }

/* ----- ProScola login lockup (full inverse lockup stacked above an orange pill) ----- */
.btn-proscola {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
  text-decoration: none;
  isolation: isolate;
  transition: transform var(--pr-transition);
}
.btn-proscola .proscola-badge {
  height: 72px;
  width: auto;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(14, 13, 44, 0.35));
}
.btn-proscola .proscola-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  min-width: 172px;
  padding: 0 34px;
  background: var(--pr-ring-orange);
  border-radius: 999px;
  box-shadow: 0 9px 22px rgba(239, 150, 74, 0.38);
  transition: background var(--pr-transition), box-shadow var(--pr-transition);
}
.btn-proscola .proscola-login {
  font-family: var(--pr-font);
  font-weight: 600;
  font-size: 23px;
  line-height: 1;
  letter-spacing: -0.005em;
  color: #FFFFFF;
  white-space: nowrap;
}
.btn-proscola:hover { transform: translateY(-2px); }
.btn-proscola:hover .proscola-pill {
  background: #E5862F;
  box-shadow: 0 13px 30px rgba(239, 150, 74, 0.48);
}
.btn-proscola:focus-visible {
  outline: 3px solid var(--pr-ring-orange);
  outline-offset: 4px;
  border-radius: 10px;
}
.btn-proscola.btn-proscola-large .proscola-badge { height: 82px; }
.btn-proscola.btn-proscola-large .proscola-pill {
  height: 66px;
  min-width: 196px;
  padding: 0 40px;
}
.btn-proscola.btn-proscola-large .proscola-login { font-size: 25.3px; }

/* ----- Combined login-request lockup -----
   Klapp + ProScola marks sitting together above a single CTA. Replaces the two
   separate direct-login buttons: there is no self-service login, so the ask is
   "request one" and it routes to the contact form. Whole <a> clicks. */
.btn-logins {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  transition: transform var(--pr-transition);
}
.btn-logins .logins-marks {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.btn-logins .logins-klapp {
  width: 70px;
  height: 70px;
  display: block;
  flex: none;
  border-radius: 50%;
  filter: drop-shadow(0 4px 9px rgba(0, 56, 84, 0.30));
}
.btn-logins .logins-proscola {
  height: 60px;
  width: auto;
  display: block;
  flex: none;
  filter: drop-shadow(0 4px 10px rgba(14, 13, 44, 0.35));
}
.btn-logins .logins-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  min-width: 200px;
  padding: 0 34px;
  background: var(--pr-ring-orange);
  border-radius: 999px;
  box-shadow: 0 9px 22px rgba(239, 150, 74, 0.38);
  transition: background var(--pr-transition), box-shadow var(--pr-transition);
}
.btn-logins .logins-label {
  font-family: var(--pr-font);
  font-weight: 600;
  font-size: 23px;
  line-height: 1;
  letter-spacing: -0.005em;
  color: #FFFFFF;
  white-space: nowrap;
}
.btn-logins:hover { transform: translateY(-2px); }
.btn-logins:hover .logins-pill {
  background: #E5862F;
  box-shadow: 0 13px 30px rgba(239, 150, 74, 0.48);
}
.btn-logins:focus-visible .logins-pill {
  box-shadow: 0 0 0 2px var(--pr-paper), 0 0 0 4px var(--pr-ring-orange),
              0 10px 24px rgba(239, 150, 74, 0.30);
}
.btn-logins.btn-logins-large .logins-klapp { width: 82px; height: 82px; }
.btn-logins.btn-logins-large .logins-proscola { height: 70px; }
.btn-logins.btn-logins-large .logins-pill {
  height: 66px;
  min-width: 228px;
  padding: 0 40px;
}
.btn-logins.btn-logins-large .logins-label { font-size: 25.3px; }
@media (max-width: 460px) {
  .btn-logins .logins-marks { gap: 14px; }
  .btn-logins.btn-logins-large .logins-klapp { width: 65px; height: 65px; }
  .btn-logins.btn-logins-large .logins-proscola { height: 55px; }
  .btn-logins.btn-logins-large .logins-pill { min-width: 0; padding: 0 26px; }
}

/* ----- responsive --------------------------------------- */
.trust-strip {
  margin: clamp(32px, 4vw, 48px) auto 0;
  text-align: center;
  font-size: 16.1px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--pr-muted);
}

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero .img-slot {
    order: -1;
    max-width: 560px;
    margin-inline: auto;
  }
  .hero-copy .subline { max-width: none; }
}

/* ----- shared section title ----------------------------- */
.section-head {
  text-align: center;
  margin: 0 auto clamp(40px, 6vw, 64px);
  max-width: 52ch;
}
.section-title {
  font-family: var(--pr-font);
  font-weight: 600;
  font-size: clamp(32.2px, 4.37vw, 50.6px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--pr-ink);
  margin: 0 0 clamp(40px, 6vw, 64px);
  text-align: center;
}
.section-head .section-title { margin-bottom: 16px; }
.section-subtitle {
  font-size: 19.5px;
  color: var(--pr-ink);
  opacity: 0.75;
  margin: 0;
  line-height: 1.5;
}

/* ----- sub-page hero (text-only) ------------------------ */
.page-hero {
  padding: clamp(64px, 8vw, 96px) 0 clamp(40px, 5vw, 64px);
  background: linear-gradient(180deg, var(--pr-paper) 0%, var(--pr-paper-tint) 100%);
  text-align: center;
}
.page-hero .eyebrow {
  margin: 0 0 14px;
  font-size: 17.2px;
  font-weight: 500;
  color: var(--pr-accent);
}
.page-hero h1 {
  font-size: clamp(36.8px, 4.6vw, 50.6px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--pr-ink);
  margin: 0 auto 16px;
  max-width: 22ch;
}
.page-hero .page-subline {
  font-size: clamp(19.5px, 1.84vw, 21.8px);
  color: var(--pr-ink);
  opacity: 0.78;
  margin: 0 auto 28px;
  max-width: 52ch;
  line-height: 1.5;
}
.page-hero .page-ctas {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ----- page-hero with side image (2-column variant) ------ */
.page-hero-with-image {
  text-align: left;
}
.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.page-hero-image {
  margin: 0;
  overflow: hidden;
  border-radius: var(--pr-radius-lg);
  aspect-ratio: 3 / 2;
}
.page-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-hero-content {
  text-align: left;
}
.page-hero-with-image h1 {
  margin: 0 0 16px;
  max-width: none;
}
.page-hero-with-image .page-subline {
  margin: 0 0 28px;
  max-width: none;
}
.page-hero-with-image .page-ctas {
  display: flex;
  justify-content: flex-start;
}
@media (max-width: 880px) {
  .page-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .page-hero-image { aspect-ratio: 16 / 10; max-height: 320px; }
}

/* ----- pricing section + /preise ------------------------ */
.pricing, .pricing-preview {
  padding: clamp(48px, 6vw, 80px) 0;
  background: var(--pr-paper);
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  align-items: stretch;
}
.pricing-card {
  background: var(--pr-paper);
  border: 1px solid var(--pr-hairline);
  border-radius: var(--pr-radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--pr-transition), box-shadow var(--pr-transition), border-color var(--pr-transition);
}
.pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pr-shadow-md);
}
.pricing-card-featured {
  border-color: var(--pr-accent);
  border-width: 2px;
  padding: 36px 28px;
}
.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pr-accent);
  color: var(--pr-paper);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13.8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pricing-card h3 {
  font-size: 25.3px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--pr-ink);
}
.pricing-card .tier-tag {
  font-size: 16.1px;
  color: var(--pr-muted);
  margin: 0 0 20px;
}
.pricing-card .price {
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pricing-card .amount {
  font-size: 46px;
  font-weight: 600;
  color: var(--pr-ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.pricing-card .period {
  font-size: 16.1px;
  color: var(--pr-muted);
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pricing-features li {
  font-size: 17.2px;
  color: var(--pr-ink);
  opacity: 0.85;
  position: relative;
  padding-left: 26px;
  line-height: 1.45;
}
.pricing-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 10px;
  border-left: 2px solid var(--pr-accent);
  border-bottom: 2px solid var(--pr-accent);
  transform: rotate(-45deg);
}
.pricing-card .btn { width: 100%; }
.pricing-footer {
  text-align: center;
  margin: 44px 0 0;
  font-size: 17.2px;
  color: var(--pr-muted);
}
.pricing-footer a {
  color: var(--pr-accent);
  text-decoration: none;
  font-weight: 500;
}
.pricing-footer a:hover { text-decoration: underline; }
@media (max-width: 860px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ----- FAQ section -------------------------------------- */
.faq {
  padding: clamp(48px, 6vw, 80px) 0;
  background: var(--pr-paper-tint);
}
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--pr-paper);
  border: 1px solid var(--pr-hairline);
  border-radius: var(--pr-radius);
  padding: 20px 24px;
  transition: border-color var(--pr-transition);
}
.faq-item[open] { border-color: var(--pr-accent); }
.faq-item summary {
  cursor: pointer;
  font-size: 19.5px;
  font-weight: 500;
  color: var(--pr-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 25.3px;
  color: var(--pr-muted);
  transition: color var(--pr-transition);
}
.faq-item[open] summary::after { content: "−"; color: var(--pr-accent); }
.faq-item p {
  margin: 14px 0 0;
  font-size: 17.2px;
  color: var(--pr-ink);
  opacity: 0.82;
  line-height: 1.55;
}

/* ----- product modules (for /produkt) ------------------- */
.product-module {
  padding: clamp(40px, 5vw, 64px) 0;
}
.product-module + .product-module {
  border-top: 1px solid var(--pr-hairline);
}
.product-module-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.product-module:nth-child(even) .product-module-grid > :first-child { order: 2; }
.product-module .module-tag {
  font-size: 14.9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pr-accent);
  margin: 0 0 12px;
}
.product-module h2 {
  font-size: clamp(29.9px, 3.68vw, 41.4px);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--pr-ink);
}
.product-module p {
  font-size: 19.5px;
  color: var(--pr-ink);
  opacity: 0.82;
  line-height: 1.55;
  margin: 0 0 20px;
  max-width: 52ch;
}
.product-module ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.product-module ul li {
  font-size: 18.4px;
  color: var(--pr-ink);
  opacity: 0.82;
  padding-left: 22px;
  position: relative;
}
.product-module ul li::before {
  content: "·";
  position: absolute;
  left: 8px;
  color: var(--pr-accent);
  font-weight: 600;
}
@media (max-width: 860px) {
  .product-module-grid { grid-template-columns: 1fr; }
  .product-module:nth-child(even) .product-module-grid > :first-child { order: 0; }
}

/* ----- contact form ------------------------------------- */
.contact-wrap {
  padding: clamp(40px, 6vw, 64px) 0 clamp(48px, 6vw, 80px);
}
.label-optional { color: var(--pr-ink); opacity: 0.5; font-weight: 400; }
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  background: var(--pr-paper);
  border: 1px solid var(--pr-hairline);
  border-radius: var(--pr-radius-lg);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: var(--pr-shadow-sm);
}
.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.contact-form label {
  display: block;
  font-size: 16.1px;
  font-weight: 500;
  color: var(--pr-ink);
  margin-bottom: 6px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 17.2px;
  color: var(--pr-ink);
  background: var(--pr-paper);
  border: 1px solid var(--pr-hairline);
  border-radius: var(--pr-radius);
  transition: border-color var(--pr-transition);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--pr-accent);
  outline: 2px solid var(--pr-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--pr-accent-ring);
}
.contact-form [aria-invalid="true"] {
  border-color: #B3261E;
}
.field-error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: #B3261E;
}
.field-error:empty {
  display: none;
}
.contact-form textarea {
  min-height: 138px;
  resize: vertical;
}
.contact-form .form-actions {
  margin-top: 20px;
  text-align: center;
}
.contact-form .form-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 14.9px;
  color: var(--pr-muted);
}
@media (max-width: 620px) {
  .contact-form .form-row { grid-template-columns: 1fr; }
}

/* ----- legal / prose pages ----------------------------- */
.prose-page {
  padding: clamp(48px, 7vw, 80px) 0 clamp(48px, 6vw, 80px);
}
.prose {
  max-width: 720px;
  margin: 0 auto;
  font-size: 18.4px;
  line-height: 1.65;
  color: var(--pr-ink);
}
.prose h2 {
  font-size: 25.3px;
  font-weight: 600;
  margin: 40px 0 12px;
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 14px; }
.prose ul { padding-left: 20px; margin: 0 0 14px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--pr-accent); }

/* ----- video slot (demo page) --------------------------- */
.video-slot {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 720px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(223, 222, 255, 0.55), rgba(223, 222, 255, 0.25));
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: 1px dashed rgba(34, 33, 95, 0.2);
  outline-offset: -1px;
  transition: transform var(--pr-transition);
}
.video-slot:hover {
  transform: translateY(-2px);
  box-shadow: var(--pr-shadow-lg);
}
.video-slot .play-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--pr-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--pr-shadow-md);
  transition: transform var(--pr-transition);
}
.video-slot:hover .play-btn { transform: scale(1.06); }
.video-slot .play-btn::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 18px solid var(--pr-accent);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 4px;
}
.video-slot .placeholder-label {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pr-paper);
  background: rgba(194, 65, 12, 0.94);
  border-radius: 4px;
}

/* ----- §3.2 unification --------------------------------- */
.unification {
  padding: clamp(64px, 8vw, 96px) 0 clamp(48px, 6vw, 80px);
  background: var(--pr-lavender);
}
.unification-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.unification-col {
  background: var(--pr-paper);
  padding: 36px 28px 32px;
  border-radius: var(--pr-radius-lg);
  box-shadow: var(--pr-shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform var(--pr-transition), box-shadow var(--pr-transition);
}
.unification-col::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 48px;
  background: linear-gradient(180deg,
    var(--card-accent, var(--pr-accent)) 0%,
    transparent 100%);
  opacity: 0.14;
  pointer-events: none;
}
.unification-col:hover {
  transform: translateY(-2px);
  box-shadow: var(--pr-shadow-md);
}
.unification-col .dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-bottom: 18px;
  background: var(--card-accent, var(--pr-accent));
  position: relative;
  z-index: 1;
}
.unification-col h3 {
  font-size: 25.3px;
  font-weight: 600;
  color: var(--pr-ink);
  margin: 0 0 10px;
}
.unification-col p {
  margin: 0;
  font-size: 18.4px;
  line-height: 1.55;
  color: var(--pr-ink);
  opacity: 0.82;
}
@media (max-width: 860px) {
  .unification-grid { grid-template-columns: 1fr; }
}

/* ----- unification-split (image left + 3 rows right) ---- */
.unification-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: stretch;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.unification-image {
  position: relative;
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  box-shadow: var(--pr-shadow-md);
}
.unification-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}
.unification-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.unification-row {
  position: relative;
  padding: 18px 0 18px 0;
  border-top: 1px solid rgba(34, 33, 95, 0.1);
}
.unification-row:first-child {
  border-top: none;
  padding-top: 0;
}
.unification-row .dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-bottom: 10px;
  background: var(--card-accent, var(--pr-accent));
}
.unification-row h3 {
  font-size: 21.8px;
  font-weight: 600;
  color: var(--pr-ink);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.unification-row p {
  margin: 0;
  font-size: 17.2px;
  line-height: 1.5;
  color: var(--pr-muted);
}
@media (max-width: 860px) {
  .unification-split { grid-template-columns: 1fr; gap: 28px; }
  .unification-image img { height: auto; }
}

/* ----- §3.3 product glimpse ----------------------------- */
.product-glimpse {
  padding: clamp(48px, 6vw, 80px) 0;
  background: var(--pr-paper);
}
.glimpse-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(24px, 3vw, 40px);
  row-gap: clamp(48px, 6vw, 76px);
}
.glimpse-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--pr-ink);
  border-radius: var(--pr-radius-lg);
  cursor: zoom-in;
  transition: transform var(--pr-transition);
}
.glimpse-hint {
  text-align: center;
  font-size: 14.9px;
  color: var(--pr-muted);
  margin: 0 0 28px;
  letter-spacing: 0.01em;
}
.glimpse-image {
  position: relative;
  margin: 0;
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--pr-paper);
  border: 1px solid var(--pr-hairline);
  box-shadow: var(--pr-shadow-sm);
  transition: box-shadow var(--pr-transition), transform var(--pr-transition);
}
.glimpse-tile:hover .glimpse-image,
.glimpse-tile:focus-visible .glimpse-image {
  box-shadow: var(--pr-shadow-md);
  transform: translateY(-2px);
}
.glimpse-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  padding: 14px;
}
.glimpse-count {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(34, 33, 95, 0.86);
  color: var(--pr-paper);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.glimpse-tile h3 {
  font-size: 24.1px;
  font-weight: 600;
  color: var(--pr-ink);
  margin: 0 0 4px;
  text-align: left;
  transition: color var(--pr-transition);
}
.glimpse-tile p {
  font-size: 17.2px;
  color: var(--pr-ink);
  opacity: 0.75;
  margin: 0 0 14px;
  text-align: left;
  line-height: 1.5;
}
.glimpse-tile:hover h3,
.glimpse-tile:focus-visible h3 { color: var(--pr-accent); }
.glimpse-tile:focus-visible {
  outline: 2px solid var(--pr-accent);
  outline-offset: 4px;
}
@media (max-width: 720px) {
  .glimpse-grid { grid-template-columns: 1fr; }
}

/* ----- lightbox (glimpse tile click → big picture) ------ */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 13, 40, 0.93);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 200ms ease;
  padding: clamp(20px, 4vw, 60px);
}
.lightbox-overlay.is-open { opacity: 1; }
.lightbox-frame {
  margin: 0;
  max-width: min(1400px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.lightbox-image {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--pr-radius-lg);
  background: var(--pr-paper);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.lightbox-caption {
  font-family: var(--pr-font);
  color: var(--pr-paper);
  font-size: 16.1px;
  opacity: 0.85;
  text-align: center;
  letter-spacing: 0.02em;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  color: var(--pr-paper);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 25.3px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--pr-font);
  font-weight: 400;
  transition: background var(--pr-transition), transform var(--pr-transition);
  padding: 0;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.18);
}
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-prev:hover { transform: translateY(-50%) scale(1.05); }
.lightbox-next:hover { transform: translateY(-50%) scale(1.05); }
.lightbox-dots {
  display: flex;
  gap: 10px;
}
.lightbox-dot {
  background: rgba(255, 255, 255, 0.25);
  border: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background 200ms ease, transform 200ms ease;
}
.lightbox-dot.is-active { background: var(--pr-paper); transform: scale(1.35); }
.lightbox-dot:hover { background: rgba(255, 255, 255, 0.55); }
.lightbox-overlay [hidden] { display: none; }

@media (max-width: 720px) {
  .lightbox-close, .lightbox-prev, .lightbox-next { width: 40px; height: 40px; font-size: 21.8px; }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-close { top: 12px; right: 12px; }
}

/* ----- §3.5 partnership --------------------------------- */
.partnership {
  padding: clamp(36px, 5vw, 56px) 0;
  background: var(--pr-paper-tint);
  border-top: 1px solid var(--pr-hairline);
  border-bottom: 1px solid var(--pr-hairline);
}
.partnership-line {
  text-align: center;
  font-size: clamp(18.4px, 1.84vw, 20.7px);
  color: var(--pr-ink);
  margin: 0;
}

/* ----- §3.6 closing cta --------------------------------- */
.closing-cta {
  padding: clamp(48px, 6vw, 80px) 0;
  background: var(--pr-paper);
  text-align: center;
}
.closing-intro {
  font-size: clamp(23px, 2.76vw, 29.9px);
  font-weight: 500;
  color: var(--pr-ink);
  margin: 0 auto 28px;
  line-height: 1.35;
  max-width: 32ch;
}
.btn-large {
  padding: 18px 32px;
  font-size: 19.5px;
}

/* ----- §3.7 footer -------------------------------------- */
.site-footer {
  /* symmetric: the same space above the ProScola mark as below the stamp */
  padding: clamp(28px, 4vw, 40px) 0;
  background: var(--pr-paper);
  border-top: 1px solid var(--pr-hairline);
  color: var(--pr-muted);
}
.footer-row {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 28px;
}
.footer-brand { line-height: 0; display: inline-flex; }
.footer-brand img { height: 44px; width: auto; }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  font-size: 16.1px;
  font-weight: 500;
}
.footer-nav a {
  color: var(--pr-muted);
  text-decoration: none;
  transition: color var(--pr-transition);
}
.footer-nav a:hover,
.footer-nav a:focus-visible { color: var(--pr-accent); }
.footer-locale {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16.1px;
  font-weight: 500;
}
.footer-locale a {
  color: var(--pr-muted);
  text-decoration: none;
  transition: color var(--pr-transition);
  padding: 4px 2px;
}
.footer-locale a[aria-current="page"] { color: var(--pr-ink); }
.footer-locale a:hover,
.footer-locale a:focus-visible { color: var(--pr-accent); }
.footer-legal {
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--pr-hairline);
  font-size: 14.9px;
  text-align: center;
  color: var(--pr-muted);
}

/* ----- reveal-on-scroll --------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition-property: opacity, transform;
  transition-duration: 320ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger unification columns narratively: Mit KI → Ohne KI → Ihre Wahl */
.unification-grid .unification-col.reveal:nth-child(1) { --i: 0; }
.unification-grid .unification-col.reveal:nth-child(2) { --i: 1; }
.unification-grid .unification-col.reveal:nth-child(3) { --i: 2; }

/* ----- pillars compact (homepage summary) ---------------- */
body.home .pillars-section-compact {
  padding: clamp(28px, 3.5vw, 44px) 0;
  margin: 0;
  background: var(--pr-paper-tint);
}
body.home .pillars-section-compact .module-tag {
  margin: 0 0 8px;
}
body.home .pillars-section-compact h2 {
  margin: 0 0 36px;
}
.pillars-more {
  margin: 32px 0 0;
  text-align: right;
  font-size: 17.2px;
}
.pillars-more a {
  color: var(--pr-ink);
  border-bottom: 1px solid rgba(34, 33, 95, 0.25);
  padding-bottom: 2px;
  text-decoration: none;
  transition: border-color var(--pr-transition);
}
.pillars-more a:hover {
  border-bottom-color: var(--pr-ink);
}

/* ----- HUB 360 feature cards (Schweizer Funktionen) ------ */
.hub360-functions {
  padding: 0 0 clamp(40px, 5vw, 64px);
}
.hub360-functions .hub360-features { margin-top: clamp(24px, 3vw, 40px); }
.hub360-list-hero { margin: 4px 0 28px; }
.hub360-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.hub-feature-card {
  position: relative;
  padding: 28px 24px 24px;
  border-radius: var(--pr-radius);
  background: #FFFFFF;
  border: 1px solid rgba(34, 33, 95, 0.08);
  border-top: 3px solid var(--feature-accent);
  transition: transform var(--pr-transition), box-shadow var(--pr-transition);
}
.hub-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pr-shadow-md);
}
.hub-feature-card .feature-tag {
  margin: 0 0 10px;
  font-size: 13.8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--feature-accent);
}
.hub-feature-card h3 {
  margin: 0 0 12px;
  font-size: 25.3px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--pr-ink);
}
.hub-feature-card p {
  margin: 0 0 12px;
  font-size: 17.2px;
  line-height: 1.55;
  color: var(--pr-muted);
}
.hub-feature-card .feature-proof {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(34, 33, 95, 0.08);
  font-size: 16.1px;
  font-weight: 500;
  color: var(--pr-ink);
}
@media (max-width: 1000px) {
  .hub360-features { grid-template-columns: 1fr; gap: 16px; }
}

/* ----- Berufslehre block on /schulen --------------------- */
.berufslehre-block {
  padding: clamp(48px, 6vw, 80px) 0;
  background: var(--pr-paper-tint);
}
.berufslehre-block h2 {
  max-width: 880px;
}
.berufslehre-link {
  margin-top: 32px;
}

/* ----- Datenschutz hero trust strip ---------------------- */
.page-hero .trust-credentials {
  margin-top: 24px;
  padding-top: 20px;
}

/* ============================================================
   time-math — three movements, one composed object
   1. equation-board (image left, equation right, restrained scale)
   2. creative-hero (single hero example: pyramids)
   3. compliance-line (quiet footnote)
   ============================================================ */
.time-math {
  padding: clamp(64px, 7vw, 96px) 0;
  background: var(--pr-paper);
}
body.home .time-math {
  background: var(--pr-paper-tint);
}
/* time-math → pillars is a worry/answer pair; keep them visually linked */
body.home .time-math {
  padding-bottom: clamp(28px, 3.5vw, 44px);
}
.time-math-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.time-math-image {
  margin: 0;
  overflow: hidden;
  border-radius: var(--pr-radius-lg);
  aspect-ratio: 4 / 3;
}
.time-math-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.time-math-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.time-math .module-tag {
  margin: 0 0 14px;
  font-size: 13.8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pr-muted);
}
.time-math-heading {
  margin: 0 0 14px;
  font-size: clamp(29.9px, 3.68vw, 41.4px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--pr-ink);
}
.time-math-cred {
  margin: 0 0 32px;
  font-size: 17.2px;
  line-height: 1.55;
  color: var(--pr-muted);
  max-width: 460px;
}
.time-math-cta {
  margin: 28px 0 0;
}
.time-math-cta a {
  display: inline-block;
  font-size: 17.2px;
  font-weight: 500;
  color: var(--pr-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 33, 95, 0.3);
  padding-bottom: 3px;
  transition: border-color var(--pr-transition);
}
.time-math-cta a:hover {
  border-bottom-color: var(--pr-ink);
}

/* ----- 1. equation-board (right-justified, +20% answer) --- */
.equation-board {
  width: 100%;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.eq-working {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.eq-line {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 12px;
  font-size: clamp(23px, 2.53vw, 29.9px);
  color: var(--pr-ink);
  opacity: 0;
  transform: translateY(6px);
}
.eq-num {
  font-weight: 600;
  color: var(--pr-ink);
  min-width: 1.5ch;
  display: inline-block;
}
.eq-op {
  color: var(--pr-muted);
  font-weight: 400;
  padding: 0 2px;
}
.eq-op-result {
  color: var(--pr-ink);
  font-weight: 500;
  font-size: 1.05em;
  padding: 0 6px;
}
.eq-unit {
  color: var(--pr-muted);
  font-weight: 400;
  font-size: 0.78em;
  letter-spacing: 0.01em;
}

/* the answer — only +20% over working numbers */
.eq-answer {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 14px;
  margin: 14px 0 0;
  opacity: 0;
  transform: translateY(10px);
}
.eq-answer-num {
  position: relative;
  display: inline-block;
  font-size: clamp(27.6px, 2.99vw, 35.6px); /* +20% over working line */
  line-height: 1;
  font-weight: 600;
  color: var(--pr-ring-teal);
  letter-spacing: -0.01em;
  padding-bottom: 0;
}
.eq-answer-num-inner {
  display: inline-block;
}
.eq-answer-num::before,
.eq-answer-num::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--pr-ring-teal);
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: 1px;
}
.eq-answer-num::before { bottom: -4px; }
.eq-answer-num::after  { bottom: -9px; }
.eq-answer-label {
  font-size: clamp(12.6px, 1.26vw, 14.9px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--pr-ink);
  line-height: 1.15;
  padding-bottom: 4px;
  opacity: 0;
}
.eq-caption {
  margin: 28px 0 0;
  font-size: 16.1px;
  line-height: 1.55;
  color: var(--pr-muted);
  text-align: left;
  max-width: 460px;
  opacity: 0;
}

/* choreography — fires when .equation-board has .is-anim */
@keyframes eq-fade-up {
  to { opacity: 1; transform: none; }
}
@keyframes eq-underline-draw {
  to { transform: scaleX(1); }
}
.equation-board.is-anim .eq-line:nth-child(1) { animation: eq-fade-up 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards 100ms; }
.equation-board.is-anim .eq-line:nth-child(2) { animation: eq-fade-up 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards 360ms; }
.equation-board.is-anim .eq-line:nth-child(3) { animation: eq-fade-up 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards 620ms; }
.equation-board.is-anim .eq-answer { animation: eq-fade-up 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards 920ms; }
.equation-board.is-anim .eq-answer-num::before { animation: eq-underline-draw 360ms cubic-bezier(0.16, 1, 0.3, 1) forwards 1350ms; }
.equation-board.is-anim .eq-answer-num::after  { animation: eq-underline-draw 360ms cubic-bezier(0.16, 1, 0.3, 1) forwards 1500ms; }
.equation-board.is-anim .eq-answer-label { animation: eq-fade-up 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards 1700ms; }
.equation-board.is-anim .eq-caption { animation: eq-fade-up 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards 1900ms; }

/* mobile: stack image above equation */
@media (max-width: 880px) {
  .time-math-grid { grid-template-columns: 1fr; gap: 28px; }
  .time-math-image { aspect-ratio: 16 / 10; max-height: 320px; }
  .time-math-content { align-items: stretch; }
  .eq-caption { max-width: none; }
  .time-math-cred { max-width: none; }
}

/* ----- creative-example section (after Pillars) ---------- */
.creative-example {
  padding: clamp(28px, 3.5vw, 44px) 0 clamp(64px, 7vw, 96px);
}
body.home .creative-example {
  background: var(--pr-paper-tint);
}

/* ----- creative-hero (single example: pyramids) ----------- */
.creative-hero {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.ch-eyebrow {
  margin: 0 0 22px;
  font-size: 14.9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pr-muted);
}
.ch-kicker {
  margin: 0 0 18px;
  font-family: var(--pr-font);
  font-size: clamp(27.6px, 3.22vw, 39.1px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--pr-ink);
}
.ch-title {
  margin: 0 0 36px;
  font-size: clamp(39.1px, 6.21vw, 69px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--pr-ink);
}
.ch-closing {
  margin: clamp(28px, 3.6vw, 44px) auto 0;
  font-family: var(--pr-font);
  font-size: clamp(27.6px, 3.45vw, 41.4px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--pr-ink);
  text-align: center;
}
.ch-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
  font-size: 17.2px;
  color: var(--pr-ink);
}
.ch-meta li {
  position: relative;
  padding-left: 18px;
}
.ch-meta li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--pr-ring-teal);
  font-weight: 500;
}
.ch-note {
  margin: 0;
  font-size: 17.2px;
  color: var(--pr-muted);
  line-height: 1.55;
}
.ch-image {
  margin: 36px auto 0;
  max-width: 720px;
}
.ch-image-card {
  display: block;
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(34, 33, 95, 0.08);
  box-shadow: 0 16px 40px rgba(34, 33, 95, 0.10);
  background: #FFFFFF;
  transition: transform var(--pr-transition), box-shadow var(--pr-transition);
}
.ch-image-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 56px rgba(34, 33, 95, 0.16);
}
.ch-image-card img {
  width: 100%;
  height: auto;
  display: block;
}
.ch-image figcaption {
  margin-top: 18px;
  text-align: center;
}
.ch-image-cta {
  display: inline-block;
  font-size: 16.1px;
  font-weight: 500;
  color: var(--pr-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 33, 95, 0.3);
  padding-bottom: 3px;
  transition: border-color var(--pr-transition);
}
.ch-image-cta:hover {
  border-bottom-color: var(--pr-ink);
}

/* ----- 3. compliance-line (quiet footnote) ---------------- */
.compliance-line {
  margin: clamp(32px, 4vw, 48px) auto 0;
  max-width: 600px;
  padding-top: 20px;
  border-top: 1px solid rgba(34, 33, 95, 0.06);
  text-align: center;
  font-size: 14.9px;
  letter-spacing: 0.04em;
  color: var(--pr-muted);
}

/* ----- creative-hero mobile ------------------------------- */
@media (max-width: 720px) {
  .ch-meta { flex-direction: column; gap: 10px; align-items: center; }
}

/* ----- reduced motion: render all states statically ------- */
@media (prefers-reduced-motion: reduce) {
  .eq-line,
  .eq-answer,
  .eq-answer-label,
  .eq-caption {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .eq-answer-num::before,
  .eq-answer-num::after {
    transform: scaleX(1) !important;
    animation: none !important;
  }
}

/* ----------------------------------------------------------
   /warum-proscola · /en/why-proscola (positioning page)
   Three observations · three layers · unique capabilities ·
   comparison table · Swiss-made advantage.
   ---------------------------------------------------------- */

.warum-band {
  padding: clamp(56px, 7vw, 96px) 0;
}
.warum-band + .warum-band { border-top: 1px solid var(--pr-hairline); }
.warum-band.tint { background: var(--pr-paper-tint); border-top: none; }
.warum-band.tint + .warum-band { border-top: none; }

.warum-band .module-tag {
  font-size: 14.9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pr-accent);
  margin: 0 0 12px;
}
.warum-band h2 {
  font-size: clamp(29.9px, 3.68vw, 41.4px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--pr-ink);
  margin: 0 0 16px;
  max-width: 22ch;
}
.warum-band .band-intro {
  max-width: 640px;
  font-size: 19.5px;
  line-height: 1.55;
  color: var(--pr-ink);
  opacity: 0.78;
  margin: 0 0 48px;
}

/* ----- three observations ------------------------------- */
.obs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.obs-card {
  position: relative;
  padding: 28px 24px 26px;
  border-radius: var(--pr-radius);
  background: var(--pr-paper);
  border: 1px solid var(--pr-hairline);
  border-top: 3px solid var(--obs-accent, var(--pr-accent));
  transition: transform var(--pr-transition), box-shadow var(--pr-transition);
}
.obs-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pr-shadow-md);
}
.obs-num {
  font-size: 14.9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--obs-accent, var(--pr-accent));
  margin: 0 0 10px;
}
.obs-card h3 {
  font-size: 21.8px;
  font-weight: 600;
  color: var(--pr-ink);
  line-height: 1.3;
  margin: 0 0 10px;
}
.obs-card p {
  font-size: 17.2px;
  line-height: 1.6;
  color: var(--pr-ink);
  opacity: 0.78;
  margin: 0;
}
@media (max-width: 860px) { .obs-grid { grid-template-columns: 1fr; } }

/* ----- three layers ------------------------------------- */
.layers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.layer-card {
  position: relative;
  padding: 32px 28px 30px;
  border-radius: var(--pr-radius);
  background: var(--pr-paper);
  border: 1px solid var(--pr-hairline);
  border-top: 4px solid var(--layer-accent);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--pr-transition), box-shadow var(--pr-transition);
}
.layer-card.is-unique {
  border: 1px solid var(--layer-accent);
  border-top-width: 4px;
  background:
    linear-gradient(180deg, rgba(0, 170, 206, 0.04) 0%, transparent 60%),
    var(--pr-paper);
}
.layer-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pr-shadow-md);
}
.layer-num {
  font-size: 13.8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--layer-accent);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.layer-num .layer-flag {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--layer-accent);
  color: var(--pr-paper);
  padding: 2px 8px;
  border-radius: 99px;
  text-transform: uppercase;
}
.layer-card h3 {
  font-size: 25.3px;
  font-weight: 600;
  color: var(--pr-ink);
  line-height: 1.2;
  margin: 4px 0 2px;
}
.layer-card > p {
  font-size: 17.2px;
  line-height: 1.6;
  color: var(--pr-ink);
  opacity: 0.78;
  margin: 0;
}
.layer-card ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.layer-card ul li {
  font-size: 16.1px;
  line-height: 1.5;
  color: var(--pr-ink);
  opacity: 0.78;
  padding-left: 18px;
  position: relative;
}
.layer-card ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--layer-accent);
}
@media (max-width: 980px) { .layers-grid { grid-template-columns: 1fr; gap: 18px; } }

/* ----- eight unique capabilities ------------------------ */
.caps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.cap-card {
  padding: 24px 22px 22px;
  border-radius: var(--pr-radius);
  background: var(--pr-paper);
  border: 1px solid var(--pr-hairline);
  transition: transform var(--pr-transition), box-shadow var(--pr-transition), border-color var(--pr-transition);
}
.cap-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pr-shadow-md);
  border-color: var(--cap-accent, var(--pr-accent));
}
.cap-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cap-accent, var(--pr-accent));
  margin-bottom: 14px;
}
.cap-card h3 {
  font-size: 18.4px;
  font-weight: 600;
  color: var(--pr-ink);
  line-height: 1.3;
  margin: 0 0 8px;
}
.cap-card p {
  font-size: 16.1px;
  line-height: 1.55;
  color: var(--pr-ink);
  opacity: 0.74;
  margin: 0;
}
@media (max-width: 980px) { .caps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .caps-grid { grid-template-columns: 1fr; } }

/* ----- comparison table --------------------------------- */
.compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--pr-radius);
  border: 1px solid var(--pr-hairline);
  background: var(--pr-paper);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--pr-font);
  font-size: 17.2px;
  min-width: 720px;
}
.compare-table th,
.compare-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--pr-hairline);
  vertical-align: middle;
  line-height: 1.45;
  text-align: center;
}
.compare-table th:first-child,
.compare-table td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--pr-ink);
  padding-left: 22px;
  min-width: 240px;
}
.compare-table thead th {
  font-size: 13.8px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pr-muted);
  background: var(--pr-paper-tint);
  border-bottom: 1px solid var(--pr-hairline);
  padding-block: 16px;
}
.compare-table thead th.col-ps {
  background: var(--pr-lavender);
  color: var(--pr-ink);
}
.compare-table td.col-ps { background: rgba(223, 222, 255, 0.28); }
.compare-table tr.grp td {
  background: var(--pr-paper-tint);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pr-muted);
  padding: 10px 22px;
  text-align: left;
}
.compare-table tr.unique td:first-child { font-weight: 600; }
.compare-table tr.unique td.col-ps { background: rgba(223, 222, 255, 0.5); }
.compare-table tr:last-child td { border-bottom: none; }
.dot-y { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #58C20F; }
.dot-p { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #EFB94A; }
.dot-n { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--pr-hairline); border: 1px solid #D7D7E5; }
.u-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--pr-accent);
  color: var(--pr-paper);
  padding: 2px 7px;
  border-radius: 99px;
  margin-left: 8px;
  vertical-align: 1px;
}
.compare-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  margin-top: 18px;
  font-size: 14.9px;
  color: var(--pr-muted);
  align-items: center;
}
.compare-legend .legend-item { display: inline-flex; align-items: center; gap: 8px; }

/* ----- Swiss-made advantage ----------------------------- */
.swiss-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}
.swiss-card {
  padding: 32px 28px;
  border-radius: var(--pr-radius);
  background: var(--pr-paper);
  border: 1px solid var(--pr-hairline);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform var(--pr-transition), box-shadow var(--pr-transition);
}
.swiss-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pr-shadow-md);
}
.swiss-card.inverse {
  background: var(--pr-ink);
  border-color: var(--pr-ink);
}
.swiss-card.inverse h3,
.swiss-card.inverse p { color: var(--pr-paper); }
.swiss-card.inverse p { opacity: 0.78; }
.swiss-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--swiss-accent, var(--pr-accent));
}
.swiss-card h3 {
  font-size: 21.8px;
  font-weight: 600;
  color: var(--pr-ink);
  line-height: 1.25;
  margin: 0;
}
.swiss-card p {
  font-size: 17.2px;
  line-height: 1.6;
  color: var(--pr-ink);
  opacity: 0.78;
  margin: 0;
}
.swiss-note {
  padding: 20px 24px;
  border-radius: var(--pr-radius);
  background: var(--pr-paper);
  border: 1px solid var(--pr-hairline);
  border-left: 3px solid var(--pr-accent);
  font-size: 17.2px;
  line-height: 1.6;
  color: var(--pr-ink);
}
@media (max-width: 860px) { .swiss-grid { grid-template-columns: 1fr; } }

/* ============================================================
   EOS α-Hero  (typographic-only, no image)
   Hero = the slogan. Mark = EOS at display scale, expansion in
   small caps below, slogan as the kicker, then CTAs and trust
   credentials. White surface. See feedback_catsky_pivot.md.
   ============================================================ */
.eos-hero {
  padding: clamp(80px, 11vw, 160px) 0 clamp(18px, 2.4vw, 32px);
  background: var(--pr-paper);
  text-align: center;
}
.eos-hero-mark {
  font-family: var(--pr-font);
  font-weight: 600;
  font-size: clamp(110.4px, 16.1vw, 230px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--pr-ink);
  margin: 0;
}
.eos-hero-expansion {
  margin: clamp(16px, 1.8vw, 24px) 0 clamp(40px, 5vw, 64px);
  font-size: clamp(14.9px, 1.49vw, 17.2px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pr-muted);
  font-weight: 500;
}
.eos-hero-slogan {
  font-family: var(--pr-font);
  font-weight: 500;
  font-size: clamp(39.1px, 5.75vw, 73.6px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--pr-ink);
  margin: 0 auto clamp(40px, 5vw, 56px);
  max-width: 22ch;
}
.eos-hero-slogan .line { display: block; }
@media (max-width: 480px) {
  .eos-hero-slogan .line { display: inline; }
}
.eos-hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.4vw, 26px);
  margin: 0 0 clamp(56px, 7vw, 96px);
}
.eos-hero-login-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 28px);
  justify-content: center;
  align-items: center;
}
.eos-hero .trust-credentials {
  margin-top: 0;
  text-align: center;
}

/* ============================================================
   Manifesto  (typographic stance section — replaces Pillars-compact
   AND Unification on the homepage). Three movements separated by
   hairline rules. The lavender tint background comes from the
   body.home block rhythm above.
   ============================================================ */
.manifesto {
  padding: clamp(48px, 7vw, 96px) 0;
}
.manifesto-stack {
  max-width: 880px;
  margin: 0 auto;
}
.manifesto-movement {
  text-align: center;
  padding: clamp(48px, 7vw, 96px) 0;
}
.manifesto-movement + .manifesto-movement {
  border-top: 1px solid var(--pr-hairline);
}
.manifesto-eyebrow {
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  font-size: 14.9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pr-muted);
  font-weight: 500;
}
.manifesto-h {
  font-family: var(--pr-font);
  font-weight: 500;
  font-size: clamp(36.8px, 5.06vw, 64.4px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--pr-ink);
  margin: 0 auto clamp(20px, 2.5vw, 32px);
  max-width: 22ch;
}
.manifesto-h .line { display: block; }
@media (max-width: 520px) {
  .manifesto-h .line { display: inline; }
}
.manifesto-sub {
  font-family: var(--pr-font);
  font-weight: 400;
  font-size: clamp(19.5px, 1.95vw, 24.1px);
  line-height: 1.5;
  color: var(--pr-ink);
  opacity: 0.72;
  margin: 0 auto;
  max-width: 36ch;
}
.manifesto-sub .line { display: block; }
@media (max-width: 520px) {
  .manifesto-sub .line { display: inline; }
}

/* ============================================================
   Klapp ◯ EOS ◯ ProScola — hero co-brand trinity.
   Logos are already round by composition (Klapp circle + ProScola
   four-disc constellation on lavender field). On the white page
   background, their white corners blend, so we don't clip or add
   our own background — let each mark stand on its own.
   ============================================================ */
.eos-hero-trinity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 64px);
  margin: 0 0 clamp(16px, 1.8vw, 24px);
}
.trinity-mark {
  width: clamp(72px, 9vw, 116px);
  height: clamp(72px, 9vw, 116px);
  display: block;
  flex-shrink: 0;
  text-decoration: none;
  transition: transform var(--pr-transition);
}
.trinity-mark:hover {
  transform: translateY(-2px);
}
.trinity-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Refine hero top padding for the trinity row */
.eos-hero { padding-top: clamp(56px, 8vw, 96px); }
@media (max-width: 520px) {
  .eos-hero-trinity { gap: 16px; }
  .trinity-mark { width: 64px; height: 64px; }
}

/* ============================================================
   Hero availability line (Klapp SSO promise)
   ============================================================ */
.eos-hero-availability {
  font-family: var(--pr-font);
  font-size: clamp(17.2px, 1.49vw, 19.5px);
  color: var(--pr-muted);
  margin: 0 auto clamp(32px, 4vw, 48px);
  max-width: 40ch;
  line-height: 1.5;
  font-weight: 500;
}

/* ============================================================
   Hero trustmarks: 1'600+ Klapp-Schulen · Server · revDSG · KSM
   ============================================================ */
.eos-hero-trustmarks {
  list-style: none;
  padding: 0;
  margin: clamp(24px, 3vw, 40px) auto clamp(40px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  font-size: 14.9px;
  letter-spacing: 0.04em;
  color: var(--pr-muted);
  font-weight: 500;
}
.eos-hero-trustmarks li {
  position: relative;
  padding-right: 22px;
}
.eos-hero-trustmarks li::after {
  content: "·";
  position: absolute;
  right: 0;
  color: var(--pr-hairline);
  font-weight: 400;
}
.eos-hero-trustmarks li:last-child { padding-right: 0; }
.eos-hero-trustmarks li:last-child::after { content: ""; }

/* ============================================================
   For your school: Schulleitung band with KSM + footprint
   ============================================================ */
.for-your-school {
  padding: clamp(72px, 10vw, 128px) 0;
}
body.home .for-your-school { background: var(--pr-paper); }
.schule-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
@media (max-width: 880px) {
  .schule-grid { grid-template-columns: 1fr; gap: 40px; }
}
.schule-eyebrow {
  margin: 0 0 16px;
  font-size: 14.9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pr-muted);
  font-weight: 500;
}
.schule-h {
  font-family: var(--pr-font);
  font-weight: 500;
  font-size: clamp(34.5px, 4.37vw, 55.2px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--pr-ink);
  margin: 0 0 clamp(20px, 2.5vw, 28px);
  max-width: 22ch;
}
.schule-h .line { display: block; }
@media (max-width: 520px) { .schule-h .line { display: inline; } }
.schule-sub {
  font-size: clamp(19.5px, 1.84vw, 21.8px);
  line-height: 1.55;
  color: var(--pr-ink);
  opacity: 0.78;
  margin: 0 0 clamp(28px, 3vw, 36px);
  max-width: 42ch;
}
.schule-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.schule-proof {
  padding: clamp(28px, 4vw, 40px);
  background: var(--pr-paper-tint-lavender);
  border-radius: var(--pr-radius-lg);
  border: 1px solid var(--pr-hairline);
}
.schule-quote {
  margin: 0 0 clamp(24px, 3vw, 32px);
  padding: 0 0 clamp(20px, 2.5vw, 28px);
  border-bottom: 1px solid var(--pr-hairline);
}
.schule-quote blockquote {
  margin: 0 0 14px;
  font-family: var(--pr-font);
  font-size: clamp(20.7px, 2.07vw, 25.3px);
  line-height: 1.4;
  font-weight: 500;
  color: var(--pr-ink);
  letter-spacing: -0.01em;
}
.schule-quote blockquote p { margin: 0; }
.schule-quote figcaption {
  font-size: 14.9px;
  color: var(--pr-muted);
  letter-spacing: 0.04em;
}
.schule-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.schule-stats li {
  display: flex;
  align-items: baseline;
  gap: 18px;
}
.schule-stats li strong {
  font-size: clamp(32.2px, 3.45vw, 41.4px);
  font-weight: 600;
  color: var(--pr-ink);
  letter-spacing: -0.02em;
  min-width: 4ch;
  white-space: nowrap;
}
.schule-stats li span {
  font-size: 16.1px;
  color: var(--pr-ink);
  opacity: 0.78;
  line-height: 1.4;
}
.schule-math-lead {
  margin: 0 0 clamp(20px, 2.6vw, 28px);
  font-size: 16.1px;
  line-height: 1.55;
  color: var(--pr-ink);
  opacity: 0.62;
}
.schule-figure {
  margin: 0 0 clamp(24px, 3vw, 32px);
  padding: 0 0 clamp(22px, 2.8vw, 30px);
  border-bottom: 1px solid var(--pr-hairline);
}
.schule-figure-num {
  display: block;
  font-size: clamp(48.3px, 5.75vw, 66.7px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--pr-ring-teal);
}
.schule-figure-label {
  display: block;
  margin-top: 12px;
  font-size: 17.2px;
  line-height: 1.45;
  color: var(--pr-ink);
  opacity: 0.72;
  max-width: 30ch;
}
.schule-example {
  margin: 0;
  padding: 0;
  border-top: 0;
}
.schule-example figcaption {
  margin: 0 0 10px;
  font-size: 13.8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pr-muted);
}
.schule-example p {
  margin: 0;
  font-size: clamp(17.2px, 1.72vw, 19.5px);
  line-height: 1.5;
  color: var(--pr-ink);
}

/* ============================================================
   Pricing: Schools tier (featured top, full-row)
   ============================================================ */
.pricing-school {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(32px, 5vw, 64px);
  padding: clamp(32px, 4vw, 48px);
  margin: 0 0 clamp(36px, 4vw, 48px);
  background: var(--pr-paper);
  border: 1px solid var(--pr-hairline);
  border-radius: var(--pr-radius-lg);
  align-items: start;
}
@media (max-width: 880px) {
  .pricing-school { grid-template-columns: 1fr; gap: 28px; }
}
.pricing-school-head h3 {
  font-size: clamp(25.3px, 2.99vw, 34.5px);
  font-weight: 600;
  color: var(--pr-ink);
  margin: 12px 0 8px;
  letter-spacing: -0.01em;
}
.pricing-school-head .tier-tag {
  font-size: 17.2px;
  color: var(--pr-muted);
  margin: 0;
  line-height: 1.5;
}
.pricing-school-head .cb-x {
  color: var(--pr-muted);
  font-weight: 400;
  margin: 0 6px;
}
.pricing-badge-school {
  background: var(--pr-ink) !important;
  color: var(--pr-paper) !important;
}
.pricing-school-body .price { margin: 0 0 24px; }
.pricing-school-body .price .amount {
  display: block;
  font-size: clamp(32.2px, 3.45vw, 41.4px);
  font-weight: 600;
  color: var(--pr-ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.pricing-school-body .price .period {
  display: block;
  font-size: 16.1px;
  color: var(--pr-muted);
  margin-top: 8px;
}
.pricing-school-body .pricing-features { margin: 0 0 24px; }
.pricing-divider {
  text-align: center;
  font-size: 16.1px;
  color: var(--pr-muted);
  letter-spacing: 0.04em;
  margin: clamp(32px, 4vw, 48px) 0 clamp(24px, 3vw, 32px);
}

/* ============================================================
   Closing CTA dual button row
   ============================================================ */
.closing-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ============================================================
   Creative-example demoted lesson card (Change 2 2026-06-02).
   The pyramid lesson sits as a small caption block above the
   PDF, no longer competing with the benefit-led H2.
   ============================================================ */
.ch-example {
  margin: 0 auto clamp(20px, 2.5vw, 32px);
  max-width: 720px;
  text-align: center;
}
.ch-example-eyebrow {
  margin: 0 0 6px;
  font-size: 14.9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pr-muted);
  font-weight: 500;
}
.ch-example-sub {
  margin: 0 0 6px;
  font-size: clamp(17.2px, 1.72vw, 20.7px);
  font-weight: 600;
  color: var(--pr-ink);
}
.ch-example-name {
  margin: 0 0 14px;
  font-size: clamp(19.5px, 1.95vw, 24.1px);
  font-weight: 600;
  color: var(--pr-ink);
}

/* ============================================================
   HUB360 · Report Generation Assistant (Change 4 2026-06-02).
   Image-led proof of what HUB360 produces. Pairs with time-math
   (the savings) by sharing the lavender HUB360 family backdrop.
   ============================================================ */
.report-assistant {
  padding: clamp(20px, 3vw, 36px) 0 clamp(48px, 7vw, 80px);
}
.report-assistant .container {
  background: var(--pr-paper-tint-lavender);
  border: 1px solid var(--pr-hairline);
  border-radius: var(--pr-radius-lg);
  padding: clamp(36px, 5vw, 64px);
}
.report-h {
  font-family: var(--pr-font);
  font-weight: 500;
  font-size: clamp(32.2px, 4.14vw, 50.6px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--pr-ink);
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  text-align: center;
}
.report-sub {
  font-size: clamp(19.5px, 1.84vw, 21.8px);
  color: var(--pr-ink);
  opacity: 0.72;
  margin: 0 auto clamp(32px, 4vw, 48px);
  max-width: 56ch;
  text-align: center;
  line-height: 1.5;
}
.report-image {
  margin: 0;
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  border: 1px solid var(--pr-hairline);
  box-shadow: var(--pr-shadow-md);
  background: var(--pr-paper);
}
.report-image img {
  display: block;
  width: 100%;
  height: auto;
}
.report-assistant .module-tag {
  text-align: center;
  margin-bottom: clamp(12px, 1.4vw, 16px);
}

/* ============================================================
   Intro + two-pillar overview, unified (homepage)
   Lead-in → hero title → welcome, then a reveal box holding the
   "Zuerst" heading and the two pillar cards.
   ============================================================ */
.intro-pillars {
  padding: clamp(18px, 2.4vw, 32px) 0 clamp(40px, 5vw, 64px);
  background: var(--pr-paper);
}
.intro-pillars .container { max-width: 1120px; }
.ip-lead {
  text-align: center;
  font-size: clamp(18.4px, 1.95vw, 23px);
  font-weight: 600;
  color: var(--pr-ink);
  letter-spacing: -0.01em;
  margin: 0 0 clamp(16px, 2.2vw, 26px);
  text-wrap: balance;
}
.ip-title {
  text-align: center;
  font-family: var(--pr-font);
  font-weight: 600;
  font-size: clamp(29.9px, 4.14vw, 50.6px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--pr-ink);
  margin: 0 0 clamp(16px, 2.2vw, 26px);
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.6vw, 8px);
  text-wrap: balance;
}
.ip-title .line { display: block; }
.ip-welcome {
  text-align: center;
  font-size: clamp(18.4px, 1.84vw, 23px);
  line-height: 1.5;
  color: var(--pr-ink);
  opacity: 0.78;
  max-width: 48ch;
  margin: 0 auto clamp(36px, 5.5vw, 64px);
  text-wrap: pretty;
}
.ip-box {
  background: var(--pr-paper-tint-lavender);
  border: 1px solid var(--pr-hairline);
  border-radius: 28px;
  padding: clamp(32px, 4.5vw, 60px) clamp(22px, 3.6vw, 52px);
}
.ip-box-head {
  text-align: center;
  max-width: 44ch;
  margin: 0 auto clamp(32px, 4.5vw, 52px);
}
.ip-reveal-h {
  font-family: var(--pr-font);
  font-weight: 600;
  font-size: clamp(29.9px, 3.91vw, 48.3px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--pr-ink);
  margin: 0 0 12px;
  text-wrap: balance;
}
.ip-reveal-sub {
  font-size: clamp(18.4px, 1.84vw, 21.8px);
  line-height: 1.5;
  color: var(--pr-ink);
  opacity: 0.78;
  margin: 0;
}
.ip-box .pillar-card {
  background: var(--pr-paper);
  box-shadow: var(--pr-shadow-sm);
}

/* ============================================================
   Two-pillar overview cards: Lernpfade × HUB 360 (homepage)
   ============================================================ */
.pillars-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 30px);
  align-items: stretch;
}
@media (max-width: 760px) {
  .pillars-overview-grid { grid-template-columns: 1fr; }
}
.pillar-card {
  --pillar-accent: var(--pr-accent);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 38px);
  background: var(--pr-paper);
  border: 1px solid var(--pr-hairline);
  border-radius: var(--pr-radius-lg);
  border-top: 3px solid var(--pillar-accent);
  color: var(--pr-ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--pr-transition), box-shadow var(--pr-transition),
              border-color var(--pr-transition);
}
.pillar-card:hover,
.pillar-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--pr-shadow-md);
  border-color: var(--pillar-accent);
  color: var(--pr-ink);
}
.pillar-lernpfade { --pillar-accent: var(--pr-ring-teal); }
.pillar-hub360 { --pillar-accent: var(--pr-ring-orange); }
.pillar-card-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 16px;
}
.pillar-index {
  font-size: clamp(39.1px, 4.83vw, 59.8px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--pillar-accent);
  opacity: 0.26;
}
.pillar-phase {
  font-size: 13.8px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pr-muted);
}
.pillar-name {
  font-family: var(--pr-font);
  font-weight: 500;
  font-size: clamp(29.9px, 3.45vw, 41.4px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--pr-ink);
  margin: 0 0 12px;
}
.pillar-desc {
  font-size: clamp(18.4px, 1.72vw, 20.7px);
  line-height: 1.55;
  color: var(--pr-ink);
  opacity: 0.82;
  margin: 0 0 16px;
  max-width: 40ch;
}
/* Restore breathing room before the bullet list on the overview cards
   (the legacy `.pillar-card p { margin:0 }` rule was winning on specificity). */
.pillars-overview-grid .pillar-desc,
.deep-card .pillar-desc { margin-bottom: 20px; }
.pillar-points {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pillar-points li {
  position: relative;
  padding-left: 30px;
  font-size: 17.2px;
  line-height: 1.4;
  color: var(--pr-ink);
  opacity: 0.9;
}
.pillar-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pillar-accent);
}
.pillar-more {
  margin-top: auto;
  font-size: 17.2px;
  font-weight: 600;
  color: var(--pillar-accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pillar-more .arrow { transition: transform var(--pr-transition); }
.pillar-card:hover .pillar-more .arrow,
.pillar-card:focus-visible .pillar-more .arrow { transform: translateY(3px); }

#lernpfade-detail, #hub360-detail { scroll-margin-top: 88px; }

/* ============================================================
   Deep-dive cards: Lernpfade (01) × HUB 360 (02), side by side.
   Echo the pillar overview cards; report-assistant box follows.
   ============================================================ */
.deep-dives {
  padding: clamp(40px, 5vw, 72px) 0 clamp(20px, 3vw, 36px);
  background: var(--pr-paper);
}
.deep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.5vw, 32px);
  align-items: start;
}
@media (max-width: 880px) {
  .deep-grid { grid-template-columns: 1fr; }
}
.deep-card {
  --pillar-accent: var(--pr-accent);
  background: var(--pr-paper-tint-lavender);
  border: 1px solid var(--pr-hairline);
  border-radius: var(--pr-radius-lg);
  border-top: 3px solid var(--pillar-accent);
  padding: clamp(28px, 3.4vw, 48px);
}
.deep-lernpfade { --pillar-accent: var(--pr-ring-teal); }
.deep-hub360 { --pillar-accent: var(--pr-ring-orange); }
.deep-card-head { margin: 0 0 clamp(22px, 2.8vw, 32px); }
.deep-card-head .pillar-card-head { margin-bottom: 12px; }

/* Unify both deep cards: left-aligned, one shared type scale */
.deep-card .creative-hero,
.deep-card .time-math-content { text-align: left; }
.deep-card .ch-kicker {
  font-size: clamp(17.2px, 1.67vw, 19.5px);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--pr-ink);
  opacity: 0.66;
  margin: 0 0 12px;
}
.deep-card .ch-title,
.deep-card .time-math-heading {
  font-family: var(--pr-font);
  font-weight: 600;
  font-size: clamp(28.7px, 3.33vw, 41.4px);
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: var(--pr-ink);
  margin: 0 0 clamp(16px, 2vw, 22px);
}
.deep-card .time-math-cred {
  font-size: clamp(18.4px, 1.72vw, 20.7px);
  line-height: 1.55;
  margin: 0 0 clamp(20px, 2.6vw, 28px);
}
.deep-card .ch-image { text-align: left; margin: 0; max-width: none; }
.deep-card .ch-example { text-align: left; }
.deep-card .ch-meta { justify-content: flex-start; margin-top: clamp(20px, 2.5vw, 28px); }
.deep-card .ch-image-card { margin-left: 0; margin-right: 0; }
.deep-card .ch-image figcaption { text-align: left; }
.deep-card .ch-closing {
  text-align: left;
  font-size: clamp(21.8px, 2.3vw, 27.6px);
  font-weight: 600;
  margin-top: clamp(20px, 2.6vw, 30px);
}

/* ============================================================
   Unified pillar cards (homepage): one card per pillar =
   summary (head + description + key points) ─ divider ─ proof.
   Replaces the duplicated overview + deep-dive card pairs.
   ============================================================ */
.deep-intro {
  text-align: center;
  max-width: 48ch;
  margin: 0 auto clamp(34px, 4.5vw, 56px);
}
.deep-eyebrow {
  font-size: 14.9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pr-accent);
  margin: 0 0 clamp(12px, 1.4vw, 16px);
}
.deep-h {
  font-family: var(--pr-font);
  font-weight: 600;
  font-size: clamp(29.9px, 3.91vw, 48.3px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--pr-ink);
  margin: 0 0 12px;
  text-wrap: balance;
}
.deep-sub {
  font-size: clamp(18.4px, 1.84vw, 21.8px);
  line-height: 1.5;
  color: var(--pr-ink);
  opacity: 0.78;
  margin: 0;
}
/* Summary block (head + desc + key points) divided from the proof below */
.deep-card-head {
  margin: 0 0 clamp(26px, 3.2vw, 36px);
  padding-bottom: clamp(22px, 2.8vw, 30px);
  border-bottom: 1px solid var(--pr-hairline);
}
.deep-card-head .pillar-name { margin: 0 0 clamp(14px, 1.8vw, 18px); }
.deep-card-head .pillar-points { margin-bottom: 0; }
.deep-card-head .pillar-points li { font-size: 18.4px; opacity: 0.9; }
/* Left-align + unify the HUB 360 card's report proof (the EN page does this via
   an inline tweak block; these shared rules give the DE page the same result). */
.deep-card .module-tag {
  text-align: left;
  font-size: clamp(17.2px, 1.67vw, 19.5px);
  margin: 0 0 12px;
}
.deep-card .report-h {
  text-align: left;
  font-size: clamp(28.7px, 3.33vw, 41.4px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.018em;
  margin: 0 0 clamp(16px, 2vw, 22px);
}
.deep-card .report-sub {
  text-align: left;
  max-width: none;
  margin: 0 0 clamp(20px, 2.6vw, 28px);
}
.deep-card .report-image { margin: 0; max-width: 100%; }

/* ----- motion guardrail --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   The section below was formerly a separate file, redesign.css, which always
   loaded after this one. Merged into one file 2026-10-26 so there is a single
   source of truth for every selector (the two-file split is what let the
   eyebrow-style fix miss .ps-eyebrow while fixing .rd-eyebrow, since they
   lived in different files). Cascade order is unchanged: everything from here
   down still loads/wins last, exactly as redesign.css always did.
   ========================================================================== */

/* ==========================================================================
   ProScola — Redesign layer (2026)
   Sits on top of styles.css. Reuses the brand tokens (--pr-ink #22215F,
   --pr-accent Warm Machine #C2410C, Lexend, 8pt spacing) and the proven
   atoms (btn-klapp / btn-proscola / btn-demo, equation-board, lightbox,
   faq, header, footer). Adds an elevated, Swiss-trust-forward section system.
   ========================================================================== */

/* ---- shared section system ---------------------------------------------- */
.rd-band { padding: clamp(48px, 5.5vw, 88px) 0; }
.rd-band-tint { background: var(--pr-paper-tint-lavender); }
.rd-band-ink {
  background:
    radial-gradient(110% 130% at 80% 0%, #2C2B72 0%, var(--pr-ink) 60%);
  color: var(--pr-paper);
}
.rd-eyebrow {
  margin: 0 0 18px;
  font-size: 14.9px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--pr-accent);
}
.rd-band-ink .rd-eyebrow { color: #F2B68C; }
.rd-h {
  hyphens: auto;
  overflow-wrap: break-word;
  font-family: var(--pr-font);
  font-weight: 600;
  font-size: clamp(34.5px, 4.83vw, 59.8px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--pr-ink);
  margin: 0 0 clamp(16px, 2.2vw, 24px);
  text-wrap: balance;
}
.rd-band-ink .rd-h { color: var(--pr-paper); }
.rd-sub {
  font-size: clamp(19.5px, 1.95vw, 24.1px);
  line-height: 1.55;
  color: var(--pr-ink);
  opacity: 0.78;
  max-width: 54ch;
  margin: 0;
}
.rd-band-ink .rd-sub { color: #C8C7E8; opacity: 1; }
.rd-center { text-align: center; }
.rd-center .rd-h,
.rd-center .rd-sub { margin-inline: auto; }
.rd-head { max-width: 780px; }
.rd-center.rd-head { margin-inline: auto; }

/* ==========================================================================
   HERO — dual-login, elevated. Centered slogan + Swiss credential.
   ========================================================================== */
.rd-hero {
  position: relative;
  padding: clamp(40px, 5vw, 72px) 0 clamp(40px, 5vw, 72px);
  background:
    radial-gradient(80% 70% at 50% -10%, var(--pr-paper-tint-lavender) 0%, transparent 62%),
    var(--pr-paper);
  overflow: hidden;
  text-align: center;
}
.rd-hero .container { position: relative; z-index: 1; }
.rd-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  padding: 7px 16px 7px 8px;
  border: 1px solid var(--pr-hairline);
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  box-shadow: var(--pr-shadow-sm);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--pr-ink);
}
.rd-hero-kicker img { width: 22px; height: auto; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.14); }
.rd-hero-title {
  font-family: var(--pr-font);
  font-weight: 600;
  font-size: clamp(41.4px, 6.9vw, 87.4px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--pr-ink);
  margin: 0 auto 22px;
  max-width: 16ch;
  text-wrap: balance;
}
.rd-hero-title .accent { color: var(--pr-accent); }
.rd-hero-avail {
  font-size: clamp(19.5px, 2.07vw, 24.1px);
  font-weight: 500;
  color: var(--pr-ink);
  opacity: 0.82;
  margin: 0 0 36px;
}
.rd-hero-logins {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin: 0 0 22px;
}
.rd-hero-or {
  font-size: 16.1px;
  font-weight: 500;
  color: var(--pr-muted);
}
.rd-hero-demo-row { display: flex; justify-content: center; margin: 0 0 40px; }
.rd-hero-trust {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 22px;
  max-width: 640px;
}
.rd-hero-trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16.1px;
  font-weight: 500;
  color: var(--pr-ink);
}
.rd-hero-trust li::before {
  content: "";
  width: 18px; height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2410C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat,
    var(--pr-accent-ring);
}
.rd-hero-cred {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 38px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--pr-hairline);
}
.rd-hero-cred .flags { display: inline-flex; align-items: center; gap: 6px; }
.rd-hero-cred .flags img { height: 26px; width: auto; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.16); }
.rd-hero-cred span { font-size: 16.1px; font-weight: 500; color: var(--pr-muted); }

/* hero entrance uses the shared .reveal mechanism (main.js adds .is-visible);
   stagger via --i. End-state is visible by default for reduced-motion / no-JS. */

/* ==========================================================================
   INTRO — quiet lead-in
   ========================================================================== */
.rd-intro { text-align: center; padding: clamp(40px, 5vw, 72px) 0 clamp(16px, 2.5vw, 32px); }
.rd-intro-lead {
  font-size: 17.2px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pr-accent);
  margin: 0 0 22px;
}
.rd-intro-title {
  font-family: var(--pr-font);
  font-weight: 600;
  font-size: clamp(32.2px, 4.6vw, 55.2px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--pr-ink);
  margin: 0 auto 18px;
  max-width: 22ch;
  text-wrap: balance;
}
.rd-intro-welcome {
  font-size: clamp(19.5px, 2.07vw, 24.1px);
  color: var(--pr-ink);
  opacity: 0.72;
  margin: 0;
}

/* ==========================================================================
   PILLARS — two deep-dive cards (Lernpfade / HUB 360)
   ========================================================================== */
.rd-pillars-head { margin: 0 auto clamp(32px, 4vw, 48px); }
.rd-pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(22px, 3vw, 32px);
}
@media (max-width: 900px) { .rd-pillar-grid { grid-template-columns: 1fr; } }
.rd-pillar {
  display: flex;
  flex-direction: column;
  background: var(--pr-paper);
  border: 1px solid var(--pr-hairline);
  border-radius: var(--pr-radius-lg);
  padding: clamp(26px, 3vw, 40px);
  box-shadow: var(--pr-shadow-sm);
  transition: transform var(--pr-transition), box-shadow var(--pr-transition), border-color var(--pr-transition);
}
.rd-pillar:hover { transform: translateY(-4px); box-shadow: var(--pr-shadow-md); border-color: var(--pr-lavender); }
.rd-pillar-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.rd-pillar-index {
  font-size: 16.1px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--pr-accent);
  background: var(--pr-accent-ring);
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.rd-pillar-phase {
  font-size: 13.8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pr-muted);
}
.rd-pillar-name {
  font-size: clamp(27.6px, 2.99vw, 36.8px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--pr-ink);
  margin: 0 0 12px;
}
.rd-pillar-desc {
  font-size: 18.4px;
  line-height: 1.55;
  color: var(--pr-ink);
  opacity: 0.78;
  margin: 0 0 20px;
}
.rd-pillar-points {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.rd-pillar-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  font-size: 17.2px;
  line-height: 1.45;
  color: var(--pr-ink);
}
.rd-pillar-points li::before {
  content: "";
  width: 20px; height: 20px; margin-top: 1px;
  flex-shrink: 0;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2410C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat,
    var(--pr-accent-ring);
}
.rd-pillar-figure {
  margin: auto 0 0;
  border-radius: var(--pr-radius);
  overflow: hidden;
  border: 1px solid var(--pr-hairline);
  background: var(--pr-paper-tint);
  position: relative;
}
.rd-pillar-figure img { width: 100%; height: auto; display: block; }
.rd-pillar-figure .rd-figcap {
  position: absolute;
  left: 12px; bottom: 12px;
  padding: 7px 12px;
  border-radius: 7px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 13.8px; font-weight: 600; color: var(--pr-ink);
  box-shadow: var(--pr-shadow-sm);
}
.rd-pillar-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 17.2px;
  font-weight: 600;
  color: var(--pr-accent);
  /* also used as a <button> on the Services page */
  align-self: flex-start;
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.rd-pillar-cta::after { content: "→"; transition: transform var(--pr-transition); }
.rd-pillar-cta:hover::after { transform: translateX(4px); }
.rd-compliance {
  margin: clamp(32px, 4vw, 48px) 0 0;
  text-align: center;
  font-size: 16.1px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pr-muted);
}
.rd-compliance b { color: var(--pr-accent); font-weight: 700; }

/* ==========================================================================
   TIME-MATH — image + equation board (reuses .equation-board from styles.css)
   ========================================================================== */
.rd-math-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 880px) { .rd-math-grid { grid-template-columns: 1fr; } }
.rd-math-figure {
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  box-shadow: var(--pr-shadow-lg);
}
.rd-math-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-math-cred {
  font-size: clamp(18.4px, 1.84vw, 20.7px);
  line-height: 1.5;
  color: var(--pr-ink);
  opacity: 0.78;
  margin: 0 0 28px;
}

/* ---- flip-card maths block: big number ⟷ worked equation -------------- */
.rd-mathscard {
  position: relative;
  width: 100%;
  perspective: 1600px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rd-mathscard:focus-visible { outline: 3px solid var(--pr-accent); outline-offset: 4px; border-radius: var(--pr-radius-lg); }
.rd-mathscard-inner {
  position: relative; width: 100%;
  display: grid;
  transition: transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
}
.rd-mathscard.is-flipped .rd-mathscard-inner,
.rd-mathscard.is-autoflip .rd-mathscard-inner { transform: rotateY(180deg); }
.rd-mathscard-face {
  grid-area: 1 / 1;            /* both faces share one cell → card grows to the taller face */
  min-height: 437px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: var(--pr-radius-lg);
  display: flex; flex-direction: column;
  padding: clamp(28px, 3.4vw, 42px);
  overflow: hidden;
}
/* FRONT — the "crazy number" */
.rd-mathscard-front {
  background: var(--pr-paper);
  border: 1px solid var(--pr-hairline);
  box-shadow: var(--pr-shadow-md);
  justify-content: center;
  background-image:
    linear-gradient(rgba(34,33,95,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,33,95,0.045) 1px, transparent 1px);
  background-size: 24px 24px;
}
.rd-mathscard-kick {
  font-size: 13.8px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pr-accent); margin-bottom: 14px;
}
.rd-mathscard-big {
  font-family: var(--pr-font); font-weight: 600;
  font-size: clamp(85.1px, 11.5vw, 133.4px); line-height: 0.9; letter-spacing: -0.04em;
  color: var(--pr-accent);
  display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 9px;
}
.rd-mathscard-big .u { font-size: 0.34em; font-weight: 600; letter-spacing: -0.01em; }
.rd-mathscard-biglabel {
  font-size: clamp(19.5px, 2.07vw, 24.1px); font-weight: 500; line-height: 1.3;
  color: var(--pr-ink); margin-top: 14px; max-width: 22ch;
}
.rd-mathscard-flip {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 22px;
  font-size: 16.1px; font-weight: 600; color: var(--pr-muted);
}
.rd-mathscard-flip .ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--pr-accent-ring); color: var(--pr-accent); font-size: 17.2px;
  transition: transform var(--pr-transition);
}
.rd-mathscard:hover .rd-mathscard-front .rd-mathscard-flip .ic { transform: rotate(180deg); }
/* BACK — the worked equation, on maths-exercise-book grid */
.rd-mathscard-back {
  transform: rotateY(180deg);
  background: var(--pr-ink);
  color: var(--pr-paper);
  border: 1px solid var(--pr-ink);
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 22px 22px;
}
.rd-mathscard-backtitle {
  font-size: 13.8px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: #F2B68C; margin-bottom: 16px;
}
.rd-eq { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rd-eq li {
  display: grid; grid-template-columns: 7.6em 1fr; gap: 16px; align-items: baseline;
  padding: 5px 0; font-size: clamp(15.5px, 1.61vw, 17.2px); line-height: 1.3; color: #C8C7E8;
}
.rd-eq li b {
  font-family: var(--pr-font); font-weight: 600; font-size: 1.1em; white-space: nowrap;
  letter-spacing: -0.01em; color: var(--pr-paper); text-align: right; font-variant-numeric: tabular-nums;
}
.rd-eq-sum { border-top: 1px dashed rgba(255,255,255,0.22); margin-top: 3px; padding-top: 9px !important; }
.rd-eq-sum b { color: #fff; }
.rd-eq-total {
  border-top: 2px solid rgba(255,255,255,0.5); margin-top: 3px; padding-top: 11px !important;
}
.rd-eq-total b, .rd-eq-total span { color: #F2B68C !important; }
.rd-eq-total b { font-size: 1.75em !important; line-height: 0.95; }
.rd-eq-total span { font-weight: 500; }
.rd-eq-foot {
  margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: #9A9AB8;
  border-top: 1px solid rgba(255,255,255,0.12); padding-top: 10px;
}
.rd-mathscard-back .rd-mathscard-flip { color: #B9B8D6; margin-top: 14px; padding-top: 0; }
.rd-mathscard-back .rd-mathscard-flip .ic { background: rgba(242,182,140,0.16); color: #F2B68C; }
@media (max-width: 460px) { .rd-mathscard-face { min-height: 414px; } }
@media (prefers-reduced-motion: reduce) {
  .rd-mathscard-inner { transition: none; }
}

/* ---- click-to-enlarge image (reuses the lightbox in main.js) ---------- */
.rd-zoom {
  position: relative; display: block; margin: 0;
  border-radius: var(--pr-radius-lg); overflow: hidden;
  border: 1px solid var(--pr-hairline); box-shadow: var(--pr-shadow-lg);
  background: var(--pr-paper); cursor: zoom-in;
}
.rd-zoom img { width: 100%; height: auto; display: block; transition: transform 600ms cubic-bezier(0.16,1,0.3,1); }
.rd-zoom:hover img { transform: scale(1.03); }
.rd-zoom-badge {
  position: absolute; right: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  background: rgba(34,33,95,0.86); color: #fff;
  font-size: 14.9px; font-weight: 600; letter-spacing: 0.01em;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background var(--pr-transition);
}
.rd-zoom:hover .rd-zoom-badge { background: var(--pr-accent); }
.rd-zoom-badge svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.4; }

/* ==========================================================================
   FOR SCHOOLS — Schulleitung band with Mutschellen proof + stats
   ========================================================================== */
.rd-school-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 880px) { .rd-school-grid { grid-template-columns: 1fr; } }
.rd-school-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 18px;
}
.rd-school-head .rd-eyebrow { margin: 0; }
.rd-school-klapp {
  flex: none;
  width: 72px;
  height: auto;
}
@media (max-width: 880px) {
  .rd-school-head { justify-content: flex-start; gap: 18px; }
}
.rd-school-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.rd-proof {
  background: var(--pr-paper);
  border: 1px solid var(--pr-hairline);
  border-radius: var(--pr-radius-lg);
  padding: clamp(28px, 3.5vw, 44px);
  box-shadow: var(--pr-shadow-md);
}
.rd-proof-quote {
  margin: 0 0 26px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--pr-hairline);
}
.rd-proof-quote blockquote {
  margin: 0 0 16px;
  font-family: var(--pr-font);
  font-size: clamp(21.8px, 2.3vw, 27.6px);
  line-height: 1.36;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--pr-ink);
  text-wrap: balance;
}
.rd-proof-quote blockquote p { margin: 0; }
.rd-proof-quote figcaption {
  display: flex; align-items: center; gap: 11px;
  font-size: 14.9px; color: var(--pr-muted);
}
.rd-proof-quote figcaption .pin {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  background: var(--pr-accent-ring);
  display: flex; align-items: center; justify-content: center; color: var(--pr-accent);
}
.rd-proof-quote figcaption strong { display: block; color: var(--pr-ink); font-weight: 600; font-size: 16.1px; }
.rd-stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 460px) { .rd-stats { grid-template-columns: 1fr; gap: 14px; } }
.rd-stats strong {
  display: block;
  font-size: clamp(32.2px, 3.68vw, 43.7px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--pr-accent);
  line-height: 1;
  margin-bottom: 6px;
}
.rd-stats span { font-size: 14.9px; line-height: 1.4; color: var(--pr-ink); opacity: 0.74; }

/* school proof — saved-hours figure + worked example */
.rd-proof-lead { font-size: 17.2px; line-height: 1.5; color: var(--pr-ink); opacity: 0.74; margin: 0 0 24px; }
.rd-proof-figure {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 0 24px; margin: 0 0 24px;
  border-bottom: 1px solid var(--pr-hairline);
}
.rd-proof-num { font-size: clamp(46px, 5.75vw, 69px); font-weight: 600; letter-spacing: -0.03em; color: var(--pr-accent); line-height: 0.95; }
.rd-proof-num-label { font-size: 16.1px; color: var(--pr-ink); opacity: 0.74; max-width: 34ch; }
.rd-proof-example figcaption { font-size: 13.8px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pr-muted); margin-bottom: 10px; }
.rd-proof-example p { margin: 0; font-size: 17.8px; line-height: 1.6; color: var(--pr-ink); }

/* ==========================================================================
   GLIMPSE — product preview tiles (reuses lightbox JS from main.js)
   ========================================================================== */
.rd-glimpse-hint { text-align: center; font-size: 17.2px; color: var(--pr-muted); margin: 0 0 clamp(32px, 4vw, 44px); }
.rd-glimpse-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 26px);
}
@media (max-width: 760px) { .rd-glimpse-grid { grid-template-columns: 1fr; } }
.rd-tile {
  display: block;
  background: var(--pr-paper);
  border: 1px solid var(--pr-hairline);
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  box-shadow: var(--pr-shadow-sm);
  cursor: pointer;
  transition: transform var(--pr-transition), box-shadow var(--pr-transition), border-color var(--pr-transition);
  text-decoration: none;
}
.rd-tile:hover { transform: translateY(-4px); box-shadow: var(--pr-shadow-lg); border-color: var(--pr-lavender); }
.rd-tile-body { padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.6vw, 30px) 16px; }
.rd-tile h3 { font-size: clamp(21.8px, 2.3vw, 26.4px); font-weight: 600; letter-spacing: -0.01em; color: var(--pr-ink); margin: 0 0 8px; }
.rd-tile p { font-size: 17.2px; line-height: 1.5; color: var(--pr-ink); opacity: 0.74; margin: 0; }
.rd-tile-figure { position: relative; margin: 0; border-top: 1px solid var(--pr-hairline); background: var(--pr-paper-tint); overflow: hidden; }
.rd-tile-figure img { width: 100%; height: auto; display: block; transition: transform 600ms cubic-bezier(0.16,1,0.3,1); }
.rd-tile:hover .rd-tile-figure img { transform: scale(1.03); }
.rd-tile-count {
  position: absolute; right: 12px; top: 12px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(34,33,95,0.86); color: #fff;
  font-size: 13.8px; font-weight: 600; letter-spacing: 0.02em;
}

/* ==========================================================================
   CLOSING CTA (ink)
   ========================================================================== */
.rd-closing { text-align: center; }
.rd-closing .rd-h { margin-inline: auto; }
.rd-closing-lead {
  font-size: clamp(20.7px, 2.18vw, 25.3px);
  line-height: 1.5;
  color: #C8C7E8;
  max-width: 48ch;
  margin: 0 auto 36px;
}
.rd-closing-ctas { display: flex; flex-wrap: wrap; gap: 18px 24px; justify-content: center; align-items: flex-end; }
/* Closing CTA: ProScola mark stacked above the demo pill. The pill itself is the
   untouched .btn-demo, so its shape, gradient and arrow stay exactly as they were. */
.closing-demo-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.closing-demo-logo {
  height: 70px;
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(14, 13, 44, 0.35));
}
@media (max-width: 460px) {
  .closing-demo-logo { height: 55px; }
}

/* ==========================================================================
   Section divider flourish — thin Swiss cross accent (used sparingly)
   ========================================================================== */
.rd-flag-rule {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 auto;
  color: var(--pr-muted); font-size: 14.9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.rd-flag-rule::before, .rd-flag-rule::after { content: ""; height: 1px; width: clamp(40px, 12vw, 120px); background: var(--pr-hairline); }
.rd-flag-rule img { height: 20px; width: auto; }

/* ==========================================================================
   PHOTO HERO — full-bleed classroom image with scroll pull-back.
   Lives on the homepage (DE + EN). JS in main.js drives the pull-back.
   ========================================================================== */
.ph-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 96px 0 clamp(44px, 7vh, 92px);
  background: var(--pr-ink);
}
.ph-hero-media { position: absolute; inset: 0; z-index: 0; will-change: transform; transform-origin: 60% 40%; }
.ph-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(16,15,48,0.92) 0%, rgba(16,15,48,0.64) 28%, rgba(16,15,48,0.26) 56%, rgba(16,15,48,0.12) 100%),
    linear-gradient(90deg, rgba(16,15,48,0.5) 0%, rgba(16,15,48,0.14) 44%, transparent 64%);
}
.ph-hero-inner { position: relative; z-index: 2; width: 100%; will-change: transform, opacity; }
.ph-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 22px; padding: 7px 16px 7px 8px;
  border: 1px solid rgba(255,255,255,0.28); border-radius: 999px;
  background: rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 15.5px; font-weight: 600; color: #fff; letter-spacing: 0.01em;
}
.ph-kicker img { width: 22px; height: auto; border-radius: 2px; }
.ph-title {
  font-family: var(--pr-font); font-weight: 600;
  font-size: clamp(37.9px, 5.52vw, 69px); line-height: 1.02; letter-spacing: -0.03em;
  color: #fff; margin: 0 0 20px; max-width: 29ch; text-wrap: balance;
  hyphens: none; overflow-wrap: break-word;
  text-shadow: 0 2px 26px rgba(14,13,44,0.5), 0 1px 3px rgba(14,13,44,0.35);
}
.ph-title .accent { color: #F2884A; }
.ph-lead {
  font-size: clamp(19.5px, 2.07vw, 25.3px); line-height: 1.5; color: #DDDCEC;
  max-width: 44ch; margin: 0 0 34px;
  text-shadow: 0 1px 14px rgba(14,13,44,0.55);
}
.ph-ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; width: max-content; max-width: 100%; }
.ph-logins { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 20px; }
.ph-demo-row { display: flex; align-self: center; }
.ph-cred { display: flex; align-items: center; gap: 12px; margin: 40px 0 0; font-size: 17.5px; font-weight: 500; color: #B9B8D6; }
.ph-cred img { height: 22px; width: auto; border-radius: 2px; }
.ph-scrollcue {
  position: absolute; right: 30px; bottom: 26px;
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.7); font-size: 13.8px; letter-spacing: 0.14em; text-transform: uppercase;
  will-change: opacity;
}
.ph-scrollcue .mouse { width: 22px; height: 34px; border: 2px solid rgba(255,255,255,0.55); border-radius: 12px; position: relative; }
.ph-scrollcue .mouse::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 2px;
  background: #fff; transform: translateX(-50%); animation: ph-wheel 1.6s ease-in-out infinite;
}
@keyframes ph-wheel { 0%,100% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; transform: translate(-50%, 8px); } }
.ph-hero .reveal { transition-duration: 1100ms; }
@media (prefers-reduced-motion: reduce) {
  .ph-hero-media { transform: none !important; }
  .ph-scrollcue .mouse::after { animation: none; }
}
@media (max-width: 640px) { .ph-scrollcue { display: none; } }

/* ==========================================================================
   INNER PAGE HERO — elevated header band for demo / kontakt / legal
   ========================================================================== */
.rd-pagehero {
  position: relative;
  padding: clamp(96px, 12vh, 136px) 0 clamp(40px, 5vw, 72px);
  background:
    radial-gradient(90% 120% at 82% -10%, var(--pr-paper-tint-lavender) 0%, transparent 60%),
    var(--pr-paper);
  border-bottom: 1px solid var(--pr-hairline);
  text-align: center;
}
.rd-pagehero .rd-eyebrow { margin-bottom: 16px; }
.rd-pagehero h1 {
  font-family: var(--pr-font); font-weight: 600;
  font-size: clamp(39.1px, 5.75vw, 69px); line-height: 1.04; letter-spacing: -0.025em;
  color: var(--pr-ink); margin: 0 auto 18px; max-width: 18ch; text-wrap: balance;
}
.rd-pagehero .rd-pagehero-sub {
  font-size: clamp(19.5px, 2.07vw, 24.1px); line-height: 1.55;
  color: var(--pr-ink); opacity: 0.78; max-width: 52ch; margin: 0 auto;
}
.rd-pagehero-ink {
  background: radial-gradient(100% 130% at 50% -10%, #2C2B72 0%, var(--pr-ink) 62%);
  border-bottom: 0;
}
.rd-pagehero-ink .rd-eyebrow { color: #F2B68C; }
.rd-pagehero-ink h1 { color: var(--pr-paper); }
.rd-pagehero-ink .rd-pagehero-sub { color: #C8C7E8; opacity: 1; }

/* prose blocks for legal pages */
.rd-prose { max-width: 760px; margin: 0 auto; }
.rd-prose h2 {
  font-family: var(--pr-font); font-weight: 600; font-size: clamp(25.3px, 2.76vw, 34.5px);
  letter-spacing: -0.015em; color: var(--pr-ink); margin: clamp(34px, 4vw, 48px) 0 14px;
}
.rd-prose h2:first-child { margin-top: 0; }
.rd-prose p, .rd-prose li { font-size: 19.5px; line-height: 1.65; color: var(--pr-ink); opacity: 0.84; }
.rd-prose p { margin: 0 0 16px; }
.rd-prose a { color: var(--pr-accent); font-weight: 500; }
.rd-prose ul { margin: 0 0 16px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.rd-prose-card {
  background: var(--pr-paper); border: 1px solid var(--pr-hairline);
  border-radius: var(--pr-radius-lg); padding: clamp(28px, 4vw, 48px); box-shadow: var(--pr-shadow-sm);
}

/* ==========================================================================
   CONTACT / DEMO — form + trust aside
   ========================================================================== */
.rd-contact { padding: clamp(48px, 6vw, 84px) 0 clamp(64px, 8vw, 110px); }
.rd-contact-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 880px) { .rd-contact-grid { grid-template-columns: 1fr; } }
.rd-form-card {
  background: var(--pr-paper);
  border: 1px solid var(--pr-hairline);
  border-radius: var(--pr-radius-lg);
  padding: clamp(26px, 3.4vw, 44px);
  box-shadow: var(--pr-shadow-md);
}
.rd-aside { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 96px; }
@media (max-width: 880px) { .rd-aside { position: static; } }
.rd-aside-card {
  background: var(--pr-paper-tint-lavender);
  border: 1px solid var(--pr-hairline);
  border-radius: var(--pr-radius-lg);
  padding: clamp(24px, 3vw, 32px);
}
.rd-aside-card h3 { font-size: 19.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--pr-ink); margin: 0 0 16px; }
.rd-aside-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rd-aside-list li { display: grid; grid-template-columns: auto 1fr; gap: 12px; font-size: 17.2px; line-height: 1.45; color: var(--pr-ink); }
.rd-aside-list li::before {
  content: ""; width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2410C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat,
    var(--pr-accent-ring);
}
.rd-aside-trust {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px; border: 1px solid var(--pr-hairline); border-radius: var(--pr-radius-lg);
  background: var(--pr-ink); color: var(--pr-paper);
}
.rd-aside-trust img { height: 26px; width: auto; border-radius: 2px; }
.rd-aside-trust span { font-size: 15.5px; font-weight: 500; line-height: 1.4; color: #C8C7E8; }

/* ==========================================================================
   Refined reveal — a soft "dissolve into focus", not a slide-in.
   Overrides the shared .reveal (this sheet loads after styles.css).
   Pure opacity + blur-to-sharp + a barely-there scale settle. No Y-slide.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: scale(0.992);
  filter: blur(7px);
  transition-property: opacity, filter, transform;
  transition-duration: 1000ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 75ms);
  will-change: opacity, filter, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ==========================================================================
   WIDE-PICTURE TIME BAND — full-bleed photo, big figure overlaid,
   equation panel revealed on hover / tap. Used for Lernpfade (95 Std).
   JS toggle (.is-open) in main.js covers touch + keyboard.
   ========================================================================== */
.wm-band {
  position: relative;
  width: 100%;
  min-height: clamp(440px, 58vh, 600px);
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--pr-shadow-lg);
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.wm-band:focus-visible { outline: 3px solid var(--pr-accent); outline-offset: 4px; }
.wm-band > img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  transition: transform 900ms cubic-bezier(0.22,1,0.36,1);
}
.wm-band:hover > img { transform: scale(1.04); }
.wm-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(16,15,48,0.86) 0%, rgba(16,15,48,0.5) 30%, rgba(16,15,48,0.1) 60%, transparent 78%),
    linear-gradient(90deg, rgba(16,15,48,0.62) 0%, rgba(16,15,48,0.18) 42%, transparent 66%);
}
.wm-inner {
  position: relative; z-index: 2; width: 100%;
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 4vw, 48px);
  align-items: end;
}
.wm-figure { color: #fff; }
.wm-eyebrow {
  font-size: 14.9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: #F2B68C; margin: 0 0 14px;
}
.wm-big {
  font-family: var(--pr-font); font-weight: 600;
  font-size: clamp(92px, 13.8vw, 188.6px); line-height: 0.82; letter-spacing: -0.05em;
  color: #fff; text-shadow: 0 4px 40px rgba(12,11,40,0.5);
  display: flex; align-items: baseline; gap: 10px;
}
.wm-big .u { font-size: 0.34em; font-weight: 600; letter-spacing: -0.01em; color: #F2B68C; }
.wm-biglabel {
  font-size: clamp(19.5px, 2.18vw, 26.4px); font-weight: 500; line-height: 1.3;
  color: #EDECFA; margin: 16px 0 0; max-width: 26ch;
  text-shadow: 0 2px 18px rgba(12,11,40,0.5);
}
.wm-hint {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 22px 0 0; font-size: 15.5px; font-weight: 600; color: #C8C7E8;
  transition: opacity 360ms ease;
}
.wm-hint .ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.4); color: #fff; font-size: 16.1px;
  animation: wm-pulse 2.2s ease-in-out infinite;
}
@keyframes wm-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(242,182,140,0.0); } 50% { box-shadow: 0 0 0 7px rgba(242,182,140,0.10); } }
.wm-band:hover .wm-hint, .wm-band.is-open .wm-hint { opacity: 0; }
.wm-panel {
  align-self: end;
  width: min(420px, 78vw);
  background: rgba(22,21,60,0.62);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--pr-radius);
  padding: clamp(22px, 2.6vw, 30px);
  opacity: 0; transform: translateY(16px) scale(0.98);
  transition: opacity 520ms cubic-bezier(0.22,1,0.36,1), transform 520ms cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}
.wm-band:hover .wm-panel, .wm-band.is-open .wm-panel { opacity: 1; transform: none; }
.wm-panel-title {
  font-size: 13.8px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: #F2B68C; margin: 0 0 14px;
}
.wm-eq { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wm-eq li {
  display: grid; grid-template-columns: 5.8em 1fr; gap: 15px; align-items: baseline;
  padding: 5px 0; font-size: 16.1px; line-height: 1.3; color: #C8C7E8;
}
.wm-eq li b {
  font-family: var(--pr-font); font-weight: 600; font-size: 1.1em; white-space: nowrap;
  letter-spacing: -0.01em; color: #fff; text-align: right; font-variant-numeric: tabular-nums;
}
.wm-eq-sum { border-top: 1px dashed rgba(255,255,255,0.24); margin-top: 3px; padding-top: 9px; }
.wm-eq-total { border-top: 2px solid rgba(255,255,255,0.5); margin-top: 3px; padding-top: 11px; }
.wm-eq-total b, .wm-eq-total span { color: #F2B68C; }
.wm-eq-total b { font-size: 1.7em; line-height: 0.95; }
.wm-eq-foot { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: #A9A8C6; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 10px; }
@media (max-width: 820px) {
  .wm-band { cursor: default; }
  .wm-inner { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .wm-panel { width: 100%; opacity: 1; transform: none; pointer-events: auto; }
  .wm-hint { display: none; }
  .wm-band > img { object-position: 60% 35%; }
}
@media (prefers-reduced-motion: reduce) {
  .wm-band > img, .wm-panel, .wm-hint { transition: none; }
  .wm-hint .ic { animation: none; }
  .wm-panel { opacity: 1; transform: none; }
  .wm-hint { display: none; }
}

/* ==========================================================================
   SERVICES — header dropdown + embedded booking calendar
   ========================================================================== */

/* ---- header dropdown ---------------------------------------------------- */
.nav-group { position: relative; display: inline-flex; }
.nav-trigger {
  font: inherit;
  color: var(--pr-ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color var(--pr-transition);
}
.nav-trigger::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--pr-transition);
}
.nav-trigger[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
.nav-trigger:hover,
.nav-trigger:focus-visible { color: var(--pr-accent); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 256px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  background: var(--pr-paper);
  border: 1px solid var(--pr-hairline);
  border-radius: var(--pr-radius);
  box-shadow: var(--pr-shadow-lg);
  z-index: 120;
}
/* The menu floats 16px below the trigger. Without a bridge across that gap the
   pointer leaves .nav-group on the way down and the menu closes before anything
   can be clicked. This extends the hit area upward; it paints nothing. */
.nav-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}
/* the base rule sets display:flex, which beats the UA's [hidden]{display:none};
   restore it explicitly or the menu is permanently visible on desktop */
.nav-dropdown[hidden] { display: none; }

.nav-dropdown a {
  padding: 11px 13px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background var(--pr-transition), color var(--pr-transition);
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  background: var(--pr-paper-tint-lavender);
  color: var(--pr-accent);
}

/* Inside the mobile drawer there is no hover and no room to float: the group
   becomes a plain indented list that is always open. */
@media (max-width: 720px) {
  .nav-group { display: block; width: 100%; }
  .nav-trigger { width: 100%; justify-content: flex-start; padding: 6px 0; }
  .nav-dropdown,
  .nav-dropdown[hidden] {
    display: flex;
    position: static;
    transform: none;
    min-width: 0;
    padding: 2px 0 6px 16px;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
    border-left: 2px solid var(--pr-hairline);
  }
  .nav-dropdown a { padding: 8px 0; }
}

/* ---- booking panel ------------------------------------------------------ */
.booking-frame {
  position: relative;
  background: var(--pr-paper);
  border: 1px solid var(--pr-hairline);
  border-radius: var(--pr-radius-lg);
  box-shadow: var(--pr-shadow-md);
  overflow: hidden;
  min-height: 760px;
}
.booking-frame iframe {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  min-height: 760px;
  border: 0;
  /* deliberately no background: if Microsoft refuses to be framed the iframe
     paints nothing and the fallback underneath shows through */
}
.booking-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: clamp(28px, 4vw, 56px);
  text-align: center;
}
.booking-placeholder-text {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(17.2px, 1.8vw, 20.7px);
  line-height: 1.5;
  color: var(--pr-ink);
  opacity: 0.78;
}
.booking-frame.is-loading .booking-placeholder-text::after {
  content: "";
  display: block;
  width: 26px; height: 26px;
  margin: 18px auto 0;
  border: 3px solid var(--pr-lavender);
  border-top-color: var(--pr-accent);
  border-radius: 50%;
  animation: booking-spin 900ms linear infinite;
}
@keyframes booking-spin { to { transform: rotate(360deg); } }
.booking-note {
  margin: 18px 0 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--pr-muted);
  text-align: center;
  max-width: 72ch;
  margin-inline: auto;
}
.booking-note a { color: var(--pr-accent); }
@media (max-width: 720px) {
  .booking-frame, .booking-frame iframe { min-height: 900px; }
}
@media (prefers-reduced-motion: reduce) {
  .booking-frame.is-loading .booking-placeholder-text::after { animation: none; }
}

/* once a calendar has been requested the placeholder becomes the fallback that
   only shows if the embed fails to paint */
.booking-placeholder.is-fallback .booking-placeholder-text { font-size: 17.2px; }
.booking-placeholder.is-fallback .btn { display: none; }
.booking-placeholder.is-fallback .booking-shot { display: none; }
.booking-placeholder.is-fallback .booking-fallback { display: block; }
.booking-fallback { display: none; margin: 0; font-size: 16.1px; }
.booking-fallback a { color: var(--pr-accent); font-weight: 600; }


/* ==========================================================================
   OVERLAY HEADER — transparent over the homepage hero, solid once scrolled
   ========================================================================== */

/* The homepage hero runs full-bleed behind the header, so the body loses its
   offset and the header floats on top. Every other page keeps the solid bar. */
body.home { padding-top: 0; }

body.home .site-header {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background var(--pr-transition), border-color var(--pr-transition);
}
/* readability scrim so white nav type survives a bright photograph */
body.home .site-header::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 190px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14,13,44,0.62) 0%, rgba(14,13,44,0.34) 46%, transparent 100%);
  transition: opacity var(--pr-transition);
}
body.home .site-header > .container { position: relative; z-index: 1; }

body.home .site-header .site-nav a,
body.home .site-header .nav-trigger,
body.home .site-header .locale-toggle a,
body.home .site-header .locale-toggle span { color: #fff; }
body.home .site-header .site-nav a:hover,
body.home .site-header .nav-trigger:hover,
body.home .site-header .locale-toggle a:hover { color: var(--pr-lavender); }
body.home .site-header .nav-toggle .bar { background: #fff; }

/* past the hero the bar becomes the normal solid one again */
body.home .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--pr-hairline);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
}
body.home .site-header.is-scrolled::before { opacity: 0; }
body.home .site-header.is-scrolled .site-nav a,
body.home .site-header.is-scrolled .nav-trigger,
body.home .site-header.is-scrolled .locale-toggle a,
body.home .site-header.is-scrolled .locale-toggle span { color: var(--pr-ink); }
body.home .site-header.is-scrolled .site-nav a:hover,
body.home .site-header.is-scrolled .nav-trigger:hover { color: var(--pr-accent); }
body.home .site-header.is-scrolled .nav-toggle .bar { background: var(--pr-ink); }

/* the dropdown panel stays light even over the dark hero */
body.home .site-header .nav-dropdown a { color: var(--pr-ink); }
body.home .site-header .nav-dropdown a:hover { color: var(--pr-accent); }

/* ---- login pill, top right --------------------------------------------- */
.header-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 18px;
  padding: 10px 24px;
  border: 1px solid var(--pr-hairline);
  border-radius: 999px;
  font-size: 16.1px;
  font-weight: 500;
  line-height: 1;
  color: var(--pr-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--pr-transition), border-color var(--pr-transition), color var(--pr-transition);
}
.header-login:hover,
.header-login:focus-visible {
  background: var(--pr-ink);
  border-color: var(--pr-ink);
  color: #fff;
}
body.home .site-header .header-login {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
body.home .site-header .header-login:hover,
body.home .site-header .header-login:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--pr-ink);
}
body.home .site-header.is-scrolled .header-login {
  border-color: var(--pr-hairline);
  color: var(--pr-ink);
}
body.home .site-header.is-scrolled .header-login:hover {
  background: var(--pr-ink);
  border-color: var(--pr-ink);
  color: #fff;
}

/* the hero already fills the viewport; without the body offset it now runs
   edge to edge behind the bar, so give the content room to clear it */
body.home .ph-hero { padding-top: 132px; }

@media (max-width: 860px) {
  .header-login { margin-left: 12px; padding: 9px 18px; font-size: 15px; }
}
@media (max-width: 560px) {
  /* keep it reachable on a phone rather than hiding the only way to log in */
  .header-login { margin-left: 8px; padding: 8px 14px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body.home .site-header,
  body.home .site-header::before,
  .header-login { transition: none; }
}

/* ---- header logo ------------------------------------------------------- */
/* No brand tab: the lockup sits directly on the bar. Over the homepage hero it
   needs the white version, everywhere else the normal one. */
.site-header .logo img { height: 52px; width: auto; }
.site-header .logo-light { display: none; }
body.home .site-header .logo-dark { display: none; }
body.home .site-header .logo-light { display: block; }
body.home .site-header.is-scrolled .logo-dark { display: block; }
body.home .site-header.is-scrolled .logo-light { display: none; }
/* the inverse lockup is a wider wordmark, so trim it to the same optical size */
.site-header .logo-light { height: 40px; }

/* ---- right-hand header group ------------------------------------------- */
/* The locale toggle used to be position:absolute right:40px, which put it on
   top of the login pill. Both now live in one flex group instead, so their
   spacing holds whatever the labels say. */
.site-header .header-right {
  position: absolute;
  right: var(--pr-gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
}
.site-header .locale-toggle {
  position: static;
  right: auto;
  top: auto;
  transform: none;
}
.site-header .header-login { margin-left: 0; }

@media (max-width: 720px) {
  /* With the locale toggle and login pill lifted out of flow, the hamburger was
     the only item left and drifted to the middle. Pin it right and park the
     group just inside it. */
  .site-header .nav-toggle {
    position: absolute;
    right: var(--pr-gutter);
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
  }
  .site-header .header-right { right: calc(var(--pr-gutter) + 50px); gap: 12px; }
}
@media (max-width: 560px) {
  .site-header .header-right { gap: 10px; }
  .site-header .logo img { height: 38px; }
  .site-header .logo-light { height: 30px; }
}

/* ---- centred menu bar --------------------------------------------------- */
/* The logo and nav were centred together as one block, which pushed the nav
   right of centre by half the logo's width. Pin the nav to the true centre of
   the header and let the logo sit left, as in the reference. Guarded above the
   drawer breakpoint so the 720px mobile panel keeps its own positioning. */
@media (min-width: 721px) {
  .site-header .header-cluster { margin: 0; }
  .site-header .site-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

/* ==========================================================================
   COMPACT UTILITY PAGES — 2026-09-18
   demo, services, kontakt and the legal pages are utility pages: the visitor
   arrived to do one thing. They were built on the homepage's generous rhythm
   and ran 1800-3000px tall, most of it air. Everything here tightens those
   pages only. The lever is the `.rd-pagehero ~` sibling selector: only inner
   pages carry that hero, so the homepage rhythm is untouched.
   ========================================================================== */

/* ---- inner page hero ---------------------------------------------------- */
.rd-pagehero { padding: clamp(48px, 5.4vh, 62px) 0 clamp(22px, 2.6vw, 32px); }
.rd-pagehero .rd-eyebrow { margin-bottom: 12px; }
.rd-pagehero h1 { font-size: clamp(34.5px, 3.9vw, 48.3px); margin-bottom: 12px; }
.rd-pagehero .rd-pagehero-sub { font-size: clamp(17.9px, 1.7vw, 20.7px); line-height: 1.5; }

/* ---- bands that follow an inner hero (services, demo) ------------------- */
.rd-pagehero ~ .rd-band { padding: clamp(28px, 2.6vw, 36px) 0; }
.rd-pagehero ~ .rd-band .rd-head { margin-bottom: clamp(20px, 2.4vw, 30px); }
.rd-pagehero ~ .rd-band .rd-pillars-head { margin: 0 auto clamp(18px, 2vw, 24px); }
/* a section heading on an inner page must not shout louder than the page title
   it sits under: the band h2 was 59.8px against a 48.3px h1 */
.rd-pagehero ~ .rd-band .rd-eyebrow { margin-bottom: 10px; }
.rd-pagehero ~ .rd-band .rd-h { font-size: clamp(27.6px, 2.6vw, 34.5px); margin-bottom: 12px; }
.rd-pagehero ~ .rd-band .rd-sub { font-size: 18.4px; line-height: 1.5; }

/* ---- services pillar cards ---------------------------------------------- */
.rd-pagehero ~ .rd-band .rd-pillar { padding: clamp(20px, 2vw, 24px); }
.rd-pagehero ~ .rd-band .rd-pillar-top { margin-bottom: 12px; }
.rd-pagehero ~ .rd-band .rd-pillar-index { width: 34px; height: 34px; border-radius: 9px; font-size: 14.9px; }
.rd-pagehero ~ .rd-band .rd-pillar-name { font-size: clamp(23px, 2vw, 26.4px); line-height: 1.2; margin-bottom: 8px; }
.rd-pagehero ~ .rd-band .rd-pillar-desc { font-size: 17.2px; line-height: 1.5; margin-bottom: 12px; }
.rd-pagehero ~ .rd-band .rd-pillar-points { margin-bottom: 16px; gap: 7px; }
.rd-pagehero ~ .rd-band .rd-pillar-points li { font-size: 16.1px; line-height: 1.4; }

/* ---- booking panel: no calendar yet, so no empty box --------------------
   The panel used to reserve the full calendar height before anyone asked for
   it, which is where the demo page's white space came from. At rest it is now
   content-height; `.is-open` (added by main.js the moment a calendar is
   requested) restores the reserved height and puts the placeholder back under
   the iframe, which is what makes a blocked embed show the fallback. */
.booking-frame { min-height: 0; }
.booking-placeholder {
  position: relative; inset: auto; gap: 16px;
  --bp-pad: clamp(24px, 2.8vw, 34px);
  padding: var(--bp-pad);
}
/* the desk photo sits full-bleed across the top of the panel: the negative
   margin cancels the panel padding, and the panel's own overflow: hidden
   rounds the top corners for it */
.booking-shot {
  display: block;
  width: calc(100% + var(--bp-pad) * 2);
  max-width: none;          /* beats the global img { max-width: 100% } */
  height: auto;
  margin: calc(var(--bp-pad) * -1) calc(var(--bp-pad) * -1) 4px;
  /* a shade wider than the 2:1 source, so cover trims a few pixels top and
     bottom and the CTA underneath stays above the fold at 1440x900 */
  aspect-ratio: 2.1 / 1;
  object-fit: cover;
  object-position: center;
}
.booking-frame.is-open { min-height: 760px; }
.booking-frame.is-open .booking-placeholder { position: absolute; inset: 0; }
.booking-note { margin-top: 14px; }
@media (max-width: 720px) {
  .booking-frame { min-height: 0; }
  .booking-frame.is-open { min-height: 900px; }
}

/* ---- contact: one card, not a card inside a card ------------------------ */
.rd-contact { padding: clamp(28px, 2.9vw, 38px) 0 clamp(36px, 4vw, 56px); }
.rd-form-card { padding: clamp(22px, 2.6vw, 32px); }
.rd-form-card .contact-form {
  max-width: none; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.rd-form-card .contact-form label { font-size: 15.5px; margin-bottom: 4px; }
.rd-form-card .contact-form input,
.rd-form-card .contact-form select,
.rd-form-card .contact-form textarea { padding: 9px 13px; font-size: 16.6px; }
.rd-form-card .contact-form textarea { min-height: 88px; }
.rd-form-card .contact-form .form-row { gap: 16px; margin-bottom: 10px; }
.rd-form-card .contact-form .form-actions { margin-top: 14px; }
.rd-form-card .contact-form .form-note { margin-top: 10px; }

/* ---- trust aside -------------------------------------------------------- */
.rd-aside { gap: 14px; }
.rd-aside-card { padding: clamp(20px, 2.4vw, 26px); }
.rd-aside-card h3 { margin-bottom: 12px; }
.rd-aside-list { gap: 10px; }
.rd-aside-list li { font-size: 16.6px; line-height: 1.4; }
.rd-aside-trust { padding: 14px 18px; }