/* ===== Konzept Paul: Header / Hero / Navigation fluid & immer sichtbar ===== */

/* --- Navigation: schrumpft mit, Kontakt-Button bleibt immer im Fenster --- */
@media (min-width: 992px) {
  .container-nav { grid-template-columns: minmax(100px,.35fr) minmax(0,1.9fr) minmax(0,.45fr); }
  .flex-navigation { column-gap: clamp(2px,.8vw,20px); padding-left: clamp(4px,1.4vw,30px); padding-right: clamp(4px,1.4vw,30px); }
  .navigation-line { font-size: clamp(9px,.95vw,15px); padding-left: clamp(2px,.5vw,10px); padding-right: clamp(2px,.5vw,10px); }
  .button-nav .button-rounded { font-size: clamp(10px,1.05vw,17px); padding: clamp(7px,.8vw,12px) clamp(10px,1.6vw,30px); letter-spacing: .5px; max-width: 100%; box-sizing: border-box; }
}

@media (min-width: 992px) and (max-width: 1100px) {
  .container-nav { grid-template-columns: minmax(90px,.3fr) minmax(0,2fr) minmax(0,.45fr); }
  .flex-navigation { column-gap: 0; padding-left: 2px; padding-right: 2px; }
  .navigation-line { font-size: 9px; letter-spacing: 0; padding-left: 3px; padding-right: 3px; }
}

/* --- Hero der Unterseiten: REICon (weiss) oben, Seitenname (gruen) darunter --- */
.hero.for-inner.hero-neu, .hero.hero-neu.hero-home {
  display: flex; align-items: flex-end; justify-content: flex-start; flex-flow: row;
  min-height: clamp(400px, 70vh, 1000px);
  padding: clamp(175px,13vw,300px) clamp(100px,9vw,300px) clamp(48px,6vw,150px) clamp(22px,6vw,260px);
  background-image: linear-gradient(0deg, rgba(8,30,48,.55) 0%, rgba(8,30,48,.12) 55%, rgba(8,30,48,0) 100%), linear-gradient(90deg, rgba(8,30,48,.4) 0%, rgba(8,30,48,0) 70%), url('../images/Moodpick_Leistungen.svg.jpg');
  background-size: cover; background-position: 50% 100%; box-sizing: border-box;
}
.hero-neu-inner { width: 100%; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(2px,.4vw,10px); }
.hero-neu-brand, .hero-neu-title {
  font-family: Avenir, sans-serif; font-weight: 600; line-height: 1; margin: 0;
  font-size: clamp(2rem, 7.5vw, 15rem); overflow-wrap: anywhere; hyphens: auto; max-width: 100%;
}
.hero-neu-brand { color: #fff; }
.hero-neu-title { color: #62bfb9; text-shadow: 0 2px 24px rgba(0,0,0,.2); }



/* --- Startseite: gleiches fluides System, eigenes Bild --- */
.hero.hero-neu.hero-home {
  min-height: clamp(560px, 100vh, 1200px);
  background-image: linear-gradient(0deg, rgba(8,30,48,.35) 0%, rgba(8,30,48,0) 50%), url('../images/Moodpick.svg');
  background-position: 80% 100%; background-size: cover; align-items: center;
}
.hero-home .hero-neu-inner { gap: clamp(8px,1.2vw,28px); }
.hero-home-sub .subhead { font-size: clamp(1rem, 2.2vw, 3.5rem); margin: 0; color: #fff; line-height: 1.15; }
.hero-home-sub .margin-60px { margin-top: clamp(16px,2.4vw,60px); }

/* --- Über: Team-Block war zwischen 1280 und 1439 px per display:none ausgeblendet --- */
.margin-120px { display: block !important; }


/* ===== Konzept 4.11 (04.11.2026): Zoom-Festigkeit 25–500 % =====
   Geprueft mit werkzeuge/zoomcheck.py. Zoom Z auf Bildschirm BxH = Fenster B/Z x H/Z CSS-px,
   d. h. Reinzoomen ist fuer das CSS dasselbe wie ein schmales UND niedriges Fenster. */

/* 1) Navigation <992 px: Webflow hatte zwei feste 200px-Spalten -> bei 480 px Breite (400 %)
      lief jede Seite 10 px seitlich ueber. Spalten duerfen jetzt schrumpfen. */
@media (max-width: 991px) {
  .container-nav { grid-template-columns: minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr); }
  .button-nav .button-rounded { max-width: 100%; box-sizing: border-box; }
}
@media (max-width: 479px) {
  .container-nav { grid-template-columns: minmax(0,2fr) minmax(0,1fr); } /* Webflow-Wert, aber schrumpfbar */
}

/* 2) Hero ohne Obergrenze: beim Rauszoomen (25–67 %) war der Hero bei 1000/1200 px gedeckelt
      und nur noch ein schmales Band mit Weiss darunter. Jetzt fuellt er immer den Bildschirm. */
.hero.for-inner.hero-neu { min-height: max(400px, 70svh); }
.hero.hero-neu.hero-home { min-height: max(560px, 100svh); }

/* 3) Niedrige Fenster (ab ca. 250 % Zoom, auch Handy quer): Navigation war 130–160 px hoch,
      die feste Mindesthoehe (560 px) schob das am unteren Rand verankerte Hintergrundmotiv
      aus dem Bild -> "Hintergrundbild verschwindet". Navigation kompakt, Hero = Fensterhoehe. */
@media (max-width: 991px) and (max-height: 520px) {
  .navar { padding-top: 4px; }
  .logo-wrapper-line { padding-top: 6px; padding-bottom: 6px; }
  .brand-logo, .reic_logo { width: 44px; height: 44px; top: 0; }
  /* Webflow erzwingt display:block am Menue-Button (.w-nav[data-collapse] .w-nav-button), daher
     wirkte align-items nie; die Position kam nur ueber padding-top:35px -> hier echt zentrieren */
  .w-nav[data-collapse="medium"] .menu-button { display: flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; }
  .button-nav .button-rounded { padding: 6px 14px; font-size: 13px; }
  .hero.for-inner.hero-neu, .hero.hero-neu.hero-home {
    min-height: 100svh; padding-top: 84px; padding-bottom: 20px;
  }
  .hero-home .hero-neu-inner { gap: 6px; }
  .hero-home-sub .margin-60px { margin-top: 10px; }
}

/* 5) Hero-Titel bei 100 % einzeilig (Wunsch Paul 04.11.2026). Standard 7,5vw; lange Titel
      bekommen am .hero-neu-inner ein eigenes --titel (gemessen mit zoomcheck.py, TITEL-UMBRUCH):
      Asset Management+ 7.1vw, ESG- & Energieberatung 6.1vw, Gebaeude- & Schadenmanagement 4.3vw.
      REICON-Zeile wird mitskaliert, damit beide Zeilen gleich gross bleiben. */
.hero-neu-inner .hero-neu-title, .hero-neu-inner .hero-neu-brand { font-size: clamp(2rem, var(--titel, 7.5vw), 15rem); }

/* 4) Sehr schmale Fenster (500 % Zoom): lange Woerter ("Verkaufsvorbereitung") brachen nicht um
      und schoben die Seite seitlich auf. Silbentrennung greift dank lang="de". */
@media (max-width: 479px) {
  /* "anywhere" statt "break-word": nur anywhere senkt die Mindestbreite in Flex-/Grid-Elementen */
  h1, h2, h3, h4, p, a, .heading-5, .am-h, .bold-text, .flex-link, .section div { overflow-wrap: anywhere; hyphens: auto; }
}