/* ==========================================================================
   sam's workfactory – ein Stylesheet, ein System
   1 Tokens · 2 Grundlagen · 3 Bausteine · 4 Kopf · 5 Auftritt und Einstieg
   6 Abschnitte der Startseite · 7 Schluss · 8 Unterseiten · 9 Bewegung · 10 Druck
   ========================================================================== */

@font-face { font-family: "Bagel Fat One"; src: url("../assets/fonts/bagel-fat-one-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../assets/fonts/archivo-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../assets/fonts/archivo-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../assets/fonts/archivo-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../assets/fonts/archivo-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }

/* 1 Tokens ----------------------------------------------------------------- */
:root {
  /* Farben: Magenta trägt, Aubergine schreibt, Gelb setzt Akzente */
  --magenta: #851160;
  --aubergine: #2f0422;
  --gold: #dec558;
  --weiss: #fffafc;
  --linie: rgb(47 4 34 / .16);
  --flaeche: rgb(255 250 252 / .62);
  --glanz: radial-gradient(130% 100% at 30% 10%, #f3b6dc 0%, #c2489a 16%, #851160 55%, #5a0a41 100%);
  --glanz-gelb: radial-gradient(130% 100% at 30% 10%, #fffbe3 0%, #f1dd8c 18%, #dec558 55%, #b3962b 100%);
  --buehne: radial-gradient(95% 75% at 50% 45%, rgb(133 17 96 / .1) 0%, rgb(133 17 96 / .3) 60%, rgb(133 17 96 / .46) 100%), #fff;

  /* Schrift: Blob für Titel, Archivo für alles andere */
  --font-head: "Bagel Fat One", "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-seite: clamp(3rem, 11vw, 11rem);
  --t-titel: clamp(2.6rem, 7.2vw, 7rem);
  --t-h: clamp(1.9rem, 4vw, 3.6rem);
  --t-h-klein: clamp(1.6rem, 2.6vw, 2.4rem);
  --t-satz: clamp(1.5rem, 3.1vw, 2.9rem);
  --t-lead: clamp(1.2rem, 1.8vw, 1.6rem);
  --t-text: 1.125rem;
  --t-marke: .875rem;

  /* Raum und Form */
  --rand: clamp(1rem, 2.2vw, 2.25rem);
  --innen: max(var(--rand), calc((100vw - 104rem) / 2));
  --luecke: clamp(.75rem, 1.4vw, 1.5rem);
  --abstand: clamp(4.5rem, 9vw, 9rem);
  --zeile: 4.125rem;
  --r-s: .75rem;
  --r-m: clamp(1rem, 2vw, 1.75rem);
  --r-l: clamp(1.5rem, 3.5vw, 3rem);
  --schatten: 0 1.4rem 2.4rem -1.3rem rgb(47 4 34 / .45);

  /* Bewegung: ein Tempo, eine Kurve */
  --ease: cubic-bezier(.26, 1, .48, 1);
  --dur: .5s;
  --dur-lang: .9s;
}

/* 2 Grundlagen ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--zeile); overflow-x: clip; }
body { margin: 0; font-family: var(--font-body); font-size: var(--t-text); line-height: 1.5; color: var(--aubergine); background-color: #fff; background-image: linear-gradient(180deg, rgb(133 17 96 / .07) 0%, rgb(133 17 96 / .2) 22%, rgb(133 17 96 / .34) 48%, rgb(133 17 96 / .16) 72%, rgb(133 17 96 / .3) 100%); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
figure, blockquote { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
main { position: relative; z-index: 2; }
::selection { background: var(--gold); color: var(--aubergine); }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999rem; }
.skip:focus { left: 1rem; top: 1rem; z-index: 110; padding: .6rem 1rem; background: var(--gold); border-radius: 999px; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 3 Bausteine -------------------------------------------------------------- */
/* Abschnitt: 12 Spalten, Linie oben, Etikett, grosser Titel */
.block { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--luecke); padding: var(--rand) var(--innen) var(--abstand); border-top: 1px solid var(--linie); }
.block > * { grid-column: 1 / -1; }
.marke { font-size: var(--t-marke); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.35; }
/* Etikett über jedem Abschnitt: gelb hinterlegt */
.block > .marke, .kunden .marke { justify-self: start; width: fit-content; margin-bottom: clamp(1.5rem, 4vw, 3.5rem); padding: .3em .55em .22em; background: var(--gold); color: var(--aubergine); font-size: clamp(1rem, 1.3vw, 1.25rem); font-weight: 900; letter-spacing: .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.riesig { font-family: var(--font-head); font-size: var(--t-titel); line-height: .95; padding-bottom: .1em; margin-bottom: clamp(1.5rem, 3.5vw, 3rem); }

/* Glänzende Blob-Schrift: eine Machart für alle Titel */
[data-buchstaben] .b > span, .dienste__liste h3, .modelle__raster h3, .wen__karte h3, .fall h2, .imker h2, .haltung__liste strong, .hero h1 .maske > span {
  background: var(--glanz); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 .04em 0 #3d062c) drop-shadow(0 .1em .09em rgb(47 4 34 / .3));
}

/* Unterlängen (g, y, p, j) und Umlaute: der Glanz wird nur innerhalb der Textbox gemalt, darum bekommt sie oben und unten Luft */
[data-buchstaben] .b > span, .haltung__liste strong, .hero h1 .maske > span { padding-block: .14em .32em; margin-block: -.14em -.32em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.dienste__liste h3, .modelle__raster h3, .wen__karte h3, .fall h2, .imker h2 { padding-block: .1em .3em; }
.dienste__liste h3 { margin-bottom: 0; }
.riesig, .wortmarke { overflow: visible; }

/* Link mit Pfeil und Knöpfe */
.pfeil { display: inline-flex; align-items: center; gap: .6rem; justify-self: start; font-size: var(--t-marke); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pfeil::after { content: "→"; color: var(--magenta); transition: transform var(--dur) var(--ease); }
.pfeil:hover::after { transform: translateX(.5rem); }
.knopf, .hero__knopf { display: inline-block; padding: 1rem 1.6rem; border-radius: 999px; background: var(--gold); color: var(--aubergine); font-weight: 700; box-shadow: var(--schatten); transition: background-color .2s, scale var(--dur) var(--ease); }
.knopf:hover, .hero__knopf:hover { background: var(--weiss); scale: 1.04; }
.knopf:active, .hero__knopf:active { scale: .97; }

/* Bildrahmen: runde Ecken, weicher Schatten; beim Überfahren schaut Gelb hervor */
.stapel { position: relative; display: block; }
.stapel__farbe { position: absolute; inset: 0; border-radius: var(--r-m); background: var(--gold); transition: transform var(--dur) var(--ease); }
.stapel__bild { position: relative; display: block; overflow: hidden; border-radius: var(--r-m); box-shadow: var(--schatten); transition: transform var(--dur) var(--ease); }
.stapel__bild img { width: 100%; }
.stapel__bild img.oben { object-position: 50% 0; }
@media (hover: hover) {
  a:hover .stapel__bild, .stapel:hover .stapel__bild { transform: translate(-.5rem, -.5rem); }
  a:hover .stapel__farbe, .stapel:hover .stapel__farbe { transform: translate(.5rem, .5rem); }
}
/* Plakate hängen leicht schief und richten sich beim Überfahren auf */
.plakat, .text__bild { border-radius: var(--r-m); overflow: hidden; box-shadow: var(--schatten); transition: rotate var(--dur-lang) var(--ease), translate var(--dur-lang) var(--ease); }

/* Text, der Wort für Wort auftaucht */
[data-woerter] .wort { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
[data-woerter] .wort > span { display: inline-block; }
/* Titel in einzelnen Buchstaben, die der Maus ausweichen */
[data-buchstaben] .b { display: inline-block; white-space: pre; }
[data-buchstaben] .b > span { display: inline-block; transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)) scale(var(--s, 1)); transition: transform .45s var(--ease); }
/* Link, dessen Text nach oben wegrollt */
.flip { display: inline-flex; align-items: center; overflow: hidden; }
.flip > span { display: block; overflow: hidden; height: 1.3em; line-height: 1.3; white-space: nowrap; }
.flip > span::before { content: ""; display: block; margin-top: 0; transition: margin-top var(--dur) var(--ease); }
.flip > span::after { content: attr(data-text); display: block; }
.flip:hover > span::before, .flip:focus-visible > span::before { margin-top: -1.3em; }

/* Vorhang beim Laden und beim Seitenwechsel: rosa Fläche, die Formen tanzen */
.vorhang { display: none; }
.js .vorhang { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; gap: clamp(.75rem, 3vw, 3rem); background: var(--buehne); animation: vorhang-auf .9s var(--ease) .9s both; pointer-events: none; }
.vorhang img { width: clamp(3rem, 9vw, 8rem); height: clamp(3rem, 9vw, 8rem); object-fit: contain; filter: drop-shadow(0 .6em .8em rgb(47 4 34 / .22)); animation: tanzen .9s cubic-bezier(.4, 0, .2, 1) infinite alternate; }
.vorhang img:nth-child(2) { animation-delay: -.3s; } .vorhang img:nth-child(3) { animation-delay: -.6s; } .vorhang img:nth-child(4) { animation-delay: -.15s; } .vorhang img:nth-child(5) { animation-delay: -.45s; }
.js .vorhang--zu { animation: vorhang-zu .55s var(--ease) both; pointer-events: auto; }
@keyframes vorhang-auf { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@keyframes vorhang-zu { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tanzen { from { transform: translateY(18%) rotate(-14deg) scale(.94); } to { transform: translateY(-22%) rotate(14deg) scale(1.06); } }

/* Ab und zu schwebt eine orange Form quer durchs Bild */
.schweber { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.schweber img { position: absolute; left: 0; top: 0; width: clamp(5rem, 11vw, 10rem); opacity: 0; filter: drop-shadow(0 .8rem 1rem rgb(47 4 34 / .22)); will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .schweber img:nth-child(1) { animation: schweb-a 46s linear 6s infinite; }
  .schweber img:nth-child(2) { width: clamp(3.5rem, 7vw, 6.5rem); animation: schweb-b 58s linear 24s infinite; }
  .schweber img:nth-child(3) { width: clamp(4rem, 8vw, 7.5rem); animation: schweb-c 71s linear 41s infinite; }
}
@keyframes schweb-a { 0% { opacity: 1; transform: translate(-20vw, 62vh) rotate(0deg); } 14% { transform: translate(28vw, 44vh) rotate(110deg); } 28% { transform: translate(72vw, 58vh) rotate(230deg); } 40% { opacity: 1; transform: translate(112vw, 30vh) rotate(340deg); } 40.01%, 100% { opacity: 0; transform: translate(112vw, 30vh); } }
@keyframes schweb-b { 0% { opacity: 1; transform: translate(110vw, 22vh) rotate(0deg); } 12% { transform: translate(64vw, 38vh) rotate(-120deg); } 24% { transform: translate(26vw, 20vh) rotate(-250deg); } 34% { opacity: 1; transform: translate(-18vw, 46vh) rotate(-360deg); } 34.01%, 100% { opacity: 0; transform: translate(-18vw, 46vh); } }
@keyframes schweb-c { 0% { opacity: 1; transform: translate(18vw, 110vh) rotate(0deg); } 12% { transform: translate(34vw, 62vh) rotate(90deg); } 24% { transform: translate(58vw, 28vh) rotate(190deg); } 32% { opacity: 1; transform: translate(74vw, -22vh) rotate(280deg); } 32.01%, 100% { opacity: 0; transform: translate(74vw, -22vh); } }

.schweber img:nth-child(n + 2) { display: none; }

/* Mauszeiger: aufgeblasener Pfeil, über Links in Gelb, mit Schriftzug über Cases und Einstieg */
@media (pointer: fine) {
  html { cursor: url("../assets/img/zeiger-pfeil.png") 1 0, auto; cursor: image-set(url("../assets/img/zeiger-pfeil.png") 1x, url("../assets/img/zeiger-pfeil@2x.png") 2x) 1 0, auto; }
  a, button, summary { cursor: url("../assets/img/zeiger-pfeil-link.png") 1 0, pointer; cursor: image-set(url("../assets/img/zeiger-pfeil-link.png") 1x, url("../assets/img/zeiger-pfeil-link@2x.png") 2x) 1 0, pointer; }
}
.zeiger { position: fixed; left: 0; top: 0; z-index: 50; padding: .7rem 1rem; background: var(--aubergine); border-radius: 999px; pointer-events: none; opacity: 0; scale: .6; transition: opacity .15s, scale var(--dur) var(--ease); will-change: transform; }
.zeiger img { display: none; width: auto; height: 1.5rem; }
.zeiger[data-art="case"] img[data-art="case"], .zeiger[data-art="gespraech"] img[data-art="gespraech"] { display: block; }
.zeiger[data-art="gespraech"] img { height: 2.4rem; }
.zeiger.ist-da { opacity: 1; scale: 1; }
@media (pointer: coarse) { .zeiger { display: none; } }

/* Biene unten rechts: fliegt nach oben und verliert dabei einen Honigtropfen */
.hoch { position: fixed; right: clamp(.75rem, 2vw, 2rem); bottom: clamp(.75rem, 2vw, 2rem); z-index: 30; width: clamp(3.25rem, 4.4vw, 4.25rem); cursor: pointer; opacity: 0; translate: 0 2rem; pointer-events: none; transition: opacity .3s, translate var(--dur) var(--ease); }
.hoch.ist-da { opacity: 1; translate: 0 0; pointer-events: auto; }
.hoch__biene { position: relative; display: block; filter: drop-shadow(0 .6rem .7rem rgb(47 4 34 / .3)); animation: summen 2.4s ease-in-out infinite alternate; }
.hoch__biene img { position: relative; width: 100%; }
.hoch__fluegel { position: absolute; top: -6%; left: 30%; width: 44%; height: 46%; border-radius: 60% 60% 45% 45%; background: radial-gradient(circle at 40% 35%, #fff, rgb(255 255 255 / .75)); box-shadow: inset 0 0 0 1px rgb(47 4 34 / .12); transform-origin: 40% 100%; rotate: -24deg; animation: flattern .14s linear infinite alternate; }
.hoch__fluegel + .hoch__fluegel { left: 58%; rotate: 22deg; animation-delay: -.07s; }
.hoch__topf { position: relative; display: block; width: 62%; margin: -22% auto 0 12%; overflow: visible; }
.hoch__tropfen { position: absolute; left: 39%; top: 92%; width: 16%; aspect-ratio: 1 / 1.35; border-radius: 50% 50% 50% 50% / 64% 64% 38% 38%; background: radial-gradient(circle at 38% 62%, #ffe9a6 0%, #f5a21c 45%, #c26400 100%); opacity: 0; pointer-events: none; }
@keyframes summen { from { transform: translateY(-6%) rotate(-4deg); } to { transform: translateY(6%) rotate(4deg); } }
@keyframes flattern { from { transform: scaleX(1) rotate(0deg); } to { transform: scaleX(.55) rotate(-10deg); } }
@media (hover: hover) { .hoch:hover .hoch__biene { animation-duration: .8s; } }
.hoch.fliegt { transition: translate 1.5s cubic-bezier(.5, 0, .2, 1), opacity .3s 1.2s; translate: 0 -105vh; opacity: 0; }
.hoch.fliegt .hoch__tropfen { animation: tropfen-faellt 1.3s cubic-bezier(.5, 0, .9, .5) .12s both; }
@keyframes tropfen-faellt { 0% { opacity: 0; transform: scale(.3); } 12% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: translateY(125vh) scale(.9, 1.5); } }
@media print { .hoch { display: none; } }

/* Cookie-Banner: Karte unten links, beide Knöpfe gleich gross */
.cookies { position: fixed; left: clamp(.75rem, 2vw, 2rem); bottom: clamp(.75rem, 2vw, 2rem); z-index: 60; width: min(calc(100vw - 1.5rem), 27rem); max-height: calc(100svh - 1.5rem); overflow: auto; padding: clamp(1.25rem, 2.5vw, 1.75rem); border-radius: var(--r-m); background: var(--weiss); color: var(--aubergine); box-shadow: 0 1.5rem 3rem -1rem rgb(47 4 34 / .55), 0 0 0 2px var(--aubergine); animation: cookies-auf .6s var(--ease) both; }
@keyframes cookies-auf { from { opacity: 0; translate: 0 2rem; rotate: -3deg; } }
.cookies h2 { font-family: var(--font-head); font-size: 1.6rem; line-height: 1.05; color: var(--magenta); margin-bottom: .6rem; }
.cookies p { font-size: 1rem; line-height: 1.45; }
.cookies p a { text-decoration: underline; text-underline-offset: .2em; }
.cookies details { margin-top: .9rem; }
.cookies summary { width: fit-content; font-size: var(--t-marke); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.cookies label { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; padding: .6rem 0; border-top: 1px solid var(--linie); font-size: .95rem; line-height: 1.35; cursor: pointer; }
.cookies label:first-of-type { margin-top: .7rem; }
.cookies label strong { display: block; }
.cookies input { width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--magenta); }
.cookies__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.1rem; }
.cookies button { padding: .85rem 1rem; border: 2px solid var(--aubergine); border-radius: 999px; font-weight: 700; cursor: pointer; transition: background-color .2s, color .2s, scale var(--dur) var(--ease); }
.cookies button:hover { background: var(--aubergine); color: var(--weiss); }
.cookies button:active { scale: .96; }
.cookies button[data-wahl="ja"] { background: var(--gold); }
.cookies button[data-wahl="ja"]:hover { background: var(--aubergine); }
.cookies__speichern { width: 100%; margin-top: .7rem; }
@media print { .cookies { display: none; } }

/* 4 Kopf ------------------------------------------------------------------- */
.kopf { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--zeile); display: flex; align-items: stretch; padding-inline: var(--innen); background: rgb(255 250 252 / .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linie); transition: transform var(--dur) var(--ease); }
.kopf > * { display: flex; align-items: center; }
.kopf.ist-weg, .kopf.ist-intro { transform: translateY(-100%); }
.kopf__logo { gap: .7rem; margin-right: auto; font-family: var(--font-head); font-size: 1.2rem; color: var(--magenta); }
.kopf__logo img { width: 2.6rem; height: 2.6rem; padding: .2rem; object-fit: contain; background: var(--gold); border-radius: 50%; }
.kopf .kopf__zeile, .kopf .kopf__neu, .kopf .kopf__nav { display: none; }
.kopf__zeile { padding-inline: 1.25rem; font-weight: 500; }
.kopf__zeile a { margin-left: .35em; text-decoration: underline; text-underline-offset: .2em; }
.kopf__neu { gap: .75rem; padding-inline: 1.25rem; font-weight: 500; border-left: 1px solid var(--linie); }
.kopf__neu img { width: 2.1rem; height: 2.1rem; object-fit: cover; border-radius: .4rem; }
.kopf__nav a, .kopf__menue { height: 100%; padding-inline: 1.25rem; font-size: var(--t-marke); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-left: 1px solid var(--linie); }
.kopf__nav a:hover { color: var(--magenta); }
.kopf__nav a[href$="#kontakt"] { overflow: visible; }
.kopf__nav a[href$="#kontakt"] > span { margin-inline: .5em; border-radius: 999px; background: var(--gold); box-shadow: 0 0 0 .55em var(--gold); color: var(--aubergine); }
.kopf__menue { margin-right: calc(-1 * var(--rand)); cursor: pointer; }
@media (min-width: 62rem) { .kopf .kopf__nav { display: flex; } .kopf .kopf__menue { display: none; } }
@media (min-width: 78rem) { .kopf .kopf__neu { display: flex; } }
@media (min-width: 96rem) { .kopf .kopf__zeile { display: flex; } }
@media (max-width: 24rem) { .kopf__logo span { display: none; } }

.menue, .menue[hidden] { position: fixed; inset: 0; z-index: 35; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--zeile) + 1.5rem) var(--rand) 2rem; background: var(--buehne); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path var(--dur) var(--ease), visibility 0s var(--dur); }
.menue.ist-offen { clip-path: inset(0); visibility: visible; transition-delay: 0s; }
.menue nav a { display: block; padding-block: .15em; font-family: var(--font-head); font-size: clamp(2.4rem, 11vw, 5rem); line-height: 1.15; color: var(--magenta); border-top: 1px solid var(--linie); }
.menue p { font-size: 1.2rem; font-weight: 700; line-height: 1.7; }

/* 5 Auftritt und Einstieg -------------------------------------------------- */
.intro__buehne { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .intro { position: relative; height: 230svh; }
  .js .intro .hero { position: sticky; top: 0; z-index: 1; }
  .js .intro__buehne { --p: 0; --loch: 0px; position: sticky; top: 0; z-index: 3; display: grid; place-content: center; justify-items: center; height: 100svh; margin-top: -100svh; overflow: hidden; text-align: center; background: var(--buehne);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--loch) - 1px), #000 var(--loch));
    mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--loch) - 1px), #000 var(--loch)); }
  .js .intro__buehne.ist-durch { visibility: hidden; pointer-events: none; }
}
.intro__wort { position: relative; z-index: 2; width: min(86vw, 78rem); transform: scale(calc(1 + var(--p) * 1.6)); opacity: calc(1 - (var(--p) - .32) * 5); filter: drop-shadow(0 1.2rem 1.6rem rgb(47 4 34 / .28)); will-change: transform; }
.intro__wort img { width: 100%; }
.intro__zeile, .intro__hinweis { position: relative; z-index: 2; font-size: var(--t-marke); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.intro__zeile { order: -1; margin-bottom: 1.25rem; opacity: calc(1 - var(--p) * 6); }
.intro__hinweis { position: absolute; left: 50%; bottom: 2rem; translate: -50% 0; letter-spacing: .12em; opacity: calc(1 - var(--p) * 8); }
.intro__hinweis::after { content: ""; display: block; width: 1px; height: 2.5rem; margin: .6rem auto 0; background: currentColor; transform-origin: top; animation: tropfen 1.6s var(--ease) infinite; }
@keyframes tropfen { from { transform: scaleY(0); } 60% { transform: scaleY(1); } to { transform: scaleY(1); opacity: 0; } }
.intro__form { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--g) * 1.25vmax); margin: calc(var(--g) * -.625vmax) 0 0 calc(var(--g) * -.625vmax); transform: translate(calc(var(--dx) * var(--p) * 70vw), calc(var(--dy) * var(--p) * 70vh)) scale(calc(1 + var(--p) * var(--z))) rotate(calc(var(--p) * var(--rot))); filter: drop-shadow(0 .6em .8em rgb(47 4 34 / .22)); will-change: transform; }
.intro__form img { width: 100%; animation: schweben 7s ease-in-out infinite alternate; }
.intro__form:nth-child(even) img { animation-duration: 9s; animation-direction: alternate-reverse; }
@keyframes schweben { from { transform: translateY(-4%) rotate(-5deg); } to { transform: translateY(4%) rotate(5deg); } }
.intro__weiter { position: absolute; top: var(--rand); right: var(--rand); z-index: 3; padding: .7rem 1.2rem; border: 2px solid var(--aubergine); border-radius: 999px; background: rgb(255 255 255 / .7); font-weight: 700; opacity: calc(1 - var(--p) * 3); cursor: pointer; transition: background-color .2s, color .2s; }
.intro__weiter:hover { background: var(--aubergine); color: var(--weiss); }

.kein-intro.js .intro { height: auto; }
.kein-intro.js .intro .hero { position: relative; }
.kein-intro.js .intro__buehne { display: none; }

/* Einstieg: Strassenszene mit frisch geklebten Plakaten über den ganzen Bildschirm, darunter ein dunkler Balken mit Aussage, Knöpfen und drehendem Siegel */
.hero { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100svh; min-height: 36rem; padding-top: var(--zeile); overflow: hidden; background: var(--aubergine); }
.hero__flaeche { position: relative; display: block; overflow: hidden; }
.hero__flaeche picture { position: absolute; inset: 0; }
.hero__bild { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.js .hero__bild { animation: heranfahren 2.8s var(--ease) .9s both; }
@keyframes heranfahren { from { scale: 1.18; } }
.hero__fuss { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 3rem; padding: clamp(1.25rem, 2.2vw, 2rem) var(--innen); color: var(--weiss); }
.hero__marke { margin-bottom: .6rem; font-size: clamp(.875rem, 1.15vw, 1.1rem); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; line-height: 1.35; color: var(--gold); }
.hero h1 { font-family: var(--font-head); font-size: clamp(1.9rem, 4vw, 4rem); line-height: 1; }
.hero h1 .maske { display: inline; }
.hero h1 .maske > span { background-image: linear-gradient(#fffafc, #f3cfe3); filter: drop-shadow(0 .04em 0 #5a0a41) drop-shadow(0 .1em .12em rgb(0 0 0 / .5)); }
.hero__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.hero__mehr::after { color: var(--gold); }
/* Drehendes Siegel auf der Kante zwischen Bild und Balken */
.hero__siegel { position: absolute; right: var(--innen); top: 0; z-index: 2; display: grid; place-items: center; width: clamp(6.5rem, 11vw, 10.5rem); aspect-ratio: 1; translate: 0 -62%; border-radius: 50%; background: var(--gold); color: var(--aubergine); box-shadow: 0 1.2rem 2rem -1rem rgb(0 0 0 / .7); transition: scale var(--dur) var(--ease), background-color .2s; }
.hero__siegel svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: drehen 18s linear infinite; }
.hero__siegel text { font-family: var(--font-body); font-size: 17px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; fill: currentColor; }
.hero__siegel span { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 900; line-height: 1; transition: translate var(--dur) var(--ease); }
.hero__siegel:hover { scale: 1.1; background: var(--weiss); }
.hero__siegel:hover svg { animation-duration: 6s; }
.hero__siegel:hover span { translate: .4rem 0; }
.js .hero__siegel { animation: siegel-auf .9s var(--ease) 1.9s both; }
@keyframes siegel-auf { from { opacity: 0; scale: .3; rotate: -90deg; } }
@media (max-width: 48rem) { .hero { height: auto; min-height: 100svh; } .hero__flaeche { aspect-ratio: 1000 / 1011; } .hero__bild { object-position: 50% 50%; } .hero h1 .maske { display: block; } .hero__siegel { right: var(--rand); width: 5.25rem; translate: 0 -112%; } .hero__siegel text { font-size: 19px; } }

/* Breites Bild zwischen zwei Abschnitten */
.zwischenbild { position: relative; z-index: 2; margin: 0 var(--innen) var(--abstand); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--schatten); }
.zwischenbild img { width: 100%; }

/* 6 Abschnitte der Startseite ---------------------------------------------- */
/* Aussage mit Plakat */
.text__bild { max-width: 26rem; rotate: -2deg; }
.text__bild img { width: 100%; }
.text__gross { font-size: var(--t-satz); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
.text .pfeil { margin-top: clamp(1rem, 3vw, 2.5rem); }
@media (min-width: 62rem) { .text__gross { grid-column: 1 / span 10; } }
.text .pfeil { display: none; }

/* «Kennt ihr das?»: Situationen antippen, das Ergebnis reagiert */
.check { display: grid; gap: var(--luecke); margin-top: clamp(1.5rem, 4vw, 3rem); }
.check__frage { font-size: var(--t-marke); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--magenta); }
.check__liste { display: grid; gap: .6rem; }
.check__liste label { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; padding: clamp(.9rem, 1.6vw, 1.25rem) clamp(1rem, 2vw, 1.5rem); border-radius: var(--r-s); background: var(--flaeche); box-shadow: 0 .8rem 1.4rem -1rem rgb(47 4 34 / .4); font-size: var(--t-lead); font-weight: 700; line-height: 1.25; cursor: pointer; transition: background-color .2s, color .2s, translate var(--dur) var(--ease); }
.check__liste input { appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 1.6rem; height: 1.6rem; margin: 0; border: 2px solid var(--aubergine); border-radius: 50%; background: var(--weiss); cursor: pointer; transition: background-color .2s, scale var(--dur) var(--ease); }
.check__liste input::before { content: "✓"; font-size: 1rem; font-weight: 900; color: var(--aubergine); scale: 0; transition: scale var(--dur) var(--ease); }
.check__liste input:checked { background: var(--gold); scale: 1.1; }
.check__liste input:checked::before { scale: 1; }
.check__liste label:has(input:checked) { background: var(--aubergine); color: var(--weiss); }
.check__liste label:has(input:focus-visible) { outline: 3px solid var(--magenta); outline-offset: 3px; }
@media (hover: hover) { .check__liste label:hover { translate: .4rem 0; } }
.check__ergebnis { align-self: start; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r-m); background: var(--aubergine); color: var(--weiss); box-shadow: var(--schatten); }
.check__zahl { font-size: var(--t-marke); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.check__zahl strong { display: block; font-family: var(--font-head); font-weight: 400; font-size: clamp(4rem, 9vw, 8rem); line-height: .9; letter-spacing: 0; padding-bottom: .1em; }
.check__text { margin: 1rem 0 1.5rem; font-size: var(--t-lead); font-weight: 700; line-height: 1.25; }
@media (min-width: 62rem) { .check { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .check__frage { grid-column: 1 / -1; } .check__ergebnis { position: sticky; top: calc(var(--zeile) + var(--rand)); } }

/* Logo-Karussell: runde Kärtchen, die auf dem Verlauf durchlaufen */
.kunden { margin: clamp(3rem, 7vw, 7rem) calc(-1 * var(--innen)) 0; }
.kunden .marke { margin: 0 var(--innen) 1rem; }
.kunden__band { overflow: hidden; padding-block: 1rem 2.25rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.kunden__spur { display: flex; width: max-content; animation: laufen 64s linear infinite; }
.kunden__band:hover .kunden__spur { animation-play-state: paused; }
.kunden__spur li { flex: none; display: grid; place-items: center; width: clamp(10rem, 15vw, 14rem); height: clamp(5.5rem, 8vw, 7.5rem); margin-right: var(--luecke); padding: 1rem 1.5rem; border-radius: var(--r-m); background: #fff; box-shadow: 0 1rem 1.6rem -1.1rem rgb(47 4 34 / .4); transition: translate var(--dur) var(--ease), rotate var(--dur) var(--ease); }
.kunden__spur li:nth-child(odd) { rotate: -1.5deg; } .kunden__spur li:nth-child(even) { rotate: 1.5deg; translate: 0 .5rem; }
.kunden__spur img { max-width: 100%; max-height: clamp(3rem, 5vw, 4.5rem); width: auto; object-fit: contain; filter: grayscale(1) contrast(1.15); opacity: .8; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.kunden__spur li:hover { rotate: 0deg; translate: 0 -.4rem; }
.kunden__spur li:hover img { filter: none; opacity: 1; }
@keyframes laufen { to { transform: translateX(-50%); } }

/* Arbeit: gleichmässiges Raster, alle Bilder im selben Format */
.werk__raster { display: grid; gap: clamp(2rem, 3.5vw, 3.25rem) var(--luecke); }
.karte a { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; }
.karte .stapel { grid-column: 1 / -1; margin-bottom: .9rem; }
.karte .stapel__bild img, .karte .stapel__bild img.oben { aspect-ratio: 4 / 3; object-fit: cover; }
.karte .stapel__bild img.oben { object-position: 50% 78%; }
.karte__titel, .karte__jahr { font-size: var(--t-marke); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.karte__titel { color: var(--magenta); }
.karte__jahr { font-weight: 700; opacity: .6; }
.karte__text { grid-column: 1 / -1; max-width: 34em; }
@media (min-width: 40rem) { .werk__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) {
  .werk__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .werk .riesig { grid-column: 1 / span 8; }
  .werk__alle { grid-column: 9 / -1; grid-row: 2; justify-self: end; align-self: end; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
}

/* Aussage mit Honigformen und Plakatreihe */
.titel__text { font-size: clamp(2rem, 5.2vw, 5rem); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; }
.chip { display: inline-block; width: .82em; height: .82em; margin-inline: .04em; vertical-align: -.1em; }
.chip img { width: 100%; height: 100%; object-fit: contain; animation: drehen 22s linear infinite; }
.chip:nth-of-type(even) img { animation-direction: reverse; }
@keyframes drehen { to { rotate: 360deg; } }
.titel__bild { margin-top: clamp(2rem, 5vw, 4.5rem); }
.titel__links { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; margin-top: 1.25rem; }
@media (min-width: 62rem) { .titel__text { grid-column: 1 / span 10; } .titel__bild { grid-column: 3 / -1; } .titel__links { grid-column: 3 / -1; } }

/* Entlastung: fünf Karten, versetzt, jede mit einer Honigform */
.dienste__liste { display: grid; gap: var(--luecke); }
.dienste__liste li { position: relative; padding: clamp(1.5rem, 3vw, 2.5rem); padding-right: clamp(5rem, 9vw, 8rem); border-radius: var(--r-m); background: var(--flaeche); box-shadow: var(--schatten); transition: translate var(--dur) var(--ease), rotate var(--dur) var(--ease); }
.dienste__liste h3 { font-family: var(--font-head); font-size: var(--t-h-klein); line-height: 1; margin-bottom: .35rem; }
.dienste__form { position: absolute; top: clamp(-1.5rem, -2vw, -.75rem); right: clamp(.5rem, 1.5vw, 1.25rem); width: clamp(4.5rem, 8vw, 7rem); filter: drop-shadow(0 .6rem .7rem rgb(47 4 34 / .25)); transition: rotate var(--dur-lang) var(--ease), scale var(--dur-lang) var(--ease); }
.dienste .pfeil { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 62rem) {
  .dienste__liste { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: clamp(2rem, 3.5vw, 3.25rem); }
  .dienste__liste li { grid-column: span 2; }
  .dienste__liste li:nth-child(n + 4) { grid-column: span 3; }
  .dienste__liste li:nth-child(odd) { rotate: -1deg; } .dienste__liste li:nth-child(even) { rotate: 1deg; translate: 0 .75rem; }
}
@media (hover: hover) {
  .dienste__liste li:hover { rotate: 0deg; translate: 0 -.5rem; }
  .dienste__liste li:hover .dienste__form { rotate: 25deg; scale: 1.15; }
}

/* Für wen: vier Honigbilder in gleich grossen Feldern */
.wen__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem) var(--luecke); }
.form { position: relative; display: block; aspect-ratio: 1; transition: rotate var(--dur-lang) var(--ease), scale var(--dur-lang) var(--ease); }
.form img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.wen__karte h3 { font-family: var(--font-head); font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.05; padding-bottom: .12em; margin: .25rem 0 .6rem; overflow-wrap: anywhere; }
/* Schillernde Formen: schweben, drehen sich leicht und wechseln langsam den Farbton */
.form--fluid img { filter: drop-shadow(0 1.2rem 1.2rem rgb(47 4 34 / .22)); }
@media (prefers-reduced-motion: no-preference) {
  .form--fluid img { animation: fluid-schweben 7s ease-in-out infinite alternate, fluid-schimmern 6s ease-in-out infinite alternate; }
  .wen__karte:nth-child(2) .form--fluid img { animation-duration: 8.5s, 14s; animation-delay: -2s, -4s; }
  .wen__karte:nth-child(3) .form--fluid img { animation-duration: 6.2s, 9s; animation-delay: -4s, -1s; animation-direction: alternate-reverse, normal; }
  .wen__karte:nth-child(4) .form--fluid img { animation-duration: 9s, 12s; animation-delay: -1s, -7s; }
}
@keyframes fluid-schweben { from { translate: 0 -5%; rotate: -7deg; scale: .96; } to { translate: 0 5%; rotate: 7deg; scale: 1.04; } }
@keyframes fluid-schimmern { from { filter: drop-shadow(0 1.2rem 1.2rem rgb(47 4 34 / .22)) hue-rotate(-30deg); } to { filter: drop-shadow(0 1.2rem 1.2rem rgb(47 4 34 / .22)) hue-rotate(40deg); } }
@media (hover: hover) { .wen__karte:hover .form { rotate: -8deg; scale: 1.1; } .wen__karte:hover .form--fluid img { animation-duration: 2.5s, 3s; } }
.wen__nicht { margin-top: clamp(2.5rem, 5vw, 4.5rem); padding-top: var(--rand); border-top: 1px solid var(--linie); font-size: var(--t-satz); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
.wen__nicht strong { color: var(--magenta); }
@media (min-width: 62rem) { .wen__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } .wen__nicht { grid-column: 4 / -1; } }

/* Stimmen: Rezensionen als Karten in Spalten, eine davon dunkel */
.stimmen__liste { columns: 1; column-gap: var(--luecke); }
.stimmen__liste li { break-inside: avoid; margin-bottom: var(--luecke); }
.stimme { padding: clamp(1.5rem, 2.5vw, 2.25rem); border-radius: var(--r-m); background: var(--flaeche); box-shadow: var(--schatten); transition: translate var(--dur) var(--ease), rotate var(--dur) var(--ease); }
.sterne { display: block; margin-bottom: .9rem; font-size: 1.4rem; letter-spacing: .12em; color: #c9a227; text-shadow: 0 1px 0 rgb(47 4 34 / .25); }
.stimme blockquote p { font-size: 1.125rem; line-height: 1.45; }
.stimme blockquote p + p { margin-top: .8em; }
.stimme blockquote p:first-child:not(:only-child) { font-size: var(--t-lead); font-weight: 700; line-height: 1.25; }
.stimme figcaption { display: grid; gap: .15rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.stimme figcaption strong { font-weight: 900; }
.stimme figcaption span { font-size: var(--t-marke); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--magenta); }
.stimme--dunkel { background: var(--aubergine); color: var(--weiss); }
.stimme--dunkel .sterne { color: var(--gold); text-shadow: none; }
.stimme--dunkel figcaption { border-top-color: rgb(255 250 252 / .22); }
.stimme--dunkel figcaption span { color: var(--gold); }
@media (hover: hover) { .stimme:hover { translate: 0 -.4rem; rotate: -.6deg; } }
@media (min-width: 44rem) { .stimmen__liste { columns: 2; } }
@media (min-width: 72rem) { .stimmen__liste { columns: 3; } }

/* Aufruf vor dem Schluss */
.ruf { padding-bottom: clamp(5rem, 10vw, 10rem); }
.ruf__text > p { max-width: 34em; font-size: var(--t-lead); font-weight: 500; line-height: 1.35; }
.ruf__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.ruf .riesig { margin-bottom: 0; }
.ruf__mail { display: block; margin-bottom: clamp(2rem, 5vw, 4.5rem); filter: drop-shadow(0 1rem 1.2rem rgb(47 4 34 / .25)); transition: scale var(--dur-lang) var(--ease), rotate var(--dur-lang) var(--ease); }
.ruf__mail img { width: 100%; }
@media (hover: hover) { .ruf__mail:hover { scale: 1.02; rotate: -1deg; } }
@media (min-width: 62rem) { .ruf__bild { grid-column: 1 / span 5; rotate: -2deg; } .ruf__text { grid-column: 7 / -1; align-self: center; } }

/* Zusammenarbeit: drei ruhige Karten, darunter die Vorteile */
.modelle__raster { display: grid; gap: var(--luecke); }
.modelle__raster li { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r-m); background: var(--flaeche); box-shadow: var(--schatten); transition: translate var(--dur) var(--ease); }
.modelle__raster li { position: relative; }
.modelle__symbol { position: absolute; top: clamp(-1.75rem, -2.2vw, -1rem); right: clamp(.75rem, 1.5vw, 1.5rem); width: clamp(4.5rem, 7vw, 6.5rem); height: auto; filter: drop-shadow(0 .6rem .7rem rgb(47 4 34 / .25)); transition: rotate var(--dur-lang) var(--ease), scale var(--dur-lang) var(--ease); }
@media (hover: hover) { .modelle__raster li:hover .modelle__symbol { rotate: 20deg; scale: 1.12; } }
.modelle__raster h3 { font-family: var(--font-head); font-size: var(--t-h-klein); line-height: 1; padding-bottom: .12em; margin-bottom: clamp(1.25rem, 3vw, 3rem); }
.modelle__satz { font-size: var(--t-lead); font-weight: 700; line-height: 1.2; margin-bottom: .6rem; }
@media (hover: hover) { .modelle__raster li:hover { translate: 0 -.5rem; } }
@media (min-width: 62rem) { .modelle__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.modelle__raster { margin-top: 1rem; row-gap: 2.25rem; }
.vorteile { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.vorteile li { padding: .6rem 1.1rem; border: 2px solid var(--aubergine); border-radius: 999px; font-size: var(--t-marke); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: background-color .2s; }
.vorteile li:hover { background: var(--gold); }

/* Haltung: grosses Wort gewinnt, das Gegenteil wird gelb durchgestrichen */
.haltung__liste { display: grid; gap: clamp(.25rem, 1vw, .75rem); }
.haltung__liste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .05em .45em; font-family: var(--font-head); font-size: clamp(2.2rem, 6.4vw, 6rem); line-height: 1.05; transition: translate var(--dur) var(--ease); }
.haltung__liste strong { font-weight: 400; }
.haltung__liste span { position: relative; font-family: var(--font-body); font-weight: 900; font-size: .42em; letter-spacing: -.02em; white-space: nowrap; color: var(--aubergine); }
.haltung__liste span::after { content: ""; position: absolute; left: -.2em; right: -.2em; top: 54%; height: .09em; border-radius: 999px; background: var(--magenta); transform: scaleX(0) rotate(-1.5deg); transform-origin: left; transition: transform .7s var(--ease) calc(var(--i, 0) * 110ms + .35s); }
.haltung__liste li.is-in span::after, html:not(.js) .haltung__liste span::after { transform: scaleX(1) rotate(-1.5deg); }
@media (hover: hover) { .haltung__liste li:hover { translate: 1rem 0; } }
@media (min-width: 62rem) { .haltung__liste li:nth-child(even) { padding-left: 8vw; } }
.belege { display: grid; gap: var(--luecke); margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.belege > div { padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: var(--r-m); background: var(--flaeche); box-shadow: var(--schatten); }
.belege .marke { width: fit-content; padding: .3em .55em .22em; background: var(--gold); margin-bottom: 1rem; }
.belege li { padding-block: .35rem; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.belege .pfeil { display: inline; font-size: inherit; letter-spacing: 0; text-transform: none; }
.belege .pfeil::after { display: inline-block; margin-left: .35em; }
.belege small { margin-left: .3em; vertical-align: .12em; }
.belege small { padding: .1rem .4rem; border: 1px solid var(--linie); border-radius: .3rem; font-size: .7rem; letter-spacing: .06em; }
.belege a:hover { color: var(--magenta); }
@media (min-width: 62rem) { .belege { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Fragen */
.fragen__liste details { border-top: 1px solid var(--linie); }
.fragen__liste details:last-child { border-bottom: 1px solid var(--linie); }
.fragen__liste summary { position: relative; padding: 1.1rem 3rem 1.1rem 0; font-size: var(--t-lead); font-weight: 700; line-height: 1.2; cursor: pointer; list-style: none; transition: padding-left var(--dur) var(--ease); }
.fragen__liste summary::-webkit-details-marker { display: none; }
.fragen__liste summary::after { content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%; font-size: 1.6em; font-weight: 500; color: var(--magenta); transition: rotate var(--dur) var(--ease); }
.fragen__liste details[open] summary::after { rotate: 45deg; }
.fragen__liste summary:hover { padding-left: .75rem; }
.fragen__liste details p { max-width: 42em; padding-bottom: 1.5rem; font-size: 1.125rem; }
.fragen__liste details[open] p { animation: aufklappen var(--dur) var(--ease); }
@keyframes aufklappen { from { opacity: 0; transform: translateY(-.75rem); } }
@media (min-width: 62rem) { .fragen > .marke, .fragen > .riesig { grid-column: 1 / span 5; } .fragen__liste { grid-column: 6 / -1; grid-row: 1 / span 3; } }

/* 7 Schluss ---------------------------------------------------------------- */
.fuss { position: relative; z-index: 2; overflow: hidden; background: var(--aubergine); color: var(--weiss); --linie: rgb(255 250 252 / .22); }
.fuss :focus-visible { outline-color: var(--gold); }
.ticker { overflow: hidden; background: var(--gold); color: var(--aubergine); }
.ticker__spur { display: flex; width: max-content; animation: laufen 32s linear infinite; }
.ticker__spur span { flex: none; padding: .6em 1.2em; font-size: clamp(1rem, 1.6vw, 1.4rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.ticker__spur span + span::before { content: "/"; margin-left: -1.2em; margin-right: 1.2em; opacity: .5; }
.fuss__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem) var(--luecke); padding: clamp(2rem, 5vw, 4rem) var(--innen) clamp(2.5rem, 6vw, 6rem); }
.fuss__haupt { grid-column: 1 / -1; }
.fuss .marke { color: var(--gold); margin-bottom: 1rem; }
.kopieren { display: grid; justify-items: start; gap: .75rem; text-align: left; cursor: pointer; }
.kopieren__mail { font-size: clamp(1.35rem, 3.1vw, 3.2rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; overflow-wrap: anywhere; padding-bottom: .12em; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 2px no-repeat; transition: background-size var(--dur) var(--ease); }
.kopieren:hover .kopieren__mail, .kopieren:focus-visible .kopieren__mail { background-size: 100% 2px; }
.kopieren__hinweis { font-size: var(--t-marke); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.fuss__spalte { display: grid; align-content: start; justify-items: start; gap: .35rem; padding-top: var(--rand); border-top: 1px solid var(--linie); }
.fuss__spalte a, .fuss__spalte button { font-size: 1.125rem; font-weight: 700; cursor: pointer; }
.fuss__spalte a:hover, .fuss__spalte button:hover { color: var(--gold); }
@media (min-width: 62rem) { .fuss__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); } .fuss__haupt { grid-column: 1 / span 6; padding-top: var(--rand); border-top: 1px solid var(--linie); } .fuss__spalte { grid-column: span 2; } }
.wortmarke { font-family: var(--font-head); font-size: min(9.4vw, 9.6rem); line-height: 1; white-space: nowrap; padding: 0 var(--innen) .12em; user-select: none; }
.fuss [data-buchstaben] .b > span { background-image: var(--glanz-gelb); filter: drop-shadow(0 .04em 0 #8a7420) drop-shadow(0 .1em .1em rgb(0 0 0 / .4)); }
.fuss__klein { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 2rem; padding: var(--rand) var(--innen); border-top: 1px solid var(--linie); font-size: var(--t-marke); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fuss__klein > span { opacity: .6; }

/* 8 Unterseiten ------------------------------------------------------------ */
.unter main { padding-top: var(--zeile); }
.seitenkopf { border-top: 0; padding-top: clamp(1.5rem, 4vw, 3.5rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.seitenkopf .riesig { font-size: var(--t-seite); }
.seitenkopf__text { font-size: var(--t-satz); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
@media (min-width: 62rem) { .seitenkopf__text { grid-column: 6 / -1; } }

.sprung { padding-top: 0; border-top: 0; padding-bottom: clamp(3rem, 6vw, 6rem); }
.sprung a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 2rem; padding-block: .8rem; border-top: 1px solid var(--linie); font-size: var(--t-lead); font-weight: 700; transition: padding-left var(--dur) var(--ease), color .2s; }
.sprung li:last-child a { border-bottom: 1px solid var(--linie); }
.sprung small { font-size: var(--t-marke); letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.sprung a:hover { padding-left: .75rem; color: var(--magenta); }

.fall h2, .imker h2 { font-family: var(--font-head); font-size: var(--t-h); line-height: 1.02; padding-bottom: .12em; }
.fall__sub, .imker__note { margin: 1rem 0 1.75rem; font-size: var(--t-lead); font-weight: 700; line-height: 1.2; }
.fall li { padding: .7rem 0; border-top: 1px solid var(--linie); font-size: 1.125rem; }
.fall li:last-child { border-bottom: 1px solid var(--linie); }
.fall__wirkung { margin-top: 1.75rem; font-size: 1.125rem; font-weight: 700; }
.fall__wirkung .marke, .imker__note .marke { display: block; color: var(--magenta); margin-bottom: .4rem; }
.fall .pfeil, .imker .pfeil { margin-top: 1.5rem; }
.fall__zahlen { margin: 1.75rem 0 0; }
.fall__zahlen > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; align-items: baseline; padding: .8rem 0; border-top: 1px solid var(--linie); }
.fall__zahlen dt { font-family: var(--font-head); font-size: 1.9rem; color: var(--magenta); white-space: nowrap; }
.fall__zahlen dd { margin: 0; font-size: 1.125rem; }
.fall__zahlen span { display: block; font-size: var(--t-marke); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
@media (min-width: 62rem) {
  .fall__text { grid-column: 1 / span 6; }
  .fall__bild { grid-column: 8 / -1; align-self: start; position: sticky; top: calc(var(--zeile) + var(--rand)); }
  .fall:nth-of-type(even) .fall__text { grid-column: 7 / -1; grid-row: 2; }
  .fall:nth-of-type(even) .fall__bild { grid-column: 1 / span 5; grid-row: 2; }
}

.imker h2 { font-size: var(--t-titel); }
.imker__firma { margin: .75rem 0 0; font-size: var(--t-marke); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.imker__note { padding-block: 1.25rem; border-block: 1px solid var(--linie); }
.imker__text > p:not([class]) { max-width: 36em; font-size: 1.125rem; }
@media (min-width: 62rem) {
  .imker__bild { grid-column: 1 / span 4; } .imker__text { grid-column: 6 / -1; align-self: end; }
  .imker:nth-of-type(odd) .imker__bild { grid-column: 9 / -1; grid-row: 2; } .imker:nth-of-type(odd) .imker__text { grid-column: 1 / span 7; grid-row: 2; }
}

.recht { border-top: 0; padding-top: 0; }
.recht__text { max-width: 44rem; font-size: 1.125rem; }
.recht__text h2 { margin: 2.5rem 0 .6rem; font-size: var(--t-lead); font-weight: 900; }
.recht__text p { margin-bottom: 1rem; }
.recht__text a { text-decoration: underline; text-underline-offset: .2em; }
@media (min-width: 62rem) { .recht__text { grid-column: 6 / -1; } }

/* Lebenslauf */
.block__lead { max-width: 44rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); font-size: var(--t-lead); font-weight: 700; line-height: 1.25; }
.knopf--linie { background: none; border: 2px solid var(--aubergine); box-shadow: none; cursor: pointer; }
.knopf--linie:hover { background: var(--gold); }
.profil__text > p { max-width: 40em; margin-bottom: 1.1em; font-size: var(--t-lead); line-height: 1.4; }
.profil__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.eckdaten { display: grid; gap: 0 2.5rem; margin: 2rem 0 0; }
.eckdaten > div { padding-block: .8rem; border-top: 1px solid var(--linie); }
.eckdaten dt, .tools__liste dt, .stationen__zeit { font-size: var(--t-marke); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--magenta); }
.eckdaten dd, .tools__liste dd { margin: .2rem 0 0; font-weight: 500; }
@media (min-width: 44rem) { .eckdaten { grid-template-columns: repeat(3, auto); justify-content: start; } }
@media (min-width: 62rem) { .profil__bild { grid-column: 1 / span 4; } .profil__text { grid-column: 6 / -1; align-self: center; } }

.flugplan { --spalten: repeat(6, minmax(0, 1fr)); }
.flugplan__jahre { display: none; }
.flugplan__liste > li { display: grid; gap: .6rem; padding: 1rem 0; border-top: 1px solid var(--linie); }
.flugplan__liste > li:last-child { border-bottom: 1px solid var(--linie); }
.fp__name a { font-size: 1.2rem; font-weight: 900; transition: color .2s; }
.fp__name a:hover { color: var(--magenta); }
.fp__name span { display: block; line-height: 1.4; }
.fp__name em { font-style: normal; font-size: var(--t-marke); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--magenta); }
.fp__spur { display: grid; grid-template-columns: var(--spalten); align-items: center; min-height: 1.5rem; background-image: linear-gradient(to right, var(--linie) 1px, transparent 1px); background-size: calc(100% / 6) 100%; }
.fp__spur i { height: .9rem; border-radius: 999px; background: var(--magenta); }
.fp__spur i.ende { background: transparent; border: 2px solid var(--magenta); }
@media (min-width: 62rem) {
  .flugplan__jahre, .flugplan__liste > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.5rem; }
  .flugplan__jahre { position: sticky; top: var(--zeile); z-index: 1; padding-block: .6rem; background: rgb(255 250 252 / .92); border-radius: var(--r-s); }
  .fp__jahre { display: grid; grid-template-columns: var(--spalten); font-size: var(--t-marke); font-weight: 700; letter-spacing: .08em; color: var(--magenta); }
  .fp__name em { display: none; }
  .fp__spur { min-height: 100%; }
  .flugplan__liste > li { align-items: stretch; }
}

.stationen > li { display: grid; gap: .3rem 2rem; padding: 1.4rem 0; border-top: 1px solid var(--linie); }
.stationen > li:last-child { border-bottom: 1px solid var(--linie); }
.stationen h3 { font-size: var(--t-lead); font-weight: 900; line-height: 1.2; margin-bottom: .2em; }
.stationen p { max-width: 44em; }
@media (min-width: 44rem) { .stationen > li { grid-template-columns: 10rem 1fr; align-items: baseline; } }
.schlicht li { padding: .55rem 0; border-top: 1px solid var(--linie); font-weight: 500; }
.bildung .marke:not(.block > .marke) { color: var(--magenta); margin-bottom: .8rem; }
@media (min-width: 62rem) { .bildung > div { grid-column: span 6; } }
.tools__liste { display: grid; gap: 0 var(--luecke); margin: 0; }
.tools__liste > div { padding: 1rem 0; border-top: 1px solid var(--linie); }
@media (min-width: 44rem) { .tools__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .tools__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.js .flugplan__liste > li .fp__spur i { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .15s; }
.js .flugplan__liste > li.is-in .fp__spur i { transform: none; }

/* Lebenslauf, lebendiger: Zahlen, Filter, Zeitstrahl, Reiter */

/* Wertekompass: Wert anklicken, die Nadel dreht hin, daneben steht, was er bedeutet */
.kompass__rose { display: none; }
.kompass__texte article h3 { font-family: var(--font-head); font-size: var(--t-h); line-height: 1.02; padding-block: .1em .3em; background: var(--glanz); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .04em 0 #3d062c) drop-shadow(0 .1em .09em rgb(47 4 34 / .3)); }
.kompass__texte article p { max-width: 32em; font-size: var(--t-lead); font-weight: 500; line-height: 1.4; }
.kompass__texte article + article { margin-top: 2rem; }
.kompass__wahl { display: none; }
.js .kompass__rose { position: relative; display: block; justify-self: center; width: min(100%, 30rem); aspect-ratio: 1; margin-block: 1rem 2rem; border-radius: 50%; background: radial-gradient(circle, var(--weiss) 0 34%, transparent 34.5%), repeating-conic-gradient(from -1deg, var(--aubergine) 0 2deg, transparent 2deg 15deg), var(--flaeche); box-shadow: var(--schatten), inset 0 0 0 clamp(1.6rem, 5vw, 2.6rem) var(--flaeche), inset 0 0 0 calc(clamp(1.6rem, 5vw, 2.6rem) + 2px) var(--aubergine); }
.kompass__nadel { position: absolute; left: 50%; top: 50%; width: 9%; height: 62%; translate: -50% -50%; rotate: var(--w, 0deg); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: linear-gradient(180deg, var(--magenta) 0 50%, var(--gold) 50% 100%); filter: drop-shadow(0 .4rem .5rem rgb(47 4 34 / .35)); transition: rotate 1.1s cubic-bezier(.3, 1.6, .4, 1); }
.kompass__mitte { position: absolute; left: 50%; top: 50%; width: 17%; height: auto; translate: -50% -50%; padding: 2%; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--aubergine); }
.kompass__rose button { position: absolute; left: 50%; top: 50%; translate: -50% -50%; transform: rotate(var(--a)) translateY(calc(min(100vw - 2 * var(--rand), 30rem) * -.5)) rotate(calc(var(--a) * -1)); padding: .5rem .9rem; border: 2px solid var(--aubergine); border-radius: 999px; background: var(--weiss); font-size: clamp(.7rem, 1.6vw, .875rem); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, scale var(--dur) var(--ease); }
.kompass__rose button:hover { background: var(--gold); scale: 1.08; }
.kompass__rose button.ist-an { background: var(--magenta); border-color: var(--magenta); color: var(--weiss); scale: 1.12; }
.js .kompass__wahl { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.kompass__wahl button { padding: .45rem .8rem; border: 2px solid var(--aubergine); border-radius: 999px; font-size: var(--t-marke); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background-color .2s, color .2s; }
.kompass__wahl button:hover { background: var(--gold); }
.kompass__wahl button[aria-pressed="true"] { background: var(--aubergine); color: var(--weiss); }
.js .kompass__texte article { display: none; margin-top: 0; }
.js .kompass__texte article.ist-offen { display: block; animation: aufklappen var(--dur) var(--ease); }
.warum { margin-top: clamp(2.5rem, 6vw, 5rem); padding: clamp(1.75rem, 4vw, 3.5rem); border-radius: var(--r-l); background: var(--aubergine); color: var(--weiss); box-shadow: var(--schatten); }
.warum .marke { color: var(--gold); margin-bottom: 1.25rem; }
.warum blockquote p { max-width: 38em; font-size: clamp(1.25rem, 2.2vw, 2rem); font-weight: 700; line-height: 1.22; letter-spacing: -.02em; }
.warum blockquote p + p { margin-top: 1em; }
.warum strong { color: var(--gold); }
@media (min-width: 62rem) {
  .js .kompass__rose { grid-column: 1 / span 5; margin: 2rem; justify-self: center; }
  .kompass__rose button { transform: rotate(var(--a)) translateY(-15rem) rotate(calc(var(--a) * -1)); }
  .kompass__texte { grid-column: 7 / -1; align-self: center; }
  .js .kompass__wahl { display: none; }
}
@media (max-width: 61.99rem) { .kompass__rose button { display: none; } }
@media print { .kompass__rose, .kompass__wahl { display: none !important; } .js .kompass__texte article { display: block !important; margin-top: 1rem; } .warum { background: none; color: #000; box-shadow: none; padding: 0; } }

.filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.filter button, .tools__reiter button { padding: .6rem 1.1rem; border: 2px solid var(--aubergine); border-radius: 999px; font-size: var(--t-marke); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background-color .2s, color .2s, scale var(--dur) var(--ease); }
.filter button:hover, .tools__reiter button:hover { background: var(--gold); }
.filter button[aria-pressed="true"], .tools__reiter button[aria-selected="true"] { background: var(--aubergine); color: var(--weiss); }
.filter button:active, .tools__reiter button:active { scale: .95; }
.flugplan__liste > li { transition: opacity .3s, background-color .2s; }
.flugplan__liste > li.ist-aus { display: none; }
@media (hover: hover) {
  .flugplan__liste:hover > li { opacity: .45; }
  .flugplan__liste > li:hover { opacity: 1; }
  .flugplan__liste > li:hover .fp__spur i { box-shadow: 0 0 0 4px rgb(222 197 88 / .9); }
}

/* Werdegang als Zeitstrahl: die Linie füllt sich beim Scrollen, Punkte springen an */
.stationen { position: relative; padding-left: clamp(1.75rem, 3vw, 2.75rem); }
.stationen::before, .stationen__linie { content: ""; position: absolute; left: .45rem; top: .5rem; bottom: .5rem; width: 4px; border-radius: 999px; background: var(--linie); }
.stationen__linie { background: var(--magenta); bottom: auto; height: calc((100% - 1rem) * var(--fort, 0)); transition: height .2s linear; }
.stationen > li { position: relative; border-top: 0; padding-block: clamp(1rem, 2vw, 1.5rem); cursor: default; transition: translate var(--dur) var(--ease); }
.stationen > li:last-child { border-bottom: 0; }
.stationen > li::before { content: ""; position: absolute; left: calc(-1 * clamp(1.75rem, 3vw, 2.75rem) + .45rem - .5rem + 2px); top: clamp(1.35rem, 2.4vw, 1.9rem); width: 1rem; height: 1rem; border-radius: 50%; background: var(--weiss); box-shadow: 0 0 0 3px var(--magenta); transition: background-color .3s, scale var(--dur) var(--ease); }
.stationen > li.ist-erreicht::before { background: var(--gold); scale: 1.35; }
.stationen > li.ist-erreicht h3 { color: var(--magenta); }
@media (hover: hover) { .stationen > li:hover { translate: .5rem 0; } }

/* Tools als Reiter: Kategorie wählen, die Tools ploppen als Marken auf */
.tools__reiter { display: flex; flex-wrap: wrap; gap: .5rem; }
.js .tools--reiter .tools__liste { margin-top: 1.5rem; display: block; min-height: 9rem; }
.js .tools--reiter .tools__liste > div { display: none; border: 0; padding: 0; }
.js .tools--reiter .tools__liste > div.ist-offen { display: block; }
.js .tools--reiter .tools__liste dt { display: none; }
.js .tools--reiter .tools__liste dd { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.tools__marke { padding: .7rem 1.2rem; border-radius: var(--r-s); background: var(--flaeche); box-shadow: var(--schatten); font-size: var(--t-lead); font-weight: 700; animation: aufploppen .5s var(--ease) both; animation-delay: calc(var(--i) * 45ms); transition: rotate var(--dur) var(--ease), background-color .2s; }
.tools__marke:nth-child(odd) { rotate: -1.5deg; } .tools__marke:nth-child(even) { rotate: 1.5deg; }
.tools__marke:hover { rotate: 0deg; background: var(--gold); }
@keyframes aufploppen { from { opacity: 0; transform: translateY(1rem) scale(.6); } }

/* 9 Bewegung --------------------------------------------------------------- */
.js .auf { opacity: 0; transform: translateY(2.5rem); transition: opacity .3s linear, transform var(--dur-lang) var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .auf.is-in { opacity: 1; transform: none; }
.js [data-woerter] .wort > span { transform: translateY(110%); transition: transform var(--dur-lang) var(--ease); transition-delay: calc(var(--i) * 28ms); }
.js [data-woerter].is-in .wort > span { transform: none; }
.js [data-buchstaben] .b { opacity: 0; transform: translateY(60%) rotate(8deg); transition: opacity .2s linear, transform 1s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.js [data-buchstaben].is-in .b { opacity: 1; transform: none; }
.js .karte .stapel__bild img, .js .zeig .stapel__bild img { transform: translateY(101%); transition: transform var(--dur-lang) var(--ease); }
.js .karte.is-in .stapel__bild img, .js .zeig.is-in .stapel__bild img { transform: none; }
.js .wen__karte .form img { opacity: 0; transform: scale(.5); transition: opacity .1s linear, transform var(--dur-lang) var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .wen__karte.is-in .form img { opacity: 1; transform: none; }
.js .chip { opacity: 0; transform: scale(.4); transition: opacity .1s linear, transform var(--dur) var(--ease); transition-delay: calc(var(--i, 0) * 140ms + 200ms); }
.js .titel__text.is-in .chip { opacity: 1; transform: none; }
.js .kopf { animation: von-oben var(--dur) var(--ease) 1.5s both; }
@keyframes von-oben { from { transform: translateY(-100%); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .vorhang { display: none; }
  .haltung__liste span::after { transform: scaleX(1) rotate(-1.5deg); }
  .js .auf, .js .chip, .js .wen__karte .form img, .js .stapel__bild img, .js [data-woerter] .wort > span, .js [data-buchstaben] .b, .js .flugplan__liste > li .fp__spur i { opacity: 1; transform: none; }
  .kunden__spur { flex-wrap: wrap; width: auto; } .kunden__spur [aria-hidden] { display: none; }
  .fall__bild { position: static; }
  .zeiger { display: none; }
}

/* 10 Druck ----------------------------------------------------------------- */
@media print {
  .kopf, .menue, .vorhang, .zeiger, .ticker, .schweber, .intro__buehne, .hero__flaeche, .stapel, .kunden, .plakate, .text__bild, .profil__knoepfe, .flugplan__jahre { display: none !important; }
  .block { padding-block: 1rem; } .riesig { font-size: 2rem; margin-bottom: .5rem; }
  .js .flugplan__liste > li .fp__spur i { transform: none !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .flugplan__liste > li, .stationen > li { break-inside: avoid; }
  body, .hero, .breit, .fuss { background: #fff !important; color: #000 !important; }
  .hero { height: auto; min-height: 0; padding-top: 0; } .hero__plakat, .zwischenbild { display: none; }
  .js .auf, .js .chip, .js .form img, .js [data-woerter] .wort > span, .js [data-buchstaben] .b { opacity: 1 !important; transform: none !important; }
  [data-buchstaben] .b > span, .dienste__liste h3, .modelle__raster h3, .wen__karte h3, .fall h2, .imker h2, .haltung__liste strong, .hero h1 .maske > span { background: none !important; color: #000 !important; -webkit-text-fill-color: #000 !important; filter: none !important; }
}