/* ============================================================
   Animations-Fassung, Stand 4 (11.11.2026) – liegt über stil.css und produkt.css
   Weniger Teile, drei starke Momente: Blende, Satz, Produkt-Bahn.
   Schwarz-Weiß bleibt, Farbe nur in Fotos und Filmen.
   ============================================================ */

/* ---------- Intro: Logo, dann öffnet sich die Kamerablende ---------- */
.intro { background: none; overflow: hidden; animation: intro-ende .01s linear 4.45s forwards; }
.intro img { position: relative; z-index: 2;
  animation: logo-rein .7s cubic-bezier(.16,1,.3,1) .05s forwards, logo-raus .3s cubic-bezier(.7,0,.84,0) 3s forwards; }
.iris { position: absolute; inset: 0; animation: iris-dreh 1.2s cubic-bezier(.7,0,.2,1) 3.2s forwards; }
.lamelle { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(calc(var(--n) * 60deg)); }
.lamelle b { position: absolute; left: -150vmax; top: 0; width: 300vmax; height: 150vmax; background: #000; border-top: 1px solid transparent;
  animation: lamelle 1.2s cubic-bezier(.7,0,.2,1) 3.2s forwards; }
@keyframes lamelle { 0% { transform: none; border-top-color: transparent; } 12% { border-top-color: rgba(255,255,255,.25); }
  100% { transform: translateY(72vmax); border-top-color: rgba(255,255,255,.25); } }
@keyframes iris-dreh { to { transform: rotate(30deg); } }
@keyframes intro-ende { to { visibility: hidden; } }

/* ---------- Kopfzeile: ruhig, bleibt stehen ---------- */
.kopf.ist-unten { background: #0a0a0a; -webkit-backdrop-filter: none; backdrop-filter: none; padding-block: 18px; box-shadow: none; }
.kopf.weg { transform: none !important; }

/* ---------- Start: nur Bild, Titel, zwei Knöpfe ---------- */
.held .sucher, .held .balken, .held-schnitt, .held-blitz, .held .lichtleck, .held-szene, .held .runter,
.held .held-unter, .held .google-plakette { display: none !important; }
.held [data-held-bilder] img { transition: none !important; will-change: clip-path, transform; }
.held .augenbraue::before { background: #fff !important; box-shadow: none !important; }
.held-pfeil { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* ---------- Der Satz: wird beim Scrollen scharf ---------- */
.schaerfe { position: relative; display: grid; align-items: center; min-height: 100vh; padding: clamp(90px, 11vw, 140px) 0; background: #fff; color: #0a0a0a; }
.schaerfe-satz { margin: 0; font: 800 clamp(34px, 6.4vw, 104px)/.94 var(--display); font-stretch: 84%;
  text-transform: uppercase; letter-spacing: -.02em; text-wrap: balance; }
.schaerfe-satz .sw { display: inline-block; will-change: opacity, filter; }
@media (max-width: 860px) {
  .schaerfe { min-height: 0; padding: 96px 0; }
  .schaerfe-satz { font-size: clamp(36px, 10.4vw, 48px); }
}

/* ---------- Showreel: randlos, öffnet sich beim Scrollen ---------- */
.werbefilm-kopf .einleitung { display: none; }
.showreel { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); height: 86vh; aspect-ratio: auto; border-radius: 0; box-shadow: none; will-change: clip-path; }
.showreel video { transition: opacity 1.2s ease; }
.showreel::after { background: linear-gradient(0deg, rgba(0,0,0,.55), transparent 38%); }
.showreel-rec, .showreel-text strong { display: none; }
.showreel-text { left: var(--rand, 24px); bottom: clamp(22px, 4vw, 48px); }
@media (max-width: 760px) { .showreel { height: auto; aspect-ratio: 4 / 5; } }

/* ---------- Filter: nur noch Text mit Strich ---------- */
.kino-filter { gap: 6px 26px; padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.kino-filter button, .kino-filter button.aktiv { padding: 8px 0; border-radius: 0; background: none; color: inherit; opacity: .45;
  box-shadow: inset 0 -1px 0 transparent; transition: opacity .3s, box-shadow .3s; }
.kino-filter button:hover { opacity: .8; }
.kino-filter button.aktiv { opacity: 1; box-shadow: inset 0 -1px 0 currentColor; }
.kino-filter [data-reiter], .kino-filter .reiter { display: none; }

/* ---------- Werbefilme: drei Spalten, Bild wird aufgezogen ---------- */
.film-text small { display: none; }
.film-karte.blende { opacity: 1; transform: none; transition: none; }
.film-karte.blende .film-bild { clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--weich); transition-delay: calc(var(--i, 0) % 3 * 80ms); }
.film-karte.blende .film-bild img { transform: scale(1.12); transition: transform 1.2s var(--weich); transition-delay: calc(var(--i, 0) % 3 * 80ms); }
.film-karte.blende .film-text > * { opacity: 0; transition: opacity .6s; transition-delay: calc(var(--i, 0) % 3 * 80ms + .15s); }
.film-karte.blende.da .film-bild { clip-path: inset(0 0 0 0); }
.film-karte.blende.da .film-bild img { transform: none; }
.film-karte.blende.da .film-text > * { opacity: 1; }
@media (min-width: 1000px) { .film-raster { grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 3vw, 44px) clamp(16px, 1.6vw, 24px); } }
@media (max-width: 760px) {
  .film-raster { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--rand, 20px) * -1); padding-inline: var(--rand, 20px); scroll-padding-inline: var(--rand, 20px); }
  .film-raster::-webkit-scrollbar { display: none; }
  .film-raster .film-karte { flex: 0 0 78vw; scroll-snap-align: start; }
}

/* ---------- Marken: nur die Namen, groß ---------- */
.marken ul { display: flex; flex-wrap: wrap; gap: .12em .55em; perspective: none; grid-template-columns: none; }
.marken li, .marken li:nth-child(n) { display: block; aspect-ratio: auto; min-height: 0; padding: 0; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none; overflow: visible; }
.marken li span { display: none; }
.marken b, .marken li:nth-child(n) b { font-size: clamp(26px, 4.3vw, 66px); line-height: 1.04; color: #fff !important; overflow-wrap: normal; white-space: nowrap; }
.marken li:nth-child(even) b { color: rgba(255,255,255,.34) !important; }
.marken li.blende { opacity: 0; transform: translateY(10px); transition: opacity .7s, transform .9s var(--weich); transition-delay: calc(var(--k, 0) * 40ms); }
.marken li.blende.da { opacity: 1; transform: none; }

/* ---------- Produkte: Bahn läuft quer (Computer) ---------- */
.bahn-fuss, .produkt-punkte { display: none; }
.produkt-kachel > span, .produkt-kachel::before { display: none !important; }
.produkte.bahn-modus { padding: 0 0 clamp(70px, 8vw, 120px); overflow: hidden; }
.bahn-modus .produkt-buehne { display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 2.4vh, 24px); height: 100vh; box-sizing: border-box; padding: 84px 0 24px; }
.bahn-modus .produkte-kopf { margin-bottom: 0; }
.bahn-modus .produkte-kopf .einleitung, .bahn-modus .produkte-kopf .augenbraue { display: none; }
.bahn-modus .produkte-kopf .titel { font-size: clamp(28px, 3vw, 48px); margin: 0; }
.bahn-modus .produkt-raster { display: flex; flex: 1 1 0; min-height: 0; width: max-content; gap: 10px; will-change: transform; }
.bahn-modus .produkt-kachel { flex: none; height: 100%; aspect-ratio: var(--ar, 1); border-radius: 2px; }
.bahn-modus .produkt-kachel.gross, .bahn-modus .produkt-kachel.breit, .bahn-modus .produkt-kachel.hoch { grid-column: auto; grid-row: auto; }
.bahn-modus .produkt-kachel img { width: 108%; max-width: none; margin-left: -4%; transition: none; }
.bahn-modus .produkt-kachel.blende { opacity: 1; transform: none; clip-path: none; transition: none; }
.bahn-modus .bahn-fuss { display: flex; align-items: center; gap: 18px; font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #0a0a0a; }
.bahn-fuss span { min-width: 22ch; }
.bahn-fuss i { flex: 1; height: 1px; background: rgba(0,0,0,.18); }
.bahn-fuss b { display: block; height: 3px; margin-top: -1px; background: #0a0a0a; transform: scaleX(0); transform-origin: 0 50%; }
.bahn-modus .produkt-aktionen { margin-top: clamp(30px, 4vw, 50px); }

/* Handy und Tablet: kleines Raster, Bilder werden aufgezogen */
.produkte:not(.bahn-modus) .produkt-kachel.blende { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--weich); transition-delay: calc(var(--i, 0) % 2 * 90ms); }
.produkte:not(.bahn-modus) .produkt-kachel.blende img { transform: scale(1.15); transition: transform 1.3s var(--weich); transition-delay: calc(var(--i, 0) % 2 * 90ms); }
.produkte:not(.bahn-modus) .produkt-kachel.blende.da { clip-path: inset(0 0 0 0); }
.produkte:not(.bahn-modus) .produkt-kachel.blende.da img { transform: none; }
.produkte:not(.bahn-modus) .produkt-kachel:nth-child(n+7) { display: none; }
.produkte:not(.bahn-modus) .produkte-kopf .einleitung { display: none; }

/* ---------- Fotos ---------- */
.fotowand figcaption { display: none; }

/* ---------- Leistungen: ruhige Spalten statt Karten ---------- */
.leistungen .karte { background: none; color: #0a0a0a; border: 0; border-top: 1px solid #0a0a0a; border-radius: 0; box-shadow: none; padding: 22px 0 0; transform: none !important; rotate: none !important; }
.leistungen .karte:hover { transform: none !important; box-shadow: none; }
.leistungen .karte-bild, .leistungen .karte ul, .leistungen .karte .klappe { display: none; }
.leistungen .karte h3 { color: #0a0a0a; }
.leistungen .karte p { color: rgba(10,10,10,.72); }
.leistungen .karte-mehr { background: none; border: 0; padding: 0; border-radius: 0; color: #0a0a0a; text-decoration: underline; text-underline-offset: 5px; }

/* ---------- Kino, Ton, 360 ---------- */
#arbeiten { --film: #fff !important; }
.rundum-hinweis { padding: 0; border: 0; background: none; border-radius: 0; }

/* ---------- Über, Werdegang, Ablauf ---------- */
.ueber-raster::before, .ueber-bild figcaption, .ueber .namen, .koennen, .tc-klein { display: none !important; }
.zahlen div { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.zahlen dt { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: #fff; }

/* ---------- Stimmen ---------- */
.stimme { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.stimme .sterne, .stimmen .zitate { display: none; }

/* ---------- Kontakt ---------- */
.klappe-tafel { display: none; }
.kontakt-wege a { padding: 16px 0; border: 0; border-top: 1px solid var(--linie); border-radius: 0; background: none; }
.kontakt-wege small { color: #9a9a9a; }
.formular { padding: 0; border: 0; border-radius: 0; background: none; }
.danke { border-radius: 0; background: #0a0a0a; }
.kontakt iframe, .karte-rahmen iframe { filter: grayscale(1); }

/* ---------- Handy: Telefonknopf dezenter ---------- */
.mobil-anruf { width: 46px; height: 46px; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .film-karte.blende .film-bild, .produkt-kachel.blende, .marken li.blende { clip-path: none !important; opacity: 1; transform: none; }
  .film-karte.blende .film-bild img, .film-karte.blende .film-text > * { opacity: 1; transform: none; }
}

/* Kein Flackern am Startbild: nur der ruhige Übergang von Schwarz-Weiß zu Farbe */
.held.glitch .held-bilder, .held.schlag .held-bilder { animation: none !important; }

/* Handy: Filter in einer Zeile, seitlich wischbar */
@media (max-width: 760px) {
  .kino-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; justify-content: flex-start; }
  .kino-filter::-webkit-scrollbar { display: none; }
  .kino-filter button { flex: none; white-space: nowrap; }
}
/* Startbild: Luft zwischen Titel und Knöpfen */
.held .held-aktionen { margin-top: 26px; }

/* Stand 6: Produktfotos kleiner und ohne Festhalten. Acht Fotos gleiten beim Vorbeiscrollen mit, alle weiteren stehen in der Fotowand. */
.bahn-modus .produkt-buehne { height: auto; padding: clamp(80px, 9vw, 130px) 0 0; gap: clamp(22px, 3vh, 34px); }
.bahn-modus .produkt-raster { flex: none; height: clamp(240px, 38vh, 380px); }
.bahn-modus .produkt-kachel:nth-child(n+9) { display: none; }
.bahn-modus .produkt-kachel img { width: 100%; margin-left: 0; }
.bahn-modus .bahn-fuss { display: none; }
@media (max-width: 760px) {
  .produkte:not(.bahn-modus) .produkt-raster { grid-auto-rows: 31vw; }
  .produkte:not(.bahn-modus) .produkt-kachel.gross, .produkte:not(.bahn-modus) .produkt-kachel.breit { grid-column: span 1; }
}

/* ================= Stand 7: mehrere Seiten ================= */
.lager { display: none !important; }
.folgeseite .kopf { background: #0a0a0a; }
.nav a[aria-current="page"]:not(.nav-knopf) { color: #fff; box-shadow: 0 2px 0 #fff; }
.seite-start .werbefilm .film-filter, .seite-start .werbefilm .film-raster { display: none; }
.start-mehr { margin: clamp(26px, 4vw, 48px) 0 0; text-align: center; }

/* Blende beim Seitenwechsel: ein Kreis öffnet und schließt das Bild */
@property --r { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
.wechsel { position: fixed; inset: 0; z-index: 9990; background: #000; pointer-events: none; visibility: hidden;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + .4%));
  mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + .4%)); }
.folgeseite .wechsel, .wieder .seite-start .wechsel { animation: wechsel-auf .95s cubic-bezier(.7, 0, .2, 1) both; }
.geht .wechsel { animation: wechsel-zu .45s cubic-bezier(.6, 0, .3, 1) both !important; }
@keyframes wechsel-auf { from { --r: 0%; visibility: visible; } to { --r: 100%; visibility: hidden; } }
@keyframes wechsel-zu { from { --r: 100%; visibility: visible; } to { --r: 0%; visibility: visible; } }
.wieder .intro { display: none; }

/* Seitenkopf: ein Wort über die ganze Breite */
.seitenkopf { background: #0a0a0a; padding: clamp(104px, 13vw, 170px) 0 0; overflow: hidden; }
.seitenwort { margin: 0; font-family: var(--display); font-weight: 800; font-size: 15vw; line-height: 1; letter-spacing: -.02em;
  font-optical-sizing: none; text-transform: uppercase; white-space: nowrap; color: #fff; overflow: hidden; padding: .08em .03em 0 0; }
.seitenwort .sw-innen { display: inline-block; will-change: transform; }
.seitenwort .b { display: inline-block; transform: translateY(115%) rotate(6deg); transform-origin: 0 100%;
  animation: wort-hoch 1s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: calc(.38s + var(--i) * .05s); }
@keyframes wort-hoch { to { transform: none; } }
.folgeseite .seitenkopf + section { padding-top: clamp(50px, 7vw, 100px); }

/* Seitenende: riesiger Link zur nächsten Seite */
.weiter { background: #0a0a0a; border-top: 1px solid var(--linie); overflow: hidden; }
.weiter-link { position: relative; display: block; padding: clamp(56px, 9vw, 130px) var(--rand) clamp(50px, 8vw, 110px); color: #fff; text-decoration: none; }
.weiter-link .augenbraue { display: block; margin-bottom: 14px; color: var(--grau); }
.weiter-link strong { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(52px, 13.5vw, 230px); line-height: .9;
  letter-spacing: -.045em; text-transform: uppercase; padding-right: 1.1em; }
.weiter-link i { position: absolute; right: var(--rand); bottom: clamp(50px, 8vw, 110px); font-style: normal; font-family: var(--display);
  font-size: clamp(44px, 9vw, 150px); line-height: .9; transition: transform .6s var(--weich); }
.weiter-link:hover i, .weiter-link:focus-visible i { transform: translateX(.18em); }

@media (prefers-reduced-motion: reduce) {
  .wechsel { display: none; }
  .seitenwort .b { transform: none; animation: none; }
}

/* Stand 8: schmale Handys */
@media (max-width: 700px) {
  .weiter-link strong { font-size: 14vw; padding-right: 0; letter-spacing: -.03em; }
  .weiter-link i { position: static; display: block; margin-top: 14px; font-size: 54px; }
}
@media (max-width: 400px) { .held-titel { font-size: 12.2vw; } }
.fuss .fuss-klein { margin-inline: auto !important; }
.offen:not(.geht) .wechsel { display: none; }
/* Stand 9: Produkte als festes Raster, Überschrift und Bilder passen zusammen auf einen Bildschirm */
@media (min-width: 1000px) {
  .produkte .produkte-kopf { margin-bottom: clamp(22px, 2.6vw, 36px); }
  .produkte .produkte-kopf > div { max-width: none; width: 100%; }
  .produkte .produkte-kopf .titel { font-size: clamp(40px, 4.6vw, 72px); max-width: none; white-space: nowrap; }
  .produkte .produkt-raster { grid-auto-rows: clamp(92px, min(9vw, 13.5vh), 136px); }
  .produkte .produkt-kachel:nth-child(6) { grid-column: span 2; }
}

/* Stand 10: das Logo lebt – zuckt in der Kopfzeile, leuchtet am Seitenende und im Fuß auf */
.kopf .marke-zeichen { transform-origin: 50% 50%; animation: logo-atmen 3.4s ease-in-out infinite; }
@keyframes logo-zucken-oft { 0%, 74%, 100% { transform: none; opacity: 1; clip-path: none; filter: none; }
  76% { transform: translateX(-3px) skewX(-10deg); clip-path: inset(0 0 55% 0); }
  80% { transform: translateX(4px) skewX(6deg); clip-path: inset(42% 0 0 0); }
  84% { transform: none; clip-path: none; opacity: .25; }
  87% { opacity: 1; filter: drop-shadow(0 0 9px rgba(255,255,255,.95)); }
  91% { opacity: .5; filter: none; }
  95% { opacity: 1; filter: drop-shadow(0 0 4px rgba(255,255,255,.7)); } }
.marke-fuss img { animation: logo-schweben 5s ease-in-out infinite; }
@keyframes logo-zucken {
  0%, 90%, 100% { transform: none; opacity: 1; clip-path: none; filter: none; }
  91% { transform: translateX(-3px) skewX(-10deg); clip-path: inset(0 0 55% 0); }
  92.5% { transform: translateX(4px) skewX(6deg); clip-path: inset(42% 0 0 0); }
  94% { transform: none; clip-path: none; opacity: .25; }
  95% { opacity: 1; filter: drop-shadow(0 0 9px rgba(255,255,255,.95)); }
  96.5% { opacity: .5; filter: none; }
  98% { opacity: 1; filter: drop-shadow(0 0 4px rgba(255,255,255,.7)); }
}
.weiter { position: relative; }
.weiter-logo { position: absolute; right: var(--rand); top: clamp(40px, 6vw, 80px); height: clamp(64px, 9vw, 132px); width: auto; pointer-events: none;
  opacity: .14; animation: logo-leuchten 6s linear 1s infinite; }
@keyframes logo-leuchten {
  0%, 52%, 100% { opacity: .14; filter: none; transform: none; }
  54% { opacity: 1; filter: drop-shadow(0 0 22px rgba(255,255,255,.75)); }
  55.5% { opacity: .2; filter: none; }
  57% { opacity: 1; filter: drop-shadow(0 0 22px rgba(255,255,255,.75)); transform: none; }
  78% { opacity: 1; filter: drop-shadow(0 0 14px rgba(255,255,255,.5)); }
  80% { opacity: .3; filter: none; }
  81.5% { opacity: .9; }
  84% { opacity: .14; }
}
@media (prefers-reduced-motion: reduce) {
  .kopf .marke-zeichen, .marke-fuss img, .weiter-logo { animation: none; }
  .weiter-logo { opacity: .5; }
}

/* Stand 11: kein Glitch mehr – das Logo bewegt sich ruhig, wird größer und kleiner */
@keyframes logo-atmen {
  0%, 100% { transform: scale(1) rotate(0deg) translateY(0); }
  30% { transform: scale(1.24) rotate(-7deg) translateY(-1px); }
  62% { transform: scale(.9) rotate(5deg) translateY(1px); }
  82% { transform: scale(1.1) rotate(-2deg) translateY(0); }
}

/* Stand 12: das Logo kommt öfter vor, jedes Mal mit einer anderen Bewegung (kein Glitch) */
@keyframes logo-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.logo-pendel { display: block; height: clamp(44px, 5.4vw, 78px); width: auto; margin: 0 0 clamp(14px, 2vw, 26px); transform-origin: 50% -30%;
  animation: logo-pendel 3.6s ease-in-out infinite; }
@keyframes logo-pendel { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
.logo-trenner { background: #0a0a0a; display: grid; place-items: center; padding: clamp(46px, 7vw, 96px) 0; overflow: hidden; perspective: 700px;
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.logo-trenner img { height: clamp(70px, 9vw, 128px); width: auto; }
.logo-dreh img { animation: logo-dreh 6s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes logo-dreh { 0%, 18% { transform: rotateY(0); } 50%, 68% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.logo-klick img { animation: logo-klick 3.2s ease-in-out infinite; }
@keyframes logo-klick { 0%, 78%, 100% { transform: none; filter: none; } 84% { transform: scale(1.08, .08); } 88% { transform: scale(1.12); filter: brightness(1.6) drop-shadow(0 0 34px #fff); } 94% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(255,255,255,.5)); } }
.logo-wippe img { animation: logo-wippe 4.4s ease-in-out infinite; }
@keyframes logo-wippe { 0%, 100% { transform: translateX(-16vw) rotate(-10deg); } 50% { transform: translateX(16vw) rotate(10deg); } }
.logo-takt img { animation: logo-takt 1.9s ease-out infinite; }
@keyframes logo-takt { 0%, 100% { transform: scale(1); } 8% { transform: scale(1.22); } 20% { transform: scale(1); } 30% { transform: scale(1.14); } 46% { transform: scale(1); } }
.logo-kreis img { animation: logo-kreis 7s linear infinite; }
@keyframes logo-kreis { from { transform: rotate(0deg) translateX(clamp(18px, 3vw, 38px)) rotate(0deg); } to { transform: rotate(360deg) translateX(clamp(18px, 3vw, 38px)) rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .logo-pendel, .logo-trenner img, .marke-fuss img { animation: none; } }

/* Stand 13: langes Seitenwort (Oliver Danckwerth) bricht am Handy in zwei Zeilen */
.seitenwort .w { display: inline-block; white-space: nowrap; }
.seitenwort.umbruch { white-space: normal; line-height: .92; }
.seitenwort.umbruch .sw-innen { display: inline-block; }
.seitenwort.umbruch .w { display: block; width: max-content; }
.seitenwort .w { padding-right: .03em; }
.kopf .nav a { white-space: nowrap; }
@media (max-width: 1060px) and (min-width: 861px) {
  .kopf .nav { gap: 14px; }
  .kopf .nav a { font-size: 13px; }
  .kopf .nav .nav-knopf { padding-inline: 14px; }
}