/*
Theme Name: Schramm Farbgestaltung
Theme URI: https://schramm-farbgestaltung.de/
Author: like machines
Description: WordPress-Theme für Schramm Farbgestaltung
Version: 8.0.1
Text Domain: sf
*/

/* ============================================================
   FONTS
   ============================================================ */
@font-face {
  font-family: 'Exo 2';
  src: url('assets/fonts/Exo-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Exo 2';
  src: url('assets/fonts/Exo-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
  --red:          #E02926;
  --red-dark:     #c02020;
  --orange:       #FB7E12;
  --yellow:       #FCCA0B;
  --black:        #000;
  --white:        #fff;
  --grey:         #808080;              /* --base-color-brand--grey */
  --overlay-dark: rgba(0,0,0,0.47);     /* #00000078 */
  --nav-h:        80px;
  --max:          80rem;                /* container-large */
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; overflow-x: hidden; }
body {
  font-family: 'Exo 2', Arial, sans-serif;   /* inherited by all content below */
  color: #fff;
  background: #000;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
img { max-width: 100%; display: block; }
a   { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }

.wp-block-paragraph { margin-bottom: 1rem; }

/* ============================================================
   WEBFLOW UTILITY — LAYOUT
   ============================================================ */
.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

/* Centered containers */
.container-large  { width: 100%; max-width: 80rem; margin-left: auto; margin-right: auto; }
.container-medium { width: 100%; max-width: 64rem; margin-left: auto; margin-right: auto; }
.container-small  { width: 100%; max-width: 48rem; margin-left: auto; margin-right: auto; }

/* max-width helpers */
.max-width-large  { width: 100%; max-width: 48rem; }
.max-width-medium { width: 100%; max-width: 35rem; }
.max-width-small  { width: 100%; max-width: 30rem; }

/* padding-global: 4rem L/R (1:1 Original) */
.padding-global {
  padding-left: 4rem;
  padding-right: 4rem;
}
/* padding-global-2: 5% L/R (CTA + Contact-Bar) */
.padding-global-2 {
  padding-left: 5%;
  padding-right: 5%;
}

/* padding-section sizes */
.padding-section-xsmall {
  padding-top: 3rem;
  padding-bottom: 3rem;
  display: block;
}
.padding-section-xsmall.no-bottom-padding { padding-bottom: 0; }
.padding-section-medium { padding-top: 5rem; padding-bottom: 5rem; }
.padding-section-large  { padding-top: 7rem; padding-bottom: 7rem; }

/* margin helpers */
.margin-bottom               { margin-bottom: 0; }
.margin-bottom.margin-large  { margin: 0 0 1rem; }
.margin-bottom.margin-medium { margin: 0; }
.margin-bottom.margin-small  { margin-top: 0; margin-left: 0; margin-right: 0; }
.margin-bottom.margin-xxlarge {
  margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: 3rem;
}
.margin-top                { margin-bottom: 0; }
.margin-top.margin-medium  { margin-top: 1.5rem; margin-bottom: 0; }

/* text-align */
.text-align-center { text-align: center; }

/* button-group */
.button-group {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

/* ============================================================
   WEBFLOW UTILITY — TYPOGRAPHY
   ============================================================ */
.heading-style-h1 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}
/* Hero h1: uppercase, centered */
.heading-style-h1.text-color-white.head-top {
  text-align: center;
  text-transform: uppercase;
  font-size: 3.2rem;
  position: relative;
}
.text-span { text-transform: uppercase; font-weight: bold; }

.heading-style-h2 {
  float: none;
  text-align: left;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
}
.heading-style-h2.text-color-alternate { text-transform: uppercase; }

.heading-style-h2-3 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
}

.heading-style-h3 {
  color: #fff;
  text-align: left;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
  position: static;
}

.heading-style-h5 {
  text-transform: none;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
}

.heading-style-h6 {
  text-transform: uppercase;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
}

.text-size-xlarge { font-size: 1.125rem; }
.text-size-xlarge.text-weight-bold { font-size: 1.4rem; font-weight: 500; }
.text-size-xlarge.text-color-white { color: #fff; font-size: 1rem; }

.text-size-large  { font-size: 1.25rem; }
.text-size-medium { font-size: 1rem; }
.text-block.text-size-medium { text-align: center; }

.text-weight-bold     { font-weight: 700; }
.text-weight-semibold { font-weight: 600; }

.text-color-white     { color: #fff; }
.text-color-grey      { color: var(--grey); }
.text-color-alternate { color: #fff; }

.paragraph { font-size: .8rem; }

/* ============================================================
   BUTTONS
   ============================================================ */
.button {
  border: 0 solid #000;
  background-color: var(--red);
  color: #fff;
  text-align: center;
  border-radius: 12px;
  padding: .75rem 1.5rem;
  text-decoration: none;
  transition: font-size .2s;
  display: inline-block;
  cursor: pointer;
}
.button:hover {
  background-color: var(--orange);
  color: #fff;
}
.button.is-link {
  color: #000;
  background-color: transparent;
  border-style: none;
  padding: .25rem 0;
  line-height: 1;
}
.button.is-link.is-icon {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  color: var(--red);
}
.button.is-link.is-icon.review-link {
  text-transform: uppercase;
  cursor: pointer;
}
.button.is-icon {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  justify-content: center;
  align-items: center;
  display: flex;
}
.button.is-small {
  border-radius: 10px;
  padding: .5rem 2.3rem;
  font-size: 1rem;
  font-weight: 300;
}
.button.background-color-black {
  background-color: #000;
  color: #fff;
  padding-left: 2.3rem;
  padding-right: 2.3rem;
}
.button.background-color-black:hover { background-color: #222; }
.button.background-color-black.termin-btn { cursor: pointer; }

/* ============================================================
   NAVBAR  (custom classes — header.php)
   Original: fixed pill (95% × 80px) whose glass background/blur
   fades in on scroll (.nav-visible, toggled by GSAP in main.js).
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  height: var(--nav-h);
  padding-top: 10px;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Glass pill: wraps logo/toggle row + mobile nav dropdown.
   On mobile it expands vertically to include the dropdown — both
   elements share one background, so no gap is possible.

   The pill's own left/right edge sits at --head-gut from the viewport, so the
   pill (and the flush logo/nav inside it) lines up with the page content
   (.padding-global). --head-gut tracks .padding-global across breakpoints. */
.header-wrap {
  --head-gut: 4rem;      /* pill edge gutter — kept equal to .padding-global */
  --head-pad: 1.5rem;    /* breathing room inside the pill (logo/nav inset) */
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  background-color: transparent;
  border-radius: 19px;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 80px;
  padding: 5px var(--head-pad);
  position: relative;
  margin: 0 var(--head-gut);
  pointer-events: auto;
  transition: background-color .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease;
}
.header-wrap.nav-visible {
  background-color: #0000004a;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}
/* Logo/toggle row inside the pill */
.header-inner {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* Nav links + hamburger go dark on white background */
.header-wrap.nav-visible .header-nav a:hover,
.header-wrap.nav-visible .header-nav a.active { color: var(--red); }
.header-wrap.nav-visible .header-nav a.btn-red { color: #fff !important; }

/* Logo */
.header-logo { flex-shrink: 0; }
.header-logo img {
  height: 46px; width: auto; display: block;
}

/* Nav links — regular links have no border/background;
   only the CTA "Kontaktiere uns" (.btn-red) gets the red pill. */
.header-nav {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
}
.header-nav a {
  color: #fff;
  border: none;
  background: none;
  border-radius: 0;
  padding: .5rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
  transition: color .2s;
  text-transform: none;
  letter-spacing: normal;
}
.header-nav a:hover,
.header-nav a.active { color: var(--red); }

.header-nav a.btn-red {
  background: var(--red);
  color: #fff !important;
  border-radius: 12px;
  border: none;
  padding: .75rem 1.5rem;
  font-weight: 400;
  margin-left: .5rem;
  transition: background .2s, color .2s;
}
.header-nav a.btn-red:hover { background: var(--orange); color: #fff !important; }

/* Zusatz-Infos nur im mobilen Vollbild-Menü sichtbar */
.mobile-menu-meta { display: none; }

/* Hintergrund-Scroll sperren, solange das mobile Menü offen ist */
body.nav-locked { overflow: hidden; }

/* Hamburger (mobile) */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 5px;
  background: none;
  border: none;
}
.nav-toggle span {
  display: block; width: 26px; height: 2px;
  transition: all .3s;
}
.nav-toggle span:nth-child(1){
  background: var(--red);
}
.nav-toggle span:nth-child(2){
  background: var(--orange);
}
.nav-toggle span:nth-child(3){
  background: var(--yellow);
}
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ============================================================
   HERO  —  .section_top  (1:1 Original)
   ============================================================ */
/* z-index:3 creates a stacking context above .hero-blur-overlay (z-index:2),
   so the headline stays sharp — the backdrop-filter blurs only the video below. */
.section_top {
  object-fit: cover;
  height: auto;
  position: relative;
  top: 0;
  overflow: visible;
  z-index: 3;
}

/* div-block-43: fixed video background (z-index:0). No background-color here —
   the dark hero atmosphere comes from .div-block-44, which scrolls away with
   the hero, keeping the fixed video clean for the blurred service section. */
.div-block-43 {
  z-index: 0;
  width: 100vw;
  height: 100svh;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}
.div-block-43 .background-video,
.div-block-43 .w-background-video { width: 100%; height: 100%; position: absolute; inset: 0; }
.div-block-43 video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* hero-blur-overlay: GSAP scrub controls opacity + backdrop-filter.
   z-index:2 — above the fixed video (0) but below content sections (20),
   so it ONLY blurs the hero video area. */
.hero-blur-overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100svh;
  z-index: 2;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  background: rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
}

/* div-block-44: inner container — GSAP pins .section_top to control scroll space. */
.div-block-44 {
  background-color: #00000078;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  position: relative;
  overflow: visible;
}

/* div-block-46: pinned by GSAP on .section_top; relative keeps it in flow. */
.div-block-46 {
  height: 100svh;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
}

/* Hero cycling slides — GSAP moves .hero-slides-track vertically inside the
   clipped .div-block-22 to scroll slide 1 out and slide 2 into view. */
.hero-slides-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.hero-slide-h1 {
  flex-shrink: 0;
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* section_header44: absolute, full viewport */
.section_header44 {
  z-index: 11;
  background-color: transparent;
  width: 100vw;
  height: 100svh;
  justify-content: center;
  align-items: center;
  display: block;
  position: absolute;
  top: 0;
}

/* top-hero-container: grid, centers content */
.top-hero-container {
  grid-column-gap: 0;
  grid-row-gap: 0;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  width: 100%;
  height: 100%;
  display: grid;
}

/* div-block-55: vertical spacing */
.div-block-55 { height: 175px; }

/* div-block-22: clips the h1 entrance (overflow hidden) */
.div-block-22 {
  position: relative;
  text-align: center;
  height: 160px;
  overflow: hidden;
}

/* div-block-52: mobile CTA (hidden on desktop) */
.div-block-52 { display: none; }

/* ============================================================
   SERVICES  —  .section_layout242
   ============================================================ */
.section_layout242 {
  z-index: 20;
  color: #fff;
  background-color: #00000078;
  padding-top: 5rem;
  padding-bottom: 5rem;
  position: relative;
}

.layout242_list {
  grid-column-gap: 1rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  place-items: stretch center;
  display: grid;
}

/* White card → text must be dark (body default is #fff) */
.layout242_item {
  background-color: #fff;
  border-radius: 18px;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 20px 20px 40px;
  display: flex;
  color: #111;
}
.layout242_item .heading-style-h6 { color: #111; }
.layout242_item .paragraph { color: #333; }

.layout242_item-icon-wrapper {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.icon-2x2-medium { width: 4rem; height: 4rem; }

/* ============================================================
   MARQUEE  —  .line_animation
   Two counter-running rows, driven by GSAP scrub (main.js).
   ============================================================ */
.line_animation {
  background-color: #000;
  flex-flow: column;
  display: flex;
  position: relative;
  overflow: hidden;
  z-index: 20;
  padding: 2rem 0;
  gap: 0;
  border: none;
}
/* First marquee (after services) stays semi-transparent so the blurred video shows through */
#section-service + .line_animation {
  background-color: #00000078 !important;
}

.section_loop_right,
.section_loop_left {
  overflow: hidden;
  width: 100%;
}

/* Scrolling track — duplicated items for a seamless loop */
.div-block-9 {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 0;
}

.loop_right_item,
.loop_left_item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.1;
  padding: 0 2rem;
  user-select: none;
  /* Hohle Outline-Schrift in Rot */
  color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--red);
}

/* image-2: kept for potential image-mode fallback */
.image-2 { width: 80%; }

/* ============================================================
   PROJECTS  —  .section.track  (Horizontal Scroll)
   JS sets the exact pin height on .js-proj-outer, so .section.track
   must stay height:auto to avoid an over-tall section / gap.
   ============================================================ */
.section.track {
  z-index: 20;
  background-color: #000;
  display: block;
  position: relative;
  height: auto;
}

.js-proj-outer { position: relative; }

/* div-block-28: sticky container, full viewport */
.div-block-28 {
  z-index: 20;
  background-color: #00000078;
  width: 100vw;
  height: 100svh;
  position: sticky;
  top: 0;
  overflow: hidden;
}

/* div-block-12: absolute heading */
.div-block-12 {
  z-index: 10;
  position: absolute;
  top: 100px;
}

/* collection-list-wrapper: full viewport, flex row */
.collection-list-wrapper {
  box-sizing: content-box;
  flex-flow: row;
  justify-content: flex-start;
  align-items: stretch;
  width: 100vw;
  height: 100svh;
  display: flex;
  position: sticky;
  top: 0;
}

/* collection-list: flex row track */
.collection-list {
  box-sizing: border-box;
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  flex: none;
  width: auto;
  height: 100%;
  display: flex;
  overflow: visible;
}
.collection-list.frame {
  grid-column-gap: 0;
  grid-row-gap: 0;
}

/* collection-item: each project slide */
.collection-item {
  box-sizing: border-box;
  object-fit: cover;
  background-position: center;
  background-size: cover;
  flex: none;
  width: 100vw;
  height: 100%;
  position: relative;
}

/* div-block-14: dark overlay on each slide */
.div-block-14 {
  background-color: #0000005e;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0; left: 0;
}

/* text-block-8: city/location */
.text-block-8 {
  color: #fff;
  text-align: center;
}

/* portfo-title: project name */
.portfo-title {
  text-transform: uppercase;
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.2;
}

/* ============================================================
   ABOUT  —  .section-2
   z-index:20 covers the fixed hero video (0) and blur overlay (2);
   without it the section appears blurry and the video bleeds through.
   ============================================================ */
.section-2 {
  z-index: 20;
  background-color: #000;
  flex-flow: column;
  display: flex;
  position: relative;
  top: auto;
}

/* div-block-48: sticky separator bar */
.div-block-48 {
  z-index: 20;
  border-bottom: 1px solid var(--red);
  background-color: #000;
  height: auto;
  margin-top: 0;
  display: block;
  position: sticky;
  top: 0;
}

/* div-block-47: flex row — left + right columns */
.div-block-47 {
  display: flex;
  position: static;
}

/* div-block-30: 35% left nav */
.div-block-30 {
  border-bottom: 1px solid var(--red);
  width: 35%;
  position: static;
}

/* div-block-16: left nav content — pinned by GSAP ScrollTrigger on desktop */
.div-block-16 {
  border-right: 1px solid transparent;
  width: auto;
}

/* div-block-31: 65% right content */
.div-block-31 {
  border-left: 1px solid var(--red);
  width: 65%;
  padding-top: 0;
}

/* div-block-15: each content block in right column (heading above FAQ) */
.div-block-15 {
  border-bottom: 1px solid var(--red);
  background-color: #000;
  display: flex;
  flex-direction: column;
  position: static;
}

.div-block-17 { width: 100%; }
.div-block-17 .margin-bottom { margin-bottom: 4.1rem; }

/* In the about section, container-small left-aligns so the heading lines up
   with the FAQ questions below (which use padding-global directly). */
#section-about .container-small {
  margin-left: 0;
  max-width: none;
}

/* left-nav-title-block */
.left-nav-title-block { margin-bottom: 20px; }

/* text-block-18: left nav labels (red, 36px) */
.text-block-18 {
  color: var(--red);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
}
.text-block-18.show-mob { display: none; }
.text-block-18.hide-mob { display: block; }
/* inactive left-nav labels turn white */
.text-block-18.label-inactive {
  color: #fff !important;
  transition: color .5s ease;
}

/* CEO stats block */
.div-block-18 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: space-between;
  display: flex;
}
/* CSS Grid — image spans both rows, stats + fio stack in the right column */
.div-block-18.margin-bottom.margin-small {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "image stats"
    "image fio";
  column-gap: 4.1rem;
  row-gap: 1.5rem;
  align-items: start;
}
.div-block-18.margin-bottom.margin-small .div-block-19 { grid-area: image; }
.div-block-18.margin-bottom.margin-small .div-block-4  { grid-area: stats; }
.div-block-18.margin-bottom.margin-small .fio-block    { grid-area: fio; }

/* div-block-19: CEO photo col */
.div-block-19 { width: 50%; }
.div-block-19.margin-bottom.margin-medium { width: auto; }

/* image-3: CEO photo */
.image-3 {
  border-radius: 13px;
  max-width: 260px;
  position: relative;
}

/* div-block-4: stats list */
.div-block-4 {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  flex-flow: column;
  flex: none;
  justify-content: space-between;
  align-self: stretch;   /* fill the photo-height grid row so stats spread evenly */
  display: flex;
}

/* div-block-3: each stat row */
.div-block-3 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  color: var(--red);
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

/* text-block-4: stat number — reserves a fixed min-width so every label
   (.text-block-5) starts at the same x and the labels line up as a column.
   Value must be >= the widest number (e.g. "4463m²"); adjust if needed. */
.text-block-4 {
  color: var(--red);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  min-width: 3rem;
}

/* text-block-5: stat label — wrap to one word per line (matches the design),
   independent of whether the ACF value contains a manual line break */
.text-block-5 {
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--red);
  white-space: normal;
  width: min-content;
  line-height: 1.2;
}

/* text-block-12: CEO name */
.text-block-12 {
  color: var(--red);
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 800;
}

/* text-block-13: CEO role */
.text-block-13 {
  color: #fff;
  font-size: .8rem;
}

/* fio-block: CEO name+role block */
.fio-block { flex-direction: column; align-items: flex-start; align-self: flex-start; }

/* ============================================================
   FAQ  —  .faq6_*
   ============================================================ */
.faq6_list-grid {
  grid-column-gap: 0;
  grid-row-gap: 0;
  border-radius: 1px;
  grid-template-rows: auto;
  grid-template-columns: 100%;
  grid-auto-columns: 100%;
  place-items: start stretch;
  display: grid;
  border-top: 1px solid var(--red);
}

.faq6_accordion {
  border-style: none none solid;
  border-width: 1px;
  border-color: transparent transparent var(--red);
  background-color: #000;
  color: #fff;
  border-radius: 0;
  flex-direction: column;
  justify-content: flex-start;
  display: flex;
  overflow: hidden;
}

.faq6_icon-wrapper {
  flex: none;
  justify-content: center;
  align-self: flex-start;
  align-items: center;
  width: 3rem;
  display: flex;
}

.faq6_icon {
  color: var(--red);
  font-size: 1.5rem;
  transition: transform .4s ease;
  display: flex; align-items: center; justify-content: center;
}
.faq6_icon svg { width: 28px; height: 28px; stroke: var(--red); }
.faq6_accordion.open .faq6_icon { transform: rotate(45deg); }

.faq6_question {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  cursor: pointer;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 0;
  display: flex;
}

/* faq6_answer: JS sets an explicit px height for smooth animation */
.faq6_answer {
  height: 0;
  overflow: hidden;
  transition: height .4s cubic-bezier(0.4, 0, 0.2, 1), padding .4s ease;
  padding-bottom: 0;
}
.faq6_answer-inner { padding-bottom: 2rem; }
.faq6_accordion.open .faq6_answer { padding-bottom: 0; }

/* ============================================================
   CTA RED  —  .section_layout192-2
   overflow:hidden clips the x-slide animation; GPU-accelerated.
   ============================================================ */
.cta-outer {
  position: relative;
  z-index: 20;
  background-color: #000;
}

.section_layout192-2 {
  background-image: linear-gradient(135deg, var(--red) 0%, var(--orange) 100%);
  color: #fff;
}

.layout192_component-2 {
  grid-column-gap: 70px;
  grid-row-gap: 70px;
  display: flex;
  align-items: flex-start;
}

.layout192_image-wrapper-2 {
  box-sizing: border-box;
  object-fit: fill;
  border-radius: 0;
  display: block;
  overflow: visible;
  flex-shrink: 0;
}

.layout192_image-2 {
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 19px;
  width: auto;
  max-width: 316px;
  height: auto;
  display: block;
  overflow: hidden;
}

/* text-block-15: name */
.text-block-15 {
  color: #fff;
  text-transform: uppercase;
  font-size: 1.3rem;
  font-weight: 800;
}
/* text-block-16: role */
.text-block-16 { color: #fff; }

/* ── CTA-Slider (cta_gallery) ───────────────────────── */
/* .cta-slider clips den Flex-Track; JS schiebt den Track per
   translateX – gleiche Slide-Animation wie die Testimonials. */
.cta-slider {
  max-width: 316px;
  overflow: hidden;
}
.cta-slider-track {
  display: flex;
  transition: transform .5s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}
.cta-slide {
  flex: 0 0 100%;
  min-width: 100%;
}

/* Punkt-Navigation */
.cta-dots {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.cta-dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.cta-dot:hover { background: rgba(255,255,255,.7); }
.cta-dot.is-active {
  background: #fff;
  transform: scale(1.15);
}

.layout192_content-right {
  grid-column-gap: 21px;
  grid-row-gap: 21px;
  flex-flow: column;
  display: flex;
  flex: 1;
}
.layout192_content-right.max-width-large { justify-content: flex-start; }
.layout192_content-right .heading-style-h2-3 { margin-bottom: 1rem; }
.layout192_content-right p { margin-bottom: 1.5rem; }

/* ============================================================
   TESTIMONIALS  —  .section_testimonial17
   ============================================================ */
.section_testimonial17 {
  background-color: #000;
  color: #fff;
  position: relative;
  overflow: hidden;
  z-index: 20;
}

.div-block-7 {
  justify-content: space-between;
  align-items: baseline;
  display: flex;
}
.div-block-7.margin-bottom { margin-bottom: 1rem; }

/* gallery21_slider: clips the sliding mask */
.gallery21_slider {
  background-color: transparent;
  width: 100%;
  padding-bottom: 5rem;
  display: block;
  position: relative;
  overflow: hidden;
}

/* div-block-42: review link (absolute bottom left) */
.div-block-42 {
  position: absolute;
  bottom: 0;
  left: 0;
}

/* gallery21_mask: flex track — JS translates this; .gallery21_slider clips it */
.gallery21_mask {
  display: flex;
  transition: transform .5s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}

/* gallery21_slide: 2 visible side-by-side on desktop */
.gallery21_slide {
  flex: 0 0 50%;
  min-width: 0;
  padding-right: 2rem;
  box-sizing: border-box;
}

.testimonial17_card {
  border: 1px none;
  background-color: #fff;
  border-radius: 1rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: auto;
  display: inline-flex;
  padding: 2rem;
  color: #000;
  vertical-align: top;
}

.testimonial17_content-top {
  grid-column-gap: 21px;
  grid-row-gap: 21px;
  flex-flow: column;
  display: flex;
  position: relative;
  margin-bottom: 1rem;
}

/* rating stars */
.testimonial17_rating-wrapper { display: flex; }
.icon-rate svg path { fill: var(--yellow); }
.testimonial17_rating-icon {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: .25rem;
  display: flex;
}
.icon-embed-xsmall { display: flex; }
.icon-embed-xsmall svg { width: 18px; height: 17px; }

/* review text */
.section_testimonial17 .text-size-xlarge {
  font-size: 1.125rem;
  color: #333;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.testimonial17_client {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  text-align: left;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}
.testimonial17_client-info { flex: 1; }
.text-weight-semibold strong {
  font-size: .9rem;
  font-weight: 800;
  color: #111;
  text-transform: uppercase;
}

/* gallery21_nav: prev/next arrows */
.gallery21_nav {
  display: flex;
  gap: 12px;
  margin-top: 2rem;
}
.gallery21_arrow {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--red);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s;
}
.gallery21_arrow:hover { background: var(--red-dark); }

/* image-6: arrow icon in review-link */
.image-6 { width: 60px; }

/* div-block-56 */
.div-block-56 { position: static; }

/* ============================================================
   CONTACT FORM  —  .section-form
   ============================================================ */
.section-form {
  padding-top: 100px;
  position: relative;
  z-index: 20;
  background-color: #000;
}

/* div-block-32: flex row, bordered top+bottom red */
.div-block-32 {
  border-top: 1px solid var(--red);
  border-bottom: 1px solid var(--red);
  display: flex;
}

/* div-block-33: 35% title column */
.div-block-33 { width: 35%; }

/* div-block-34: 65% form column */
.div-block-34 {
  border-left: 1px solid var(--red);
  width: 65%;
}

.contact1_form-block {
  border-left: 1px none var(--red);
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 0;
}

/* form placeholder */
.form-placeholder {
  color: rgba(255,255,255,.5);
  font-size: .9rem;
  line-height: 1.6;
  padding: 2rem;
}

/* ── WPForms styling ── */
.section-form .wpforms-container { width: 100%; }
.section-form .wpforms-field-label { display: none !important; }
.section-form .wpforms-field {
  border-bottom: 1px solid var(--red) !important;
  padding: 18px 0 !important;
  background: transparent !important;
  margin-bottom: 0 !important;
}
.section-form .wpforms-field input[type="text"],
.section-form .wpforms-field input[type="email"],
.section-form .wpforms-field input[type="tel"],
.section-form .wpforms-field textarea {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-family: 'Exo 2', Arial, sans-serif !important;   /* form controls don't inherit */
  font-size: 1.1rem !important;
  font-weight: 300 !important;
  padding: 0 0 0 1rem !important;
  width: 100% !important;
  outline: none !important;
}
.section-form .wpforms-field input::placeholder,
.section-form .wpforms-field textarea::placeholder {
  color: rgba(255,255,255,.45) !important;
  font-weight: 300 !important;
}
.section-form .wpforms-field textarea { min-height: 120px; resize: none; }
.section-form .wpforms-field-gdpr-checkbox { padding-left: 1rem !important; padding-right: 1rem !important; }
.section-form .wpforms-submit-container { padding: 0 !important; margin-top: 0 !important; }
.section-form .wpforms-submit {
  background-color: var(--red) !important;
  border-top: 1px solid #000 !important;
  width: 100% !important;
  height: auto !important;
  padding-top: 1.4rem !important;
  padding-bottom: 1.4rem !important;
  font-family: 'Exo 2', Arial, sans-serif !important;   /* form controls don't inherit */
  font-size: 1.4rem !important;
  font-weight: 300 !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  display: block !important;
}

/* ============================================================
   CONTACT BAR  —  .section-5
   Black bg, overflow:hidden; .div-block-24 slides in from left (GSAP).
   ============================================================ */
.section-5 {
  position: relative;
  z-index: 20;
  background-color: #000;
  overflow: hidden;       /* clips the x-animation of the inner block */
}
.section-5 .div-block-24 { will-change: transform; }

/* div-block-24: red background wrapper (starts off-canvas left) */
.div-block-24 {
  background: linear-gradient(135deg, var(--red) 0%, var(--orange) 100%);
  justify-content: space-between;
  display: block;
}

/* div-block-25: flex row, spaced */
.div-block-25 {
  justify-content: space-around;
  align-items: start;
  display: flex;
}

/* div-block-40: phone/WhatsApp link */
.div-block-40 {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  color: #fff;
  align-items: center;
  display: flex;
}
.div-block-40:hover { filter: invert(); color: #000; }

/* div-block-41: email link */
.div-block-41 {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  align-items: center;
  display: flex;
}
.div-block-41:hover { filter: invert(); }

/* image-4, image-5: contact icons */
.image-4, .image-5 { width: 32px; height: 32px; }

/* text-block-10/11: contact text labels */
.text-block-10 {
  border: 1px none #fff;
  color: #fff;
  font-size: 3rem;
}
.text-block-10.text-size-large { font-size: 2rem; }
.text-block-10.text-size-large:hover { color: rgba(255,255,255,.8); }

.text-block-11 { color: #fff; font-size: 3rem; }
.text-block-11.text-size-large { font-size: 2rem; }
.text-block-11.text-size-large:hover { color: rgba(255,255,255,.8); }

/* ============================================================
   FOOTER  (custom classes — footer.php)
   ============================================================ */
.site-footer {
  background: #000;
  z-index: 20;
  position: relative;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 3rem 4rem;
  flex-wrap: wrap;
}

.footer-company {
  font-size: 1rem;
  font-weight: 800;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: .5rem;
}

.footer-address a { color: rgba(255,255,255,.65); font-size: .875rem; line-height: 1.6; }
.footer-address a:hover { color: #fff; }

.footer-hours-label {
  font-size: .75rem;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .5rem;
}

.footer-hours { font-size: .875rem; color: rgba(255,255,255,.65); line-height: 1.6; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 4rem;
  border-top: 1px solid rgba(193,18,28,.2);
  flex-wrap: wrap;
}

.footer-copy { font-size: .8rem; color: rgba(255,255,255,.4); }

.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { font-size: .8rem; color: rgba(255,255,255,.5); transition: color .2s; }
.footer-links a:hover { color: var(--red); }

.footer-social { display: flex; gap: 1rem; align-items: center; }
.footer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6);
  font-size: .9rem;
  transition: border-color .2s, color .2s;
}
.footer-social a:hover { border-color: var(--red); color: var(--red); }

/* Mobile nav dropdown animations */
@keyframes menuSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes menuSlideUp {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}

/* ============================================================
   DATA-ANIM FALLBACK  (IntersectionObserver)
   ============================================================ */
[data-anim] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-anim].in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE — 991px (Tablet)
   ============================================================ */
@media screen and (max-width: 991px) {
  /* Nav */
  .nav-toggle { display: flex; }
  .site-header { overflow: visible; }

  /* Pill becomes a flex column to include the dropdown in the same background.
     Gutter comes from the pill's margin (--head-gut = .padding-global @991 = 2rem). */
  .header-wrap {
    --head-gut: 2rem;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    min-height: 80px;
    padding: 0;
  }
  .header-inner {
    padding: 5px var(--head-pad);
    height: 80px;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
  }

  /* ── Geöffnetes Vollbild-Menü ──────────────────────────────
     Die Glas-Pill wird zum dunklen Panel, das fast den ganzen
     Viewport füllt (kleiner Rand → abgerundete Ecken sichtbar). */
  .site-header.menu-open {
    height: 100vh;
    height: 100dvh;
  }
  .site-header.menu-open .header-wrap {
    position: fixed;
    inset: 10px;
    margin: 0;
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 20px);
    padding: 0;
    border-radius: 24px;
    background-color: #1c1c1c;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow-y: auto;
  }
  /* X-Icon im offenen Menü einheitlich rot */
  .nav-toggle.open span { background: var(--red); }

  /* Nav dropdown — in-flow, transparent so the wrapper background shows through */
  .header-nav {
    display: none;
    position: static;
    margin-left: 0;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0 0 3rem;
    background: transparent;
    border-radius: 0;
  }
  .header-nav.open,
  .header-nav.closing {
    display: flex;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 1.5rem var(--head-pad) 2rem;
    text-align: center;
  }
  .header-nav.open    { animation: menuSlideDown 0.35s ease forwards; }
  .header-nav.closing { animation: menuSlideUp 0.25s ease forwards; }

  /* Menü-Links: zentriert, großzügiger Abstand */
  .header-nav a {
    font-size: 1.35rem;
    padding: .85rem 1.5rem;
  }
  .header-nav.open a:first-child { margin-top: 1.5rem; }

  /* CTA-Button füllt die Breite */
  .header-nav a.btn-red {
    margin: 2rem 0 0;
    width: 100%;
    text-align: center;
    padding: 1.1rem 1.5rem;
    font-size: 1.1rem;
  }

  /* ── Zusatz-Infos (Adresse, Zeiten, Social, Rechtliches) ── */
  .mobile-menu-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    width: 100%;
    margin-top: auto;
    padding-top: 2.5rem;
    color: #fff;
  }
  .mobile-menu-company { font-weight: 600; margin-bottom: .35rem; }
  .mobile-menu-address a {
    color: #fff;
    text-decoration: underline;
    font-size: 1rem;
    padding: 0;
  }
  .mobile-menu-hours { line-height: 1.7; }
  .mobile-menu-hours-label { margin-bottom: .25rem; }
  .mobile-menu-social {
    display: flex;
    gap: 1.6rem;
    font-size: 1.4rem;
  }
  .mobile-menu-social a { color: #fff; padding: 0; }
  .mobile-menu-social a:hover { color: var(--red); }
  .mobile-menu-legal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
  }
  .mobile-menu-copy { font-size: .95rem; }
  .mobile-menu-legal a {
    color: #fff;
    text-decoration: underline;
    font-size: 1rem;
    padding: 0;
  }

  /* Hero */
  .section_top { overflow: visible; }
  .div-block-22  { height: 290px; }
  .hero-slide-h1 { height: 290px; }
  .div-block-55  { height: 305px; }
  .heading-style-h1.text-color-white.head-top { font-size: 2.4rem; }
  .hero-btn-mob { width: 100%; text-align: center; }

  /* Services */
  .layout242_list {
    grid-column-gap: 2rem;
    flex-flow: column;
    grid-auto-flow: row;
    display: flex;
    gap: 1.5rem;
  }
  .text-block.text-size-medium { margin-top: 1.5rem; }

  /* Projects */
  .section.track { height: auto; }

  /* About */
  .div-block-15 { flex-flow: column; }
  .div-block-16 {
    background-color: #000;
    border-right-style: none;
    border-bottom: 1px solid transparent;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    top: var(--nav-h);
  }
  .div-block-17 { width: 100%; }
  .section-2 { flex-flow: column; }
  .div-block-30 {
    z-index: 20;
    border-bottom: 1px solid var(--red);
    width: 100%;
  }
  .div-block-31 { border-left-style: none; width: 100%; }
  .div-block-47 { flex-flow: column; }
  .text-block-18 { color: #fff; font-size: 22px; display: block; }
  .text-block-18.show-mob { display: block; }
  .text-block-18.hide-mob { display: none; }

  /* CTA */
  .layout192_component-2 { grid-column-gap: 41px; flex-direction: column; }
  .heading-style-h2-3 { font-size: 2.75rem; }
  .layout192_content-right.max-width-large { grid-column-gap: 0; grid-row-gap: 0; }

  /* Contact form */
  .div-block-32 { flex-flow: column; }
  .div-block-33 { width: 100%; border-bottom: 1px solid var(--red); }
  .div-block-34 { border-left-style: none; width: 100%; }
  .contact1_form-block { border-left-style: none; }

  /* Contact bar */
  .div-block-25 {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
  }

  /* General */
  .padding-global { padding-left: 2rem; padding-right: 2rem; }
  .top-hero-container { position: sticky; top: 0; }
}

/* ============================================================
   RESPONSIVE — 767px (Mobile Landscape)
   ============================================================ */
@media screen and (max-width: 767px) {
  /* Typography */
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2.25rem; }

  /* Nav gutter tracks .padding-global (1.5rem here) */
  .header-wrap { --head-gut: 1.5rem; }

  /* Hero */
  .div-block-22  { height: 265px; }
  .hero-slide-h1 { height: 265px; }
  .div-block-55  { height: 280px; }
  .heading-style-h1.text-color-white.head-top { font-size: 2.2rem; }

  /* Services */
  .layout242_list {
    grid-row-gap: 1.5rem;
    grid-template-columns: 1fr;
  }

  /* Marquee */
  .div-block-7 {
    grid-column-gap: 29px;
    grid-row-gap: 29px;
    flex-flow: column;
  }
  .loop_right_item { flex: none; }
  .image-2 { width: auto; height: 50px; }

  /* About */
  .div-block-17 { width: auto; }
  .div-block-18.margin-bottom.margin-small {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }
  .div-block-18.margin-bottom.margin-small .div-block-19 { order: 1; width: 100%; }
  .div-block-18.margin-bottom.margin-small .div-block-4  { order: 3; }
  .div-block-18.margin-bottom.margin-small .fio-block    { order: 2; }

  /* Testimonials */
  .gallery21_slide { flex: 0 0 100%; padding-right: 1.5rem; }
  .testimonial17_client { flex-direction: column; align-items: flex-start; width: 100%; }
  .testimonial17_card { padding: 1.5rem; }

  /* Contact bar */
  .text-block-10.text-size-large,
  .text-block-11.text-size-large { font-size: 1.4rem; }

  /* Padding */
  .padding-global { padding-left: 1.5rem; padding-right: 1.5rem; }
  .padding-section-xsmall { padding-top: 2rem; padding-bottom: 2rem; }
  .faq6_question { padding: 2rem 0; }
  .faq6_icon-wrapper { width: 1.75rem; }
}

/* ============================================================
   RESPONSIVE — 479px (Mobile Portrait)
   ============================================================ */
@media screen and (max-width: 479px) {
  /* Hero */
  .div-block-22  { height: 225px; }
  .hero-slide-h1 { height: 225px; }
  .div-block-55  { height: 240px; }
  .heading-style-h1.text-color-white.head-top { font-size: 1.85rem; }
  .heading-style-h2-3 { font-size: 2.25rem; }
  .div-block-52 {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
  }

  /* Marquee */
  .div-block-7 {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
  }
  .loop_right_item { flex: none; }
  .image-2 { flex: 0 auto; width: auto; height: 40px; }

  /* About */
  .div-block-17 { width: 100%; }
  .div-block-18, .div-block-18.margin-bottom { flex-flow: column; gap: 0; }

  /* Nav pill — gutter 1rem (= .padding-global @479) */
  .header-wrap {
    --head-gut: 1rem;
    --head-pad: 1rem;
    border-radius: 14px;
  }

  /* Misc */
  .left-nav-title-block { margin-bottom: 5px; }
  .padding-global { padding-left: 1rem; padding-right: 1rem; }
  .footer-top { padding: 2rem 1rem; }
  .footer-bottom { padding: 1rem; }
}

/* ============================================================
   LEGAL PAGE
   ============================================================ */
.page-legal-title { margin-bottom: 2rem; }