/* ============================================================
   B12 MEDIA – Basis-/Animations-CSS für den Elementor-V4-Build
   Enthält NUR, was Elementors Atomic-Props nicht abbilden können:
   Fluid-Root, Resets, Grids, Sticky, Hover/Transitions, Masken,
   Sidenav, Cursor, Formular. Typo/Farben/Paddings = Global Classes.
   ============================================================ */

/* ---------- Fluid Root (Original Slater-Formel) ---------- */
:root {
  --font-from: 18; --font-to: 20;
  --vw-from: calc(1920 / 100); --vw-to: calc(2400 / 100);
  --coefficient: calc((var(--font-to) - var(--font-from)) / (var(--vw-to) - var(--vw-from)));
  --base: calc((var(--font-from) - var(--vw-from) * var(--coefficient)) / 16);
  --ease-main: cubic-bezier(0.65, 0.01, 0.05, 0.99);
  --ease-btn: cubic-bezier(0.625, 0.05, 0, 1);
}
html { font-size: calc(var(--base) * 1rem + var(--coefficient) * 1vw); }
@media screen and (max-width: 1920px) { :root { --font-from: 16; --font-to: 18; --vw-from: calc(1440 / 100); --vw-to: calc(1920 / 100); } }
@media screen and (max-width: 1440px) { :root { --font-from: 14; --font-to: 16; --vw-from: calc(479 / 100); --vw-to: calc(1440 / 100); } }
@media screen and (max-width: 479px)  { :root { --font-from: 12; --font-to: 16; --vw-from: calc(1 / 100); --vw-to: calc(479 / 100); } }

::selection { background: var(--fuel-yellow, #F1A728); color: #000; }

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Basis ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--black, #000);
  color: var(--white, #fff);
  font-family: 'Manrope', Arial, sans-serif;
  font-weight: 500;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul { margin: 0; padding: 0 !important; }
.e-div-block, .e-flexbox { min-width: 0; }

/* ---------- Container ---------- */
.container-large { margin-left: auto; margin-right: auto; width: 100%; }

/* ---------- Buttons (e-button + Character-Stagger) ---------- */
.b12-btn {
  position: relative; display: inline-block;
  isolation: isolate; overflow: hidden;
  cursor: pointer; text-decoration: none;
  border: 0; background: transparent;
  line-height: 1.3; z-index: 0;
}
/* Elementors .e-button-base bringt ein blaues background-color mit (hoehere
   Spezifitaet als .b12-btn) -> beim Hover-Inset schien Blau als Rand durch. */
.elementor .b12-btn.e-button-base, .elementor .b12-btn { background: transparent !important; }
.b12-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fuel-yellow, #F1A728); border-radius: .31rem;
  transition: inset .6s var(--ease-btn);
}
.b12-btn:hover::before { inset: .125em; }
.btn-animate-chars [data-button-animate-chars] { overflow: hidden; position: relative; display: inline-block; }
.btn-animate-chars [data-button-animate-chars] span {
  display: inline-block; position: relative;
  text-shadow: 0px 1.3em currentColor;
  transform: translateY(0em) rotate(0.001deg);
  transition: transform 0.6s var(--ease-btn);
}
.btn-animate-chars:hover [data-button-animate-chars] span { transform: translateY(-1.3em) rotate(0.001deg); }

/* Einheitliche Button-Groessen wie im Original-Layout (1rem/1.5rem, 1.25rem Schrift;
   grosse CTA-Variante 1.25rem/2rem, 1.5rem) — Elementor-Widget-Werte uebersteuern. */
.elementor .b12-btn, .b12-btn { padding: 1rem 1.5rem !important; font-size: 1.25rem !important; }
.elementor .b12-btn.b12-btn-big, .b12-btn.b12-btn-big { padding: 1.25rem 2rem !important; font-size: 1.5rem !important; }

/* ---------- Navbar ---------- */
/* Geometrie wie im Original: kein Aussen-Padding, 5.7rem hohe Leiste,
   Inhalt vertikal mittig, max 96rem breit. */
.b12-navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: rgba(0,0,0,.8);
  border-bottom: 1px solid var(--darker, #0F0F0F);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  padding: 0 !important;
}
.navbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 4.6rem !important;
  padding: 0 2.6rem !important;
  max-width: 96rem; margin: 0 auto; width: 100% !important;
}
/* Projekt-/Rechtsseiten haben eigenes Nav-Markup (b12-nav-inner/b12-logo)
   -> auf dieselbe Original-Geometrie bringen wie die Hauptseiten. */
.b12-nav-inner.b12-nav-inner { height: 4.6rem !important; align-items: center !important; max-width: 96rem; margin: 0 auto; }
.b12-logo.b12-logo img { height: 2.4rem !important; width: auto !important; }

/* Kundenwunsch 07/2026: Logo praesenter, Kontakt-Button in der Leiste dezenter */
img.navbar__logo.navbar__logo, .navbar__logo.navbar__logo img { height: 2.4rem !important; }
.navbar__inner .b12-btn, .b12-nav-inner .b12-btn {
  padding: .65rem 1.1rem !important;
  font-size: 1.1rem !important;
}
img.navbar__logo, .navbar__logo img { height: 2rem !important; width: auto !important; }
a.navbar__logo { display: inline-flex; align-items: center; }
.navbar__links { display: flex; gap: 2.8rem; list-style: none; }
.navbar__links a { font-size: 1.25rem; font-weight: 400; color: var(--white, #fff); transition: color .3s; }
.navbar__links a:hover { color: var(--fuel-yellow, #F1A728); }
.menu-button { display: none; align-items: center; gap: .6rem; color: #fff; font-size: 1.25rem; background: none; border: 0; cursor: pointer; font-family: inherit; }
/* Theme-Button-Padding neutralisieren (Hello-Theme setzt es mit Vorrang) */
button.menu-button.menu-button { padding: 0 !important; }
.menu-button__labels { position: relative; overflow: hidden; height: 1.6em; }
.menu-button__labels span { display: block; line-height: 1.6em; }
.menu-button__icon { width: 1em; height: 1em; color: var(--fuel-yellow, #F1A728); }

/* ---------- Sidenav ---------- */
.sidenav { position: fixed; inset: 0; z-index: 950; display: none; }
.sidenav__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; }
.sidenav__menu { position: absolute; top: 0; right: 0; bottom: 0; width: min(32rem, 100%); }
.sidenav__panel { position: absolute; inset: 0; background: var(--darker, #0F0F0F); border-left: 1px solid var(--card-border, #373737); }
.sidenav__panel.is-2 { background: #000; inset: 0 0 0 .75rem; }
.sidenav__content { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 8rem 3rem 3rem; }
.sidenav__links { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.sidenav__link-mask { overflow: hidden; }
.sidenav__link { display: flex; align-items: baseline; gap: .8rem; font-size: 2.6rem; font-weight: 500; color: #fff; }
.sidenav__link:hover { color: var(--fuel-yellow, #F1A728); }
.sidenav__link small { font-family: 'Geist Mono', monospace; font-size: 1rem; color: var(--fuel-yellow, #F1A728); }
.sidenav__contact { display: flex; flex-direction: column; gap: .4rem; }
.sidenav__contact .label { font-size: 1rem; text-transform: uppercase; color: var(--fuel-yellow, #F1A728); font-weight: 600; margin-bottom: .6rem; }
.sidenav__contact a { font-size: 1.25rem; color: #fff; }
.sidenav__contact a:hover { color: var(--fuel-yellow, #F1A728); }

/* ---------- Hero ---------- */
.hero-home, .hero-sub {
  background-color: #000;
  background-image: linear-gradient(90deg, #000 35%, transparent 80%, #000 95%),
    url('https://cdn.prod.website-files.com/69087a65ce2f8d046747adbe/691c55ff4d389f0501cbcdcf_test.svg');
  background-size: auto, 60%;
  background-position: 0 0, 90% -50px;
  background-repeat: repeat, no-repeat;
}
/* width 75% liess die vorgesplitteten GSAP-Zeilen intern umbrechen
   ("online" stand allein) -> volle Breite, Zeilen brechen wie beabsichtigt. */
.hero-home h1 { font-size: 3.75rem; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; color: #fff; margin: 0; width: 100%; }
.h1-accent { color: var(--fuel-yellow, #F1A728); }
.gsap_split_line-mask { display: block; overflow: clip; }
/* Muss eine vorgesplittete Zeile doch umbrechen (Tablet/Mobile), dann
   ausgewogen statt mit einzelnem Wort in der letzten Zeile. */
.gsap_split_line { display: block; will-change: transform; text-wrap: balance; }
html.js .gsap_split_line { transform: translateY(100%); opacity: 0; }

/* ---------- Über uns ---------- */
.about-grid { display: grid !important; grid-template-columns: repeat(12, 1fr); gap: 1rem; align-items: start; padding: 0 !important; }
.about-grid > .parallax-wrapper { grid-column: 1 / 5; }
/* Elementors 12-Spalten-Template kollabiert (erste 5 Spalten = 0px) -> Bild wurde
   45px schmal. Original-Layout erzwingen; doppelte Klasse schlaegt Atomic-Styles. */
.about-grid.about-grid { grid-template-columns: 1fr 1.2fr !important; gap: 5rem !important; align-items: center; }
.about-grid.about-grid > * { grid-column: auto !important; }
.about-grid > .about-text { grid-column: 6 / 13; }
.parallax-wrapper { overflow: hidden; border-radius: .3rem; aspect-ratio: 3 / 4; padding: 0 !important; }
.parallax-bg { height: 120%; will-change: transform; padding: 0 !important; }
.parallax-bg .e-image, .parallax-bg img, .parallax-bg .elementor-widget-container { width: 100% !important; height: 100% !important; }
.parallax-bg img { object-fit: cover !important; }

/* ---------- Projekte ---------- */
.section-intro { display: flex !important; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 4rem; flex-wrap: wrap; padding: 0 !important; }
.portfolio-list { display: grid !important; grid-template-columns: 1fr 1fr; gap: 5rem 2rem; padding: 0 !important; }
.portfolio-item { position: relative; padding: 0 !important; }
.portfolio-item__imgwrap { position: relative; overflow: hidden; aspect-ratio: 683 / 512; padding: 0 !important; }
.portfolio-item__imgwrap .e-image, .portfolio-item__imgwrap img { width: 100% !important; height: 100% !important; }
.portfolio-item__imgwrap img { object-fit: cover !important; transition: transform .7s var(--ease-main); }
.portfolio-item:hover .portfolio-item__imgwrap img { transform: scale(1.04); }
.portfolio-item__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.25); opacity: 0; transition: opacity .5s var(--ease-main); z-index: 1; pointer-events: none; }
.portfolio-item:hover .portfolio-item__overlay { opacity: 1; }
.portfolio-item__link { position: absolute; inset: 0; z-index: 2; display: block; }
/* Elementors Widget-Wrapper (position:relative, 0px hoch) kollabierte den
   Stretched-Link -> Wrapper aus dem Positionskontext nehmen, Link fuellt Karte. */
.portfolio-item__imgwrap .elementor-widget-html { position: static !important; }
.portfolio-item__titlerow { margin-top: .5rem; padding: 0 !important; }
.portfolio-item__arrow { width: 1.1rem; transition: transform .4s var(--ease-main); }
.portfolio-item__arrow img { width: 1.1rem !important; height: auto !important; }
.portfolio-item:hover .portfolio-item__arrow { transform: translate(.3rem, -.3rem); }

/* ---------- Leistungen (Sticky-Stacking) ---------- */
.services-grid { display: grid !important; grid-template-columns: repeat(12, 1fr); gap: 4rem 1rem; align-items: start; padding: 0 !important; }
.services-grid > .services-left { grid-column: 1 / 6; }
.services-grid > .services-right { grid-column: 6 / 13; }
.services-left { position: sticky; top: 14rem; padding: 0 !important; }
.services-right { display: flex !important; flex-direction: column; padding: 0 !important; }
.service-card { position: sticky; border: 1px solid var(--card-border, #373737); }
.service-card:nth-child(1) { top: 14rem; }
.service-card:nth-child(2) { top: 17.5rem; }
.service-card:nth-child(3) { top: 21rem; }
.service-card:nth-child(4) { top: 24.5rem; }
.service-card:nth-child(5) { top: 28rem; }
.service-card__iconwrap { background: linear-gradient(135deg, #1F1F1F 0%, #0A0A0A 100%); }
/* Der HTML-Widget-Wrapper ist 100% breit und blockig -> SVG klebte links am
   Kachelrand. Wrapper fuellt die Kachel und zentriert, wie im Original. */
.service-card__iconwrap .elementor-widget-html {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.service-card__iconwrap svg { width: 55%; height: 55%; color: var(--fuel-yellow, #F1A728); display: block; }
.sc-number img { width: .7rem !important; height: .7rem !important; }
.sc-number-text, .sc-number p { font-family: 'Geist Mono', 'SF Mono', monospace; }

/* Leistungen-Detailseite */
.leistung-block { border-top: 1px solid rgba(255,255,255,.18); }
.leistung-block__head { display: flex !important; justify-content: space-between; align-items: center; margin-bottom: 4rem; padding: 0 !important; }
.leistung-counter, .leistung-counter p { font-family: 'Geist Mono', monospace; font-size: 1rem; color: var(--text-muted, #9B9B9B); }
.leistung-grid { display: grid !important; grid-template-columns: 4fr 8fr; gap: 5rem; align-items: start; padding: 0 !important; }
.leistung-grid .service-card__iconwrap { width: 12rem !important; height: 12rem !important; }
.leistung-tags { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2.5rem 0 3rem; max-width: 34rem; padding: 0 !important; }
.leistung-tag {
  font-family: 'Geist Mono', monospace; font-size: .9rem; color: #fff;
  background: #111; border: 1px solid var(--card-border, #373737);
  padding: .7rem 1.1rem; border-radius: .2rem; white-space: nowrap; display: inline-block;
}

/* ---------- Divider ---------- */
.silver-divider { height: 1px; background: rgba(255,255,255,.18); width: 100%; padding: 0 !important; }

/* ---------- Testimonials ---------- */
.testimonial-wrap { position: relative !important; padding: 3.5rem 0 0 !important; }
.testimonial-list { position: relative; min-height: 34rem; padding: 0 !important; }
.testimonial-item { position: absolute !important; inset: 0; visibility: hidden; opacity: 0; padding: 0 !important; }
.testimonial-item.is--active { visibility: visible; opacity: 1; }
.testimonial-item__details { display: flex !important; align-items: center; gap: 1.6rem; margin-top: 3.5rem; padding: 0 !important; }
.testimonial-item__visual { width: 6.5rem; height: 6.5rem; border-radius: 50%; overflow: hidden; flex: none; padding: 0 !important; }
.testimonial-item__visual .e-image, .testimonial-item__visual img { width: 100% !important; height: 100% !important; }
.testimonial-item__visual img { object-fit: cover !important; }
.testimonial-wrap .elementor-widget-html { position: static !important; }
.testimonial-arrows { position: absolute; top: 3.5rem; right: 0; display: flex; gap: 1.6rem; }
.testimonial-arrow-btn { color: #fff; transition: color .3s; background: none; border: 0; cursor: pointer; padding: 0 !important; }
.testimonial-arrow-btn:hover { color: var(--fuel-yellow, #F1A728); }
.testimonial-arrow-btn svg { width: 2.4rem; height: 2.4rem; }
.text-line-mask { padding-bottom: 0.2em; margin-bottom: -0.2em; overflow: clip; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid !important; grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; padding: 0 !important; }
.faq-left { position: sticky; top: 14rem; }
.accordion-css { list-style: none; display: flex !important; flex-direction: column; gap: 1.4rem; padding: 0 !important; }
.accordion-css__item { border: 1px solid var(--card-border, #373737); border-radius: .26rem; background: transparent; padding: 0 !important; }
.accordion-css__item-top { display: flex !important; justify-content: space-between; align-items: center; gap: 2rem; padding: 1.7rem 1.8rem !important; cursor: pointer; }
.accordion-css__item-icon { flex: none; width: 1.4rem; height: 1.4rem; color: var(--fuel-yellow, #F1A728); transform: rotate(180deg); transition: transform 0.6s var(--ease-btn); }
.accordion-css__item.is-active .accordion-css__item-icon { transform: rotate(0.001deg); }
.accordion-css__item-bottom { display: grid !important; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease-btn); padding: 0 !important; }
.accordion-css__item.is-active .accordion-css__item-bottom { grid-template-rows: 1fr; }
.accordion-css__item-bottom > div { overflow: hidden; min-height: 0 !important; padding: 0 !important; }
.accordion-css__item-p { padding: 0 1.8rem 1.7rem !important; }

/* ---------- CTA ---------- */
.cta-inner { text-align: center; padding: 6rem 0 4rem; }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid !important; grid-template-columns: 1fr 1.1fr; gap: 6rem; align-items: start; padding: 0 !important; }
.contact-links { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 2.4rem; }
.contact-link { display: flex; align-items: center; gap: .7rem; font-size: 1.4rem; color: var(--fuel-yellow, #F1A728); }
.contact-link img { width: .7rem; height: .7rem; }
.contact-link:hover { color: var(--fuel-yellow-dark, #C08520); }
.contact-socials { display: flex; gap: 1.6rem; }
.contact-socials a { color: var(--fuel-yellow, #F1A728); }
.contact-socials svg { width: 1.6rem; height: 1.6rem; }
.b12-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.b12-form .form-field { margin-bottom: 1.6rem; }
.b12-form label { display: block; font-size: 1.2rem; font-weight: 400; margin-bottom: .7rem; color: #fff; }
.b12-form input, .b12-form select, .b12-form textarea {
  width: 100%; background: #050505; border: 1px solid var(--card-border, #373737);
  border-radius: .2rem; color: #fff; font: inherit; font-size: 1.1rem;
  padding: 1.1rem 1rem; outline: none; transition: border-color .3s; box-sizing: border-box;
}
.b12-form input:focus, .b12-form select:focus, .b12-form textarea:focus { border-color: var(--fuel-yellow, #F1A728); }
.b12-form textarea { min-height: 16rem; resize: vertical; }

/* ---------- Footer (Parallax) ---------- */
.footer-wrap { position: relative; background: var(--darker, #0F0F0F); overflow: hidden; padding: 0 !important; }
.footer-wrapper { position: relative; will-change: transform; padding: 0 !important; }
.footer-wrap__dark { position: absolute; inset: 0; background: #000; pointer-events: none; opacity: 0; }
.footer-top { display: grid !important; grid-template-columns: 1.2fr 1fr 1fr; gap: 4rem; padding: 0 !important; }
.footer-bottomlists { display: grid !important; grid-template-columns: 1.2fr 1fr 1fr; gap: 4rem; margin-top: 5rem; align-items: end; padding: 0 !important; }
.footer-logo img { width: 14rem !important; height: auto !important; }
.footer-linklist { display: flex; flex-direction: column; gap: .9rem; }
.footer-link-row { display: flex; align-items: center; gap: .7rem; }
.footer-link-row img { width: .7rem; height: .7rem; }
.footer-link { font-size: 1.5rem; font-weight: 400; color: var(--fuel-yellow, #F1A728); transition: color .3s; }
.footer-link:hover { color: var(--fuel-yellow-dark, #C08520); }

/* ---------- Tagline-Bullet ---------- */
.tagline img, img.tagline-bullet { width: .8rem !important; height: .8rem !important; }

/* ---------- Custom Cursor ---------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 999;
  pointer-events: none; opacity: 0; transition: opacity .3s;
  background: var(--fuel-yellow, #F1A728); color: #131313;
  font-size: 1rem; font-weight: 600;
  padding: .6rem 1.1rem; border-radius: 100rem;
}
.cursor p { margin: 0; }
body:has([data-cursor]:hover) .cursor { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .navbar__links { display: none; }
  .menu-button { display: flex; }
  .about-grid.about-grid, .services-grid.services-grid, .faq-grid.faq-grid, .contact-grid.contact-grid, .leistung-grid.leistung-grid { grid-template-columns: 1fr !important; }
  .about-grid.about-grid { gap: 3rem !important; }
  .services-left, .faq-left { position: static; }
  .portfolio-list.portfolio-list { grid-template-columns: 1fr !important; }
  .footer-top, .footer-bottomlists { grid-template-columns: 1fr; gap: 3rem; }
  .leistung-grid .service-card__iconwrap { width: 8rem; height: 8rem; }
  .cursor { display: none; }
}
@media (max-width: 479px) {
  .service-card { min-height: auto !important; }
  .testimonial-list { min-height: 40rem; }
  .b12-form .form-row { grid-template-columns: 1fr; }
}

/* Atomic e-flexbox ist per Default 100% breit – kompakte Flex-Gruppen zurücksetzen */
.navbar__right, .sc-number, .tagline { width: auto !important; flex: 0 0 auto; }
.hero-home .container-large, .hero-sub .container-large { width: 100% !important; }

/* e-con-Basisbreite in Flex-Reihen neutralisieren */
.section-intro > div { width: auto !important; }

/* Mobile-Feinschliff */
@media (max-width: 991px) {
  .hero-home h1 { font-size: 3.2rem; }
  .navbar__inner { padding: 0 1.4rem !important; }
  .navbar__inner .b12-btn { padding: .7rem 1.1rem !important; font-size: 1.1rem !important; }
  /* Menue-Widget nicht kuenstlich breit ziehen */
  .navbar__right { gap: 1.2rem !important; }
  .navbar__right .elementor-widget, .navbar__right .e-con { width: auto !important; }
}
@media (max-width: 479px) {
  .hero-home h1 { font-size: 2.4rem; }
  /* Logo (6.4:1, sehr breit) + Kontakt + Menue passen bei 375px nicht nebeneinander.
     Kontakt-Button raus aus der Navbar — CTA bleibt im Hero, Sidenav und Footer. */
  .navbar__inner .b12-btn { display: none !important; }
  .navbar__right { gap: 0 !important; }
}