/* =============================================================================
   TYPO3-spezifische Ergänzungen (nicht Teil der HTML-Vorlage)

   Eigene Datei, damit additional.css 1:1 mit der Vorlage synchron bleibt.
   ============================================================================= */

/* --- Powermail im Theme-Formular (.contact-form) --------------------------- */

/* Labels bleiben für Screenreader erhalten, die Vorlage arbeitet mit
   Platzhaltern (gesetzt über styles.framework.labelClasses) */
.pm-label-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Der container-fluid aus dem Powermail-Template soll nicht einrücken */
.contact-form .container-fluid {
  padding: 0;
}

/* Datenschutz-Checkbox: Kästchen und Text nebeneinander */
.contact-form .powermail_fieldwrap_type_check .form-check-label {
  display: inline;
  margin-left: 8px;
  font-size: 15px;
  color: inherit;
}

.contact-form .powermail_checkbox {
  width: auto;
  height: auto;
}

/* Fehlermeldungen der Validierung */
.contact-form .powermail_field_error {
  border-color: #c0392b;
}

.contact-form .powermail_field_error_container,
.contact-form .parsley-errors-list,
.contact-form .powermail_message_error {
  color: #c0392b;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  font-size: 14px;
}

/* Bestätigungstext nach dem Absenden */
.contact-form .powermail_message,
.contact-form .powermail_thx {
  font-size: 16px;
}

/* --- Fuhrpark-Filterleiste ------------------------------------------------- */
/* Kommt in style.css nicht vor, das Markup stammt aus dem Sitepackage. */
.fuhrpark-filter-container {
  margin-bottom: 40px;
  text-align: center;
}

.fuhrpark-filter-btns {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fuhrpark-filter-btn {
  padding: 10px 24px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 25px;
  background: #ffffff;
  color: #1B2032;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all 300ms ease;
}

.fuhrpark-filter-btn:hover,
.fuhrpark-filter-btn.active {
  border-color: #FF8F1F;
  background: #FF8F1F;
  color: #ffffff;
}

/* --- Karten in Spalten-Wrappern -------------------------------------------- */
/* In der Vorlage ist .service-block selbst die Rasterspalte und bringt
   padding: 0 22px mit. In TYPO3 rendern die Container die Karte zusätzlich in
   einem Bootstrap-Spalten-Wrapper – das Padding käme doppelt und die Karte
   bliebe schmaler als die 370px des Originals. Greift nur in unserer
   Verschachtelung, nicht im Vorlagen-Markup. */
.row > [class*="col-"] > .service-block {
  padding-left: 0;
  padding-right: 0;
}

/* --- Sprungmarken ---------------------------------------------------------- */
/* Anker (Fuhrpark, Führerscheinklassen) nicht unter den Sticky-Header
   schieben. Rein funktional, ohne Einfluss auf das Layout. */
[id^="klasse-"],
#schaltfahrzeuge,
#automatikfahrzeuge,
#motorraeder,
#anhaenger,
#mofa {
  scroll-margin-top: 110px;
}

/* --- Suche (EXT:ke_search) ------------------------------------------------- */
/* Das Theme kennt keine Suchergebnisliste; Markup und Abstände orientieren
   sich an der Neuigkeiten-Liste der Vorlage. */
.kesearch-form .form-group {
  margin-bottom: 0;
}

.kesearch-results .kesearch-anzahl {
  margin-bottom: 30px;
  font-size: 17px;
}

.kesearch-results .kesearch-treffer {
  padding: 22px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.kesearch-results .kesearch-treffer:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.kesearch-results .kesearch-treffer h4 {
  margin-bottom: 8px;
  font-size: 20px;
}

.kesearch-results .kesearch-treffer h4 a {
  color: #1B2032;
  transition: color 300ms ease;
}

.kesearch-results .kesearch-treffer h4 a:hover {
  color: #FF8F1F;
}

.kesearch-results .kesearch-hinweis {
  font-size: 17px;
}

/* Blätterleiste */
.kesearch-results .kesearch_pagebrowser,
.kesearch-results #kesearch_pagebrowser_bottom {
  margin-top: 35px;
}

.kesearch-results #kesearch_pagebrowser_bottom ul {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
}

/* =========================================================================
   Maxi-Button (Fahrschulmanager-Widget)
   =========================================================================

   Das Widget kommt von api.fahrschulmanager.de (eingebunden als
   includeJSFooter.maxi) und setzt sich unten rechts fest – genau dorthin,
   wo schon der Nach-oben-Button sitzt und wo das Cookie-Banner aufklappt.
   Es bringt eigene Styles mit, deshalb hier !important.

   Die beiden Abstaende stehen als Variablen, weil sich die Hoehe des
   Cookie-Banners je nach Textlaenge und Bildschirmbreite aendert. Passt es
   nicht, genuegt es, hier zu drehen. */

:root {
  /* 20px Seitenrand + 52px Nach-oben-Button + 20px Luft */
  --maxi-offset-bottom: 92px;
  /* solange das Cookie-Banner unten steht */
  --maxi-offset-banner: 200px;
  /* Das Widget faerbt Ring und Kontur seines SVG ueber diese Variable.
     Ohne Wert bleibt sie leer und der Browser faellt auf Schwarz zurueck. */
  --maxi-primary: #FF8F1F;
}

.maxi-button.maxi-button-bottom-right {
  bottom: var(--maxi-offset-bottom) !important;
  /* unter dem Banner (z-index 9999), damit die Einwilligung immer oben liegt */
  z-index: 95 !important;
}

/* Das Banner steht unten ueber die volle Breite. Solange es sichtbar ist,
   ruecken Maxi-Button und Nach-oben-Taste darueber. */
body:has(.cc-window.cc-bottom:not(.cc-invisible)) .maxi-button.maxi-button-bottom-right {
  bottom: var(--maxi-offset-banner) !important;
}

body:has(.cc-window.cc-bottom:not(.cc-invisible)) .scroll-to-top {
  bottom: calc(var(--maxi-offset-banner) - 72px);
}

/* =========================================================================
   Cookie-Hinweis auf der Karte
   =========================================================================

   EXT:dp_cookieconsent blendet ein blockiertes Iframe mit
   .dp--iframe{display:none} aus und haengt sein Hinweisfeld als
   Geschwister-Element dahinter. Beides passte hier nicht:

   1. Die Theme-Regel ".info-section .map-box iframe{display:block}" ist
      spezifischer und laedt spaeter als die CSS der Extension – das
      Ausblenden lief ins Leere. Die leere Karte blieb als 480px hohe
      Flaeche stehen und schob den Hinweis darunter.
   2. .map-box hat eine feste Hoehe. Der darunter geschobene Hinweis ragte
      aus dem Kasten heraus und landete hinter den Info-Karten.

   Deshalb: das blockierte Iframe wirklich ausblenden und den Hinweis die
   Kartenflaeche ausfuellen lassen. Nach der Einwilligung bekommt das
   Iframe .dp--loaded, dann greifen wieder die Theme-Regeln und die
   Extension blendet den Hinweis selbst aus. */

.map-box {
  position: relative;
}

.map-box iframe.dp--iframe:not(.dp--loaded) {
  display: none;
}

.map-box .dp--overlay {
  position: absolute;
  inset: 0;
  border-radius: 5px;
}

/* =========================================================================
   Bildnachweis
   =========================================================================

   Gepflegt im Feld "Copyright" der Datei-Metadaten (EXT:filemetadata).
   Ist es leer, rendert das Partial nichts und hier greift nichts.

   Die Bildkaesten heissen im Theme mal .image, mal .image-box, teils liegt
   das Bild in einem Link. Statt alle Varianten aufzuzaehlen, macht die
   Regel genau das Element zum Bezugsrahmen, das den Nachweis unmittelbar
   enthaelt – und nur dann, wenn wirklich einer da ist. */

   .image-layer ist ausgenommen: Die vollflaechigen Hintergrundebenen von
   Slider und Seitenbanner sind im Theme position:absolute und damit bereits
   Bezugsrahmen. Sie auf relative zu ziehen wuerde sie aus der Ueberlagerung
   loesen und das Layout zerlegen. */

:has(> .image-copyright):not(.image-layer) {
  position: relative;
}

.image-copyright {
  font-size: 11px;
  line-height: 1.4;
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  max-width: 100%;
  padding: 3px 8px;
  text-align: right;
  color: #ffffff;
  border-radius: 3px 0 0 0;
  background: rgba(17, 17, 17, .55);
}

/* Auf vollflaechigen Hintergrundbildern (Slider, Seitenbanner) sitzt der
   Nachweis an der Unterkante der Sektion statt am Bildkasten. */
.inner-banner .image-copyright,
.banner-section .image-copyright,
.main-slider .image-copyright {
  right: 12px;
  bottom: 12px;
  border-radius: 3px;
}