/* width: auto, weil das Logo width/height-Attribute traegt (Platz vor dem
   Laden reservieren, StrapiLogo.astro): ohne auto gaelte die Attributbreite. */
.navbar-brand img {
  height: 80px;
  width: auto;
}

/* Hero der Startseite: Abstand oben ab Tablet. Vorher pt-md-21 (12.5rem),
   auf Nutzerwunsch verringert (2026-09-30). 8.5rem liegt zwischen den
   Template-Stufen pt-md-18 (8rem) und pt-md-19 (9rem), daher eigene Klasse.
   Mobil gilt pt-17 (7rem, vorher pt-19 mit 9rem). */
@media (min-width: 768px) {
  .hero-pt-md {
    padding-top: 8.5rem !important;
  }
}

/* colors/sky.css setzt --bs-primary auf das helle Pastellblau --bs-sky
   (#5eb9f0). Weißer Text auf .btn-primary liegt damit nur bei ~2.2:1
   Kontrast (WCAG AA verlangt 4.5:1 fuer Text), genauso betroffen sind
   .btn-soft-primary/.btn-outline-primary sowie normale Links (Bootstrap
   leitet --bs-link-color-rgb ebenfalls von --bs-sky-rgb ab). Fix: --bs-primary
   auf einen dunkleren Blauton im selben Farbton ueberschreiben (~5.5:1 auf
   Weiss, ~4.9:1 fuer Text auf --bs-pale-primary) -- das helle --bs-sky bleibt
   fuer Deko-Elemente (Shapes, Icons, Hintergrund-Tints) unveraendert erhalten. */
:root {
  --bs-primary: #106fa2;
  --bs-primary-rgb: 16, 111, 162;
  --bs-link-color-rgb: 16, 111, 162;
  --bs-link-hover-color-rgb: 16, 111, 162;
}

/* Template erzwingt in der fixierten/sticky Navbar Primary-Farbe für alle
   Buttons (style.css: ".navbar.navbar-light.fixed .btn:not(.btn-expand):not(.btn-gradient)").
   Das überschreibt individuell gewählte CTA-Farben (z.B. WhatsApp-Grün).
   Fix: in der fixierten Navbar die jeweils eigene Button-Farbe respektieren
   statt hart auf Primary zu erzwingen. */
.navbar.navbar-light.fixed .btn:not(.btn-expand):not(.btn-gradient) {
  background: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}

/* style.css haelt fuer .text-line.text-primary:before (kleiner Akzentstrich
   vor Eyebrow-Labels wie "Webentwicklung Stuttgart · Esslingen") einen hart
   kodierten alten Blauton (#3f78e0) fest, statt var(--bs-primary) zu nutzen
   (bei allen anderen Farben, z.B. .text-line.text-sky, ist das korrekt so,
   weil die fixe Namensfarben sind -- nur bei "primary" muesste es dynamisch
   sein). Dadurch wich der Strich vom Textfarbton ab. */
.text-line.text-primary:before {
  background-color: var(--bs-primary);
}

/* Offizielles WhatsApp-Grün (#25D366) — eigene Klasse, da .btn-green im
   Template ein anderes Türkis-Grün (#45c4a0) ist. Gleiche Struktur wie die
   Bootstrap-generierten .btn-* Klassen, damit Hover/Active/Focus konsistent
   funktionieren. */
/* WhatsApp-Icon im CTA-Button größer darstellen, OHNE die Button-Größe zu
   verändern: transform:scale() skaliert nur die Darstellung, die Button-Höhe
   berechnet sich weiterhin aus der unveränderten font-size/line-height.
   margin-right braucht !important, weil das Icon die Bootstrap-Utility-Klasse
   .me-1 trägt (margin-right: 0.25rem !important) und die sonst immer gewinnt. */
.btn i.uil-whatsapp {
  display: inline-block;
  transform: scale(1.6);
  margin-left: 0.15em;
  margin-right: 0.8em !important;
}

/* style.css setzt fuer .navbar-expand-lg .navbar-brand unterhalb von lg
   (< 992px) zusaetzlich padding-top/bottom: 1.2rem. Der umschliessende
   .container traegt dieselbe vertikale Distanz bereits selbst, wodurch die
   mobile Navbar unnoetig hoch wirkte -- auf Mobile entfernt, oberhalb von lg
   greift diese Regel ohnehin nicht (Desktop bleibt unveraendert). */
@media (max-width: 991.98px) {
  .navbar-expand-lg .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.btn-whatsapp {
  --bs-btn-color: #fff;
  --bs-btn-bg: #25d366;
  --bs-btn-border-color: #25d366;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #25d366;
  --bs-btn-hover-border-color: #25d366;
  --bs-btn-focus-shadow-rgb: 37, 211, 102;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #25d366;
  --bs-btn-active-border-color: #25d366;
  --bs-btn-active-shadow: 0rem 0.25rem 0.75rem rgba(30, 34, 40, 0.15);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #25d366;
  --bs-btn-disabled-border-color: #25d366;
}

/* Pastell-Verlauf aus den Template-Farben, Seitenkopf der Unterseiten
   (PageLayout) und CTA-Section (CtaSection) teilen ihn. Erste
   background-Zeile = Fallback fuer Browser ohne color-mix(); die zweite legt
   weiche Farbflaechen in die vier Ecken (mit Weiss verduennt). Textkontrast
   bleibt hoch: dunkle Schrift auf max. ~30 % Farbanteil. */
.brand-gradient {
  background: linear-gradient(
    135deg,
    var(--bs-soft-sky) 0%,
    var(--bs-soft-grape) 55%,
    var(--bs-soft-fuchsia) 100%
  );
  background:
    radial-gradient(60% 85% at 0% 0%, color-mix(in srgb, var(--bs-sky) 30%, #fff) 0%, transparent 70%),
    radial-gradient(55% 80% at 100% 0%, color-mix(in srgb, var(--bs-fuchsia) 20%, #fff) 0%, transparent 70%),
    radial-gradient(60% 85% at 100% 100%, color-mix(in srgb, var(--bs-violet) 28%, #fff) 0%, transparent 70%),
    radial-gradient(55% 80% at 0% 100%, color-mix(in srgb, var(--bs-green) 18%, #fff) 0%, transparent 70%),
    #fff;
}

/* Über-uns-Porträt (3:4, ueber-uns.astro): unterhalb von lg steht das Bild
   in voller Breite über dem Text und wäre hochkant sehr hoch. Dort quadratisch
   zuschneiden, Ausschnitt oben: Kopf, Oberkörper und Tablet bleiben sichtbar. */
@media (max-width: 991.98px) {
  .about-portrait img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: 50% 15%;
  }
}