/*
 * Kopf, Navigation, Kontakt-Dock, Aufrufband und Fuss nach der Live-Seite
 * (Designkorrektur S0-K, Feinschliff 30.09.2026).
 *
 * Kopf: Die Logogroesse bleibt beim Scrollen unveraendert (Nutzervorgabe).
 * Startseite: Kopf liegt fest und transparent auf dem Video und bekommt beim
 * Scrollen nur die dunkle Flaeche #141422. Unterseiten: dunkle Kontaktleiste und
 * weisse Kopfleiste mit Ochsenblut-Winkel; der ganze Kopf haftet mit negativem
 * Abstand, sodass die Kontaktleiste wegscrollt und die Leiste ohne Sprung oben
 * bleibt. live.js setzt yl-scrolled am html-Element (nur Schatten und Flaeche).
 * Mobil: Menue als Seitenpanel von rechts (nav.php, nav.js).
 */

/* ------------------------------------------------------------ Masse */

:root {
  --yl-kopf-h: 88px;
  --yl-logo-h: 58px;
  --yl-top-h: 0px;
  --yl-header-h: 88px;
  /* R3 Bewegung: Schublade nach iOS-Kurve (emil-design-eng, --ease-drawer);
     Oeffnen 420 ms, Schliessen 280 ms. UI-Uebergaenge nutzen --yl-ease. */
  --yr3-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (min-width: 1024px) {
  :root { --yl-top-h: 50px; }
}

@media (min-width: 1200px) {
  :root {
    --yl-kopf-h: 122px;
    --yl-logo-h: 90px;
    --yl-header-h: 122px;
  }
}

/* Sprungziele (Inhaltsverzeichnis, Anker, Fussverweise) landen unter dem haftenden Kopf,
   nicht dahinter (R2/A). Als scroll-margin an den Zielen im Inhalt statt scroll-padding am
   Dokument: sonst verschiebt ein Fokus im haftenden Kopf (Seitenmenue) die Seite. Gilt auch
   fuer scrollIntoView aus live.js (Buehne und Auswahl der Einsatzgebiete). */
body.yk .yk-main [id],
body.yk .yl-owl__buehne,
body.yk .yl-owl__auswahl {
  scroll-margin-top: calc(var(--yl-kopf-h) + 24px);
}

/* ------------------------------------------------------------ Kopf, Grundform */

body.yk .yk-header {
  position: sticky;
  top: calc(-1 * var(--yl-top-h));
  z-index: var(--yk-z-header);
  background: transparent;
  color: var(--yl-ink);
  border-bottom: 0;
}

body.yk.admin-bar .yk-header { top: calc(32px - var(--yl-top-h)); }

/* Ebenenordnung (R3, Ursache statt immer hoeherer z-index-Werte).
   Befund: Die mobile Menueregel in chrome.css gibt jeder .yk-nav__list z-index 130.
   Im Fuss ist die Liste ein Flex-Element; Flex-Elemente bilden mit z-index auch
   ohne position einen eigenen Stapelkontext. Die Rechtliches-Liste lag damit auf
   Ebene 130 im Wurzelkontext und bei 390 px vor dem Kopf (Ebene 100).
   Loesung: Inhalt und Fuss sind je ein eigener Stapelkontext auf Ebene 0. Kein
   z-index darin (Elementor, Module, Listen) kann den Kopf mehr ueberholen.
   Verbleibende Ordnung im Wurzelkontext, von unten nach oben:
     Inhalt, Fuss (0)  <  Kopf (100)  <  Kontakt-Dock (120/121)  <  Sprunglink und
     Sprungschalter (200)  <  Kopf mit offenem Mobilmenue (300)  <  Complianz-Banner
     (99999, gemessen)  <  Vorlauf (inc/preloader.php, liegt bewusst ueber dem Banner)
   Elementor-Lightbox und Complianz haengen am body, nicht in Inhalt oder Fuss. */
body.yk .yk-main,
body.yk .yk-footer {
  isolation: isolate;
}

/* Gestapelte Listen (Fuss, Navigations-Widget) brauchen die mobile Menueebene nicht. */
body.yk .yk-nav--stacked .yk-nav__list {
  z-index: auto;
}

@media (max-width: 782px) {
  body.yk.admin-bar .yk-header { top: 0; }
}

body.yk .yk-header .e-con,
body.yk .yk-header .e-con-inner {
  --width: auto;
}

/* Kontaktleiste der Unterseiten (ab 1024 px, auch in der Editor-Vorschau). */
body.yk .yl-top {
  display: none;
}

@media (min-width: 1024px) {
  body.yk .yl-top {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: var(--yl-top-h);
    height: var(--yl-top-h);
    padding: 0 20px 0 300px;
    background-color: var(--yl-ink);
    color: rgba(255, 255, 255, 0.86);
    font-size: 15px;
    line-height: 1.4;
  }
}

body.yk .yl-top p { margin: 0; display: flex; align-items: center; gap: 30px; }

body.yk .yl-top a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

body.yk .yl-top__link::before,
body.yk .yl-top__icon::before {
  content: '';
  width: 17px;
  height: 17px;
  flex: none;
  background-color: var(--yl-sand);
  -webkit-mask: var(--yl-i-telefon) center / contain no-repeat;
  mask: var(--yl-i-telefon) center / contain no-repeat;
}

body.yk .yl-top__link--mail::before {
  -webkit-mask-image: var(--yl-i-mail);
  mask-image: var(--yl-i-mail);
}

body.yk .yl-top__link--mail {
  padding-left: 30px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

body.yk .yl-top__social p { gap: 8px; }

body.yk .yl-top__icon {
  justify-content: center;
  width: 44px;
}

body.yk .yl-top__icon::before {
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-mask-image: var(--yl-i-whatsapp);
  mask-image: var(--yl-i-whatsapp);
}

body.yk .yl-top__icon--tiktok::before {
  -webkit-mask-image: var(--yl-i-tiktok);
  mask-image: var(--yl-i-tiktok);
}

@media (hover: hover) and (pointer: fine) {
  body.yk .yl-top a:hover { color: var(--yl-white); text-decoration: underline; }
}

body.yk .yl-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Kopfleiste: feste Hoehe in beiden Zustaenden, damit das Logo nicht springt. */
body.yk .yk-header__bar {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  gap: 24px;
  min-height: var(--yl-kopf-h);
  height: var(--yl-kopf-h);
  padding: 0 20px 0 0;
  background: var(--yl-white);
  transition: background-color 360ms var(--yl-ease), box-shadow 360ms var(--yl-ease);
}

@media (min-width: 1200px) {
  body.yk .yk-header__bar { padding-right: 15px; }
}

/* Logo auf dem Ochsenblut-Winkel; Hoehe in jedem Zustand gleich. */
body.yk .yk-header__brand {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 44px 0 20px;
  isolation: isolate;
}

@media (min-width: 1200px) {
  body.yk .yk-header__brand { padding: 0 70px 0 18px; }
}

body.yk .yk-header__brand::after {
  content: '';
  position: absolute;
  inset: 0;
  height: auto;
  z-index: -1;
  background-color: var(--yl-brand);
  clip-path: polygon(0 0, 86% 0, 100% 100%, 0 100%);
  transform: none;
  animation: none;
}

/* Der Winkel reicht wie auf der Live-Seite bis in die Kontaktleiste. */
@media (min-width: 1024px) {
  body.yk:not(.home) .yk-header__brand::after {
    top: calc(-1 * var(--yl-top-h));
    clip-path: polygon(0 0, 10% 0, 16% 29%, 88% 29%, 100% 100%, 0 100%);
  }
}

body.yk .yk-header__brand .elementor-widget-image img,
body.yk .yk-header__brand img {
  display: block;
  height: var(--yl-logo-h);
  width: auto;
  max-width: none;
}

/* Logo schrumpft nie (R3): weder beim Scrollen noch wenn Menue und Knopf in der
   Leiste Platz brauchen. Markenblock und Bild behalten ihre Breite. */
body.yk .yk-header__brand,
body.yk .yk-header__brand > .elementor-element,
body.yk .yk-header__brand img {
  flex-shrink: 0;
}

/* ------------------------------------------------------------ Menue Desktop */

body.yk .yk-nav__list { gap: 0; }

@media (min-width: 1200px) {
  body.yk .yk-header .yk-nav { justify-content: center; }
  body.yk .yk-header .yk-nav__panel { display: contents; }
  body.yk .yk-header .yk-nav__panel-head,
  body.yk .yk-header .yk-nav__panel-contact,
  body.yk .yk-header .yk-nav__backdrop { display: none !important; }
  body.yk .yk-header .yk-nav__list {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  /* Abstand nur zwischen Hauptpunkten. Vorher traf die Regel auch die Eintraege
     im Untermenue: ab dem zweiten Eintrag 30 px Einzug, schmalere Flaechen,
     ungleiche Kanten (R3, gemessen bei 1440 px: x 458,9 gegen 489,1). */
  body.yk .yk-header .yk-nav__list > .yk-nav__item + .yk-nav__item {
    margin-left: clamp(18px, 2.1vw, 34px);
  }
  body.yk .yk-header .yk-nav__sub > .yk-nav__item {
    margin: 0;
  }
  body.yk .yk-header .yk-nav__link {
    min-height: 44px;
    padding: 0;
    border-bottom: 2px solid transparent;
    color: var(--yl-ink);
    font-family: var(--yl-font-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 200ms var(--yl-ease), border-color 200ms var(--yl-ease);
  }
  body.yk .yk-header .yk-nav__item.is-current > .yk-nav__link,
  body.yk .yk-header .yk-nav__item--parent.is-current-parent > .yk-nav__link {
    border-bottom-color: currentColor;
    color: var(--yl-brand);
  }
  body.yk .yk-header .yk-nav__sub-toggle {
    min-width: 28px;
    min-height: 44px;
    margin-left: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
  }
  body.yk .yk-header .yk-nav__chevron {
    width: 10px;
    height: 10px;
    border-width: 0 2px 2px 0;
  }
  /* Untermenue (R3): Der Text der Eintraege fluchtet mit dem Hauptpunkt
     (10 px Innenabstand + 14 px Eintragsabstand = 24 px nach links), alle
     Eintraege gleich breit, je mindestens 44 px hoch. */
  body.yk .yk-header {
    --yr3-sub-luft: 18px;
  }
  body.yk .yk-header .yk-nav__sub {
    top: calc(100% + var(--yr3-sub-luft));
    left: -24px;
    min-width: 300px;
    padding: 10px;
    border-top: 3px solid var(--yl-brand);
    border-radius: 0;
    background: var(--yl-white);
    box-shadow: var(--yl-shadow-strong);
  }
  /* Zeigerbruecke ueber die Luft zwischen Hauptpunkt und Liste (Codex-Patch R3,
     hier eingeordnet): unsichtbar, Teil des Untermenues und damit des
     Hoverbereichs. Geschlossen ist sie mit dem Untermenue unsichtbar und faengt
     keinen Zeiger. */
  body.yk .yk-header .yk-nav__sub::before {
    content: '';
    position: absolute;
    left: -3px;
    right: -3px;
    top: calc(-1 * (var(--yr3-sub-luft) + 3px));
    height: calc(var(--yr3-sub-luft) + 3px);
    background: transparent;
  }
  body.yk .yk-header .yk-nav__item--child > .yk-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 0;
    border-radius: 0;
    color: var(--yl-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    transition: background-color 160ms var(--yl-ease), color 160ms var(--yl-ease);
  }
  /* Markenkante links zeigt Zeiger, Tastaturfokus und aktuelle Seite. */
  body.yk .yk-header .yk-nav__item--child > .yk-nav__link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    background: var(--yl-brand);
    transform: scaleY(0);
    transition: transform 180ms var(--yl-ease);
  }
  body.yk .yk-header .yk-nav__item--child > .yk-nav__link:focus-visible,
  body.yk .yk-header .yk-nav__item--child.is-current > .yk-nav__link {
    background: var(--yl-smoke);
    color: var(--yl-brand);
  }
  body.yk .yk-header .yk-nav__item--child > .yk-nav__link:focus-visible::before,
  body.yk .yk-header .yk-nav__item--child.is-current > .yk-nav__link::before {
    transform: none;
  }
  body.yk .yk-header .yk-nav__item--child > .yk-nav__link:focus-visible {
    outline: 2px solid var(--yl-brand) !important;
    outline-offset: -2px !important;
  }
  body.yk .yk-header .yk-nav__chevron {
    transition: transform 180ms var(--yl-ease);
  }
  /* Mit Skript: weiches Oeffnen aus der Richtung des Hauptpunkts (180 ms), schnelles
     Schliessen (120 ms). Geschlossen ist die Liste unsichtbar, nicht anklickbar und
     per inert (nav.js) ohne Tabstopps. Ohne Skript gilt chrome.css (Hover, Fokus). */
  html.yk-js body.yk .yk-header .yk-nav__sub {
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, 6px, 0);
    pointer-events: none;
    transition: opacity 120ms var(--yl-ease), transform 120ms var(--yl-ease), visibility 0s linear 120ms;
  }
  html.yk-js body.yk .yk-header .yk-nav__item--parent.is-open > .yk-nav__sub {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity 180ms var(--yl-ease), transform 180ms var(--yl-ease), visibility 0s linear 0s;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1200px) {
  body.yk .yk-header .yk-nav__item:not(.yk-nav__item--child) > .yk-nav__link:hover {
    color: var(--yl-brand);
    border-bottom-color: currentColor;
  }
  body.yk .yk-header .yk-nav__item--child > .yk-nav__link:hover {
    background: var(--yl-smoke);
    color: var(--yl-brand);
  }
  body.yk .yk-header .yk-nav__item--child > .yk-nav__link:hover::before {
    transform: none;
  }
}

@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
  html.yk-js body.yk .yk-header .yk-nav__sub,
  html.yk-js body.yk .yk-header .yk-nav__item--parent.is-open > .yk-nav__sub {
    transform: none;
  }
  body.yk .yk-header .yk-nav__item--child > .yk-nav__link::before,
  body.yk .yk-header .yk-nav__chevron {
    transition: none;
  }
}

/* Hauptaktion im Kopf. */
body.yk .yk-header__actions .yl-btn .elementor-button {
  min-height: 60px;
  padding: 18px 32px;
}

@media (max-width: 1023px) {
  body.yk .yk-header__cta { display: none !important; }
}

/* ------------------------------------------------------------ Startseite: fest und transparent */

body.yk.home .yk-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

body.yk.home.admin-bar .yk-header { top: 32px; }

@media (max-width: 782px) {
  body.yk.home.admin-bar .yk-header { top: 46px; }
}

body.yk.home .yl-top { display: none; }

body.yk.home .yk-header__bar {
  padding-inline: max(20px, calc((100% - var(--yl-container)) / 2));
  background: rgba(20, 20, 34, 0);
}

body.yk.home .yk-header__brand { padding: 0; }

body.yk.home .yk-header__brand::after { display: none; }

html.yl-scrolled body.yk.home .yk-header__bar {
  background: rgba(20, 20, 34, 1);
  box-shadow: 0 10px 30px rgba(10, 10, 24, 0.24);
}

@media (min-width: 1200px) {
  body.yk.home .yk-header .yk-nav__link { color: var(--yl-white); }
  body.yk.home .yk-header .yk-nav__item.is-current > .yk-nav__link { color: var(--yl-white); }
  body.yk.home .yk-header .yk-nav__item--child > .yk-nav__link { color: var(--yl-ink); }
  body.yk.home .yk-header .yk-nav__sub-toggle { color: var(--yl-white); }
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  body.yk.home .yk-header .yk-nav__item:not(.yk-nav__item--child) > .yk-nav__link:hover {
    color: var(--yl-sand);
  }
}

/* Unterseiten: angeheftete Leiste bleibt weiss wie live, bekommt nur Schatten. */
html.yl-scrolled body.yk:not(.home) .yk-header__bar {
  box-shadow: 0 12px 34px rgba(20, 20, 34, 0.12);
}

/* ------------------------------------------------------------ Menueknopf */

body.yk .yk-header .yk-nav__burger {
  position: relative;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-width: 52px;
  padding: 0;
  border: 0;
  border-radius: var(--yl-radius);
  background: var(--yl-brand);
  color: var(--yl-white);
  transition: background-color 200ms var(--yl-ease), transform 140ms var(--yl-ease);
}

body.yk .yk-header .yk-nav__burger:active { transform: scale(0.96); }

@media (hover: hover) and (pointer: fine) {
  body.yk .yk-header .yk-nav__burger:hover { background: var(--yl-ink); }
  body.yk.home .yk-header .yk-nav__burger:hover { background: var(--yl-brand-hover); }
}

body.yk .yk-header .yk-nav__burger-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.yk .yk-header .yk-nav__burger-lines,
body.yk .yk-header .yk-nav__burger-lines::before,
body.yk .yk-header .yk-nav__burger-lines::after {
  background-color: var(--yl-white);
}

/* ------------------------------------------------------------ Mobil: Seitenpanel */

/* R3 (Nutzervorgabe): ruhige helle Flaeche statt dunklem Mauerwerk, Bordeaux nur
   als Akzent (Logowinkel, aktuelle Seite, Untermenuekante, Hauptaktion). Seitlicher
   Eintritt bleibt: Oeffnen 420 ms, Schliessen 280 ms mit der Schubladenkurve,
   Eintraege gestaffelt 30 ms. Reduzierte Bewegung: nur Einblenden. */
@media (max-width: 1199px) {
  /* Ohne Skript steht das Menue als einfache Liste unter der Leiste. */
  html:not(.yk-js) body.yk .yk-header .yk-nav__panel-head,
  html:not(.yk-js) body.yk .yk-header .yk-nav__backdrop { display: none; }
  html:not(.yk-js) body.yk .yk-header .yk-nav__panel {
    flex-basis: 100%;
    padding: 8px 20px 24px;
    background: var(--yl-white);
    color: var(--yl-ink);
    border-top: 1px solid var(--yl-line);
  }
  html:not(.yk-js) body.yk .yk-header__bar { height: auto; flex-wrap: wrap; }

  html.yk-js body.yk .yk-header .yk-nav__panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    width: min(420px, 88vw);
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--yl-white);
    color: var(--yl-ink);
    box-shadow: -24px 0 60px rgba(20, 20, 34, 0.18);
    transform: translate3d(100%, 0, 0);
    visibility: hidden;
    transition: transform 280ms var(--yr3-ease-drawer), visibility 0s linear 280ms;
  }

  html.yk-js body.yk .yk-header .yk-nav.is-menu-open .yk-nav__panel {
    transform: none;
    visibility: visible;
    transition: transform 420ms var(--yr3-ease-drawer), visibility 0s linear 0s;
  }

  html.yk-js body.yk .yk-header .yk-nav__backdrop {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: block;
    background: rgba(20, 20, 34, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms var(--yl-ease);
  }

  html.yk-js body.yk .yk-header .yk-nav.is-menu-open .yk-nav__backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Kopf des Panels: Logo auf dem Markenwinkel und Schliessen. */
  body.yk .yk-header .yk-nav__panel-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    min-height: var(--yl-kopf-h);
    padding: 0 18px 0 0;
    border-bottom: 1px solid var(--yl-line);
    isolation: isolate;
  }

  body.yk .yk-header .yk-nav__panel-logo {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
    padding: 0 48px 0 20px;
  }

  body.yk .yk-header .yk-nav__panel-logo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--yl-brand);
    clip-path: polygon(0 0, 84% 0, 100% 100%, 0 100%);
  }

  body.yk .yk-header .yk-nav__panel-logo img {
    display: block;
    height: var(--yl-logo-h);
    width: auto;
  }

  body.yk .yk-header .yk-nav__close {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(20, 20, 34, 0.16);
    border-radius: 50%;
    background: var(--yl-white);
    color: var(--yl-ink);
    cursor: pointer;
    transition: background-color 200ms var(--yl-ease), border-color 200ms var(--yl-ease), color 200ms var(--yl-ease), transform 140ms var(--yl-ease);
  }

  body.yk .yk-header .yk-nav__close:active { transform: scale(0.94); }

  body.yk .yk-header .yk-nav__close-icon {
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask: var(--yl-i-schliessen) center / contain no-repeat;
    mask: var(--yl-i-schliessen) center / contain no-repeat;
  }

  @media (hover: hover) and (pointer: fine) {
    body.yk .yk-header .yk-nav__close:hover { background: var(--yl-brand); border-color: var(--yl-brand); color: var(--yl-white); }
  }

  /* Menueliste im Panel. */
  html.yk-js body.yk .yk-header .yk-nav__panel .yk-nav__list {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: none;
    margin: 0;
    padding: 18px 20px 8px;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  body.yk .yk-header .yk-nav__panel .yk-nav__item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-bottom: 1px solid var(--yl-line);
  }

  body.yk .yk-header .yk-nav__panel .yk-nav__item--child { border-bottom: 0; }

  body.yk .yk-header .yk-nav__panel .yk-nav__link {
    display: flex;
    width: 100%;
    min-height: 56px;
    padding: 12px 0;
    border: 0;
    color: var(--yl-ink);
    font-family: var(--yl-font-title);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.005em;
    text-transform: none;
    text-decoration: none;
    transition: color 160ms var(--yl-ease);
  }

  body.yk .yk-header .yk-nav__panel .yk-nav__item.is-current > .yk-nav__link {
    color: var(--yl-brand);
  }

  body.yk .yk-header .yk-nav__panel .yk-nav__item.is-current > .yk-nav__link .yk-nav__label {
    box-shadow: inset 0 -2px 0 var(--yl-brand);
  }

  body.yk .yk-header .yk-nav__panel .yk-nav__sub-toggle {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 -8px 0 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--yl-ink);
    transition: background-color 160ms var(--yl-ease);
  }

  body.yk .yk-header .yk-nav__panel .yk-nav__item--parent.is-open > .yk-nav__sub-toggle {
    background: var(--yl-smoke);
    color: var(--yl-brand);
  }

  body.yk .yk-header .yk-nav__panel .yk-nav__chevron {
    transition: transform 200ms var(--yl-ease);
  }

  body.yk .yk-header .yk-nav__panel .yk-nav__sub {
    grid-column: 1 / -1;
    margin: 0 0 14px;
    padding: 2px 0 2px 16px;
    border-left: 2px solid var(--yl-brand);
  }

  body.yk .yk-header .yk-nav__panel .yk-nav__item--child > .yk-nav__link {
    min-height: 44px;
    padding: 8px 0;
    color: rgba(20, 20, 34, 0.78);
    font-family: var(--yl-font-body);
    font-size: 16px;
    font-weight: 500;
  }

  body.yk .yk-header .yk-nav__panel .yk-nav__item--child.is-current > .yk-nav__link { color: var(--yl-brand); }

  @media (hover: hover) and (pointer: fine) {
    body.yk .yk-header .yk-nav__panel .yk-nav__link:hover { color: var(--yl-brand); }
  }

  /* Einlauf der Menuepunkte beim Oeffnen, dezent gestaffelt (30 ms, 16 px). Beim
     Schliessen ohne Staffel und schneller. */
  html.yk-js body.yk .yk-header .yk-nav__panel .yk-nav__list > .yk-nav__item,
  html.yk-js body.yk .yk-header .yk-nav__panel-contact {
    opacity: 0;
    transform: translate3d(16px, 0, 0);
    transition: opacity 120ms var(--yl-ease), transform 120ms var(--yl-ease);
  }

  html.yk-js body.yk .yk-header .yk-nav.is-menu-open .yk-nav__panel .yk-nav__list > .yk-nav__item,
  html.yk-js body.yk .yk-header .yk-nav.is-menu-open .yk-nav__panel-contact {
    opacity: 1;
    transform: none;
    transition: opacity 240ms var(--yl-ease), transform 320ms var(--yl-ease);
    transition-delay: calc(100ms + var(--yl-i, 0) * 30ms);
  }

  /* Kontaktwege unten im Panel auf ruhigem Grau, klar vom Menue getrennt. */
  body.yk .yk-header .yk-nav__panel-contact {
    margin-top: auto;
    padding: 26px 20px max(24px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--yl-line);
    background: var(--yl-smoke);
  }

  body.yk .yk-header .yk-nav__panel-kicker {
    position: relative;
    margin: 0 0 12px;
    padding-left: 40px;
    color: var(--yl-brand);
    font: 700 13px/1.4 var(--yl-font-body);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  body.yk .yk-header .yk-nav__panel-kicker::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 30px;
    height: 9px;
    transform: translateY(-50%);
    background:
      linear-gradient(currentColor, currentColor) 0 0 / 30px 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 100% / 20px 2px no-repeat;
  }

  body.yk .yk-header .yk-nav__panel-list {
    display: grid;
    gap: 2px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
  }

  body.yk .yk-header .yk-nav__panel-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 48px;
    color: var(--yl-ink);
    font-size: 16px;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color 160ms var(--yl-ease);
  }

  body.yk .yk-header .yk-nav__panel-ico {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--yl-line);
    border-radius: 50%;
    background: var(--yl-white);
    transition: background-color 160ms var(--yl-ease), border-color 160ms var(--yl-ease);
  }

  body.yk .yk-header .yk-nav__panel-ico::before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: var(--yl-brand);
    -webkit-mask: var(--yl-i-telefon) center / contain no-repeat;
    mask: var(--yl-i-telefon) center / contain no-repeat;
    transition: background-color 160ms var(--yl-ease);
  }

  body.yk .yk-header .yk-nav__panel-link--wa .yk-nav__panel-ico::before { -webkit-mask-image: var(--yl-i-whatsapp); mask-image: var(--yl-i-whatsapp); }
  body.yk .yk-header .yk-nav__panel-link--mail .yk-nav__panel-ico::before { -webkit-mask-image: var(--yl-i-mail); mask-image: var(--yl-i-mail); }

  @media (hover: hover) and (pointer: fine) {
    body.yk .yk-header .yk-nav__panel-link:hover { color: var(--yl-brand); }
    body.yk .yk-header .yk-nav__panel-link:hover .yk-nav__panel-ico { background: var(--yl-brand); border-color: var(--yl-brand); }
    body.yk .yk-header .yk-nav__panel-link:hover .yk-nav__panel-ico::before { background-color: var(--yl-white); }
  }

  body.yk .yk-header .yk-nav__panel-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 16px 24px;
    border-radius: var(--yl-radius);
    background: var(--yl-brand);
    color: var(--yl-white);
    font: 700 16px/1 var(--yl-font-body);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 200ms var(--yl-ease), transform 140ms var(--yl-ease);
  }

  body.yk .yk-header .yk-nav__panel-cta:active { transform: scale(0.98); }

  body.yk .yk-header .yk-nav__panel-cta-ico {
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--yl-i-pfeil) center / contain no-repeat;
    mask: var(--yl-i-pfeil) center / contain no-repeat;
  }

  @media (hover: hover) and (pointer: fine) {
    body.yk .yk-header .yk-nav__panel-cta:hover { background: var(--yl-ink); color: var(--yl-white); }
  }

  /* Fokus im hellen Panel in Bordeaux. */
  body.yk .yk-header .yk-nav__panel a:focus-visible,
  body.yk .yk-header .yk-nav__panel button:focus-visible {
    outline: 3px solid var(--yl-brand) !important;
    outline-offset: 3px;
  }
}

/* Waehrend das Panel offen ist: Kopf ueber Dock und Inhalt, Seite gesperrt. Die
   Rinne der Bildlaufleiste bleibt reserviert, damit nichts seitlich springt. */
html.yk-menu-locked body.yk .yk-header { z-index: 300; }

html.yk-menu-locked,
html.yk-menu-locked body {
  overflow: hidden;
}

html.yk-menu-locked {
  scrollbar-gutter: stable;
}

@media (min-width: 1200px) {
  html.yk-menu-locked,
  html.yk-menu-locked body { overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  /* Kein seitlicher Weg, nur Ein- und Ausblenden (160 ms). */
  html.yk-js body.yk .yk-header .yk-nav__panel {
    transform: none;
    opacity: 0;
    transition: opacity 160ms linear, visibility 0s linear 160ms;
  }
  html.yk-js body.yk .yk-header .yk-nav.is-menu-open .yk-nav__panel {
    transform: none;
    opacity: 1;
    transition: opacity 160ms linear, visibility 0s linear 0s;
  }
  html.yk-js body.yk .yk-header .yk-nav__panel .yk-nav__list > .yk-nav__item,
  html.yk-js body.yk .yk-header .yk-nav__panel-contact,
  html.yk-js body.yk .yk-header .yk-nav.is-menu-open .yk-nav__panel .yk-nav__list > .yk-nav__item,
  html.yk-js body.yk .yk-header .yk-nav.is-menu-open .yk-nav__panel-contact {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body.yk .yk-header__bar { transition: none; }
}

/* ------------------------------------------------------------ Kontakt-Dock */

body.yk .yk-dock__trigger {
  min-height: 56px;
  padding: 0 22px 0 18px;
  border: 0;
  border-radius: var(--yl-radius);
  background-color: var(--yl-brand);
  color: var(--yl-white);
  font-family: var(--yl-font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(49, 0, 1, 0.28);
}

@media (hover: hover) and (pointer: fine) {
  body.yk .yk-dock__trigger:hover { background-color: var(--yl-ink); }
}

body.yk .yk-dock__trigger:focus-visible {
  outline: 3px solid var(--yl-sand) !important;
  outline-offset: 3px;
}

body.yk .yk-dock__panel {
  border: 0;
  border-top: 3px solid var(--yl-brand);
  border-radius: 0;
  box-shadow: var(--yl-shadow-strong);
}

body.yk .yk-dock__heading {
  font-family: var(--yl-font-title);
  color: var(--yl-ink);
}

body.yk .yk-dock__action-icon {
  background-color: var(--yl-smoke);
  color: var(--yl-brand);
}

body.yk .yk-dock__trigger-icon {
  display: inline-flex;
}

body.yk .yk-dock__trigger-icon .yl-icon-mask {
  width: 20px;
  height: 20px;
}

body.yk .yk-dock__action-icon .yl-icon-mask {
  width: 18px;
  height: 18px;
}

/* Im Fussbereich stehen alle Kontaktwege, und solange ein Cookiebanner sichtbar
   ist, hat dieser Vorrang: in beiden Faellen tritt der Knopf zurueck (dock.js
   setzt zusaetzlich inert). Kein Verschieben nach oben (Codex-Befund B2).
   Ebenso, solange er einen Knopf des Einstiegs ueberdecken wuerde (R2/A). */
body.yk .yk-dock {
  transition: transform 280ms var(--yl-ease), opacity 200ms ease, visibility 0s linear 0s;
}

body.yk .yk-dock.is-am-fuss,
body.yk .yk-dock.is-banner,
body.yk .yk-dock.is-einstieg {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(24px);
  transition: transform 280ms var(--yl-ease), opacity 200ms ease, visibility 0s linear 280ms;
}

@media (prefers-reduced-motion: reduce) {
  body.yk .yk-dock,
  body.yk .yk-dock.is-am-fuss,
  body.yk .yk-dock.is-banner,
  body.yk .yk-dock.is-einstieg {
    transition: none;
  }
}

/* ------------------------------------------------------------ Aufrufband ueber dem Fuss */

body.yk .yl-cta-band {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 44px max(20px, calc((100% - var(--yl-container)) / 2));
  background-color: var(--yl-brand);
  background-image: var(--yl-lattice), linear-gradient(90deg, var(--yl-brand) 0%, var(--yl-brand-2) 100%);
  background-size: 120px 120px, auto;
}

@media (min-width: 900px) {
  body.yk .yl-cta-band {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block: 40px;
  }
}

body.yk .yl-cta-band .elementor-heading-title {
  margin: 0;
  color: var(--yl-white);
  font-size: clamp(22px, 1vw + 16px, 30px);
  font-weight: 700;
  line-height: 1.3;
}

body.yk .yl-cta-band > .elementor-element { width: auto; }

/* Seiten, die mit eigenem Anfrageabschluss oder Kontaktformular enden, brauchen
   kein zweites Aufrufband direkt davor (Codex-Audit, Feinschliff S0-K). */
body.yk:has(.yl-request, .yl-pagehead--kontakt) .yl-cta-band {
  display: none;
}

/* ------------------------------------------------------------ Fuss */

body.yk .yk-footer {
  padding: 0;
  background-color: #11131e;
  background-image: var(--yl-bricks);
  background-size: 160px 64px;
  color: rgba(255, 255, 255, 0.72);
}

/* Spalten (Feinschliff S0-K): mobil Marke und Kontakt ueber die volle Breite,
   Leistungen und Informationen nebeneinander; Tablet drei Spalten unter der
   Marke; Desktop vier Spalten. Rechtliches steht in der Grundzeile. */
body.yk .yk-footer .yk-footer__grid {
  max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 64px max(20px, calc((100% - var(--yl-container)) / 2)) 48px;
  gap: 44px 24px;
}

body.yk .yk-footer .yk-footer__col--brand,
body.yk .yk-footer .yk-footer__col--brand + .yk-footer__col {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  body.yk .yk-footer .yk-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 32px;
  }

  body.yk .yk-footer .yk-footer__col--brand + .yk-footer__col {
    grid-column: auto;
  }
}

@media (min-width: 1024px) {
  body.yk .yk-footer .yk-footer__grid {
    grid-template-columns: 1.35fr 1.15fr 1fr 0.9fr;
    padding-top: 84px;
    padding-bottom: 60px;
    gap: 56px;
  }

  body.yk .yk-footer .yk-footer__col--brand {
    grid-column: auto;
  }
}

body.yk .yk-footer p,
body.yk .yk-footer li {
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

body.yk .yk-footer a {
  color: rgba(255, 255, 255, 0.86);
}

@media (hover: hover) and (pointer: fine) {
  body.yk .yk-footer a:hover {
    color: var(--yl-white);
    text-decoration: underline;
  }
}

body.yk .yk-footer__title .elementor-heading-title {
  position: relative;
  margin: 0 0 22px;
  padding-bottom: 14px;
  color: var(--yl-white);
  font-family: var(--yl-font-title);
  font-size: clamp(20px, 0.5vw + 17px, 24px);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}

body.yk .yk-footer__title .elementor-heading-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: var(--yl-brand);
  box-shadow: 18px 0 0 0 transparent;
}

body.yk .yk-footer__logo img,
body.yk .yk-footer__logo {
  height: auto;
  max-width: clamp(190px, 12vw + 120px, 240px);
  width: 100%;
  margin-bottom: 0;
}

body.yk .yk-footer__about {
  margin-top: 22px;
  max-width: 34ch;
}

/* Kontaktliste mit Symbolen. */
body.yk .yl-flist {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.yk .yl-flist li {
  position: relative;
  padding-left: 36px;
}

body.yk .yl-flist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  background-color: var(--yl-sand);
  -webkit-mask: var(--yl-i-pin) center / contain no-repeat;
  mask: var(--yl-i-pin) center / contain no-repeat;
}

body.yk .yl-flist .yl-flist--tel::before { -webkit-mask-image: var(--yl-i-telefon); mask-image: var(--yl-i-telefon); }
body.yk .yl-flist .yl-flist--mail::before { -webkit-mask-image: var(--yl-i-mail); mask-image: var(--yl-i-mail); }
body.yk .yl-flist .yl-flist--wa::before { -webkit-mask-image: var(--yl-i-whatsapp); mask-image: var(--yl-i-whatsapp); }

body.yk .yl-flist a {
  display: inline-block;
  min-height: 28px;
}

/* Soziale Verweise im Fuss: runde Knoepfe. */
body.yk .yl-social p {
  display: flex;
  gap: 12px;
  margin-top: 26px;
}

body.yk .yl-social a {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: background-color 200ms var(--yl-ease);
}

body.yk .yl-social a::before {
  content: '';
  width: 20px;
  height: 20px;
  background-color: var(--yl-white);
  -webkit-mask: var(--yl-i-whatsapp) center / contain no-repeat;
  mask: var(--yl-i-whatsapp) center / contain no-repeat;
}

body.yk .yl-social a.yl-social--tiktok::before { -webkit-mask-image: var(--yl-i-tiktok); mask-image: var(--yl-i-tiktok); }

@media (hover: hover) and (pointer: fine) {
  body.yk .yl-social a:hover { background: var(--yl-brand); text-decoration: none; }
}

/* Fussmenues mit Doppelpfeil wie auf der Live-Seite. */
body.yk .yk-footer .yk-nav--stacked .yk-nav__list {
  gap: 10px;
}

body.yk .yk-footer .yk-nav--stacked .yk-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 0;
  border: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 16px;
  font-weight: 400;
  text-transform: none;
}

body.yk .yk-footer .yk-nav--stacked .yk-nav__link::before {
  content: '';
  width: 14px;
  height: 14px;
  flex: none;
  background-color: var(--yl-sand);
  -webkit-mask: var(--yl-i-pfeil) center / contain no-repeat;
  mask: var(--yl-i-pfeil) center / contain no-repeat;
}

/* Ortszeilen (Feinschliff S0-K, erweitert R2/A): Ostwestfalen-Lippe und angrenzendes
   Niedersachsen je in einer ruhigen Zeile, links die Bezeichnung, rechts die Orte,
   darunter oder daneben der Verweis auf die Gesamtuebersicht. Kein Ortsnamenblock. */
body.yk .yk-footer .yl-fuss-orte {
  max-width: none;
  padding: 24px max(20px, calc((100% - var(--yl-container)) / 2));
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

body.yk .yl-fuss-orte__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

body.yk .yl-fuss-orte__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 4px 24px;
}

@media (min-width: 768px) {
  body.yk .yl-fuss-orte__zeile {
    grid-template-columns: 300px minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  body.yk .yl-fuss-orte__raster {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 32px;
  }

  body.yk .yl-fuss-orte__zeile {
    grid-column: 1;
  }

  body.yk .yk-footer .yl-fuss-orte__alle {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

body.yk .yk-footer .yl-fuss-orte__titel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--yl-sand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.yk .yl-fuss-orte__titel::before {
  content: '';
  width: 16px;
  height: 16px;
  flex: none;
  background-color: var(--yl-sand);
  -webkit-mask: var(--yl-i-pin) center / contain no-repeat;
  mask: var(--yl-i-pin) center / contain no-repeat;
}

body.yk .yl-fuss-orte__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.yk .yk-footer .yl-fuss-orte__liste li {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}

body.yk .yl-fuss-orte__liste li + li::before {
  content: '';
  width: 4px;
  height: 4px;
  margin: 0 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}

body.yk .yl-fuss-orte__liste a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: rgba(255, 255, 255, 0.8);
}

body.yk .yk-footer .yl-fuss-orte__alle {
  margin: 4px 0 0;
  font-size: 15px;
}

body.yk .yl-fuss-orte__alle a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--yl-sand);
  font-weight: 700;
}

body.yk .yl-fuss-orte__alle a::after {
  content: '';
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--yl-i-pfeil) center / contain no-repeat;
  mask: var(--yl-i-pfeil) center / contain no-repeat;
  transition: transform 200ms var(--yl-ease);
}

@media (hover: hover) and (pointer: fine) {
  body.yk .yl-fuss-orte__alle a:hover::after {
    transform: translateX(3px);
  }
}

/* Inter nur fuer das Copyrightband (R2/S0 nach CODEX_AB_PRUEFUNG Punkt 3): lokal, latin,
   variable Achse; Herkunft und Lizenz in assets/fonts/HERKUNFT-INTER.json und OFL-Inter.txt. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Letztes Band exakt nach der GT-Referenz (R2/A, koordination/R2/REFERENZEN.md;
   oeffentlich gelesen von gt-pulverbeschichtung.de): zentriert, Grundtext #8b93a7,
   14 px (bis 1100 px Breite 13 px), Zeilenhoehe 1,6, Laufweite -0,01 em, feine Linie
   oben, Innenabstand 17 px oben und 25 px unten. Am Desktop ein 4-px-Trennpunkt mit
   14 px Abstand, unter 768 px zwei zentrierte Zeilen ohne Punkt. Hintergrund #262f42
   und Schrift Inter wie im GT-Copyrightband (R2/S0, nur dieses Band). */
body.yk .yk-footer .yk-footer__base {
  display: block;
  max-width: none;
  margin-top: 0;
  padding: 17px max(15px, calc((100% - var(--yl-container)) / 2)) 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.32);
  background: #262f42;
}

body.yk .yk-footer .yk-footer__base > .elementor-element {
  width: 100%;
  max-width: 100%;
}

body.yk .yk-footer .yl-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  max-width: none;
  margin: 0;
  /* R3/S0 Kontrast: GT-Grundtext #8b93a7 erreichte auf #262f42 4,36:1; #8e96aa (drei Stufen heller) 4,52:1. */
  color: #8e96aa;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.01em;
  text-align: center;
}

/* Copyright als normaler Textlauf (Leerzeichen statt Flex-Abstand vor dem Punkt), der
   Agenturteil wie in der Referenz als Zeile mit 6 px Abstand vor der Marke. */
body.yk .yk-footer .yl-copy__teil {
  display: inline-block;
  min-width: 0;
  white-space: nowrap;
}

body.yk .yk-footer .yl-copy__teil--agentur {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Trennpunkt vor dem Agenturteil: 4 px, weiss mit 28 Prozent, 14 px Abstand. */
body.yk .yk-footer .yl-copy__teil--agentur::before {
  content: '';
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  margin-right: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

body.yk .yk-footer .yl-copy .yl-jahr {
  color: inherit;
}

/* NEXTSIDEMEDIA: Regenbogenverlauf im Text, 8 s ease-in-out; feine Linie darunter, 7 s linear. */
body.yk .yk-footer .yl-agentur {
  position: relative;
  display: inline-block;
  margin-left: 2px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  background-image: linear-gradient(115deg, #ff4d4d 0%, #ff8a00 14%, #ffd200 28%, #8fd14f 42%, #21c7a8 56%, #2f7cff 70%, #8b5cf6 84%, #ff4d9a 100%);
  background-size: 300% 300%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: yl-agentur-regenbogen 8s ease-in-out infinite;
}

body.yk .yk-footer .yl-agentur::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 77, 77, 0), rgba(255, 138, 0, 0.85), rgba(255, 210, 0, 0.85), rgba(47, 124, 255, 0.85), rgba(139, 92, 246, 0.85), rgba(255, 77, 154, 0));
  background-size: 250% 100%;
  animation: yl-agentur-linie 7s linear infinite;
  opacity: 0.75;
}

@media (hover: hover) and (pointer: fine) {
  body.yk .yk-footer .yl-agentur:hover {
    filter: brightness(1.08) saturate(1.1);
    text-decoration: none !important;
  }
}

body.yk .yk-footer .yl-agentur:focus-visible {
  outline: 3px solid var(--yl-sand) !important;
  outline-offset: 4px !important;
}

@keyframes yl-agentur-regenbogen {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 35%; }
  50% { background-position: 85% 100%; }
  75% { background-position: 15% 70%; }
  100% { background-position: 0% 50%; }
}

@keyframes yl-agentur-linie {
  0% { background-position: 0% 50%; }
  100% { background-position: 250% 50%; }
}

@media (max-width: 1100px) {
  body.yk .yk-footer .yl-copy { gap: 8px 12px; font-size: 13px; }
  body.yk .yk-footer .yl-copy__teil--agentur::before { margin-right: 6px; }
  body.yk .yk-footer .yl-agentur { font-size: 13px; }
}

@media (max-width: 767.98px) {
  body.yk .yk-footer .yk-footer__base { padding-bottom: 25px; }

  body.yk .yk-footer .yl-copy {
    justify-content: center;
    text-align: center;
    gap: 6px 10px;
    font-size: 13px;
    line-height: 1.65;
  }

  /* Der Yakobs-Betriebsname ist laenger als die GT-Zeile: bricht sie um, dann ausgewogen
     und nie innerhalb des Namens (Jahr und Name oben, "Alle Rechte vorbehalten." darunter) (R2/S0). */
  body.yk .yk-footer .yl-copy__teil {
    justify-content: center;
    width: 100%;
    white-space: normal;
    text-wrap: balance;
  }

  body.yk .yk-footer .yl-copy__teil > .notranslate {
    white-space: nowrap;
  }

  body.yk .yk-footer .yl-copy__teil--agentur::before { display: none; }
  body.yk .yk-footer .yl-agentur { font-size: 13px; }
}

/* Reduzierte Bewegung stoppt Verlauf und Linie; der Verlauf bleibt als Farbe stehen.
   Ebenso die Einstellung "Bewegte Inhalte: aus" (R3, html.yr3-ruhig aus live.js). */
@media (prefers-reduced-motion: reduce) {
  body.yk .yk-footer .yl-agentur,
  body.yk .yk-footer .yl-agentur::after {
    animation: none;
  }
}

html.yr3-ruhig body.yk .yk-footer .yl-agentur,
html.yr3-ruhig body.yk .yk-footer .yl-agentur::after {
  animation: none;
}

/* ------------------------------------------------------------ Bewegungseinstellung (R3) */

/* Ersetzt Pausenpille im Einstieg und Pausenknopf am Laufband: ein ruhiger Schalter
   "Bewegte Inhalte" unter Rechtliches im Fuss, mit echtem Zustand (role=switch,
   aria-checked; live.js). Der Knopf ist ohne Skript nicht vorhanden, weil ohne
   Skript nichts von selbst laeuft. Bei reduzierter Bewegung im System entfaellt er. */
body.yk .yr3-bewegung {
  margin-top: 18px;
}

body.yk .yk-footer__base .yr3-bewegung {
  margin-top: 6px;
  text-align: center;
}

body.yk .yr3-bewegung__schalter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  font: 400 15px/1.4 var(--yl-font-body);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

body.yk .yr3-bewegung__schalter[hidden],
body.yk .yr3-bewegung-sprung[hidden] {
  display: none !important;
}

body.yk .yr3-bewegung__spur {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  transition: background-color 180ms var(--yl-ease);
}

body.yk .yr3-bewegung__spur::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--yl-white);
  transition: transform 180ms var(--yl-ease), background-color 180ms var(--yl-ease);
}

body.yk .yr3-bewegung__schalter[aria-checked='true'] .yr3-bewegung__spur {
  background: var(--yl-sand);
}

body.yk .yr3-bewegung__schalter[aria-checked='true'] .yr3-bewegung__spur::after {
  background: var(--yl-ink);
  transform: translateX(14px);
}

body.yk .yr3-bewegung__zustand {
  min-width: 2.2em;
  color: var(--yl-sand);
  font-weight: 700;
}

body.yk .yr3-bewegung__schalter:active .yr3-bewegung__spur {
  transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
  body.yk .yr3-bewegung__schalter:hover {
    color: var(--yl-white);
  }
}

body.yk .yr3-bewegung__schalter:focus-visible {
  outline: 3px solid var(--yl-sand) !important;
  outline-offset: 4px;
}

/* Tastatur: derselbe Schalter als Sprungmarke nach "Direkt zum Inhalt", sichtbar
   nur beim Fokus, ohne Bewegung (wie die Sprungmarke in base.css). */
body.yk .yr3-bewegung-sprung {
  position: absolute;
  top: var(--yk-space-xs, 8px);
  left: var(--yk-space-xs, 8px);
  z-index: var(--yk-z-skip-link, 200);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 8px 16px;
  border: 0;
  border-radius: 0;
  background: var(--yl-sand);
  color: var(--yl-brand);
  font: 700 16px/1.3 var(--yl-font-body);
  cursor: pointer;
  transform: translateY(calc(-100% - 40px));
}

body.yk .yr3-bewegung-sprung:focus {
  transform: none;
}

body.yk .yr3-bewegung-sprung .yr3-bewegung__zustand {
  color: var(--yl-brand);
}

body.yk .yr3-bewegung-sprung:focus-visible {
  outline: 3px solid var(--yl-brand) !important;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body.yk .yr3-bewegung__spur,
  body.yk .yr3-bewegung__spur::after {
    transition: none;
  }
}

@media print {
  body.yk .yr3-bewegung,
  body.yk .yr3-bewegung-sprung {
    display: none !important;
  }
}

/* Rechtliches als eigene Spalte (R2/A): mobil ueber die volle Breite unter Leistungen
   und Informationen, auf Tablet und Desktop direkt unter Informationen. Die Spalten
   davor reichen dafuer ueber zwei Zeilen. */
body.yk .yk-footer .yl-fuss-recht-spalte {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  body.yk .yk-footer .yk-footer__col--brand + .yk-footer__col,
  body.yk .yk-footer .yk-footer__col--brand + .yk-footer__col + .yk-footer__col {
    grid-row: span 2;
  }

  body.yk .yk-footer .yl-fuss-recht-spalte {
    grid-column: 3;
  }
}

@media (min-width: 1024px) {
  body.yk .yk-footer .yk-footer__col--brand {
    grid-row: span 2;
  }

  body.yk .yk-footer .yl-fuss-recht-spalte {
    grid-column: 4;
  }
}

/* ------------------------------------------------------------ Editor-Vorschau */

/* Die Vorschau ist schmaler als der Bildschirm (Panel links) und laege sonst im
   mobilen Menuemodus. Dort steht das Menue als Zeile, damit das Navigations-Widget
   sichtbar und anwaehlbar ist; Panelkopf, Kontaktwege und Abdunklung entfallen. */
body.yk.elementor-editor-active .yk-header .yk-nav__panel {
  position: static !important;
  display: contents !important;
  transform: none !important;
  visibility: visible !important;
}

body.yk.elementor-editor-active .yk-header .yk-nav__panel-head,
body.yk.elementor-editor-active .yk-header .yk-nav__panel-contact,
body.yk.elementor-editor-active .yk-header .yk-nav__backdrop,
body.yk.elementor-editor-active .yk-header .yk-nav__burger,
body.yk.elementor-editor-active .yk-header .yk-nav__sub { display: none !important; }

body.yk.elementor-editor-active .yk-header .yk-nav__list {
  display: flex !important;
  position: static !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 0 18px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.yk.elementor-editor-active .yk-header .yk-nav__list > .yk-nav__item {
  opacity: 1 !important;
  transform: none !important;
  border: 0 !important;
}

body.yk.elementor-editor-active .yk-header .yk-nav__link {
  min-height: 44px;
  color: var(--yl-ink) !important;
  font-family: var(--yl-font-body) !important;
  font-size: 14px !important;
  font-weight: 700;
  text-transform: uppercase;
}

/* Logo senkrecht mittig: der Markencontainer ist in Elementor ein Spalten-Flex. */
body.yk .yk-header__brand {
  flex-direction: row;
  align-items: center;
}

/* Ortsleiste im Fuss: Textbausteinliste ohne Redaktionsregel aus base.css. */
body.yk .yk-footer .elementor-widget-text-editor .yl-fuss-orte__liste {
  max-width: none;
  margin: 0;
  padding: 0;
}

body.yk .yk-footer .elementor-widget-text-editor .yl-fuss-orte__liste li {
  margin: 0;
}

/* Fusslogo: das Seitenverhaeltnis gilt nur fuer das Bild, nicht fuer den ganzen
   Baustein (sonst entsteht unter dem Logo eine Luecke in Spaltenbreite). */
body.yk .yk-footer .elementor-widget-image.yk-footer__logo {
  aspect-ratio: auto;
  height: auto;
  max-width: none;
}

body.yk .yk-footer .yk-footer__about {
  margin-top: 20px;
}

/* Schmale Bildschirme: Leistungen bekommen etwas mehr Breite, damit lange
   Woerter wie Klinkerimpraegnierung nicht abgeschnitten werden. Die Ortsleiste
   bricht ohne Trennpunkte um, damit keine Zeile mit einem Punkt beginnt. */
@media (max-width: 767px) {
  body.yk .yk-footer .yk-footer__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 40px 18px;
  }

  body.yk .yk-footer .yk-nav--stacked .yk-nav__link {
    gap: 8px;
    font-size: 15px;
  }

  body.yk .yk-footer .yk-nav--stacked .yk-nav__label {
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  body.yk .yl-fuss-orte__liste {
    gap: 0 18px;
  }

  body.yk .yl-fuss-orte__liste li + li::before {
    display: none;
  }
}

/* Tablet: Ortszeilen brechen um; ohne Trennpunkte, damit keine Zeile mit einem
   Punkt beginnt (wie mobil). */
@media (min-width: 768px) and (max-width: 1023px) {
  body.yk .yl-fuss-orte__liste {
    gap: 0 18px;
  }

  body.yk .yl-fuss-orte__liste li + li::before {
    display: none;
  }

  body.yk .yl-fuss-orte__zeile {
    grid-template-columns: 250px minmax(0, 1fr);
  }
}

/* 1024 bis 1279: Kontaktspalte breiter, damit Telefonnummer und E-Mail in
   einer Zeile bleiben. */
@media (min-width: 1024px) and (max-width: 1279px) {
  body.yk .yk-footer .yk-footer__grid {
    grid-template-columns: 1fr 1.3fr 1fr 0.85fr;
    gap: 40px;
  }
}

body.yk .yk-footer .yl-flist a {
  overflow-wrap: anywhere;
}

/* Kontakt-Dock: kurzes Einblenden des Felds beim Oeffnen (Feinschliff S0-K).
   Schliessen bleibt sofort, wie bei Aufklappfeldern ueblich. */
@keyframes yl-dock-auf {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

body.yk .yk-dock__shell[open] > .yk-dock__panel {
  animation: yl-dock-auf 220ms var(--yl-ease);
}

@media (prefers-reduced-motion: reduce) {
  body.yk .yk-dock__shell[open] > .yk-dock__panel {
    animation: none;
  }
}

/* Editor-Vorschau: Abstand zwischen den Menuepunkten der Kopfzeile. */
body.yk.elementor-editor-active .yk-header .yk-nav__list > .yk-nav__item {
  margin-right: 18px !important;
}