/* ==========================================================================
   Kontakt-CTA ("Haben wir Ihr Interesse geweckt?") - wiederverwendbares
   Partial (Partials/KontaktCta.html), aktuell auf den Projektdetailseiten
   eingebunden. Hintergrund geht über die volle Viewport-Breite (Full-Bleed),
   der Inhalt bleibt so breit wie der Content-Container darüber
   (.projekt-detail-intro, max-width 1000px).
   ========================================================================== */
.kontakt-cta {
  position: relative;
  /* Full-Bleed-Trick: margin-left:50% + translateX(-50%) funktioniert nur,
     wenn der Elterncontainer bereits 100vw breit ist - margin-Prozentwerte
     beziehen sich immer auf die Breite des CONTAINING BLOCK, nicht auf den
     Viewport. calc(50% - 50vw) rechnet die Differenz zwischen Container-
     und Viewport-Breite korrekt aus, unabhängig von der Elternbreite. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 60vh;
  display: flex;
  justify-content: center;
  align-items:center;
  background-color: var(--color-steelblue, #1f9cdb);

}

.kontakt-cta-watermark {
  position: absolute;
  inset: 0;
  background-image: url("../Images/texture-dh.svg");
  background-repeat: repeat;
  background-size: cover;
  /* Nur Opacity reduziert (war 0.12) - Größe bewusst unverändert
     gelassen, das war zu unruhig-machen zugeschriebene 220px-Kachel
     eigentlich nicht der Punkt, nur zu kräftig/deckend. */
  opacity: 0.06;
  pointer-events: none;
}

.kontakt-cta-raute {
  position: absolute;
  /* Bewusst so weit nach oben versetzt (bezieht sich auf die Höhe von
     .kontakt-cta selbst, nicht auf die eigene Größe der Raute - war kein
     Versehen, sondern die gewünschte Optik). */
  top: -25%;
  right: 0;
  width: clamp(140px, 35vmin, 500px);
  height: clamp(140px, 35vmin, 500px);
  background-image: url("../Images/dh-frame-dark.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right top;
  /* Das Asset hat seine "Masse" von Haus aus unten-rechts (siehe
     #home-slider::after) - für oben-rechts hier vertikal gespiegelt
     statt gedreht (rotate(180deg) hätte sie nach oben-LINKS verschoben). */
  transform: scaleY(-1);
  pointer-events: none;
}

.kontakt-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--gap-100, 6.25rem) var(--gap-20, 1.25rem);
}

/* Robuste Grundstellung für alle vier Blöcke: verhindert, dass irgendeine
   ererbte Regel (float/position/width/margin/max-width) sie aus dem
   normalen vertikalen Blockfluss holt. Ursache war NICHT unsere eigene
   max-width, sondern die globale Regel ".demo-hero p" (margin:16px auto 0;
   max-width:48ch) aus index.css - die hat als Klasse+Element-Selektor
   MEHR Spezifität als ein einzelner Klassenselektor und gewinnt daher
   unabhängig von der Reihenfolge. Fix: hier zwei Klassen (.kontakt-cta
   + Element-Klasse) verwenden, damit unsere Regel sicher gewinnt. */
.kontakt-cta .kontakt-cta-tagline,
.kontakt-cta .kontakt-cta-heading,
.kontakt-cta .kontakt-cta-text,
.kontakt-cta .pill-btn {
  display: block;
  position: static;
  float: none;
  clear: both;
  width: auto;
  max-width: none;
  margin: 0 0 1.25rem;
}

/* Scoped (.kontakt-cta .kontakt-cta-tagline statt nur .kontakt-cta-tagline):
   ".demo-hero p" setzt ebenfalls "color" - ohne den zweiten Klassen-
   Selektor hier würde die Farbe je nach Ladereihenfolge kippen. */
.kontakt-cta .kontakt-cta-tagline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-figtree, sans-serif);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-100, #0e1729);
}

.kontakt-cta-tagline-line {
  display: inline-block;
  width: 2.5rem;
  height: 2px;
  background-color: var(--color-gray-100, #0e1729);
}

.kontakt-cta .kontakt-cta-heading {
  font-family: var(--font-din-2014, sans-serif);
  color: var(--color-white, #fff);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.875rem, 3.4vw, 3rem);
  line-height: 1.15;
  max-width: 500px;
}

.kontakt-cta .kontakt-cta-text {
  color: var(--color-gray-100, #0e1729);
  font-size: 1.15rem;
  line-height: 1.7;
  max-width: 75%;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.kontakt-cta .pill-btn {
  display: inline-flex;
  margin-bottom: 0;
}

@media (max-width: 991px) {
    top: -15%;
}