/* =========================================================
   rsk2026 - Template-CSS
   Nachbau des Artisteer-Designs "rskaufering2019b" mit
   modernem, wartbarem CSS (kein Framework noetig).
   ========================================================= */

:root {
  /* Farben, abgeleitet aus dem bisherigen Design */
  --rsk-nav-dark:      #00222e;
  --rsk-nav-mid:       #004057;
  --rsk-nav-border:    #bfd0d2;
  --rsk-nav-text:      #d5e0e2;
  --rsk-accent:        #30a4d6;
  --rsk-accent-light:  #4dd0ff;
  --rsk-accent-dark:   #195f7d;
  --rsk-bg-top:        #b4c8cb;
  --rsk-bg-bottom:     #ffffff;
  --rsk-card-bg:       #d2e8ef;
  --rsk-card-border:   #bcdce8;
  --rsk-sidebar-bg:    #a9cdd6;
  --rsk-text:          #223338;
  --rsk-link:          #0e6a8f;
  --rsk-font-body:     'Open Sans', Arial, 'Arial Unicode MS', Helvetica, sans-serif;
  --rsk-font-heading:  'Handlee', Arial, 'Arial Unicode MS', Helvetica, sans-serif;
  --rsk-radius:         10px;
  --rsk-max-width:      1280px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--rsk-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--rsk-text);
}

/* Der strukturierte Seitenhintergrund soll NUR auf der echten Website erscheinen,
   nicht im Joomla-Backend-Editor (TinyMCE laedt zur Vorschau ebenfalls dieses CSS,
   hat aber kein #rsk-page-Element - dort bleibt der Hintergrund dann schlicht weiss). */
body:has(#rsk-page) {
  background-color: var(--rsk-bg-top);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)),
    linear-gradient(to bottom, rgba(142, 172, 177, 0.35) 0, rgba(255, 255, 255, 0.55) 320px),
    url('../images/page-bg.jpeg');
  background-repeat: no-repeat, no-repeat, repeat;
  background-attachment: fixed, fixed, fixed;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--rsk-font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: #0b3b4b;
  margin: 0 0 .5em;
}
h1 { font-size: 2.6rem; }
h2 { font-size: 2.1rem; }
h3 { font-size: 1.7rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1.05rem; }

a { color: var(--rsk-link); text-decoration: none; font-weight: 700; }
a:hover { color: var(--rsk-accent-dark); text-decoration: none; }

img { max-width: 100%; height: auto; }

/* Joomla-Kernmarkup nutzt diese Klasse fuer Text, der nur fuer Screenreader
   gedacht ist (z.B. Untermenue-Beschriftungen) - normalerweise liefert
   Bootstrap das mit, das unser schlankes Template aber nicht laedt. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: #fff;
  padding: 8px 14px;
  z-index: 1000;
}
.skip-link:focus { left: 8px; top: 8px; }

#rsk-page {
  max-width: var(--rsk-max-width);
  margin: 20px auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 0 0 14px #fff, 0 0 28px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

/* ===================== Header ===================== */

.rsk-header {
  position: relative;
  background: var(--rsk-nav-dark);
}

.rsk-header-inner {
  position: absolute;
  z-index: 5;
  left: 24px;
  top: 20px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.rsk-brand { text-decoration: none; display: block; }

.rsk-title {
  display: block;
  font-family: var(--rsk-font-heading);
  font-size: 40px;
  color: #fff;
}

.rsk-slogan {
  display: block;
  font-size: 16px;
  color: #d9ecf3;
}

.rsk-header-simple .rsk-header-inner { position: static; padding: 20px; color: #fff; }

/* ---- Slider ---- */

.rsk-slider {
  position: relative;
  height: 260px;
  overflow: hidden;
}

/* Smart Slider 3 (oder ein anderes Slider-Modul) bringt seine eigene
   Groessen-/Responsive-Logik mit - hier nicht in eine feste Hoehe zwaengen. */
.rsk-slider.rsk-slider-module {
  height: auto;
  overflow: visible;
}

.rsk-slider-track { position: relative; height: 100%; }

.rsk-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.rsk-slide.is-active { opacity: 1; }

.rsk-slider-prev,
.rsk-slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 34, 46, .45);
  color: #fff;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 6;
  font-size: 16px;
  line-height: 1;
}
.rsk-slider-prev { left: 12px; }
.rsk-slider-next { right: 12px; }
.rsk-slider-prev:hover,
.rsk-slider-next:hover { background: rgba(0, 34, 46, .75); }

.rsk-slider-dots {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 6;
}

.rsk-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, .3);
  padding: 0;
  cursor: pointer;
}
.rsk-dot.is-active { background: #fff; }

/* ===================== Navigation ===================== */

.rsk-nav {
  background: var(--rsk-nav-mid);
  background: linear-gradient(to bottom, var(--rsk-nav-dark) 0, var(--rsk-nav-mid) 20%, var(--rsk-nav-mid) 80%, var(--rsk-nav-dark) 100%);
  border-top: 2px solid var(--rsk-nav-border);
  border-bottom: 2px solid var(--rsk-nav-border);
}

.rsk-nav-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 4px 12px;
}

.rsk-nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
}
.rsk-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--rsk-nav-text);
  margin: 5px 0;
}

.rsk-nav-menu ul,
.rsk-nav-extra ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.rsk-nav-extra { margin-left: auto; }

.rsk-nav-menu li { position: relative; }

.rsk-nav-menu a,
.rsk-nav-extra a {
  display: block;
  padding: 10px 14px;
  margin: 3px;
  border-radius: 7px;
  color: var(--rsk-nav-text);
  text-decoration: none;
  font-size: 19px;
  font-weight: 700;
  border: 1px solid transparent;
}

.rsk-nav-menu a:hover,
.rsk-nav-menu a:focus,
.rsk-nav-extra a:hover {
  background: var(--rsk-accent);
  border-color: #5f8287;
  color: #0e3648;
}

.rsk-nav-menu li.current > a,
.rsk-nav-menu li.active > a {
  background: var(--rsk-accent);
  border-color: var(--rsk-accent-dark);
  color: #003f56;
}

/* Untermenues */
.rsk-nav-menu li ul {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 200px;
  background: var(--rsk-nav-mid);
  border: 1px solid var(--rsk-nav-border);
  border-radius: 0 0 7px 7px;
  display: none;
  z-index: 50;
  padding: 4px;
}
.rsk-nav-menu li:hover > ul,
.rsk-nav-menu li:focus-within > ul,
.rsk-nav-menu li.is-focused > ul { display: block; }
.rsk-nav-menu .mod-menu__toggle-sub { display: none; }
.rsk-nav-menu li ul li { width: 100%; }
.rsk-nav-menu li ul a { font-size: 15px; }

/* ===================== Banner ===================== */

.rsk-banner-top { padding: 12px 24px 0; text-align: center; }

/* ===================== Blockreihen (3-spaltig) ===================== */

.rsk-blockrow {
  display: grid;
  gap: 20px;
  padding: 20px 24px 0;
}
.rsk-blockrow-3 { grid-template-columns: repeat(3, 1fr); }

/* ===================== Layout: Sidebar + Inhalt ===================== */

.rsk-layout {
  display: grid;
  gap: 24px;
  padding: 24px;
}
.rsk-layout-sidebar { grid-template-columns: 260px 1fr; }
.rsk-layout-full { grid-template-columns: 1fr; }

.rsk-sidebar {
  min-width: 0;
  background: var(--rsk-sidebar-bg);
  border-radius: var(--rsk-radius);
  padding: 14px;
}
.rsk-content { min-width: 0; }

/* Fallback: falls ein Modul in der Sidebar OHNE unser rsk-card-Design
   ausgegeben wird (z.B. weil im Modul ein anderer Stil gewaehlt wurde),
   bekommt eine direkt in der Sidebar liegende Liste trotzdem die
   blaue Box-Optik, statt als nackte Aufzaehlung zu erscheinen. */
.rsk-sidebar > ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 10px 16px;
  background: var(--rsk-card-bg);
  border: 3px solid #fff;
  border-radius: var(--rsk-radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.rsk-sidebar > ul li { padding: 4px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.rsk-sidebar > ul li:last-child { border-bottom: 0; }
.rsk-sidebar > ul a { text-decoration: none; color: var(--rsk-link); }
.rsk-sidebar > ul a:hover { color: var(--rsk-accent-dark); }

/* Auf-/Zuklappbares Untermenue im Sidebar-Menue - eigene, einfache Umsetzung
   (unabhaengig von Joomlas Kern-Skript/Sprachstring), gesteuert ueber das
   aria-expanded-Attribut des Buttons, das unser eigenes JS umschaltet. */
.rsk-sidebar .mod-menu__toggle-sub {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--rsk-link);
  padding: 4px 8px;
  font-size: 14px;
  float: right;
}
.rsk-sidebar .mod-menu__toggle-sub .icon-chevron-down {
  display: inline-block;
  transition: transform 0.2s ease;
}
.rsk-sidebar .mod-menu__toggle-sub[aria-expanded="true"] .icon-chevron-down {
  transform: rotate(180deg);
}
.rsk-sidebar .mod-menu__sub {
  display: none;
  list-style: none;
  margin: 2px 0 8px 16px;
  padding: 0;
}
.rsk-sidebar .mod-menu__toggle-sub[aria-expanded="true"] + .mod-menu__sub {
  display: block;
}
.rsk-sidebar .mod-menu__sub li { border-bottom: none; }
.rsk-sidebar .mod-menu__sub a { font-size: 14px; padding: 4px 4px; }

.rsk-content h1:first-child,
.rsk-content h2:first-child { margin-top: 0; }

/* Hinweis: Der automatische Joomla-Seitentitel (z.B. "Start") wird jetzt direkt im
   Menuepunkt deaktiviert (Seitenanzeige > Seitenueberschrift anzeigen: Nein) statt
   hier per CSS verkleinert. So bleiben echte <h1>-Ueberschriften in Beitraegen
   unangetastet und werden ganz normal gross/fett dargestellt. */

/* ===================== Karten / Module ("art-block"-Nachbau) ===================== */

.rsk-card {
  background: var(--rsk-card-bg);
  border: 3px solid #fff;
  border-radius: var(--rsk-radius);
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.rsk-card-title {
  background: var(--rsk-accent);
  color: #04303f;
  font-family: var(--rsk-font-heading);
  font-size: 20px;
  padding: 10px 16px;
}

.rsk-card-body { padding: 14px 16px; }

.rsk-card-body ul { list-style: none; margin: 0; padding: 0; }
.rsk-card-body ul li { border-bottom: 1px solid rgba(0,0,0,.06); }
.rsk-card-body ul li:last-child { border-bottom: 0; }
.rsk-card-body ul a {
  display: block;
  padding: 8px 4px;
  text-decoration: none;
  color: var(--rsk-link);
}
.rsk-card-body ul a:hover { color: var(--rsk-accent-dark); }

/* ===================== Buttons ===================== */

.rsk-content .btn,
.rsk-content button[type="submit"],
.rsk-content input[type="submit"] {
  display: inline-block;
  background: var(--rsk-accent-light);
  border: 0;
  border-radius: 4px;
  padding: 8px 20px;
  color: #04303f;
  text-decoration: none;
  cursor: pointer;
}

/* ===================== Footer ===================== */

.rsk-footer {
  background: var(--rsk-nav-dark);
  color: #cfe3ea;
  padding: 18px 24px;
  text-align: center;
  font-size: 14px;
}
.rsk-footer a { color: #9fd7ef; }
.rsk-footer ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.rsk-copyright { margin: 8px 0 0; opacity: .85; }

/* ===================== Fehlerseite ===================== */

.rsk-error-content { padding: 60px 24px; text-align: center; }
.rsk-error-content h1 { font-size: 80px; }

/* ===================== Komponenten-/Druckansicht ===================== */

.rsk-component-only { padding: 24px; max-width: 900px; margin: 0 auto; box-shadow: none; }

/* ===================== Breite Tabellen (mobil) ===================== */

/* Wird per JS automatisch um jede Tabelle im Beitragstext gelegt, damit
   breite mehrspaltige Tabellen auf dem Handy nur INNERHALB sich selbst
   seitlich scrollen, statt die ganze Seite in die Breite zu drücken. */
.rsk-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1em;
  max-width: 100%;
}
.rsk-table-scroll table { margin-bottom: 0; }

/* Sicherheitsnetz: verhindert, dass irgendein Element (z.B. ein zu breites
   Bild oder eine alte Tabelle ohne obige Umhuellung) die ganze Seite nach
   rechts aufsprengt. */
body { overflow-x: hidden; }

/* ===================== Responsive ===================== */

@media (max-width: 900px) {
  .rsk-layout-sidebar { grid-template-columns: 1fr; }
  .rsk-blockrow-3 { grid-template-columns: 1fr; }
  .rsk-title { font-size: 30px; }
  .rsk-slider { height: 180px; }
}

@media (max-width: 700px) {
  .rsk-nav-toggle { display: block; order: 1; }
  .rsk-nav-menu { display: none; width: 100%; order: 3; }
  .rsk-nav-menu.is-open { display: block; }
  .rsk-nav-menu ul { flex-direction: column; }
  .rsk-nav-extra { order: 2; margin-left: 0; }
  .rsk-header-inner { position: static; padding: 16px; }
  .rsk-slider { height: 140px; }
  #rsk-page { margin: 8px auto; border-radius: 10px; box-shadow: 0 0 0 6px #fff, 0 0 16px rgba(0, 0, 0, 0.18); }
}