/* Eigene Ergänzungen nach den Odoo-CSS-Bundles.
   Wichtig: stellt sicher, dass animierte Elemente ohne JS sichtbar bleiben
   (Odoo setzt .o_animate auf visibility:hidden und blendet per JS ein). */
.o_animate {
  visibility: visible;
}

/* Odoo versteckt das Hauptmenü per `o_menu_loading` (opacity:0) bis sein
   JS geladen hat. Ohne dieses JS muss das Menü dauerhaft sichtbar sein. */
.navbar #top_menu.o_menu_loading {
  opacity: 1 !important;
  overflow: visible !important;
}

/* Event-Karten (Übersicht): Cover-Bild braucht eine feste Höhe, sonst
   kollabiert der absolut positionierte Bildbereich – besonders auf dem Handy
   (dort kollabierte die ganze Karte auf 0). Volle Kartenbreite, feste Höhe. */
.o_wevent_events_list .o_record_cover_container {
  height: 200px;
  width: 100%;
}

/* Handy/Tablet: Abstand zwischen dem orangen Philosophie-Block und der
   Grafik "Komplexität zusammen neu denken" (kleben sonst direkt aneinander). */
@media (max-width: 991.98px) {
  #Was-machen-wir {
    padding-top: 2.5rem !important;
  }
}

/* Handy/Tablet: Illustrationen in den Karussells "Unsere Schwerpunkte" und
   "Methoden & Formate" auch mobil anzeigen (Odoo blendet sie <992px aus),
   zentriert und mit etwas Abstand unter dem Text. */
@media (max-width: 991.98px) {
  #myCarousel1705669507672 .col-lg-4.d-none.d-lg-block,
  #myCarousel1705924588258 .col-lg-6.d-none.d-lg-block {
    display: block !important;
    order: -1; /* Illustration über den Text stellen */
  }
  #myCarousel1705669507672 .col-lg-4.d-none.d-lg-block img,
  #myCarousel1705924588258 .col-lg-6.d-none.d-lg-block img {
    display: block;
    width: 80%;
    max-width: 320px;
    height: auto;
    margin: 0.5rem auto 1.5rem;
  }
}

/* Handy: Branchen "Mit wem wir arbeiten" als sauberer Slider (Odoo blendet
   sie <768px aus). Eine Branchengruppe pro Folie, Icon über dem Text,
   3 pro Reihe, durchwischbar mit Punkten zur Navigation. */
@media (max-width: 767.98px) {
  .eqw-branchen.d-none {
    display: block !important;
  }
  .eqw-branchen .row.content {
    justify-content: center;
  }
  .eqw-branchen .carousel-content {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    padding: 10px 4px;
  }
  .eqw-branchen .carousel-content p {
    text-align: center;
    margin: 0;
  }
  .eqw-branchen .carousel-content img {
    display: block;
    margin: 0 auto 6px;
    max-width: 46px;
    height: auto;
  }
  .eqw-branchen .carousel-content span {
    font-size: 13px !important;
  }
  /* Slider-Aufbau: Inhalt oben, Navigations-Punkte klar sichtbar darunter.
     (Bootstrap-Punkte sind weiß -> auf hellem Grund unsichtbar, daher einfärben.) */
  .eqw-branchen .carousel {
    display: flex;
    flex-direction: column;
  }
  .eqw-branchen .carousel-inner {
    order: 1;
  }
  .eqw-branchen .carousel-indicators {
    order: 2;
    position: static;
    margin: 0.9rem auto 0;
  }
  .eqw-branchen .carousel-indicators li {
    background-color: #AC6C53;
    opacity: 0.35;
    width: 9px;
    height: 9px;
    border-radius: 50%;
  }
  .eqw-branchen .carousel-indicators li.active {
    opacity: 1;
  }
}

/* Handy/Tablet: Zu:kunft-Initiativen als klar getrennte Karten darstellen.
   Sonst verschmelzen v. a. die beiden hellblauen Kacheln ("Gemeinsam …" und
   "Hilfe für Sisyphos") ineinander. */
@media (max-width: 991.98px) {
  [data-name="Big Boxes 1"] .col-lg-6,
  [data-name="Big Boxes 2"] .col-lg-6 {
    margin: 0.6rem 1rem;
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
}

/* "Dann hier lang"-Buttons (btn-primary flat): sauberer Abstand statt
   Überlappung beim Umbruch; auf dem Handy als gestapelte, gleich breite Buttons. */
.btn.btn-primary.flat {
  display: inline-block;
  margin: 0.3rem 0.5rem 0.3rem 0;
  vertical-align: top;
  white-space: normal;
}
@media (max-width: 767.98px) {
  .btn.btn-primary.flat {
    display: block;
    width: 100%;
    margin: 0.5rem 0 0;
    text-align: center;
  }
}

/* Seminarlocations-Button in Markenorange statt Braun: gleich prominent wie die
   drei "Academy"-Buttons, hebt sich aber als eigene Aktion farblich ab. */
a.btn.btn-primary.flat[href="/seminarlocations"] {
  background-color: #ED7031 !important;
  border-color: #ED7031 !important;
  color: #fff !important;
}
a.btn.btn-primary.flat[href="/seminarlocations"]:hover,
a.btn.btn-primary.flat[href="/seminarlocations"]:focus {
  background-color: #d75f22 !important;
  border-color: #d75f22 !important;
}

/* Hero-Überschriften: auf schmalen Bildschirmen dürfen sehr lange Wörter
   (feste Odoo-Pixelgrößen) nicht abgeschnitten werden. js/fit-hero.js
   verkleinert sie passend; dieser CSS-Fallback erlaubt zusätzlich das
   Umbrechen/Trennen sehr langer Wörter, falls das JS mal verzögert läuft. */
@media (max-width: 991.98px) {
  .s_cover,
  .o_cover {
    overflow-x: hidden;
  }
  /* Lange (oft zusammengesetzte deutsche) Wörter in Überschriften dürfen auf
     schmalen Bildschirmen nicht rausragen. Greift für alle Überschriften –
     auch außerhalb der Hero-Cover, z. B. in .s_banner/.jumbotron. */
  h1,
  h2,
  h3,
  h4,
  .s_cover p,
  .s_cover span,
  .o_cover p,
  .o_cover span {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
}

/* Odoo-Inhaltsbilder (o_we_custom_image, z. B. in den Termine-/Seminar-Blöcken):
   Diese haben img-fluid (max-width:100%) zusammen mit einem seitlichen Rand
   (m-3 = 1rem). max-width:100% rechnet den Rand nicht mit ein, deshalb wird das
   Bild volle Spaltenbreite PLUS Rand, ragt seitlich über die Spalte hinaus und
   wirkt nach links bzw. rechts verschoben. Auf Handy/Tablet als sauber
   zentrierten Block darstellen, damit es exakt in die Spalte passt. Betrifft
   alle Seminar-/Academy-Seiten mit diesem Aufbau. */
@media (max-width: 991.98px) {
  .o_we_custom_image {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Odoo gibt Text mit Hintergrundfarbe einen Innenabstand (padding), damit die
   Markierung „Luft" hat. Bei background-color: inherit gibt es aber gar keine
   sichtbare Markierung – das padding-left erzeugt dann nur einen unerwünschten
   ~6px-Einzug am Zeilen-/Absatzanfang, der Text wirkt nicht linksbündig.
   Für diese unsichtbaren Fälle den Abstand entfernen. */
font[style*="background-color: inherit"],
span[style*="background-color: inherit"] {
  padding: 0 !important;
}

/* Der eigentliche Scroll-Container der Seite ist #wrapwrap. Einzelne
   Odoo-Zeilen (row mit Negativ-Rändern ohne Container, z. B. Termine auf
   /klimaakademie) ragen ~15px über den Rand — auf der Odoo-Seite hat das
   body-CSS das versteckt. Horizontal deshalb abschneiden statt scrollen;
   vertikales Scrollen und der sticky Header bleiben unberührt. */
#wrapwrap {
  overflow-x: hidden;
}

/* Header (oranger Banner + Navigation) beim Scrollen oben fixiert — auf allen
   Seiten, PC und Handy (auf dem Handy ist der Banner ohnehin ausgeblendet,
   dort klebt nur die Logo-/Menüleiste). Der Scroll-Container der Seite ist
   #wrapwrap (Odoo-Layout: html/body sind overflow:hidden), daher haftet der
   Header per position:sticky an dessen Oberkante. Weißer Hintergrund als
   Fallback, damit nichts durchscheint. */
header#top {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
}
/* Anker-Sprünge (z. B. /#philosophie) nicht unter dem fixierten Header
   landen lassen — Versatz in Höhe des Headers. */
#wrapwrap {
  scroll-padding-top: 160px;
}
@media (max-width: 991.98px) {
  #wrapwrap {
    scroll-padding-top: 100px;
  }
}

/* Startseite: Zwischen dem Schwerpunkte-Karussell und "Unsere Methoden &
   Formate" war 0px Abstand — die Abschnitte klebten aneinander. Luft nach
   oben für den Methoden-Abschnitt (PC und Handy). */
#Unsere-Methoden-und-Formate {
  padding-top: 2.25rem;
}
@media (max-width: 767.98px) {
  #Unsere-Methoden-und-Formate {
    padding-top: 1.5rem;
  }
}

/* Desktop-Navigation: Menüs öffnen per Maus-Rollover statt Klick (wie im
   Odoo-Original — dort erledigte das Odoos JS, siehe o_hoverable_dropdown am
   Header). margin-top:0 schließt die kleine Lücke zwischen Menüpunkt und
   Aufklappliste, sonst klappt sie auf dem Mausweg dorthin wieder zu.
   Nur ≥992px — am Handy bleibt das Antippen. */
@media (min-width: 992px) {
  #top_menu .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

/* Projektbeispiel-Kästen (alle Bildschirmgrößen): waren unterschiedlich breit
   (je nach Textlänge) und klebten ohne Abstand aneinander. Als einheitliche,
   gleich breite Liste mit sauberem Abstand und weichen Ecken darstellen.
   Auf dem PC begrenzt max-width die Kästen auf eine angenehme Breite
   (zentriert in der Spalte); auf dem Handy füllen sie die volle Breite. */
main .btn.btn-primary.btn-sm,
main .btn.btn-outline-primary.btn-sm {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 0 0.5rem; /* linksbündig zum Text (kein auto-Zentrieren) */
  padding: 0.25rem 0.75rem;
  font-size: 13px;
  text-align: center;
  border-radius: 6px;
  white-space: normal;
}
/* In ZENTRIERTEN Kontexten (Termin-/Academy-Seiten: "Anmeldung" unter den
   Terminreihen) dagegen mittig und schmaler — passend zum zentrierten Text.
   Achtung: Die text-center-Spaltenklasse allein reicht nicht als Merkmal —
   auch die Projektbeispiel-Spalten tragen sie, richten ihre Absätze aber per
   Inline-Stil links aus. Deshalb greift dies nur, wenn der Absatz KEINEN
   eigenen text-align-left-Stil hat (= Text ist wirklich zentriert).
   Gilt auf allen Bildschirmgrößen (überstimmt auch die Handy-Vollbreite). */
main .text-center p:not([style*="text-align: left"]):not([style*="text-align:left"]) .btn.btn-primary.btn-sm,
main .text-center p:not([style*="text-align: left"]):not([style*="text-align:left"]) .btn.btn-outline-primary.btn-sm {
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
}
/* Die <br>-Umbrüche und leeren Elemente zwischen den Kästen (aus dem
   Odoo-Editor) erzeugen zusätzlich ganze Leerzeilen. js/tidy-buttons.js
   markiert sie; da die Kästen jetzt überall untereinander stehen (block),
   werden sie auf allen Größen ausgeblendet — es wirkt nur der 0.6rem-Abstand. */
br.eqw-btn-br,
.eqw-btn-void {
  display: none;
}

/* ===== Mobile First (nur < 768px; Desktop bleibt 1:1 wie das Original) =====
   Die Odoo-Seite war für den PC gestaltet: viele 10–12px-Texte und sehr
   flache Buttons. Auf dem Handy heben wir Lesbarkeit und Tippflächen an. */
@media (max-width: 767.98px) {
  /* Sehr kleine Inline-Schriften aus dem Odoo-Editor auf lesbare Größe */
  main [style*="font-size: 10px"],
  main [style*="font-size: 11px"],
  main [style*="font-size: 12px"] {
    font-size: 14px !important;
  }
  /* Kleine Buttons (z. B. Projektbeispiele, "weitere Projekte") auf
     komfortable Tipp-Höhe und lesbare Schrift bringen */
  main .btn.btn-sm {
    padding: 0.55rem 0.9rem;
    font-size: 14px;
  }
  /* Projektbeispiel-Kästen: am Handy volle Breite und etwas höher als am PC
     (Tippfläche) — überschreibt die globale schlanke PC-Größe. */
  main .btn.btn-primary.btn-sm,
  main .btn.btn-outline-primary.btn-sm {
    max-width: none;
    padding: 0.5rem 0.9rem;
    font-size: 14px;
  }
  /* Prominente Buttons ("Dann hier lang", Seminarlocations): Beschriftung
     war nur 12px – auf volle Lesbarkeit anheben */
  main .btn.btn-primary.flat,
  main .btn.btn-primary.flat span,
  main .btn.btn-primary.flat font {
    font-size: 16px !important;
  }
  /* Event-Karten: Titel nicht mehr abschneiden (text-truncate), lesbar groß */
  .o_wevent_events_list .card-title {
    font-size: 16px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .o_wevent_events_list .card-body time {
    font-size: 14px;
  }
  /* Footer: Impressum/Datenschutz waren 10px – rechtlich wichtige Links */
  footer a[href="/impressum"],
  footer a[href="/datenschutz"],
  #footer a[href="/impressum"],
  #footer a[href="/datenschutz"] {
    font-size: 13px !important;
  }
  /* Hamburger-Menü: größere Tippfläche */
  .navbar-toggler {
    padding: 0.5rem 0.75rem;
  }
}

/* iOS/Safari: background-attachment:fixed wird auf iOS nicht unterstützt
   (Parallax-Hintergründe erscheinen gezoomt/abgeschnitten). Auf iOS-Geräten
   auf normales Scrollen zurückfallen — sieht identisch aus, nur ohne
   Fixiereffekt. Der @supports-Test trifft ausschließlich iOS/iPadOS. */
@supports (-webkit-touch-callout: none) {
  .s_parallax_is_fixed > .s_parallax_bg {
    background-attachment: scroll !important;
  }
}

/* Karussell-Punkte: standardmäßig weiß und damit auf den hellen Flächen der
   Seite unsichtbar (weiß auf weiß, gemessen auf Startseite, sdgs-idgs und
   seminarlocations). Einheitlich in Markenfarbe mit dezentem hellem Ring —
   sichtbar auf hellen Flächen UND auf Fotos; aktiver Punkt voll deckend.
   cursor:pointer zusätzlich für iOS (Tippen auf li löst sonst keinen Klick aus). */
.carousel-indicators li {
  cursor: pointer;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ac6c53;
  border: 1px solid rgba(255, 255, 255, 0.85);
  opacity: 0.4;
  margin-left: 4px;
  margin-right: 4px;
}
.carousel-indicators li.active {
  opacity: 1;
}

/* Foto-Galerien (z. B. Seminarlocations): Die kleinen Pfeil-Kästchen in der
   Vorschaubild-Leiste gehörten zu Odoos JS (Thumbnails weiterblättern) und
   sind ohne dieses JS funktionslos — das rechte bleibt als leeres weißes
   Kästchen stehen. Ausblenden; Navigation läuft über die großen seitlichen
   Pfeile, die Vorschaubilder selbst und Wischen. */
.carousel-indicators .o_indicators_left,
.carousel-indicators .o_indicators_right {
  display: none !important;
}

/* Mobile Navigation (aufgeklapptes Hamburger-Menü) aufräumen: einheitlich
   linksbündig, gut lesbare Hauptpunkte mit dezenten Trennlinien und Pfeil
   rechts; Untermenüs als eingerückte Liste in Markenfarbe statt als
   schwebender weißer Kasten. Greift nur, solange die Navbar eingeklappt ist
   (< 992px); am PC bleibt die horizontale Leiste unverändert. */
@media (max-width: 991.98px) {
  #top_menu_collapse #top_menu {
    text-align: left;
    padding: 0.25rem 0 0.5rem;
  }
  /* Hauptpunkte */
  #top_menu_collapse .nav-item > .nav-link {
    text-align: left !important;
    color: #2b2b2b !important;
    font-weight: 600;
    padding: 0.7rem 0.25rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  #top_menu_collapse .nav-item:first-child > .nav-link {
    border-top: none;
  }
  /* Aufklapp-Pfeil nach ganz rechts */
  #top_menu_collapse .nav-item > .nav-link.dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* Untermenü: eingerückte Liste, kein schwebender Kasten */
  #top_menu_collapse .dropdown-menu {
    position: static !important;
    float: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0 0 0.35rem !important;
    padding: 0 !important;
  }
  #top_menu_collapse .dropdown-item {
    text-align: left;
    color: #ac6c53 !important;
    padding: 0.42rem 0.25rem 0.42rem 1.25rem !important;
    white-space: normal;
  }
  #top_menu_collapse .dropdown-item:hover,
  #top_menu_collapse .dropdown-item:focus {
    background: rgba(172, 108, 83, 0.08) !important;
    color: #8f5843 !important;
  }
}