/* ============================================================
   Teppichstudio Scheler — style.css
   Statischer Nachbau (ohne WordPress) · Mobile-First
   CD-Quelle: docs/CORPORATE-DESIGN.md
   ============================================================ */

/* ---------- 1. Design-Tokens ---------- */
:root {
  /* Farben */
  --c-yellow:  #FFCE03;
  --c-yellow-dark: #E5B902; /* Hover */
  --c-orange:  #EF7A2D;
  --c-dark:    #282828;
  --c-ink:     #333333;
  --c-text:    #747474;
  --c-bg:      #FFFFFF; /* Feedback: weißer Seitenhintergrund (vorher #D7D6D6) */
  --c-btn-ink: #212121;
  --c-white:   #FFFFFF;

  /* Typografie */
  --ff-display: 'Syncopate', sans-serif;
  --ff-body:    'Ubuntu', sans-serif;

  /* Layout */
  --content-max: 1140px;
  --sec-pad: 60px;

  /* Interaktion */
  --ease: 0.25s ease;
}

/* ---------- 2. Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Anker-Ziele nicht unter dem fixierten Sticky-Header verstecken */
[id] { scroll-margin-top: 84px; }

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 14px;            /* Original 13px — minimal angehoben für Lesbarkeit */
  line-height: 1.55;
  color: var(--c-text);
  background: var(--c-bg);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--c-orange); text-decoration: none; transition: color var(--ease); }
a:hover, a:focus-visible { color: var(--c-ink); }

/* Nur für Screenreader/Crawler sichtbar (z. B. h1) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Skip-Link (Barrierefreiheit) */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-yellow); color: var(--c-btn-ink);
  padding: 8px 16px; z-index: 200;
}
.skip-link:focus { left: 0; }

/* ---------- 3. Typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  text-transform: uppercase;
  line-height: 1.25;
  margin: 0 0 0.6em;
  color: var(--c-ink);
}
h1, .display   { font-size: clamp(24px, 5vw, 34px); font-weight: 700; }
h2             { font-size: clamp(20px, 4vw, 26px); font-weight: 700; }
h3             { font-size: clamp(16px, 3vw, 18px); font-weight: 700; }
.sub-orange    { color: var(--c-orange); font-weight: 400; font-size: 16px; }

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

/* ---------- 4. Layout-Helfer ---------- */
.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: 20px;
}
.section { padding-block: var(--sec-pad); }

/* Banner-Sektionen (dunkel / gelb) */
.banner {
  padding-block: 48px;
  text-align: center;
}
.banner--dark  { background: var(--c-dark); }
.banner--dark h2 { color: var(--c-white); margin: 0; }
.banner--yellow { background: var(--c-yellow); }
.banner--yellow h2 { color: var(--c-ink); margin: 0; }

/* Zwei-Spalten-Raster ab Tablet */
.grid-2 { display: grid; gap: 32px; }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; align-items: center; }
  .grid-2 > .order-first-md { order: -1; }
}

/* ---------- 5. Button ---------- */
.btn {
  display: inline-block;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c-btn-ink);
  background: var(--c-yellow);
  border: 0;
  border-radius: 3px;
  padding: 12px 24px;
  cursor: pointer;
  transition: background var(--ease), transform var(--ease);
}
.btn:hover, .btn:focus-visible {
  background: var(--c-yellow-dark);
  color: var(--c-btn-ink);
  transform: translateY(-1px);
}

/* ---------- 6. Header / Navigation ----------
   Original-Design (Avada Layout v6):
   - Header liegt transparent ÜBER dem Hero (großes Logo, 93px)
   - Beim Scrollen: Sticky-Header, geschrumpft, dunkler Hintergrund
     (#232323) + LOGO-SWAP auf die Variante ohne GmbH-Zusatz
   - Navigation = Vollbild-Flyout-Overlay (auch Desktop!):
     Hamburger mit gelben Linien, Overlay rgba(0,0,0,.9),
     zentrierte gelbe Syncopate-Links */
/* Feedback: Header läuft auf Weiß (Logo + Hamburger auf weißem Grund),
   Hero bekommt darunter einen gleichmäßigen weißen Rahmen.
   position:sticky statt fixed → kein Layout-Sprung beim Umschalten. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-white);
  transition: background var(--ease), box-shadow var(--ease);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 103px; gap: 16px;
  transition: min-height var(--ease);
}
.logo img { height: 80px; width: auto; transition: height var(--ease); }
.logo .logo--sticky { display: none; }

/* Sticky-Zustand (per JS gesetzt): shrink + swap + dunkler Grund
   (o_gmbh-Logo ist hell und braucht den dunklen Hintergrund) */
.site-header.is-stuck {
  background: rgba(35, 35, 35, 0.97);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.site-header.is-stuck .wrap { min-height: 64px; }
.site-header.is-stuck .logo img { height: 44px; }
.site-header.is-stuck .logo .logo--standard { display: none; }
.site-header.is-stuck .logo .logo--sticky { display: block; }

/* Auf Unterseiten (ohne Hero) direkt dunkel */
.site-header--solid {
  position: sticky;
  background: rgba(35, 35, 35, 0.97);
}
.site-header--solid .wrap { min-height: 72px; }
.site-header--solid .logo img { height: 48px; }

/* Hamburger: 3 Linien à 45px (Original-Optik).
   Auf weißem Header dunkel (Kontrast), auf dunklem Grund gelb. */
.nav-toggle {
  display: inline-flex; flex-direction: column; gap: 8px;
  background: none; border: 0; padding: 10px; cursor: pointer;
  z-index: 102; position: relative;
}
.nav-toggle span {
  /* Original-Screenshot: Hamburger auch auf Weiß gelb */
  width: 45px; height: 4px; background: var(--c-yellow);
  transition: transform var(--ease), opacity var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(12px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }

/* Vollbild-Flyout (fade), Links zentriert, groß, gelb */
.main-nav {
  position: fixed; inset: 0; z-index: 101;
  background: rgba(0, 0, 0, 0.9);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.main-nav.is-open { opacity: 1; visibility: visible; }
.main-nav ul {
  list-style: none; margin: 0; padding: 0;
  text-align: center;
}
.main-nav a {
  display: inline-block;
  font-family: var(--ff-display);
  font-size: clamp(15px, 2.4vw, 24px);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--c-yellow);
  padding: 10px 20px;
  position: relative;
}
/* Bar-Highlight wie im Original (avada-menu-highlight-style-bar) */
.main-nav a::after {
  content: ""; position: absolute; left: 20px; right: 20px; bottom: 4px;
  height: 3px; background: var(--c-yellow);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--ease);
}
.main-nav a:hover, .main-nav a:focus-visible,
.main-nav a[aria-current="page"] { color: var(--c-yellow); }
.main-nav a:hover::after, .main-nav a:focus-visible::after,
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- 7. Hero-Slider ----------
   Feedback: gleichmäßiges weißes Padding rundherum (Bild „gerahmt“),
   Titel zweispaltig: links Markenclaim (fix), rechts rotierender Slogan. */
.hero {
  position: relative; min-height: min(75vh, 680px); overflow: hidden;
  /* Original: zentrierter Kasten mit breiten weißen Rändern */
  width: min(100% - 48px, 1440px);
  margin: 24px auto;
  border-radius: 4px;
  display: flex; align-items: center;
}
@media (max-width: 600px) { .hero { width: calc(100% - 24px); margin: 12px auto; min-height: 70vh; } }
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1s ease;
}
.hero__slide.is-active { opacity: 1; }
.hero::before { /* nur ganz leichtes Kontrast-Overlay — Lesbarkeit macht die Box */
  content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.12); z-index: 1;
}

/* Titel-Box wie im Original: EINE dunkle, halbtransparente Box
   links im Bild, Inhalt (Titel gelb + Subline weiß) wechselt pro Slide */
.hero__caption {
  position: relative; z-index: 2;
  margin-left: clamp(16px, 6%, 96px);
  margin-right: clamp(16px, 4%, 64px); /* Feedback: Abstand auch nach rechts */
  width: min(560px, calc(100% - 32px));
  background: rgba(48, 48, 48, 0.88);
  padding: clamp(28px, 4vw, 52px) clamp(24px, 3.5vw, 48px);
  /* Feedback: Text braucht mehr Luft zur rechten Boxkante */
  padding-right: clamp(40px, 5vw, 72px);
  text-align: left;
}
.hero__caption h2 {
  color: var(--c-yellow);
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.3;
  margin: 0 0 24px;
}
.hero__caption p {
  font-family: var(--ff-display);
  color: var(--c-white);
  font-weight: 400;
  font-size: clamp(15px, 1.6vw, 26px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}
/* Slogans wechseln synchron zum Hintergrundbild */
.hero__slogan { display: none; }
.hero__slogan.is-active { display: block; animation: slogan-in .8s ease both; }
@keyframes slogan-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.hero__dots {
  position: absolute; bottom: 18px; inset-inline: 0; z-index: 2;
  display: flex; gap: 10px; justify-content: center;
}
/* Dots wie im Original-Screenshot: rund, weiß — aktiv gelb */
.hero__dots button {
  width: 14px; height: 14px; border-radius: 50%;
  border: 0; background: var(--c-white); cursor: pointer;
  transition: background var(--ease), transform var(--ease);
}
.hero__dots button.is-active,
.hero__dots button:hover { background: var(--c-yellow); transform: scale(1.15); }

/* ---------- 8. Media-Carousel ---------- */
.carousel { position: relative; }
.carousel__track {
  display: flex; gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;         /* Firefox */
  -webkit-overflow-scrolling: touch;
}
.carousel__track::-webkit-scrollbar { display: none; }
/* Feedback: nur EIN Bild gleichzeitig sichtbar.
   margin:0 = Reset der figure-Standardabstände (verursachte das
   ungleiche Padding oben in der Box!) */
.carousel__item {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
  position: relative;
  border-radius: 4px; overflow: hidden;
  aspect-ratio: 16 / 9; /* Feedback: schmalere Bilder (vorher 4:3) */
  background: #c4c3c3;
}
.carousel__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.carousel__item:hover img { transform: scale(1.05); }
/* Feedback: Titel nur bei Hover einblenden */
.carousel__caption {
  position: absolute; inset-inline: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  color: var(--c-white);
  font-family: var(--ff-display);
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  padding: 26px 12px 10px; text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.carousel__item:hover .carousel__caption,
.carousel__item:focus-within .carousel__caption { opacity: 1; }
/* Touch-Geräte haben kein Hover → Titel dauerhaft zeigen */
@media (hover: none) { .carousel__caption { opacity: 1; } }
/* Dot-Navigation unter dem Carousel (Original-Screenshot).
   Feedback: keine Pfeile, mehr Abstand der Dots zum Titel darunter. */
.carousel__dots {
  display: flex; gap: 8px; justify-content: center;
  padding-top: 12px;
}
.carousel__dots button {
  width: 8px; height: 8px; border-radius: 50%;
  border: 0; background: #c9c9c9; cursor: pointer; padding: 0;
  transition: background var(--ease), transform var(--ease);
}
.carousel__dots button.is-active { background: var(--c-ink); transform: scale(1.25); }

/* ---------- 9. Belags-Blöcke (Sticky-Scrolling wie im Original) ----------
   Layout: links klebt die große Dual-Headline (sticky, Offset ~ Header),
   rechts scrollt der Strom aus Carousels + hellgrauen Textboxen vorbei.
   Mobil: einspaltig, ohne Sticky. */
.boeden-layout { display: grid; gap: 32px; }
@media (min-width: 900px) {
  .boeden-layout { grid-template-columns: 1fr 1fr; align-items: start; }
  .boeden-sticky {
    position: sticky;
    top: 140px;              /* Original: sticky_offset 300 – an schlankeren Header angepasst */
    padding-right: 24px;
  }
}
/* Dual-Header wie im Original-Screenshot:
   erstes Wort fett auf gelbem Balken, Rest dünn (Syncopate 400) darunter */
.boeden-sticky h2 { line-height: 1.6; }
.boeden-sticky h2 .hl {
  display: inline;
  background: var(--c-yellow);
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 700;
  /* Feedback: mehr Luft oben/unten zwischen Text und gelbem Balken */
  padding: 9px 14px;
  /* lange Wörter (Belagsentfernung) dürfen mit ­ umbrechen;
     clone = gelber Balken umschließt jede Zeile sauber */
  hyphens: manual;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 2; /* verhindert Überlappung der Balken bei Umbruch */
}
.boeden-sticky h2 .rest { margin-top: 10px; }
.boeden-sticky h2 .rest {
  display: block;
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--c-ink);
  padding-left: 14px;
}
.boeden-sticky > p { padding-left: 14px; }
.boeden-sticky .sub-orange { display: block; margin-top: 6px; }

/* Intro „Egal welchen Raum…“ — 2-spaltig mit weißer Karte (Screenshot) */
.intro-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .intro-grid { grid-template-columns: 1.1fr 1fr; } }
.intro-card {
  background: var(--c-white);
  border-right: 4px solid var(--c-yellow); /* gelber Kantenakzent */
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
  padding: 40px 36px;
}
.intro-card h2 {
  font-size: clamp(24px, 3.2vw, 44px);
  font-weight: 400;               /* dünne Versalien wie im Original */
  letter-spacing: 0.04em;
  line-height: 1.35;
  margin: 0;
}
.intro-text p { font-size: 15px; line-height: 1.9; color: #4d4d4d; margin: 0; }

.boeden-stream > * + * { margin-top: 48px; }

/* Hellgraue Textboxen (Original: #F9F9F9-Innensektionen)
   Feedback: Slideshow sitzt DIREKT in der Box (randlos oben),
   Text darunter kompakt mit Toggle. */
.floor-card {
  background: #F9F9F9;
  /* Feedback: Bild fast randlos — exakt 8px oben und seitlich */
  padding: 8px 8px 32px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  overflow: hidden;
  text-align: center; /* Original-Screenshot: Karteninhalt zentriert */
}
.floor-card > .carousel {
  margin: 0 0 28px; /* Luft zwischen Dots und Titel */
}
/* Textinhalte behalten ihren komfortablen Innenabstand */
.floor-card > :not(.carousel) { margin-inline: 24px; }
.floor-card > .carousel .carousel__item { border-radius: 6px; }
/* größerer Abstand nach jeder Karte (Original: 160px Margin) */
.boeden-stream .floor-card { margin-bottom: 72px; }
.boeden-stream > :last-child { margin-bottom: 0; }

/* ---------- 9b. Unfold (Original: Premium Unfold Addon) ----------
   Text startet angeschnitten mit Verlaufsblende; „Mehr dazu“ klappt auf. */
.unfold__content {
  position: relative;
  max-height: 96px; /* Feedback: Text kompakter anreißen */
  overflow: hidden;
  transition: max-height 0.5s ease;
}
.unfold__content::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 60px;
  background: linear-gradient(rgba(249,249,249,0), #F9F9F9);
  transition: opacity 0.4s ease;
}
.unfold.is-open .unfold__content { max-height: 800px; }
.unfold.is-open .unfold__content::after { opacity: 0; }
/* Unfold-Button: dunkel, mit ↓-Pfeil (Original-Screenshot) */
.unfold__toggle {
  margin-top: 14px;
  background: var(--c-ink);
  color: var(--c-white);
}
.unfold__toggle::before { content: "↓ "; }
.unfold.is-open .unfold__toggle::before { content: "↑ "; }
.unfold__toggle:hover, .unfold__toggle:focus-visible {
  background: #000; color: var(--c-white);
}
/* Ohne JS: alles ausgeklappt */
html:not(.js) .unfold__content { max-height: none; }
html:not(.js) .unfold__content::after { display: none; }
html:not(.js) .unfold__toggle { display: none; }

/* ---------- 9c. Motion-FX-Parallax (Original: Elementor Motion Effects) ----------
   Elemente mit [data-fx-speed] driften beim Scrollen (JS setzt --fx-y).
   Negative Werte = Gegenläufig, wie im Original (0.9–1.1). */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  [data-fx-speed] { transform: translateY(var(--fx-y, 0)); will-change: transform; }
}
/* Banner: Hintergrund-Parallax (Scroll + Maus, dezent) */
.banner { position: relative; overflow: hidden; }
.banner > .wrap { position: relative; z-index: 1; }

/* ---------- 10. Service-Sektion (Video-Hintergrund) ---------- */
.service {
  position: relative; overflow: hidden;
  color: var(--c-white);
  padding-block: 120px; /* Feedback: mehr Luft oben und unten */
}
.service__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 0;
}
.service::before {
  /* Globales Overlay etwas leichter — die Lesbarkeit übernehmen die Boxen */
  content: ""; position: absolute; inset: 0;
  background: rgba(20,20,20,.4); z-index: 1;
}
.service .wrap { position: relative; z-index: 2; }
/* Feedback: Overlay-Boxen hinter Text und Formular */
.service .grid-2 { align-items: stretch; } /* Boxen auf gleicher Höhe */
.service .grid-2 > * {
  background: rgba(16, 16, 16, 0.62);
  padding: 40px 36px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* Logo füllt den freien Platz unter dem Text (ans Box-Ende gedrückt) */
.service .grid-2 > div { display: flex; flex-direction: column; }
.service__logo {
  width: min(65%, 300px);
  margin-top: auto;      /* schiebt sich an den unteren Boxrand */
  padding-top: 32px;
  align-self: center;
}
.service h2 { color: var(--c-yellow); }
.service p  { color: #e8e8e8; }

/* Kontaktformular */
.form-grid { display: grid; gap: 14px; }
.form-grid label {
  font-family: var(--ff-display); font-size: 11px; font-weight: 700;
  text-transform: uppercase; color: var(--c-white);
  display: block; margin-bottom: 4px;
}
.form-grid input,
.form-grid textarea {
  width: 100%;
  font-family: var(--ff-body); font-size: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 3px;
  background: rgba(255,255,255,.94);
  color: var(--c-ink);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.form-grid input:focus,
.form-grid textarea:focus {
  outline: none;
  border-color: var(--c-yellow);
  box-shadow: 0 0 0 3px rgba(255,206,3,.35);
}
.form-note { font-size: 12px; color: #cfcfcf; }
.form-feedback { font-weight: 700; color: var(--c-yellow); }
/* Honeypot unsichtbar, aber für Bots ausfüllbar */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- 11. Partner-Ticker ----------
   3 Logos sichtbar, automatischer Endlos-Durchlauf (CSS-Marquee),
   keine Navigation. Track enthält alle Logos doppelt → -50% = nahtlos. */
.section--partner { padding-block: 110px; } /* luftiger */
.partner-marquee { overflow: hidden; }
.partner-track {
  display: flex; align-items: center;
  width: max-content;
  animation: partner-scroll 36s linear infinite;
}
.partner-marquee:hover .partner-track { animation-play-state: paused; }
.partner-slot {
  flex: 0 0 auto;
  width: calc(min(100vw, 1140px) / 3); /* exakt 3 gleichzeitig sichtbar */
  display: flex; align-items: center; justify-content: center;
  padding: 0 36px;
}
.partner-slot img {
  max-width: 100%;
  max-height: 130px; /* Logos deutlich größer */
  width: auto; height: auto;
  object-fit: contain;
}
@keyframes partner-scroll {
  to { transform: translateX(-50%); }
}
/* Reduzierte Bewegung: statisches, umbrechendes Logo-Raster */
@media (prefers-reduced-motion: reduce) {
  .partner-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .partner-slot { width: 33%; margin-bottom: 24px; }
  .partner-slot[aria-hidden="true"] { display: none; }
}

/* ---------- 11b. Referenzen: Jahres-Tabs + Projektliste ---------- */
.refs { padding-block: 80px 20px; } /* Partner-Ticker darunter bringt eigenes Padding mit */
.refs__tabs {
  display: flex; gap: 12px; justify-content: center;
  margin-bottom: 40px;
}
.refs__tabs button {
  font-family: var(--ff-display);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700;
  background: none; border: 0; cursor: pointer;
  color: #b5b5b5;
  padding: 6px 18px;
  transition: color var(--ease), background var(--ease);
}
.refs__tabs button:hover { color: var(--c-ink); }
.refs__tabs button[aria-selected="true"] {
  background: var(--c-yellow); /* aktives Jahr = gelber Balken (CD) */
  color: var(--c-ink);
}
.refs__panel { animation: refs-in .45s ease; }
@keyframes refs-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.refs__head, .refs__row {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1.1fr;
  gap: 16px;
  padding: 12px 16px;
}
.refs__head {
  font-family: var(--ff-display);
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  color: var(--c-ink);
  border-bottom: 2px solid var(--c-yellow);
}
.refs__row:nth-child(even) { background: #F9F9F9; }
.refs__row span:first-child { color: var(--c-ink); font-weight: 500; }
/* Mobil: gestapelte Karten, Spaltenkopf ausblenden */
@media (max-width: 700px) {
  .refs__head { display: none; }
  .refs__row {
    grid-template-columns: 1fr;
    gap: 2px;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
}

/* ---------- 12. Unternehmen: Hintergrund-Slideshow + Textbox ----------
   Original: vollflächige Slideshow der Studio-Fotos, mittig eine
   dunkle, halbtransparente Box mit weißem Text. */
.company {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(48px, 8vw, 110px) 20px;
  min-height: 90vh;
}
.company__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.2s ease;
}
.company__slide.is-active { opacity: 1; }
.company__box {
  position: relative; z-index: 1;
  width: min(620px, 100%);
  background: rgba(14, 14, 14, 0.78);
  border-radius: 8px;
  padding: clamp(28px, 4vw, 48px);
  color: #eee;
}
.company__box h2 {
  color: var(--c-white);
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 28px;
}
.company__box p { color: #e5e5e5; }
.company__box p:last-child { margin-bottom: 0; }

/* ---------- 13. Öffnungszeiten / Karte / DQB (3 Spalten) ---------- */
.hours-section { padding-block: 80px; }
.grid-3 { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .grid-3 { grid-template-columns: 1fr 1.2fr 1fr; } }
.hours-section h2 { font-size: clamp(15px, 1.4vw, 18px); }

.hours-card {
  background: #F9F9F9;
  border-radius: 8px;
  padding: 24px 28px 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.hours-list { list-style: none; margin: 0; padding: 0; }
.hours-list li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.hours-list li:last-child { border-bottom: 0; }
.hours-list li span:last-child { color: var(--c-ink); }
.hours-list li.is-closed span:last-child { color: var(--c-text); font-style: italic; }
/* Heutiger Tag: gelber Balken + fett (per JS gesetzt) */
.hours-list li.is-today {
  background: var(--c-yellow);
  border-radius: 3px;
  font-weight: 700;
}
.hours-list li.is-today span { color: var(--c-btn-ink); }
.hours-note { font-size: 12px; margin-top: 14px; }

/* DQB als eigene Spalte: Karte im Boxdesign der Seite */
.dqb-card {
  background: #F9F9F9;
  border-radius: 8px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  text-align: center;
}
.dqb-card img { max-width: 100%; margin-inline: auto; }
.dqb-card a { display: inline-block; transition: transform var(--ease); }
.dqb-card a:hover { transform: translateY(-2px); }

/* Google-Maps-Platzhalter (Zwei-Klick-Lösung, DSGVO) */
.map-embed {
  aspect-ratio: 4 / 3;
  background: #F9F9F9;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; text-align: center;
  padding: 24px;
  overflow: hidden;
}
.map-embed > p:first-child { color: var(--c-ink); font-weight: 500; margin: 0; }
.map-consent { font-size: 11px; color: #9a9a9a; margin: 0; }
.map-embed iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; }
.map-embed.is-loaded { padding: 0; }

/* ---------- 14. Footer ---------- */
.site-footer {
  background: var(--c-dark);
  color: #bdbdbd;
  padding-block: 48px 0;
  font-size: 13px;
}
.site-footer h4 { color: var(--c-white); font-size: 13px; }
.site-footer a { color: var(--c-yellow); }
.site-footer a:hover { color: var(--c-white); }
.footer-cols { display: grid; gap: 32px; }
@media (min-width: 768px) { .footer-cols { grid-template-columns: 2fr 1fr 1fr; } }
.footer-cols address { font-style: normal; line-height: 1.8; }
.footer-cols ul { list-style: none; padding: 0; margin: 0; }
.footer-cols li { margin-bottom: 6px; }

.footer-bottom {
  margin-top: 40px;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 16px;
  text-align: center; font-size: 12px; color: #9a9a9a;
}

/* Schnellkontakt-Leiste — Original-Screenshot: dunkle Quadrate mit
   gelben Icons, rechts vertikal mittig. Mobil: Leiste unten. */
.quickbar {
  position: fixed; z-index: 90;
  display: flex; gap: 2px;
  inset-inline: 0; bottom: 0;
}
.quickbar a,
.quickbar button {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  background: #232323; color: var(--c-yellow);
  border: 0; cursor: pointer;
  padding: 13px;
  transition: background var(--ease), color var(--ease);
}
.quickbar a:hover, .quickbar a:focus-visible,
.quickbar button:hover, .quickbar button:focus-visible {
  background: var(--c-yellow); color: #232323;
}
@media (min-width: 1024px) {
  .quickbar {
    inset: auto 0 auto auto; top: 50%;
    transform: translateY(-50%);
    flex-direction: column; width: auto;
  }
  .quickbar a, .quickbar button { flex: 0 0 auto; width: 48px; height: 48px; padding: 0; }
}

/* ---------- 15. Rechtsseiten ---------- */
.legal h1 { margin-top: 40px; }
.legal h2 { font-size: 18px; margin-top: 2em; }
/* Fix: auf weißem Seitenhintergrund braucht die Textkarte Kontrast */
.legal .wrap { max-width: 860px; background: #F9F9F9; padding: 24px 32px 48px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }

/* ---------- 16. Einblend-Animation (korrekt & robust) ----------
   Ersatz für die kaputten Elementor-Entrance-Animationen:
   Ohne JS bleibt alles sichtbar (Progressive Enhancement). */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0; transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}