/* =======================================================================
   spicy concepts – style.css
   Statischer Nachbau des Divi-Designs (Phase 2, WordPress-zu-HTML-Migration)
   Reihenfolge gemaess references/code-struktur.md:
   1) CSS-Variablen  2) Reset/Basis  3) Mobile-First je Sektion + zugehoerige
      min-width Media-Queries direkt im Anschluss.
   Breakpoints (Divi-4-Standard-Fallback, da in css-referenz/ keine
   abweichenden @media-Regeln jenseits von max-width:1260px gefunden wurden):
   Phone bis 767px · Tablet 768-980px · Desktop ab 981px
   ======================================================================= */

/* --- 1. CSS-Variablen (aus Design-Tokens.md, Divi Global Colors) --- */
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-green: #00994d;
  --color-accent: #990000;       /* Bordeaux-Rot: link_color, CTA-Buttons */
  --color-blue-gray: #4c5c7c;
  --color-bg-light: #f4f4f4;
  --color-text: #434343;
  --color-dove-blue: #6e95b3;

  /* abgeleitete Kontrast-Variante (WCAG AA), Basisfarbe bleibt unveraendert */
  --color-text-on-accent: #ffffff;
  --color-accent-dark: #700000;  /* fuer Hover-Zustaende, abgeleitet aus --color-accent */

  --font-heading: "Poppins", Arial, Helvetica, sans-serif;
  --font-body: "Open Sans", Arial, Helvetica, sans-serif;

  --max-width: 1200px;
  --space-s: 0.75rem;
  --space-m: 1.5rem;
  --space-l: 3rem;
  --space-xl: 5rem;
}

/* --- 2. Reset / Basis --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
  overflow-wrap: break-word;
  hyphens: auto;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 300;
  line-height: 1.25;
  margin: 0 0 var(--space-m);
  color: var(--color-black);
}
h3 { font-weight: 600; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; }
button { font-family: var(--font-body); }
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-m);
  padding-right: var(--space-m);
}

/* sichtbarer Fokus-Indikator (WCAG 2.1 AA, kein outline:none ohne Ersatz) */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--color-dove-blue);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-white);
  color: var(--color-black);
  padding: 0.75em 1.25em;
  z-index: 1000;
}
.skip-link:focus {
  left: var(--space-m);
  top: var(--space-m);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* --- 3. Lokal gehostete Schriften (OMGF-Ersatz, font-display: swap) --- */
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-normal-latin-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-normal-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-normal-latin-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-normal-latin-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../assets/fonts/open-sans-normal-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../assets/fonts/open-sans-italic-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
}

/* --- Top-Bar (Telefonnummer, bordeauxrot, auf jeder Seite identisch) --- */
.topbar {
  background: var(--color-accent);
  color: var(--color-white);
  text-align: right;
  padding: 0.4em var(--space-m);
  font-size: 0.85rem;
}
.topbar a { color: var(--color-white); text-decoration: none; }
.topbar a:hover, .topbar a:focus { text-decoration: underline; }

/* --- Header: Logo + Hauptnavigation --- */
.site-header { position: relative; z-index: 100; background: var(--color-white); border-bottom: 1px solid #e5e5e5; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-s) var(--space-m);
}
.logo img { width: 220px; }
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: var(--color-white);
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after {
  content: "";
  display: block;
  width: 22px; height: 2px;
  background: #585654;
  position: relative;
}
.nav-toggle::before { position: absolute; transform: translateY(-7px); }
.nav-toggle::after { position: absolute; transform: translateY(7px); }

.main-nav {
  background: var(--color-white);
  display: none;
  border-top: 1px solid #eee;
}
.main-nav.is-open { display: block; }
.main-nav ul {
  list-style: none;
  margin: 0; padding: 0;
  max-width: var(--max-width);
  margin: 0 auto;
}
.main-nav > ul > li { border-top: 1px solid #eee; }
.main-nav a {
  display: block;
  color: #585654;
  padding: 0.85em var(--space-m);
  font-family: var(--font-heading);
  font-size: 0.95rem;
}
.main-nav a:hover, .main-nav a:focus, .main-nav a[aria-current="page"] {
  background: var(--color-accent);
  color: var(--color-white);
  text-decoration: none;
}
.main-nav .sub-menu { list-style: none; margin: 0; padding: 0; background: rgba(0,0,0,0.04); }
.main-nav .sub-menu a { padding: 0.85em 10px; font-size: 0.9rem; }
.main-nav .has-submenu > button.submenu-toggle {
  background: none; border: 0; color: #585654;
  width: 100%; text-align: left; padding: 0.85em var(--space-m);
  font-family: var(--font-heading); font-size: 0.95rem;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer;
}
.main-nav .sub-menu { display: none; }
.main-nav .has-submenu.is-open .sub-menu { display: block; }
.search-icon-btn {
  background: none; border: 0; color: #585654;
  width: 44px; height: 44px; cursor: pointer;
}

/* Mobil: Aufklapp-Pfeil links neben dem Text statt in eigener Zeile darueber.
   Nur bis 980px aktiv - ab 981px uebernimmt die Hover-Dropdown-Variante
   weiter unten (Button wird dort ohnehin ausgeblendet). */
@media (max-width: 980px) {
  .main-nav .has-submenu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .main-nav .has-submenu > a { flex: 1 1 auto; order: 2; min-width: 0; }
  .main-nav .has-submenu > button.submenu-toggle {
    order: 1;
    width: auto;
    justify-content: center;
    padding: 0.85em var(--space-s) 0.85em var(--space-m);
  }
  .main-nav .has-submenu > ul.sub-menu { order: 3; flex-basis: 100%; width: 100%; }
}

@media (min-width: 981px) {
  .nav-toggle { display: none; }
  .main-nav { display: block; }
  .main-nav ul { display: flex; align-items: center; }
  .main-nav > ul { display: flex; }
  .main-nav > ul > li { border-top: 0; position: relative; }
  .main-nav a { padding: 1em var(--space-s); }
  .main-nav .has-submenu > button.submenu-toggle { display: none; }
  .main-nav .sub-menu {
    display: block;
    position: absolute;
    left: 0; top: 100%;
    min-width: 220px;
    background: var(--color-blue-gray);
    box-shadow: 0 6px 14px rgba(0,0,0,0.2);
    visibility: hidden; opacity: 0;
    transition: opacity .15s ease;
  }
  .main-nav .has-submenu:hover .sub-menu,
  .main-nav .has-submenu:focus-within .sub-menu {
    visibility: visible; opacity: 1;
  }
  .main-nav .sub-menu a { padding-left: 10px; padding-right: 10px; }
}

/* --- Breadcrumb --- */
.breadcrumb {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-s) var(--space-m);
  font-size: 0.85rem;
  color: var(--color-text);
}
.breadcrumb a { color: var(--color-text); }
.breadcrumb .sep { color: var(--color-accent); font-weight: 700; margin: 0 0.4em; }

/* --- Hero (Startseite): Logo/Menue ueber gebogenem Bildausschnitt (hintergrund1.jpg) ---
   Mobile/Tablet (Basis, ungated): schlichter, gestapelter Aufbau ohne Bild.
   .hero-copy buendelt Text + Karten in EINEM Flow-Container, damit die Karten
   auf Desktop immer NACH dem Text folgen (kein fester top-Wert -> kein
   Ueberlappen mehr, egal wie viele Zeilen die Ueberschrift umbricht). --- */
.hero-wrap { position: relative; }
.hero-curve {
  background: var(--color-white);
  padding: var(--space-l) var(--space-m);
  /* dezenter Schatten, grenzt den Hero optisch von der naechsten Sektion ab */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 1;
}
.hero-copy { max-width: 640px; }
.hero-curve-inner { max-width: none; }

/* Hero-Bild auf Tablet/Smartphone: auf Desktop laeuft das Foto bereits als
   gebogener Hintergrund von .hero-curve, auf schmalen Screens faellt diese
   Kurve weg. Statt des Desktop-Fotos nutzen wir hier ein eigens im Format
   4:1 zugeschnittenes Banner-Bild (hero-mobil.webp), randlos (bricht per
   Minus-Rand links/rechts aus dem Innenabstand von .hero-curve aus) und in
   klarer Trennung UNTER Logo/Menue (kein Ueberlappen): kein negativer
   oberer Rand mehr, das Bild folgt einfach normal auf den Header. */
.hero-curve-image {
  display: block;
  width: calc(100% + 2 * var(--space-m));
  max-width: none;
  margin: 0 calc(var(--space-m) * -1) var(--space-m);
  aspect-ratio: 4 / 1;
  object-fit: cover;
  object-position: center center;
}
.hero-eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-size: 0.85rem;
  margin: 0 0 0.75em;
}
.hero-curve h1 { font-size: 2rem; margin-bottom: 0.5em; }
.hero-curve h1 .accent { color: var(--color-accent); }
.hero-sub { font-size: 1.05rem; color: var(--color-text); margin-bottom: 1.5em; }

.hero-quote {
  margin: 0 0 1.5em;
  padding: 0.2em 0 0.2em 1.1em;
  border-left: 3px solid var(--color-accent);
}
.hero-quote::before { content: none; }
.hero-quote p {
  margin: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--color-black);
  line-height: 1.4;
}
.hero-quote p::before { content: "\201E"; }
.hero-quote p::after { content: "\201C"; }
.hero-quote footer {
  margin-top: 0.35em;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.85rem;
  color: var(--color-text);
}


.hero-cards {
  list-style: none;
  margin: var(--space-l) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}
.hero-card {
  background: var(--color-white);
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(60, 60, 60, 0.12);
  padding: 1.1rem 1.2rem;
}
.hero-card-icon { display: block; width: 30px; height: 30px; margin-bottom: 0.6em; color: var(--color-accent); }
.hero-card-icon svg { width: 100%; height: 100%; }
.hero-card h3 { font-size: 1rem; margin: 0 0 0.3em; }
.hero-card p { font-size: 0.88rem; margin: 0; }

@media (min-width: 600px) and (max-width: 980px) {
  .hero-cards { grid-template-columns: repeat(3, 1fr); }
}

/* --- Hero Desktop: Logo/Menue liegen ueber dem gebogenen Bildausschnitt ---
   WICHTIG: dieser Block steht bewusst NACH den Basis-Regeln oben, damit die
   fluessigen clamp()-Werte hier bei gleicher Selektor-Spezifitaet in der
   Kaskade gewinnen (spaeter im Quelltext = hoehere Prioritaet). Vorher stand
   dieser Block vor den Basis-Regeln, wodurch die festen mobilen Groessen
   (z. B. h1: 2rem) die Desktop-Werte ueberschrieben haben. --- */
@media (min-width: 981px) {
  /* kein position:absolute mehr: der Header steht jetzt im normalen Fluss
     ganz oben IM .hero-curve-Element (siehe HTML) und schiebt den Inhalt
     darunter automatisch weg - er liegt trotzdem optisch "auf" dem Bild,
     weil background-image nicht am Textfluss teilnimmt. */
  .hero-site-header {
    background: transparent;
    border-bottom: 0;
  }
  .hero-site-header .header-inner { padding: 2.2% 4% 0; max-width: none; }
  .hero-site-header .logo img { width: clamp(160px, 22vw, 440px); height: auto; }

  .hero-site-header .main-nav {
    background: rgba(239, 239, 239, 0.5);
    margin-top: 1.2%;
    padding: 15px 4%;
    max-width: none;
  }
  .hero-site-header .main-nav ul { justify-content: flex-start; gap: clamp(0.9rem, 2vw, 2rem); max-width: none; flex-wrap: wrap; }
  .hero-site-header .main-nav a { color: #585654; padding: 0.3em 0; font-size: clamp(0.82rem, 1vw, 0.95rem); }
  .hero-site-header .main-nav a:hover,
  .hero-site-header .main-nav a:focus,
  .hero-site-header .main-nav a[aria-current="page"] {
    background: none;
    color: var(--color-accent);
  }
  .hero-site-header .sub-menu { background: var(--color-white); box-shadow: 0 6px 14px rgba(0,0,0,0.15); }
  .hero-site-header .sub-menu a { color: #585654; }
  .hero-site-header .sub-menu a:hover,
  .hero-site-header .sub-menu a:focus { background: none; color: var(--color-accent); }
  .hero-site-header .has-submenu > button.submenu-toggle { color: #585654; }

  /* Hintergrundbild wird pro Seite per inline style="background-image:..."
     gesetzt (siehe HTML) - so nutzt jede Unterseite ihr eigenes vorhandenes
     Bild, ohne dass diese CSS-Datei je Seite angepasst werden muesste. */
  .hero-curve {
    position: relative;
    background-color: var(--color-white);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* Hoehe richtet sich nach dem Inhalt (Header + Text + Karten), nicht
       mehr nach einem festen Seitenverhaeltnis - endet dadurch exakt in
       "padding-bottom" Abstand unterhalb der Karten statt mit viel Leerraum
       bis zur naechsten Sektion. */
    padding: 0 0 50px 0;
    display: flex;
    flex-direction: column;
  }
  /* Unterseiten: vorhandene (noch nicht gebogene) Fotos sind rechteckig -
     ein halbtransparentes weisses Panel hinter Breadcrumb/H1 sorgt fuer
     Lesbarkeit, bis die Bilder gegen fertig zugeschnittene Kurven-Varianten
     ausgetauscht sind. Startseite (.hero-copy ohne diese Klasse) bleibt
     unveraendert, da hintergrund1.jpg die weisse Flaeche schon mitbringt. */
  .hero-copy.hero-copy--panel {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 1.4rem 1.6rem;
  }

  /* Header + Inhalt stehen jetzt beide im normalen Textfluss (siehe HTML:
     Header ist jetzt IM .hero-curve verschachtelt statt separat davor).
     Dadurch schiebt die tatsaechliche Header-Hoehe den Inhalt automatisch
     nach unten - kein Ueberlappen mehr moeglich, unabhaengig davon, wie hoch
     Logo/Menue bei welcher Fensterbreite ausfallen. */
  .hero-copy {
    width: 42%;
    max-width: 560px;
    margin-left: 4%;
    margin-top: clamp(1.5rem, 4vw, 3.5rem);
  }

  .hero-curve-image { display: none; }

  /* Fluessige Groessen: skalieren mit der Viewport-Breite statt in einem
     Sprung zwischen zwei festen Werten zu wechseln. */
  .hero-eyebrow { font-size: clamp(0.7rem, 0.9vw, 0.85rem); }
  .hero-curve h1 {
    font-size: clamp(1.35rem, 2.4vw, 2.3rem);
    font-weight: 300;
    line-height: 1.2;
  }
  .hero-sub { font-size: clamp(0.85rem, 1.15vw, 1.05rem); }
  .hero-curve .hero-btn {
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    padding: clamp(0.6rem, 1vw, 0.85em) clamp(1.1rem, 1.8vw, 1.75em);
  }

  .hero-cards {
    margin-top: clamp(1.2rem, 3vw, 2.75rem);
    display: flex;
    gap: clamp(0.6rem, 1.4%, 1.2rem);
  }
  .hero-card {
    flex: 1;
    min-width: 0;
    padding: clamp(0.7rem, 1.2vw, 1.1rem) clamp(0.7rem, 1vw, 1rem);
  }
  .hero-card-icon { width: clamp(20px, 2vw, 28px); height: clamp(20px, 2vw, 28px); }
  .hero-card h3 { font-size: clamp(0.75rem, 0.95vw, 0.88rem); }
  .hero-card p { font-size: clamp(0.66rem, 0.85vw, 0.76rem); }
}

.btn {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-heading);
  padding: 0.85em 1.75em;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  min-height: 44px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover, .btn:focus {
  background: var(--color-accent-dark);
  text-decoration: none;
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
}

/* Zweite Button-Variante (z.B. "Jetzt schreiben!" neben "Jetzt anrufen!"):
   umrandet statt gefuellt, damit zwei Buttons nebeneinander nicht beide um
   Aufmerksamkeit konkurrieren. Einfach zusaetzlich zu ".btn" auf denselben
   Link setzen: class="btn btn-outline". */
.btn-outline {
  background: transparent;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
  box-shadow: none;
}
.btn-outline:hover, .btn-outline:focus {
  background: var(--color-accent);
  color: var(--color-white);
}

/* Container fuer mehrere Hero-Buttons nebeneinander (z.B. "Jetzt anrufen!" +
   "Jetzt schreiben!"). Faellt auf schmalen Bildschirmen automatisch um. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
}

/* --- Hero (Bild, Unterseiten) --- */
.hero-image { position: relative; z-index: 1; }
.hero-image img { width: 100%; object-fit: cover; max-height: 420px; }
.hero-image .hero-caption {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
  padding: var(--space-m);
}
.hero-image .hero-caption h1 { color: var(--color-white); margin: 0; font-size: 1.6rem; }

/* --- generische Section --- */
.section { padding: var(--space-l) var(--space-m); }
.section.bg-light { background: var(--color-bg-light); }
.section-inner { max-width: var(--max-width); margin: 0 auto; }
.section h2 { font-size: 1.6rem; }
.section h2 .accent { color: var(--color-accent); }
.lead { font-size: 1.1rem; }

/* --- Zitat-Sektion mit dunklem, diagonal gestreiftem Hintergrund --- */
.section-dark-quote {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  background-color: #1c1c1c;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 9px);
  color: var(--color-white);
}
.feature-quote { position: relative; max-width: 780px; margin: 0 auto; padding-left: 0; }
.feature-quote::before { content: none; }
.feature-quote p {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(1.2rem, 2.3vw, 1.75rem);
  line-height: 1.5;
  margin: 0 0 0.85em;
}
.feature-quote p::before { content: "\201E"; color: var(--color-white); }
.feature-quote p::after { content: "\201C"; color: var(--color-white); }
.feature-quote strong { font-weight: 700; }
.feature-quote footer {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #bbb;
}

/* --- Karten-Grid (Leistungen-Kacheln, generisch) --- */
.tile-grid { display: grid; gap: var(--space-m); grid-template-columns: 1fr; list-style: none; padding-left: 0; margin: 0; }
.tile {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid #e5e5e5;
  padding: var(--space-m);
}
.tile p:last-child { margin-top: auto; padding-top: 0.5em; }
.tile h3 { font-size: 1.15rem; }
@media (min-width: 768px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 981px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- Leistungs-Karussell (Startseite) --- */
.carousel { position: relative; }
.carousel-track {
  display: flex;
  gap: var(--space-m);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-s);
  -webkit-overflow-scrolling: touch;
}
.carousel-track:focus-within,
.carousel[data-paused="true"] .carousel-track { animation-play-state: paused; }
.carousel-card {
  scroll-snap-align: start;
  flex: 0 0 85%;
  background: var(--color-bg-light);
  padding: var(--space-m);
}
@media (min-width: 768px) { .carousel-card { flex-basis: 45%; } }
@media (min-width: 981px) { .carousel-card { flex-basis: 30%; } }
.carousel-dots { display: flex; justify-content: center; gap: 0.5em; margin-top: var(--space-s); list-style: none; padding: 0; }
.carousel-dots button {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid var(--color-accent); background: var(--color-white);
  cursor: pointer; padding: 0;
}
.carousel-dots button[aria-current="true"] { background: var(--color-accent); }
.carousel-pause {
  position: absolute; top: -2.2em; right: 0;
  background: none; border: 1px solid var(--color-blue-gray);
  border-radius: 4px; padding: 0.3em 0.6em; cursor: pointer;
  min-height: 44px; min-width: 44px;
}

/* --- Projekt-Teaser-Karten --- */
.project-cards {
  display: grid; gap: var(--space-m); grid-template-columns: 1fr;
}
@media (min-width: 768px) { .project-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 981px) { .project-cards { grid-template-columns: repeat(3, 1fr); } }
.project-card {
  display: flex; gap: 0.75em; align-items: center;
  border: 1px solid #e5e5e5; padding: var(--space-s);
}
.project-card img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.project-card h3 { font-size: 1rem; margin: 0 0 0.2em; }
.project-card .meta { font-size: 0.85rem; color: var(--color-text); }

/* --- CTA-Block "Ins Gespräch kommen" mit Tabs --- */
.cta-block { display: grid; gap: var(--space-l); grid-template-columns: 1fr; }
@media (min-width: 981px) { .cta-block { grid-template-columns: 1fr 1fr; } }
.tabs [role="tablist"] { display: flex; gap: 0.5em; margin-bottom: var(--space-m); }
.tabs [role="tab"] {
  flex: 1;
  background: var(--color-bg-light);
  border: 1px solid #ddd;
  padding: 0.85em 1em;
  font-family: var(--font-heading);
  cursor: pointer;
  min-height: 44px;
}
.tabs [role="tab"][aria-selected="true"] { background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); }
.tabs [role="tabpanel"] { display: none; }
.tabs [role="tabpanel"].is-active { display: block; }

/* --- Formulare (rein optisch, siehe HTML-Kommentar zu Backend/Formspree) --- */
.form-field { margin-bottom: var(--space-m); }
.form-field label { display: block; font-weight: 600; margin-bottom: 0.3em; font-size: 0.95rem; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 0.75em;
  border: 1px solid #ccc;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 1rem;
}
.form-field.checkbox { display: flex; gap: 0.6em; align-items: flex-start; }
.form-field.checkbox input { width: auto; }
fieldset { border: 1px solid #ddd; padding: var(--space-s); margin: 0 0 var(--space-m); }
legend { font-weight: 600; padding: 0 0.4em; }

/* --- Terminkalender / Vimeo Embeds: Zwei-Klick-Loesung (DSGVO) --- */
.embed-placeholder {
  border: 1px dashed var(--color-blue-gray);
  background: var(--color-bg-light);
  padding: var(--space-l) var(--space-m);
  text-align: center;
}
.embed-placeholder p { margin-bottom: var(--space-s); }
.embed-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.embed-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-wrapper.calendar { aspect-ratio: 4 / 5; }
@media (min-width: 768px) { .embed-wrapper.calendar { aspect-ratio: 16 / 10; } }

/* --- FAQ-Akkordeon --- */
.faq-item { border-bottom: 1px solid #e5e5e5; }
.faq-item summary {
  font-family: var(--font-heading);
  font-weight: 600;
  padding: 0.9em 0.2em;
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--color-accent); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item .faq-answer { padding: 0 0.2em 1em; }

/* --- Preistabellen (Digital Signage) --- */
.pricing-grid { display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
@media (min-width: 981px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
.price-card { border: 1px solid #e5e5e5; padding: var(--space-m); text-align: center; }
.price-card .price { font-family: var(--font-heading); font-size: 1.6rem; color: var(--color-accent); margin: 0.4em 0; }
.price-card ul { list-style: none; padding: 0; text-align: left; }
.price-card li { padding: 0.3em 0; border-bottom: 1px solid #eee; }

/* --- Zitat-Block --- */
blockquote {
  border-left: 0;
  position: relative;
  padding-left: 2.5rem;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  margin: var(--space-m) 0;
}
blockquote::before {
  content: "\201C";
  position: absolute; left: 0; top: -0.4rem;
  font-size: 3.2rem; line-height: 1;
  color: var(--color-accent); opacity: .65;
  font-family: Georgia, "Times New Roman", serif;
}
blockquote cite { display: block; margin-top: 0.5em; font-style: normal; font-size: 0.9rem; color: var(--color-text); }

/* --- Google-Bewertungs-Badge --- */
.review-badge { display: flex; align-items: center; gap: 0.6em; justify-content: center; padding: var(--space-m); }
.review-badge img { width: 28px; height: 28px; }

/* --- Newsletter-Block (Blog) --- */
.newsletter-block { background: var(--color-bg-light); padding: var(--space-l) var(--space-m); }

/* --- Trust-Band (Google-Bewertung, Kundenzahl, Hosting) ueber dem Footer --- */
.trust-band { background: #141414; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 0.9em var(--space-m); }
.trust-band__inner {
  max-width: var(--max-width); margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0.6em 1.9em;
}
.trust-band__item {
  display: flex; align-items: center; gap: 0.55em; margin: 0;
  font-size: 0.88rem; color: #d9d9d9; white-space: nowrap;
}
.trust-band__item strong { color: var(--color-white); }
.trust-band__item svg { width: 18px; height: 18px; flex: none; }
.trust-band__item--stars svg { color: #f2b301; }
.trust-band__item--customers svg { color: var(--color-dove-blue); }
.trust-band__item--hosting svg { color: var(--color-green); }

/* --- Footer --- */
.site-footer { background: #1c1c1c; color: var(--color-white); padding: var(--space-l) var(--space-m) var(--space-m); }
.footer-inner { max-width: var(--max-width); margin: 0 auto; text-align: center; }
.back-to-top {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 15px;
  background: var(--color-white); color: #1c1c1c;
  border: 2px solid #3a3a3a;
  margin-bottom: var(--space-m);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top:hover, .back-to-top:focus-visible {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white);
  transform: translateY(-3px);
}
.footer-tagline {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem;
  color: #bbb; margin: -0.6em 0 var(--space-m);
}
.footer-logo img { width: 200px; margin: 0 auto var(--space-m); }
.footer-inner address { font-style: normal; margin-bottom: var(--space-m); }
.footer-legal a { color: var(--color-white); }
.footer-phone { color: var(--color-white); text-decoration: underline; }
.footer-social { display: flex; gap: 1em; justify-content: center; margin: var(--space-m) 0; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--color-white); border-radius: 50%;
  color: var(--color-white);
}
.footer-social a svg { width: 20px; height: 20px; }
.footer-gender { font-size: 0.8rem; color: #bbb; margin-top: var(--space-m); }

/* --- Login-Formular (Serviceportal) --- */
.login-form { max-width: 420px; margin: 0 auto; }

/* --- Utility --- */
.text-center { text-align: center; }
.mt-l { margin-top: var(--space-l); }

/* --- generisches Bild + Text nebeneinander (Desktop) --- */
.media-text { display: grid; gap: var(--space-m); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 981px) { .media-text { grid-template-columns: 1fr 1fr; } }

/* --- Gallery (3D-Design, Eventplanung) --- */
.gallery { display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
@media (min-width: 768px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 981px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery figcaption { font-size: 0.85rem; margin-top: 0.4em; }

/* --- Prozess-Schritte (Webdesign Agentur) --- */
.process-steps { display: grid; gap: var(--space-m); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 768px) { .process-steps { grid-template-columns: repeat(3, 1fr); } }
.process-steps li { list-style: none; border: 1px solid #e5e5e5; padding: var(--space-m); }
.process-steps h3::before { counter-increment: step; content: counter(step) ". "; color: var(--color-accent); }

/* =======================================================================
   KONTAKTFORMULAR (portable Komponente)
   =======================================================================
   Gehoert zusammen mit: dem <form class="contact-form" id="kontaktformular">
   Block in index.html und js/kontaktformular.js.

   WIEDERVERWENDUNG AUF EINER ANDEREN SEITE:
   Diesen kompletten Block unveraendert mit kopieren (inkl. ".form-row" und
   ".form-required" fuer das Zweispalten-Layout bzw. die Pflichtfeld-Sterne).
   Er nutzt bewusst nur Klassen/Variablen, die entweder hier definiert sind
   oder bereits weiter oben in dieser Datei existieren (--color-*, .btn,
   .form-field, .visually-hidden). Wird die Komponente auf eine Seite OHNE
   diese Basis-Klassen kopiert, muessen .btn und .form-field (siehe Abschnitt
   weiter oben "Formulare") mit kopiert werden.

   DER SENDE-BUTTON nutzt bewusst die bereits vorhandene, sitebreite
   Klasse ".btn" (siehe Definition weiter oben in dieser Datei) - NICHT
   noch eine eigene Button-Klasse. Soll der Formular-Button anders
   aussehen als andere Buttons der Seite, hier eine zusaetzliche Klasse
   ".contact-form .btn { ... }" ergaenzen statt ".btn" selbst zu aendern.
   ========================================================================= */

/* Begrenzt die Formularbreite auf ein angenehmes Lesemass (etwas breiter als
   .login-form, damit die Zweispalten-Zeile Vorname/Nachname genug Platz hat). */
.contact-form-wrap { max-width: 720px; }

/* Hintergrundfarbe der kompletten "Ins Gespraech kommen"-Sektion. Bewusst
   ueber die zusaetzliche Klasse ".formular-section" (statt ueber die ID
   "#formular"), da dieselbe ID auf ~19 anderen Seiten fuer die dortige
   (noch unveraenderte) Formular-Sektion verwendet wird - so bleiben die
   unberuehrt, bis sie bei Bedarf ebenfalls umgestellt werden. */
.formular-section { background: #f2f2f2; }

/* Eigene, bewusst WEISSE Sektion fuer den FAQ-Bereich (Startseite), damit
   er sich klar von der grauen Formular-Sektion darueber und ggf. weiteren
   grauen Sektionen abhebt. Aus denselben Gruenden wie bei ".formular-section"
   ueber eine eigene Klasse statt ueber ".bg-light" geloest. */
.faq-section { background: #ffffff; }

/* Etwas mehr Luft zwischen dem Icon und der Ueberschrift/dem Text darunter. */
.section-icon { margin-bottom: var(--space-m); }

/* Pflichtfeld-Stern in eigener, etwas wärmerer Farbe (statt reinem Text-Rot),
   damit er sich von echten Fehlermeldungen (.form-error) unterscheidet. */
.form-required { color: #d9724f; margin-left: 0.2em; }

/* --- Feineres Erscheinungsbild NUR für das neue Kontaktformular ------------
   Bewusst unter ".contact-form" verschachtelt statt die globalen
   .form-field-Regeln weiter oben zu aendern: so bleiben die (noch nicht
   ueberarbeiteten) Formulare auf den anderen Seiten unveraendert, und beim
   Kopieren dieser Komponente auf eine andere Seite reicht es, diesen
   Abschnitt + ".contact-form-wrap" + ".form-row" mitzunehmen. */
.contact-form .form-field label {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.45em;
}
.contact-form .form-field input,
.contact-form .form-field select,
.contact-form .form-field textarea {
  padding: 0.85em 1em;
  border-radius: 8px;
  border-color: #ddd;
  font-size: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-form .form-field input:focus,
.contact-form .form-field select:focus,
.contact-form .form-field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(153, 0, 0, 0.12);
}
.contact-form .form-field input::placeholder,
.contact-form .form-field textarea::placeholder {
  color: #9a9a9a;
}

/* Zweispaltige Zeile, aktuell fuer Vorname/Nachname genutzt (siehe HTML:
   <div class="form-row"> um die beiden form-field-Bloecke). Auf schmalen
   Bildschirmen fallen die Felder automatisch untereinander. */
.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
  margin-bottom: var(--space-m);
}
.contact-form .form-row .form-field { margin-bottom: 0; }
@media (max-width: 560px) {
  .contact-form .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form .form-row .form-field:first-child { margin-bottom: var(--space-m); }
}

/* Etwas groessere, farblich passende Checkbox (DSGVO-Zustimmung). */
.contact-form .form-field.checkbox input[type="checkbox"] {
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.2em;
  accent-color: var(--color-accent);
}

/* Fehlermeldung je Feld (Client-Validierung in kontaktformular.js). */
.form-error {
  margin: 0.3em 0 0;
  font-size: 0.85rem;
  color: #b3261e;
  min-height: 1.1em;
}
.form-error:empty { display: none; }
.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"] { border-color: #b3261e; }

/* Cloudflare Turnstile Widget: etwas Abstand nach oben/unten, damit es
   sich nicht an die Nachbarfelder klemmt. */
.cf-turnstile { margin: 0.25em 0; }

/* Status-Meldung nach dem Absenden ("Wird gesendet ...", Erfolg, Fehler). */
.form-status {
  margin: 0 0 var(--space-s);
  font-size: 0.95rem;
  min-height: 1.2em;
}
.form-status[data-state="success"] { color: var(--color-green); }
.form-status[data-state="error"] { color: #b3261e; }

/* Waehrend des Sendens: Button sichtbar deaktiviert statt nur unklickbar. */
.contact-form .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
/* ===================== ENDE KONTAKTFORMULAR ============================ */