.elementor-405 .elementor-element.elementor-element-9b5bc81{--display:flex;}.elementor-405 .elementor-element.elementor-element-fe29c35{--display:flex;}.elementor-405 .elementor-element.elementor-element-04f1ed2{--display:flex;}.elementor-405 .elementor-element.elementor-element-ccebe56{--display:flex;}.elementor-405 .elementor-element.elementor-element-297fd1a{--display:flex;}.elementor-405 .elementor-element.elementor-element-5acf915{--display:flex;}.elementor-405 .elementor-element.elementor-element-064bd1f{--display:flex;}.elementor-405 .elementor-element.elementor-element-15f19f6{--display:flex;}.elementor-405 .elementor-element.elementor-element-ad5eac4{--display:flex;}.elementor-405 .elementor-element.elementor-element-c9f6bd6{--display:flex;}.elementor-405 .elementor-element.elementor-element-4bea0d3{--display:flex;}.elementor-405 .elementor-element.elementor-element-65558b2{--display:flex;}.elementor-405 .elementor-element.elementor-element-617f414{--display:flex;}.elementor-405 .elementor-element.elementor-element-7f4570d{--display:flex;}.elementor-405 .elementor-element.elementor-element-0fd3b10{--display:flex;}.elementor-405 .elementor-element.elementor-element-4fef615{--display:flex;}.elementor-405 .elementor-element.elementor-element-b060d23{--display:flex;}.elementor-405 .elementor-element.elementor-element-f5bbb75{--display:flex;}.elementor-405 .elementor-element.elementor-element-1789983{--display:flex;}.elementor-405 .elementor-element.elementor-element-737c7cf{--display:flex;}.elementor-405 .elementor-element.elementor-element-d005284{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-405 .elementor-element.elementor-element-54421f4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-405 .elementor-element.elementor-element-23b841e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-405 .elementor-element.elementor-element-9b508ce{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-405 .elementor-element.elementor-element-ca3983f{--n-accordion-title-font-size:1,75rem;--n-accordion-item-title-space-between:0px;--n-accordion-item-title-distance-from-content:0px;--n-accordion-icon-size:15px;}.elementor-405 .elementor-element.elementor-element-f1fe60d{--display:flex;}.elementor-405 .elementor-element.elementor-element-18a5991{--display:flex;}.elementor-405 .elementor-element.elementor-element-c9cc263{--display:flex;}.elementor-405 .elementor-element.elementor-element-2f2ca00{--display:flex;}.elementor-405 .elementor-element.elementor-element-48c750f{--display:flex;}.elementor-405 .elementor-element.elementor-element-bb5a985{--display:flex;}.elementor-405 .elementor-element.elementor-element-07438a9{--display:flex;}.elementor-405 .elementor-element.elementor-element-647261f{--display:flex;}/* Start custom CSS *//* ==========================================================================
   Webdesign v2 - seitenbezogene Korrekturen
   Nur Abweichungen vom Marken-CSS. Alles andere bleibt wie im System.
   ========================================================================== */

/* 1 · Hero: die H1 traegt ein langes Keyword und lief auf drei Zeilen.
   Kleinere Stufe plus Zeilenmass haelt sie auf zwei, ohne den Text zu kuerzen. */
body.elementor-page-405 .lxs-hero__h1 h1 { font-size: clamp(2rem, 4.1vw, 4.5rem); max-width: 24ch; }

/* 2 · Vorteile ohne Ordnungszahlen. Die Ziffer bleibt im Markup, damit das
   Grid-Geruest des Marken-CSS nicht bricht, wird aber nicht mehr gezeigt. */
body.elementor-page-405 .lx-row__num { display: none; }
@media (min-width: 1000px) {
  body.elementor-page-405 .lx-rows .lx-row { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr) 2.5rem; }
}

/* 3 · Stimmen: eine Leitstimme ueber die volle Breite, zwei Belege darunter.
   Loest die Reihe aus drei gleich grossen Karten auf. */
@media (min-width: 1000px) {
  body.elementor-page-405 .v2-quotes .v2-quote:nth-child(1) { grid-column: span 6; }
  body.elementor-page-405 .v2-quotes .v2-quote:nth-child(2),
  body.elementor-page-405 .v2-quotes .v2-quote:nth-child(3) { grid-column: span 3; }
  body.elementor-page-405 .v2-quotes .v2-quote:nth-child(1) blockquote p {
    font-size: clamp(1.0625rem, 1.35vw, 1.375rem);
    line-height: 1.55;
    max-width: 68ch;
    color: var(--text-primary, #f2efe9);
  }
}

/* 4 - Projekte: acht Branchen als Liste, eine Aufnahme gross daneben.
   Acht gleichzeitig gezeigte Screenshots waren acht halbe Projekte: zu klein,
   um etwas zu erkennen, und zusammen mehrere Bildschirmhoehen lang. Hier steht
   eine Aufnahme gross, die Liste traegt die Auswahl.
   Umgeschaltet wird ueber versteckte Radio-Felder: kein JavaScript, mit der
   Tastatur bedienbar, und ohne CSS steht schlicht die erste Aufnahme da. */
/* Die Sektion laeuft vollbreit, ihr Inhalt braucht daher selbst den Satzspiegel.
   Vorher trug ihn die Zeilen-Regel des Marken-CSS, die es hier nicht mehr gibt. */
body.elementor-page-405 .lxp-schau {
  max-width: var(--v2-max);
  margin-inline: auto;
  padding-inline: var(--v2-pad);
}
body.elementor-page-405 .lxp-schau__wahl {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
body.elementor-page-405 .lxp-schau__grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 900px) {
  body.elementor-page-405 .lxp-schau__grid {
    grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
    align-items: start;
  }
}
body.elementor-page-405 .lxp-schau__liste { list-style: none; margin: 0; padding: 0; display: grid; }
body.elementor-page-405 .lxp-schau__liste li { border-top: 1px solid rgb(212 175 55 / 0.16); }
body.elementor-page-405 .lxp-schau__liste li:last-child { border-bottom: 1px solid rgb(212 175 55 / 0.16); }
body.elementor-page-405 .lxp-schau__liste label {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(0.7rem, 1.4vw, 1.05rem) 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.05rem, 1.5vw, 1.5rem); line-height: 1.1;
  color: var(--text-secondary, #b8b4ab); cursor: pointer;
  transition: color 240ms var(--ease-out, cubic-bezier(.22,1,.36,1));
}
body.elementor-page-405 .lxp-schau__liste label::after {
  content: ""; inline-size: 1.5rem; block-size: 1px; background: currentColor; opacity: 0.45;
}
body.elementor-page-405 .lxp-schau__liste label:hover { color: var(--text-primary, #f2efe9); }
body.elementor-page-405 .lxp-schau__buehne { display: grid; }
body.elementor-page-405 .lxp-schau__figur {
  margin: 0; grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease-out, cubic-bezier(.22,1,.36,1));
}
body.elementor-page-405 .lxp-schau__figur img {
  display: block; inline-size: 100%;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 0;
  border: 1px solid rgb(212 175 55 / 0.16); border-radius: 4px;
}
body.elementor-page-405 .lxp-schau__figur figcaption { padding-block-start: 0.9rem; }
body.elementor-page-405 .lxp-schau__figur a {
  font-family: var(--font-text); font-weight: 600; letter-spacing: 0.04em;
  color: var(--gold, #d4af37); text-decoration: none;
}
body.elementor-page-405 .lxp-schau__figur a:hover { text-decoration: underline; text-underline-offset: 3px; }
body.elementor-page-405 #lxp-1:checked ~ .lxp-schau__grid .lxp-schau__figur:nth-child(1) { opacity: 1; pointer-events: auto; }
body.elementor-page-405 #lxp-1:checked ~ .lxp-schau__grid label[for="lxp-1"] { color: var(--gold, #d4af37); }
body.elementor-page-405 #lxp-1:focus-visible ~ .lxp-schau__grid label[for="lxp-1"] { outline: 2px solid var(--gold, #d4af37); outline-offset: 4px; }
body.elementor-page-405 #lxp-2:checked ~ .lxp-schau__grid .lxp-schau__figur:nth-child(2) { opacity: 1; pointer-events: auto; }
body.elementor-page-405 #lxp-2:checked ~ .lxp-schau__grid label[for="lxp-2"] { color: var(--gold, #d4af37); }
body.elementor-page-405 #lxp-2:focus-visible ~ .lxp-schau__grid label[for="lxp-2"] { outline: 2px solid var(--gold, #d4af37); outline-offset: 4px; }
body.elementor-page-405 #lxp-3:checked ~ .lxp-schau__grid .lxp-schau__figur:nth-child(3) { opacity: 1; pointer-events: auto; }
body.elementor-page-405 #lxp-3:checked ~ .lxp-schau__grid label[for="lxp-3"] { color: var(--gold, #d4af37); }
body.elementor-page-405 #lxp-3:focus-visible ~ .lxp-schau__grid label[for="lxp-3"] { outline: 2px solid var(--gold, #d4af37); outline-offset: 4px; }
body.elementor-page-405 #lxp-4:checked ~ .lxp-schau__grid .lxp-schau__figur:nth-child(4) { opacity: 1; pointer-events: auto; }
body.elementor-page-405 #lxp-4:checked ~ .lxp-schau__grid label[for="lxp-4"] { color: var(--gold, #d4af37); }
body.elementor-page-405 #lxp-4:focus-visible ~ .lxp-schau__grid label[for="lxp-4"] { outline: 2px solid var(--gold, #d4af37); outline-offset: 4px; }
body.elementor-page-405 #lxp-5:checked ~ .lxp-schau__grid .lxp-schau__figur:nth-child(5) { opacity: 1; pointer-events: auto; }
body.elementor-page-405 #lxp-5:checked ~ .lxp-schau__grid label[for="lxp-5"] { color: var(--gold, #d4af37); }
body.elementor-page-405 #lxp-5:focus-visible ~ .lxp-schau__grid label[for="lxp-5"] { outline: 2px solid var(--gold, #d4af37); outline-offset: 4px; }
body.elementor-page-405 #lxp-6:checked ~ .lxp-schau__grid .lxp-schau__figur:nth-child(6) { opacity: 1; pointer-events: auto; }
body.elementor-page-405 #lxp-6:checked ~ .lxp-schau__grid label[for="lxp-6"] { color: var(--gold, #d4af37); }
body.elementor-page-405 #lxp-6:focus-visible ~ .lxp-schau__grid label[for="lxp-6"] { outline: 2px solid var(--gold, #d4af37); outline-offset: 4px; }
body.elementor-page-405 #lxp-7:checked ~ .lxp-schau__grid .lxp-schau__figur:nth-child(7) { opacity: 1; pointer-events: auto; }
body.elementor-page-405 #lxp-7:checked ~ .lxp-schau__grid label[for="lxp-7"] { color: var(--gold, #d4af37); }
body.elementor-page-405 #lxp-7:focus-visible ~ .lxp-schau__grid label[for="lxp-7"] { outline: 2px solid var(--gold, #d4af37); outline-offset: 4px; }
body.elementor-page-405 #lxp-8:checked ~ .lxp-schau__grid .lxp-schau__figur:nth-child(8) { opacity: 1; pointer-events: auto; }
body.elementor-page-405 #lxp-8:checked ~ .lxp-schau__grid label[for="lxp-8"] { color: var(--gold, #d4af37); }
body.elementor-page-405 #lxp-8:focus-visible ~ .lxp-schau__grid label[for="lxp-8"] { outline: 2px solid var(--gold, #d4af37); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) body.elementor-page-405 .lxp-schau__figur { transition: none; }
}

/* 5 - Weitere Leistungen: die Ein-Zeilen-Fassung ist seit 05.08.2026 Standard
   aller Leistungsseiten und lebt in leistung.css - nicht mehr hier. */

/* 6 - Zug 3: Auf der Shops-Sektion geht das Licht an.
   Dieselbe Bewegung wie im Editorial der Startseite: der helle Grund waechst
   als Kreis aus der Oberkante. Die Keyframes v2-wipe stehen bereits im
   Marken-CSS, das auf dieser Seite ohnehin geladen wird. */
@supports (animation-timeline: view()) {
  body.elementor-page-405 .lxs-papier {
    animation: v2-wipe linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 85%;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) body.elementor-page-405 .lxs-papier {
    clip-path: none !important; animation: none !important;
  }
}
html[data-motion="reduced"] body.elementor-page-405 .lxs-papier {
  clip-path: none !important; animation: none !important;
}

/* Der Hero traegt jetzt nur noch Eyebrow, H1, CTA und Belegleiste.
   Ohne den langen Absatz darf die Zeile wieder groesser werden. */
body.elementor-page-405 .lxs-hero__h1 h1 { font-size: clamp(2.25rem, 4.15vw, 5rem); }


/* 7 - Zeilenmass des hellen Satzes.
   Die Widget-Klasse sitzt laut seiten.css auf der Wrapper-Huelle, nicht am
   Absatz. Die 20em aus dem Marken-CSS kommen dadurch nicht am Text an und
   die Zeile lief ueber die volle Fensterbreite. Hier explizit gesetzt. */
body.elementor-page-405 .v2-lit__text,
body.elementor-page-405 .v2-lit__text p {
  max-width: 20em;
  margin-inline: auto;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: clamp(1.25rem, 3.3vw, 2.6rem);
  line-height: 1.34;
  text-wrap: pretty;
}

/* 10 - Logo-Band: Innenabstand halbieren.
   design.css setzt clamp(4rem, 9vw, 8rem) oben UND unten. Auf der Startseite
   tragen das drei uebereinanderliegende Baender, hier laeuft nur eines -
   GEMESSEN standen dadurch rund 340 px leere Flaeche vor den Referenzen. */
body.elementor-page-405 .v2-logos { padding-block: clamp(2rem, 4vw, 3.5rem); }

/* 11 - Hero-CTA an die Textspalte binden.
   Der Knopf sass rechts unten ohne optische Bindung an H1 und Eyebrow.
   Er gehoert unter den Text, nicht daneben. */
/* Das Hero-Grid stellt den CTA in die Zelle "tat", also rechts NEBEN den Lead:
     "lead  tat"
   Seit der Lead als eigene Sektion herausgeloest ist, steht der Knopf allein
   in der rechten Spalte einer leeren Zeile. Er bekommt daher die ganze Zeile
   und beginnt links, buendig unter Eyebrow und H1. */
body.elementor-page-405 .lxs-hero__cta {
  grid-column: 1 / -1;
  justify-self: start;
  justify-content: flex-start;
}/* End custom CSS */