/**
 * AUROSAN intim – 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 gemessen und für aurosan-intim.de (cassiopeia_jam) übernommen.
 * 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: #b93974;
    --ui-color-on-primary: #ffffff;
    --ui-color-accent: #b93974;
    --ui-color-on-accent: #ffffff;
    --ui-color-action: #b93974;
    --ui-color-on-action: #ffffff;
    --ui-color-action-hover: #243061;

    /* 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: #b93974;
    --ui-color-link-hover: #243061;

    /* 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 wie bisher: grau, Telefon und E-Mail rechtsbündig
     ------------------------------------------------------------------ */
  .ui-topbar {
    background: var(--ui-color-surface);
    color: #484f56;
  }

  .ui-topbar .ui-container {
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    min-height: 33px;
    padding-block: 0;
  }

  .ui-topbar p {
    margin: 0;
    color: #484f56;
  }

  .ui-topbar a {
    color: #484f56;
    text-decoration: none;
  }

  .ui-topbar a:is(:hover, :focus-visible) {
    color: var(--ui-color-link);
    text-decoration: underline;
  }

  /* ------------------------------------------------------------------
     Kopf wie bisher: weiß, Logo links (230 px), Menü rechts daneben in Schwarz und fett,
     aktiver Punkt bzw. Hover mit Magenta-Strich darunter; dünne graue Linie unter dem Kopf
     ------------------------------------------------------------------ */
  .ui-header {
    background: #ffffff;
    border-bottom: 1px solid var(--ui-color-surface);
  }

  .ui-header__inner {
    align-items: center;
    padding-block: 1rem;
  }

  .ui-brand__logo {
    width: 230px;
    height: auto;
    max-height: none;
  }

  .ui-header__menu .emm-is-desktop .emm-root > .emm-item > :is(.emm-link1, .emm-link1--static) {
    position: relative;
    color: #000000 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    background: none !important;
  }

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

  .ui-header__menu .emm-is-desktop .emm-root > .emm-item > :is(.emm-link1, .emm-link1--static)::after {
    content: "";
    position: absolute;
    inset-inline: 0.75rem;
    bottom: 0.15rem;
    height: 3px;
    background: var(--ui-color-primary);
    opacity: 0;
  }

  .ui-header__menu .emm-is-desktop .emm-root > .emm-item:is(:hover, .is-open, .is-active) > :is(.emm-link1, .emm-link1--static)::after {
    opacity: 1;
  }

  .ui-header__menu .emm-is-desktop .emm-root > .emm-item > .emm-caret {
    color: #000000 !important;
  }

  /* Startseite als Haus-Symbol wie bisher (Klasse aurosan-home am Menüpunkt); der Text bleibt für Screenreader,
     im aufgeklappten Handy-Menü steht „Home“ als Text */
  .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.1rem/1.4 "Font Awesome 6 Free";
  }

  /* Einleitung (Position top) wie bisher als graues Band über die ganze Breite */
  .ui-area--top {
    background: var(--ui-color-surface);
    box-shadow: 0 0 0 100vmax var(--ui-color-surface);
    clip-path: inset(0 -100vmax);
  }

  /* Burger-Menü (unter 992 px) wie bisher: drei Striche mit schwarzem Rahmen ganz links, Logo rechts
     (basis richtet den Burger im Menübereich sonst rechtsbündig aus – dann stand er direkt am Logo) */
  @media (max-width: 991.98px) {
    .ui-brand {
      order: 2;
      margin-inline: auto 0;   /* basis zentriert das Logo am Handy */
    }

    .ui-header__menu {
      order: 1;
      flex: 0 0 auto;
    }

    .ui-header__menu .ext-megamenu.emm-is-mobile {
      justify-content: flex-start !important;
    }
  }

  /* Handy: kleineres Logo (150 px) */
  @media (max-width: 767.98px) {
    .ui-header__inner {
      padding-block: 0.6rem;
    }

    .ui-brand__logo {
      width: 150px;
    }
  }

  .ui-header__menu .emm-burger {
    width: 44px !important;
    height: 38px !important;
    gap: 5px !important;
    border: 1px solid #000000 !important;
    border-radius: 4px !important;
    background: none !important;
  }

  .ui-header__menu .emm-burger-line {
    width: 22px !important;
    height: 3px !important;
    background: #000000 !important;
    border-radius: 1px !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;
  }

  /* Bottom: Abstände des alten Templates (inhalte.css) gelten */

  /* ------------------------------------------------------------------
     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: 300 px Seitenleiste, 16 px Abstand */
  @media (min-width: 62rem) {
    .has-sidebar .ui-body {
      grid-template-columns: minmax(0, 1fr) 300px;
      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;
  }

}

/* 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; }
/* 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; }

/* Knöpfe nebeneinander im Text (z. B. Startseite „Zum AUROSAN Webshop · Beratung anfragen · Aktuelle Angebote“):
   Abstand auch, wenn sie auf dem Handy umbrechen (Wunsch 11.11.2026) */
p > .btn {
  margin-block: 0.25rem;
}

/* Bottom (Podcasts) wie bisher: Titel weiß auf dem Verlauf, Strich darunter */
.ui-section.bottom-a :is(.ui-section__title, h3) { color: #ffffff; }
/* Knöpfe wie bisher (Bootstrap): normale Schriftstärke, „btn-sm“ klein */
.btn { font-weight: 400; }
.btn.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; }
/* Breadcrumb: Links in Magenta wie bisher */
.ui-area--breadcrumbs a { color: var(--ui-color-link); }
/* Topbar wie bisher 40 px hoch */
.ui-topbar .ui-container { min-height: 40px; }
/* Ratgeber (Blog) und Kasten oberhalb (Position main-top) wie bisher ohne Rahmen */
.blog-item { border: 0; border-radius: 0; }
.blog-item .item-content { padding: 0.75rem 0 1.5rem; }
.ui-card.main-top { border: 0; box-shadow: none; background: none; }
.ui-card.main-top > .ui-card__body { padding: 0; }
/* „Mehr dazu“ im Ratgeber fett wie bisher */
.blog-item .readmore .btn { font-weight: 700; }
/* Formulare wie bisher auf intim (Convert Forms): Beschriftungen und Auswahltexte dunkel und halbfett, 14 px,
   Zwischenüberschriften (Feldgruppen) mit gestrichelter Linie darüber */
.contact-form { font-family: var(--ui-font-body); font-size: 14px; }
.contact-form .control-label label,
.contact-form .form-check-label { color: #333333; font-size: 14px; font-weight: 600; }
.contact-form fieldset > legend:not(.visually-hidden) {
  width: 100%; margin: 0.5rem 0 0.75rem; padding-top: 1rem; border-top: 1px dashed #cccccc;
  color: #333333; font-size: 14px; font-weight: 700;
}
.contact-form :is(input[type=text], input[type=email], input[type=tel], select, textarea) { font-family: var(--ui-font-body); font-size: 14px; }
.contact-form button[type=submit] { font-weight: 700; }
/* iframes in Höhe wie im Beitrag angegeben: basis setzt iframe { height: auto }, das ergäbe 150 px
   (Podcasts von Spotify 250, Replens-Videos 315, Karte 400 → auf Wunsch 450) */
iframe[height="250"] { height: 250px; }
iframe[height="315"] { height: 315px; }
iframe[height="400"] { height: 400px; }
.ui-section.bottom-b iframe[height="400"] { height: 450px; }
/* Fuß „Links“: Facebook und Instagram direkt nebeneinander (die Platzhalterzeichen im Symbol machten den Abstand) */
.ui-footer em.fab { font-size: 0; font-style: normal; }
.ui-footer em.fab::before { font-size: 1.3rem; }
.ui-footer a:has(> em.fab) { display: inline-block; margin-inline-end: 0.75rem; }
/* Karte (Kontaktseite, bottom-b) vor der Einwilligung wie auf aurosan.de: Vorschaubild der Karte (leicht weich),
   darüber ein weißes Textfeld und „Inhalt laden“; die Google-Karte lädt erst nach dem Klick bzw. der Zustimmung.
   Das CSS des Cookie-Hinweises liegt außerhalb der Ebenen, deshalb !important. */
.ui-section.bottom-b .cm-iframe-placeholder {
  position: relative !important;
  overflow: hidden !important;
  min-height: 450px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #e8eaed !important;
  line-height: 1.5 !important;
}
.ui-section.bottom-b .cm-iframe-placeholder::before {
  content: "";
  position: absolute;
  inset: -6px;
  background: url("../images/karte-vorschau.webp") center / cover no-repeat;
  filter: blur(2px);
}
.ui-section.bottom-b .cm-iframe-inner { position: relative; max-width: 92% !important; gap: 12px !important; }
.ui-section.bottom-b .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;
}
.ui-section.bottom-b :is(.cm-icon, .cm-btn-ghost) { display: none !important; }