/* ==========================================================================
   Radiologie Maurer – Cassiopeia Design
   Ziel-Datei: /media/templates/site/cassiopeia/css/user.css  (PARENT-Template!)

   Diesen Teil zuerst: Grundfarbe + Header-Slider.
   Weitere Abschnitte (Termin-Leiste, Untersuchungs-Karten, Footer) folgen.
   ========================================================================== */

:root {
  --cassiopeia-color-primary: #3e9ffe;
  --cassiopeia-color-primary-hover: #2585e6;
  --maincontent-width: 1320px;
}

/* ==========================================================================
   BOTTOM-B (Anfahrtsplan) - volle Fensterbreite, kein Rahmen, kein Abstand.
   Gleiches Muster wie beim gasthof-poandl-Projekt: .site-grid ist CSS-Grid,
   also grid-column:1/-1 zum Ausbrechen aus der Maincontent-Spalte.
   ========================================================================== */
.grid-child.container-bottom-b,
.container-bottom-b {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}
.container-bottom-b .card,
.container-bottom-b .bottom-b.card,
.container-bottom-b .card-body,
.container-bottom-b .moduletable,
.container-bottom-b .mod-custom {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.container-bottom-b iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: none !important;
  margin: 0 !important;
}

/* ==========================================================================
   FOOTER - anthrazit statt Cassiopeia-Demo-Verlauf, Spalten oben ausrichten,
   kein Abstand zu bottom-b.
   ========================================================================== */
footer,
.footer,
.container-footer,
[class*="footer"] {
  background-image: none !important;
  background: #262626 !important;
  color: #ffffff;
  margin: 0 !important;
}
.container-footer .grid-child,
footer .grid-child {
  align-items: flex-start !important;
}

/* DEBUG-Position (Datenschutz/Impressum) - Links vertikal mittig,
   10px Innenabstand oben/unten */
.container-debug,
[class*="container-debug"] {
  display: flex !important;
  align-items: center !important;
}
.container-debug a,
[class*="container-debug"] a {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  display: inline-block;
}

/* ==========================================================================
   KONTAKTLEISTE - hellgrau, volle Fensterbreite, 2 Spalten in
   Maincontent-Breite. Angenommene Modul-Position "top-a" ->
   Cassiopeia-Wrapper .container-top-a (nach dem bestätigten Muster
   container-{position}). Falls andere Position gewählt wird, Bescheid
   geben, dann Selektor anpassen.
   ========================================================================== */
.container-top-a,
.grid-child.container-top-a {
  grid-column: 1 / -1;
  width: 100%;
  background-color: #eeeeee;
  margin: 0 !important;
  /* Hintergrund bleibt Fensterbreite, die 2 Karten (flex:1 von Cassiopeia)
     per Padding auf Maincontent-Breite einrücken - gleicher Trick wie beim
     Header, da .container-top-a gleichzeitig Hintergrund UND Flex-Zeile ist. */
  padding-left: max(12px, calc((100% - var(--maincontent-width)) / 2)) !important;
  padding-right: max(12px, calc((100% - var(--maincontent-width)) / 2)) !important;
  box-sizing: border-box;
}
.container-banner.full-width {
  margin: 0 !important;
}
.container-top-a .card,
.container-top-a .moduletable,
.container-top-a .mod-custom {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.kontaktleiste {
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
  max-width: var(--maincontent-width);
  margin: 0 auto;
  padding: 30px 12px;
  box-sizing: border-box;
}
.kontaktleiste-spalte {
  flex: 1 1 320px;
  text-align: center;
}
.kontaktleiste-spalte h3 {
  color: #333333;
  font-size: 22px;
  margin: 0 0 10px;
  font-weight: 600;
}
.kontaktleiste-tel,
.kontaktleiste-mail {
  margin: 4px 0;
  color: #333333;
}
.kontaktleiste-tel i {
  color: var(--cassiopeia-color-primary);
  margin-right: 6px;
}
.kontaktleiste-mail a {
  color: #333333;
  text-decoration: none;
}
.kontaktleiste-mail a:hover {
  color: var(--cassiopeia-color-primary);
}

/* ==========================================================================
   BACK-TO-TOP-BUTTON - Cassiopeia-Standard ist sehr dezent, deutlicher machen
   ========================================================================== */
#back-top {
  /* KEIN opacity/display hier - das steuert Cassiopeia selbst per .visible
     Klasse abhängig vom Scroll-Stand. Nur Optik anpassen. */
  background-color: var(--cassiopeia-color-primary) !important;
  color: #ffffff !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  transition: background-color 0.2s ease;
}
#back-top:hover {
  background-color: var(--cassiopeia-color-primary-hover) !important;
}
#back-top svg,
#back-top i {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* Nur im sichtbaren Zustand zentrieren - display hier NICHT anfassen,
   solange .visible nicht gesetzt ist, sonst wird Cassiopeias eigene
   Scroll-Sichtbarkeit wieder überstimmt (siehe vorheriger Fix). */
#back-top.visible {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1;
}
#back-top.visible svg,
#back-top.visible i {
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   Links systemweit: Primärfarbe, ohne Unterstrich (Hover/Active/Focus
   behalten den Unterstrich) - gilt für Inhalts-/E-Mail-Links, NICHT für
   die Hauptnavigation (die hat eigene, wichtigere Regeln weiter oben).
   ========================================================================== */
a {
  color: var(--cassiopeia-color-primary);
  text-decoration: none;
}
a:hover,
a:active,
a:focus {
  text-decoration: underline;
}

/* Cassiopeia-Demo-Gradient auf Header/Footer entfernen (bekannter Bug) */
.header,
.container-header,
header,
header::before,
header::after {
  background-image: none !important;
}

/* ==========================================================================
   HEADER-SLIDER (hero-slider)
   Selbstgebauter Slider ohne Abhängigkeiten. Pro Standort/Bereich ein eigenes
   Custom-HTML-Modul mit dieser Struktur, per Menüzuweisung nur auf den
   passenden Seiten sichtbar. Siehe slider-modul-vorlage.html für den Code,
   der ins jeweilige Modul eingefügt wird.
   ========================================================================== */
.hero-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 6;
  background-color: #111111;
}
.hero-slider__track {
  display: flex;
  height: 100%;
  transition: transform 0.6s ease;
}
.hero-slider__track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}
.hero-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--cassiopeia-color-primary);
  border: none;
  font-size: 0; /* Text-Pfeil (‹ ›) ausblenden, aria-label bleibt für Screenreader */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background-color 0.2s ease;
}
.hero-slider__arrow:hover {
  background-color: var(--cassiopeia-color-primary-hover);
}
.hero-slider__arrow::before {
  content: '';
  width: 12px;
  height: 12px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 0 4px 4px 0;
  display: inline-block;
}
.hero-slider__arrow--prev { left: 16px; }
.hero-slider__arrow--prev::before {
  transform: rotate(135deg);
  margin-left: 5px;
}
.hero-slider__arrow--next { right: 16px; }
.hero-slider__arrow--next::before {
  transform: rotate(-45deg);
  margin-right: 5px;
}

.hero-slider__dots {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}
.hero-slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.hero-slider__dot.is-active {
  background: var(--cassiopeia-color-primary);
  transform: scale(1.2);
}

@media (max-width: 767.98px) {
  .hero-slider { aspect-ratio: 4 / 3; }
  .hero-slider__arrow { width: 36px; height: 36px; font-size: 18px; }
  .hero-slider__arrow--prev { left: 8px; }
  .hero-slider__arrow--next { right: 8px; }
}

/* ==========================================================================
   Logo – aktuell in voller Bildgröße hinterlegt, auf 80px Höhe begrenzen
   ========================================================================== */
.header img,
.container-header img,
.logo img,
[class*="logo"] img {
  height: 160px !important;
  width: auto !important;
  max-width: 100%;
}

/* Logo links, Menü rechts daneben in einer Zeile.
   Bestätigte Struktur (F12-Inspector): .header hat 2 direkte Kinder, beide
   .grid-child - das erste (ohne .container-nav) enthält .navbar-brand/Logo,
   das zweite (.grid-child.container-nav) das Menü. */
/* Höhere Spezifität (volle Klassenliste) noetig, da Cassiopeia die
   Spalten-Anordnung vermutlich ueber ".header.full-width" o.ae. mit
   !important setzt - ein einfaches ".header" reicht nicht aus. */
header.header.container-header.full-width.position-sticky.sticky-top {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
  /* Hintergrund bleibt Fensterbreite, Inhalt (Logo+Menü) auf Maincontent-
     Breite zentrieren - Padding-Trick statt max-width, da .header selbst
     die Hintergrundfarbe trägt (kein separater Innen-Wrapper vorhanden). */
  padding-left: max(12px, calc((100% - var(--maincontent-width)) / 2)) !important;
  padding-right: max(12px, calc((100% - var(--maincontent-width)) / 2)) !important;
  box-sizing: border-box;
}
header.header.container-header.full-width.position-sticky.sticky-top > .grid-child:not(.container-nav) {
  flex: 0 0 auto;
  width: auto !important;
  max-width: none !important;
}
/* .container-nav enthält jetzt vermutlich 2 Menü-Module (statt 1 Modul mit
   JS-Umbruch) - als Spalte stapeln, jedes Modul bleibt für sich unangetastet
   (natives Cassiopeia-Verhalten inkl. Mobile-Darstellung bleibt erhalten). */
header.header.container-header.full-width.position-sticky.sticky-top > .grid-child.container-nav {
  display: flex;
  flex-direction: column;
  gap: 30px;
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  max-width: none !important;
}

/* ==========================================================================
   Hauptnavigation – Grundfarbe (Rest der Nav-Optik folgt im nächsten Schritt)
   ========================================================================== */
.header,
.container-header {
  background-color: var(--cassiopeia-color-primary) !important;
}

/* Zeilenumbruch nach dem 2. Menüpunkt (Ambulatorium + 1. Befundabfrage in
   Zeile 1, Rest in Zeile 2). Das .nav-break-Element wird per JS eingefügt,
   siehe nav-break-modul-vorlage.html */
.mod-menu.mod-list.nav {
  flex-wrap: wrap;
  align-items: center;
}
/* Unterstrich/Linie in jedem Zustand entfernen (Bootstrap-Reste von .nav-pills).
   Breit gefasst (border/box-shadow/background-image/outline), falls die
   Linie nicht per text-decoration, sondern anders erzeugt wird. Zusätzlich
   die Bootstrap-CSS-Variablen von .nav-pills auf 0/transparent gesetzt, da
   die Störlinie laut Inspector über --nav-pills-* Variablen kommen könnte. */
.mod-menu a,
.mod-menu a:hover,
.mod-menu a:active,
.mod-menu a:focus,
.mod-menu a:visited,
.mod-menu button,
.mod-menu .nav-item,
.mod-menu .nav-item.active,
.mod-menu .nav-item.current {
  text-decoration: none !important;
  text-decoration-line: none !important;
  border: none !important;
  box-shadow: none !important;
  background-image: none !important;
  outline: none !important;
}
.mod-menu.nav-pills {
  --nav-pills-border-width: 0 !important;
  --bs-nav-pills-border-width: 0 !important;
}
/* border:none auf dem <li> selbst greift NICHT auf dessen Pseudo-Elemente -
   die Störlinie ist mit hoher Wahrscheinlichkeit ein ::before/::after auf
   .mod-menu (ul), .nav-item oder dem Toggle-Button. */
.mod-menu::before,
.mod-menu::after,
.mod-menu .nav-item::before,
.mod-menu .nav-item::after,
.mod-menu button::before,
.mod-menu button::after {
  border: none !important;
  box-shadow: none !important;
  background: none !important;
  background-image: none !important;
  outline: none !important;
}

/* Hauptmenüpunkte (Ebene 1): größere Schrift + Button-artige Hervorhebung
   für den aktuell aktiven Bereich. ">"-Kombinator, damit das NICHT auch
   die Untermenüpunkte trifft (die werden separat weiter unten gestylt). */
.mod-menu.mod-list.nav > .nav-item > a {
  color: #ffffff !important;
  font-size: 24px;
  padding: 10px 16px;
  border-radius: 6px;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: background-color 0.2s ease;
}
.mod-menu.mod-list.nav > .nav-item > a:hover,
.mod-menu.mod-list.nav > .nav-item > a:active,
.mod-menu.mod-list.nav > .nav-item > a:focus {
  background-color: rgba(255, 255, 255, 0.15);
  text-decoration: none !important;
  border-bottom: none !important;
}
.mod-menu.mod-list.nav > .nav-item.active > a,
.mod-menu.mod-list.nav > .nav-item.current > a {
  background-color: var(--cassiopeia-color-primary-hover);
}

/* Untermenüpunkte (Dropdown): waren weiß auf weiß und unlesbar */
.mod-menu__sub {
  background-color: #ffffff !important;
}
.mod-menu__sub .nav-item a,
.mod-menu__sub a {
  color: #333333 !important;
  font-size: 18px;
  text-decoration: none !important;
  border-bottom: none !important;
}
.mod-menu__sub .nav-item a:hover {
  color: var(--cassiopeia-color-primary) !important;
}