/*
Theme Name: Hello Elementor Child
Theme URI: https://b12.media
Description: B12 Media Child-Theme für globale CSS-Overrides (update-sicher). Enthält keine Kopien des Parent-Themes.
Author: B12 MEDIA
Author URI: https://b12.media
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* =========================================================================
   B12 GLOBALE OVERRIDES  ·  v1.0  ·  2026-07-21
   Ort für alle site-weiten CSS-Fixes (Elementor-Klassen lassen sich per REST
   nicht editieren → hier zentral, update-sicher im Child-Theme).
   ========================================================================= */

/* --- Container: begrenzen + zentrieren (Fix: war max-width:100% = full-bleed) --- */
.container-large {
  max-width: 1240px !important;
  margin-inline: auto !important;
  padding-inline: 24px !important;
}

/* --- Kontakt-Grid: zwei gleiche Spalten, angenehmer Abstand (statt 108px-Loch) --- */
.contact-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
}
@media (max-width: 767px) {
  .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
}

/* --- Eyebrows/Labels: Geist Mono statt Manrope (Marken-Typografie) --- */
.tagline-text {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, monospace !important;
  letter-spacing: 0.1em !important;
}

/* =========================================================================
   v2 · NACHT-ÜBERARBEITUNG 2026-07-21
   Manono-Wünsche: kompakter „Blog-Stil" site-weit, Hover-Fixes, kleinerer
   Footer, Blog-Text-Template. Konsequent an bestehenden B12-Klassen.
   ========================================================================= */

/* --- FIX: Kontakt-Button-Hover lesbar (Text dunkel auf Amber, nie orange-auf-orange) --- */
.b12-btn:hover,
.b12-btn:hover *,
.navbar__inner .b12-btn:hover,
.navbar__inner .b12-btn:hover * {
  color: #131313 !important;
}

/* --- FIX: rogue rote/blaue Button-Hovers auf Markenfarbe ziehen (statt Rot #EC352F) --- */
.sb-btn-orange:hover,
.sb-btn-blue:hover {
  background: #F1A728 !important;
  border-color: #F1A728 !important;
  color: #131313 !important;
}

/* --- FIX: Nav-Links Hover = Amber statt Rot --- */
.navbar__right a:not(.b12-btn):hover,
.b12-navbar a:not(.b12-btn):hover,
header nav a:not(.b12-btn):hover,
.sidenav__link:hover {
  color: #F1A728 !important;
}

/* --- „Das Große raus": Hero-Titel kompakter, Blog-nah, site-weit einheitlich --- */
.elementor h1.elementor-heading-title,
.hero-sub-title,
.hero-home h1,
.hero-sub h1 {
  font-size: clamp(2.1rem, 4vw, 3rem) !important;
  line-height: 1.12 !important;
}

/* --- Footer kompakter (Ursache: .footer-inner hatte 137px Top-Padding) --- */
.footer-wrap,
.footer-wrapper { padding-block: 0 !important; }
.footer-inner {
  padding-top: 3.25rem !important;
  padding-bottom: 2.25rem !important;
}
.footer-top { margin-bottom: 1.5rem !important; }
.footer-claim {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem) !important;
  line-height: 1.15 !important;
}
.footer-logo { max-width: 130px !important; height: auto !important; }
.footer-title { font-size: 0.78rem !important; }

/* --- Blog-Beitrags-Content = Standard-Textstil (Amber-Überschriften + kompakter Fließtext,
       wie auf den Projektseiten – gefällt Manono besser) --- */
.single-post .elementor-widget-theme-post-content h2,
.single-post .elementor-widget-theme-post-content h3,
.single-post .elementor-widget-theme-post-content h4,
.single .entry-content h2,
.single .entry-content h3 {
  color: #F1A728 !important;
  letter-spacing: -0.01em;
}
.single-post .elementor-widget-theme-post-content p,
.single-post .elementor-widget-theme-post-content li,
.single .entry-content p,
.single .entry-content li {
  font-size: 1.02rem !important;
  line-height: 1.75 !important;
}

/* --- Header/Nav einheitlich im Blog-Layout (Manono-Wunsch): Inhalt zentriert (1240px),
       Logo links, Nav + Kontakt rechts gruppiert, feine Trennlinie unten --- */
.b12-navbar .navbar__inner {
  max-width: 1240px !important;
  margin-inline: auto !important;
  justify-content: flex-start !important;
  gap: 32px;
}
.b12-navbar .navbar__inner > *:first-child { margin-right: auto !important; }
.b12-navbar { border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; }

/* Kontakt-Button im Header exakt wie Blog: dunkler Outline statt Amber-Füllung (alle Nav-Typen) */
.b12-navbar .b12-btn::before, .b12-navbar .b12-btn:hover::before,
.b12-linkwrap .b12-btn::before, .b12-linkwrap .b12-btn:hover::before { background: #0F0F0F !important; inset: 0 !important; }
.b12-navbar .b12-btn,
.b12-linkwrap .b12-btn {
  border: 1px solid #373737 !important;
  border-radius: 8px !important;
}
.b12-navbar .b12-btn, .b12-navbar .b12-btn *,
.b12-linkwrap .b12-btn, .b12-linkwrap .b12-btn * { color: #FFFFFF !important; }
.b12-navbar .b12-btn:hover, .b12-navbar .b12-btn:hover *,
.b12-linkwrap .b12-btn:hover, .b12-linkwrap .b12-btn:hover * { color: #F1A728 !important; }
.b12-navbar .b12-btn:hover,
.b12-linkwrap .b12-btn:hover { border-color: #F1A728 !important; }

/* Logo im Header auf Blog-Größe (war ~276px viel zu groß, Blog ~120px) */
.b12-navbar .navbar__logo,
.b12-navbar .navbar__logo img,
.b12-navbar .navbar__logo svg { max-width: 120px !important; width: 120px !important; height: auto !important; }

/* =========================================================================
   v3 · SIZING (Blog-Referenz) + RESPONSIVE · 2026-07-21
   Ziel: alles auf die kompakten Blog-Größen; saubere Breakpoints Tablet/Mobile.
   ========================================================================= */

/* --- Hero-Titel exakt Blog-Größe (~46px statt ~51px) --- */
/* line-height 1.1 war zu eng → Unterlängen (g/p/ß) stießen an die Folgezeile.
   1.16 gibt Descender-Luft, bleibt aber kompakt. */
.elementor h1.elementor-heading-title,
.hero-sub-title, .hero-home h1, .hero-sub h1 {
  font-size: clamp(2rem, 3.4vw, 2.9rem) !important;
  line-height: 1.16 !important;
  padding-bottom: 0.04em !important; /* Sicherheitsraum, falls Descender sonst geclippt */
}

/* --- Footer deutlich kompakter (Blog-nah) --- */
.footer-inner { padding-top: 2.5rem !important; padding-bottom: 2rem !important; }
.footer-claim { font-size: clamp(1.1rem, 1.9vw, 1.5rem) !important; line-height: 1.15 !important; }
.footer-logo { max-width: 100px !important; height: auto !important; }
.footer-top { margin-bottom: 1rem !important; }

/* =========================== RESPONSIVE =========================== */
/* Tablet (bis 1024px) */
@media (max-width: 1024px) {
  .container-large { padding-inline: 22px !important; }
  .b12-navbar .navbar__inner,
  .b12-linkwrap { padding-inline: 22px !important; }
}

/* Mobile (bis 767px) */
@media (max-width: 767px) {
  html, body { overflow-x: hidden !important; }
  .container-large { padding-inline: 16px !important; }
  .b12-navbar .navbar__inner { padding-inline: 16px !important; }

  /* Titel skalieren, keine Überschneidungen */
  .elementor h1.elementor-heading-title,
  .hero-sub-title, .hero-home h1, .hero-sub h1 {
    font-size: clamp(1.7rem, 8.5vw, 2.2rem) !important;
    line-height: 1.18 !important;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  /* Grids/Reihen auf eine Spalte stapeln */
  .contact-grid, .services-grid, .services-left, .services-right,
  .portfolio-list, .about-grid, .leistung-grid,
  .testimonial-list, .faq-grid { grid-template-columns: 1fr !important; }
  .footer-top, .footer-bottomlists, .footer-inner,
  .row-between { flex-direction: column !important; align-items: flex-start !important; gap: 1.5rem !important; }

  /* Bilder/Iframes nie über den Rand */
  img, iframe, video { max-width: 100% !important; height: auto; }
}

/* =========================================================================
   v4 · RESPONSIVE-HÄRTUNG + H1-DESCENDER-FIX · 2026-07-21
   Ziel: Hero/Sektionen auf kleinen Screens luftig aber kompakt, Tap-Targets
   groß genug, keine Überläufe. Nur an belegten B12-Klassen + Elementor-Cons.
   ========================================================================= */

/* Tablet (bis 1024px): Hero-Vertikalabstände + Eyebrow etwas zurücknehmen */
@media (max-width: 1024px) {
  .hero-home, .hero-sub { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .tagline-text { font-size: 0.8rem !important; }
}

/* Mobile (bis 767px): kompakte Sektionen, volle Buttons, sauberer Fließtext */
@media (max-width: 767px) {
  /* Hero nicht bildschirmfüllend hoch */
  .hero-home, .hero-sub { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

  /* H1 unter dem Eyebrow etwas Abstand, Descender frei */
  .elementor h1.elementor-heading-title,
  .hero-sub-title, .hero-home h1, .hero-sub h1 {
    margin-bottom: 0.6em !important;
  }

  /* Große Elementor-Sektionen/Container vertikal entstauchen (nur wenn üppig gepolstert) */
  .elementor-section.elementor-section-boxed > .elementor-container { padding-block: 0 !important; }

  /* Buttons volle Breite = bessere Tap-Targets, kein Nebeneinander-Überlauf */
  .b12-btn, .sb-btn-orange, .sb-btn-blue {
    display: inline-flex !important;
    width: 100% !important;
    justify-content: center !important;
  }
  /* Ausnahme: Kontakt-Button im Header bleibt kompakt (kein Full-Width in der Navbar) */
  .b12-navbar .b12-btn, .b12-linkwrap .b12-btn { width: auto !important; }

  /* Eyebrow/Labels kleiner, Fließtext angenehm lesbar */
  .tagline-text { font-size: 0.75rem !important; }
  .hero-home p, .hero-sub p { font-size: 1rem !important; line-height: 1.6 !important; }
}

/* =========================================================================
   v5 · MOBILE-SIDENAV-FIX · 2026-07-21 (per iframe-390px-QA verifiziert)
   Bug: .sidenav (position:fixed) war nur 70px hoch → Overlay + dunkles Panel
   (beide absolute im Parent) deckten nichts ab, Menü-Links lagen transparent
   über dem Seiteninhalt. Fix: Container auf volle Viewport-Höhe; Panel scrollt
   bei kleinen Screens. Geschlossen ist .sidenav display:none → Fix ohne Effekt.
   ========================================================================= */
.sidenav {
  height: 100vh !important;   /* Fallback ältere Browser */
  height: 100dvh !important;  /* korrekt mit mobilen Browser-Leisten */
}
.sidenav__panel { overflow-y: auto !important; }

/* =========================================================================
   v6 · PROJEKT-KARTEN-BILDAUSSCHNITTE · 2026-07-22
   Hochformat-Porträt (Hess, Media 408) wurde mittig gecroppt → Kopf ab.
   object-position oben = Gesicht immer sichtbar. Selector über das
   id-Attribut des Elementor-Image-Widgets (= Attachment-ID).
   ========================================================================= */
img[id="408"] { object-position: center 18% !important; }

/* =========================================================================
   v7 · FOOTER OHNE REVEAL-ANIMATION · 2026-07-22 (Wunsch Manono)
   Webflow-Erbe: GSAP schiebt .footer-wrapper per Inline-Transform
   translate(0,-25%) über den davorliegenden Inhalt (Parallax-Reveal) →
   Überschneidungen auf Handy + Desktop. !important schlägt Inline-Styles:
   Footer steht damit einfach statisch am Seitenende, ohne Animation.
   ========================================================================= */
.footer-wrapper, .footer-wrap {
  transform: none !important;
  translate: none !important;
  opacity: 1 !important;
}