/*
 * Gestaltungsschicht nach der Live-Seite (Designkorrektur S0-K, 30.09.2026).
 *
 * Grundlage: Kompositionen und gemessene Werte von https://yakobs-fugenbetrieb.de/
 * (Ruffer-Tokens --title-color #141422, --body-color #6F6E77, --smoke-color #F3F1F2,
 * Markenfarbe #310001, Manrope fuer Ueberschriften, Roboto fuer Text) und die
 * Pixelmessungen in S0/KORREKTUR_STATUS.md. Die Ruffer-Stile selbst bleiben
 * abgemeldet; alle Module sind hier nachgebaut und arbeiten mit Elementor-
 * Containern und Standardwidgets.
 *
 * Namensraum yl- (Yakobs Live). Jede Regel beginnt mit body.yk, damit sie gegen
 * Elementor-Grundregeln und verbliebene fremde Regeln sicher gewinnt.
 */

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-latin-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------ Markenwerte */

:root {
  --yl-brand: #310001;
  --yl-brand-2: #4b0002;
  --yl-brand-hover: #4a0a0e;
  --yl-ink: #141422;
  --yl-ink-deep: #0a0a18;
  /* R3/S0 Kontrast: #6f6e77 erreichte auf --yl-smoke 4,48:1 und auf --yl-grey 4,22:1 (WCAG AA 4,5:1).
     #6a6972 ist fuenf Stufen dunkler im selben Ton: 4,82:1, 4,54:1, auf Weiss 5,42:1. */
  --yl-body: #6a6972;
  --yl-smoke: #f3f1f2;
  --yl-grey: #ebebeb;
  --yl-line: #e6e6e6;
  --yl-line-strong: #cdcdcd;
  --yl-sand: #f0e4b9;
  --yl-white: #ffffff;
  --yl-on-dark: rgba(255, 255, 255, 0.78);

  --yl-font-title: 'Manrope', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --yl-font-body: 'Roboto', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

  --yl-container: 1290px;
  --yl-gutter: 20px;
  --yl-space: 80px;
  --yl-space-sm: 56px;
  --yl-head-gap: 40px;
  --yl-radius: 4px;
  --yl-shadow: 0 12px 40px rgba(20, 20, 34, 0.09);
  --yl-shadow-strong: 0 18px 50px rgba(20, 20, 34, 0.16);
  --yl-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --yl-header-h: 84px;

  /* Takt (R2/A): benannte Abstandsrollen auf der Skala 8/16/24/32/48/72/104,
     fuer alle Seitentypen gleich. Einzelwerte in Modulen verweisen hierauf. */
  --yl-takt-titel-text: 20px;
  --yl-takt-aktion: 32px;
  --yl-takt-gruppe: 24px;
  /* Fliesstext: 58ch Roboto ergeben etwa 70 bis 75 Zeichen je Zeile. */
  --yl-takt-mass: 58ch;
  --yl-seitenkopf-y: 56px;

  /* Einstieg: Ueberlappung der Leistungsleiste und freie Luft zwischen Knopf und
     Leiste (R3/A: mehr Luft, knappere Ueberlappung, keine ueberstehende Hausform).
     Mobil keine Ueberlappung. */
  --yl-hero-ueberlappung: 0px;
  --yl-hausform: 0px;
  --yl-hero-luft: 56px;

  /* Rautengitter der Markenflaechen (Zaehlerband und Aufrufband der Live-Seite). */
  --yl-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1.2'%3E%3Cpath d='M60 6 114 60 60 114 6 60z'/%3E%3Cpath d='M60 26 94 60 60 94 26 60z'/%3E%3C/g%3E%3C/svg%3E");
  /* Ziegelverband fuer den Fuss (ersetzt das Demo-Hintergrundbild der Live-Seite). */
  --yl-bricks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='64' viewBox='0 0 160 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='2'%3E%3Cpath d='M0 1h160M0 33h160M40 1v32M120 1v32M0 33v31M80 33v31M160 33v31'/%3E%3C/g%3E%3C/svg%3E");
  /* Punktraster der Leistungskarten. */
  --yl-dots: radial-gradient(circle, rgba(20, 20, 34, 0.14) 1.2px, transparent 1.6px);

  /* Bestehende Tokens der Schichten davor auf die Live-Werte umstellen. */
  --yk-color-brand-deep: #310001;
  --yk-color-brand: #310001;
  --yk-color-text: #141422;
  --yk-color-text-muted: #6a6972;
  --yk-color-surface: #ffffff;
  --yk-color-surface-alt: #f3f1f2;
  --yk-color-surface-card: #ffffff;
  --yk-color-line: #e6e6e6;
  --yk-color-focus: #310001;
  --yk-font-sans: var(--yl-font-body);
  --yk-font-display: var(--yl-font-title);
  --yk-content-width: 1290px;
  /* Textmass aller Absaetze und Listen aus dem Takt (R2/A, vorher 68ch = etwa 86 Zeichen). */
  --yk-measure-text: var(--yl-takt-mass);
}

@media (min-width: 768px) {
  :root {
    --yl-gutter: 32px;
    --yl-space: 100px;
    --yl-space-sm: 72px;
    --yl-head-gap: 50px;
    --yl-takt-titel-text: 24px;
    --yl-takt-aktion: 40px;
    --yl-seitenkopf-y: 88px;
    --yl-hero-ueberlappung: 40px;
    --yl-hero-luft: 72px;
  }
}

@media (min-width: 1024px) {
  :root {
    --yl-hero-ueberlappung: 56px;
    --yl-hero-luft: 88px;
  }
}

@media (min-width: 1200px) {
  :root {
    --yl-gutter: 40px;
    --yl-space: 120px;
    --yl-space-sm: 88px;
    --yl-head-gap: 60px;
    --yl-header-h: 96px;
    --yl-seitenkopf-y: 104px;
  }
}

/* ------------------------------------------------------------ Grundschrift */

body.yk {
  background-color: var(--yl-white);
  color: var(--yl-body);
  font-family: var(--yl-font-body);
  font-size: 16px;
  line-height: 1.7;
  --container-max-width: var(--yl-container);
}

body.yk h1,
body.yk h2,
body.yk h3,
body.yk h4,
body.yk .elementor-heading-title {
  font-family: var(--yl-font-title);
  color: var(--yl-ink);
  letter-spacing: -0.01em;
}

body.yk p {
  margin: 0 0 1em;
}

body.yk p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------ Abschnitte */

body.yk .yl-sec {
  position: relative;
  padding: var(--yl-space) var(--yl-gutter);
  background-color: var(--yl-white);
}

body.yk .yl-sec.e-con-boxed > .e-con-inner,
body.yk .yl-wrap {
  width: 100%;
  max-width: var(--yl-container);
  margin-inline: auto;
}

body.yk .yl-sec--smoke { background-color: var(--yl-smoke); }
body.yk .yl-sec--grey { background-color: var(--yl-grey); }
body.yk .yl-sec--ink { background-color: var(--yl-ink); color: var(--yl-on-dark); }
body.yk .yl-sec--brand { background-color: var(--yl-brand); color: var(--yl-on-dark); }
body.yk .yl-sec--tight { padding-block: var(--yl-space-sm); }
body.yk .yl-sec--flush-top { padding-top: 0; }
body.yk .yl-sec--flush-bottom { padding-bottom: 0; }

body.yk .yl-sec--ink .elementor-heading-title,
body.yk .yl-sec--brand .elementor-heading-title,
body.yk .yl-sec--ink h2,
body.yk .yl-sec--brand h2,
body.yk .yl-sec--ink h3,
body.yk .yl-sec--brand h3 {
  color: var(--yl-white);
}

/* Zweispaltige Reihen, mobil gestapelt. */
body.yk .yl-row {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

@media (min-width: 1024px) {
  body.yk .yl-row {
    flex-direction: row;
    align-items: center;
    gap: clamp(48px, 6vw, 96px);
  }
  body.yk .yl-row--top { align-items: flex-start; }
  body.yk .yl-row > .yl-col { flex: 1 1 0; min-width: 0; }
  body.yk .yl-row > .yl-col--wide { flex: 1.25 1 0; }
  body.yk .yl-row > .yl-col--narrow { flex: 0.8 1 0; }
}

body.yk .yl-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

/* ------------------------------------------------------------ Kopfgruppen */

body.yk .yl-head {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--yl-head-gap);
  max-width: 760px;
}

body.yk .yl-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

body.yk .yl-head--flush { margin-bottom: 0; }

/* Vorzeile mit Doppelstrich, wie ruffersectiontitle der Live-Seite. */
body.yk .yl-kicker .elementor-heading-title {
  position: relative;
  display: inline-block;
  margin: 0 0 14px;
  padding-left: 40px;
  font-family: var(--yl-font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--yl-brand);
}

body.yk .yl-kicker .elementor-heading-title::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 .yl-head--center .yl-kicker .elementor-heading-title {
  padding-right: 0;
}

body.yk .yl-kicker--light .elementor-heading-title,
body.yk .yl-sec--ink .yl-kicker .elementor-heading-title,
body.yk .yl-sec--brand .yl-kicker .elementor-heading-title,
body.yk .yl-request .yl-kicker .elementor-heading-title {
  color: var(--yl-sand);
}

body.yk .yl-title .elementor-heading-title {
  margin: 0;
  font-size: clamp(30px, 2.1vw + 17px, 46px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

body.yk .yl-title--sm .elementor-heading-title {
  font-size: clamp(26px, 1.4vw + 16px, 36px);
}

/* Takt (R2/A): Titel zu Text aus dem Token; das Textmass gilt ueber --yk-measure-text
   fuer alle Absaetze und Listen (base.css). */
body.yk .yl-text {
  margin-top: var(--yl-takt-titel-text);
  color: var(--yl-body);
}

body.yk .yl-head--center .yl-text {
  margin-inline: auto;
}

body.yk .yl-sec--ink .yl-text,
body.yk .yl-sec--brand .yl-text,
body.yk .yl-request .yl-text {
  color: var(--yl-on-dark);
}

/* ------------------------------------------------------------ Knoepfe */

body.yk .yl-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 18px 34px;
  border: 0;
  border-radius: var(--yl-radius);
  background-color: var(--yl-brand);
  color: var(--yl-white);
  font-family: var(--yl-font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 200ms var(--yl-ease), color 200ms var(--yl-ease), transform 140ms var(--yl-ease);
}

body.yk .yl-btn .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body.yk .yl-btn .elementor-button-content-wrapper::after {
  content: '';
  width: 18px;
  height: 18px;
  flex: none;
  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-btn .elementor-button:hover {
    background-color: var(--yl-ink);
    color: var(--yl-white);
  }
  body.yk .yl-btn .elementor-button:hover .elementor-button-content-wrapper::after {
    transform: translateX(3px);
  }
  body.yk .yl-btn--light .elementor-button:hover,
  body.yk .yl-sec--ink .yl-btn .elementor-button:hover,
  body.yk .yl-hero .yl-btn .elementor-button:hover {
    background-color: var(--yl-white);
    color: var(--yl-ink);
  }
}

body.yk .yl-btn .elementor-button:active {
  transform: scale(0.97);
}

body.yk .yl-btn--light .elementor-button {
  background-color: var(--yl-white);
  color: var(--yl-ink);
}

body.yk .yl-btn--ink .elementor-button {
  background-color: var(--yl-ink);
}

/* Textverweis mit Schraegpfeil, wie MEHR ERFAHREN auf den Leistungskarten. */
body.yk .yl-more .elementor-heading-title {
  margin: 0;
  font-family: var(--yl-font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

body.yk .yl-more .elementor-heading-title a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--yl-ink);
  text-decoration: none;
}

body.yk .yl-more .elementor-heading-title a::after {
  content: '';
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--yl-i-schraeg) center / contain no-repeat;
  mask: var(--yl-i-schraeg) center / contain no-repeat;
}

/* Anrufzeile: Kreis mit Telefon, darueber die Beschriftung, darunter die Nummer. */
body.yk .yl-call {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 60px;
  padding-left: 80px;
}

body.yk .yl-call::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 60px;
  height: 60px;
  margin-top: -30px;
  border-radius: 50%;
  background: var(--yl-ink);
}

body.yk .yl-call::after {
  content: '';
  position: absolute;
  left: 19px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  background-color: var(--yl-white);
  -webkit-mask: var(--yl-i-telefon) center / contain no-repeat;
  mask: var(--yl-i-telefon) center / contain no-repeat;
}

body.yk .yl-call__label .elementor-heading-title {
  margin: 0;
  font-family: var(--yl-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--yl-body);
}

body.yk .yl-call__number .elementor-heading-title {
  margin: 0;
  font-family: var(--yl-font-body);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--yl-ink);
}

body.yk .yl-call__number .elementor-heading-title a {
  color: inherit;
  text-decoration: none;
}

body.yk .yl-call--light::before,
body.yk .yl-sec--ink .yl-call::before,
body.yk .yl-request .yl-call::before {
  background: var(--yl-brand);
}

body.yk .yl-call--light .yl-call__label .elementor-heading-title,
body.yk .yl-request .yl-call__label .elementor-heading-title {
  color: rgba(255, 255, 255, 0.72);
}

body.yk .yl-call--light .yl-call__number .elementor-heading-title,
body.yk .yl-request .yl-call__number .elementor-heading-title {
  color: var(--yl-white);
}

body.yk .yl-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--yl-takt-gruppe) 32px;
  margin-top: var(--yl-takt-aktion);
}

/* Symboltraeger: jedes Element mit yl-ico-<name> bekommt sein Symbol ueber --yl-icon. */
body.yk .yl-icon-mask {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--yl-icon) center / contain no-repeat;
  mask: var(--yl-icon) center / contain no-repeat;
}

/* ------------------------------------------------------------ Einstieg mit Video */

body.yk .yl-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(100svh, 920px);
  /* Unten: Ueberlappung der Kacheln, Hausform und freie Luft zum Knopf (Takt R2/A). */
  padding: calc(var(--yl-header-h) + 72px) var(--yl-gutter) calc(var(--yl-hero-ueberlappung) + var(--yl-hausform) + var(--yl-hero-luft));
  background-color: var(--yl-ink);
  overflow: hidden;
  color: var(--yl-white);
}

@media (min-width: 1024px) {
  body.yk .yl-hero {
    justify-content: center;
    min-height: min(100svh, 940px);
    padding-top: calc(var(--yl-header-h) + 90px);
  }
}

/* Kurze Displays: weniger Luft unter dem Kopf statt kuenstlich gestrecktem Einstieg. */
@media (min-width: 1024px) and (max-height: 760px) {
  body.yk .yl-hero {
    padding-top: calc(var(--yl-header-h) + 40px);
  }
}

/* Beide Videofassungen liegen als Standard-Videowidget im Abschnitt. Sichtbar ist
   je Breite eine; live.js laedt und startet nur diese. */
body.yk .yl-hero__video {
  position: absolute !important;
  inset: 0;
  z-index: -2;
  width: 100% !important;
  height: 100%;
  margin: 0 !important;
  pointer-events: none;
}

body.yk .yl-hero__video .elementor-wrapper,
body.yk .yl-hero__video .e-hosted-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

/* R3/A: Querfassung ist ein 3:2-Ausschnitt (1080x720) aus dem Hochkantoriginal; die
   Haende liegen im oberen Drittel. Breite Bildschirme schneiden daher unten mehr ab. */
body.yk .yl-hero__video video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 32%;
  background-color: var(--yl-ink);
}

body.yk .yl-hero__video .elementor-custom-embed-image-overlay,
body.yk .yl-hero__video .elementor-custom-embed-play {
  display: none !important;
}

body.yk .yl-hero__video--hoch { display: none; }

@media (max-width: 767px) {
  body.yk .yl-hero__video--quer { display: none; }
  body.yk .yl-hero__video--hoch { display: block; }
  body.yk .yl-hero__video--hoch video { object-position: 50% 40%; }
}

/* Abdunklung (R3/A): nur so viel, wie Kopfzeile und Schrift brauchen. Links hinter dem
   Text, oben hinter der Navigation; rechts und unten bleibt der Film hell (Produktion
   legt nur einen leichten Grauschleier von 32 Prozent ueber das Video). Keine
   Vollflaechenabdunklung. */
body.yk .yl-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 10, 24, 0.66) 0%, rgba(10, 10, 24, 0.46) 34%, rgba(10, 10, 24, 0.08) 62%, rgba(10, 10, 24, 0) 78%),
    linear-gradient(180deg, rgba(10, 10, 24, 0.5) 0%, rgba(10, 10, 24, 0) 24%);
  pointer-events: none;
}

/* Mobil liegt der Text unten: Verlauf nur im unteren Drittel, die Haende in der
   Bildmitte bleiben frei. */
@media (max-width: 767px) {
  body.yk .yl-hero::before {
    background:
      linear-gradient(180deg, rgba(10, 10, 24, 0.48) 0%, rgba(10, 10, 24, 0) 18%),
      linear-gradient(0deg, rgba(10, 10, 24, 0.78) 0%, rgba(10, 10, 24, 0.5) 32%, rgba(10, 10, 24, 0) 56%);
  }
}

body.yk .yl-hero__content {
  position: relative;
  width: 100%;
  max-width: var(--yl-container);
  margin-inline: auto;
}

body.yk .yl-hero__content > .e-con-inner {
  max-width: none;
}

body.yk .yl-hero__title .elementor-heading-title {
  max-width: 13.5em;
  margin: 0;
  color: var(--yl-white);
  font-size: clamp(40px, 4.4vw + 16px, 84px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(10, 10, 24, 0.25);
}

body.yk .yl-hero__text {
  max-width: 34em;
  margin-top: calc(var(--yl-takt-titel-text) + 8px);
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(16px, 0.4vw + 14px, 19px);
  line-height: 1.65;
}

body.yk .yl-hero .yl-kicker .elementor-heading-title {
  color: var(--yl-sand);
}

body.yk .yl-hero .yl-actions {
  margin-top: calc(var(--yl-takt-aktion) + 8px);
}

/* Markenstelle der Startseite (R2/A): die Fugenlinie der Vorzeile zieht sich
   einmal, wenn der Vorlauf ausgeblendet ist, erst die lange, dann die versetzte
   kurze Linie wie im Laeuferverband. Ohne Skript oder bei reduzierter Bewegung
   steht sie sofort. */
@keyframes yl-fuge-ziehen {
  0% { background-size: 0 2px, 0 2px; }
  60% { background-size: 30px 2px, 0 2px; }
  100% { background-size: 30px 2px, 20px 2px; }
}

body.yk .yl-hero.is-fuge-start .yl-kicker .elementor-heading-title::before {
  background-size: 0 2px, 0 2px;
}

body.yk .yl-hero.is-fuge .yl-kicker .elementor-heading-title::before {
  animation: yl-fuge-ziehen 900ms var(--yl-ease) both;
}

@media (prefers-reduced-motion: reduce) {
  body.yk .yl-hero.is-fuge-start .yl-kicker .elementor-heading-title::before,
  body.yk .yl-hero.is-fuge .yl-kicker .elementor-heading-title::before {
    animation: none;
    background-size: 30px 2px, 20px 2px;
  }
}

/* Fokus auf dunklen Flaechen in Sand statt Bordeaux, sonst unsichtbar (R2/A). */
body.yk .yl-hero :focus-visible,
body.yk .yl-request :focus-visible,
body.yk .yl-cta-band :focus-visible,
body.yk .yl-band :focus-visible,
body.yk .yl-sec--ink :focus-visible,
body.yk .yl-sec--brand :focus-visible {
  outline-color: var(--yl-sand) !important;
}

/* Videoflaeche als Bedienung (R2/A). live.js setzt einen echten Knopf hinter die
   Inhalte; frei liegende Stellen des Videos halten an oder starten. Zustand und
   Fokus erscheinen nur bei Zeiger, Tastatur oder kurz nach einer Beruehrung, es
   gibt keine dauerhaft sichtbare Pille. Titel, Text und Knopf liegen darueber. */
body.yk .yl-hero__flaeche {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--yl-white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Inhalte ueber der Flaeche; nur Text und Verweise nehmen Zeiger an, die
   Zwischenraeume gehoeren der Videoflaeche. */
body.yk .yl-hero__content {
  z-index: 1;
}

body.yk .yl-hero.has-flaeche .yl-hero__content,
body.yk .yl-hero.has-flaeche .yl-hero__content .e-con,
body.yk .yl-hero.has-flaeche .yl-hero__content .elementor-widget,
body.yk .yl-hero.has-flaeche .yl-hero__content .elementor-widget-container {
  pointer-events: none;
}

body.yk .yl-hero.has-flaeche .yl-hero__content .elementor-heading-title,
body.yk .yl-hero.has-flaeche .yl-hero__content p,
body.yk .yl-hero.has-flaeche .yl-hero__content a {
  pointer-events: auto;
}

/* Zustandsanzeige: benennt die naechste Handlung, wie ein Medienknopf. */
body.yk .yl-hero__zustand {
  position: absolute;
  right: max(var(--yl-gutter), calc((100% - var(--yl-container)) / 2));
  bottom: calc(var(--yl-hero-ueberlappung) + var(--yl-hausform) + var(--yl-hero-luft));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  border-radius: var(--yl-radius);
  background: rgba(10, 10, 24, 0.74);
  color: var(--yl-white);
  font: 500 14px/1 var(--yl-font-body);
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms var(--yl-ease), transform 200ms var(--yl-ease);
  pointer-events: none;
}

/* Fugenlinie unter dem Zustand statt Rahmen oder Glas. */
body.yk .yl-hero__zustand::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 16px;
  bottom: 8px;
  height: 2px;
  background: var(--yl-sand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms var(--yl-ease);
}

body.yk .yl-hero__zustand-symbol {
  width: 18px;
  height: 18px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--yl-i-pause) center / contain no-repeat;
  mask: var(--yl-i-pause) center / contain no-repeat;
}

body.yk .yl-hero:not(.is-playing) .yl-hero__zustand-symbol {
  -webkit-mask-image: var(--yl-i-play);
  mask-image: var(--yl-i-play);
}

@media (hover: hover) and (pointer: fine) {
  body.yk .yl-hero__flaeche:hover .yl-hero__zustand {
    opacity: 1;
    transform: none;
  }
}

body.yk .yl-hero.is-meldung .yl-hero__zustand,
body.yk .yl-hero__flaeche:focus-visible .yl-hero__zustand {
  opacity: 1;
  transform: none;
}

/* Tastaturfokus: der Knopf ist die ganze Flaeche. Ein Sandrahmen innen am Rand der
   Videoflaeche zeigt, was fokussiert ist; die Zustandsanzeige nennt die Handlung. */
body.yk .yl-hero__flaeche:focus-visible {
  outline: 3px solid var(--yl-sand) !important;
  outline-offset: -3px !important;
}

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

body.yk .yl-hero__flaeche:focus-visible .yl-hero__zustand::after {
  transform: scaleX(1);
}

/* Mobil liegt der Text unten; die freie Videoflaeche ist oben. */
@media (max-width: 767px) {
  body.yk .yl-hero__zustand {
    top: calc(var(--yl-header-h) + 16px);
    right: var(--yl-gutter);
    bottom: auto;
  }
}

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

/* ------------------------------------------------------------ Leistungsband */

body.yk .yl-services {
  position: relative;
  z-index: 3;
  margin-top: calc(-1 * var(--yl-hero-ueberlappung));
  padding: 0 var(--yl-gutter);
  background: transparent;
}


body.yk .yl-services__viewport {
  position: relative;
  max-width: var(--yl-container);
  margin-inline: auto;
}

body.yk .yl-services__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 82%);
  gap: 24px;
  padding: 50px 2px 36px;
  margin: -50px -2px -36px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

body.yk .yl-services__track::-webkit-scrollbar { display: none; }

@media (min-width: 640px) {
  body.yk .yl-services__track { grid-auto-columns: calc((100% - 24px) / 2); }
}

@media (min-width: 1024px) {
  body.yk .yl-services__track { grid-auto-columns: calc((100% - 72px) / 4); }
}

body.yk .yl-svc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
  padding: 108px 32px 40px;
  background-color: var(--yl-white);
  box-shadow: var(--yl-shadow);
  scroll-snap-align: start;
  transition: background-color 300ms var(--yl-ease), box-shadow 300ms var(--yl-ease);
}

/* Punktraster oben rechts, wie auf den Karten der Live-Seite. */
body.yk .yl-svc::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 62%;
  height: 96px;
  background-image: var(--yl-dots);
  background-size: 11px 11px;
  -webkit-mask-image: linear-gradient(225deg, #000 10%, transparent 70%);
  mask-image: linear-gradient(225deg, #000 10%, transparent 70%);
  pointer-events: none;
}

/* Hausform mit Symbol: der Markenwinkel ragt ueber die Karte hinaus. */
body.yk .yl-svc::before,
body.yk .yl-card__badge::before {
  content: '';
  position: absolute;
  left: 40px;
  top: -40px;
  width: 84px;
  height: 98px;
  background-color: var(--yl-brand);
  clip-path: polygon(50% 0, 100% 40.8%, 100% 100%, 0 100%, 0 40.8%);
  transition: background-color 300ms var(--yl-ease);
}

/* Titel ohne eigene Positionierung: Symbol und Klickflaeche beziehen sich auf die Karte. */
body.yk .yl-svc > .yl-svc__title {
  position: static;
}

body.yk .yl-svc > .yl-svc__title::before {
  content: '';
  position: absolute;
  left: 61px;
  top: 8px;
  z-index: 1;
  width: 42px;
  height: 42px;
  background-color: var(--yl-white);
  -webkit-mask: var(--yl-icon) center / contain no-repeat;
  mask: var(--yl-icon) center / contain no-repeat;
  pointer-events: none;
}

body.yk .yl-svc__title .elementor-heading-title {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

body.yk .yl-svc__title .elementor-heading-title a {
  color: inherit;
  text-decoration: none;
}

/* Ganze Karte klickbar, der Link bleibt die Ueberschrift. */
body.yk .yl-svc__title .elementor-heading-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}

body.yk .yl-svc__text {
  color: var(--yl-body);
  font-size: 16px;
  line-height: 1.7;
}

body.yk .yl-svc:focus-within,
body.yk .yl-svc.is-active {
  background-color: var(--yl-ink);
}

@media (hover: hover) and (pointer: fine) {
  body.yk .yl-svc:hover {
    background-color: var(--yl-ink);
    box-shadow: var(--yl-shadow-strong);
  }
  body.yk .yl-svc:hover .yl-svc__title .elementor-heading-title,
  body.yk .yl-svc:hover .yl-svc__text {
    color: var(--yl-white);
  }
  body.yk .yl-svc:hover::after {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 1.2px, transparent 1.6px);
  }
}

body.yk .yl-svc:focus-within .yl-svc__title .elementor-heading-title,
body.yk .yl-svc:focus-within .yl-svc__text,
body.yk .yl-svc.is-active .yl-svc__title .elementor-heading-title,
body.yk .yl-svc.is-active .yl-svc__text {
  color: var(--yl-white);
}

body.yk .yl-svc:focus-within::after,
body.yk .yl-svc.is-active::after {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 1.2px, transparent 1.6px);
}

body.yk .yl-svc .elementor-heading-title a:focus-visible {
  outline: none !important;
}

body.yk .yl-svc:has(a:focus-visible) {
  outline: 3px solid var(--yl-sand);
  outline-offset: 3px;
}

/* Blaetterknoepfe fuer das Band, von live.js eingesetzt, nur wenn es ueberlaeuft. */
body.yk .yl-rail-nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px;
}

body.yk .yl-rail-nav[hidden] { display: none; }

body.yk .yl-rail-btn {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--yl-line-strong);
  border-radius: 50%;
  background: var(--yl-white);
  color: var(--yl-ink);
  cursor: pointer;
  transition: background-color 200ms var(--yl-ease), color 200ms var(--yl-ease), border-color 200ms var(--yl-ease);
}

body.yk .yl-rail-btn::before {
  content: '';
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--yl-i-pfeil) center / contain no-repeat;
  mask: var(--yl-i-pfeil) center / contain no-repeat;
}

body.yk .yl-rail-btn--prev::before {
  -webkit-mask-image: var(--yl-i-links);
  mask-image: var(--yl-i-links);
}

body.yk .yl-rail-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  body.yk .yl-rail-btn:not(:disabled):hover {
    background: var(--yl-brand);
    border-color: var(--yl-brand);
    color: var(--yl-white);
  }
}

/* ------------------------------------------------------------ Bildkomposition mit Siegel */

body.yk .yl-about__media {
  position: relative;
  padding: 0 48px 48px 0;
}

body.yk .yl-about__media::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  top: 48px;
  left: 48px;
  z-index: -1;
  border: 4px solid var(--yl-brand);
}

body.yk .yl-about__img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
}

body.yk .yl-about__media { isolation: isolate; }

/* Rundsiegel: Text aus einem Elementor-Feld, live.js setzt die Buchstaben auf den Kreis. */
body.yk .yl-seal {
  position: absolute;
  left: -28px;
  top: -28px;
  z-index: 2;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: var(--yl-brand);
  box-shadow: 0 0 0 10px var(--yl-white);
}

@media (max-width: 767px) {
  body.yk .yl-seal { width: 132px; height: 132px; left: -8px; top: -20px; box-shadow: 0 0 0 6px var(--yl-white); }
}

body.yk .yl-seal::before {
  content: '';
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: var(--yl-white);
}

body.yk .yl-seal::after {
  content: '';
  position: absolute;
  inset: 36%;
  background-color: var(--yl-brand);
  -webkit-mask: var(--yl-i-ziegelstapel) center / contain no-repeat;
  mask: var(--yl-i-ziegelstapel) center / contain no-repeat;
}

body.yk .yl-seal .elementor-heading-title {
  margin: 0;
  color: var(--yl-white);
  font-family: var(--yl-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.yk .yl-seal.is-round .elementor-heading-title {
  position: absolute;
  inset: 0;
  animation: yl-drehen 28s linear infinite;
}

body.yk .yl-seal.is-round .yl-seal__char {
  position: absolute;
  left: 50%;
  top: 7%;
  height: 43%;
  transform-origin: 50% 100%;
  line-height: 1;
}

@media (max-width: 767px) {
  body.yk .yl-seal .elementor-heading-title { font-size: 10px; }
}

@keyframes yl-drehen {
  to { transform: rotate(360deg); }
}

/* Merkmale unter dem Text, obere Markenlinie. */
body.yk .yl-minis {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 44px;
  border-top: 3px solid var(--yl-brand);
  box-shadow: var(--yl-shadow);
  background: var(--yl-white);
}

@media (min-width: 640px) {
  body.yk .yl-minis { grid-template-columns: 1fr 1fr; }
}

body.yk .yl-mini {
  padding: 30px 30px 32px;
}

body.yk .yl-mini + .yl-mini {
  border-top: 1px solid var(--yl-line);
}

@media (min-width: 640px) {
  body.yk .yl-mini + .yl-mini { border-top: 0; border-left: 1px solid var(--yl-line); }
}

body.yk .yl-mini__title .elementor-heading-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
}

body.yk .yl-mini__text {
  font-size: 15px;
  line-height: 1.7;
}

/* ------------------------------------------------------------ Laufband */

body.yk .yl-marquee {
  position: relative;
  padding: 44px 0;
  background-color: var(--yl-smoke);
  overflow: hidden;
}

body.yk .yl-marquee__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  width: max-content;
  max-width: none;
}

/* Gruppe der Eintraege; live.js misst ihre Breite und setzt Kopien dahinter. */
body.yk .yl-marquee__group {
  display: flex;
  flex: none;
  flex-wrap: nowrap;
  align-items: center;
}

body.yk .yl-marquee.is-running .yl-marquee__track {
  animation: yl-laufband var(--yl-marquee-dauer, 40s) linear infinite;
  will-change: transform;
}

body.yk .yl-marquee.is-user-paused .yl-marquee__track,
body.yk .yl-marquee.is-hover-paused .yl-marquee__track,
body.yk .yl-marquee.is-offscreen .yl-marquee__track {
  animation-play-state: paused;
}

@keyframes yl-laufband {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--yl-marquee-weg, -50%), 0, 0); }
}

body.yk .yl-marquee__item {
  flex: none;
  padding-right: 64px;
}

body.yk .yl-marquee__item .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  font-family: var(--yl-font-title);
  font-size: clamp(34px, 2.6vw + 16px, 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--yl-ink);
}

body.yk .yl-marquee__item .elementor-heading-title::before {
  content: '';
  width: 0.72em;
  height: 0.72em;
  flex: none;
  background-color: var(--yl-brand);
  -webkit-mask: var(--yl-i-ziegelstapel) center / contain no-repeat;
  mask: var(--yl-i-ziegelstapel) center / contain no-repeat;
}

@supports not (-webkit-text-stroke: 1px #000) {
  body.yk .yl-marquee__item .elementor-heading-title { color: var(--yl-ink); }
}

body.yk .yl-marquee__toggle {
  position: absolute;
  right: 12px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--yl-line-strong);
  border-radius: 50%;
  background: var(--yl-white);
  color: var(--yl-ink);
  cursor: pointer;
  opacity: 0.8;
}

body.yk .yl-marquee__toggle::before {
  content: '';
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--yl-i-pause) center / contain no-repeat;
  mask: var(--yl-i-pause) center / contain no-repeat;
}

body.yk .yl-marquee__toggle[aria-pressed='true']::before {
  -webkit-mask-image: var(--yl-i-play);
  mask-image: var(--yl-i-play);
}

/* ------------------------------------------------------------ Bildgruppe und Merkmale */

body.yk .yl-group {
  position: relative;
  min-height: 420px;
  margin-top: 48px;
}

body.yk .yl-group__a {
  width: 78%;
}

body.yk .yl-group__a img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}

body.yk .yl-group__b {
  position: absolute !important;
  right: 0;
  bottom: -40px;
  width: 44% !important;
  border: 10px solid var(--yl-white);
  box-shadow: var(--yl-shadow-strong);
}

body.yk .yl-group__b img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
}

body.yk .yl-feats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  margin-top: 48px;
}

@media (min-width: 640px) {
  body.yk .yl-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

/* Hausumriss mit Symbol, darunter Titel und kurzer Text. */
body.yk .yl-feat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding-left: 96px;
  min-height: 86px;
}

@media (min-width: 640px) {
  body.yk .yl-feat {
    align-items: center;
    padding: 104px 0 0;
    text-align: center;
  }
}

body.yk .yl-feat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 76px;
  height: 84px;
  background: var(--yl-smoke);
  clip-path: polygon(50% 0, 100% 30%, 100% 100%, 0 100%, 0 30%);
}

body.yk .yl-feat::after {
  content: '';
  position: absolute;
  left: 20px;
  top: 32px;
  width: 36px;
  height: 36px;
  background-color: var(--yl-brand);
  -webkit-mask: var(--yl-icon) center / contain no-repeat;
  mask: var(--yl-icon) center / contain no-repeat;
}

@media (min-width: 640px) {
  body.yk .yl-feat::before { left: calc(50% - 38px); }
  body.yk .yl-feat::after { left: calc(50% - 18px); }
}

body.yk .yl-feat__title .elementor-heading-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

body.yk .yl-feat__text {
  font-size: 15px;
  line-height: 1.65;
}

/* ------------------------------------------------------------ Praxisbelege */

body.yk .yl-headrow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: var(--yl-head-gap);
}

@media (min-width: 1024px) {
  body.yk .yl-headrow {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

body.yk .yl-headrow .yl-head { margin-bottom: 0; }

body.yk .yl-proof__list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  counter-reset: yl-beleg;
}

body.yk .yl-proof__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 36px 28px 32px 28px;
  border: 1px solid var(--yl-line-strong);
  border-radius: 10px;
  background: var(--yl-white);
  counter-increment: yl-beleg;
  transition: background-color 300ms var(--yl-ease), border-color 300ms var(--yl-ease);
}

@media (min-width: 768px) {
  body.yk .yl-proof__item {
    padding: 52px 120px 50px 150px;
    min-height: 236px;
    align-content: center;
  }
}

body.yk .yl-proof__item::before {
  content: counter(yl-beleg);
  display: block;
  margin-bottom: 10px;
  font-family: var(--yl-font-title);
  font-size: 64px;
  font-weight: 300;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--yl-ink);
  transition: -webkit-text-stroke-color 300ms var(--yl-ease);
}

@media (min-width: 768px) {
  body.yk .yl-proof__item::before {
    position: absolute;
    left: 42px;
    top: 50%;
    margin: 0;
    font-size: 80px;
    transform: translateY(-50%);
  }
}

/* Pfeilkreis rechts. */
body.yk .yl-proof__item::after {
  content: '';
  position: absolute;
  right: 24px;
  top: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--yl-line-strong);
  background:
    var(--yl-white);
  transition: background-color 300ms var(--yl-ease), border-color 300ms var(--yl-ease);
}

@media (min-width: 768px) {
  body.yk .yl-proof__item::after { right: 40px; top: 50%; margin-top: -18px; }
}

body.yk .yl-proof__item > .yl-proof__title,
body.yk .yl-proof__item > .yl-proof__text {
  position: static;
}

body.yk .yl-proof__title .elementor-heading-title {
  margin: 0 0 8px;
  max-width: 30ch;
  font-size: clamp(20px, 0.6vw + 16px, 24px);
  font-weight: 700;
  line-height: 1.35;
  transition: color 300ms var(--yl-ease);
}

body.yk .yl-proof__title .elementor-heading-title a {
  color: inherit;
  text-decoration: none;
}

body.yk .yl-proof__title .elementor-heading-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
}

body.yk .yl-proof__text {
  max-width: 56ch;
  transition: color 300ms var(--yl-ease);
}

/* Bild: mobil im Fluss, ab 1024 als gedrehte Karte, die beim aktiven Eintrag erscheint. */
body.yk .yl-proof__img {
  margin-top: 22px;
}

body.yk .yl-proof__img img {
  display: block;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
}

@media (min-width: 1024px) {
  body.yk .yl-proof__img {
    position: absolute !important;
    right: 150px;
    top: 50%;
    z-index: 2;
    width: 380px !important;
    margin: 0;
    opacity: 0;
    transform: translateY(-50%) rotate(-14deg) scale(0.9);
    transition: opacity 320ms var(--yl-ease), transform 420ms var(--yl-ease);
    pointer-events: none;
  }
  body.yk .yl-proof__img img {
    box-shadow: var(--yl-shadow-strong);
    aspect-ratio: 4 / 3;
  }
  body.yk .yl-proof__item.is-active .yl-proof__img {
    opacity: 1;
    transform: translateY(-50%) rotate(-12deg) scale(1);
  }
}

body.yk .yl-proof__item.is-active {
  background-color: var(--yl-brand);
  border-color: var(--yl-brand);
}

body.yk .yl-proof__item.is-active::before {
  color: var(--yl-white);
  -webkit-text-stroke-color: var(--yl-white);
}

body.yk .yl-proof__item.is-active::after {
  background-color: var(--yl-white);
  border-color: var(--yl-white);
}

body.yk .yl-proof__item.is-active .yl-proof__title .elementor-heading-title,
body.yk .yl-proof__item.is-active .yl-proof__text {
  color: var(--yl-white);
}

body.yk .yl-proof__item:has(a:focus-visible) {
  outline: 3px solid var(--yl-brand);
  outline-offset: 4px;
}

body.yk .yl-proof__title .elementor-heading-title a:focus-visible {
  outline: none !important;
}

/* Pfeil im Kreis. */
body.yk .yl-proof__item > .yl-proof__title::after {
  content: '';
  position: absolute;
  right: 33px;
  top: 33px;
  z-index: 1;
  width: 18px;
  height: 18px;
  background-color: var(--yl-ink);
  -webkit-mask: var(--yl-i-schraeg) center / contain no-repeat;
  mask: var(--yl-i-schraeg) center / contain no-repeat;
}

@media (min-width: 768px) {
  body.yk .yl-proof__item > .yl-proof__title::after { right: 49px; top: 50%; margin-top: -9px; }
}

/* ------------------------------------------------------------ Drei Schritte */

body.yk .yl-steps__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  counter-reset: yl-schritt;
}

@media (min-width: 900px) {
  body.yk .yl-steps__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  /* Verbindungslinie mit Pfeilen, wie rufferworkprocess Layout 6. */
  body.yk .yl-steps__row::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 150px;
    height: 2px;
    background: var(--yl-brand);
    opacity: 0.7;
  }
}

body.yk .yl-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  counter-increment: yl-schritt;
}

body.yk .yl-step__img {
  position: relative;
  width: 300px !important;
  max-width: 100%;
  padding: 18px;
  border: 5px solid var(--yl-ink);
  border-radius: 50%;
  background: var(--yl-white);
}

body.yk .yl-step__img img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
}

body.yk .yl-step::before {
  content: counter(yl-schritt, decimal-leading-zero);
  position: absolute;
  left: calc(50% - 176px);
  top: 124px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--yl-ink);
  color: var(--yl-white);
  font: 700 16px/1 var(--yl-font-title);
}

@media (max-width: 380px) {
  body.yk .yl-step::before { left: 0; }
}

body.yk .yl-step__title .elementor-heading-title {
  margin: 30px 0 8px;
  font-size: 22px;
  font-weight: 700;
}

body.yk .yl-step__text {
  max-width: 30ch;
  margin-inline: auto;
}

/* ------------------------------------------------------------ Markenband mit Aussagen */

body.yk .yl-band {
  position: relative;
  padding: 64px var(--yl-gutter) 64px;
  background-color: var(--yl-brand);
  background-image: var(--yl-lattice);
  background-size: 120px 120px;
  color: var(--yl-on-dark);
}

body.yk .yl-band--overlap {
  padding-bottom: 180px;
}

body.yk .yl-band__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: var(--yl-container);
  margin-inline: auto;
}

@media (min-width: 900px) {
  body.yk .yl-band__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
}

body.yk .yl-stat {
  position: relative;
  padding-left: 72px;
}

body.yk .yl-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 52px;
  height: 52px;
  background-color: var(--yl-sand);
  -webkit-mask: var(--yl-icon) center / contain no-repeat;
  mask: var(--yl-icon) center / contain no-repeat;
}

body.yk .yl-stat__title .elementor-heading-title {
  margin: 0 0 6px;
  color: var(--yl-white);
  font-size: clamp(22px, 0.8vw + 16px, 28px);
  font-weight: 700;
  line-height: 1.25;
}

body.yk .yl-stat__text {
  color: rgba(255, 255, 255, 0.76);
  font-size: 15px;
  line-height: 1.65;
}

/* ------------------------------------------------------------ Erfahrung mit Ueberlappung */

body.yk .yl-exp {
  padding-top: 0;
}

body.yk .yl-exp__media {
  position: relative;
  margin-top: -140px;
}

body.yk .yl-exp__img img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 5.4;
  height: auto;
  object-fit: cover;
}

body.yk .yl-badge {
  position: absolute !important;
  left: 0;
  bottom: 30px;
  width: auto !important;
  max-width: 76%;
  padding: 26px 34px 26px 30px;
  background: var(--yl-white);
}

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

body.yk .yl-badge::before {
  content: '';
  position: absolute;
  right: -22px;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  background: var(--yl-brand);
}

body.yk .yl-badge::after {
  content: '';
  position: absolute;
  right: -11px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  background-color: var(--yl-white);
  -webkit-mask: var(--yl-i-haken) center / contain no-repeat;
  mask: var(--yl-i-haken) center / contain no-repeat;
}

body.yk .yl-checks ul {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

body.yk .yl-checks li {
  position: relative;
  padding-left: 38px;
  color: var(--yl-ink);
  font-weight: 500;
}

body.yk .yl-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--yl-brand);
}

body.yk .yl-checks li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  width: 14px;
  height: 14px;
  background-color: var(--yl-white);
  -webkit-mask: var(--yl-i-haken) center / contain no-repeat;
  mask: var(--yl-i-haken) center / contain no-repeat;
}

@media (max-width: 1023px) {
  body.yk .yl-exp__media { margin-top: -120px; }
}

/* ------------------------------------------------------------ Rezensionen */

body.yk .yl-voices__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

body.yk .yl-voices__track::-webkit-scrollbar { display: none; }

body.yk .yl-voice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 36px 32px 34px;
  border: 1px solid var(--yl-line-strong);
  background: var(--yl-white);
  scroll-snap-align: start;
}

body.yk .yl-voice__quote {
  max-width: 34em;
  color: var(--yl-body);
  font-size: 17px;
  line-height: 1.7;
}

body.yk .yl-voice__name {
  position: relative;
  margin-top: 26px;
  padding-left: 80px;
  min-height: 64px;
  display: flex;
  align-items: center;
}

body.yk .yl-voice__name .elementor-heading-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

body.yk .yl-voice__source {
  margin-top: -14px;
  padding-left: 80px;
  color: var(--yl-brand);
  font-size: 14px;
}

body.yk .yl-voice__initial {
  position: absolute;
  left: 32px;
  bottom: 30px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #8b6a5c;
  color: var(--yl-white);
  font: 500 30px/1 var(--yl-font-title);
}

body.yk .yl-voices__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

body.yk .yl-voices__count {
  min-width: 4.5em;
  color: var(--yl-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Umlaufbahnen mit Anfangsbuchstaben, dekorativ wie auf der Live-Seite. */
body.yk .yl-orbit {
  position: relative;
  display: none;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  body.yk .yl-orbit { display: block; }
}

body.yk .yl-orbit::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 11%, rgba(20, 20, 34, 0.14) 11.2% 11.5%, transparent 11.7% 23.5%, rgba(20, 20, 34, 0.14) 23.7% 24%, transparent 24.2% 36%, rgba(20, 20, 34, 0.14) 36.2% 36.5%, transparent 36.7% 49.2%, rgba(20, 20, 34, 0.14) 49.4% 49.7%, transparent 50%);
}

body.yk .yl-orbit::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  background-color: var(--yl-brand);
  -webkit-mask: var(--yl-i-zitat) center / contain no-repeat;
  mask: var(--yl-i-zitat) center / contain no-repeat;
}

body.yk .yl-orbit__dot {
  position: absolute;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: var(--yl-white);
  font: 500 24px/1 var(--yl-font-title);
  transition: transform 400ms var(--yl-ease), box-shadow 400ms var(--yl-ease);
}

body.yk .yl-orbit__dot.is-current {
  transform: scale(1.22);
  box-shadow: 0 0 0 6px rgba(49, 0, 1, 0.14);
}

/* ------------------------------------------------------------ Fragen */

body.yk .yl-faq .yk-faq__item {
  margin: 0 0 14px;
  border: 0;
  background: var(--yl-white);
}

body.yk .yl-faq .yk-faq__question .elementor-heading-title {
  margin: 0;
  font-family: var(--yl-font-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
}

body.yk .yl-faq .yk-faq__question .elementor-heading-title {
  padding: 22px 28px;
}

body.yk .yl-faq .yk-faq__item--collapsible .yk-faq__question .elementor-heading-title {
  padding: 0;
}

body.yk .yl-faq .yk-faq__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  padding: 20px 28px;
  border: 0;
  background: transparent;
  color: var(--yl-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

body.yk .yl-faq .yk-faq__button-sign {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--yl-line-strong);
}

body.yk .yl-faq .yk-faq__button-sign::before {
  content: '';
  position: absolute;
  inset: 7px;
  background-color: var(--yl-ink);
  -webkit-mask: var(--yl-i-plus) center / contain no-repeat;
  mask: var(--yl-i-plus) center / contain no-repeat;
}

body.yk .yl-faq .is-open .yk-faq__button-sign {
  background: var(--yl-brand);
  border-color: var(--yl-brand);
}

body.yk .yl-faq .is-open .yk-faq__button-sign::before {
  background-color: var(--yl-white);
  -webkit-mask-image: var(--yl-i-minus);
  mask-image: var(--yl-i-minus);
}

body.yk .yl-faq .yk-faq__answer {
  padding: 0 28px 24px;
  border-top: 0;
  color: var(--yl-body);
}

body.yk .yl-faq .yk-faq__answer::before {
  content: '';
  display: block;
  height: 1px;
  margin-bottom: 18px;
  background: var(--yl-line);
}

body.yk .yl-faq__media {
  position: relative;
  padding: 0 0 40px 40px;
  isolation: isolate;
}

body.yk .yl-faq__media::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70%;
  height: 70%;
  z-index: -1;
  background-color: var(--yl-brand);
  background-image: var(--yl-lattice);
  background-size: 90px 90px;
}

body.yk .yl-faq__img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
}

/* ------------------------------------------------------------ Anfrage auf dunklem Bild */

body.yk .yl-request {
  position: relative;
  isolation: isolate;
  padding: var(--yl-space) var(--yl-gutter);
  background-color: var(--yl-ink);
  background-size: cover;
  background-position: center;
  color: var(--yl-on-dark);
}

body.yk .yl-request::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10, 10, 24, 0.92) 0%, rgba(10, 10, 24, 0.84) 55%, rgba(10, 10, 24, 0.7) 100%);
}

body.yk .yl-request .elementor-heading-title { color: var(--yl-white); }

body.yk .yl-reasons {
  display: grid;
  gap: 20px;
  margin-top: var(--yl-takt-aktion);
}

body.yk .yl-reason {
  position: relative;
  padding: 22px 24px 22px 84px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}

body.yk .yl-reason::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 22px;
  width: 42px;
  height: 42px;
  background-color: var(--yl-sand);
  -webkit-mask: var(--yl-icon) center / contain no-repeat;
  mask: var(--yl-icon) center / contain no-repeat;
}

body.yk .yl-reason__title .elementor-heading-title {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 700;
}

body.yk .yl-reason__text {
  color: rgba(255, 255, 255, 0.74);
  font-size: 15px;
  line-height: 1.65;
}

body.yk .yl-formcard {
  padding: 40px 28px;
  background: var(--yl-white);
  color: var(--yl-body);
  box-shadow: var(--yl-shadow-strong);
}

@media (min-width: 768px) {
  body.yk .yl-formcard { padding: 50px 48px; }
}

body.yk .yl-formcard .elementor-heading-title,
body.yk .yl-request .yl-formcard .elementor-heading-title {
  color: var(--yl-ink);
}

body.yk .yl-formcard__title .elementor-heading-title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 700;
}

body.yk .yl-formcard__text {
  margin-bottom: 24px;
  font-size: 15px;
}

/* Contact Form 7 im Kartenstil der Live-Seite. */
body.yk .yl-formcard .wpcf7 input[type='text'],
body.yk .yl-formcard .wpcf7 input[type='email'],
body.yk .yl-formcard .wpcf7 input[type='tel'],
body.yk .yl-formcard .wpcf7 input[type='date'],
body.yk .yl-formcard .wpcf7 select,
body.yk .yl-formcard .wpcf7 textarea {
  width: 100%;
  min-height: 56px;
  padding: 14px 18px;
  border: 1px solid var(--yl-line-strong);
  border-radius: var(--yl-radius);
  background: var(--yl-white);
  color: var(--yl-ink);
  font: 400 16px/1.5 var(--yl-font-body);
}

body.yk .yl-formcard .wpcf7 textarea { min-height: 140px; }

body.yk .yl-formcard .wpcf7 input:focus-visible,
body.yk .yl-formcard .wpcf7 textarea:focus-visible,
body.yk .yl-formcard .wpcf7 select:focus-visible {
  border-color: var(--yl-brand);
  outline: 3px solid rgba(49, 0, 1, 0.25) !important;
  outline-offset: 0;
}

body.yk .yl-formcard .wpcf7 input[type='submit'],
body.yk .yl-formcard .wpcf7 button[type='submit'] {
  min-height: 60px;
  padding: 18px 40px;
  border: 0;
  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;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  body.yk .yl-formcard .wpcf7 input[type='submit']:hover,
  body.yk .yl-formcard .wpcf7 button[type='submit']:hover {
    background: var(--yl-ink);
  }
}

/* ------------------------------------------------------------ Seitenkopf der Unterseiten */

body.yk .yl-pagehead {
  position: relative;
  /* Seitenkopf aller Unterseiten aus einem Token (R2/A) statt Einzelwerten je Variante. */
  padding: var(--yl-seitenkopf-y) var(--yl-gutter);
  background-color: var(--yl-grey);
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.35) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255, 255, 255, 0.35) 25%, transparent 25%),
    linear-gradient(315deg, rgba(255, 255, 255, 0.28) 25%, transparent 25%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.28) 25%, transparent 25%);
  background-size: 360px 360px;
  background-position: 0 0, 0 0, 180px 180px, 180px 180px;
}

body.yk .yl-pagehead .yl-head { max-width: 1060px; margin-bottom: 0; }

body.yk .yl-pagehead .yl-title .elementor-heading-title {
  font-size: clamp(34px, 2.6vw + 18px, 56px);
}

@media (min-width: 1024px) {
  body.yk .yl-pagehead--media .yl-row { align-items: center; }
}

body.yk .yl-pagehead__img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  box-shadow: var(--yl-shadow-strong);
}

/* Leistungskarten mit Bild, Hausform und Verweis (rufferservice der Leistungsseite). */
body.yk .yl-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

@media (min-width: 700px) {
  body.yk .yl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  body.yk .yl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

body.yk .yl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--yl-smoke);
  transition: box-shadow 300ms var(--yl-ease), transform 300ms var(--yl-ease);
}

/* Die Hausform sitzt am Bild und ragt in den Textteil; Karte, Textteil und
   Titel bleiben ohne eigene Positionierung, damit der Titelverweis die ganze
   Karte abdeckt. */
body.yk .yl-card > .yl-card__img {
  position: relative;
}

body.yk .yl-card__img img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  transition: filter 400ms var(--yl-ease);
}

body.yk .yl-card__img::before {
  content: '';
  position: absolute;
  left: 58px;
  bottom: 2px;
  z-index: 3;
  width: 72px;
  height: 84px;
  background-color: var(--yl-brand);
  clip-path: polygon(50% 0, 100% 40.8%, 100% 100%, 0 100%, 0 40.8%);
  pointer-events: none;
}

body.yk .yl-card__img::after {
  content: '';
  position: absolute;
  left: 76px;
  bottom: 14px;
  z-index: 4;
  width: 36px;
  height: 36px;
  background-color: var(--yl-white);
  -webkit-mask: var(--yl-icon) center / contain no-repeat;
  mask: var(--yl-icon) center / contain no-repeat;
  pointer-events: none;
}

body.yk .yl-card > .yl-card__body {
  position: static;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  margin: -46px 28px 0;
  padding: 64px 30px 30px;
  background: var(--yl-smoke);
}

body.yk .yl-card__body > .yl-card__title,
body.yk .yl-card__body > .yl-card__text,
body.yk .yl-card__body > .yl-more {
  position: static;
}

body.yk .yl-card__title .elementor-heading-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

/* 320 px (R2/A): lange Leistungsnamen wie Klinkerimpraegnierung passen in die Karte;
   vorher 15 px waagerechter Ueberlauf auf /leistungen/. */
@media (max-width: 360px) {
  body.yk .yl-card > .yl-card__body {
    margin-inline: 16px;
    padding-inline: 20px;
  }

  body.yk .yl-card__title .elementor-heading-title {
    font-size: 19px;
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

body.yk .yl-card__title .elementor-heading-title a {
  color: inherit;
  text-decoration: none;
}

body.yk .yl-card__title .elementor-heading-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}

body.yk .yl-card__text {
  flex: 1;
  font-size: 15px;
  line-height: 1.7;
}

body.yk .yl-card .yl-more {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--yl-line-strong);
}

body.yk .yl-card:has(a:focus-visible) {
  outline: 3px solid var(--yl-brand);
  outline-offset: 4px;
}

body.yk .yl-card__title .elementor-heading-title a:focus-visible {
  outline: none !important;
}

body.yk .yl-card .yl-more .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--yl-ink);
}

body.yk .yl-card .yl-more .elementor-heading-title::after {
  content: '';
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--yl-i-schraeg) center / contain no-repeat;
  mask: var(--yl-i-schraeg) center / contain no-repeat;
  transition: transform 200ms var(--yl-ease);
}

@media (hover: hover) and (pointer: fine) {
  body.yk .yl-card:hover {
    box-shadow: var(--yl-shadow-strong);
  }
  body.yk .yl-card:hover .yl-card__img img {
    filter: saturate(1.08) contrast(1.04);
  }
  body.yk .yl-card:hover .yl-more .elementor-heading-title {
    color: var(--yl-brand);
  }
  body.yk .yl-card:hover .yl-more .elementor-heading-title::after {
    transform: translate(2px, -2px);
  }
}

/* Ablaufkarten 01 bis 03 (rufferworkprocess der Leistungsseite). */
body.yk .yl-process {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 30px;
  counter-reset: yl-ablauf;
  max-width: 1010px;
  margin-inline: auto;
}

@media (min-width: 900px) {
  body.yk .yl-process { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

body.yk .yl-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 44px 26px 34px;
  background: var(--yl-smoke);
  text-align: center;
  counter-increment: yl-ablauf;
}

body.yk .yl-pcard::before {
  content: counter(yl-ablauf, decimal-leading-zero);
  position: absolute;
  right: 18px;
  top: -18px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--yl-brand);
  color: var(--yl-white);
  font: 700 14px/1 var(--yl-font-title);
}

body.yk .yl-pcard::after {
  content: '';
  order: -1;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  background-color: var(--yl-brand);
  -webkit-mask: var(--yl-icon) center / contain no-repeat;
  mask: var(--yl-icon) center / contain no-repeat;
}

body.yk .yl-pcard__title .elementor-heading-title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
}

body.yk .yl-pcard__text {
  font-size: 15px;
  line-height: 1.7;
}

/* ------------------------------------------------------------ Bewegung reduzieren */

@media (prefers-reduced-motion: reduce) {
  body.yk .yl-marquee.is-running .yl-marquee__track,
  body.yk .yl-seal.is-round .elementor-heading-title {
    animation: none;
  }
  body.yk .yl-marquee__track {
    flex-wrap: wrap;
    width: auto;
    max-width: var(--yl-container);
    margin-inline: auto;
    padding-inline: var(--yl-gutter);
    row-gap: 12px;
  }
  body.yk .yl-marquee__group[aria-hidden='true'] { display: none; }
  body.yk .yl-marquee__group { flex-wrap: wrap; row-gap: 12px; }
  body.yk .yl-proof__img,
  body.yk .yl-svc,
  body.yk .yl-card__img img {
    transition: none;
  }
}

/* ------------------------------------------------------------ Feinschliff nach erster Ansicht */

/* Aktionszeilen: Widgets und Anrufcontainer nur so breit wie ihr Inhalt. */
body.yk .yl-actions > .elementor-element,
body.yk .yl-headrow > .elementor-element {
  --container-widget-width: auto;
  --width: auto;
  width: auto;
  max-width: 100%;
}

body.yk .yl-hero__title .elementor-heading-title {
  max-width: 10.2em;
}

/* Fragen: eigene Plus-Minus-Zeichnung, die Striche der Grundschicht entfallen. */
body.yk .yl-faq .yk-faq {
  border-top: 0;
}

body.yk .yl-faq .yk-faq__button-sign::after {
  content: none;
  display: none;
}

body.yk .yl-faq .yk-faq__button-sign::before {
  top: 7px;
  left: 7px;
  right: 7px;
  bottom: 7px;
  width: auto;
  height: auto;
  border: 0;
  transform: none;
}

/* Erfahrung: Text beginnt unter dem Markenband, Bild ragt hinein. */
body.yk .yl-exp .yl-row {
  align-items: flex-start;
}

@media (min-width: 1024px) {
  body.yk .yl-exp__body {
    padding-top: 72px;
  }
}

/* Umlaufbahnen: Ringe relativ zur Kante, Punkte liegen auf den Ringen. */
body.yk .yl-orbit::before {
  background: radial-gradient(circle closest-side, transparent 0 24%, rgba(20, 20, 34, 0.14) 24.3% 24.7%, transparent 25% 49.6%, rgba(20, 20, 34, 0.14) 49.8% 50.2%, transparent 50.5% 73.6%, rgba(20, 20, 34, 0.14) 73.8% 74.2%, transparent 74.5% 97.6%, rgba(20, 20, 34, 0.14) 97.8% 98.4%, transparent 98.6%);
}

/* Betrieb: Bildspalte etwas schmaler, damit die Ueberschrift in zwei Zeilen steht. */
@media (min-width: 1024px) {
  body.yk .yl-row > .yl-about__media { flex: 0.9 1 0; }
}

body.yk .yl-stat__title .elementor-heading-title {
  font-size: clamp(21px, 0.6vw + 15px, 24px);
}

/* Elementor setzt .e-con::before absolut mit voller Groesse (Hintergrundueberlagerung).
   Die Nummer der Praxisbelege steht mobil im Fluss. */
@media (max-width: 767px) {
  body.yk .yl-proof__item::before {
    position: static;
    width: auto;
    height: auto;
    border: 0;
  }
  body.yk .yl-proof__title .elementor-heading-title {
    padding-right: 52px;
  }
}

/* Karten der Leistungsseite: Textteil ohne Elementor-Vollbreite, damit die Seitenabstaende greifen. */
body.yk .yl-card > .yl-card__body {
  --width: auto;
  width: auto;
  align-self: stretch;
}

/* Seitenkopf: grosse, feine Rauten wie auf der Live-Seite statt Flaechenbaendern. */
body.yk .yl-pagehead {
  background-color: var(--yl-grey);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke='%23141422' stroke-opacity='.05' stroke-width='1.2'%3E%3Cpath d='M180 0 360 180 180 360 0 180z'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(180deg, #f1f1f1 0%, #e9e9e9 100%);
  background-size: 360px 360px, auto;
  background-position: center top, 0 0;
}

/* Ablaufkarten: Symbol oberhalb des Titels im Fluss; Elementor setzt Pseudoelemente sonst absolut. */
body.yk .yl-pcard::after {
  position: static;
  display: block;
  flex: none;
}

body.yk .yl-process + .yl-actions {
  justify-content: center;
}

/* Seitenkopf mit Bild: Foto rechts im Markenrahmen, mobil unter dem Text. */
body.yk .yl-pagehead__media {
  position: relative;
  isolation: isolate;
  padding: 0 32px 32px 0;
}

body.yk .yl-pagehead__media::after {
  content: '';
  position: absolute;
  top: 32px;
  left: 32px;
  right: 0;
  bottom: 0;
  z-index: -1;
  border: 4px solid var(--yl-brand);
}

body.yk .yl-pagehead__img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3.6;
  height: auto;
  object-fit: cover;
}

@media (min-width: 1024px) {
  body.yk .yl-pagehead--media .yl-row > .yl-pagehead__media { flex: 0.8 1 0; }
}

@media (max-width: 1023px) {
  body.yk .yl-pagehead__img img { aspect-ratio: 16 / 10; }
}

/* Elementor gibt .e-con::before volle Breite; die Belegnummer braucht ihre eigene Breite,
   sonst ragt sie 42 px ueber die Karte hinaus (Ueberlauf bei 768 und 1024 px, Abschlusspruefung). */
@media (min-width: 768px) {
  body.yk .yl-proof__item::before {
    width: auto;
    height: auto;
  }
}

/* Fokus bei Karten mit gestrecktem Verweis: Rahmen um die Karte (:has) und eine Markierung am
   fokussierten Verweis selbst, damit der Fokus auch ohne :has sichtbar ist. */
body.yk .yl-svc__title .elementor-heading-title a:focus-visible,
body.yk .yl-proof__title .elementor-heading-title a:focus-visible,
body.yk .yl-card__title .elementor-heading-title a:focus-visible {
  outline: none !important;
  box-shadow: 0 3px 0 0 currentColor !important;
}

/* Siegel: dreht sich nicht mehr selbststaendig (WCAG 2.2.2, Bewegung ueber 5 s ohne Pause),
   sondern folgt dem Scrollen. Ohne Unterstuetzung fuer scroll-gebundene Animation steht es still. */
body.yk .yl-seal.is-round .elementor-heading-title {
  animation: none;
}

@keyframes yl-siegel-scroll {
  from { transform: rotate(-40deg); }
  to { transform: rotate(140deg); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body.yk .yl-seal.is-round .elementor-heading-title {
      animation: yl-siegel-scroll linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

/* Fragen: Antwort ohne senkrechten Innenabstand, damit das Aufklappen bei Hoehe 0
   beginnt; der untere Abstand kommt aus einem Abstandshalter im Inhalt. */
body.yk .yl-faq .yk-faq__answer {
  padding-top: 0;
  padding-bottom: 0;
}

body.yk .yl-faq .yk-faq__answer::after {
  content: '';
  display: block;
  height: 24px;
}

/* Bildenthuellung (live.js setzt yl-enthuellen nur mit Skript und ohne reduzierte Bewegung). */
body.yk .yl-enthuellen img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1000ms cubic-bezier(0.23, 1, 0.32, 1);
}

body.yk .yl-enthuellen.is-sichtbar img {
  clip-path: inset(0 0 0 0);
}

/* Abzeichen "Guetersloh und OWL" verweist auf die Gebietsseite (Feinschliff S0-K). */
body.yk .yl-badge .elementor-heading-title a {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  body.yk .yl-badge .elementor-heading-title a:hover {
    color: var(--yl-brand);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }
}

body.yk .yl-badge .elementor-heading-title a:focus-visible {
  outline: 3px solid var(--yl-brand);
  outline-offset: 4px;
}

/* ============================================================ R3/A Startseite und Fuss
   Nutzerauftrag R3 (30.09.2026): Bildregie nach Produktion, Luft zwischen Einstieg und
   Leistungen, Arbeitsbilder im Ablauf, breite Fugentechnik, kleine Regionenpraesenz,
   kompakte transparente Anfrage, Fuss ohne Leistungsspalte. Takt und Farben wie oben. */

/* ------------------------------------------------------------ Leistungsleiste */

/* Alle sechs Leistungen auf einen Blick: eine weisse Flaeche mit Haarlinien statt
   einer Kartenreihe mit Blaettern. Ueberlappt den Einstieg nur knapp. */
body.yk .yl-leiste {
  position: relative;
  z-index: 3;
  margin-top: calc(-1 * var(--yl-hero-ueberlappung));
  padding: 0 var(--yl-gutter);
  background: transparent;
}

body.yk .yl-leiste__flaeche {
  width: 100%;
  max-width: var(--yl-container);
  margin-inline: auto;
  border-top: 3px solid var(--yl-brand);
  background: var(--yl-white);
  box-shadow: var(--yl-shadow);
}

body.yk .yl-leiste__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--yl-line);
}

@media (min-width: 640px) {
  body.yk .yl-leiste__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  body.yk .yl-leiste__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

body.yk .yl-leiste__eintrag {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 116px;
  padding: 24px 24px 24px 96px;
  background: var(--yl-white);
  transition: background-color 200ms var(--yl-ease);
}

@media (min-width: 1024px) {
  body.yk .yl-leiste__eintrag {
    min-height: 132px;
    padding: 30px 32px 30px 112px;
  }
}

/* Hausform als Symboltraeger, wie auf den Karten der Live-Seite, aber in der Flaeche. */
body.yk .yl-leiste__eintrag::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 50%;
  width: 52px;
  height: 60px;
  margin-top: -30px;
  background-color: var(--yl-brand);
  clip-path: polygon(50% 0, 100% 40.8%, 100% 100%, 0 100%, 0 40.8%);
  transition: background-color 200ms var(--yl-ease);
}

@media (min-width: 1024px) {
  body.yk .yl-leiste__eintrag::before { left: 32px; width: 60px; height: 70px; margin-top: -35px; }
}

body.yk .yl-leiste__eintrag > .yl-leiste__titel {
  position: static;
}

body.yk .yl-leiste__eintrag > .yl-leiste__titel::before {
  content: '';
  position: absolute;
  left: 37px;
  top: 50%;
  z-index: 1;
  width: 26px;
  height: 26px;
  margin-top: -6px;
  background-color: var(--yl-white);
  -webkit-mask: var(--yl-icon) center / contain no-repeat;
  mask: var(--yl-icon) center / contain no-repeat;
  pointer-events: none;
}

@media (min-width: 1024px) {
  body.yk .yl-leiste__eintrag > .yl-leiste__titel::before { left: 47px; width: 30px; height: 30px; margin-top: -7px; }
}

body.yk .yl-leiste__titel .elementor-heading-title {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  hyphens: manual;
}

body.yk .yl-leiste__titel .elementor-heading-title a {
  color: var(--yl-ink);
  text-decoration: none;
}

/* Ganze Flaeche klickbar, der Verweis bleibt die Ueberschrift. */
body.yk .yl-leiste__titel .elementor-heading-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}

body.yk .yl-leiste__text {
  color: var(--yl-body);
  font-size: 15px;
  line-height: 1.55;
}

@media (hover: hover) and (pointer: fine) {
  body.yk .yl-leiste__eintrag:hover { background-color: var(--yl-smoke); }
  body.yk .yl-leiste__eintrag:hover::before { background-color: var(--yl-ink); }
  body.yk .yl-leiste__eintrag:hover .yl-leiste__titel .elementor-heading-title a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
}

body.yk .yl-leiste__titel .elementor-heading-title a:focus-visible { outline: none !important; }

body.yk .yl-leiste__eintrag:has(a:focus-visible) {
  z-index: 1;
  outline: 3px solid var(--yl-brand);
  outline-offset: -3px;
}

/* Abstand zum folgenden Abschnitt: die Leiste zaehlt als eigener Takt. */
body.yk .yl-leiste + .yl-sec {
  padding-top: calc(var(--yl-space) + 8px);
}

/* ------------------------------------------------------------ Einfuehrung */

/* Produktionsausschnitt von 5896 (linker Bildteil: Hand und Kelle) nachgestellt. */
body.yk .yl-bild--links img {
  object-position: 0% 50%;
}

/* ------------------------------------------------------------ Ergebnisbilder */

@media (min-width: 1024px) {
  body.yk .yl-ergebnis .yl-row > .yl-ergebnis__text { flex: 0.85 1 0; }
  body.yk .yl-ergebnis .yl-group { margin-top: 0; }
}

/* ------------------------------------------------------------ Ablauf mit Arbeitsbildern */

/* Ausschnitte im Kreis: 6113 rechter Bildteil wie der Produktionszuschnitt (Person und
   Platte), 6115 Hand und Fugeisen, 6116 Buerste vollstaendig. */
body.yk .yl-step__img--analyse img { object-position: 100% 50%; }
body.yk .yl-step__img--ausfuehrung img { object-position: 50% 58%; }
body.yk .yl-step__img--abschluss img { object-position: 50% 50%; }

body.yk .yl-steps .yl-actions {
  justify-content: center;
  margin-top: calc(var(--yl-takt-aktion) + 16px);
}

/* ------------------------------------------------------------ Erprobte Fugentechnik */

/* Breite Handwerksaufnahme (6143) greift ins Markenband; Bildunterkante und Aktion
   schliessen gemeinsam ab. */
body.yk .yl-exp--breit .yl-exp__img img {
  aspect-ratio: 5 / 4;
  object-position: 42% 55%;
}

@media (min-width: 1024px) {
  body.yk .yl-exp--breit .yl-row {
    align-items: stretch;
  }

  body.yk .yl-exp--breit .yl-row > .yl-exp__media {
    flex: 1.2 1 0;
    display: flex;
    flex-direction: column;
  }

  body.yk .yl-exp--breit .yl-exp__media > .yl-exp__img {
    flex: 1 1 auto;
    height: 100%;
  }

  body.yk .yl-exp--breit .yl-exp__img img {
    height: 100%;
    min-height: 480px;
    aspect-ratio: auto;
  }

  body.yk .yl-exp--breit .yl-row > .yl-exp__body {
    flex: 1 1 0;
    padding-top: 80px;
  }
}

/* Zwei Arbeitsregeln statt Hakenliste: Fugenlinie oben, kurzer Titel, ein Satz. */
body.yk .yl-regeln {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--yl-takt-gruppe);
  margin-top: var(--yl-takt-aktion);
}

@media (min-width: 640px) {
  body.yk .yl-regeln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
}

body.yk .yl-regel {
  position: relative;
  padding-top: 18px;
}

body.yk .yl-regel::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 9px;
  background:
    linear-gradient(var(--yl-brand), var(--yl-brand)) 0 0 / 30px 2px no-repeat,
    linear-gradient(var(--yl-brand), var(--yl-brand)) 0 100% / 20px 2px no-repeat;
}

body.yk .yl-regel__titel .elementor-heading-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

body.yk .yl-regel__text {
  font-size: 15px;
  line-height: 1.65;
}

/* ------------------------------------------------------------ Einblicke (TikTok) */

body.yk .yl-einblicke--start {
  padding-block: var(--yl-space-sm) var(--yl-space);
}

/* ------------------------------------------------------------ Rezensionen: Herkunft */

body.yk .yl-voices__quelle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--yl-line);
}

body.yk .yl-voices__hinweis {
  max-width: 44em;
  color: var(--yl-body);
  font-size: 14px;
  line-height: 1.6;
}

body.yk .yl-more .elementor-heading-title a:focus-visible {
  outline: 3px solid var(--yl-brand);
  outline-offset: 3px;
}

/* ------------------------------------------------------------ Region */

body.yk .yl-region {
  padding-block: var(--yl-space-sm);
}

body.yk .yl-region__row {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

@media (min-width: 1024px) {
  body.yk .yl-region__row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 64px;
  }
}

body.yk .yl-region__text {
  position: relative;
  max-width: 820px;
  padding-left: 80px;
}

body.yk .yl-region__text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 56px;
  height: 64px;
  background-color: var(--yl-brand);
  clip-path: polygon(50% 0, 100% 40.8%, 100% 100%, 0 100%, 0 40.8%);
}

body.yk .yl-region__text > .yl-region__titel {
  position: static;
}

body.yk .yl-region__text > .yl-region__titel::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 28px;
  width: 26px;
  height: 26px;
  background-color: var(--yl-white);
  -webkit-mask: var(--yl-i-pin) center / contain no-repeat;
  mask: var(--yl-i-pin) center / contain no-repeat;
}

body.yk .yl-region__titel .elementor-heading-title {
  margin: 0 0 12px;
  font-size: clamp(24px, 1vw + 17px, 32px);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

body.yk .yl-region__lead {
  max-width: var(--yl-takt-mass);
}

body.yk .yl-region .yl-actions {
  --width: auto;
  flex: none;
  width: auto;
  margin-top: 0;
}

@media (max-width: 1023px) {
  body.yk .yl-region .yl-actions { padding-left: 80px; }
}

@media (max-width: 479px) {
  body.yk .yl-region__text { padding-left: 0; padding-top: 80px; }
  body.yk .yl-region__text > .yl-region__titel::before { top: 30px; }
  body.yk .yl-region .yl-actions { padding-left: 0; }
}

/* ------------------------------------------------------------ Anfrage kompakt und transparent */

body.yk .yl-request--start::before {
  background: linear-gradient(90deg, rgba(10, 10, 24, 0.9) 0%, rgba(10, 10, 24, 0.78) 48%, rgba(10, 10, 24, 0.64) 100%);
}

@media (min-width: 1024px) {
  body.yk .yl-request--start .yl-row > .yl-request__intro {
    flex: 0.78 1 0;
    position: sticky;
    top: calc(var(--yl-header-h) + 40px);
  }

  body.yk .yl-request--start .yl-row > .yl-formcard { flex: 1.22 1 0; }
}

/* Leicht eingefaerbte, durchscheinende Flaeche wie die Formularkarte der Produktion;
   Schrift und Linien hell, Aktion in Sand (Akzent auf dunklem Grund). */
body.yk .yl-formcard.yl-formcard--transparent {
  padding: 32px 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@media (min-width: 768px) {
  body.yk .yl-formcard.yl-formcard--transparent { padding: 40px 40px 36px; }
}

body.yk .yl-formcard.yl-formcard--transparent .elementor-heading-title,
body.yk .yl-request .yl-formcard--transparent .elementor-heading-title {
  color: var(--yl-white);
}

body.yk .yl-formcard.yl-formcard--transparent .yk-form__hinweis,
body.yk .yl-formcard.yl-formcard--transparent .yk-form__hint,
body.yk .yl-formcard.yl-formcard--transparent .yk-form__freiwillig,
body.yk .yl-formcard.yl-formcard--transparent .yk-form__pflicht {
  color: rgba(255, 255, 255, 0.7);
}

body.yk .yl-formcard.yl-formcard--transparent .yk-form__label,
body.yk .yl-formcard.yl-formcard--transparent legend,
body.yk .yl-formcard.yl-formcard--transparent .wpcf7-list-item-label,
body.yk .yl-formcard.yl-formcard--transparent .yk-form__gruppe .yk-form__label[for^='yk-foto'] {
  color: var(--yl-white);
}

body.yk .yl-formcard.yl-formcard--transparent .wpcf7 input[type='text'],
body.yk .yl-formcard.yl-formcard--transparent .wpcf7 input[type='email'],
body.yk .yl-formcard.yl-formcard--transparent .wpcf7 input[type='tel'],
body.yk .yl-formcard.yl-formcard--transparent .wpcf7 input[type='date'],
body.yk .yl-formcard.yl-formcard--transparent .wpcf7 select,
body.yk .yl-formcard.yl-formcard--transparent .wpcf7 textarea {
  min-height: 50px;
  padding: 12px 16px;
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.08);
  color: var(--yl-white);
}

body.yk .yl-formcard.yl-formcard--transparent .wpcf7 select option {
  color: var(--yl-ink);
  background: var(--yl-white);
}

body.yk .yl-formcard.yl-formcard--transparent .wpcf7 textarea {
  min-height: 112px;
  height: 112px;
  resize: vertical;
}

body.yk .yl-formcard.yl-formcard--transparent .wpcf7 input:focus-visible,
body.yk .yl-formcard.yl-formcard--transparent .wpcf7 textarea:focus-visible,
body.yk .yl-formcard.yl-formcard--transparent .wpcf7 select:focus-visible {
  border-color: var(--yl-sand);
  outline: 3px solid rgba(240, 228, 185, 0.45) !important;
}

body.yk .yl-formcard.yl-formcard--transparent .wpcf7-radio input[type='radio'],
body.yk .yl-formcard.yl-formcard--transparent .wpcf7-acceptance input[type='checkbox'] {
  accent-color: var(--yl-sand);
}

body.yk .yl-formcard.yl-formcard--transparent .wpcf7-acceptance a {
  color: var(--yl-sand);
}

body.yk .yl-formcard.yl-formcard--transparent .wpcf7 input[type='file'] {
  min-height: 50px;
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
}

body.yk .yl-formcard.yl-formcard--transparent .wpcf7 input[type='file']::file-selector-button {
  background: var(--yl-sand);
  color: var(--yl-ink);
}

body.yk .yl-formcard.yl-formcard--transparent .yl-datei.is-gewaehlt input[type='file'] {
  border-color: var(--yl-sand);
  background: rgba(255, 255, 255, 0.12);
  color: var(--yl-white);
}

body.yk .yl-formcard.yl-formcard--transparent .yl-datei__name { color: var(--yl-white); }
body.yk .yl-formcard.yl-formcard--transparent .yl-datei__name::before { background-color: var(--yl-sand); }
body.yk .yl-formcard.yl-formcard--transparent .yl-datei__weg { color: var(--yl-sand); }

body.yk .yl-formcard.yl-formcard--transparent .wpcf7 input[type='submit'] {
  background: var(--yl-sand);
  color: var(--yl-ink);
}

@media (hover: hover) and (pointer: fine) {
  body.yk .yl-formcard.yl-formcard--transparent .wpcf7 input[type='submit']:hover {
    background: var(--yl-white);
    color: var(--yl-ink);
  }
}

/* Fehler und Rueckmeldung auf dunklem Grund lesbar. */
body.yk .yl-formcard.yl-formcard--transparent .wpcf7-not-valid-tip {
  color: #ffc2b8;
}

body.yk .yl-formcard.yl-formcard--transparent .wpcf7 form .wpcf7-response-output {
  border-color: var(--yl-sand);
  color: var(--yl-white);
}

/* Fotos kompakt: mit Skript erscheint das naechste Feld erst, wenn im vorherigen ein
   Bild gewaehlt ist (live.js setzt .yl-datei.is-gewaehlt). Ohne Skript alle drei. */
body.yk .yl-formcard .yk-form__gruppe .yk-form__feld:has(.yl-datei:not(.is-gewaehlt)) ~ .yk-form__feld:has(.yl-datei:not(.is-gewaehlt)) {
  display: none;
}

/* Formularabsaetze in voller Kartenbreite (das Textmass fuer Fliesstext gilt hier nicht). */
body.yk .yl-formcard .wpcf7-form p,
body.yk .yl-formcard .wpcf7-form .yk-form__gruppe {
  max-width: none;
}

/* Kompaktes Raster fuer alle Anfrageformulare: paarweise kurze Felder nebeneinander,
   sobald die Formularflaeche breit genug ist. Reihenfolge wie im Quelltext. */
body.yk .yl-formcard {
  container-type: inline-size;
}

@container (min-width: 520px) {
  body.yk .yl-formcard .wpcf7-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
  }

  body.yk .yl-formcard .wpcf7-form > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  body.yk .yl-formcard .wpcf7-form > .yk-form__feld:has([data-name='yk-name']),
  body.yk .yl-formcard .wpcf7-form > .yk-form__gruppe:has([data-name='yk-rueckkanal']),
  body.yk .yl-formcard .wpcf7-form > .yk-form__feld:has([data-name='yk-email']),
  body.yk .yl-formcard .wpcf7-form > .yk-form__feld:has([data-name='yk-telefon']),
  body.yk .yl-formcard .wpcf7-form > .yk-form__feld:has([data-name='yk-ort']),
  body.yk .yl-formcard .wpcf7-form > .yk-form__feld:has([data-name='yk-leistung']) {
    grid-column: auto;
  }

  /* Rueckkanal in der halben Spalte: drei Optionen in einer Zeile. */
  body.yk .yl-formcard .wpcf7-form .wpcf7-radio {
    gap: 4px 16px;
  }

  body.yk .yl-formcard .wpcf7-form .wpcf7-radio label {
    font-size: 15px;
  }
}

/* ------------------------------------------------------------ Fuss ohne Leistungsspalte */

/* Vier Spalten (Marke, Kontakt, Informationen, Rechtliches). Die Grundregeln des Fusses
   stehen in live-chrome.css (Rolle B); diese Regeln gelten nur fuer das neue Raster
   .yl-fuss--r3 und sind dafuer eine Klasse spezifischer. */
body.yk .yk-footer .yk-footer__grid.yl-fuss--r3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.yk .yk-footer .yk-footer__grid.yl-fuss--r3 > .yk-footer__col.elementor-element {
  grid-column: auto;
  grid-row: auto;
}

body.yk .yk-footer .yk-footer__grid.yl-fuss--r3 > .yk-footer__col--brand.elementor-element,
body.yk .yk-footer .yk-footer__grid.yl-fuss--r3 > .yk-footer__col--brand.elementor-element + .yk-footer__col {
  grid-column: 1 / -1;
}

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

  body.yk .yk-footer .yk-footer__grid.yl-fuss--r3 > .yk-footer__col--brand.elementor-element + .yk-footer__col {
    grid-column: auto;
  }
}

@media (min-width: 1024px) {
  body.yk .yk-footer .yk-footer__grid.yl-fuss--r3 {
    grid-template-columns: 1.1fr 1.15fr 1fr 1.1fr;
    column-gap: 32px;
  }

  body.yk .yk-footer .yk-footer__grid.yl-fuss--r3 > .yk-footer__col--brand.elementor-element {
    grid-column: auto;
  }
}

/* Breite Bildschirme: Markenspalte breiter, Linkspalten bleiben lesbar
   (Datenschutzerklaerung passt ab 1280 px auch in 0,9 Anteile). */
@media (min-width: 1280px) {
  body.yk .yk-footer .yk-footer__grid.yl-fuss--r3 {
    grid-template-columns: 1.45fr 1.25fr 0.9fr 0.9fr;
    column-gap: 56px;
  }
}

/* Sehr schmale Bildschirme: Informationen und Rechtliches untereinander, damit lange
   Woerter wie Datenschutzerklaerung nicht mitten im Wort umbrechen. */
@media (max-width: 419px) {
  body.yk .yk-footer .yk-footer__grid.yl-fuss--r3 > .yk-footer__col.elementor-element {
    grid-column: 1 / -1;
  }
}

/* Regionenliste dezent: normale Schreibweise, gedaempfte Farbe, kleinere Schrift. */
body.yk .yk-footer .yl-fuss-orte.yl-fuss-orte--dezent .yl-fuss-orte__titel {
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

body.yk .yk-footer .yl-fuss-orte.yl-fuss-orte--dezent .yl-fuss-orte__titel::before {
  opacity: 0.6;
}

body.yk .yk-footer .yl-fuss-orte.yl-fuss-orte--dezent .yl-fuss-orte__liste li,
body.yk .yk-footer .yl-fuss-orte.yl-fuss-orte--dezent .yl-fuss-orte__liste a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}