@font-face{
  font-family: "Newsreader Ersatz";
  src: local("Times New Roman"), local("Times"), local("Liberation Serif"), local("Tinos");
  size-adjust: 110.7%;
  ascent-override: 66.8%;
  descent-override: 24.4%;
  line-gap-override: 0%;
  font-style: normal;
}
@font-face{
  font-family: "Newsreader Ersatz";
  src: local("Times New Roman"), local("Times"), local("Liberation Serif"), local("Tinos");
  size-adjust: 103.4%;
  ascent-override: 71.6%;
  descent-override: 26.1%;
  line-gap-override: 0%;
  font-style: italic;
}
@font-face{
  font-family: "Inter Ersatz";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"), local("Arimo");
  size-adjust: 106.4%;
  ascent-override: 91.2%;
  descent-override: 22.6%;
  line-gap-override: 0%;
}
@font-face{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/newsreader-001.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face{
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/newsreader-002.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/newsreader-003.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/newsreader-004.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face{
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/newsreader-005.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/newsreader-006.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-001.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-002.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-003.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face{
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-004.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face{
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-005.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-006.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{--canvas: #F3F1F0;
  --canvas-2: #EEE9E4;
  --canvas-3: #E7E0D8;
  --ink: #19191C;
  --ink-2: #2B2B2F;
  --muted: #6E6A66;
  --line: rgba(25, 25, 28, 0.10);
  --line-2: rgba(25, 25, 28, 0.18);
  /* Der Akzent traegt an 136 Stellen Schrift, Raender und kleine Flaechen.
     Deshalb NICHT das reine --cta #22C7D6: das liegt auf der Flaeche bei
     1,83:1 und waere schlechter als das Gold, das es ersetzt (2,76:1).
     Beide Werte sind die tiefen Cyan-Fassungen und heben den Kontrast
     ueberall an — als Schrift, als Rand und mit Weiss darauf. */
  --accent: #097078;        /* 5,18:1 auf --canvas, Weiss darauf 5,83:1 */
  --accent-ink: #075B62;    /* 6,95:1 — die kraeftigere Fassung */

  /* Überschriften Newsreader, Fließtext Inter. Die zweite Familie im Stack ist
     jeweils die auf die Echtschrift gestauchte Ersatzfamilie aus
     schriften.css — sie hält den Umbruch, bis die Echtschrift geladen ist.
     Erst danach kommen die Systemschriften als letzte Rückfallebene. */
  --serif: "Newsreader", "Newsreader Ersatz", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Inter Ersatz", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Zeilenhöhen als Token, damit sie nicht an 40 Stellen einzeln driften.
     Große Überschriften laufen eng, Fließtext bekommt Luft. */
  --lh-display: 1.0;
  --lh-h3: 1.12;
  --lh-body: 1.55;
  /* Lesebreite. 62 Zeichen liegt in der Mitte des Korridors 55–68. */
  --mass: 62ch;

  /* Untergrenze von 52 auf 40 px: Newsreader läuft aufrecht rund 11 % breiter
     als die vorherige kursive Serifenschrift. „Informationen" brauchte bei
     52 px 314 px und sprengte damit die 280 px, die bei 320 px Bildbreite
     zwischen den Rändern bleiben. */
  --fs-display: clamp(40px, 8.8vw, 108px);
  --fs-h1: clamp(44px, 6.4vw, 84px);
  --fs-h2: clamp(34px, 4.8vw, 64px);
  --fs-h3: clamp(24px, 3vw, 40px);
  --fs-lead: clamp(18px, 1.4vw, 22px);
  --fs-body: clamp(16px, 1.05vw, 18px);

  --gutter: clamp(20px, 5vw, 72px);
  --section-y: clamp(96px, 14vw, 220px);
  --section-y-tight: clamp(64px, 9vw, 140px);
  --max: 1440px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 700ms;
  --dur-fast: 300ms;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior: auto;}
:root{--dur: 0ms; --dur-fast: 0ms;}
*{animation-duration: 0.001ms !important; transition-duration: 0.001ms !important;}}
*,*::before,*::after{box-sizing: border-box; margin: 0; padding: 0;}
html{-webkit-text-size-adjust: 100%; scroll-behavior: smooth;}
body{font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip statt hidden. `overflow-x: hidden` lässt die Gegenachse auf `auto`
     rechnen und macht den Body damit zum Scrollcontainer — jedes
     `position: sticky` darin klebt dann an diesem Container statt am
     Bildschirm und scrollt einfach mit weg. Genau daran ist das Band im
     Scroll-Reveal gescheitert. `clip` schneidet ebenso ab, erzeugt aber
     keinen Scrollcontainer. */
  overflow-x: clip;
  /* Newsreader trägt eine opsz-Achse. Ohne diese Zeile bleibt sie auf dem
     Standardwert stehen und große Grade wirken zu fett, kleine zu dünn. */
  font-optical-sizing: auto;}
img,svg,video{display: block; max-width: 100%; height: auto;}
button{font: inherit; color: inherit; background: none; border: none; cursor: pointer;}
a{color: inherit; text-decoration: none;}
::selection{background: var(--ink); color: var(--canvas);}
.wrap{max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);}
.section{padding-block: var(--section-y);}
.eyebrow{font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;}
.display,h1,h2{font-family: var(--serif);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-style: normal;}
.display{font-size: var(--fs-display);}
h1{font-size: var(--fs-h1);}
h2{font-size: var(--fs-h2);}
h3{font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); letter-spacing: -0.015em; line-height: var(--lh-h3);}
h1 em,h2 em,h3 em,.display em{font-style: italic;}
@media (max-width: 420px){.display,h1,h2,h3{hyphens: auto;}}
p{text-wrap: pretty; max-width: var(--mass);}
.lead{font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 58ch;}
:root:lang(zh),:root:lang(zh-Hans){--serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --lh-display: 1.28;
  --lh-h3: 1.4;
  --lh-body: 1.75;
  --mass: 34em;}
:root:lang(ar){--serif: "Noto Naskh Arabic", "Amiri", serif;
  --sans: "Noto Sans Arabic", "Tahoma", sans-serif;
  --lh-display: 1.42;
  --lh-h3: 1.5;
  --lh-body: 1.9;
  --mass: 40em;}
:lang(zh) .display,:lang(zh) h1,:lang(zh) h2,:lang(zh) h3,:lang(ar) .display,:lang(ar) h1,:lang(ar) h2,:lang(ar) h3{letter-spacing: 0;
  font-style: normal;}
:lang(zh) em,:lang(zh) i,:lang(ar) em,:lang(ar) i{font-style: normal; font-weight: 500;}
:lang(zh) .eyebrow,:lang(ar) .eyebrow{text-transform: none; letter-spacing: 0.02em;}
:lang(ar){text-align: start;}
:root{--kopf-hoehe: 90px;}
@media (max-width: 860px){:root{--kopf-hoehe: 86px;}}
.header{position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 20px var(--gutter);
  display: flex; align-items: center; justify-content: center; gap: 40px;
  background: rgba(243, 241, 240, 0);
  transition: background var(--dur-fast) var(--ease), backdrop-filter var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  border-bottom: 1px solid transparent;}
.header.is-scrolled{background: rgba(243, 241, 240, 0.82);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  border-bottom-color: var(--line);}
@media (max-width: 900px){.header{transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);}
.header.is-scrolled{background: #F3F1F0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;}}
.brand{display: inline-flex; align-items: center; gap: 10px;}
.brand svg{height: 22px; width: auto;}
.header .brand,.header .brand svg{flex-shrink: 0;}
.nav-cta,a.nav-cta{display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--ink); color: var(--canvas) !important;
  opacity: 1;
  font-size: 14px; font-weight: 500;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);}
.nav-cta:hover{background: #000; transform: translateY(-1px);}
.nav-cta::after{content: "→"; transition: transform var(--dur-fast) var(--ease);}
.nav-cta:hover::after{transform: translateX(3px);}
@media (max-width: 860px){.nav-cta{padding: 9px 14px; font-size: 13px;}}
.btn{display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  font-size: 15px; font-weight: 500;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);}
.btn--primary{background: var(--ink); color: var(--canvas);}
.btn--primary:hover{background: #000; transform: translateY(-1px);}
.btn--primary::after{content: "→"; transition: transform var(--dur-fast) var(--ease);}
.btn--primary:hover::after{transform: translateX(4px);}
.hero{padding-top: 148px; padding-bottom: var(--section-y);}
.hero__title{font-family: var(--serif); font-size: var(--fs-display); font-style: normal; font-weight: 400; line-height: 0.98; letter-spacing: -0.02em; text-wrap: balance;}
@keyframes rise{ to { transform: translateY(0); } }
.hero__actions{margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px;}
html.no-js .reveal{opacity: 1 !important; transform: none !important;}
.reveal{opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease), transform 900ms var(--ease);}
.reveal.is-in{opacity: 1; transform: none;}
.mods__nav{display: flex; gap: 4px; flex-wrap: nowrap;
  padding: 6px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  margin-bottom: 56px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;}
.mods__nav button{padding: 10px 18px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 14px; font-weight: 500;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);}
.mods__nav button:hover{color: var(--ink);}
.mods__nav button[aria-selected="true"]{background: var(--ink); color: var(--canvas);}
.mods__panel{display: none; grid-template-columns: minmax(0, 1fr); gap: 40px;}
.mods__panel.is-active{display: grid; animation: fadeIn 500ms var(--ease);}
@keyframes fadeIn{ from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.mod{padding: 32px 4px 32px 4px;
  border-top: 1px solid var(--line);
  display: grid; gap: 12px;}
@media (min-width: 900px){.mods__panel{grid-template-columns: repeat(4, 1fr); gap: 24px 32px;}}
@keyframes castScroll{
  from { transform: translateY(0); }
  to { transform: translateY(var(--cast-end, -82%)); }
}
.final{padding-block: var(--section-y); text-align: center;}
.final__cta{margin-top: 48px; display: inline-flex;}
.footer{background: #0E0E11;
  color: #F3F1F0;
  padding-block: clamp(96px, 12vw, 160px) 40px;
  margin-top: clamp(64px, 8vw, 120px);}
.footer__eyebrow{margin: 0 auto 18px;
  color: rgba(243, 241, 240, 0.45);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;}
.footer__tagline{font-family: var(--serif);
  font-style: normal;
  /* Das größte Wortzeichen jeder Seite stand als einziges mager. Die
     Spezifität dieser Regel (0,1,0) schlägt h2 aus figtree.css (0,0,1),
     die 700 von dort kamen nie an. */
  font-weight: 700;
  font-size: clamp(72px, 12vw, 168px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-align: center;
  color: #F3F1F0;
  margin: 0 auto clamp(80px, 10vw, 128px);
  max-width: 20ch;}
.footer__actions{display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 24px;
  max-width: 980px;
  margin: 0 auto clamp(88px, 10vw, 140px);}
.f-action{display: grid;
  justify-items: center;
  align-content: start;
  gap: 16px;
  padding: 8px 4px;
  color: #F3F1F0;
  text-align: center;
  transition: transform var(--dur-fast) var(--ease);}
.f-action:hover{transform: translateY(-3px);}
.f-action__icon{width: 44px; height: 44px;
  display: grid; place-items: center;
  color: #F3F1F0;}
.f-action__icon svg{width: 100%; height: 100%; stroke: #F3F1F0; stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round;}
.f-action__label{font-size: 14px; font-weight: 500; color: rgba(243,241,240,0.9); letter-spacing: 0.01em;}
.f-action__value{font-size: 13px; color: rgba(243,241,240,0.55);}
@media (min-width: 720px){.footer__actions{grid-template-columns: repeat(4, minmax(0, 1fr));}}
.footer__meta{max-width: var(--max);
  margin: 0 auto;
  padding: 32px var(--gutter) 0;
  border-top: 1px solid rgba(243,241,240,0.14);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  gap: 16px 24px;
  color: rgba(243,241,240,0.5);
  font-size: 12px;
  letter-spacing: 0.02em;}
.footer__meta a{color: rgba(243,241,240,0.7);}
.footer__meta a:hover,.footer__meta a:focus-visible{color: #F3F1F0;}
.footer__meta .brand{justify-self: start; display: block; line-height: 0;}
.footer__meta .brand svg{height: 20px;}
.footer__meta .brand svg path{fill: #F3F1F0;}
.footer__jahr{justify-self: center; white-space: nowrap;}
@media (min-width: 720px) and (max-width: 1099px){.footer__meta{grid-template-columns: auto minmax(0, 1fr);}
.footer__jahr{justify-self: end;}}
@media (max-width: 719px){.footer__meta{grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 18px;}
.footer__jahr{justify-self: start; justify-content: flex-start;}}
.brand__mark{transform-box: fill-box; transform-origin: center;}
[data-fuss-marke].is-gruss .brand__mark{animation: fuss-atem 1400ms var(--ease);}
[data-fuss-marke].is-gruss .brand__mark > g{animation: fuss-gold 1400ms var(--ease);}
@keyframes fuss-atem{
  0%   { transform: scale(1); }
  40%  { transform: scale(1.025); }
  100% { transform: scale(1); }
}
@keyframes fuss-gold{
  0%   { opacity: 0.6; }
  40%  { opacity: 0.95; }
  100% { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce){[data-fuss-marke].is-gruss .brand__mark,[data-fuss-marke].is-gruss .brand__mark > g{animation: none;}}
@keyframes filmCycle{
  0%, 2% { opacity: 0; transform: translateY(20px); }
  6%, 30% { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(-20px); }
}
.filmvid{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.hero__actions{align-items: center;}
.filmdialog{border: none; padding: 0; background: transparent;
  max-width: min(92vw, 1100px); width: 100%;
  position: fixed; inset: 0; margin: auto;}
.filmdialog::backdrop{background: rgba(10,10,12,0.82); backdrop-filter: blur(4px);}
.filmdialog video{width: 100%; border-radius: 16px; display: block;}
.footer{--fuss-schrift: #F3F1F0;
  --fuss-leise: rgba(243, 241, 240, 0.62);
  --fuss-linie: rgba(243, 241, 240, 0.16);
  /* Die Grundfarben werden im Fußbereich umdefiniert, nicht Regel für Regel
     überschrieben. Sonst hängt jede spätere Regel, die `var(--ink)` benutzt,
     mit dunklem Text auf schwarzer Fläche fest — gemessen bei den
     Gruppenüberschriften: Kontrast 1,1:1. */
  --ink: var(--fuss-schrift);
  --ink-2: rgba(243, 241, 240, 0.86);
  --muted: var(--fuss-leise);
  --line: var(--fuss-linie);
  --line-2: rgba(243, 241, 240, 0.24);
  --canvas-2: rgba(243, 241, 240, 0.06);
  background: #0E0E11;
  color: var(--fuss-schrift);}
.footer__eyebrow{color: #4FD6E2;}
.footer__tagline{color: var(--fuss-schrift);}
.footer__glosse{color: var(--fuss-leise);}
.f-action{color: var(--fuss-schrift);}
.f-action__icon{color: var(--fuss-schrift);}
.f-action__icon svg{stroke: var(--fuss-schrift);}
.f-action__label{color: var(--fuss-schrift);}
.f-action__value{color: var(--fuss-leise);}
.footer__marke{border-top-color: var(--fuss-linie);}
.footer__marke .brand svg path{fill: var(--fuss-schrift);}
.footer__gruppe-titel{color: var(--fuss-schrift);}
.footer__gruppe a{color: var(--fuss-leise);}
.footer__gruppe a:hover,.footer__gruppe a:focus-visible{color: var(--fuss-schrift);}
.footer__gruppe{border-bottom-color: var(--fuss-linie);}
.footer__gruppe > summary::after{border-color: var(--fuss-leise);}
.footer__meta{border-top-color: var(--fuss-linie); color: var(--fuss-leise);}
.footer__meta a{color: var(--fuss-leise);}
.footer__meta a:hover,.footer__meta a:focus-visible{color: var(--fuss-schrift);}
.footer__meta .brand svg path{fill: var(--fuss-schrift);}
.footer__jahr{color: var(--fuss-leise);}
.footer a:focus-visible{outline-color: var(--fuss-schrift);}
.brand{gap: 6px; color: var(--ink);}
.brand{--marke-h: 34px;}
.brand svg.brand__logo{height: var(--marke-h); width: auto;}
.footer__meta .brand{color: var(--fuss-schrift);}
.footer__meta .brand{--marke-h: 30px;}
.nav-cta,a.nav-cta{font-size: 15px; padding: 11px 20px;}
@media (max-width: 860px){.brand{--marke-h: 30px;}
.header > .nav-cta{display: none;}
.header > .nav-bars{margin-inline-start: auto;}}
.sr-only{position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;}
@keyframes phoneCaret{ 50% { opacity: 0; } }
.header{justify-content: space-between;
  padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));}
.header{z-index: 100;}
.nav-bars{position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 0;
  background: transparent;
  cursor: pointer;}
.nav-bars span{display: block;
  width: 30px;
  height: 5px;
  border-radius: 3px;
  background: var(--ink);
  transition: transform 300ms var(--ease), opacity 300ms var(--ease);}
.nav-bars:hover span{background: var(--cta-text);}
.nav-bars[aria-expanded="true"] span:nth-child(1){transform: translateY(11px) rotate(45deg);}
.nav-bars[aria-expanded="true"] span:nth-child(2){opacity: 0;}
.nav-bars[aria-expanded="true"] span:nth-child(3){transform: translateY(-11px) rotate(-45deg);}
.site-menu{position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-content: center;
  gap: 16px;
  text-align: center;
  background: rgba(243, 241, 240, 0.97);
  backdrop-filter: blur(14px);}
.site-menu[hidden]{display: none;}
.site-menu nav{display: grid; gap: clamp(10px, 2.4vh, 24px);}
.site-menu nav a{font-family: var(--serif);
  font-style: normal;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.15;
  color: var(--ink);
  text-decoration: none;
  transition: color 200ms var(--ease);}
.site-menu nav a:hover,.site-menu nav a:focus-visible{color: var(--cta-text);}
.site-menu > .btn{margin-top: 26px; justify-self: center;}
@media (max-width: 640px){.nav-cta{padding: 8px 12px;}
.nav-bars span{width: 26px; height: 4.5px;}}
.footer__grating{white-space: nowrap;}
.footer__grating i{font-style: normal; color: var(--accent);}
@keyframes logomarquee-scroll{
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.header{justify-content: space-between;}
.header__links{display: flex;
  align-items: center;
  gap: clamp(8px, 1.4vw, 14px);
  min-width: 0;
  /* Zentriert. Die Vorgängerfassung richtete an der Unterkante aus, weil die
     Grundlinie der Wortmarke als stabiler galt. Sie ist es nicht: der Kasten
     der Sprachwahl ist so hoch wie die Zeilenhöhe ihrer Schrift, und die ist
     je Sprache verschieden — gemessen 24,8 px auf Deutsch, 28 px auf
     Chinesisch, 30,4 px auf Arabisch. An der Unterkante ausgerichtet wandert
     die Pille dadurch in jeder Sprache anders weit nach oben.
     Der Versatz zur Schriftmitte steht jetzt an der Sprachwahl selbst und
     hängt nur noch an --marke. */
  align-items: center;
  /* Höhe der Wortmarke. Wird bei jedem Haltepunkt mitgeführt, an dem sie
     kleiner wird — deshalb stehen die Stufen hier und nicht verstreut. */
  --marke: 34px;}
@media (max-width: 860px){.header__links{--marke: 30px;}}
@media (max-width: 400px){.header__links{--marke: 25px;}}
.sprachwahl{position: relative;
  display: flex;
  align-items: center;
  transform: translateY(calc(var(--marke) * 0.075));}
.sprachwahl > summary{display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  height: calc(var(--marke) * 0.824);
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);}
.sprachwahl > summary::-webkit-details-marker{display: none;}
.sprachwahl > summary:hover{border-color: var(--ink);}
.sprachwahl > summary:focus-visible{outline: 2px solid var(--ink); outline-offset: 3px;}
.sprachwahl svg{width: 16px; height: 16px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.4;}
.sprachwahl__liste{position: absolute;
  top: calc(100% + 8px);
  /* Klappt zur Seitenmitte hin auf — der Knopf steht jetzt am linken Rand,
     eine rechtsbündige Liste liefe aus dem Bild. */
  inset-inline-start: 0;
  z-index: 60;
  min-width: 168px;
  display: grid;
  padding: 6px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--canvas);
  box-shadow: 0 18px 44px rgba(25, 25, 28, 0.12);}
.sprachwahl__liste a{padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;}
.sprachwahl__liste a:hover{background: var(--canvas-2); color: var(--ink);}
.sprachwahl__liste a:focus-visible{outline: 2px solid var(--ink); outline-offset: -2px;}
.sprachwahl__liste a[aria-current]{color: var(--ink); font-weight: 600;}
.sprachwahl__liste a[aria-current]::after{content: " ·"; color: var(--accent);}
@media (max-width: 640px){.sprachwahl > summary{padding: 0 10px; gap: 6px;}
.sprachwahl > summary span{display: inline; font-size: 12px;}
.sprachwahl svg{width: 14px; height: 14px;}}
.sprachwahl > summary::after{content: "";
  position: absolute;
  inset: calc((44px - var(--marke) * 0.824) / -2) -6px;}
@media (min-width: 861px){.sprachwahl > summary::after{content: none;}}
@media (max-width: 899px){.nav-bars{position: static;
    transform: none;
    padding: 10px;
    flex: 0 0 auto;}
.nav-bars span{width: 26px;}
.header{gap: 8px;}
.header__links{gap: 8px;}}
@media (max-width: 400px){.brand{--marke-h: 25px;}
.header__links{--marke: 25px;}
.nav-bars{padding: 9px 8px;}
.nav-bars span{width: 24px;}
.nav-cta,a.nav-cta{padding: 8px 12px;}}
.footer__tagline{font-size: clamp(44px, 9.4vw, 132px);
  letter-spacing: -0.035em;
  hyphens: none;
  max-width: none;
  margin-bottom: clamp(14px, 1.6vw, 22px);}
.footer__glosse{margin: 0 auto clamp(96px, 11vw, 152px);
  max-width: 42ch;
  text-align: center;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.5;
  color: var(--muted);}
@media (max-width: 380px){.footer__tagline{font-size: clamp(34px, 10.4vw, 44px);}}
.footer__marke{max-width: var(--max);
  margin: 0 auto;
  padding: clamp(64px, 6.5vw, 96px) var(--gutter) clamp(30px, 3.4vw, 46px);
  border-top: 1px solid var(--line);
  line-height: 0;}
.footer__marke .brand{display: inline-block;}
.footer__marke .brand{--marke-h: 30px;}
.footer__gliederung{max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(40px, 4.4vw, 64px);
  display: grid;
  gap: clamp(28px, 3.4vw, 56px);}
@media (min-width: 700px){.footer__gliederung{grid-template-columns: repeat(3, minmax(0, 1fr));}}
.footer__gruppe{display: block;}
.footer__liste{display: grid; gap: 11px;}
.footer__gruppe-titel{/* Fett und in normaler Schreibweise: Versalien mit Sperrung lasen sich als
     Etikett über der Liste, nicht als deren Überschrift. */
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);}
.footer__gruppe a{font-size: 14.5px;
  line-height: 1.35;
  color: var(--ink-2);
  text-decoration: none;
  /* Am Telefon bleibt jeder Verweis mit dem Daumen treffbar. */
  min-height: 24px;}
.footer__gruppe a:hover,.footer__gruppe a:focus-visible{color: var(--ink);}
@media (max-width: 699px){.footer__gruppe a{min-height: 40px; display: inline-flex; align-items: center;}}
.footer__meta{border-top: 0;
  padding-top: 0;
  display: flex;
  justify-content: flex-end;}
.footer__jahr{white-space: normal;
  text-align: end;}
@media (max-width: 559px){.footer__meta{justify-content: flex-start;}
.footer__jahr{text-align: start;}}
:root{/* Cyan statt Grün: Grün stammte aus der alten Farbwelt und stand nach dem
     Wechsel allein da. Schrift MUSS dunkel sein — weiß auf Cyan sind 2,1:1
     und damit unlesbar, mit Ink sind es 8,7:1. */
  --cta: #22C7D6;
  /* Cyan traegt drei Aufgaben und braucht dafuer drei Fassungen.
     --cta ist die Flaeche: darauf steht dunkle Schrift mit 8,7:1. Auf heller
     Flaeche selbst liegt dasselbe Cyan aber nur bei 1,8:1 — als Fokusring
     oder Fortschrittsbalken waere es nicht erkennbar, als Schrift unlesbar.
     Deshalb zwei Ableitungen, jede an ihrer Anforderung bemessen:
     --cta-tief erfuellt die 3:1 fuer Elemente ohne Schrift, --cta-text die
     4,5:1 fuer Schrift. Beide gegen --canvas #F3F1F0 gerechnet. */
  --cta-tief: #0E8A97;
  --cta-text: #097078;
  --cta-hover: #16B4C2;
  --cta-schrift: #151621;}
.btn--primary,.nav-cta,a.nav-cta{background: var(--cta);
  color: var(--cta-schrift) !important;}
.btn--primary:hover,.nav-cta:hover,a.nav-cta:hover{background: var(--cta-hover);}
.footer{/* Auf dem schwarzen Fuß trägt dasselbe Cyan: 9,4:1 gegen den Grund. */
  --cta: #22C7D6;
  /* Cyan traegt drei Aufgaben und braucht dafuer drei Fassungen.
     --cta ist die Flaeche: darauf steht dunkle Schrift mit 8,7:1. Auf heller
     Flaeche selbst liegt dasselbe Cyan aber nur bei 1,8:1 — als Fokusring
     oder Fortschrittsbalken waere es nicht erkennbar, als Schrift unlesbar.
     Deshalb zwei Ableitungen, jede an ihrer Anforderung bemessen:
     --cta-tief erfuellt die 3:1 fuer Elemente ohne Schrift, --cta-text die
     4,5:1 fuer Schrift. Beide gegen --canvas #F3F1F0 gerechnet. */
  --cta-tief: #0E8A97;
  --cta-text: #097078;
  --cta-hover: #4FD6E2;
  --cta-schrift: #0E0E11;}
.brand{position: relative;}
.marke__punkt{display: inline-block;
  width: 0.30em;
  height: 0.30em;
  margin-left: 0.10em;
  border-radius: 50%;
  background: var(--cta, #22C7D6);
  vertical-align: baseline;}
.header .brand .marke__punkt{width: calc(var(--marke-h) * 0.205); height: calc(var(--marke-h) * 0.205);}
.footer .brand .marke__punkt{width: calc(var(--marke-h) * 0.205); height: calc(var(--marke-h) * 0.205);}
.site-menu nav{text-align: right; justify-items: end;}
.site-menu nav a{display: inline-flex; align-items: baseline; gap: 0.16em;}
.menue__punkt{display: inline-block;
  width: 0.16em;
  height: 0.16em;
  border-radius: 50%;
  background: var(--cta, #22C7D6);
  flex: 0 0 auto;}
.footer{padding-bottom: 40px;}
.footer__sockel{--fuss-schrift: #0E0E11;
  --fuss-leise: rgba(14, 14, 17, 0.74);
  --fuss-linie: rgba(14, 14, 17, 0.20);
  --ink: var(--fuss-schrift);
  --ink-2: rgba(14, 14, 17, 0.88);
  --muted: var(--fuss-leise);
  --line: var(--fuss-linie);
  --line-2: rgba(14, 14, 17, 0.28);
  --canvas-2: rgba(14, 14, 17, 0.06);
  --accent: var(--fuss-schrift);
  position: relative;
  margin-top: clamp(80px, 9vw, 130px);
  margin-bottom: -40px;   /* füllt die Fußpolsterung bis zur Seitenkante */
  padding-bottom: 40px;
  background: #22C7D6;
  color: var(--fuss-schrift);}
.footer__sockel .footer__marke{border-top: 0; padding-top: clamp(20px, 2.4vw, 34px);}
.footer__sockel .footer__meta{border-top-color: var(--fuss-linie);}
.footer__sockel .footer__grating i{color: var(--fuss-schrift);}
.footer__sockel a:focus-visible{outline-color: var(--fuss-schrift);}
.footer__sockel .marke__punkt{background: var(--fuss-schrift);}
.footer__sockel .brand__zier{color: rgba(14, 14, 17, 0.55);}
.footer__marke .brand{display: inline-flex;
  align-items: flex-end;
  line-height: 1;}
.footer__marke .brand .marke__punkt{width: calc(var(--marke-h) * 0.205); height: calc(var(--marke-h) * 0.205);
  margin-bottom: calc(var(--marke-h) * 0.15);}
.welle{position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 140px;
  margin-bottom: -1px;   /* verhindert einen Haarriss an der Naht */
  overflow: hidden;
  pointer-events: none;}
.welle__lage{position: absolute;
  inset: 0 auto 0 0;
  width: 200%; height: 100%;
  background-repeat: repeat-x;
  background-size: 50% 100%;}
.welle__lage--fern{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='none'%3E%3Cpath d='M0 81.9L10 82.4L20 83.4L30 84.7L40 86.3L50 87.9L60 89.3L70 90.4L80 91.0L90 91.1L100 90.8L110 90.1L120 89.1L130 88.0L140 87.0L150 86.3L160 86.1L170 86.3L180 87.1L190 88.3L200 89.8L210 91.5L220 93.1L230 94.6L240 95.6L250 96.1L260 95.9L270 95.2L280 93.9L290 92.2L300 90.3L310 88.3L320 86.5L330 85.0L340 83.9L350 83.2L360 82.8L370 82.7L380 82.8L390 82.8L400 82.5L410 81.9L420 80.7L430 78.9L440 76.5L450 73.6L460 70.3L470 66.8L480 63.4L490 60.2L500 57.4L510 55.1L520 53.3L530 52.1L540 51.4L550 51.0L560 50.7L570 50.5L580 50.0L590 49.2L600 48.0L610 46.4L620 44.5L630 42.4L640 40.3L650 38.3L660 36.7L670 35.7L680 35.2L690 35.5L700 36.5L710 38.0L720 39.9L730 42.1L740 44.4L750 46.5L760 48.3L770 49.7L780 50.7L790 51.3L800 51.6L810 51.7L820 52.0L830 52.4L840 53.2L850 54.6L860 56.4L870 58.8L880 61.6L890 64.6L900 67.8L910 70.8L920 73.6L930 75.9L940 77.6L950 78.6L960 79.2L970 79.2L980 79.0L990 78.6L1000 78.2L1010 78.1L1020 78.3L1030 79.0L1040 80.1L1050 81.6L1060 83.4L1070 85.2L1080 86.9L1090 88.3L1100 89.2L1110 89.7L1120 89.5L1130 88.9L1140 87.8L1150 86.4L1160 84.9L1170 83.6L1180 82.5L1190 82.0L1200 81.9L1200 140L0 140Z' fill='%2312707A'/%3E%3C/svg%3E");}
.welle__lage--mitt{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='none'%3E%3Cpath d='M0 62.9L10 63.5L20 63.9L30 64.4L40 64.7L50 65.0L60 65.3L70 65.5L80 65.7L90 65.8L100 66.0L110 66.1L120 66.3L130 66.5L140 66.7L150 66.9L160 67.2L170 67.5L180 67.8L190 68.1L200 68.4L210 68.6L220 68.8L230 69.0L240 69.1L250 69.2L260 69.2L270 69.1L280 69.0L290 68.8L300 68.7L310 68.6L320 68.5L330 68.6L340 68.8L350 69.1L360 69.6L370 70.4L380 71.4L390 72.7L400 74.3L410 76.2L420 78.3L430 80.7L440 83.3L450 86.1L460 89.0L470 92.0L480 95.1L490 98.0L500 100.8L510 103.5L520 105.9L530 107.9L540 109.6L550 110.9L560 111.8L570 112.2L580 112.1L590 111.6L600 110.7L610 109.3L620 107.7L630 105.7L640 103.6L650 101.3L660 99.0L670 96.7L680 94.5L690 92.5L700 90.8L710 89.4L720 88.3L730 87.6L740 87.3L750 87.5L760 88.0L770 88.9L780 90.1L790 91.6L800 93.3L810 95.1L820 97.0L830 98.8L840 100.5L850 102.1L860 103.4L870 104.3L880 104.9L890 105.1L900 104.9L910 104.2L920 103.1L930 101.5L940 99.5L950 97.2L960 94.6L970 91.8L980 88.7L990 85.6L1000 82.4L1010 79.3L1020 76.2L1030 73.4L1040 70.7L1050 68.3L1060 66.2L1070 64.4L1080 62.9L1090 61.7L1100 60.8L1110 60.2L1120 59.9L1130 59.9L1140 60.0L1150 60.3L1160 60.7L1170 61.2L1180 61.8L1190 62.4L1200 62.9L1200 140L0 140Z' fill='%231AA3B0'/%3E%3C/svg%3E");}
.welle__lage--nah{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='none'%3E%3Cpath d='M0 82.7L10 82.9L20 82.9L30 82.7L40 82.2L50 81.5L60 80.6L70 79.7L80 78.8L90 77.9L100 77.3L110 76.9L120 76.9L130 77.3L140 78.1L150 79.4L160 81.1L170 83.2L180 85.7L190 88.5L200 91.5L210 94.6L220 97.7L230 100.6L240 103.4L250 105.9L260 108.1L270 110.0L280 111.5L290 112.6L300 113.4L310 113.9L320 114.3L330 114.5L340 114.6L350 114.8L360 115.1L370 115.5L380 116.1L390 116.8L400 117.8L410 118.8L420 120.0L430 121.2L440 122.3L450 123.4L460 124.1L470 124.6L480 124.7L490 124.4L500 123.6L510 122.4L520 120.7L530 118.6L540 116.1L550 113.3L560 110.4L570 107.4L580 104.4L590 101.5L600 98.8L610 96.4L620 94.4L630 92.7L640 91.4L650 90.4L660 89.8L670 89.4L680 89.3L690 89.3L700 89.3L710 89.3L720 89.1L730 88.8L740 88.3L750 87.6L760 86.7L770 85.6L780 84.3L790 82.9L800 81.6L810 80.2L820 79.1L830 78.1L840 77.5L850 77.2L860 77.3L870 77.7L880 78.5L890 79.7L900 81.1L910 82.7L920 84.4L930 86.2L940 87.8L950 89.3L960 90.5L970 91.4L980 91.9L990 92.0L1000 91.7L1010 91.0L1020 90.0L1030 88.7L1040 87.2L1050 85.7L1060 84.1L1070 82.6L1080 81.3L1090 80.2L1100 79.3L1110 78.8L1120 78.6L1130 78.7L1140 79.0L1150 79.5L1160 80.2L1170 80.9L1180 81.6L1190 82.2L1200 82.7L1200 140L0 140Z' fill='%2322C7D6'/%3E%3C/svg%3E");}
@media (prefers-reduced-motion: no-preference){@keyframes welleZug{
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }
.welle__lage--fern{animation: welleZug 41s linear infinite;}
.welle__lage--mitt{animation: welleZug 29s linear infinite;}
.welle__lage--nah{animation: welleZug 19s linear infinite;}}
@media (max-width: 700px){.welle{height: 92px;}}
.brand__zier{color: #22C7D6;}
.brand__zier{display: none;}
.header .brand,.footer__marke .brand,.of__marke{gap: 0;}
.header .brand{align-items: flex-end;}
.header .brand .marke__punkt{margin-bottom: calc(var(--marke-h) * 0.15);}
.of__marke{--marke-h: 1.45em;}
.header .brand .marke__punkt,.footer__marke .brand .marke__punkt,.of__marke .marke__punkt{margin-left: calc(var(--marke-h) * -0.034);}
@font-face{
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-var.woff2") format("woff2-variations"),
       url("/assets/fonts/figtree-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-italic-latin.woff2") format("woff2-variations"),
       url("/assets/fonts/figtree-italic-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-italic-latin-ext.woff2") format("woff2-variations"),
       url("/assets/fonts/figtree-italic-latin-ext.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root{--sans: "Figtree", Verdana, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: "Figtree", Verdana, -apple-system, "Segoe UI", system-ui, sans-serif;
  --zitat: "Newsreader", Georgia, "Times New Roman", serif;}
h1,h2,h3,.hero__title{font-weight: 700;
  letter-spacing: -0.035em;
  text-wrap: balance;
  font-style: normal;}
h3{letter-spacing: -0.02em;}
h1,.hero__title{line-height: 1.02;}
h2{line-height: 1.04;}
.stimme__text{font-family: var(--zitat); font-weight: 400; letter-spacing: -0.01em;}
.stimmen{--stimme-blau: #317093;
  --stimme-tuerkis: var(--sicht-fl, #0E8A97);
  --stimme-flaeche: var(--flaeche, #FBFAF8);
  /* Oben und unten derselbe Wert: die Sektion steht zwischen zwei fremden
     Abschnitten und darf an keine der beiden Kanten kleben. */
  padding-block: clamp(72px, 9vw, 132px);}
.stimmen__kopf{max-width: 880px; margin-bottom: clamp(34px, 4.4vw, 60px);}
.stimmen__wert{margin: 0 0 14px; line-height: 1;}
.stimmen__wert a{display: inline-flex; align-items: center; gap: clamp(14px, 2vw, 24px); flex-wrap: wrap;
  color: var(--stimme-blau);
  text-decoration: none;}
.stimmen__zahl{font-family: var(--serif, "Newsreader", Georgia, serif);
  font-size: clamp(58px, 7.5vw, 96px);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.055em;
  color: var(--ink, #19191C);}
.stimmen__wert-meta{display: grid; gap: 7px;}
.stimmen__sterne{font-size: clamp(24px, 2.8vw, 36px);
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--stimme-blau);}
.stimmen__wertung{display: block; font-size: 14px; letter-spacing: -0.01em;}
.stimmen__wertung b{font-weight: 750; font-size: 17px;}
.stimmen__wert a:hover .stimmen__wertung{text-decoration: underline; text-underline-offset: 3px;}
.stimmen__kopf h2{margin: clamp(18px, 2vw, 28px) 0 0; max-width: 18ch;}
.stimmen__liste{display: grid;
  gap: clamp(20px, 2.4vw, 32px);}
.stimmen__viewport{width: 100%;}
.stimmen[data-stimmen-slider].is-ready .stimmen__viewport{overflow: hidden;
  border-radius: 22px;}
.stimmen[data-stimmen-slider].is-ready .stimmen__liste{display: flex;
  align-items: stretch;
  gap: 0;
  transform: translate3d(calc(var(--stimmen-index, 0) * -100%), 0, 0);
  transition: transform 600ms cubic-bezier(.2, .75, .2, 1);
  will-change: transform;}
.stimmen[data-stimmen-slider].is-ready .stimme{flex: 0 0 100%;
  width: 100%;
  min-width: 100%;}
.stimmen__controls{display: none;
  align-items: center;
  gap: 10px;
  margin-top: clamp(18px, 2.2vw, 28px);}
.stimmen[data-stimmen-slider].is-ready .stimmen__controls{display: flex;}
.stimmen__pfeil{display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ink, #19191C) 24%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--ink, #19191C);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;}
.stimmen__pfeil:hover,.stimmen__pfeil:focus-visible{border-color: var(--ink, #19191C);
  background: var(--ink, #19191C);
  color: var(--stimme-flaeche, #FBFAF8);}
.stimmen__stand{min-width: 44px;
  margin: 0 4px;
  color: var(--muted, #6C6B68);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;}
.stimmen__profile{margin-left: auto;
  color: var(--ink, #19191C);
  font-size: 14px;
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;}
.stimme{--stimme-ton: var(--reference-purple, #eae7ff);
  position: relative;
  display: grid;
  grid-template-columns: clamp(250px, 33%, 430px) minmax(0, 1fr);
  align-items: end;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(28px, 3.4vw, 52px) clamp(24px, 3.2vw, 52px) 0;
  min-height: clamp(300px, 27vw, 420px);
  border-radius: 22px;
  background: var(--stimme-ton);
  overflow: hidden;}
.stimme--lila{--stimme-ton: var(--reference-purple, #eae7ff);}
.stimme--tuerkis{--stimme-ton: var(--reference-blue, #ddf8fa);}
.stimme--bild-rechts{grid-template-columns: minmax(0, 1fr) clamp(250px, 33%, 430px);}
.stimme__wort{align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 1.5vw, 20px);
  padding-block: clamp(28px, 3.4vw, 52px);}
.stimme .stimme__sterne{color: var(--stimme-tuerkis);
  font-size: clamp(22px, 2.1vw, 30px);
  letter-spacing: 0.08em;
  line-height: 1;}
.stimme__text{margin: 0;}
.stimme__text p{margin: 0;
  font-family: var(--zitat, "Newsreader", Georgia, serif);
  font-weight: 500;
  font-size: clamp(20px, 2.05vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink, #19191C);
  text-wrap: pretty;}
.stimme__text .aus{color: color-mix(in srgb, var(--ink, #19191C) 42%, transparent);}
.stimme__wer{display: block; margin-top: 0;}
.stimme__name{display: block;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink, #19191C);}
.stimme__rolle{display: block;
  margin-top: 3px;
  font-size: clamp(13px, 1vw, 14.5px);
  color: color-mix(in srgb, var(--ink, #19191C) 62%, transparent);
  line-height: 1.4;}
.stimme__bild{align-self: end; justify-self: end;}
.stimme--bild-links .stimme__bild{justify-self: start;}
.stimme__bild--tief{margin-bottom: clamp(-42px, -3.4vw, -22px);}
.stimme__bild img{display: block;
  width: 100%;
  height: auto;
  /* Die Grenze ist die Kartenhoehe, nicht die Bildbreite: beide Portraits
     haben ein anderes Seitenverhaeltnis (Herzberg fast quadratisch, Lindenthal
     hochkant). Ohne feste Hoehe waere eines doppelt so gross wie das andere. */
  max-height: clamp(280px, 26vw, 400px);
  object-fit: contain;
  object-position: bottom;}
@media (max-width: 860px){.stimme{grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-inline: clamp(20px, 5vw, 32px);
    align-items: start;}
.stimme__bild{order: -1;
    justify-self: start;
    margin-bottom: -4px;}
.stimme__bild img{max-height: 190px; width: auto;}
.stimme__wort{padding-bottom: clamp(24px, 6vw, 34px);}}
@media (max-width: 560px){.stimmen__wert a{align-items: flex-end;}
.stimmen__zahl{font-size: 64px;}
.stimmen__sterne{font-size: 22px;}
.stimmen__controls{flex-wrap: wrap;}
.stimmen__profile{flex-basis: 100%; margin: 8px 0 0;}}
@media (prefers-reduced-motion: reduce){.stimmen[data-stimmen-slider].is-ready .stimmen__liste{transition: none;}
.stimmen__pfeil{transition: none;}}
.stimme__wer:has(.stimme__portrait),.stimme__wer:has(.stimme__logo){display: flex; align-items: center; gap: 14px;}
.stimme__quelle{display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--ink-2); font-weight: 500; text-decoration: underline; text-underline-offset: 4px;}
.stimme__quelle:focus-visible{outline: 2px solid currentColor; outline-offset: 4px;}
.stimme__sterne{color: var(--stimme-blau, #317093); font-size: 15px; letter-spacing: 0.14em; line-height: 1;}
@keyframes demoCaret{ 50% { opacity: 0; } }
@keyframes demoSpin{ to { transform: rotate(360deg); } }
.team-carousel{min-height: 100%;}
.team-carousel__slide{position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 720ms var(--ease);}
.team-carousel__slide.is-active{opacity: 1;}
.team-carousel__slide img{width: 100%; height: 100%; object-fit: cover;}
.team-carousel__ui{position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  background: rgba(18,18,20,0.42);
  backdrop-filter: blur(10px);}
.team-carousel__arrow{display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;}
.team-carousel__arrow:hover{background: rgba(255,255,255,0.18);}
.team-carousel__arrow:focus-visible{background: rgba(255,255,255,0.18);
  outline: 2px solid #fff;
  outline-offset: 2px;}
.team-carousel__arrow svg{width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;}
.team-carousel__dots{display: flex; gap: 7px;}
.team-carousel__dot{width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.42);
  cursor: pointer;
  transition: transform 200ms var(--ease), background 200ms var(--ease);}
.team-carousel__dot.is-active{background: #fff; transform: scale(1.35);}
.team-carousel__dot:focus-visible{outline: 2px solid #fff; outline-offset: 2px;}
@media (prefers-reduced-motion: reduce){.team-carousel__slide{transition: none;}}
.mods__nav button{display: inline-flex; align-items: center; gap: 8px;}
@media (max-width: 760px){.mods__nav button{justify-content: flex-start;}
.team-carousel{aspect-ratio: 4 / 3; min-height: 0;}}
@keyframes acSegWin1{ 0%, 24% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes acSegWin2{ 0%, 30% { opacity: 0; } 32%, 54% { opacity: 1; } 59%, 100% { opacity: 0; } }
@keyframes acSegWin3{ 0%, 60% { opacity: 0; } 62%, 84% { opacity: 1; } 89%, 100% { opacity: 0; } }
@keyframes acDraw1{ 0%, 2% { stroke-dashoffset: 1; } 18%, 100% { stroke-dashoffset: 0; } }
@keyframes acDraw2{ 0%, 32% { stroke-dashoffset: 1; } 48%, 100% { stroke-dashoffset: 0; } }
@keyframes acDraw3{ 0%, 62% { stroke-dashoffset: 1; } 78%, 100% { stroke-dashoffset: 0; } }
@keyframes acTip1{ 0%, 16% { opacity: 0; } 19%, 100% { opacity: 1; } }
@keyframes acTip2{ 0%, 46% { opacity: 0; } 49%, 100% { opacity: 1; } }
@keyframes acTip3{ 0%, 76% { opacity: 0; } 79%, 100% { opacity: 1; } }
@keyframes acImprove{
  0%, 48% { fill: #F3F1F0; stroke: #19191C; stroke-opacity: 0.16; }
  53%, 57% { fill: #E7F2E2; stroke: #5C8A57; stroke-opacity: 0.85; }
  63%, 100% { fill: #F3F1F0; stroke: #19191C; stroke-opacity: 0.16; }
}
@keyframes acEyeBlink{
  0%, 86% { transform: scaleY(1); }
  88% { transform: scaleY(0.08); }
  90% { transform: scaleY(1); }
  92% { transform: scaleY(0.08); }
  94%, 100% { transform: scaleY(1); }
}
@keyframes hs-blink{ 50% { opacity: 0; } }
@keyframes hs-dash{ to { stroke-dashoffset: -32; } }
@keyframes hs-pay-fill{
  0%, 8%   { inset: 0 100% 0 0; }
  52%, 100% { inset: 0 0 0 0; }
}
@keyframes hs-pay-stamp{
  0%, 50%  { opacity: 0; transform: scale(1.35) rotate(-6deg); }
  58%      { opacity: 1; transform: scale(0.96) rotate(-6deg); }
  64%, 100% { opacity: 1; transform: scale(1) rotate(-6deg); }
}
@keyframes intg-links{ from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes intg-rechts{ from { transform: translateX(-50%); }   to { transform: translateX(0); } }
@media (prefers-reduced-motion: no-preference){@keyframes modal-in{ from { opacity: 0; transform: translateY(10px) scale(0.99); } }}
@media (prefers-reduced-motion: no-preference){@keyframes hspanel-in{ from { opacity: 0; transform: translateY(6px); } }}
@media (min-width: 900px){.hero{padding-top: 196px;}}
@media (prefers-reduced-motion: no-preference){@keyframes rkPuls{
    0%, 12%  { stroke: var(--accent); stroke-width: 2; }
    22%, 100% { stroke: var(--line-2); stroke-width: 1; }
  }}
.sr-only{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;}
@keyframes ellNeu{
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.es{margin-top: clamp(32px, 4vw, 56px);}
@media (min-width: 1000px){.es{display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(28px, 3vw, 52px); align-items: center;}}
@media (max-width: 899px){.hero__title{font-size: clamp(30px, 9.2vw, 48px); line-height: 1.02;}}
@media (min-width: 900px){.hero__title{font-size: clamp(32px, 3.5vw, 50px); max-width: 26ch; line-height: 1.04;}
.hero__actions{margin-top: 28px;}
.hero{align-items: start; padding-top: clamp(130px, 16vh, 180px);}}
.hero{padding-top: clamp(120px, 15vh, 170px);}
@media (min-width: 900px){.hero{display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(36px, 4vw, 68px);
    align-items: start;
    padding-top: clamp(130px, 16vh, 180px);}
.hero__title{font-size: clamp(32px, 3.5vw, 50px); max-width: 26ch; line-height: 1.04;}}