/* ============================================================================
   ABS Robur GmbH – custom.css für Helix Ultimate
   Nachbildung des Layouts von www.abs-robur.de (altes "abs"-Template)
   ----------------------------------------------------------------------------
   WICHTIGER HINWEIS ZU DEN SELEKTOREN:
   Ich konnte die neue Seite (abs-robur.de/2026) nicht automatisiert per
   Browser inspizieren (kein Live-Zugriff in dieser Umgebung), daher basieren
   die Selektoren unten auf den STANDARD-IDs/-Klassen von Helix Ultimate:

     #sp-header          Kopf-/Menübereich
     .sp-logo            Logo
     .sp-megamenu-parent Hauptmenü (Liste)
     .sp-dropdown-items  Untermenüs
     .sp-module          Modul-Wrapper (Sidebar-Boxen)
     .sp-module-title    Modul-Titel (h3)
     #sp-left / #sp-right  Sidebar-Spalten
     #sp-component       Hauptinhalt
     #sp-footer1..4      Footer-Spalten
     #sp-copyright       Copyright-Zeile

   Falls dein Preset andere Klassennamen verwendet: kurz mit den
   Browser-Dev-Tools (Rechtsklick -> Untersuchen) auf Header/Menü/
   Sidebar-Box/Footer prüfen und mir die abweichenden Klassen nennen –
   dann passe ich die Datei in 1–2 Minuten an.
   ============================================================================ */

:root {
  --abs-red:         #b00000;  /* Haupt-Rot (Sidebar-Boxen, Buttons) */
  --abs-red-dark:     #730000;  /* Hover/Aktiv-Rot */
  --abs-red-bright:   #e30000;  /* Link-Rot im Content */
  --abs-red-menu:     #c20000;  /* Menüleisten-Rot (heller Verlaufsanfang) */
  --abs-red-menu-end: #a30000;  /* Menüleisten-Rot (Verlaufsende) */
  --abs-red-border:   #e20000;  /* dünne Trennlinien im Menü */
  --abs-text:         #464646;  /* Fließtext */
  --abs-text-light:   #a4a4a4;  /* Datum/Meta-Text */
  --abs-border-light: #cccccc;
  --abs-font:         Tahoma, Arial, Helvetica, sans-serif;
  --abs-font-serif:   Georgia, "Times New Roman", Times, serif; /* Zitat/Slogan */
  --abs-radius:       6px;
}

/* ----------------------------------------------------------------------------
   1. Basis-Typografie
   ---------------------------------------------------------------------------- */
body {
  font-family: var(--abs-font);
  font-size: 13px;           /* Original war 11px – etwas angehoben für
                                 heutige Bildschirme, aber bewusst knapp
                                 gehalten. Für Original-Größe auf 11px setzen. */
  line-height: 1.5;
  color: var(--abs-text);
  background: #fff;
}

#sp-main-body {
	padding: 30px 0;
}

#sp-component a,
.sp-module-content a,
.item-page a {
  color: var(--abs-red-bright);
  text-decoration: none;
}
#sp-component a:hover,
.sp-module-content a:hover,
.item-page a:hover {
  text-decoration: underline;
}

#sp-component ul li,
.item-page ul li {
  list-style: none;
  position: relative;
  padding-left: 14px;
  margin-bottom: 4px;
}
#sp-component ul li::before,
.item-page ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background: var(--abs-red-bright);
  border-radius: 1px;
}
#sp-component ol li,
.item-page ol li { list-style: decimal; margin-left: 20px; padding-left: 4px; }

blockquote {
  padding: 1em;
  line-height: 1.6;
  color: #858383;
  background: #f2f2f2;
  border-bottom: 4px solid #a8a8a8;
  margin: 0 0 1em;
}
hr {
  border: none;
  height: 1px;
  border-top: 1px dotted #a8a8a8;
  margin: 10px 0;
}
table.contenttoc { padding: 10px; border: 1px solid var(--abs-red); }
table.contenttoc th {
  background: var(--abs-red);
  color: #fff;
  text-align: left;
  padding: 2px 10px;
}
table.contenttoc td { color: #be1515; padding: 2px 10px; font-size: 0.9em; }
.cat-list-row1 td { background: #eaeaea; }

/* Artikel-Metadaten (Datum etc.) – Kernklassen von Joomla com_content */
.article-info,
dl.article-info {
  border-bottom: 1px solid #ccc;
  color: #ccc;
  margin-bottom: 15px;
  padding-bottom: 5px;
}
.createdate, .modifydate, .small {
  color: var(--abs-text-light);
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* ----------------------------------------------------------------------------
   2. Kopfbereich / Logo
   ---------------------------------------------------------------------------- */
#sp-header {
  background: #fff;
  border-top: 4px solid var(--abs-red);
  box-shadow: 0 0 0 rgba(0,0,0,0); /* Platzhalter falls Schatten gewünscht */
}
.sp-logo,
#sp-logo {
  padding: 10px 0;
}
.sp-logo img,
#sp-logo img { max-height: 70px; width: auto; }

/* Icons-/Suchzeile über dem Menü (falls vorhanden) */
#sp-top1, #sp-top2 {
  font-size: 11px;
  color: #838383;
}
#sp-top1 a, #sp-top2 a { color: #838383; text-decoration: none; }
#sp-top1 a:hover, #sp-top2 a:hover { text-decoration: underline; }

/* Suchfeld */
.search input[type="text"],
.sp-search input[type="text"],
input.search-query {
  border: 1px solid #d4d4d4;
  color: #4f4f4f;
  padding: 6px 10px;
  border-radius: 3px;
  font-size: 13px;
}
.search button,
.sp-search button,
button.search-button {
  background: var(--abs-red);
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 6px 12px;
  cursor: pointer;
}
.search button:hover,
.sp-search button:hover { background: var(--abs-red-dark); }

/* ----------------------------------------------------------------------------
   3. Hauptmenü (horizontale Navigation)
   ---------------------------------------------------------------------------- */
#sp-header{
  background: linear-gradient(to right, var(--abs-red-menu), #7a0000) !important;
  font-family: var(--abs-font);
}

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > .separator + a {
  font-weight: bold;
  font-size: 12px;
  line-height: 36px;
  padding: 0 14px !important;
  color: #fff !important;
  text-decoration: none;
  border-right: 1px solid var(--abs-red-border);
  background: transparent;
}
.sp-megamenu-parent > li:last-child > a { border-right: none; }

.sp-megamenu-parent > li > a:hover,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.current > a {
  background: var(--abs-red-dark) !important;
  color: #fff !important;
}

/* Dropdown / Untermenüs */
.sp-dropdown-items,
.sp-megamenu-parent ul {
  background: var(--abs-red-menu);
  border: none;
  padding: 0;
  min-width: 200px;
}
.sp-dropdown-items li a,
.sp-megamenu-parent ul li a {
  color: #fff !important;
  font-weight: bold;
  padding: 8px 16px !important;
  border-bottom: 1px solid var(--abs-red-border);
  background: transparent;
}
.sp-dropdown-items li a:hover,
.sp-megamenu-parent ul li a:hover {
  background: var(--abs-red-dark) !important;
}

/* ----------------------------------------------------------------------------
   4. Hero-/Banner-Bereich
   Bestätigte Struktur (per DevTools): <section id="sp-section-1"> > .container
   > .container-inner > .row > div#sp-title.col-lg-12 > .sp-column
   Text (Absätze) und Bild liegen als Geschwister-Elemente direkt darin –
   Bild wird per float rechts platziert, Text bekommt den roten Kasten.
   ---------------------------------------------------------------------------- */
#sp-title,
#sp-section-1 {
  margin: 20px 0;
}
#sp-title .sp-column {
  background: var(--abs-red) !important;
  border-radius: var(--abs-radius);
  overflow: hidden;      /* clearfix für das gefloatete Bild */
  padding: 20px;
}
#sp-title .sp-column img {
  float: right;
  width: 42%;
  max-width: 460px;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  margin: 0 0 10px 20px;
  display: block;
}
#sp-title .sp-column p,
#sp-title .sp-column h1,
#sp-title .sp-column h2,
#sp-title .sp-column h3,
#sp-title .sp-column h4,
#sp-title .sp-column div {
  color: #fff !important;
  font-family: var(--abs-font-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
}
#sp-title .sp-column a { color: #fff; text-decoration: underline; }

/* Falls das Modul stattdessen im Titel-/Page-Header-Bereich sitzt statt in
   einer eigenen Sektion, greift diese Variante zusätzlich (schadet nicht,
   falls ungenutzt): */
.sp-banner,
#sp-banner,
.abs-banner {
  display: flex;
  flex-wrap: wrap;
  background: var(--abs-red);
  border-radius: var(--abs-radius);
  overflow: hidden;
  margin: 20px 0;
}
.abs-banner .abs-banner-text,
.sp-banner .banner-text {
  flex: 1 1 380px;
  color: #fff;
  font-family: var(--abs-font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  padding: 30px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.abs-banner img,
.sp-banner img {
  flex: 1 1 500px;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Große Willkommens-Überschrift / Goethe-Zitat im Content-Bereich
   (bestätigte Klassen: .article-header, .article-content) */
#sp-component h2,
.item-page h2,
.article-header h1,
.article-header h2 {
  font-family: var(--abs-font);
  color: var(--abs-text);
  font-weight: bold;
}
.article-content {
  color: var(--abs-text);
  line-height: 1.7;
}
.article-content blockquote,
.article-content em,
.article-content i {
  font-family: var(--abs-font-serif);
}
.abs-quote {
  font-family: var(--abs-font-serif);
  font-style: italic;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  margin: 20px 0;
}
.abs-quote cite {
  display: block;
  font-style: normal;
  font-size: 13px;
  margin-top: 8px;
  color: var(--abs-text-light);
}

/* ----------------------------------------------------------------------------
   5. Sidebar-Module (linke/rechte Spalte)
   Roter Kasten mit weißem Titel-Balken, Listeneinträge mit gestrichelter
   Trennlinie und kleinem Pfeil-Bullet – wie im Original module_menu/.menu
   ---------------------------------------------------------------------------- */
#sp-left .sp-module,
#sp-right .sp-module {
  background: var(--abs-red);
  border-radius: var(--abs-radius);
  margin-bottom: 10px;
  overflow: hidden;
  padding: 15px !important;
  border-bottom: 1px solid #fff;
}
#sp-left .sp-module-title,
#sp-right .sp-module-title,
#sp-left .sp-module h3,
#sp-right .sp-module h3 {
  font-family: var(--abs-font);
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 7px 12px;
  margin: 0;
}
#sp-left .sp-module-content,
#sp-right .sp-module-content {
  padding: 4px 12px 8px;
  color: #fff;
  font-size: 12.5px;
}

/* Menüs/Linklisten innerhalb der Sidebar-Module */
#sp-left .sp-module-content ul,
#sp-right .sp-module-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#sp-left .sp-module-content li,
#sp-right .sp-module-content li {
  padding: 4px 0 4px 13px;
  margin: 0;
  position: relative;
  line-height: 1.3;
  border-bottom: 1px dashed rgba(255,255,255,0.4);
}
#sp-left .sp-module-content li::before,
#sp-right .sp-module-content li::before {
  content: "»";
  position: absolute;
  left: 0;
  top: 10px;
  font-size: 11px;
  color: #fff;
}
#sp-left .sp-module-content li:last-child,
#sp-right .sp-module-content li:last-child { border-bottom: none; }

#sp-left .sp-module-content a,
#sp-right .sp-module-content a {
  color: #fff;
  text-decoration: none;
	line-height: 25px !important;
}
#sp-left .sp-module-content a:hover,
#sp-right .sp-module-content a:hover { text-decoration: underline; }

/* Aktueller Menüpunkt in der Sidebar (mit !important, da Helix diese
   Zustände teils selbst spezifischer/schwarz einfärbt) */
#sp-left .sp-module-content li.active,
#sp-right .sp-module-content li.active,
#sp-left .sp-module-content li.current,
#sp-right .sp-module-content li.current,
#sp-left .sp-module-content a.active,
#sp-right .sp-module-content a.active,
#sp-left .sp-module-content li.active > a,
#sp-right .sp-module-content li.active > a {
  background: var(--abs-red-dark) !important;
  color: #fff !important;
}

/* ----------------------------------------------------------------------------
   6. Footer
   Dunkelroter Balken mit weißen, fett gedruckten Links
   ---------------------------------------------------------------------------- */
/* #sp-footer ist die per DevTools bestätigte ID; die -1..4-Varianten
   bleiben als harmloser Fallback für andere Helix-Layouts stehen. */
#sp-footer,
#sp-footer1, #sp-footer2, #sp-footer3, #sp-footer4,
#sp-bottom1, #sp-bottom2, #sp-bottom3, #sp-bottom4 {
  background: var(--abs-red) !important;
  color: #fff;
  padding: 15px 0;
}
#sp-footer a,
#sp-footer1 a, #sp-footer2 a, #sp-footer3 a, #sp-footer4 a,
#sp-bottom1 a, #sp-bottom2 a, #sp-bottom3 a, #sp-bottom4 a {
  color: #fff !important;
  font-weight: bold;
  text-decoration: none;
}
#sp-footer a:hover,
#sp-footer1 a:hover, #sp-footer2 a:hover, #sp-footer3 a:hover, #sp-footer4 a:hover,
#sp-bottom1 a:hover, #sp-bottom2 a:hover, #sp-bottom3 a:hover, #sp-bottom4 a:hover {
  text-decoration: underline;
}

#sp-copyright {
  background: var(--abs-red-dark);
  color: #fff;
  font-size: 12px;
  padding: 12px 0;
  text-align: center;
}
#sp-copyright a { color: #fff; }

/* ----------------------------------------------------------------------------
   7. Buttons / Formulare allgemein
   ---------------------------------------------------------------------------- */
.btn, .button, input[type="submit"] {
  background: var(--abs-red);
  color: #fff !important;
  border: none;
  border-radius: 3px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
}
.btn:hover, .button:hover, input[type="submit"]:hover {
  background: var(--abs-red-dark);
}

/* ----------------------------------------------------------------------------
   8. Responsive – bewusst zurückhaltend, damit Helix' eigenes
      Mobilmenü/Grid nicht beeinträchtigt wird
   ---------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .abs-banner { flex-direction: column; }
  .abs-banner .abs-banner-text { padding: 20px; font-size: 14px; }
}