/* =========================================================================
   root.css — Design-Tokens, Reset, Typografie, Utilities
   Editorial / Technical. Haarlinien, Mono-Metadaten, eine Akzentfarbe.
   ========================================================================= */

:root {
   /* ---------- Schriften ---------- */
   --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;
   --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, monospace;

   /* ---------- Fluid Type Scale ---------- */
   --fs-display: clamp(2.6rem, 1.1rem + 7.2vw, 7rem);
   --fs-h1: clamp(1.95rem, 1.15rem + 3.6vw, 3.5rem);
   --fs-h2: clamp(1.55rem, 1.1rem + 2.1vw, 2.5rem);
   --fs-h3: clamp(1.1rem, 1rem + 0.55vw, 1.35rem);
   --fs-lead: clamp(1.02rem, 0.96rem + 0.45vw, 1.2rem);
   --fs-body: clamp(1rem, 0.97rem + 0.16vw, 1.07rem);
   --fs-sm: 0.875rem;
   --fs-xs: 0.75rem;
   --fs-micro: 0.6875rem;

   --lh-tight: 1.05;
   --lh-snug: 1.25;
   --lh-base: 1.62;
   --lh-loose: 1.75;

   --track-display: -0.025em;
   --track-tight: -0.012em;
   --track-normal: 0;
   --track-wide: 0.04em;
   --track-caps: 0.14em;

   /* ---------- Spacing ---------- */
   --sp-1: 0.25rem;
   --sp-2: 0.5rem;
   --sp-3: 0.75rem;
   --sp-4: 1rem;
   --sp-5: 1.5rem;
   --sp-6: 2rem;
   --sp-7: 3rem;
   --sp-8: 4rem;
   --sp-9: 6rem;

   --section-y: clamp(4rem, 2.2rem + 7vw, 8.5rem);
   --gutter: clamp(1.15rem, 0.6rem + 3vw, 3.5rem);
   --content-max: 1240px;
   --prose-max: 68ch;
   --header-h: 4.25rem;

   /* Kerbe oben. Die Seiten laufen mit viewport-fit=cover bis unter die
      Statusleiste, deshalb braucht der Kopf oben Luft. Auf Desktop und
      Android ist der Wert 0. --header-total ist die tatsaechliche
      Kopfhoehe und wird ueberall als Abstand benutzt. */
   --safe-top: env(safe-area-inset-top, 0px);
   --header-total: calc(var(--header-h) + var(--safe-top));

   /* ---------- Radius (klein, präzise) ---------- */
   --r-xs: 2px;
   --r-sm: 4px;
   --r-md: 8px;
   --r-lg: 14px;
   --r-pill: 999px;

   /* ---------- Motion ---------- */
   --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
   --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
   --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1);
   --t-xs: 120ms;
   --t-sm: 220ms;
   --t-md: 380ms;
   --t-lg: 640ms;
   --t-xl: 1000ms;

   /* ---------- Akzent (themenunabhängig für Canvas) ---------- */
   --accent-primary: rgb(226 116 58);
   --accent-tertiary: rgb(15 118 110);

   /* ---------- Layout-Hilfen ---------- */
   --bp-sm: 560px;
   --bp-md: 768px;
   --bp-lg: 1024px;
   --bp-xl: 1280px;

   --z-base: 1;
   --z-sticky: 40;
   --z-header: 60;
   --z-drawer: 70;
   --z-modal: 90;
   --z-grain: 120;
   --z-skip: 200;
}

/* ---------- Light: Papier ---------- */
body.light {
   --bg: #f7f5f1;
   --bg-sunken: #efece6;
   --surface: #fffefb;
   --surface-2: #f2efe9;
   --surface-hover: #fffdf9;

   --ink: #16181d;
   --ink-2: #43474f;
   --ink-3: #757a83;
   --ink-inv: #f7f5f1;

   --edge: rgba(22, 24, 29, 0.13);
   --edge-strong: rgba(22, 24, 29, 0.26);
   --edge-faint: rgba(22, 24, 29, 0.07);

   --accent: rgb(194 65 12);
   --accent-ink: rgb(255 247 243);
   --accent-tint: rgba(194, 65, 12, 0.09);
   --accent-line: rgba(194, 65, 12, 0.32);
   --ok: rgb(21 94 71);
   --warn: rgb(146 92 6);

   --shadow-sm: 0 1px 2px rgba(22, 24, 29, 0.05);
   --shadow-md: 0 4px 14px -4px rgba(22, 24, 29, 0.12);
   --shadow-lg: 0 18px 44px -20px rgba(22, 24, 29, 0.26);
   --shadow-pop: 0 26px 60px -22px rgba(22, 24, 29, 0.34);

   --grain-opacity: 0.032;
   --grid-line: rgba(22, 24, 29, 0.055);
   --header-bg: rgba(247, 245, 241, 0.82);
   /* Deckende Variante fuer Geraete ohne Weichzeichner */
   --header-solid: #f7f5f1;
   --scrim: rgba(28, 26, 22, 0.42);
}

/* ---------- Dark: Tinte ---------- */
body.dark {
   --bg: #0d0e11;
   --bg-sunken: #08090b;
   --surface: #15171b;
   --surface-2: #1b1e23;
   --surface-hover: #1f2329;

   --ink: #eceae5;
   --ink-2: #a8acb4;
   --ink-3: #747981;
   --ink-inv: #0d0e11;

   --edge: rgba(236, 234, 229, 0.12);
   --edge-strong: rgba(236, 234, 229, 0.26);
   --edge-faint: rgba(236, 234, 229, 0.06);

   --accent: rgb(240 137 82);
   --accent-ink: rgb(26 14 9);
   --accent-tint: rgba(240, 137, 82, 0.12);
   --accent-line: rgba(240, 137, 82, 0.36);
   --ok: rgb(94 191 160);
   --warn: rgb(232 178 84);

   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
   --shadow-md: 0 6px 18px -6px rgba(0, 0, 0, 0.7);
   --shadow-lg: 0 20px 48px -22px rgba(0, 0, 0, 0.85);
   --shadow-pop: 0 28px 70px -24px rgba(0, 0, 0, 0.9);

   --grain-opacity: 0.05;
   --grid-line: rgba(236, 234, 229, 0.045);
   --header-bg: rgba(13, 14, 17, 0.78);
   --header-solid: #0d0e11;
   --scrim: rgba(0, 0, 0, 0.62);
}

/* =========================================================================
   Reset
   ========================================================================= */

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

* {
   margin: 0;
}

html {
   -webkit-text-size-adjust: 100%;
   scroll-behavior: smooth;
   scrollbar-color: var(--edge-strong) transparent;
}

@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }

   *,
   *::before,
   *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
   }
}

body {
   min-height: 100svh;
   font-family: var(--font-sans);
   font-size: var(--fs-body);
   line-height: var(--lh-base);
   color: var(--ink);
   background: var(--bg);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
transition: background-color var(--t-md) var(--ease-in-out), color var(--t-md) var(--ease-in-out);

      /* Bewusst KEIN overflow-x auf body. */
      /* hidden macht body zum Scrollcontainer (hidden auf einer Achse
         zieht visible auf der anderen nach auto), und clip legt
         mindestens einen Schnittbereich an. Beides nimmt dem Kopf in
         der Kette das Haften: die Navbar bleibt dann an ihrer
         natuerlichen Stelle stehen und der Seiteninhalt laeuft bis in
         die Statusleiste durch. Das war der Fehler auf dem iPhone.
         Ueberlaeufe fangen die Bausteine selbst ab, jede Liste mit
         Rollbereich hat ein eigenes overflow-x. */

     /* Die Bildlaufleiste bleibt immer reserviert. Sonst springt die ganze
        Seite beim Oeffnen eines Fensters, weil die Leiste wegfällt. */
     scrollbar-gutter: stable;
  }

/* Vertikale Haarlinien, bündig am Content-Raster */
body::before {
   content: "";
   position: fixed;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px);
   background-size: calc(100% / 6) 100%;
   opacity: 0.9;
   transition: opacity var(--t-lg) var(--ease-in-out);
}

@media (max-width: 1024px) {
   body::before {
      background-size: calc(100% / 4) 100%;
   }
}

/* Feines Filmkorn */
body::after {
   content: "";
   position: fixed;
   /* Genau ein Bildschirm. Mit inset:-50% war die Fläche viermal so
      gross und wurde bei jedem Neuaufbauen des Hintergrunds neu
      gefuellt, ohne dass etwas sichtbar war. */
   inset: 0;
   z-index: var(--z-grain);
   pointer-events: none;
   opacity: var(--grain-opacity);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
   background-repeat: repeat;
}

img,
svg,
canvas,
video {
   display: block;
   max-width: 100%;
}

input,
button,
textarea,
select {
   font: inherit;
   color: inherit;
}

button {
   background: none;
   border: none;
   cursor: pointer;
}

a {
   color: inherit;
   text-decoration: none;
}

ul,
ol {
   list-style: none;
   padding: 0;
}

:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 3px;
   border-radius: var(--r-xs);
}

::selection {
   background: var(--accent);
   color: var(--accent-ink);
}

/* =========================================================================
   Typografie-Grundlagen
   ========================================================================= */

h1,
h2,
h3,
h4 {
   font-family: var(--font-display);
   font-weight: 400;
   line-height: var(--lh-snug);
   letter-spacing: var(--track-display);
   color: var(--ink);
   text-wrap: balance;
}

p {
   text-wrap: pretty;
}

strong {
   font-weight: 600;
   color: var(--ink);
}

code,
kbd,
samp {
   font-family: var(--font-mono);
   font-size: 0.92em;
}

hr {
   border: none;
   border-top: 1px solid var(--edge);
}

/* =========================================================================
   Layout-Primitive
   ========================================================================= */

.shell {
   width: 100%;
   max-width: var(--content-max);
   margin-inline: auto;
   padding-inline: var(--gutter);
   position: relative;
   z-index: var(--z-base);
}

main {
   display: block;
}

.section {
   padding-block: var(--section-y);
   scroll-margin-top: calc(var(--header-total) + 1.5rem);
   position: relative;
}

.section + .section {
   border-top: 1px solid var(--edge-faint);
}

/* ---------- Abschnitts-Kopf ---------- */
.section-head {
   display: grid;
   grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr);
   gap: 0 var(--gutter);
   align-items: start;
   margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.section-index {
   font-family: var(--font-mono);
   font-size: var(--fs-xs);
   line-height: 1.6;
   letter-spacing: var(--track-wide);
   color: var(--ink-3);
   padding-top: 0.55em;
   position: relative;
}

.section-index::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0.55em;
   width: 1.75rem;
   height: 1px;
   background: var(--accent);
   transition: width var(--t-md) var(--ease-out);
}

.section-head:hover .section-index::before {
   width: 2.75rem;
}

.section-title {
   font-size: var(--fs-h2);
}

.section-kicker {
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   text-transform: uppercase;
   letter-spacing: var(--track-caps);
   color: var(--ink-3);
   margin-bottom: 0.9rem;
}

.section-lead {
   font-size: var(--fs-lead);
   line-height: var(--lh-loose);
   color: var(--ink-2);
   max-width: var(--prose-max);
   margin-top: 1.1rem;
}

@media (max-width: 768px) {
   .section-head {
      grid-template-columns: 1fr;
   }

   .section-index {
      padding-top: 0;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1rem;
   }

   .section-index::before {
      position: static;
      width: 1.25rem;
   }
}

/* =========================================================================
   Komponenten
   ========================================================================= */

/* ---------- Gemeinsame Keyframes ---------- */
@keyframes flag-blink {
   0%,
   100% {
      opacity: 1;
      transform: scale(1);
   }

   50% {
      opacity: 0.35;
      transform: scale(0.7);
   }
}

/* ---------- Eyebrow / Meta-Text ---------- */
.eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 0.6rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   text-transform: uppercase;
   letter-spacing: var(--track-caps);
   color: var(--ink-3);
}

.dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--ok);
   flex: none;
   position: relative;
}

.dot::after {
   content: "";
   position: absolute;
   inset: -4px;
   border-radius: 50%;
   border: 1px solid var(--ok);
   opacity: 0;
   animation: dot-pulse 2.6s var(--ease-out) infinite;
}

@keyframes dot-pulse {
   0% {
      transform: scale(0.6);
      opacity: 0.7;
   }

   70%,
   100% {
      transform: scale(1.9);
      opacity: 0;
   }
}

/* ---------- Buttons ---------- */
.btn {
   --btn-bg: transparent;
   --btn-ink: var(--ink);
   --btn-edge: var(--edge-strong);
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.6rem;
   padding: 0.85rem 1.4rem;
   min-height: 44px;
   font-size: var(--fs-sm);
   font-weight: 500;
   letter-spacing: var(--track-tight);
   color: var(--btn-ink);
   background: var(--btn-bg);
   border: 1px solid var(--btn-edge);
   border-radius: var(--r-sm);
   cursor: pointer;
   overflow: hidden;
   isolation: isolate;
   transition: color var(--t-sm) var(--ease-out), border-color var(--t-sm) var(--ease-out),
      transform var(--t-sm) var(--ease-out), box-shadow var(--t-sm) var(--ease-out);
}

.btn::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background: var(--ink);
   transform: translateY(101%);
   transition: transform var(--t-md) var(--ease-out);
}

.btn:hover,
.btn:focus-visible {
   color: var(--ink-inv);
   border-color: var(--ink);
   transform: translateY(-2px);
}

.btn:hover::before,
.btn:focus-visible::before {
   transform: translateY(0);
}

.btn:active {
   transform: translateY(0);
}

.btn-solid {
   --btn-bg: var(--ink);
   --btn-ink: var(--ink-inv);
   --btn-edge: var(--ink);
}

.btn-solid::before {
   background: var(--accent);
}

.btn-solid:hover,
.btn-solid:focus-visible {
   color: var(--accent-ink);
   border-color: var(--accent);
}

.btn-accent {
   --btn-bg: var(--accent);
   --btn-ink: var(--accent-ink);
   --btn-edge: var(--accent);
}

.btn-accent::before {
   background: var(--ink);
}

.btn-accent:hover,
.btn-accent:focus-visible {
   color: var(--ink-inv);
   border-color: var(--ink);
}

.btn-ghost {
   padding-inline: 0.75rem;
}

.btn-arrow {
   transition: transform var(--t-sm) var(--ease-out);
}

.btn:hover .btn-arrow {
   transform: translateX(4px);
}

/* ---------- Pill / Tag ---------- */
.pill {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   padding: 0.28rem 0.7rem;
   font-family: var(--font-mono);
   font-size: var(--fs-micro);
   letter-spacing: var(--track-wide);
   color: var(--ink-2);
   background: var(--surface-2);
   border: 1px solid var(--edge);
   border-radius: var(--r-pill);
   white-space: nowrap;
   transition: color var(--t-xs) var(--ease-out), border-color var(--t-xs) var(--ease-out),
      background-color var(--t-xs) var(--ease-out);
}

.pill-accent {
   color: var(--accent);
   background: var(--accent-tint);
   border-color: var(--accent-line);
}

.pill-ok {
   color: var(--ok);
   background: color-mix(in srgb, var(--ok) 10%, transparent);
   border-color: color-mix(in srgb, var(--ok) 30%, transparent);
}

.pill-warn {
   color: var(--warn);
   background: color-mix(in srgb, var(--warn) 12%, transparent);
   border-color: color-mix(in srgb, var(--warn) 32%, transparent);
}

/* ---------- Karte ---------- */
.card {
   position: relative;
   background: var(--surface);
   border: 1px solid var(--edge);
   border-radius: var(--r-md);
   transition: border-color var(--t-sm) var(--ease-out), transform var(--t-sm) var(--ease-out),
      box-shadow var(--t-sm) var(--ease-out), background-color var(--t-sm) var(--ease-out);
}

.card-hover:hover {
   border-color: var(--edge-strong);
   background: var(--surface-hover);
   transform: translateY(-3px);
   box-shadow: var(--shadow-md);
}

/* ---------- Buttons-Icon (Icon-Only) ---------- */
.icon-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   min-height: 40px;
   padding: 0;
   color: var(--ink-2);
   background: transparent;
   border: 1px solid var(--edge);
   border-radius: var(--r-sm);
   cursor: pointer;
   transition: color var(--t-xs) var(--ease-out), border-color var(--t-xs) var(--ease-out),
      background-color var(--t-xs) var(--ease-out);
}

.icon-btn:hover {
   color: var(--ink);
   border-color: var(--edge-strong);
   background: var(--surface-2);
}

.icon-btn svg {
   width: 18px;
   height: 18px;
   stroke: currentColor;
   fill: none;
   stroke-width: 1.6;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* ---------- Skip-Link ---------- */
.skip-link {
   position: fixed;
   top: 0.6rem;
   left: 0.6rem;
   z-index: var(--z-skip);
   padding: 0.7rem 1.1rem;
   font-size: var(--fs-sm);
   color: var(--ink-inv);
   background: var(--ink);
   border-radius: var(--r-sm);
   transform: translateY(-160%);
   transition: transform var(--t-sm) var(--ease-out);
}

.skip-link:focus {
   transform: translateY(0);
}

/* ---------- Utilities ---------- */
.no-select {
   -webkit-user-select: none;
   user-select: none;
   -webkit-touch-callout: none;
}

.default-cursor {
   cursor: default;
}

.mono {
   font-family: var(--font-mono);
}

.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   overflow: hidden;
   clip-path: inset(50%);
   white-space: nowrap;
}

.hidden {
   display: none !important;
}

.lead {
   font-size: var(--fs-lead);
   line-height: var(--lh-loose);
   color: var(--ink-2);
}

.prose {
   max-width: var(--prose-max);
}

.prose p + p {
   margin-top: 1.1em;
}

.text-accent {
   color: var(--accent);
}

.link-underline {
   position: relative;
   color: var(--ink);
   background-image: linear-gradient(var(--accent), var(--accent));
   background-repeat: no-repeat;
   background-position: 0 100%;
   background-size: 100% 1px;
   padding-bottom: 1px;
   transition: color var(--t-xs) var(--ease-out), background-size var(--t-sm) var(--ease-out);
}

.link-underline:hover {
   color: var(--accent);
   background-size: 100% 2px;
}

/* =========================================================================
   Touch-Politik
   Auf Geraeten ohne Hover bleiben keine Zustaende "kleben", und alles
   Blechbare bekommt 44px, damit man nicht danebentippt.
   ========================================================================= */

html {
   -webkit-tap-highlight-color: rgba(240, 137, 82, 0.16);
   tap-highlight-color: rgba(240, 137, 82, 0.16);
   scroll-padding-top: calc(var(--header-total) + 1.25rem);
}

/* Kerben und Home-Anzeige links, rechts und unten freihalten */
body {
   padding-left: env(safe-area-inset-left);
   padding-right: env(safe-area-inset-right);
}

.site-footer {
   padding-bottom: calc(env(safe-area-inset-bottom) + var(--sp-6));
}

@media (hover: hover) and (pointer: fine) {
   /* Auf Zeigergeraeten duerfen Karten und Buttons angehoben werden */
   .btn:hover,
   .project-card:hover,
   .server-card:hover,
   .srv-discord:hover {
      transition-timing-function: var(--ease-out);
   }
}

@media (hover: none) {
   /* Kein Aufhubs-Effekt, sonst bleibt der Zustand nach dem Tippen stehen */
   .btn:hover,
   .btn:focus-visible {
      transform: none;
   }

   .project-card:hover,
   .server-card:hover,
   .srv-discord:hover,
   .brand:hover .brand__mark {
      transform: none;
   }

   .project-card:hover,
   .server-card:hover {
      box-shadow: none;
   }

   .btn:hover::before,
   .btn:focus-visible::before {
      transform: translateY(101%);
   }

   .btn:hover,
   .btn:focus-visible {
      color: var(--btn-ink);
      border-color: var(--btn-edge);
   }

   .btn-solid:hover,
   .btn-solid:focus-visible {
      color: var(--btn-ink);
      border-color: var(--btn-edge);
   }

   .btn-accent:hover,
   .btn-accent:focus-visible {
      color: var(--btn-ink);
      border-color: var(--btn-edge);
   }

   .site-nav__link:hover::after,
   .project-card:hover .card-visual__corner,
   .server-card:focus-within::before,
   .project-card:hover .card-cta svg {
      transform: scaleX(0);
      opacity: 0;
   }

   .project-card:hover .card-visual__glyph {
      transform: none;
      filter: grayscale(0.25);
   }

   .server-card:hover::before {
      transform: scaleY(0.12);
   }
}

/* Bedienbare Flaechen auf mindestens 44px bringen */
@media (pointer: coarse) {
   .theme-toggle,
   .lang__trigger,
   .icon-btn,
   .btn {
      min-height: 44px;
   }

   .chip {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
   }

   .category-btn {
      min-height: 42px;
   }

   .filter-tag button {
      width: 22px;
      height: 22px;
   }

   .lang__option {
      min-height: 44px;
   }
}

/* =========================================================================
   Transparente Oberflaechen
   Wer matte Hintergruebung abschaltet, bekommt deckende Flaechen.
   ========================================================================= */

@media (prefers-reduced-transparency: reduce) {
   .site-header.is-stuck,
   .toolbar {
      background: var(--surface);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
   }

   .badge {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
   }
}

/* =========================================================================
   Grosse Bildschirme
   UltraWide und Fernseher bekommen mehr Inhaltsbreite und ein feineres
   Raster, damit die Haarlinien nicht zu weit auseinanderfallen.
   ========================================================================= */

@media (min-width: 1600px) {
   :root {
      --content-max: 1360px;
      --section-y: clamp(5rem, 3rem + 6vw, 9.5rem);
   }

   body::before {
      background-size: calc(100% / 8) 100%;
   }
}

@media (min-width: 2000px) {
   :root {
      --content-max: 1480px;
      --section-y: clamp(6rem, 4rem + 5vw, 11rem);
      --fs-body: clamp(1.07rem, 1rem + 0.22vw, 1.19rem);
      --fs-lead: clamp(1.14rem, 1rem + 0.5vw, 1.35rem);
      /* Headlines duerfen auf grossen Displays mitwaachsen */
      --fs-display: clamp(2.6rem, 1.1rem + 7.2vw, 8.75rem);
   }

   .page-head__grid {
      background-size: calc(100% / 16) 100%;
   }
}

@media (min-width: 2800px) {
   :root {
      --content-max: 1620px;
      --gutter: clamp(3.5rem, 2rem + 1.4vw, 6rem);
      --fs-body: clamp(1.14rem, 1rem + 0.26vw, 1.32rem);
      --fs-lead: clamp(1.28rem, 1rem + 0.6vw, 1.6rem);
      --fs-display: clamp(2.6rem, 1.1rem + 7.2vw, 11rem);
      --header-h: 5rem;
   }

   body::before {
      background-size: calc(100% / 10) 100%;
   }
}

/* =========================================================================
   Reveal (Scroll-Animation)
   ========================================================================= */

/* Bis die Sprache geladen ist, bleibt die Seite unsichtbar.
   Sonst steht zuerst der deutsche Text da und springt danach auf die
   gespeicherte Sprache. Wird die Seite ohne JavaScript aufgerufen,
   greift die Regel im <noscript>-Block und alles bleibt sichtbar. */
html.is-booting body {
   visibility: hidden;
}

[data-reveal] {
   opacity: 0;
   transform: translateY(18px);
   transition: opacity var(--t-lg) var(--ease-out), transform var(--t-lg) var(--ease-out);
   transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-revealed {
   opacity: 1;
   transform: none;
}

@media (prefers-reduced-motion: reduce) {
   [data-reveal] {
      opacity: 1;
      transform: none;
   }
}