/* =========================================================================
   Yarowa Astro-Migration - Custom-Layer NACH site.css.
   Nav-Speed (INSYNC-Timing), Grain, View-Transition-Crossfade,
   Form-Error-Fix, Cookie-Banner.
   ========================================================================= */

/* ---- Nav-Speed: INSYNC-Timing statt 600ms (html:root schlaegt das
   :root des Nav-Embeds in der Kaskade) ---- */
html:root {
  --nav--menu-open-duration: 400ms;
  --nav--menu-close-duration: 300ms;
  --nav--dropdown-open-duration: 250ms;
  --nav--dropdown-close-duration: 200ms;
}

/* ---- Formular-Error-Labels: initial versteckt (Regel lag im alten
   Webflow-Projekt, fehlt im Export) - yarowa-custom.js togglet display ---- */
[data-input-form="error-msg"] { display: none; color: #c0392b; }

/* ---- Film-Grain - 1:1 INSYNC (grain.avif, soft-light 15%) ---- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000000;
  background-image: url('/textures/grain.avif');
  background-repeat: repeat;
  background-size: 120px 120px;
  mix-blend-mode: soft-light;
  opacity: 0.15;
}

/* ---- Page-Transition: Cross-Fade wie Ullsteinhaus (leave 0.5s ease-in,
   enter 0.75s ease-in-out) via Cross-Document View Transitions ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation-duration: 0.5s;
  animation-timing-function: ease-in;
}
::view-transition-new(root) {
  animation-duration: 0.75s;
  animation-timing-function: ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---- Cookie-Banner (INSYNC-Pattern, Yarowa-Styles) ---- */
.yw-cookie, .yw-cookie * { box-sizing: border-box; }
.yw-cookie {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999999;
  width: calc(100vw - 40px); max-width: 400px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(31, 29, 30, 0.1);
  border-radius: 1rem;
  padding: 20px;
  box-shadow: 0 20px 50px -10px rgba(31, 29, 30, 0.25);
  font-family: Inter, sans-serif;
  display: flex; flex-direction: column; gap: 16px;
}
.yw-cookie__title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: #1f1d1e; margin: 0; }
.yw-cookie__body { font-size: 13px; line-height: 1.5; color: rgba(31, 29, 30, 0.6); margin: 0; }
.yw-cookie__body a { color: #65b61b; text-decoration: underline; }
.yw-cookie__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.yw-cookie__btn {
  border: 0; cursor: pointer; height: 36px; padding: 0 16px;
  border-radius: 100vw; font-family: inherit; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transition: filter 0.2s ease, background 0.2s ease;
}
.yw-cookie__btn--accept {
  background: linear-gradient(#65b61b, #c0ff86); color: #1f1d1e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.yw-cookie__btn--accept:hover { filter: brightness(0.95); }
.yw-cookie__btn--reject { background: #1f1d1e; color: #f8f8f8; }
.yw-cookie__btn--reject:hover { background: #3a3738; }
.yw-cookie__btn--ghost {
  background: none; color: rgba(31, 29, 30, 0.55); font-weight: 500; padding: 0 4px;
}
.yw-cookie__btn--ghost:hover { color: #1f1d1e; }

.yw-cookie-overlay {
  position: fixed; inset: 0; z-index: 9999999;
  background: rgba(31, 29, 30, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.yw-cookie-dialog {
  width: 100%; max-width: 460px; background: #fff;
  border: 1px solid rgba(31, 29, 30, 0.1); border-radius: 1rem;
  padding: 24px; display: flex; flex-direction: column; gap: 20px;
  box-shadow: 0 20px 50px -10px rgba(31, 29, 30, 0.35);
  font-family: Inter, sans-serif;
}
.yw-cookie-dialog__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.yw-cookie-dialog__label { font-size: 13px; font-weight: 700; color: #1f1d1e; display: block; }
.yw-cookie-dialog__desc { font-size: 12.5px; color: rgba(31, 29, 30, 0.55); margin: 2px 0 0; line-height: 1.45; }
.yw-toggle {
  position: relative; width: 44px; height: 24px; border-radius: 100vw; border: 0;
  cursor: pointer; background: rgba(31, 29, 30, 0.15); transition: background 0.2s ease; flex-shrink: 0;
}
.yw-toggle[aria-checked="true"] { background: #65b61b; }
.yw-toggle[disabled] { opacity: 0.5; cursor: not-allowed; }
.yw-toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: left 0.2s ease;
}
.yw-toggle[aria-checked="true"]::after { left: 23px; }

/* Sprach-Dropdown: Flaggen-Groesse fixieren + Label nicht umbrechen */
.nav_dropdown_item.w-locales-item .nav_dropdown_link { display: flex; align-items: center; white-space: nowrap; }
.nav_dropdown_item.w-locales-item img { width: 18px !important; height: 18px !important; }

/* Testimonial-Company-Logos: nicht quetschen (Export-CSS setzt nur width/height) */
.testimonial_image.is-company { object-fit: contain; object-position: left center; border-radius: 0; }

/* Logo-Groesse konsistent: Webflow-CSS verkleinert das Logo auf der Startseite
   (.w--current -> 9rem). Einheitlich 10rem auf allen Seiten. */
.nav_desktop_logo.w--current { width: 10rem; }
.nav_mobile_logo.w--current { width: 10rem; }

/* Hero-Netzwerk-Cards: lange Begriffe (Immobilienbewirtschaftung) sauber umbrechen */
.hero_home_card_title, .hero_home_card_text { overflow-wrap: anywhere; hyphens: auto; }

/* =========================================================================
   Mobile-UX-Paket (Robert 24.08.)
   ========================================================================= */

/* ---- Basis-Schriftgroessen mobil: 14/16px statt 10/12px (Fluid-Clamp-Minima
   des Webflow-CSS sind zu klein). Grafik-Embeds (em/cqw-basiert) unberuehrt. ---- */
@media (max-width: 640px) {
  html:root {
    --_typography---font-size--text-main: 1rem;        /* 16px */
    --_typography---font-size--text-medium: 1rem;      /* 16px */
    --_typography---font-size--text-small: 0.875rem;   /* 14px */
    --_typography---font-size--text-tiny: 0.875rem;    /* 14px */
    --_typography---font-size--text-super-tiny: 0.75rem;
  }
}

/* ---- Footer mobil: eine Spalte, luftig, lesbare Groessen ---- */
@media (max-width: 640px) {
  .footer_layout,
  .footer_layout.u-grid-custom,
  .footer_layout.u-grid-above {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-row-gap: 2rem !important;
  }
  /* Children erzwingen sonst implizite Spalten via grid-column-Spans */
  .footer_layout > *,
  .footer_nav > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  .footer_nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-row-gap: 2rem !important;
  }
  .footer_wrap a, .footer_wrap p { font-size: 0.9375rem; }
  .footer_bottom_layout { flex-wrap: wrap; row-gap: 0.75rem; }
}

/* ---- Mobile-Nav: glassy Bar erst auf Scroll (oben transparent).
   position+z-index noetig, damit Logo + X ueber dem geoeffneten Menue liegen
   (backdrop-filter erzeugt sonst einen Stacking-Context UNTER dem w-nav-overlay). ---- */
@media (max-width: 1119px) {
  /* Ullsteinhaus-Muster: durchgehende Bar oben statt schwebendem Pill-Menue */
  .nav_mobile_wrap { padding: 0 !important; margin: 0 !important; }
  .nav_mobile_contain {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: none;
    margin: 0;
    /* Ullsteinhaus: standardmaessig glassy, direkt am oberen Rand */
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border: 0;
    border-bottom: 1px solid rgba(31, 29, 30, 0.08);
    border-radius: 0;
    box-shadow: none;
    padding: 0.5rem 1.25rem;
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }
  .nav_mobile_layout { padding-left: 0 !important; padding-right: 0 !important; }
  .nav_mobile_contain.is-scrolled {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border-bottom-color: rgba(31, 29, 30, 0.08);
    box-shadow: none;
  }
  /* Menue offen: Bar transparent lassen (weisses Menue-Panel liegt dahinter),
     Blur aus, damit das Panel nicht verschwimmt */
  .nav_mobile_wrap:has(.w-nav-button.w--open) .nav_mobile_contain {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: transparent;
    box-shadow: none;
  }
  /* Weniger Padding links/rechts im geoeffneten Mobile-Menue */
  .nav_mobile_menu_scroll { padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* ---- Mobile: Webflow hardcodet teils 10px-Groessen in Media-Queries -
   direkte Overrides, da CSS-Var-Overrides hier nicht greifen ---- */
@media (max-width: 767px) {
  .footer_link_text.u-text-style-small { font-size: 0.875rem !important; }
  .u-text-style-tiny.u-color-faded.is-copyright { font-size: 0.875rem !important; }
  .footer_group_title { font-size: 1rem !important; }
}
/* ---- Mobile: Container-Grids IMMER 1-spaltig (nie 2 Container nebeneinander) ---- */
@media (max-width: 640px) {
  .u-grid-custom, .u-grid-autofill { grid-template-columns: 1fr !important; }
  .u-grid-custom > *, .u-grid-autofill > * { grid-column: 1 / -1 !important; }
  .contact_main_form-2col { grid-template-columns: 1fr !important; }
  .footer_copyright_layout { grid-template-columns: 1fr !important; grid-row-gap: 0.5rem !important; }
}

/* ---- Mobile: Karten-Headings nie kleiner als der Fliesstext (Webflow-Clamps
   kollabieren h4/h5/h6 auf ~14px) ---- */
@media (max-width: 640px) {
  .u-text-style-h4 { font-size: 1.25rem !important; }
  .u-text-style-h5, .u-text-style-h6 { font-size: 1.125rem !important; }
}

@media (max-width: 640px) {
  .tag_text.u-text-style-medium { font-size: 0.875rem !important; }
  .network_card-list .c-paragraph { font-size: 0.875rem !important; line-height: 1.45 !important; }
  .usecases_card .c-paragraph { font-size: 0.875rem !important; line-height: 1.45 !important; }
  .tec_integ_b { font-size: 0.875rem !important; }
  .tec_integ_pill, .tec_integ_pill span { font-size: 0.875rem !important; }
  .i-hero_floating_subtext { font-size: 0.875rem !important; }
  /* Automation-Section + Section-Subheadings: 12px -> 14/16px */
  .automation_contain .c-paragraph, .automation_contain .c-paragraph p { font-size: 0.875rem !important; line-height: 1.5 !important; }
  .automation_item .c-heading, .automation_item .c-heading p { font-size: 1rem !important; }
  .section_subheading .c-paragraph, .section_subheading .c-paragraph p, p.section_subheading { font-size: 0.875rem !important; line-height: 1.5 !important; }
}

/* ---- Mobile-Menue: 15px Abstand ueber dem Login-Button ---- */
.nav_mobile_wrap .nav_buttons_item { margin-top: 15px; }

/* ---- Legal-Seiten: Headings moderat statt ueberdimensional ---- */
.legal_rich_text h1 { font-size: clamp(1.875rem, 3.2vw, 2.5rem); line-height: 1.2; }
.legal_rich_text h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.3; margin-top: 2.5rem; }
.legal_rich_text h3 { font-size: clamp(1.125rem, 1.8vw, 1.3125rem); line-height: 1.35; }

/* ---- Nav: schlichter Login-Textlink links vom Book-a-Demo-Button ---- */
.yw-nav-login {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  color: inherit;
  text-decoration: none;
  font-size: var(--_typography---font-size--text-small, 0.875rem);
}
.yw-nav-login:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1119px) {
  .nav_mobile_wrap .yw-nav-login-item { margin-top: 15px; }
}

/* ---- About-Voices: Yarowa-Mark als runder Avatar (contain statt cover) ---- */
.testimonial_image.is-yarowa {
  object-fit: contain;
  background: #fff;
  padding: 10px;
  border: 1px solid rgba(31, 29, 30, 0.08);
}

/* ---- Marquee (Awards-Slider auf der Home): CSS lag im Tech-Partner-Embed,
   das mit der Section entfernt wurde. Jetzt global. ---- */
[data-marquee] {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}
.marquee_track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  max-width: none;
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}
[data-marquee-content] {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
}
[data-marquee-content] > * { flex: 0 0 auto; }

/* ================= Runde 18 (Robert 25.08.) ================= */

/* (a) Karten-/Container-Hoehen: nie fix, immer mitwachsen (Text-Ueberlauf) */
.hit_item, .hit_context, .hit_graphic_wrap,
.usecases_card, .value_card, .why_card, .network_card, .k-benefit_item {
  height: auto;
}
.hit_graphic_wrap { min-height: 5rem; align-self: stretch; }
@media (max-width: 479px) {
  .hit_graphic_wrap { height: auto; min-height: 5rem; }
  .hit_graphic_wrap:where(.w-variant-22af8d4b-1e0c-1578-6454-75d3b557ba2c) { height: auto; }
}

/* (b) Home "KI-gestuetzte Automatisierung": 3. Container (is-landscape)
   auf Mobile wie die ersten beiden statt flachem Querformat */
@media (max-width: 767px) {
  .automation_item.u-theme-dark.is-landscape {
    aspect-ratio: auto;
    min-height: 20.5rem;
    justify-content: flex-end;
  }
}

/* (c) Anwendungsfaelle: auf Mobile alle Karten untereinander
   (Original-Embed stapelt nur bis 2 Spalten) */
@media (max-width: 767px) {
  .usecases_list { grid-template-columns: minmax(0, 1fr) !important; }
  .usecases_list > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
}

/* (d) Tech-Partner/About/Karriere Hero-Container: Text kleiner, Box waechst mit */
.i-hero_visual_wrap { aspect-ratio: auto; min-height: 13.1875rem; height: auto; }
.i-hero_floating_text.u-text-style-h4 { font-size: 1.125rem; line-height: 1.4; }
@media (min-width: 992px) {
  .i-hero_floating_text.u-text-style-h4 { font-size: 1.25rem; }
}
@media (max-width: 479px) {
  .i-hero_visual_wrap { aspect-ratio: auto; }
  .i-hero_floating_text.u-text-style-h4 { font-size: 1rem; }
}

/* (e) Typo-Hierarchie: Section-Paragraph nie kleiner als Container-Paragraph */
.section_subheading,
.section_subheading .c-paragraph,
.section_subheading p,
.section_header .c-paragraph,
.section_header .c-paragraph p {
  font-size: 1rem;
  line-height: 1.55;
}
@media (min-width: 992px) {
  .section_subheading,
  .section_subheading .c-paragraph,
  .section_subheading p,
  .section_header .c-paragraph,
  .section_header .c-paragraph p {
    font-size: 1.125rem;
  }
}

/* ================= Mobile-Menue (INSYNC-Muster) ================= */
@media (max-width: 1119px) {
  /* Webflow-Standardmenue auf Mobile deaktivieren - wir rendern ein eigenes Panel */
  .nav_mobile_menu_wrap, .nav_mobile_wrap .w-nav-overlay { display: none !important; }
}
html.yw-mm-open, html.yw-mm-open body { overflow: hidden; }

.yw-mm {
  position: fixed;
  top: -60px;          /* Ullsteinhaus: negativer Top-Overlap */
  left: 0;
  right: 0;
  bottom: -2px;
  margin-top: 0;
  z-index: 10000001; /* ueber dem Grain-Overlay */
  background: #ffffff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
}
.yw-mm.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1120px) { .yw-mm { display: none; } }

.yw-mm_scroll {
  height: calc(100dvh + 62px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(60px + 5rem) 1.25rem 2rem;
  display: flex;
  flex-direction: column;
}
.yw-mm_panel { display: flex; flex-direction: column; }
.yw-mm_panel[hidden] { display: none; }

.yw-mm_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 56px;
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 1px solid rgba(31, 29, 30, 0.1);
  background: none;
  width: 100%;
  text-align: left;
  color: #1f1d1e;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.yw-mm_label { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.yw-mm_row.is-current .yw-mm_label { color: #63bd2c; }
.yw-mm_row.is-back { justify-content: flex-start; border-bottom: 0; margin-bottom: 0.25rem; color: rgba(31, 29, 30, 0.55); }
.yw-mm_row.is-back .yw-mm_label { font-size: 1rem; font-weight: 500; }
.yw-mm_chev { width: 22px; height: 22px; flex: none; color: rgba(31, 29, 30, 0.35); }
.yw-mm_chev.is-back { width: 20px; height: 20px; margin-right: 0.5rem; }
.yw-mm_sub-title {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(31, 29, 30, 0.45);
  padding: 0.5rem 0 0.75rem;
}

.yw-mm_footer { margin-top: auto; padding-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
.yw-mm_login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 0.625rem;
  border: 1px solid rgba(31, 29, 30, 0.15);
  color: #1f1d1e;
  text-decoration: none;
  font-weight: 600;
}
.yw-mm_cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 0.625rem;
  background: linear-gradient(180deg, #7bd63a 0%, #63bd2c 100%);
  color: #10230a;
  text-decoration: none;
  font-weight: 700;
}
/* Nav-Bar bleibt ueber dem Panel bedienbar */
@media (max-width: 1119px) {
  .nav_mobile_wrap { z-index: 10000002; position: relative; }
}
/* Grain nicht ueber dem offenen Menue */
html.yw-mm-open body::after { display: none; }

/* Panel-Header (Logo + Close) wie bei INSYNC */
.yw-mm_head {
  position: absolute;
  top: 60px; left: 0; right: 0;
  /* identische Geometrie wie .nav_mobile_contain im geschlossenen Zustand:
     0.5rem Innenabstand + 1.25rem seitlich, Logohoehe 40px */
  min-height: calc(40px + 1rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.25rem;
  z-index: 2;
}
.yw-mm_logo { display: flex; align-items: center; height: 40px; }
.yw-mm_logo img { width: 160px; height: auto; display: block; }
.yw-mm_close {
  width: 32px; height: 64px;   /* exakt die Trefferflaeche des Burgers */
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: #1f1d1e; cursor: pointer;
  padding: 0;
}
.yw-mm_close svg { width: 24px; height: 24px; }
/* Original-Navbar bei offenem Menue ausblenden (Panel hat eigenen Header) */
html.yw-mm-open .nav_mobile_wrap { opacity: 0; pointer-events: none; }

/* Nachschaerfung Runde 18: Webflow-Media-Regeln haben hoehere Spezifitaet */
.section_subheading,
.section_subheading .c-paragraph,
.section_subheading .c-paragraph p,
.section_subheading p,
[class*="_subheading"]:not(.hit_subheading):not(.security_subheading),
[class*="_subheading"]:not(.hit_subheading):not(.security_subheading) p {
  font-size: 1rem !important;
  line-height: 1.55 !important;
}
@media (min-width: 992px) {
  .section_subheading,
  .section_subheading .c-paragraph,
  .section_subheading .c-paragraph p,
  .section_subheading p,
  [class*="_subheading"]:not(.hit_subheading):not(.security_subheading),
  [class*="_subheading"]:not(.hit_subheading):not(.security_subheading) p {
    font-size: 1.125rem !important;
  }
}
.i-hero_floating_text.u-text-style-h4 { font-size: 1.125rem !important; }
@media (min-width: 992px) { .i-hero_floating_text.u-text-style-h4 { font-size: 1.25rem !important; } }
@media (max-width: 479px) { .i-hero_floating_text.u-text-style-h4 { font-size: 1rem !important; } }
.i-hero_visual_wrap { overflow: visible !important; height: auto !important; }

/* Hero-Floating-Card auf Mobile: Container waechst mit statt Karte ueberlappen zu lassen */
@media (max-width: 767px) {
  .i-hero_visual_wrap {
    display: flex !important;
    flex-direction: column;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    padding: 0.75rem;
    gap: 0.75rem;
    background-color: transparent;
    border: 0;
  }
  .i-hero_visual_wrap > .u-cover {
    position: relative;
    height: 10rem;
    border-radius: 0.75rem;
    overflow: hidden;
  }
  .i-hero_floating_card {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    margin: 0 !important;
  }
  .i-hero_visual_gradient { display: none; }
}

/* Awards-Slider: einheitliche Logo-Groessen (CSS lag ebenfalls im Tech-Partner-Embed) */
.sec-comp_logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6.5rem;
  padding: 0 2rem;
  flex: 0 0 auto;
}
.sec-comp_logo-img {
  height: 100%;
  width: auto;
  max-width: 12rem;
  object-fit: contain;
}
@media (max-width: 640px) {
  .sec-comp_logo { height: 5rem; padding: 0 1.25rem; }
}

/* ---- Home "KI-gestuetzte Automatisierung": 3. Container exakt wie die ersten beiden ---- */
@media (max-width: 767px) {
  /* Texte full width (Karten-Padding bleibt) */
  .automation_item .c-heading,
  .automation_item .automation_text,
  .automation_item .automation_content {
    width: 100% !important;
    max-width: none !important;
  }
  /* Visual als Vollflaechen-Hintergrund wie bei Container 1 + 2 */
  .automation_visual.is-wide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    transform: none !important;
  }
  .automation_visual-img.is-landsacepe {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
  }
  /* Inhalt unten ausrichten, Logo darueber */
  .automation_content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0.75rem;
    height: 100%;
    position: relative;
    z-index: 3; /* Content liegt im Original hinter bg/overlay -> nach vorne holen */
  }
  .automation_item.is-landscape .automation_bg { z-index: 1; }
  .automation_item.is-landscape .automation_overlay { z-index: 2; }
  .automation_logo { width: 7.5rem; height: auto; }
}

/* ---- Automation-Container 3: gleiche Hoehe wie 1+2, Text sauber lesbar ---- */
@media (max-width: 767px) {
  .automation_item.u-theme-dark,
  .automation_item.u-theme-dark.is-landscape {
    min-height: 20.625rem;
  }
  /* Lesbarkeit: dunkler Verlauf unter dem Text (wie bei 1+2) */
  .automation_item .automation_overlay,
  .automation_item.is-landscape .automation_overlay {
    background-image: linear-gradient(180deg, rgba(16, 26, 12, 0) 30%, rgba(16, 26, 12, 0.35) 55%, rgba(16, 26, 12, 0.82) 100%) !important;
    opacity: 1 !important;
  }
  .automation_item .c-heading,
  .automation_item .automation_text {
    text-shadow: 0 1px 6px rgba(16, 26, 12, 0.45);
  }
  .automation_item.is-landscape .automation_content { padding-top: 30%; }
}

/* ---- Desktop-Mega-Menue: 30px vertikaler Abstand zwischen den Link-Items ---- */
@media (min-width: 1120px) {
  .nav_dropdown_main_list,
  .nav_dropdown_list,
  .nav_dropdown_main_scroll .nav_dropdown_main_list {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
  }
  .nav_dropdown_main_list > *,
  .nav_dropdown_list > * { margin: 0; }
}

/* ---- Seitliches Seiten-Padding unter 1200px auf 30px ---- */
@media (max-width: 1199px) {
  html:root { --site--margin: 30px; }
}

/* ================= Runde 21 (Robert 25.08.) ================= */

/* (a) Mobile: Headings und Sub-Paragraphen immer linksbuendig */
@media (max-width: 767px) {
  .section_header,
  .section_header > *,
  .section_subheading,
  .section_subheading > *,
  .tag_wrap,
  .tag_text,
  .c-heading,
  .c-heading > *,
  .security_subheading,
  .security_item,
  .security_item > *,
  .k-benefit_title,
  .k-benefit_desc,
  .sec-comp_main,
  .sec-comp_main h3,
  .u-alignment-center {
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .section_header, .sec-comp_main { margin-left: 0 !important; margin-right: auto !important; }
}

/* (b) "So funktioniert's": Fliesstext 14px, Icon halb so gross */
/* "So funktioniert's": Fliesstext 14px (alle Breakpoints).
   Die Grafik-Box wird NUR auf Mobile kompakter - Desktop bleibt im Original. */
.hit_subheading { font-size: 0.875rem !important; line-height: 1.5 !important; }
@media (max-width: 767px) {
  .hit_graphic_wrap,
  .hit_graphic_wrap:where(.w-variant-22af8d4b-1e0c-1578-6454-75d3b557ba2c) {
    max-width: 3.75rem !important;   /* Box von 80 auf 60px */
    min-width: 3.75rem;
    min-height: 3.75rem;
    padding: 0.5rem;
  }
  .hit_graphic_icon,
  .hit_graphic_icon.is-small { width: 1.5rem !important; height: 1.5rem !important; }
  .hit_graphic_icon svg, .hit_graphic_icon img { width: 100% !important; height: 100% !important; }
  .hit_graphic_icon_number { font-size: 1.25rem !important; line-height: 1.2 !important; }
  .hit_graphic_icon_wrap { gap: 0.25rem; height: auto !important; }
}

/* (c) Footer-Bottom (Impressum/Datenschutz) auf Mobile: linksbuendig, gleicher Stil wie die uebrigen Footer-Links */
@media (max-width: 767px) {
  .footer_copyright_layout,
  .footer_bottom_layout {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    row-gap: 0.5rem;
    text-align: left !important;
  }
  .footer_legal_wrap, .footer_legal_list { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: flex-start; }
}
.footer_legal_text { font-size: 0.875rem !important; }

/* (d) Lange Komposita in CTA-Headings nicht abschneiden */
[class*="cta"] .c-heading,
[class*="cta"] .c-heading * ,
.cta_contain h1, .cta_contain h2, .cta_contain h3 {
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ================= Runde 22 (Robert 25.08.) ================= */

/* (1) Deko-Wuerfel und schwebende Icons immer HINTER den Text */
.cube_wrap, .cube_item, .cube_img,
[class*="_cube"], [class*="cube_"],
[class*="floating_cube"], [class*="_decor_wrap"], [class*="_deco"] {
  z-index: 0 !important;
  pointer-events: none;
}
.section_header, .section_subheading, .c-heading, .tag_wrap,
.testimonial_contain > *:not([class*="decor"]):not([class*="cube"]) {
  position: relative;
  z-index: 2;
}

/* (2) Ueber Yarowa: Philosophie-Paare auf Mobile untereinander */
@media (max-width: 767px) {
  .abo_philos_pairs {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem;
  }
  .abo_philos_pairs > * { width: 100% !important; max-width: none !important; }
}

/* (3) Karriere: Positions-Karte auf Mobile vertikal stapeln (Inhalt lief rechts raus) */
@media (max-width: 767px) {
  .j-position_card {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem;
  }
  .j-position_box_wrap { width: 100% !important; max-width: none !important; min-height: 5rem; }
  .j-position_content { width: 100% !important; max-width: none !important; }
  .j-position_meta_wrap { display: flex !important; flex-direction: column; gap: 0.375rem; }
}

/* (4) Kontakt auf Mobile: Ueberschrift, dann Formular, dann Kontaktinfos.
   Die Ueberschrift steckt zusammen mit den Infos in .contact_main_content, deshalb
   loest display:contents diesen Wrapper auf, damit beide Teile einzeln sortierbar
   sind (Robert 25.08.: Titel und Absatz gehoeren ueber das Formular). */
@media (max-width: 767px) {
  .contact_main_layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.5rem;
  }
  .contact_main_content { display: contents !important; }
  .contact_main_content > .section_header { order: 0; }
  .contact_main_right { order: 1; }
  .contact_main_content > .contact_main_bottom { order: 2; }
}

/* ================= Typo-System-Konsolidierung (Audit 25.08.) ================= */
/* Ein durchgaengiger Satz Groessen/Line-Heights/Gewichte statt Punkt-Overrides.
   Ersetzt die frueheren 640px-Insellösungen: gilt jetzt bis 991px durchgehend. */
@media (max-width: 991px) {
  html:root {
    --_typography---font-size--text-main: 1rem;
    --_typography---font-size--text-medium: 1rem;
    --_typography---font-size--text-small: 0.875rem;
    --_typography---font-size--text-tiny: 0.875rem;
    --_typography---font-size--text-super-tiny: 0.8125rem;
  }
}
/* Heading-Minima staffeln, damit H1/H2/H3 auf Mobile nicht alle gleich gross sind */
@media (max-width: 767px) {
  .u-text-style-h1, h1.u-text-style-h1 { font-size: 2rem; line-height: 1.15; }
  .u-text-style-h2 { font-size: 1.625rem; line-height: 1.2; }
  .u-text-style-h3 { font-size: 1.375rem; line-height: 1.25; }
  .u-text-style-h4 { font-size: 1.25rem; line-height: 1.3; }
  .u-text-style-h5, .u-text-style-h6 { font-size: 1.125rem; line-height: 1.35; }
}
/* Line-Height-Baender vereinheitlichen (Audit: 10 verschiedene Werte im Bestand) */
.u-text-style-display, .u-text-style-h1 { line-height: 1.1; }
.u-text-style-h2, .u-text-style-h3 { line-height: 1.2; }
.u-text-style-h4, .u-text-style-h5, .u-text-style-h6 { line-height: 1.3; }
.c-paragraph, .u-text-style-main, .u-text-style-medium,
.u-text-style-small, .u-text-style-tiny { line-height: 1.5; }

/* Dropdown-Pfeile im Desktop-Menue etwas kleiner (Groesse nur ueber font-size,
   transform bleibt unberuehrt - sonst verliert das Icon seine Drehung nach unten) */
@media (min-width: 1120px) {
  .nav_links_link .w-icon-dropdown-toggle,
  .w-dropdown-toggle .w-icon-dropdown-toggle { font-size: 0.78em; }
  .nav_links_link svg:not(.u-svg-large),
  .nav_links_icon svg { width: 78%; height: 78%; }
}

/* ---- Report a bug: Sprachhinweis unter dem Formular (Robert 25.08.) ---- */
.report_form-langnote {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.02);
}
.report_form-langnote_title { margin: 0; }
.report_form-langnote_text { margin: 0; }

/* ---- Mobile: Report-Formular einspaltig (Webflow haelt 1fr 1fr bis 390px) ---- */
@media (max-width: 640px) {
  .report_2-col { grid-template-columns: 1fr !important; }
  .report_2-col > * { grid-column: 1 / -1 !important; }
}

/* ---- News-Karten: Teaser auf 3 Zeilen begrenzen, damit die Karten trotz
   unterschiedlich langer Uebersetzungen gleich hoch bleiben ---- */
.news_overview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* ---- Formularfelder: Eingabe und Platzhalter linksbuendig (Webflow zentriert
   die einzeiligen Felder, Robert 25.08.) ---- */
.form_main_field,
input.form_main_field,
textarea.form_main_field,
select.form_main_field,
.w-form input,
.w-form textarea,
.w-form select {
  text-align: left;
}
.form_main_field::placeholder,
.w-form input::placeholder,
.w-form textarea::placeholder { text-align: left; }

/* ---- Logo-Banner: einheitlich in Graustufen (Robert 25.08.). Die alten Logos
   liegen bereits entsaettigt vor, neue kommen oft farbig - der Filter haelt das
   Band automatisch einheitlich, ohne dass jede Datei nachbearbeitet werden muss. ---- */
.logo_collection_item img {
  filter: grayscale(1);
}

/* ---- Versicherungsseite, Ecosystem-Grafik: Titel und Beschreibung der vier
   Knoten sind absolut positioniert mit festem Abstand (title top 0, body top
   3.23em). Bricht der Titel auf zwei Zeilen um - auf Deutsch "Immobilien &
   Handwerk", auf Franzoesisch aehnlich - laeuft die zweite Zeile in den Text
   darunter. Figma haelt den Titel einzeilig, also erzwingen wir das ebenfalls:
   nowrap macht den Ueberlauf messbar, das Grafik-Auto-Fit verkleinert die
   Schrift dann so weit, bis der Titel in seine Spalte passt. ---- */
.ins_eco_title span {
  white-space: nowrap;
}

/* ---- Navigation eine Stufe groesser (Fred im Review, Robert 04.09.).
   Die Menuezeile haengt an .nav_links_component und stand auf text-tiny, also
   0.75rem = 12px. Eine Stufe hoeher im bestehenden Typo-System ist text-small
   mit 0.875rem = 14px. Bewusst ueber die Systemvariable und nicht ueber einen
   festen Pixelwert, damit die Skala unangetastet bleibt. Die Dropdown-Links
   erben von hier, sie brauchen keine eigene Regel. ---- */
.nav_links_component {
  font-size: var(--_typography---font-size--text-small);
}

/* ---- Ueber uns, Philosophie-Grafik: die Beschriftung unter den vier Knoten
   sitzt in einem Kreis mit fester Groesse und max-width 11em. Deutsche
   Komposita wie "Immobilienbewirtschafter" sind als ein Wort breiter als der
   Kreis und stehen dann seitlich heraus - das Grafik-Auto-Fit greift hier
   nicht, weil es die Zeilenbreite misst und nicht das einzelne Wort. Trennung
   erlauben statt Ueberlauf. ---- */
.abo_philos_node_sub,
.abo_philos_node_title {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ---- Netzwerk-Kacheln, Versicherungsseite: Ueberschriften auf gleicher Hoehe
   (Mehdi im Slack, Robert 04.09.). Die Karte war flex-column mit
   justify-content: space-between - das Icon oben, der Textblock unten. Bei
   gleich hohen Karten im Raster wird ein kuerzerer Textblock damit nach unten
   gedrueckt, und seine Ueberschrift sitzt tiefer als die der Nachbarn. Genau
   das passiert bei "Legal Advice" mit zwei statt drei Zeilen Flisstext.
   Oben ausrichten statt unten: der Abstand zwischen Icon und Text kommt dann
   aus dem gap der Karte und ist ueberall gleich gross. ---- */
.networks_card {
  justify-content: flex-start;
}

/* ---- Dienstleisterseite, Ueberschrift "Ihre Vorteile als Dienstleister":
   einzeilig statt umgebrochen (Mehdi im Slack).
   Gemessen bei 40px Schriftgroesse, was die Zeile in einem Zug braucht:
   DE-CH 516px, EN 528px, FR 687px, IT 703px. Die Systembreite liegt bei
   527.75px - Englisch scheitert also an einem Viertelpixel, Franzoesisch und
   Italienisch deutlich. 45rem gibt allen vieren Platz und haelt die Zeile
   trotzdem kuerzer als der 1280px breite Container, damit die Zeilenlaenge
   lesbar bleibt. Bewusst nur diese eine Section, das Typo-System bleibt
   unangetastet. Unterhalb der Umbruchbreite greift ohnehin
   u-max-width-unset-mobile. ---- */
.k-benefit_layout .section_header .c-heading {
  max-width: min(100%, 45rem);
}

/* ---- Inter selbst ausliefern (Robert 04.09.).
   Der Webflow-Export lud die Schrift ueber WebFont.js von Google: drei Verbindungen zu
   Google pro Seitenaufruf, jede davon mit der IP-Adresse des Besuchers. Fuer eine Seite,
   deren Kernmarkt Deutschland und die Schweiz ist, ist das die bekannteste vermeidbare
   Datenuebermittlung ueberhaupt. Jetzt liegt Inter als Variable Font auf unserer eigenen
   Domain, vier Dateien mit den unicode-ranges aus dem fontsource-Paket, damit der Browser
   nur laedt was der Text tatsaechlich braucht. Familienname bewusst "Inter": so greift er
   ueberall, wo das portierte CSS Inter schreibt, ohne dass eine Variable angefasst wird. ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-latin-ext-italic.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-latin-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ------------------------------------------------------------------
   Mobile-Korrekturen aus dem Kunden-Review vom 07.09.2026
   ------------------------------------------------------------------ */

/* 1. Schwebende Deko im Testimonial-Bereich.
   Auf dem Telefon liegt der Dekowuerfel genau auf der Ueberschrift: gemessen bei
   390px ueberdeckt .testimonial_decor_wrap (99-173px) die Zeile "Success Stories"
   (47-177px) beziehungsweise "Das sagen unsere Dienstleister". Ab 768px stehen die
   beiden nebeneinander, dort bleibt die Deko deshalb stehen.
   Rein dekorative Elemente, kein Inhaltsverlust. */
@media screen and (max-width: 767px) {
  /* Die Varianten muessen einzeln genannt werden. Das Stylesheet des Exports blendet
     .testimonial_decor_wrap ab 991px selbst aus, holt die Varianten .is-solutions und
     .is-about direkt danach aber mit display:block zurueck. Eine Regel auf die
     Basisklasse allein verliert gegen diese hoehere Spezifitaet - genau daran ist mein
     erster Versuch gescheitert, sichtbar nur an display:block im Browser. */
  .testimonial_decor_wrap,
  .testimonial_decor_wrap.is-solutions,
  .testimonial_decor_wrap.is-about,
  .testimonial_cube-small {
    display: none;
  }
}

/* 2. Ablauf-Kacheln ragten auf dem Telefon aus dem Bildschirm.
   Ursache ist nicht die Rasterspalte, sondern der Standardwert min-width:auto auf
   den Flex- und Grid-Kindern: die Kachel darf dadurch nie schmaler werden als ihr
   min-content, und das war mit Grafik plus Text 403px breit bei 330px Container.
   Gemessen: rechte Kante bei 433px auf einem 390px-Bildschirm, also 43px abgeschnitten.
   Mit min-width:0 duerfen die Kinder schrumpfen, der Text bricht normal um.
   Bis 991px gesetzt, weil dort die einspaltige Fassung beginnt; wo nichts ueberlaeuft,
   aendert die Regel nichts. */
@media screen and (max-width: 991px) {
  .hit_list,
  .hit_item,
  .hit_context {
    min-width: 0;
  }
}