/* Einheitliche maximale Seitenbreite (nicht aus Webflow, eigene Ergänzung).
   Ab 1440px Fensterbreite wächst die Seite nicht weiter mit, sondern sieht überall
   genau so aus wie das Webflow-Design bei 1440px (dafür sind alle Layouts gebaut).
   --page-max = Breite des Inhalts (1440px minus 2 × 4rem Seitenabstand). */
:root { --page-max: 1312px; }
.main-wrapper { max-width: calc(var(--page-max) + 8rem); margin-left: auto; margin-right: auto; }
.nav-bar .container-xlarge-2 { max-width: var(--page-max); }
.footer .container-xlarge { max-width: var(--page-max); }

/* Korrekturen bestehender Webflow-Fehler (auch auf der alten Live-Seite vorhanden) */
/* Startseite: Team-Text war fest 740px breit und ragte rechts aus dem Bild (horizontaler Scroll) */
@media screen and (min-width: 992px) {
  .home-team-grid-right { flex: 1 1 0; min-width: 0; }
}
/* Über uns: Gründer-Überschrift hatte feste Breite 1632px und ragte rechts aus dem Bild */
.section-header .text-align-center-2 { width: auto; max-width: 100%; }
/* Cookie-Banner immer über allem (Sprachauswahl im Footer lag davor) */
.cookie_banner { z-index: 10000; }
/* Button-Texte nie umbrechen */
.button-inner-text-3 { white-space: nowrap; }

/* Ab 1440px: Raster-Spalten exakt nach Anteil verteilen. Webflow nutzt dort fr-Spalten, die sich
   bei langen Wörtern ungleich aufblähen (z. B. ungleich breite Service-Karten auf der Startseite).
   minmax(0, …) verteilt den Platz so, wie es im Original bei etwas breiteren Fenstern aussieht. */
@media screen and (min-width: 1440px) {
  .grid-4-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .grid-6-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .grid-6-cards._1280 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .home-team-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .kontakt-grid { grid-template-columns: minmax(0, .25fr) minmax(0, .75fr); }
  .layout-text-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .project-intro-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .project-teaser-horizontal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .section-hubs { grid-template-columns: minmax(0, .25fr) minmax(0, .75fr); }
  .section-projects-intro { grid-template-columns: minmax(0, .25fr) minmax(0, 1fr); }
  .section-testimonial-grid.padding-top { grid-template-columns: minmax(0, .25fr) minmax(0, 1fr); }
  .service-grid---2-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .service-grid---3-columns-steps,.tool-list-2-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .service-grid---4-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  /* Ausnahmen: lange Einzelwörter ("Arbeitgebermarke", "verwirklichen") brauchen hier die Mindestbreite. */
  .service-grid---4-columns.padding-top._4rem { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .services-full-teaser { grid-template-columns: minmax(0, .5fr) minmax(0, 1fr); }
  .services-hero-grid { grid-template-columns: minmax(0, .5fr) minmax(0, 1fr); }
  .services-kontakt-uberuns-grid { grid-template-columns: minmax(0, .35fr) minmax(0, .75fr); }
  .stat-grid---4-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .strategie-container.padding-top._2rem { grid-template-columns: minmax(0, .25fr) minmax(0, .75fr); }
  .text-left---image-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .text-left---image-right { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .tool-list-2-columns.padding-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tool-list-3-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .tool-list-3-columns.padding-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .tool-list-4-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .warum-uberneu-grid { grid-template-columns: minmax(0, .5fr) minmax(0, 1fr); }
  .warum-uberneu-grid._1280 { grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); }
  .home-teaser { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
}

/* Service-Seiten: Hero-Bild ab 1440px bündig zur Navigation und größer
   (Wunsch Sebastian, 13.11.). Textspalte bleibt an ihrer Position. */
@media screen and (min-width: 1440px) {
  .services-hero-grid {
    grid-template-columns: minmax(0, 448fr) minmax(0, 832fr);
    align-items: center;
  }
  .services-hero-grid .image-wrapper-service-hero { aspect-ratio: 7 / 10; height: auto; }
}

/* Projektübersicht: ganze Projektfläche klickbar (Link des „Weiter zum Projekt“-Buttons
   wird per ::after über die ganze Karte gelegt). */
.project-teaser-horizontal { position: relative; cursor: pointer; }
.project-teaser-horizontal a.button { position: static; }
.project-teaser-horizontal a.button::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Sprachauswahl: hellgrauer Hover-Hintergrund über die ganze Zeile (inkl. Flagge).
   Die Flaggen stehen in einer eigenen Spalte, darum ragt der Link nach links darunter. */
.navbar1_dropdown-list .flag-wrapper,
.navbar1_dropdown-list-footer .flag-wrapper { position: relative; z-index: 1; pointer-events: none; }
.navbar1_dropdown-list .w-locales-item a,
.navbar1_dropdown-list-footer .w-locales-item a {
  display: block;
  margin: 0 -.5rem 0 calc(-16px - 1.1rem);
  padding: 0 .5rem 0 calc(16px + 1.1rem);
  border-radius: 6px;
  transition: background-color .15s ease;
}
.navbar1_dropdown-list .w-locales-item a:hover,
.navbar1_dropdown-list-footer .w-locales-item a:hover { background-color: #f2f2f2; }
.navbar1_dropdown-list .w-locales-list,
.navbar1_dropdown-list-footer .w-locales-list { flex: 1; }
.navbar1_dropdown-list .locales-content,
.navbar1_dropdown-list-footer .locales-content { flex: 1; }

/* Ab 1440px: Inhalte bündig zur Navigation (Wunsch Sebastian, 13.11.).
   Webflow rückt .container-xlarge dort zusätzlich um 4rem ein; Navigation, Footer-Linie
   und Abschnitte unter 1440px tun das nicht. */
@media screen and (min-width: 1440px) {
  .container-xlarge { padding-left: 0; padding-right: 0; }
}

/* Text-Slider auf den Service-Seiten („In 4 Schritten …“): Webflow gibt den Folien eine feste
   Höhe (400/420px), längerer Text wurde abgeschnitten (auch im Original). Höhe wächst jetzt mit,
   Pfeile/Punkte stehen darunter. */
@media screen and (min-width: 992px) {
  .slider.services .slider-content { height: auto; min-height: 400px; padding-bottom: 2rem; }
}
@media screen and (min-width: 1440px) {
  .slider.services .slider-content { min-height: 420px; }
}
.slider.services .slider-content { height: auto; }
@media screen and (max-width: 991px) {
  .slider.services .slider-content { padding-bottom: 4rem; }
}


/* Service-Seiten: weniger Abstand zwischen Navigation und Hero (Wunsch Sebastian, 13.11.). */
.section-hero .padding-top._2rem:has(.services-hero-grid) { padding-top: 2rem; }

/* Über uns, Hero: Scroll-Animation der Bildspalten startet sofort beim ersten Scrollen,
   nicht erst, wenn der Hero die Navigation erreicht (Trigger lag ~93px unter dem Fold). */
@media screen and (min-width: 768px) {
  .header80_ix-trigger { margin-top: calc(100vh - 100px); }
}

/* FAQ: auf allen Bildschirmgrößen nur 8 Fragen + „Weitere Fragen anzeigen“ (siehe assets/js/uberneu-faq.js). */
.faq-collapsible:not(.is-expanded) .faq-extra { display: none; }
.faq-more { display: inline-block; justify-self: start; align-self: flex-start; width: auto; max-width: 100%; margin-top: 2rem;
  padding: .75rem 1.5rem; overflow: visible; white-space: nowrap; cursor: pointer; border: 1px solid currentColor; border-radius: 999px;
  background: transparent; color: inherit; font: inherit; font-size: 1rem; line-height: 1.4; letter-spacing: .02em; transition: background-color .2s; }
.faq-more:hover { background: #f2f2f2; }

/* Stufen-Karten (Digitale Strategie): feste vh-Höhen ließen Text bei
   niedrigen Fenstern überlaufen. Treppe jetzt über Abstand oben,
   Höhe wächst mit dem Inhalt. */
@media screen and (min-width: 992px) {
  .service-grid---3-columns-steps .card.step1,
  .service-grid---3-columns-steps .card.step2,
  .service-grid---3-columns-steps .card.step3 { height: auto; align-self: stretch; }
  .service-grid---3-columns-steps .card.step1 { margin-top: 8rem; }
  .service-grid---3-columns-steps .card.step2 { margin-top: 4.5rem; }
  .service-grid---3-columns-steps .card.step3 { min-height: 50vh; }
}
@media screen and (min-width: 1440px) {
  .service-grid---3-columns-steps .card.step3 { min-height: min(55vh, 600px); }
}

/* Footer-Sprachauswahl: weißer Chevron dreht sich bei Hover/geöffnet wie in der Nav. */
.navbar1_dropdown-toggle.footer .navbar-menu-item-icon { transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.w-dropdown:hover > .navbar1_dropdown-toggle.footer .navbar-menu-item-icon,
.navbar1_dropdown-toggle.footer.w--open .navbar-menu-item-icon { transform: rotate(-180deg) !important; }

/* Fließtext „text-size-large“: ab 1440px nicht mehr 1.5rem, sondern wie die Intro-Texte 1.2rem
   (Slider, „Und wie geht's weiter?“, Full-Service usw.). Zentrierte Intro-Varianten bleiben. */
@media screen and (min-width: 1440px) {
  .text-size-large:not(.centered),
  .text-size-large.relative,
  .text-size-large.bottom-margin { font-size: 1.2rem; }
}

/* FAQ-Fragen etwas dünner (Webflow: 600). */
.accordion-title { font-weight: 500; }

/* Lottie-Animationen in den Slidern größer: Spalte ausnutzen statt 20vw/288px. */
@media screen and (min-width: 992px) {
  .slider-content .right .lottie-animation { width: min(100%, 440px); }
}

/* Kontakt-Block: gleiche Spalten wie das FAQ darüber (1:2, 2rem Abstand), damit Formular und FAQ bündig sind. */
@media screen and (min-width: 992px) {
  .services-kontakt-services-grid { grid-template-columns: minmax(0, .5fr) minmax(0, 1fr); column-gap: 2rem; }
  .services-kontakt-services-grid h2 { hyphens: auto; -webkit-hyphens: auto; }
}

/* FAQ: Frage und Plus-Icon auf einer Mittelachse. */
.accordion-title-grid { align-items: center; }
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .services-kontakt-services-grid h2 { font-size: 2.2rem; }
}

/* Bildmaße (scripts/add_img_dimensions.py): width/height-Attribute liefern nur das
   Seitenverhältnis für den Browser (weniger Layout-Verschiebung). Die Darstellung
   bestimmen weiter die Webflow-Klassen; :where() hat Spezifität 0. */
:where(img[data-dims="wh"], img[data-dims="h"]) { height: auto; }
:where(img[data-dims="wh"], img[data-dims="w"]) { width: auto; }

/* Cookie-Banner: „Selbst wählen“-Bereich schon vor dem Start der Webflow-Interaktionen
   zugeklappt (gleicher Startwert wie die Interaktion, Muster wie Webflows eigene
   html.w-mod-js:not(.w-mod-ix)-Regeln). Sonst ist der Banner beim Laden erst ~460px
   höher und springt dann zusammen (Layout-Verschiebung/CLS). */
html.w-mod-js:not(.w-mod-ix) #cookie-options { height: 0; }

/* Schriften als WOFF2 (ca. 30 statt 95 KB je Schnitt). Überschreibt die TTF-@font-face-Regeln
   aus dem Webflow-CSS (gleiche Familie/Stärke, spätere Regel gewinnt, TTF wird nicht mehr geladen). */
@font-face { font-family: Manrope; src: url(/assets/68ad658bc08663c717c4e7b0_Manrope-ExtraLight.woff2) format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: Manrope; src: url(/assets/68ad658b04faba0092fcad48_Manrope-Light.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: Manrope; src: url(/assets/68ad658bb9b90ea9715a066b_Manrope-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Manrope; src: url(/assets/68ad658b532db4e79e3e44a9_Manrope-ExtraBold.woff2) format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: Manrope; src: url(/assets/68ad658bc49f40ed40636689_Manrope-SemiBold.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Manrope; src: url(/assets/68ad658bea0dce58d0cef37b_Manrope-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: Manrope; src: url(/assets/68ad658bbb55c71c00524b32_Manrope-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* Cookie-Banner auf Mobil kompakter (Sebastian 13.11.): kleinere Überschrift und Text,
   „Alle akzeptieren“ volle Breite, „Ablehnen“ + „Selbst wählen“ nebeneinander. Desktop unverändert. */
@media screen and (max-width: 767px) {
  .cookie_banner { padding: 1.25rem; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); overflow-y: auto; }
  .cookie_banner h3 { font-size: 1.375rem; line-height: 1.2; margin-bottom: .5rem; }
  .cookie_banner .cookie_content > p { font-size: .875rem; line-height: 1.45; margin-bottom: .25rem; }
  .cookie_banner .textlink { font-size: .875rem; }
  .cookie_buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1rem; }
  .cookie_buttons > #btn-accept-all { grid-column: 1 / -1; }
  .cookie_buttons > .button_primary, .cookie_buttons > .button_secondary { padding: 12px 12px 13px; font-size: .9375rem; }
  .cookie_options { margin-top: 1rem; gap: .5rem; }
  .cookie_checkbox .w-form-label { font-size: .9375rem; line-height: 1.35; }
  #btn-accept-some { margin-top: 1rem; padding: 12px 12px 13px; }
}

/* Footer-Unterzeile war ein <h6> (falsche Überschriften-Reihenfolge, Lighthouse/Screenreader),
   jetzt <p>. Diese Regel hält die bisherige h6-Darstellung (ab 480px 18px / 1.3). */
@media screen and (min-width: 480px) {
  p.subline { font-size: 18px; line-height: 1.3; }
}

/* Startseite, Hero „uber…“: ab 1440px etwas kleiner (Webflow 10rem = 160px), damit lange
   Wörter wie „innovativ“ nicht ins Bild rechts laufen (Sebastian 13.11.). */
@media screen and (min-width: 1440px) {
  .herofont.extralight { font-size: 8.5rem; margin-left: -8px; }
}

/* Logo im Header: Bildmarke und Schriftzug auf eine Mittelachse. Ohne diese Regel
   streckt Chrome den Schriftzug auf die Höhe der Bildmarke (SVG mittig), Safari
   dagegen behält die Höhe aus dem Seitenverhältnis und setzt ihn oben an. */
.nav-logo-link { align-items: center; }