/* ============================================================
   GIS Gruppe Nord · handgeschriebene Ergaenzungen
   Angelegt beim Ausbau der Webflow-Runtime (19.08.2026).
   Wird nach den uebrigen Stylesheets geladen - alles, was von
   Hand dazukommt, gehoert hierher und nicht in die grossen,
   aus Webflow exportierten Dateien.
   ============================================================ */

/* Menue-Button (mobil): Icon wechselt zwischen Hamburger und Kreuz.
   Das Kreuz-Icon liegt im Markup, wurde vorher aber nie eingeblendet. */
.menu-button.w--open .menu-button-inner.open { display: none; }
.menu-button.w--open .menu-button-inner.close { display: flex; }

/* Weiches Scrollen zu Anker-Zielen.
   Kam vorher aus der Webflow-Runtime; der Browser kann das selbst. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Die Navigation ist fixiert (83px hoch, 24px vom Rand). Ohne diesen
   Abstand verschwindet der Anfang eines Abschnitts darunter. */
section[id] { scroll-margin-top: 124px; }

/* Sprachumschalter, wenn er im mobilen Menue sitzt (siehe
   initSwitcherPlacement in site.js): eigene Zeile, aber kompakt wie
   in der Kopfleiste - volle Breite wirkt wie ein leeres Eingabefeld. */
.switcher-im-menue { width: 100%; padding-top: 4px; text-align: left; }
.switcher-im-menue .switcher-16_dropdown {
  /* .w-dropdown zentriert sich per margin:auto - hier links buendig zu den Menuepunkten */
  margin-left: 0;
  margin-right: auto;
}

/* Die Eintraege im Sprachumschalter sind <button>, damit ein Klick die
   Seite umschaltet statt zum Seitenanfang zu springen. Buttons erben
   Schrift und Breite nicht von selbst - das hier holt das nach.
   Farbe und Innenabstand kommen weiterhin aus .switcher-16_link. */
.switcher-16_list .switcher-16_link {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
}

/* In der Kopfleiste haengt die Sprachliste nach links (right:0), damit sie
   nicht rechts aus dem Bild laeuft. Im Menue sitzt der Umschalter aber links -
   dort muss sie andersherum ausgerichtet sein. */
.switcher-im-menue .switcher-16_list {
  right: auto;
  left: 0;
}

/* Der Kontaktblock im Fuss steht in einem zweispaltigen Raster, ist aber nur
   eine Kachel breit - dadurch brach die E-Mail-Adresse auf zwei Zeilen um.
   Eine Spalte gibt der Kachel die volle Breite der Fuss-Haelfte. */
.footer-info-block { grid-template-columns: 1fr; }
.footer-contact-list a { white-space: nowrap; }

/* E-Mail-Adresse auf den Ansprechpartner-Karten: anklickbar, aber optisch
   ruhig wie die Telefonnummer daneben. */
.support-card-bottom-tile a { color: inherit; }

/* Sprachumschaltung (siehe js/i18n.js): Hat der Besucher zuletzt English
   gewaehlt, bleibt die Seite verdeckt, bis die Texte getauscht sind -
   sonst blitzt kurz Deutsch auf. Die Klasse faellt spaetestens nach 3 s. */
html.i18n-pending body { visibility: hidden; }


/* Ueber uns / "Eine Allianz der Unternehmen": Text und Netzwerk-Grafik
   stehen im Webflow-Export in einem festen 2-Spalten-Raster ohne
   Mobil-Regel. Unter 992px untereinander, Grafik zentriert unter dem Text. */
@media (max-width: 991px) {
  .div-block-2 { grid-template-columns: 1fr; }
  .headline-customer-support-copy { max-width: none; margin-bottom: var(--spacing--32); }
  .text-wrap-customer-support-copy { max-width: none; }
}

/* Referenzen-Slider, Variante E "Seitenpfeile" (15.09.2026): grosse helle
   Pfeile mittig links/rechts statt klein oben rechts. Auf Touch-Geraeten
   keine Pfeile - dort wird gewischt, die angeschnittene naechste Karte
   zeigt, dass es weitergeht. Entwurf: _dev/projekte-varianten/ */
#Referenzen .slider-button-top-right,
#Referenzen .slider-button-top-right.prev {
  inset: 50% auto auto auto;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  transform: translateY(-50%);
  z-index: 6;
}
#Referenzen .slider-button-top-right.prev { left: -16px; }
#Referenzen .slider-button-top-right:not(.prev) { right: -16px; }
#Referenzen .button-slider {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid rgba(37, 43, 69, 0.08);
  border-radius: 8px;
  background-color: #f6f3ec;
  color: #e4051f;
  box-shadow: 0 12px 32px -8px rgba(8, 11, 20, 0.6);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#Referenzen .button-slider:hover { background-color: rgba(246, 243, 236, 0.88); }
#Referenzen .icon-slider-button path { stroke-width: 2px; }
#Referenzen .w-slider-arrow-left:focus-visible .button-slider,
#Referenzen .w-slider-arrow-right:focus-visible .button-slider { outline: 2px solid #e4051f; outline-offset: 3px; }
/* Bilder nicht als Datei ziehen, sonst bricht Wischen mit der Maus ab */
#Referenzen .card-feature img { -webkit-user-drag: none; user-select: none; }

/* Wischen (site.js, Pointer-Events): ohne pan-y uebernimmt der Browser
   horizontale Gesten selbst (pointercancel), der Slider bekommt nichts mit. */
.w-slider-mask { touch-action: pan-y; }

@media (max-width: 767px) {
  /* Platz ueber dem Slider war fuer die alten Pfeile reserviert */
  #Referenzen .headline-home-a-features { margin-bottom: var(--spacing--64); }
  #Referenzen .mask-features { max-width: 84%; }
  #Referenzen .slide-feature { height: 420px; }
  /* Mobil nur wischen: Pfeile laegen ueber dem Kartentext. Nicht nur per
     Touch-Abfrage unten, manche Handy-Browser melden hover/fine pointer. */
  #Referenzen .slider-button-top-right { display: none; }
}
@media (hover: none) and (pointer: coarse) {
  #Referenzen .slider-button-top-right { display: none; }
}