/**
 * AUROSAN – Design auf Grundlage von „basis“
 * @license GNU General Public License version 2 or later
 *
 * basis lädt diese Datei automatisch nach template.css; alles steht in der Ebene „design“.
 * Die Seite läuft nur im hellen Schema (Template-Stil: Farbschema „hell“, Umschalter aus),
 * deshalb gibt es hier keine Dunkel-Werte.
 *
 * Maße und Farben sind mit werkzeuge/abgleich.mjs an aurosan.de (cassiopeia_aurosan) gemessen.
 * Schrift: Die bisherige Seite zeigt Systemschriften (ihre Schriftdateien fehlen auf dem Server),
 * deshalb hier ebenfalls Systemschriften – Text Segoe UI/SF, Überschriften und Menü Arial bzw. Roboto/Helvetica.
 */

/* Reihenfolge innerhalb von „design“: grund (Bootstrap-Grundwerte des alten Templates) < alt (dessen Regeln) < diese Datei */
@layer design.grund, design.alt;

/* Icons der Inhalte (fas fa-…): Joomlas Font Awesome, in der untersten Ebene von basis,
   damit die Icon-Masken des Templates (icon-…) Vorrang behalten */
@import url("../../../../system/css/joomla-fontawesome.min.css") layer(base.fa);

/* Inhaltsregeln des bisherigen Templates: über basis, unter den Regeln dieser Datei */
@import url("inhalte.css") layer(design.alt);

/* Grundwerte von Bootstrap/Cassiopeia, auf denen die alten Inhaltsregeln aufbauen; diese dürfen sie überschreiben */
@layer design.grund {
  :is(h1, h2, h3, h4, h5, h6) {
    line-height: 1.2;
  }

  .btn {
    min-height: 0;
    padding: 0.4375rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 4px;
  }

  /* Text im Seitenbanner in Textschrift. Das alte CSS setzt Überschriften mit !important auf die Überschriftenschrift;
     bei !important gewinnt die frühere Ebene, deshalb steht diese Regel hier in „grund“ */
  .ui-area--hero .container-wrap :is(p, h1) {
    font-family: var(--ui-font-body) !important;
  }

  /* .btn-default des alten CSS setzt Bootstrap-Variablen (--btn-color …), die Bootstrap selbst umsetzt: hier nachgebildet */
  .btn-default {
    background: transparent;
    color: var(--btn-color, var(--ui-color-primary));
  }

  .btn-default:hover,
  .btn-default:focus-visible {
    background: var(--btn-hover-bg, var(--ui-color-primary));
    color: var(--btn-hover-color, #ffffff);
  }

  .btn-default:active {
    background: var(--btn-active-bg, var(--ui-color-primary));
    color: var(--btn-active-color, #ffffff);
  }

  /* Anker ohne Ziel (<a id="…">) sehen aus wie Text */
  a:not([href]) {
    color: inherit;
    text-decoration: none;
  }
}

@layer design {
  :root {
    /* Marke */
    --ui-color-primary: #e30613;
    --ui-color-on-primary: #ffffff;
    --ui-color-accent: #e30613;
    --ui-color-on-accent: #ffffff;
    --ui-color-action: #e30613;
    --ui-color-on-action: #ffffff;
    --ui-color-action-hover: #cc0511;

    /* Flächen und Text */
    --ui-color-bg: #ffffff;
    --ui-color-surface: #f5f5f5;
    --ui-color-surface-2: #eeeeee;
    --ui-color-text: #333333;
    --ui-color-heading: #333333;
    --ui-color-text-muted: #747474;
    --ui-color-border: #e1e1e1;
    --ui-color-border-strong: #ced4da;
    --ui-color-link: #e30613;
    --ui-color-link-hover: #cc0511;

    /* Schrift wie bisher: Systemschriften */
    --ui-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --ui-font-heading: "Roboto", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --ui-leading: 1.5;

    /* Form: schlicht wie Bootstrap */
    --ui-radius-sm: 4px;
    --ui-radius: 4px;
    --ui-radius-lg: 4px;
    --ui-radius-pill: 4px;
    --ui-shadow: 0 4px 14px rgb(0 0 0 / 0.08);

    /* Raster wie bisher: 1320 px Inhalt, 20 px Rand */
    --ui-container: 1320px;
    --ui-gutter: 20px;

    /* Variablen des bisherigen Templates (inhalte.css) auf basis umgelenkt */
    --body-font-family: var(--ui-font-body);
    --body-font-size: 1rem;
    --font-headings: var(--ui-font-heading);
    --body-color: var(--ui-color-text);
    --cassiopeia-color-primary: var(--ui-color-primary);
    --cassiopeia-color-link: var(--ui-color-link);
    --cassiopeia-color-hover: var(--ui-color-action-hover);
  }

  /* ------------------------------------------------------------------
     Topbar: 33 px hoch
     ------------------------------------------------------------------ */
  .ui-topbar .ui-container {
    align-items: center;
    min-height: 33px;
    padding-block: 0;
  }

  /* ------------------------------------------------------------------
     Kopf: Logo links, Suche und Standorte rechts, darunter das Menü als rote Leiste über die ganze Breite
     (live: Topbar 33 px, Logobereich 124 px, Menüleiste 60 px)
     ------------------------------------------------------------------ */
  .ui-brand__logo {
    height: 67px;
    max-height: none;
    width: auto;
  }

  /* Beim Scrollen bleibt nur die rote Menüleiste sichtbar: Der ganze Kopf klebt mit negativem Abstand oben,
     genau um die Höhe des Logobereichs. Mit „Kopfbereich fixieren“ blendet basis den Kopf beim Herunterscrollen
     aus und beim Hochscrollen wieder ein (motion.js). Keine Linie unter dem Kopf. */
  .ui-header {
    --aurosan-kopf: 124px;
    position: sticky;
    top: calc(-1 * var(--aurosan-kopf));
    z-index: 100;
    border-bottom: 0;
  }

  .ui-header__actions {
    font-size: 1rem;
  }

  .ui-header__actions .mod-finder input {
    width: 350px;
    max-width: 100%;
    padding: 0.6rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid var(--ui-color-border-strong);
    border-radius: 4px;
  }

  @media (min-width: 980px) {
    .ui-header__inner {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-areas: "brand actions" "menu menu";
      align-items: start;
      row-gap: 8px;
      padding-block: 23px 0;
    }

    .ui-brand {
      grid-area: brand;
      margin-inline-start: 8px;
    }

    /* Suchfeld und Standorte als Block rechts, darin linksbündig */
    .ui-header__actions {
      grid-area: actions;
      justify-self: end;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      margin-inline-end: 8px;
    }

    .ui-header__menu {
      grid-area: menu;
    }

    /* Menüleiste (nur Desktop-Modus des Menüs; darunter, bis 1320 px, steht der Burger in der Leiste) */

    /* Menüpunkte eckig und ohne Übergangsanimation: sonst blitzt beim Verlassen kurz eine runde Fläche auf */
    .ui-header__menu .emm-is-desktop .emm-root > .emm-item {
      padding-right: 0 !important;
      border-radius: 0 !important;
      transition: none !important;
    }

    /* Dropdowns direkt an der Leiste, ohne Abstand und Einschweben */
    .ui-header__menu .emm-is-desktop .emm-mega {
      top: 100% !important;
      transform: none !important;
      border-radius: 0 0 4px 4px !important;
    }

    .ui-header__menu .emm-is-desktop .emm-mega::before {
      display: none;
    }

    /* Hauptpunkte weiß in Großbuchstaben, linksbündig in einer Zeile; Dropdowns bleiben hell */
    .ui-header__menu .emm-is-desktop .emm-root {
      justify-content: flex-start !important;
      flex-wrap: nowrap !important;
      gap: 0 !important;
    }

    .ui-header__menu .emm-is-desktop .emm-root > .emm-item > :is(.emm-link1, .emm-link1--static) {
      color: #ffffff !important;
      font-family: Arial, "Helvetica Neue", sans-serif;
      font-size: 15px !important;
      font-weight: 600 !important;
      line-height: 1.5 !important;
      text-transform: uppercase;
      border-radius: 0 !important;
      min-height: 60px;
      padding: 15px 18px 15px 19px !important;
    }

    /* Knapp über der Umschaltbreite (1320 px) ist die Zeile sonst ein paar Pixel zu lang (englisch noch mehr) */
    @media (max-width: 1365.98px) {
      .ui-header__menu .emm-is-desktop .emm-root > .emm-item > :is(.emm-link1, .emm-link1--static) {
        padding-inline: 14px !important;
      }
    }

    /* Startseite als Haus-Symbol (Menüpunkt mit Klasse aurosan-home); der Text bleibt für Screenreader */
    .ui-header__menu .emm-is-desktop .emm-root > .aurosan-home > .emm-link1 {
      font-size: 0 !important;
    }

    .ui-header__menu .emm-is-desktop .emm-root > .aurosan-home > .emm-link1::before {
      content: "\f015";
      font: 900 1.05rem/1.4 "Font Awesome 6 Free";
    }

    /* Pfeil klein und direkt am Wort wie bisher */
    .ui-header__menu .emm-is-desktop .emm-root > .emm-item > .emm-caret {
      width: 0.75rem !important;
      height: 0.75rem !important;
      margin-inline: -8px 14px !important;
      color: #ffffff !important;
    }

    .ui-header__menu .emm-is-desktop .emm-root > .emm-item > .emm-caret svg {
      width: 0.75rem;
      height: 0.75rem;
    }

    .ui-header__menu .emm-is-desktop .emm-root > .emm-item:is(:hover, .is-open, .is-active) {
      background: var(--ui-color-action-hover) !important;
      border-radius: 0 !important;
    }

    .ui-header__menu .emm-is-desktop .emm-root > .emm-item > .emm-link1:hover {
      background: transparent !important;
    }
  }

  /* Sprachauswahl wie bisher: links in der Topbar, aktive Sprache nur fett, ohne Kasten */
  .ui-topbar .mod-languages {
    order: -1;
    margin-inline: 0;
  }

  .ui-topbar .mod-languages a {
    background: none;
    box-shadow: none;
    color: var(--ui-color-text);
    font-size: 0.8rem;
  }

  .ui-topbar .mod-languages .lang-active a {
    background: none;
    box-shadow: none;
    font-weight: 700;
  }

  /* Rote Menüleiste über die ganze Fensterbreite: Fläche hinter dem Menü plus Schatten, auf die Leistenhöhe
     beschnitten. Als Pseudo-Element, damit Dropdowns und das mobile Panel nicht mit beschnitten werden. */
  .ui-header__menu {
    position: relative;
    isolation: isolate;
    /* Eigene Ebene über Logo und Suche: sonst liegt das Suchfeld über dem ausgeklappten Burger-Menü */
    z-index: 2;
  }

  .ui-header__menu::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ui-color-primary);
    box-shadow: 0 0 0 100vmax var(--ui-color-primary);
    clip-path: inset(0 -100vmax);
  }

  /* Handy und Tablet: kleines Logo, darunter rote Leiste mit Burger links und Suchfeld rechts */
  @media (max-width: 979.98px) {
    :root {
      --ui-gutter: 10px;
    }

    /* Handy: Logobereich = 12 px Rand + Logo (200 px breit, 33 px hoch) + 12 px Abstand */
    .ui-header {
      --aurosan-kopf: 57px;
    }

    .ui-header__inner {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-areas: "brand brand" "menu actions";
      align-items: center;
      padding-block: 12px 0;
      row-gap: 12px;
    }

    .ui-brand {
      grid-area: brand;
    }

    .ui-brand__logo {
      width: 200px;
      height: auto;
    }

    .ui-header__menu {
      grid-area: menu;
      align-self: stretch;
      padding-block: 10px;
    }

    .ui-header__actions {
      grid-area: actions;
      justify-self: end;
      width: min(200px, 100%);
    }

    .ui-header__actions .mod-finder input {
      width: 100%;
      padding: 0.375rem 1rem;
      border-color: #ffffff;
    }

    /* Standorte im Kopf nur am Desktop */
    .ui-header__actions .mod-custom {
      display: none;
    }

  }

  /* Burger links, kräftige dunkle Striche wie bisher; gilt, sobald das Menü umschaltet (unter 1320 px),
     nicht erst in der Handyansicht (Menü-CSS außerhalb der Ebenen: !important) */
  .ui-header__menu .ext-megamenu.emm-is-mobile {
    justify-content: flex-start !important;
  }

  /* Menüpunkte im ausgeklappten Menü oben beginnen (basis richtet die Leiste am Desktop rechtsbündig aus) */
  .ui-header__menu .emm-is-mobile .emm-root {
    justify-content: flex-start !important;
  }

  .ui-header__menu .emm-burger {
    gap: 7px !important;
    width: 44px !important;
    height: 40px !important;
    border-radius: 0 !important;
    background: none !important;
  }

  .ui-header__menu .emm-burger-line {
    width: 34px !important;
    height: 3px !important;
    background: #ffffff !important;   /* weiß auf der roten Menüleiste (Wunsch 10.11.2026) */
    border-radius: 0 !important;
  }

  /* ------------------------------------------------------------------
     Bereiche wie bisher: Top-A eng, Inhalt direkt darunter, Bottom-A grau
     ------------------------------------------------------------------ */
  .ui-area--top .ui-section:not(.willkommen) {
    padding-block: 0.5em 0;
  }

  .ui-body,
  .ui-area--hero ~ .ui-body {
    padding-block: 0 2rem;
  }

  .ui-main {
    padding: calc(0.5em + 1rem) 0.5em 0.5em;
  }

  /* Abstand zwischen Breadcrumb und Inhalt wie im Raster des alten Templates */
  .ui-area--breadcrumbs + .ui-body {
    padding-block-start: 13px;
  }

  /* Breadcrumb wie bisher: graues Band über die ganze Breite, ohne Symbol */
  .ui-area--breadcrumbs {
    max-width: none;
    margin: 0;
    padding-block: 0.4em;
    padding-inline: max(var(--ui-gutter), calc((100% - var(--ui-container)) / 2));
    background: var(--ui-color-surface);
    color: var(--ui-color-text-muted);
    font-size: 1rem;
  }

  /* Innenabstand am nav statt an der Liste: basis setzt .breadcrumb { padding: 0 !important } */
  .ui-area--breadcrumbs .mod-breadcrumbs__wrapper {
    padding: 0.5rem 1rem;
  }

  .ui-area--breadcrumbs .mod-breadcrumbs__divider {
    display: none;
  }

  .ui-area--breadcrumbs :is(a, li, span) {
    font-size: 1rem;
  }

  .ui-area--bottom .ui-section {
    padding-block: 0;
  }

  /* ------------------------------------------------------------------
     Willkommen-Zeile (Position top, Modulklasse „willkommen“): schmales graues Band, zentriert
     ------------------------------------------------------------------ */
  .ui-area--top {
    padding-block-start: 0;
  }

  .ui-section.willkommen {
    padding-block: 19px;
    background-color: var(--ui-color-surface);
    text-align: center;
    font-weight: 700;
  }

  .ui-section.willkommen :is(h1, h2, h3) {
    margin: 0;
    font-family: var(--ui-font-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 21px;
  }

  @media (max-width: 480px) {
    .ui-section.willkommen :is(h1, h2, h3) { font-size: 0.8rem; }
  }

  /* ------------------------------------------------------------------
     Fuß: vier Spalten auf Weiß, darunter die Copyright-Zeile auf Grau (Joomla-Fußzeile, aktuelles Jahr)
     ------------------------------------------------------------------ */
  .ui-footer {
    padding: 0;
    border-top: 1px solid var(--ui-color-surface);
    background: var(--ui-color-bg);
    font-size: 1rem;
  }

  /* Grau bis an den Fensterrand ohne Überbreite: 100vw zählt die Bildlaufleiste mit und machte die Seite waagrecht scrollbar */
  .ui-footer__bottom {
    justify-content: center;
    padding: 1rem 0.5rem 0;
    border: 0;
    background: var(--ui-color-surface);
    box-shadow: 0 0 0 100vmax var(--ui-color-surface);
    clip-path: inset(0 -100vmax);
    color: var(--ui-color-text-muted);
    font-size: 1rem;
    text-align: center;
  }

  /* eigene Copyright-Zeile von basis entfällt, die Joomla-Fußzeile übernimmt (übersetzt, mit aktuellem Jahr) */
  .ui-footer__bottom > .ui-footer__text {
    display: none;
  }

  /* ------------------------------------------------------------------
     Slider wie bisher: Text ohne den zusätzlichen Pfeil-Abstand des neuen Sliders
     (Slider-CSS liegt außerhalb der Ebenen, deshalb !important)
     ------------------------------------------------------------------ */
  .basis-slider--arrows .basis-slider__content {
    padding-inline: clamp(1rem, 3cqi, 3.5rem) !important;
  }

  /* „Nach oben“ wie bisher: weißer Knopf mit roter Linie, 16 px vom Rand */
  .ui-backtop {
    inset-inline-end: 16px;
    bottom: 16px;
    width: 38px;
    height: 42px;
    padding: 8px;
    font-size: 1rem;
    box-shadow: none;
    border: 1px solid var(--ui-color-primary);
    border-radius: 4px;
    background: #ffffff;
    color: var(--ui-color-primary);
  }

  /* Seitenbanner (Position hero, „Eigener Inhalt“ mit Hintergrundbild): Regeln des alten Templates in inhalte.css */

  /* FAQ (Aufklapper „spoiler“): Plus/Minus als gezeichnetes Kreis-Symbol wie im basis-Baustein FAQ
     statt der Grafiken plus.png/minus.png des alten Templates */
  .spoiler .boxt > :is(span.open, span.closed) {
    position: relative;
    width: 28px;
    height: 28px;
    margin-inline-end: 12px;
    padding: 0;
    border: 1px solid var(--ui-color-border-strong);
    border-radius: 50%;
    vertical-align: middle;
    background:
      linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
  }

  .spoiler > input + .boxt > span.open {
    display: inline-block;
  }

  .spoiler > input:checked + .boxt > span.closed {
    display: inline-block;
    background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat;
  }

  .spoiler .boxt > :is(span.open, span.closed) {
    width: 22px;
    height: 22px;
  }

  .spoiler .boxt > strong {
    font-weight: 700;
  }

  /* Raster mit Seitenleiste wie bisher: 270 px Seitenleiste, 16 px Abstand */
  @media (min-width: 62rem) {
    .has-sidebar .ui-body {
      grid-template-columns: minmax(0, 1fr) 270px;
      column-gap: 16px;
    }

    .ui-sidebar {
      padding-block-start: 21px;
    }
  }

  /* Seitenleiste wie bisher: Module ohne Kartenrahmen, Abstand dazwischen */
  .ui-sidebar .ui-card {
    margin-block-end: 2rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  /* Seitennavigation im Blog: Seitenzahlen links, „Seite 1 von 22“ rechts in derselben Zeile */
  .com-content-category-blog__navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
  }

  .com-content-category-blog__navigation .counter {
    order: 2;
    margin: 0;
  }

  /* ------------------------------------------------------------------
     Kontaktformulare wie bisher (Convert Forms): 700 px breit mit 20 px Einzug, Arial 15 px, graue Beschriftung,
     Felder 35 px hoch, Knopf ein Drittel breit
     ------------------------------------------------------------------ */
  /* Das CSS des Formular-Plugins liegt außerhalb der Ebenen: Abstände und Breiten deshalb mit !important */
  .contact-form {
    --basis-cf-row-gap: 19px !important;
    --basis-cf-label-gap: 4px !important;
    max-width: 700px;
    padding: 19px 20px 0;
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 15px;
  }

  .contact-form .basis-input-1-3 .controls {
    max-width: 33.333% !important;
  }

  .contact-form .control-label label {
    color: #888888;
    font-size: 15px;
    font-weight: 400;
    line-height: 19.5px;
  }

  .contact-form :is(input[type=text], input[type=email], input[type=tel], select, textarea) {
    min-height: 0;
    height: auto;
    padding: 8px 10px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    color: #333333;
    font-family: inherit;
    font-size: 15px;
    line-height: normal;
  }

  .contact-form select {
    height: 35px;
  }

  .contact-form textarea {
    height: 103px !important;
    min-height: 0 !important;
  }

  .contact-form .form-check-label {
    color: #888888;
    font-size: 14px;
  }

  .contact-form button[type=submit] {
    width: 33.333%;
    min-width: 12rem;
    padding: 11px 15px;
    border: 0;
    border-radius: 3px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
  }

  /* ------------------------------------------------------------------
     Standortkarten (Plugin „AUROSAN Standorte“): Vor der Einwilligung bleibt das Vorschaubild der Karte sichtbar,
     darüber ein weißes Textfeld und „Inhalt laden“ wie bisher. Das Plugin setzt line-height: 0 auf den Rahmen,
     und das CSS des Cookie-Hinweises liegt außerhalb der Ebenen, deshalb !important.
     ------------------------------------------------------------------ */
  .au-standort-rahmen .cm-iframe-placeholder {
    border: 0 !important;
    border-radius: 0 !important;
    background: rgb(255 255 255 / 0.25) !important;
    line-height: 1.5 !important;
  }

  .au-standort-rahmen .cm-iframe-inner {
    max-width: 92% !important;
    gap: 12px !important;
  }

  .au-standort-rahmen .cm-iframe-text {
    margin: 0 !important;
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
    background: rgb(255 255 255 / 0.92);
    color: #333333;
    opacity: 1 !important;
  }

  .au-standort-rahmen :is(.cm-icon, .cm-btn-ghost) {
    display: none !important;
  }

  /* ------------------------------------------------------------------
     Angebote (com_basis_angebote): Seitentitel und Gruppenüberschriften wie die Beitragsüberschriften der alten Seite
     (graue Linie, darüber ein kurzer roter Strich); Kennzeichen in Gelb, damit es nicht wie ein Knopf wirkt
     ------------------------------------------------------------------ */
  .com-basis-angebote h1,
  .basis-angebote__group-title {
    position: relative;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--gray, #e5e5e5);
    margin-bottom: 20px;
  }

  /* Der alte Stil nutzte ein Float, das Raster-Layouts daneben zusammendrückt; hier liegt der Strich auf der Linie */
  .com-basis-angebote h1::after,
  .basis-angebote__group-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 20%;
    height: 2px;
    background: var(--ui-color-accent, #e30613);
  }
}

/* Raster der überarbeiteten Inhaltsseiten (Beiträge nutzen die Bootstrap-Klassen row g-4 / col-*; basis enthält kein Bootstrap) */
.row.g-4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
.row.g-4 > * { min-width: 0; }
.row.g-4 .card.h-100 { height: 100%; margin: 0; }
@media (min-width: 768px) {
  .row.g-4:has(> .col-md-6) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row.g-4:has(> .col-md-4) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .row.g-4:has(> .col-lg-4) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .row.g-4:has(> .col-lg-3) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Anpassungen nach Vergleich mit der bisherigen Seite (09.11.2026) */
/* Startseite: Symboltexte höchstens zwei Zeilen */
.titel-topa { font-size: 15px; line-height: 1.25; overflow-wrap: normal; }
/* Einleitung der Fachseiten wie bisher (Bootstrap .lead) */
.lead { font-size: 1.5rem; font-weight: 300; line-height: 1.5; }
/* News-Übersicht: Abstand unter „Weiterlesen“ */
.com-content-category-blog__item .item-content { padding-bottom: 1.25rem; }
/* Blätterleiste: aktive Seite weiß auf Rot */
.pagination .page-item.active .page-link { color: #fff; }
/* Beitragsbild: Text fließt herum */
.com-content-article figure.item-image.left { float: left; margin: 0 1rem 1rem 0; }
.com-content-article figure.item-image.right { float: right; margin: 0 0 1rem 1rem; }
/* Überschrift mit schwebender Linie drückt sonst den ersten Listenpunkt nach rechts */
h3:has(+ ul.ul-punkt) { display: flow-root; }
/* Karriere: Stellensuche links */
@media (min-width: 62rem)  {
  .com_djclassifieds.has-sidebar .ui-body { grid-template-columns: var(--ui-sidebar) minmax(0, 1fr); }
  .com_djclassifieds .ui-sidebar { order: -1; }
}
/* Standort-Karten: basis setzt iframe auf height:auto, das ignoriert die Höhe 240 */
iframe.au-standort-karte { height: 240px; }
/* Slider: Knöpfe mit Abstand, auch wenn sie am Handy untereinander stehen */
.basis-slider__text p:has(> .btn) { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.basis-slider__text p:has(> .btn) > .btn { margin: 0; }