/* ============================================================
   RCT – Rallos Contao Toolbox
   rct-layout.css v2.0.0
   Design: Clinical Architect / Tech Inspector Aesthetic

   INHALT DIESER DATEI:
   1.  Font Declarations
   2.  CSS Custom Properties (Design Tokens)
       2a. Surface-Farben & Semantic Colors (für Content-Karten)
       2b. Standard-Theme: Blue Night
       2c. Theme: Lime
       2d. Theme: Purple
       2e. Accent-abhängige Styles (Links, Überschriften, Selektion)
   3.  CSS Reset & Basis
   4.  Page Skeleton (#wrapper, #mainContainer)
   5.  Header (#header)
   6.  Sidebar Links (#left)
   7.  Sidebar Rechts (#right)  ← Nachrüstung: Spiegelverkehrtes #left
   8.  Main Content (#main, .rct-content-inner)
   9.  Bottom (#bottom)
   10. Hintergrund-Animationen (Aurora-Canvas + Dots-Canvas)
   11. Responsive (≥ 1025px Desktop | ≤ 1024px Tablet/Mobile | ≤ 767px Mobile)
   12. Hamburger-Button Animation
   13. Global Overlay für Pop-Ups etc
   14. Blitzschutz / FOUC-Guard
   ============================================================ */


/* ------------------------------------------------------------
   1. FONT DECLARATIONS
   ------------------------------------------------------------ */

@font-face {
  font-display: swap;
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/space-grotesk-v22-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/space-grotesk-v22-latin-700.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dm-mono-v16-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'DM Mono';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/dm-mono-v16-latin-italic.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/dm-mono-v16-latin-500.woff2') format('woff2');
}


/* ------------------------------------------------------------
   2. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ------------------------------------------------------------ */

:root {

  /* --- 2a. Surface-Farben (für Content-Karten & helle Flächen) --- */

  /* Fehler / Status */
  --rct-error:                    #ba1a1a;
  --rct-error-container:          #ffdad6;

  /* Helles Surface-System */
  --rct-bg:                       #fbf9f8;
  --rct-surface:                  #ffffff;
  --rct-surface-low:              #f6f3f2;
  --rct-surface-mid:              #f0eded;
  --rct-surface-high:             #eae8e7;
  --rct-surface-highest:          #e4e2e1;
  --rct-surface-dim:              #dcd9d9;

  /* Content-Texte (für Artikel auf hellem Surface) */
  --rct-text:                     #1b1c1c;
  --rct-text-muted:               #434936;
  --rct-text-faint:               #747a64;
  --rct-caption-color:            var(--rct-text-faint);
  --rct-outline:                  #c3c9b1;

  /*  2b. Standard-Theme: Blue Night --- */

  --rct-primary:                  #2951c7;
  --rct-primary-light:            #27c4f4;
  --rct-primary-dim:              #a5d737;
  --rct-primary-fixed:            #c0f452;
  --rct-primary-container:        rgba(41,81,199,0.12);

  --rct-secondary:                #704f98;
  --rct-secondary-light:          #d4aeff;
  --rct-secondary-container:      rgba(112,79,152,0.12);

  --rct-accent:                   #27c4f4;
  --rct-bg-dots:                  rgba(214, 214, 214, 0.75);

  --rct-main-alpha: 0.0; /* Aurora Alpha *"

  /* Aurora-Gradient Farben (werden von gradient.js per CSS-Variable gelesen) */
  --grad-1: #27c4f4;
  --grad-2: #2951c7;
  --grad-3: #1d2db2;
  --grad-4: #14054a;

  /* Dark Shell (Sidebar, Header, Bottom) */
  --rct-shell-bg:                 #171717;
  --rct-shell-border:             rgba(255,255,255,0.08);
  --rct-shell-text:               #ffffff;
  --rct-shell-muted:              #c7c7c7;
  --rct-shell-hover:              rgba(255,255,255,0.13);

  /* Garantiert-dunkle / -helle Surfaces für Komponenten mit expliziter
   * Mode-Wahl (z.B. .is-dark Kontaktform, .rct-article-bg-dark/-white).
   * NICHT theme-folge! Soll bei jedem Theme — auch den hellen Soft-Themes —
   * den Mode wie gewählt rendern. Plus passende Text-Color Tokens. */
  --rct-surface-dark:              #171717;
  --rct-surface-light:             #f5f5f5;
  --rct-on-surface-dark:           #ffffff;
  --rct-on-surface-light:          #1a1a1a;

  /* --- Typografie --- */
  --rct-font-headline:            'Space Grotesk', sans-serif;
  --rct-font-body:                'Space Grotesk', sans-serif;
  --rct-font-mono:                'DM Mono', monospace;

  /* --- Abstände & Radien --- */
  --rct-radius:                   0.125rem;
  --rct-radius-lg:                0.25rem;
  --rct-radius-xl:                0.5rem;

  /* Footer */
  --rct-footer-display:           none;

  /* --- Layout-Dimensionen --- */
  --rct-sidebar-width:            260px;
  --rct-sidebar-left-width:       260px;
  --rct-sidebar-right-width:      260px;
  --rct-header-height:            64px;
  --rct-bottom-height:            50px;
  --rct-max-width:                1280px;
  --rct-content-width:             1200px;

  /* --- Schatten --- */
  --rct-shadow:                   0 20px 40px rgba(27,28,28,0.06);
  --rct-shadow-sm:                0 4px 12px rgba(27,28,28,0.05);

  /* --- Animation --- */
  --rct-transition-speed:         0.4s;
  --rct-transition-type:          ease;

  /* --- Sidebar Transparenz --- */
  --rct-sidebar-alpha: 0.5;  /* 1.0 = solid | 0.0 = komplett transparent */
  --rct-main-alpha: 0.2;  /* 0.0 = komplett transparent, Aurora voll sichtbar */
}

/* --- 2c. Theme: Lime --- */
[data-theme="lime"] {
  --rct-primary:           #4d8a12;
  --rct-primary-light:     #8aba16;
  --rct-primary-container: rgba(77,138,18,0.12);
  --rct-accent:            #8aba16;
  --rct-sidebar-alpha:     0.5;
  --rct-main-alpha:        0.4;
  --rct-bg-dots:           rgb(255, 255, 255);
  --grad-1: #8aba16;
  --grad-2: #4d8a12;
  --grad-3: #add633;
  --grad-4: #164a1a;
}

/* --- 2d. Theme: Purple --- */
[data-theme="purple"] {
  --rct-primary:            #4c1d95;
  --rct-primary-light:      #a855f7;
  --rct-primary-container:  rgba(76,29,149,0.12);
  --rct-accent:             #704f98;
  --rct-bg-dots:            rgba(216, 180, 254, 0.5);

--rct-sidebar-alpha: 0.45;
--rct-main-alpha: 0.15;
--rct-bg-dots: rgba(255, 255, 255, 0.6);  

  --grad-1: #2d1b4e;
  --grad-2: #1c192e;
  --grad-3: #4c1d95;
  --grad-4: #1e1b4b;
}

/* --- 2e. Theme: Dark Cherry (Velvet Night) --- */
[data-theme="dark-cherry"] {
  --rct-primary:       #c41840;
  --rct-primary-light: #e85570;
  --rct-accent:        #7d0e2d;
  --rct-primary-container: rgba(225, 29, 72, 0.12);
  --rct-sidebar-alpha:     0.6;
  --rct-main-alpha:        0.3;
  --rct-bg-dots:           rgba(255, 255, 255, 0.66);
--grad-1: #33030e;
--grad-2: #a7071a;
--grad-3: #5c0a20;
--grad-4: #770909;



}

/* --- 2f. Theme: Dark Cherry Bloom (Baccara Rose) --- */
[data-theme="dark-cherry-bloom"] {
  --rct-primary:       #c41840;
  --rct-primary-light: #e85570;
  --rct-accent:        #7d0e2d;
  --rct-primary-container: rgba(225, 29, 72, 0.12);
  --rct-sidebar-alpha:     0.6;
  --rct-main-alpha:        0.3;
  --rct-bg-dots:           rgba(255, 100, 100, 0.4);
  --grad-1: #1a0005;
  --grad-2: #6b0015;
  --grad-3: #3d0010;
  --grad-4: #0a0002;
}

/* --- 2g. Theme: Honey Moon (Amber Sunset) --- */
[data-theme="honey-moon"] {
  --rct-primary:           #f59e0b;
  --rct-primary-light:     #fbbf24;
  --rct-primary-container: rgba(245, 158, 11, 0.12);
  --rct-accent:            #d97706;
  --rct-sidebar-alpha:     0.55;
  --rct-main-alpha:        0.3;
  --rct-bg-dots:           rgb(255, 255, 255);
  --grad-1: #835d16;
  --grad-2: #c5b521;
  --grad-3: #d97706;
  --grad-4: #fbbf24;
}

/* --- 2g. Theme: Candy Chaos (Pastel Glitch) --- */
[data-theme="candy-chaos"] {
  --rct-primary:           #f472b6;
  --rct-primary-light:     #7dd3fc;
  --rct-primary-container: rgba(244, 114, 182, 0.2);
  --rct-accent:            #fbbf24;
  --rct-bg-dots:           rgba(255, 255, 255, 0.55);

--rct-sidebar-alpha: 0.35;
--rct-main-alpha: 0.2;
--rct-bg-dots: rgba(255, 255, 255, 0.55);

  --grad-1: #f472b6;
  --grad-2: #7dd3fc;
  --grad-3: #f472b6;
  --grad-4: #fbbf24;
}
/* --- 2k. Theme: Glass Tank --- */
[data-theme="glass-tank"] {
  --rct-primary:           #22FF88;
  --rct-primary-light:     #66ffaa;
  --rct-primary-dim:       #0a6633;
  --rct-primary-fixed:     #22FF88;
  --rct-primary-container: rgba(34, 255, 136, 0.10);
  --rct-accent:            #00cc66;
  --rct-secondary:         #44ffaa;
  --rct-secondary-light:   #99ffcc;
  --rct-sidebar-alpha:     0.45;
  --rct-main-alpha:        0.25;
  --rct-bg-dots:           rgba(34, 255, 136, 0.3);
  --grad-1: #003322;
  --grad-2: #22FF88;
  --grad-3: #004433;
  --grad-4: #00ffaa;
}
[data-theme="glass-tank"] #gradient-canvas {
  mask-image: none;
  -webkit-mask-image: none;
  opacity: 1.0;
}
[data-theme="glass-tank"] #main a,
[data-theme="glass-tank"] #bottom a { color: #22FF88; }

/* --- 2j. Theme: Claudy Sky (FBM Cloud) --- */
[data-theme="claudy-sky"] {
  --rct-primary:           #5ba4e5;
  --rct-primary-light:     #87CEEB;
  --rct-primary-dim:       #2a6aaa;
  --rct-primary-fixed:     #5ba4e5;
  --rct-primary-container: rgba(91, 164, 229, 0.15);
  --rct-accent:            #3b82c4;
  --rct-secondary:         #7ec8f0;
  --rct-secondary-light:   #bde4f7;
  --rct-sidebar-alpha:     0.55;
  --rct-main-alpha:        0.3;
  --rct-bg-dots:           rgba(255, 255, 255, 0.5);
  --grad-1: #4a8fd4;
  --grad-2: #87CEEB;
  --grad-3: #2563a8;
  --grad-4: #c8e8f8;
}
[data-theme="claudy-sky"] #gradient-canvas {
  mask-image: none;
  -webkit-mask-image: none;
  opacity: 1.0;
}
[data-theme="claudy-sky"] #main a,
[data-theme="claudy-sky"] #bottom a { color: #2563a8; }

/* --- 2i. Theme: Toxic Green --- */
[data-theme="toxic-green"] {
  --rct-primary:           #39FF14;
  --rct-primary-light:     #7FFF00;
  --rct-primary-dim:       #1a7a00;
  --rct-primary-fixed:     #39FF14;
  --rct-primary-container: rgba(57, 255, 20, 0.12);
  --rct-accent:            #39FF14;
  --rct-secondary:         #00CC00;
  --rct-secondary-light:   #7FFF00;
  --rct-shell-bg:          #010d01;
  --rct-shell-border:      rgba(57, 255, 20, 0.15);
  --rct-shell-text:        #39FF14;
  --rct-shell-muted:       #1a7a00;
  --rct-shell-hover:       rgba(57, 255, 20, 0.08);
  --rct-sidebar-alpha:     0.85;
  --rct-main-alpha:        0.0;
  --rct-bg-dots:           rgba(57, 255, 20, 0.3);
  --grad-1: #39FF14;
  --grad-2: #00CC00;
  --grad-3: #006600;
  --grad-4: #001a00;
}

/* Dark Cherry Bloom: Maske deaktivieren — Rose wächst von der Mitte, Maske würde sie verstecken */
[data-theme="dark-cherry-bloom"] #gradient-canvas {
  mask-image: radial-gradient(ellipse 80% 75% at center, black 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at center, black 60%, transparent 100%);
  opacity: 1.0;
}

/* Neon Grid + Magnetic Field + Lotus + Plasma + Inversion + Fire + Wave: Maske aus */
[data-theme="neon-grid"] #gradient-canvas,
[data-theme="magnetic-field"] #gradient-canvas,
[data-theme="lotus"] #gradient-canvas,
[data-theme="plasma"] #gradient-canvas,
[data-theme="inversion"] #gradient-canvas,
[data-theme="fire"] #gradient-canvas,
[data-theme="wave"] #gradient-canvas {
  mask-image: none;
  -webkit-mask-image: none;
  opacity: 1.0;
}

/* Starry: Standard-Maske ueberschreiben — innen Sterne sichtbar, aussen ausfaden */
[data-theme="starry"] #gradient-canvas {
  mask-image: radial-gradient(ellipse 80% 75% at center, black 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at center, black 60%, transparent 100%);
  opacity: 1.0;
}

[data-theme="neon-grid"] #rct-dots-canvas { display: none; }
[data-theme="fire"] #rct-dots-canvas { display: none; }
[data-theme="wave"] #rct-dots-canvas { display: none; }
[data-theme="starry"] #rct-dots-canvas { display: none; }

/* Toxic Green: Canvas Hintergrundbild + Maske deaktivieren */
[data-theme="toxic-green"] #gradient-canvas {
  background-image: url('../img/theme-bg-toxic-green.png');
  background-size: cover;
  background-position: center top;
  mask-image: none;
  -webkit-mask-image: none;
}

/* --- 2h. Theme: Sparta (Monochrome) --- */
[data-theme="sparta"] {
  --rct-primary:           #ffffff;
  --rct-primary-light:     #ffffff;
  --rct-primary-dim:       #aaaaaa;
  --rct-primary-fixed:     #ffffff;
  --rct-primary-container: rgba(255, 255, 255, 0.08);

  --rct-secondary:         #888888;
  --rct-secondary-light:   #cccccc;

  --rct-accent:            #ffffff;

  --rct-shell-bg:          #0a0a0a;
  --rct-shell-border:      rgba(255, 255, 255, 0.12);
  --rct-shell-text:        #ffffff;
  --rct-shell-muted:       #888888;
  --rct-shell-hover:       rgba(255, 255, 255, 0.06);

  --rct-sidebar-alpha:     1.0;
  --rct-main-alpha:        1.0;   /* Aurora komplett unsichtbar */
  --rct-bg-dots:           rgba(0, 0, 0, 0);  /* Dots aus */
}

/* --- Theme: Sparta II (Light Shell / Black on White) --- */
[data-theme="sparta2"] {
  /* Brand — Akzentfarbe schwarz/dunkelgrau */
  --rct-primary:             #1a1a1a;
  --rct-primary-light:       #333333;
  --rct-primary-dim:         #666666;
  --rct-primary-fixed:       #000000;
  --rct-primary-container:   rgba(0, 0, 0, 0.06);

  --rct-secondary:           #444444;
  --rct-secondary-light:     #888888;
  --rct-secondary-container: rgba(0, 0, 0, 0.04);

  --rct-accent:              #1a1a1a;

  /* Shell — hell statt dunkel */
  --rct-shell-bg:            #f5f5f5;
  --rct-shell-border:        rgba(0, 0, 0, 0.10);
  --rct-shell-text:          #1a1a1a;
  --rct-shell-muted:         #666666;
  --rct-shell-hover:         rgba(0, 0, 0, 0.05);

  /* Logo-Text im hellen Shell schwarz */
  --rct-logo-muted:          #1a1a1a;

  /* Keine Animationen */
  --rct-bg-dots:             rgba(0, 0, 0, 0);
  --rct-sidebar-alpha:       1.0;
  --rct-main-alpha:          1.0;
}

/* Sparta: Canvas-Elemente komplett ausblenden */
[data-theme="sparta"] #gradient-canvas,
[data-theme="sparta"] #rct-dots-canvas {
  display: none !important;
}
/* Sparta: Main-Background solid schwarz (auf #mainContainer, sonst Sidebar-Snap) */
[data-theme="sparta"] #mainContainer {
  background-color: #0f0f0f;
}

/* Sparta II: Nav-Text für hellen Hintergrund korrigieren */
[data-theme="sparta2"] nav ul li a,
[data-theme="sparta2"] .mod_navigation ul li a {
  text-shadow: none;
  color: var(--rct-shell-muted);
}
[data-theme="sparta2"] #left .mod_navigation ul li a:hover,
[data-theme="sparta2"] #right .mod_navigation ul li a:hover {
  color: var(--rct-shell-text);
  background: var(--rct-shell-hover);
}
[data-theme="sparta2"] .mod_navigation ul li.active > a,
[data-theme="sparta2"] .mod_navigation ul li.trail > a {
  color: var(--rct-shell-text);
  text-shadow: none;
}

/* Spezielle Korrektur für das Overlay im Sparta II Look */
[data-theme="sparta2"] #globalOverlay {
    background: rgba(255, 255, 255, 0.85);
    color: #000;
}
[data-theme="sparta2"] #mainContainer {
  background-color: rgb(233, 233, 237);
}
[data-theme="sparta2"] .rct-search-input {
    border-bottom-color: #fff;
    color: #000;
}
[data-theme="sparta2"] #gradient-canvas,
[data-theme="sparta2"] #rct-dots-canvas {
  display: none !important;
}
html[data-theme="sparta2"] #left,
html[data-theme="sparta2"] #right {
  background: #ffffff !important;
}
html[data-theme="sparta2"] #left::before,
html[data-theme="sparta2"] #right::before {
  background: #ffffff !important;
  opacity: 1 !important;
}



 /*  Hier stehen alle Regeln, die sich mit dem --rct-accent Token ändern:
   Überschriften, Selektion, Links, Trennlinien.
   Komponenten-spezifische Farben bleiben in rct-components.css. --- */

/* Überschriften folgen immer dem Theme-Akzent */
h1, h2, h3, h4, h5, h6 {
  color: var(--rct-accent);
}

/* Trennlinien & Theme-Switcher-Border */
.rct-border, hr, .rct-theme-switcher {
  border-color: var(--rct-accent);
}

/* Textmarkierung */
::selection      { background-color: var(--rct-accent) !important; color: #fff; }
::-moz-selection { background-color: var(--rct-accent) !important; color: #fff; }

/* Links in #main und #bottom (alle drei Themes) */
#main a:not(.rct-btn--primary),
#bottom a {
    color: var(--rct-accent, #27c4f4);
}
#bottom a:hover {
  color: #fff;
}
[data-theme="lime"]   #main a,
[data-theme="lime"]   #bottom a { color: #8aba16; }
[data-theme="purple"] #main a,
[data-theme="purple"] #bottom a { color: #704f98; }
[data-theme="dark-cherry"] #main a,
[data-theme="dark-cherry"] #bottom a { color: #9f1239; }
[data-theme="honey-moon"] #main a,
[data-theme="honey-moon"] #bottom a { color: #d97706; }
[data-theme="honey-moon"] #rct-dots-canvas { display: none; }



[data-theme="honey-moon"] #mainX {  mask-image: radial-gradient(circle at center, transparent 0%, black 55%);}
[data-theme="honey-moon"] #mainX {   mask-image: radial-gradient(circle at center, transparent 0%, black 55%); -webkit-mask-image: radial-gradient(circle at center, transparent 0%, black 55%);}
[data-theme="honey-moon"] #mainX { background-color: rgb(251, 167, 11);}

[data-theme="candy-chaos"] #main a,
[data-theme="candy-chaos"] #bottom a { color: #fbbf24; }

/* Generische Utility-Klassen für Theme-Farbe */
.btn-primary, .active-nav {
  background-color: var(--rct-primary) !important;
  color: #fff;
}
.text-highlight {
  color: var(--rct-primary-light);
}


/* ------------------------------------------------------------
   3. CSS RESET & BASIS
   ------------------------------------------------------------ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--rct-font-body);
  background-color: #000;
  color: var(--rct-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Verhindert Transitions beim initialen Seitenaufruf */
.no-transition * {
  transition: none !important;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#left,
#right {
  will-change: transform;
  background: transparent !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#left::before,
#right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--rct-shell-bg);
  opacity: var(--rct-sidebar-alpha);
  z-index: -1;
  pointer-events: none;
}

/* ------------------------------------------------------------
   4. PAGE SKELETON
   ------------------------------------------------------------ */

#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Optionale Layout-Varianten per Body-Klasse */
body.rct-layout-sidebar #wrapper {
  flex-direction: row;
  flex-wrap: wrap;
}
body.rct-layout-full #wrapper {
  flex-direction: column;
}

#mainContainer {
  display: flex;
  flex: 1;
  overflow-x: hidden;
  position: relative;
  /* BG hier statt auf #main, damit beim Sidebar-Toggle die padding-Änderung
     nicht die gefärbte Box-Breite verschiebt (sonst sichtbarer "Snap"). */
  background-color: rgba(14, 14, 24, var(--rct-main-alpha));
}

/* Kleiner visueller Trenner (z.B. zwischen Header-Icons) */
.separator {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 5px;
}


/* ------------------------------------------------------------
   5. HEADER (#header)
   ------------------------------------------------------------ */

#header {
  height: var(--rct-header-height);
  background: var(--rct-shell-bg);
  border-bottom: 1px solid var(--rct-shell-border);
  position: sticky;
  top: 0;
  z-index: 500;  /* #header – über Sidebars, Dropdowns sichtbar */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  width: 100%;
  box-sizing: border-box;
}

/* Header Links Section — Module floaten als Flex-Row */
#header_left {
  display: contents;
}
#header_left .inside {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

/* Header Rechts Section — Controls rechtsbündig */
#header_right {
  display: contents;
}
#header_right .inside {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
#header_right .inside .block {
  margin: 0;
}
#header_right .inside .rct-lang-switcher,
#header_right .inside .rct-theme-switcher,
#header_right .inside .rct-layout-switcher {
  margin-left: 0.75rem;
}

/* Header Logo */
.rct-header-logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.rct-logo-head {
  height: 36px;
  width: auto;
  display: block;
}

.rct-logo-mobile {
  height: 36px;
  width: auto;
  display: none;
}

@media (max-width: 640px) {
  .rct-logo-head   { display: none; }
  .rct-logo-mobile { display: block; }
}

/* Sidebar-Logo Modul: Desktop/Mobile-Bild */
.rct-logo-img-mobile { display: none; }

@media (max-width: 1024px) {
  .rct-logo-img-desktop { display: none; }
  .rct-logo-img-mobile  { display: block; }
  #left .rct-sidebar-logo:has(.rct-logo-hide-mobile),
  #right .rct-sidebar-logo:has(.rct-logo-hide-mobile) { display: none; }
}


#header .rct-header-brand {
  flex: 1;
  min-width: 0;
  transition: opacity 0.2s ease, max-width 0.2s ease;
}

#header.is-scrolled .rct-header-brand {
  opacity: 0;
  pointer-events: none;
  max-width: 0;
  overflow: hidden;
}

#headerTitle {
  display: none;
}

/* Navigation im Header (wenn keine Sidebar vorhanden) */
#header .mod_navigation ul {
  display: flex;
  gap: 0.5rem;
  list-style: none;
}
#header .mod_navigation ul li a {
  font-family: var(--rct-font-headline);
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rct-shell-muted);
  padding: 0.4rem 0.75rem;
  transition: color 0.15s var(--rct-transition-type);
}
#header .mod_navigation ul li a:hover,
#header .mod_navigation ul li.active > a {
  color: var(--rct-primary-light) !important;
}

/* Breadcrumb im Header */
#headerTitle,
#headerTitle h2 {
  color: var(--rct-primary-light);
}

nav.mod_breadcrumb ul {
  white-space: nowrap;
  overflow: hidden;
}

.header-icon-btn {
  background: transparent;
  border: none;
  color: var(--rct-accent);
  cursor: pointer;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--rct-transition-speed) var(--rct-transition-type), color var(--rct-transition-speed) var(--rct-transition-type);
}
.header-icon-btn:hover {
  color: #fff;
  transform: scale(1.1);
}
.header-icon-btn svg line {
  transition: all 0.4s var(--rct-transition-type);
}
.header-icon-btn:hover svg {
  filter: drop-shadow(0 0 5px var(--rct-accent));
}

/* Fullscreen-Zustand */
:fullscreen .header-icon-btn         { color: #fff; opacity: 0.7; transition: opacity var(--rct-transition-speed) var(--rct-transition-type); }
:fullscreen .header-icon-btn:hover   { opacity: 1; transform: scale(1.1); }

/* Max/Min-Icon-Umschalten */
.header-icon-btn .icon-min                   { display: none; }
.header-icon-btn.is-active .icon-max         { display: none; }
.header-icon-btn.is-active .icon-min         { display: block; animation: zoomIn 0.4s var(--rct-transition-type); }

@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}



/* --- Breadcrumb (Tech Inspector Path) --- */

.mod_breadcrumb {
  margin-left: 5px;
  padding: 0;
  display: flex;
  align-items: center;
}

/* Terminal-Prompt-Prefix ▸ — dominantes Scan-Cursor-Element */
.mod_breadcrumb ul::before {
  content: "▸";
  font-family: var(--rct-font-mono);
  font-size: 2rem;
  color: var(--rct-accent);
  margin-right: 0.25rem;
  opacity: 0.9;
  line-height: 1;
  text-shadow: 0 0 14px color-mix(in srgb, var(--rct-accent) 70%, transparent);
  position: relative;
  top: -4px;
}

.mod_breadcrumb ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.mod_breadcrumb li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--rct-font-mono);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rct-shell-muted);
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

/* Separator: / in Accent-Farbe */
.mod_breadcrumb li:not(:last-child)::after {
  content: "/";
  margin: 0 2px;
  font-family: var(--rct-font-mono);
  font-size: 0.82rem;
  color: var(--rct-accent);
  opacity: 1;
  font-weight: 600;
}

/* Aktives / letztes Item: Accent-Glow */
.mod_breadcrumb li.last,
.mod_breadcrumb li:last-child {
  color: var(--rct-accent);
  opacity: 1;
}

.mod_breadcrumb li.last a,
.mod_breadcrumb li.last span,
.mod_breadcrumb li:last-child a,
.mod_breadcrumb li:last-child span {
  color: var(--rct-accent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--rct-accent) 60%, transparent);
  opacity: 1;
}

/* Links im Breadcrumb */
.mod_breadcrumb a,
.mod_breadcrumb span,
.mod_breadcrumb .active {
  font-family: var(--rct-font-mono);
  font-size: 0.82rem;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  padding: 0;
}

.mod_breadcrumb a:hover {
  color: var(--rct-accent);
  opacity: 0.85;
}



/* ------------------------------------------------------------
   5b. NAVBAR (Horizontales Header-Menü)
   Sticky, mit Logo-Fallback, für rct-layout-topnav
   ------------------------------------------------------------ */

#navbar {
position: sticky;
  top: 0;
  z-index: 800;
  background: var(--rct-shell-bg);
  border-bottom: 1px solid var(--rct-shell-border);
  max-width: var(--rct-max-width);
  overflow: visible;
  transition: box-shadow 0.3s ease;
  margin: 1px auto 0;

}

.rct-navbar-bg {
  position: relative;
  z-index: 900;
  margin: auto;
}

/* Schatten wenn gescrollt – wird per JS gesetzt */
#navbar.is-scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  padding-top: 23px;
}


.rct-navbar-inner {
  max-width: var(--rct-max-width);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  gap: 2rem;
  overflow: visible;  /* ← NEU */
}

/* Logo in der Navbar */
.rct-navbar-logo {
  font-family: var(--rct-font-headline);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--rct-shell-text);
  white-space: nowrap;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.rct-navbar-logo:hover {
  color: var(--rct-accent);
}

/* Menü-Container */
.rct-navbar-menu {
  position: relative;
  z-index: 510;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}


#navbar .mod_navigation ul {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  list-style: none;
}
/* Navbar Level 1 – horizontal */
#navbar .mod_navigation ul.level_1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}

#navbar .mod_navigation ul.level_1 > li {
  position: relative;
}

#navbar .mod_navigation ul.level_1 > li > a {
  display: block;
  padding: 0.4rem 0.875rem;
  font-family: var(--rct-font-headline);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--rct-shell-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--rct-radius);
  transition: color 0.2s ease, background 0.2s ease;
}

#navbar .mod_navigation ul.level_1 > li > a:hover,
#navbar .mod_navigation ul.level_1 > li.trail > a,
#navbar .mod_navigation ul.level_1 > li.active > a {
  color: var(--rct-shell-text);
  background: var(--rct-shell-hover);
  border-bottom: 2px solid var(--rct-accent);
}

#navbar .mod_navigation ul.level_1 > li.active > a {
  color: var(--rct-shell-text);
}

/* Aktiv-Linie unten */
#navbar .mod_navigation ul.level_1 > li > a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 3px;
  right: 0px;
  height: 4px;
  background: var(--rct-accent);
  transform: scaleX(0);
  transition: transform 0.2s ease;
  opacity: 0.5;
}
#navbar .mod_navigation ul.level_1 > li.active > a::after,
#navbar .mod_navigation ul.level_1 > li.trail > a::after {
  transform: scaleX(1);
}

/* Level 2 – Dropdown */
#navbar .mod_navigation ul.level_2 {
  display: none;
  position: fixed;
  flex-direction: column;
  background: #1a1a1a;
  border: 1px solid var(--rct-shell-border);
  border-radius: var(--rct-radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  z-index: 9000;
  list-style: none;
}

#navbar .mod_navigation ul.level_1 > li:hover ul.level_2,
#navbar .mod_navigation ul.level_1 > li.is-hover ul.level_2 {
  display: flex;
}

#navbar .mod_navigation ul.level_2 > li > a {
  display: block;
  padding: 0.5rem 1rem;
  font-family: var(--rct-font-headline);
  font-size: 0.8125rem;
  color: var(--rct-shell-muted);
  white-space: nowrap;
  transition: all 0.15s ease;
}

#navbar .mod_navigation ul.level_2 > li > a:hover {
  color: var(--rct-shell-text);
  background: var(--rct-shell-hover);
}

/* Level 3 – Dropdown rechts */
#navbar .mod_navigation ul.level_3 {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  flex-direction: column;
  background: #1a1a1a;
  border: 1px solid var(--rct-shell-border);
  border-radius: var(--rct-radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  z-index: 310;
  list-style: none;
}

#navbar .mod_navigation ul.level_2 > li {
  position: relative;
}

#navbar .mod_navigation ul.level_2 > li:hover ul.level_3,
#navbar .mod_navigation ul.level_2 > li.is-hover ul.level_3 {
  display: flex;
}

#navbar .mod_navigation ul.level_3 > li > a {
  display: block;
  padding: 0.5rem 1rem;
  font-family: var(--rct-font-headline);
  font-size: 0.8125rem;
  color: var(--rct-shell-muted);
  white-space: nowrap;
  transition: all 0.15s ease;
}

#navbar .mod_navigation ul.level_3 > li > a:hover {
  color: var(--rct-shell-text);
  background: var(--rct-shell-hover);
}

#navbar .mod_navigation ul.level_3 > li {
  position: relative;
}

#navbar .mod_navigation ul.level_4 {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  flex-direction: column;
  background: #1a1a1a;
  border: 1px solid var(--rct-shell-border);
  border-radius: var(--rct-radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  z-index: 320;
  list-style: none;
}

#navbar .mod_navigation ul.level_3 > li:hover ul.level_4,
#navbar .mod_navigation ul.level_3 > li.is-hover ul.level_4 {
  display: flex;
}

#navbar .mod_navigation ul.level_4 > li > a {
  display: block;
  padding: 0.5rem 1rem;
  font-family: var(--rct-font-headline);
  font-size: 0.8125rem;
  color: var(--rct-shell-muted);
  white-space: nowrap;
  transition: all 0.15s ease;
}

#navbar .mod_navigation ul.level_4 > li > a:hover {
  color: var(--rct-shell-text);
  background: var(--rct-shell-hover);
}







/* Mobile */
@media (max-width: 1024px) {
  .rct-navbar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .rct-navbar-menu {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--rct-shell-bg);
    border-bottom: 1px solid var(--rct-shell-border);
    padding: 1rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .rct-navbar-menu.is-open {
    display: flex;
  }

  #navbar .mod_navigation ul {
    flex-direction: column;
    width: 100%;
    gap: 0;
  }

  #navbar .mod_navigation ul li a {
    width: 100%;
    padding: 0.625rem 0.875rem;
  }

  #navbar .mod_navigation ul li ul {
    position: static;
    display: none;
    box-shadow: none;
    border: none;
    background: rgba(255,255,255,0.04);
    padding-left: 1rem;
    border-radius: 0;
  }

  #navbar .mod_navigation ul li.is-open > ul {
    display: flex;
  }
}


/* ------------------------------------------------------------
   5c. LAYOUT-VARIANTEN (per data-layout Attribut auf <html>)
   ------------------------------------------------------------ */

/* Standard = Sidebar Links, Navbar versteckt */
#navbar { display: none; }

/* TOPNAV
   Layout-Eigenheit: Navbar oben sichtbar, beide Sidebars per default
   raus-translatiert. Push-Modus (Sidebar schiebt Content) ergibt sich
   automatisch ueber das Var-System — siehe Var-Block in Section 10. */
[data-layout="topnav"] #navbar        { display: flex; }
[data-layout="topnav"] #left          { transform: translateX(calc(var(--rct-sidebar-left-width) * -1)); }
[data-layout="topnav"] #right         { transform: translateX(var(--rct-sidebar-right-width)); }
[data-layout="topnav"] #mainContainer { top: -40px; }
[data-layout="topnav"] #mainContainer .rct-content-inner { padding-top: 20px; padding-bottom: 15px;}

/* Topnav: Sidebars temporaer einblendbar per Toggle – kein Storage-Einfluss */
[data-layout="topnav"] body.rct-left-open #left   { transform: translateX(0); }
[data-layout="topnav"] body.rct-right-open #right    { transform: translateX(0); }
[data-layout="topnav"] #rct-nav-toggle    { display: flex; }
[data-layout="topnav"] #rct-right-toggle  { display: flex; }

/* SIDEBAR RECHTS
   Layout-Eigenheit: linke Sidebar default raus, rechte default rein.
   #mainContainer-Padding folgt automatisch den Vars (open=W, closed=0). */
[data-layout="sidebar-right"] #left {
  transform: translateX(calc(var(--rct-sidebar-left-width) * -1));
}
[data-layout="sidebar-right"] body.rct-left-open #left {
  transform: translateX(0);
}
[data-layout="sidebar-right"] #right  { transform: translateX(0); }

/* CLASSIC – kein Sidebar, edge-to-edge Navbar, optionaler leerer Header */
html[data-layout="classic"] #header {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border-bottom: 1px solid var(--rct-accent) !important;
  position: sticky;
  top: 0;
  z-index: 500;
}
@media (min-width: 1025px) {
  html[data-layout="classic"] #header { display: none !important; }
}
/* Header-Module nebeneinander: Burger | Suche | Logo (rechts).
   !important + html-Selektor um andere #header-Regeln zu schlagen. */
html[data-layout="classic"] #header > #classic_header {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 10px 20px !important;
  width: 100%;
}
html[data-layout="classic"] #header #classic_header > .inside {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0 !important;
  width: 100%;
}
html[data-layout="classic"] #header .rct-header-logo-link,
html[data-layout="classic"] #header .rct-logo-link   { order: 1; }
html[data-layout="classic"] #header #rct-nav-toggle  { order: 2; margin-left: auto; }
html[data-layout="classic"] #header .rct-nav-search  { order: 3; }
/* Auf Mobile in Classic die Navbar ausblenden — Menu läuft via #left-Drawer */
@media (max-width: 1024px) {
  html[data-layout="classic"] #navbar { display: none !important; }
}
/* #left in Classic: kein Sidebar-Alpha-Overlay, Logo im Drawer zentriert */
html[data-layout="classic"] #left::before {
  opacity: 1;
}
html[data-layout="classic"] #left .rct-logo-link,
html[data-layout="classic"] #left .rct-header-logo-link {
  display: block;
  text-align: center;
  margin: 10px 15px;
}
[data-layout="classic"] #navbar {
  display: block;
  max-width: none;
  margin: 0;
  position: sticky;
  top: 0;
}
[data-layout="classic"] .rct-classic-navbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 10px 40px;
  max-width: var(--rct-max-width);
  margin: 0 auto;
  width: 100%;
}
[data-layout="classic"] .rct-classic-navbar-left,
[data-layout="classic"] .rct-classic-navbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* Mehrere Module in einem Section-Slot nebeneinander statt gestapelt */
[data-layout="classic"] .rct-classic-navbar-left .inside,
[data-layout="classic"] .rct-classic-navbar-right .inside {
  display: flex;
  align-items: center;
  gap: 1rem;
}
[data-layout="classic"] .rct-classic-navbar-left .rct-logo-link,
[data-layout="classic"] .rct-classic-navbar-left .rct-header-logo-link {
  display: inline-flex;
  align-items: center;
}
[data-layout="classic"] .rct-classic-navbar-left img,
[data-layout="classic"] .rct-classic-navbar-left svg {
  height: 100px !important;
  width: auto !important;
  max-width: 100%;
  transition: height 0.3s ease;
}
/* Logo-Swap via Opacity-Crossfade statt display:none (kein Layout-Flackern).
   Beide Logos sitzen im selben Stack via absolute Positionierung im Container. */
[data-layout="classic"] .rct-classic-navbar-left {
  position: relative;
}
[data-layout="classic"] .rct-classic-navbar-left .rct-logo-img-mobile,
[data-layout="classic"] .rct-classic-navbar-left .rct-logo-img-desktop {
  transition: opacity 0.25s ease, height 0.3s ease;
}
[data-layout="classic"] .rct-classic-navbar-left .rct-logo-img-mobile {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
/* Mobile-Breakpoint: Mobile-Logo zeigen, Desktop ausblenden */
@media (max-width: 1024px) {
  [data-layout="classic"] .rct-classic-navbar-left .rct-logo-img-desktop {
    opacity: 0;
    pointer-events: none;
  }
  [data-layout="classic"] .rct-classic-navbar-left .rct-logo-img-mobile {
    opacity: 1;
    pointer-events: auto;
    position: static;
    transform: none;
  }
}
/* Scrolled auf Desktop: Mobile-Logo einfaden, Desktop ausfaden, alle imgs kompakt */
@media (min-width: 1025px) {
  [data-layout="classic"] #navbar.is-scrolled .rct-classic-navbar-left .rct-logo-img-desktop {
    opacity: 0;
    pointer-events: none;
  }
  [data-layout="classic"] #navbar.is-scrolled .rct-classic-navbar-left .rct-logo-img-mobile {
    opacity: 1;
    pointer-events: auto;
  }
  [data-layout="classic"] #navbar.is-scrolled .rct-classic-navbar-left img,
  [data-layout="classic"] #navbar.is-scrolled .rct-classic-navbar-left svg {
    height: 50px !important;
    width: 300px !important;
  }
}
/* is-scrolled Padding-Sprung aus dem Sidebar-Layout neutralisieren */
[data-layout="classic"] #navbar.is-scrolled {
  padding-top: 0;
}
[data-layout="classic"] #navbar {
  transition: box-shadow 0.3s ease;
  background: #fff;
}
/* Classic Nav: reiner Text, keine Button-Styles, keine Underlines */
[data-layout="classic"] #navbar .mod_navigation ul.level_1 > li > a {
  color: var(--rct-text-muted);
  text-shadow: none;
}
[data-layout="classic"] #navbar .mod_navigation ul.level_1 > li > a:hover,
[data-layout="classic"] #navbar .mod_navigation ul.level_1 > li.trail > a,
[data-layout="classic"] #navbar .mod_navigation ul.level_1 > li.active > a {
  color: var(--rct-accent);
  background: none;
  border-bottom: 0;
  text-shadow: none;
}
[data-layout="classic"] #navbar .mod_navigation ul.level_1 > li > a::after {
  background: transparent;
}
/* Classic Dropdown (Level 2 + 3): helles Theme, gleiche Text-Logik wie Level 1 */
[data-layout="classic"] #navbar .mod_navigation ul.level_2,
[data-layout="classic"] #navbar .mod_navigation ul.level_3 {
  background: #f5f5f5;
  border-color: #e0e0e0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
[data-layout="classic"] #navbar .mod_navigation ul.level_2 > li > a,
[data-layout="classic"] #navbar .mod_navigation ul.level_3 > li > a {
  color: var(--rct-text-muted);
  text-shadow: none;
}
[data-layout="classic"] #navbar .mod_navigation ul.level_2 > li > a:hover,
[data-layout="classic"] #navbar .mod_navigation ul.level_2 > li.trail > a,
[data-layout="classic"] #navbar .mod_navigation ul.level_2 > li.active > a,
[data-layout="classic"] #navbar .mod_navigation ul.level_3 > li > a:hover,
[data-layout="classic"] #navbar .mod_navigation ul.level_3 > li.trail > a,
[data-layout="classic"] #navbar .mod_navigation ul.level_3 > li.active > a {
  color: var(--rct-accent);
  background: #e8e8e8;
}
[data-layout="classic"] #main {
  padding: 0;
  overflow-x: clip;
}
/* Classic: kein Tint auf #mainContainer, sonst leakt's über den body-bg */
[data-layout="classic"] #mainContainer {
  background-color: transparent;
}
/* #left in Classic: nur Mobile-Drawer (Desktop weggeschoben).
   Existing #left-Styling (position:fixed, transform-Animation) greift dann
   per body.rct-left-open Toggle wie in den anderen Layouts. */
@media (min-width: 1025px) {
  [data-layout="classic"] #left { display: none; }
  /* Hamburger-Button in Classic auf Desktop überflüssig */
  [data-layout="classic"] #rct-nav-toggle { display: none; }
}
@media (max-width: 1024px) {
  [data-layout="classic"] #left {
    transform: translateX(calc(var(--rct-sidebar-left-width) * -1));
    top: 0;
    height: 100vh;
  }
  [data-layout="classic"] body.rct-left-open #left {
    transform: translateX(0);
  }
  [data-layout="classic"] #rct-nav-toggle { display: flex; }
}
/* Leere mod_article durch DOM-Breakout des Fullwidth-CE ausblenden
   (end-CE öffnet eine neue mod_article-Hülle; bleibt sie ohne CEs leer) */
.mod_article:not(:has(*)) {
  display: none;
  margin: 0;
  padding: 0;
}
/* Leere rct-content-inner-Hülle (durch DOM-Breakout entstanden) ebenfalls ausblenden,
   sonst bleibt das padding-bottom als sichtbarer Streifen über/unter der Section.
   Greift NUR wenn das einzige Child eine leere mod_article ist — andere Articles
   davor/danach bleiben unangetastet. */
.rct-content-inner:has(> .mod_article:only-child:not(:has(*))) {
  display: none;
}
/* Classic: Article übernimmt die Zentrierung (vorher content-inner),
   ohne Background/Glow-Effekte aus dem Standard-Layout */
[data-layout="classic"] .mod_article {
  max-width: var(--rct-max-width);
  margin: 0 auto;
  padding: 0 20px;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  border-radius: 0;
}
/* Letzter Artikel braucht Platz vor dem fixed Bottom-Bar */
[data-layout="classic"] #main > .mod_article:last-of-type {
  margin-bottom: calc(var(--rct-bottom-height) * 2);
}
/* Fullwidth-Section: ist nach DOM-Breakout direktes Kind von <main>.
   - Classic: main = 100vw → echte 100vw-Breite
   - Sidebar-Layouts: main = Bereich zwischen den Sidebars → wächst auf 100vw
     wenn Sidebars weggetoggelt werden (mainContainer padding 0)
   - Topnav: mainContainer hat padding 0 → 100vw */
.rct-fullwidth {
  width: 100%;
}

/* Article-Level Fullwidth (Custom-Template mod_article_rct_fullwidth):
   Wird vom Listener via DOM-Breakout zur direkten <main>-Tochter.
   Soll edge-to-edge der main-Breite einnehmen, ohne die Constraints aus
   den Standard- bzw. Classic-mod_article-Regeln.
   Doppelklassen-Selektor (.mod_article.rct-fullwidth-article) damit die
   Spezifität die generischen .mod_article-Regeln in rct-components.css
   schlägt (die später geladen wird und sonst gewinnen würde). */
.mod_article.rct-fullwidth-article {
  width: 100%;
  max-width: none;
  margin: 0;
}
/* Default-Reset (kein RCT-BG aktiv): edge-to-edge ohne BG/Shadow/Radius/Padding.
   Mit RCT-BG greifen padding 1.5rem + border-radius var(--rct-radius-lg) + bg
   aus [class*="rct-article-bg-"] / .rct-article-bg-{white,dark,accent}.
   :not([class*="rct-article-shadow-"]) lässt die explizite tl_article-Auswahl
   (none/soft/strong) durchschlagen — sonst würde diese Regel (0,4,0) die
   .mod_article.rct-article-shadow-*-Regel (0,2,0) übersteuern. */
.mod_article.rct-fullwidth-article:not([class*="rct-article-bg-"]):not([class*="rct-article-shadow-"]) {
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
[data-layout="classic"] .mod_article.rct-fullwidth-article {
  max-width: none;
  margin: 0;
  padding: 0;
}
/* Inhalte in der Fullwidth-Section gehen edge-to-edge.
   Wrapper-Chain (swiper, slide, content-image, figure) muss explizit
   100% breit sein, sonst stauchen sie sich auf img-intrinsic-Width. */
.rct-fullwidth .content-swiper,
.rct-fullwidth .swiper,
.rct-fullwidth .swiper-wrapper,
.rct-fullwidth .swiper-slide,
.rct-fullwidth .content-image,
.rct-fullwidth figure {
  width: 100%;
  max-width: none;
}
/* Slider in Fullwidth-Section: keine Pfeile + keine Pagination drunter */
.rct-fullwidth .swiper { padding-bottom: 0; }
.rct-fullwidth .swiper-button-prev,
.rct-fullwidth .swiper-button-next,
.rct-fullwidth .swiper-pagination {
  display: none !important;
}
.rct-fullwidth .swiper-slide > * {
  flex: 1;
  width: 100%;
}
.rct-fullwidth figure {
  margin: 0;
}
.rct-fullwidth img,
.rct-fullwidth video {
  width: 100%;
  height: auto;
  display: block;
}
[data-layout="classic"] #bottom.rct-classic-bottom {
  background: #fff;
  border-top: 1px solid var(--rct-accent);
  color: var(--rct-text-muted);
}
[data-layout="classic"] #bottom.rct-classic-bottom a {
  color: var(--rct-text-muted);
  text-shadow: none;
}
[data-layout="classic"] #bottom.rct-classic-bottom a:hover {
  color: var(--rct-accent);
}

/* FULLSCREEN */
[data-layout="full"] #header          { display: none; }
[data-layout="full"] #navbar          { display: none; }
[data-layout="full"] #left            { display: none; }
[data-layout="full"] #right           { display: none; }
[data-layout="full"] #bottom          { display: none; }
[data-layout="full"] #mainContainer   { padding: 0 !important; }

/* Erzwungenes Ausblenden fuer die rechte Sidebar im Rechts-Layout
   (#mainContainer-Padding folgt automatisch dem Var-System) */
[data-layout="sidebar-right"] body.rct-right-closed #right {
    transform: translateX(100%) !important;
    display: block; /* Sicherstellen, dass es nicht auf display:none steht */
}

/* Mobile Fix: Sicherstellen, dass sie standardmäßig zu ist, außer die Open-Klasse ist da */
@media (max-width: 1024px) {
    [data-layout="sidebar-right"] #right {
        transform: translateX(100%) !important;
    }
    [data-layout="sidebar-right"] body.rct-right-open #right {
        transform: translateX(0) !important;
    }
}


/* ------------------------------------------------------------
   6. SIDEBAR LINKS (#left)
   JS-Klassen: body.rct-left-open (Mobile) | body.rct-left-closed (Desktop)
   ------------------------------------------------------------ */

#left {
  position: fixed;
  z-index: 600;
  top: var(--rct-header-height);
  left: 0;
  bottom: 0;
  margin-top: 1px;
  width: var(--rct-sidebar-left-width);
  height: calc(100vh - var(--rct-header-height) - var(--rct-bottom-height) - 2px);
  background: var(--rct-shell-bg);
  border-right: 1px solid var(--rct-shell-border);
  padding: 10px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--rct-transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Brand-Block */
.rct-brand h1,
.rct-brand .rct-site-title {
  color: var(--rct-shell-text);
  font-family: var(--rct-font-headline);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.2;
  display: none;
}

.rct-brand {
  width: calc(100% - 40px);
  margin: 10px auto;
  position: relative;
}

.rct-logo-link {
  display: block;
  text-decoration: none;
}

.rct-logo-link .rct-logo {
  display: block;
  width: 100%;
  height: auto;
}
#left .rct-brand .rct-version {
  font-family: var(--rct-font-headline);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--rct-shell-muted);
  position: absolute;
  bottom: 10px;
  right: 0px;
}
#right .rct-brand .rct-version {
  font-family: var(--rct-font-headline);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--rct-shell-muted);
  position: absolute;
  bottom: 10px;
  right: 0px;
}

/* Navigation — Höhe wird per JS gesetzt (feste Höhe = kein Logo-Springen) */
#left .inside.sitenavigation,
#right .inside.sitenavigation {
  flex-shrink: 0;
  overflow: visible;   /* Submenus dürfen visuell überlaufen */
  position: relative;
  z-index: 2;          /* Submenus überlagern Logo-Bereich */
}

/* Logo + Footer bleiben hinter expandierenden Submenus */
#left .rct-sidebar-logo,
#right .rct-sidebar-logo,
#left .rct-sidebar-footer,
#right .rct-sidebar-footer {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

#left nav, #right nav,
#left .mod_navigation {
  padding: 0 10px 0 10px;
}
.mod_navigation nav ul,
.mod_navigation ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  position: relative;
}

#left nav ul li a,
#left .mod_navigation ul li a,
#right nav ul li a,
#right .mod_navigation ul li a {
  display: flex;
  align-items: center;
  padding: 10px;
  font-family: var(--rct-font-headline);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.15em;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--rct-shell-muted);
  border-left: 4px solid transparent;
  transition: background 0.15s var(--rct-transition-type), color 0.15s var(--rct-transition-type);
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}
#left .mod_navigation  ul li a:hover,
#left .mod_navigation ul li a:hover {
  background: var(--rct-shell-hover);
  color: var(--rct-shell-text);
  border-left: 4px solid var(--rct-primary-light) !important;
}

#right .mod_navigation  ul li a:hover,
#right .mod_navigation ul li a:hover {
  background: var(--rct-shell-hover);
  color: var(--rct-shell-text);
  border-right: 4px solid var(--rct-primary-light) !important;
}

.mod_navigation nav ul li.active strong.active,
.mod_navigation nav ul li.active > a,
.mod_navigation nav ul li.trail > a,
.mod_navigation ul li.active > a,
.mod_navigation ul li.trail > a {

  color: var(--rct-primary-light);
  border-left-color: var(--rct-primary-light);
  border-right-color: var(--rct-primary-light);
  background: var(--rct-shell-hover);
}


/* Aktive Zustände */
.mod_navigation li.active > a,
.mod_navigation li.active > span,
.mod_navigation li.trail > a {
    color: var(--rct-primary);
    font-weight: 600;
}

/* Einrückung: jedes Sublevel +10px gegenüber Parent */
#left .mod_navigation ul.level_2 { margin-left: 10px; }
#left .mod_navigation ul.level_3 { margin-left: 10px; }
#left .mod_navigation ul.level_4 { margin-left: 10px; }

/* Wenn offen: anzeigen */
.mod_navigation li.submenu.is-open > ul {
    display: block;
}
/* Spezifische Einrückung/Schrift für Sub-Level (Kompakt-Modus) */
#left .mod_navigation ul.level_2 li a,
#right .mod_navigation ul.level_2 li a {
  padding: 9px;
  font-size: 13px;
  border-top: 1px solid var(--rct-shell-border);
}
#left .mod_navigation ul.level_3 li a,
#right .mod_navigation ul.level_3 li a {
  padding: 8px;
  font-size: 12px;
}
#left .mod_navigation ul.level_4 li a,
#right .mod_navigation ul.level_4 li a {
  padding: 8px;
  font-size: 11px;
}


/* Der Indikator-Pfeil (wird per CSS-Klasse am LI gesteuert) */
#left .mod_navigation li.submenu > a::after,
#left .mod_navigation li.submenu > span::after {
    content:  '←'; /* Oder dein SVG-Icon */
    position: absolute;
    right: 0px;
    font-size: 14px;
    transition: transform 0.3s ease;
    opacity: 1;
}
#right .mod_navigation li.submenu > a::before,
#right .mod_navigation li.submenu > span::before {
    content: '→'; /* Oder dein SVG-Icon */
    position: absolute;
    left: 0px;
    font-size: 14px;
    transition: transform 0.3s ease;
    opacity: 1;
}

/* Pfeil-Rotation: bei Hover (Visual-Affordance) UND is-open zeigt der
   Pfeil nach unten. Submenu-Display wird NICHT von Hover getriggert —
   das war das mouseleave-Niemandsland-Problem. Hover dreht nur den Pfeil
   als "klick mich, klappt nach unten auf"-Hint.

   Sidebar-asymmetrie: #left hat "←" als ::after (rechte Seite), #right hat
   "→" als ::before (linke Seite). Damit beide zu "↓" werden, muss #left
   gegen den Uhrzeigersinn (-90deg) und #right im Uhrzeigersinn (90deg). */
#left .mod_navigation li.submenu.is-open > a::after,
#left .mod_navigation li.submenu.is-open > span::after,
#left .mod_navigation li.submenu:hover > a::after,
#left .mod_navigation li.submenu:hover > span::after {
    transform: rotate(-90deg);
    color: var(--rct-primary);
}
#right .mod_navigation li.submenu.is-open > a::before,
#right .mod_navigation li.submenu.is-open > span::before,
#right .mod_navigation li.submenu:hover > a::before,
#right .mod_navigation li.submenu:hover > span::before {
    transform: rotate(90deg);
    color: var(--rct-primary);
}


/* Sidebar Navigation — Submenus im normalen Flow.
   Sichtbar nur ueber is-open (Click-Akkordeon, Single-Open per Level). */
#left .mod_navigation li.submenu ul,
#right .mod_navigation li.submenu ul {
  display: none !important;
  visibility: hidden;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

#left .mod_navigation li.submenu.is-open > ul,
#right .mod_navigation li.submenu.is-open > ul {
  display: block !important;
  visibility: visible;
  opacity: 1;
  height: auto;
  overflow: visible;
}




/* Footer der linken Sidebar — Links nebeneinander via flex */
#left .rct-sidebar-footer {
  display: flex;
  align-items: center;
  padding: 10px;
  border-top: 1px solid var(--rct-shell-border);
  margin-top: auto;
}
/* Alle Nicht-Anchor-Wrapper transparent — <a> sitzen direkt im Flex-Container */
#left .rct-sidebar-footer :not(a) {
  display: contents;
}
#left .rct-sidebar-footer a {
  display: flex;
  align-items: center;
  padding: 10px;
  font-family: var(--rct-font-headline);
  font-size: 0.625rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rct-shell-muted);
  transition: color 0.15s var(--rct-transition-type);
}
#left .rct-sidebar-footer a:hover {
  color: var(--rct-primary-light);
}

/* Ripple-Basis für Links in der Sidebar */
#left a, .rct-nav-toggle {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}


/* ------------------------------------------------------------
   7. SIDEBAR RECHTS (#right)
   Spiegelverkehrtes #left.
   Nutzt dieselben CSS-Variablen & dieselbe Höhenberechnung.
   JS-Klassen analog:
     Mobile  → body.rct-sidebar-right-open  (öffnet #right)
     Desktop → body.rct-sidebar-right-closed (schließt #right)
   ------------------------------------------------------------ */

#right {
  position: fixed;
  z-index: 400;
  top: var(--rct-header-height);
  right: 0;
  bottom: 0;
  margin-top: 1px;
  width: var(--rct-sidebar-right-width);
  height: calc(100vh - var(--rct-header-height) - var(--rct-bottom-height) - 2px);
  background: var(--rct-shell-bg);
  border-left: 1px solid var(--rct-shell-border);
  padding: 10px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--rct-transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Brand-Block (optional) */
#right .rct-brand h1,
#right .rct-brand .rct-site-title {
  color: var(--rct-shell-text);
  font-family: var(--rct-font-headline);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.2;
}
#right .rct-brand .rct-version {
  font-family: var(--rct-font-headline);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--rct-shell-muted);
  margin-top: 0.25rem;
}

/* Navigation — #right erbt Typografie/Padding von der konsolidierten Regel oben,
   nur die Spiegel-Eigenschaften (Ausrichtung, Border) hier setzen */
#right nav ul li a,
#right .mod_navigation ul li a {
  justify-content: flex-end;
  text-align: right;
  border-left: none;
  border-right: 4px solid transparent;
}

#left nav ul li.active strong.active,
#left nav ul li.active > a,
#left nav ul li.trail > a,
#left .mod_navigation ul li.active > a,
#left .mod_navigation ul li.trail > a {
  color: var(--rct-primary-light);
  border-left-color: var(--rct-primary-light);
  background: rgba(255,255,255,0.04);
}

#right nav ul li.active strong.active,
#right nav ul li.active > a,
#right nav ul li.trail > a,
#right .mod_navigation ul li.active > a,
#right .mod_navigation ul li.trail > a
 {
  color: var(--rct-primary-light);
  border-right-color: var(--rct-primary-light);
  background: rgba(255,255,255,0.04);
}


/* Tieferlegung & Guide-Lines (Level 2, 3 und 4) */
#right .mod_navigation ul.level_2 { margin-right: 10px; }
#right .mod_navigation ul.level_3 { margin-right: 10px; }
#right .mod_navigation ul.level_4 { margin-right: 10px; }


/* Footer der rechten Sidebar — Links nebeneinander, rechtsbündig */
#right .rct-sidebar-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px;
  border-top: 1px solid var(--rct-shell-border);
  margin-top: auto;
}
/* Alle Nicht-Anchor-Wrapper transparent — <a> sitzen direkt im Flex-Container */
#right .rct-sidebar-footer :not(a) {
  display: contents;
}
#right .rct-sidebar-footer a {
  display: flex;
  align-items: center;
  padding: 10px;
  font-family: var(--rct-font-headline);
  font-size: 0.625rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rct-shell-muted);
  transition: color 0.15s var(--rct-transition-type);
}
#right .rct-sidebar-footer a:hover {
  color: var(--rct-primary-light);
}


/* ============================================================
   SIDEBAR LOGO (zwischen Nav und Footer-Links)
   ============================================================ */

#left .rct-sidebar-logo,
#right .rct-sidebar-logo {
  padding: 1rem;
  border-top: 1px solid var(--rct-shell-border);
  background-color: rgba(0,0,0,0.2);
}

#left .rct-sidebar-logo .rct-logo-link,
#right .rct-sidebar-logo .rct-logo-link {
  display: block;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.25s ease;
}

#left .rct-sidebar-logo .rct-logo-link:hover,
#right .rct-sidebar-logo .rct-logo-link:hover {
  opacity: 0.95;
}

#left .rct-sidebar-logo .rct-logo,
#right .rct-sidebar-logo .rct-logo {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Neural-Network-Keyframes ── */
/* Jede der 3 Startfarben rotiert durch alle 3 Farben */
@keyframes rct-neural-from-accent {
  0%   { fill: var(--rct-accent); }
  30%  { fill: var(--rct-primary); }
  65%  { fill: var(--rct-logo-muted, #C8CDD0); }
  100% { fill: var(--rct-accent); }
}
@keyframes rct-neural-from-primary {
  0%   { fill: var(--rct-primary); }
  35%  { fill: var(--rct-logo-muted, #C8CDD0); }
  68%  { fill: var(--rct-accent); }
  100% { fill: var(--rct-primary); }
}
@keyframes rct-neural-from-muted {
  0%   { fill: var(--rct-logo-muted, #C8CDD0); }
  32%  { fill: var(--rct-accent); }
  66%  { fill: var(--rct-primary); }
  100% { fill: var(--rct-logo-muted, #C8CDD0); }
}

/* ── Trigger via JS-Klasse .rct-neural-fire (einmalig, restartbar) ── */
/* 1x 1.25s, forwards = bleibt auf Endfarbe stehen bis Hover endet  */

/* rcts4 (accent) → settled auf primary */
.rct-sidebar-logo.rct-neural-fire #hellblauRechtsOben {
  animation: rct-neural-from-accent 0.45s ease-in-out 1 forwards;
  animation-delay: 0s;
}
.rct-sidebar-logo.rct-neural-fire #hellblauRechtsUnten {
  animation: rct-neural-from-accent 0.45s ease-in-out 1 forwards;
  animation-delay: 0.05s;
}

/* rcts3 (primary) → settled auf accent */
.rct-sidebar-logo.rct-neural-fire #dunkeblauUnten {
  animation: rct-neural-from-primary 0.45s ease-in-out 1 forwards;
  animation-delay: 0.03s;
}
.rct-sidebar-logo.rct-neural-fire #dunkelblauRechtsOben {
  animation: rct-neural-from-primary 0.45s ease-in-out 1 forwards;
  animation-delay: 0.09s;
}

/* rcts0 (muted) → settled auf primary */
.rct-sidebar-logo.rct-neural-fire #grauLinksUnten {
  animation: rct-neural-from-muted 0.45s ease-in-out 1 forwards;
  animation-delay: 0.07s;
}
.rct-sidebar-logo.rct-neural-fire #grauRechtsOben_1_ {
  animation: rct-neural-from-muted 0.45s ease-in-out 1 forwards;
  animation-delay: 0.12s;
}





#layoutSwitcher {
  display: none;  /* Mobile: versteckt */
}

@media (min-width: 1025px) {
  #layoutSwitcher {
    display: block;
  }
}

.layout-opt-btn {
  color: var(--rct-shell-muted);
}




/* Ripple */
#right a {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------
   7b. THEME-DROPDOWN / LAYOUT-DROPDOWN IN #right
   Das Dropdown liegt in der rechten Sidebar → öffnet nach links,
   damit es nicht aus dem Viewport herausragt.
   ------------------------------------------------------------ */

#right .theme-dropdown,
#right .layout-dropdown {
  position: relative;   /* Anker für das absolute Panel */
}

/* Das aufklappbare Panel (direkt-Kind oder .dropdown-menu) */
#right .theme-dropdown > ul,
#right .theme-dropdown > .dropdown-menu,
#right .layout-dropdown > ul,
#right .layout-dropdown > .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;       /* Rechtsbündig mit dem Trigger */
  left: auto;     /* Kein left-Wert – verhindert Overflow nach rechts */
  z-index: 510;
  min-width: 180px;
  background: var(--rct-shell-bg);
  border: 1px solid var(--rct-shell-border);
  border-radius: var(--rct-radius-lg);
  box-shadow: -4px 8px 24px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}


/* Sichtbarkeit bei aktiver Klasse */
body.rct-right-open #right {
    transform: translateX(0);
}



/* Mobile: Rechte Sidebar + Toggle + Layout-Switcher ausblenden.
   Auf Mobile gibt es nur Default-Layout mit Hamburger-Drawer — Layout-Wechsel
   und rechte Sidebar ergeben dort keinen Sinn (Sidebars sind immer Overlays). */
@media (max-width: 1024px) {
    #right,
    #rct-right-toggle,
    .rct-layout-switcher {
        display: none !important;
    }
}

/* ------------------------------------------------------------
   8. MAIN CONTENT (#main, .rct-content-inner)
   ------------------------------------------------------------ */

#main {
  flex: 1;
  min-width: 0;
  min-height: calc(100vh - var(--rct-header-height) - var(--rct-bottom-height));
  /* BG ist eine Ebene höher auf #mainContainer — siehe dort für Begründung */
  padding: 40px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 100;
}

.rct-content-inner {
  position: relative;
  z-index: 100;
  width: 100%;
  flex-grow: 1;
  max-width: var(--rct-max-width);
  margin: 0 auto;
  padding: 20px;
  container-type: inline-size;
}
.rct-content-inner:last-of-type {
  margin-bottom: 40px;
}

/* Newsreader auf Mobile: horizontales Padding raus, damit der Reader
   die volle Breite nutzt. Wirkt nur wenn .mod_newsreader im Container
   gerendert ist (= News-Detail-Page). */
@media (max-width: 767px) {
  .rct-content-inner:has(.mod_newsreader) {
    padding: 20px 0;
  }
}


/* ------------------------------------------------------------
   9. FOOTER (#footer)
   Im Flow unter dem Content – scrollt mit, klassische Box-Struktur.
   Wird per Contao-Layout befüllt (3-4 Spalten typisch).
   ------------------------------------------------------------ */

#footer {
  display: none;
  margin: 10px auto;
  max-width: var(--rct-content-width);
  padding: 20px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a1a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

/* Contao legt mod_article-Elemente im Footer als Flex-Row an */
#footer .inside {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: var(--rct-max-width);
  margin: 0 auto;
}

#footer .mod_article {
  flex: 1 1 200px;
}

/* Mobile: untereinander */
@media (max-width: 767px) {
  #footer .inside {
    flex-direction: column;
  }
}

/* ------------------------------------------------------------
   10. bottom (#bottom)
   ------------------------------------------------------------ */
#bottom {
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--rct-bottom-height);
  background: var(--rct-shell-bg);
  border-top: 1px solid var(--rct-shell-border);
  color: var(--rct-shell-muted);
}

#bottom > .inside {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 100%;
}

/* Linke + rechte Spalte — Breite folgt der Sidebar-Sichtbarkeit (Vars).
   Padding kommt NICHT hier, sondern in EINER zentralen Schicht weiter
   unten auf .inside (Contao-block_section-Wrapper). Damit kein
   Padding-Stack ueber Spalte + Wrapper, der state-abhaengige Versaetze
   produziert. */
#bottom_left,
#bottom_right {
  flex: 0 0 auto;
  box-sizing: border-box;
  overflow: hidden;
  transition: width var(--rct-transition-speed) var(--rct-transition-type);
}
#bottom_left  { width: var(--rct-sidebar-left-current,  0px); }
#bottom_right { width: var(--rct-sidebar-right-current, 0px); }

/* Mittlere Spalte — folgt der Content-Lane (max-width zentriert) */
#bottom_content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--rct-max-width);
  margin: 0 auto;
  box-sizing: border-box;
}

/* EINZIGE Padding-Schicht im Bottom, auf .inside (Contao-block_section
   Wrapper). 20px ergibt zusammen mit .bottom-legal-links padding-left
   genau den 60px-Stack des Mains (#main 40 + .rct-content-inner 20). */
#bottom_left > .inside,
#bottom_content > .inside,
#bottom_right > .inside {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 20px;
}
#bottom_content > .inside {
  justify-content: space-between;
  gap: 20px;
}
#bottom_right > .inside {
  justify-content: flex-end;
}

/* Containing-Block-Reset im Bottom-Bereich.
   Contao Cores layout.min.css setzt global ".inside { position: relative }",
   das wird auf manchen Pages mitgeladen (Layout-Stylesheets-Konfig). Ohne
   Override waere die .inside-Box der containing block fuer .bottom-copy's
   position:absolute — dann wandert das Copy mit der collapsenden Sidebar.
   Hier zwingen wir sie auf static, damit der Anker bis zu #bottom (fixed)
   hochklettert. */
#bottom .inside {
  position: static;
}

/* Copy-Block (links) — absolut positioniert mit #bottom (fixed) als
   containing block. Bleibt damit fix in der linken unteren Ecke,
   unabhaengig davon ob #bottom_left collapsed ist oder gar keine Module
   enthaelt. */
.bottom-copy {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.bottom-copy,
.bottom-copy p,
.rct-footer-copy {
  font-family: var(--rct-font-body);
  font-size: 0.575rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rct-shell-muted);
  margin: 0;
}
.bottom-copy a,
.rct-footer-copy a {
  color: inherit;
  transition: color 0.15s var(--rct-transition-type);
}
.bottom-copy a:hover,
.rct-footer-copy a:hover {
  color: var(--rct-primary-light);
}

/* Legal-Links (in bottom_content, linksbündig) */
.bottom-legal-links {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 40px;
}
.bottom-legal-links a {
  display: flex;
  align-items: center;
  padding: 10px;
  font-family: var(--rct-font-headline);
  font-size: 0.625rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rct-shell-muted);
  transition: color 0.15s var(--rct-transition-type);
}
.bottom-legal-links a:hover {
  color: var(--rct-primary-light);
}

/* Controls (in bottom_content, rechtsbündig) — symmetrisch zu
   .bottom-legal-links's padding-left:40px fuers gleiche 60px-Stack-Match
   mit Main (#main 40 + .rct-content-inner 20). */
.bottom-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 40px;
}

/* Scroll-to-Top + Privacy Buttons — jetzt im Flow */
#rct-scroll-top,
#rct-privacy-btn {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 3px;
  cursor: pointer;
  padding: 2px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rct-primary-light);
  opacity: 0.5;
  transition: opacity 0.25s ease, color 0.25s ease;
}
#rct-privacy-btn svg { width: 18px; height: 18px; }
#rct-scroll-top:hover,
#rct-privacy-btn:hover { opacity: 1; }
#rct-privacy-btn:hover { color: var(--rct-accent); }
#rct-scroll-top.is-at-top {
  color: var(--rct-shell-muted);
  opacity: 0.3;
  pointer-events: none;
}

/* Sidebar-Visibility-Vars — Single Source of Truth fuer alle layout-
   getriebenen Breiten/Paddings. JS garantiert dass body IMMER eine Klasse
   pro Sidebar hat (rct-left-open|rct-left-closed, rct-right-open|rct-right-closed).
   Die Vars werden hier ausschliesslich ueber die "open"-Klassen gesetzt,
   "closed" faellt auf den :root-Default 0px zurueck.
   Konsumenten: #mainContainer (padding) und #bottom_left/right (width). */

:root {
  --rct-sidebar-left-current:  0px;
  --rct-sidebar-right-current: 0px;
}

/* Desktop: Sidebar-Klassen schalten die Vars auf die volle Sidebar-Breite.
   Auf Mobile bleiben die Vars 0 — Sidebars sind dort Overlays, nehmen
   keinen Platz im Layout, und #mainContainer/#bottom kollabieren entsprechend. */
@media (min-width: 1025px) {
  body.rct-left-open  { --rct-sidebar-left-current:  var(--rct-sidebar-left-width); }
  body.rct-right-open { --rct-sidebar-right-current: var(--rct-sidebar-right-width); }
}

@media (max-width: 1024px) {
  /* Mobile: Padding auf .inside reduzieren (matched main mobile: 0 + 20 = 20)
     und legal-links/controls extra-padding zuruecknehmen — auf Mobile soll
     bottom enger sein als die 60px Desktop-Einrueckung. */
  #bottom_left > .inside,
  #bottom_content > .inside,
  #bottom_right > .inside {
    padding: 0 16px;
  }
  .bottom-legal-links {
    padding-left: 0;
  }
  .bottom-controls {
    padding-right: 0;
  }
  .bottom-legal-links a {
    padding: 10px 6px;
  }
  /* Copy auf Mobile ausblenden — Bottom-Bar zu schmal fuers Copyright */
  .bottom-copy {
    display: none;
  }
}

/* Classic-Override: #main hat hier padding:0 (statt 40px in den anderen
   Layouts). Damit ist der Main-Padding-Stack nur 20px (.rct-content-inner)
   statt 60px. Bottom-Stack analog reduzieren — die zusaetzlichen 40px auf
   .bottom-legal-links und .bottom-controls zuruecknehmen. */
[data-layout="classic"] .bottom-legal-links {
  padding-left: 0;
}
[data-layout="classic"] .bottom-controls {
  padding-right: 0;
}


/* ------------------------------------------------------------
   10. HINTERGRUND-ANIMATIONEN
   ------------------------------------------------------------ */

/* Aurora-Gradient Canvas */
#gradient-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 102%;
  height: 100%;
  z-index: 10;  /* Layer 1 – Aurora Canvas */
  display: block;
  opacity: 0.2;
  transition: opacity 2.0s var(--rct-transition-type) !important;
  pointer-events: none;
  /* Maske: lässt die Mitte frei für bessere Lesbarkeit */
  mask-image: radial-gradient(circle at center, transparent 0%, black 45%);
  -webkit-mask-image: radial-gradient(circle at center, transparent 0%, black 45%);
  /* Farb-Variablen werden von gradient.js gelesen und per data-theme gesetzt */
  --gradient-color-1: var(--grad-1, #27c4f4);
  --gradient-color-2: var(--grad-2, #2951c7);
  --gradient-color-3: var(--grad-3, #1d2db2);
  --gradient-color-4: var(--grad-4, #14054a);
}
#gradient-canvas.is-visible {
  opacity: 0.95 !important;
}

/* Effects-Canvas — theme-specific overlays (z-index between gradient and dots) */
#rct-effects-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  display: block;
  z-index: 15;
}

/* Dots-Canvas */
#rct-dots-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  display: block;
  z-index: 20;   /* Dots-Canvas – über Aurora */
}
[data-theme="baker-street"] #rct-effects-canvas { mix-blend-mode: screen; }

/* Sky-Canvas — dynamisch injiziert für Baker Street */
#rct-sky-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 5;
}

/* Baker Street Theme */
[data-theme="baker-street"] {
  --rct-accent:              #c87828;
  --rct-color-primary:       #7a3a14;
  --rct-color-primary-light: #c87828;
  --rct-grad1: #c87828;
  --rct-grad2: #7a3a14;
  --rct-grad3: #3d1a08;
  --rct-grad4: #0d0905;
}
[data-theme="baker-street"] #gradient-canvas,
[data-theme="baker-street"] #rct-dots-canvas { display: none !important; }

/* --- Theme: Lotus (Polar-Vortex, magenta-violet bloom, warm-gold core) --- */
[data-theme="lotus"] {
  --rct-primary:       #b833e8;
  --rct-primary-light: #e0a5ff;
  --rct-accent:        #d8b4fe;
  --rct-primary-container: rgba(184, 51, 232, 0.12);
  --rct-sidebar-alpha:     0.6;
  --rct-main-alpha:        0.3;
  --rct-bg-dots:           rgba(255, 218, 130, 0.45);
  --grad-1: #0a0612;
  --grad-2: #2a0840;
  --grad-3: #14052a;
  --grad-4: #050010;
}

/* --- Theme: Plasma (iterative domain-warping, lava-flow with magenta accents) --- */
[data-theme="plasma"] {
  --rct-primary:       #c41840;
  --rct-primary-light: #ff7d3c;
  --rct-accent:        #ff7d3c;
  --rct-primary-container: rgba(196, 24, 64, 0.12);
  --rct-sidebar-alpha:     0.6;
  --rct-main-alpha:        0.3;
  --rct-bg-dots:           rgba(255, 180, 100, 0.45);
  --grad-1: #180828;
  --grad-2: #3a0a30;
  --grad-3: #1a0418;
  --grad-4: #08020c;
}

/* --- Theme: Inversion (Möbius-Inversion, fraktal-galaktisch, cyan accents) --- */
[data-theme="inversion"] {
  --rct-primary:       #2080d0;
  --rct-primary-light: #5fcfff;
  --rct-accent:        #5fcfff;
  --rct-primary-container: rgba(32, 128, 208, 0.12);
  --rct-sidebar-alpha:     0.6;
  --rct-main-alpha:        0.3;
  --rct-bg-dots:           rgba(180, 220, 255, 0.45);
  --grad-1: #040814;
  --grad-2: #0a1830;
  --grad-3: #04081a;
  --grad-4: #02040a;
}

/* --- Theme: Fire (flames + sparks + smoke, warm-orange accents) --- */
[data-theme="fire"] {
  --rct-primary:       #ff5020;
  --rct-primary-light: #ffaa44;
  --rct-accent:        #ffaa44;
  --rct-primary-container: rgba(255, 80, 32, 0.12);
  --rct-sidebar-alpha:     0.6;
  --rct-main-alpha:        0.3;
  --rct-bg-dots:           rgba(255, 200, 100, 0.45);
  --grad-1: #0a0202;
  --grad-2: #2a0808;
  --grad-3: #1a0404;
  --grad-4: #050100;
}

/* --- Theme: Wave (prozeduraler Ozean, hellblau ocean accents) --- */
[data-theme="wave"] {
  --rct-primary:       #1e88c5;
  --rct-primary-light: #4fc3f7;
  --rct-accent:        #4fc3f7;
  --rct-primary-container: rgba(30, 136, 197, 0.12);
  --rct-sidebar-alpha:     0.6;
  --rct-main-alpha:        0.3;
  --rct-bg-dots:           rgba(180, 230, 255, 0.45);
  --grad-1: #062035;
  --grad-2: #0a3855;
  --grad-3: #04182a;
  --grad-4: #021018;
}

/* --- Theme: Starry Planes (CC0 mrange, fliegende Sternen-Ebenen) --- */
[data-theme="starry"] {
  --rct-primary:       #c879ff;
  --rct-primary-light: #ff80c8;
  --rct-accent:        #80e0ff;
  --rct-primary-container: rgba(200, 121, 255, 0.12);
  --rct-sidebar-alpha:     0.55;
  --rct-main-alpha:        0.28;
  --rct-bg-dots:           rgba(200, 160, 255, 0.40);
  --grad-1: #000000;
  --grad-2: #0a0218;
  --grad-3: #050108;
  --grad-4: #000000;
}

#rct-baker-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  z-index: 8;
  background-image: url('/bundles/rct/img/baker-street-alpha.webp');
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* Module visibility control */
@media (max-width: 1024px) { [data-rct-visibility="desktop"] { display: none !important; } }
@media (min-width: 769px)  { [data-rct-visibility="mobile"]  { display: none !important; } }
@media (min-width: 1025px) { [data-rct-visibility="tablet"]  { display: none !important; } }


/* ------------------------------------------------------------
   11. RESPONSIVE
   ------------------------------------------------------------ */

/* --- DESKTOP (≥ 1025px) ---
   Linke Sidebar: standardmäßig offen und platzbuchend.
   Rechte Sidebar: standardmäßig ausgeblendet (opt-in).
   ------------------------------------------------------------ */
@media (min-width: 1025px) {

  /* Linke Sidebar – Standard: sichtbar */
  #left {
    transform: translateX(0);
    transition: transform var(--rct-transition-speed) var(--rct-transition-type);
  }

  /* #main behält sein eigenes padding (40px) unangetastet.
     Kein margin, kein padding-override hier —
     die Sidebar-Verschiebung läuft ausschließlich über #mainContainer. */
  #main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    z-index: 30;
  }

  /* Einziger Animationspunkt fuer die Breitenaenderung. Padding aus den
     sidebar-current-Vars getrieben (siehe Var-Block oben) — Single Source
     of Truth fuer alle Layout-Zustaende, kein Layout-spezifisches Override. */
  #mainContainer {
    padding-left:  var(--rct-sidebar-left-current);
    padding-right: var(--rct-sidebar-right-current);
    box-sizing: border-box;
    transition:
      padding-left  var(--rct-transition-speed) var(--rct-transition-type),
      padding-right var(--rct-transition-speed) var(--rct-transition-type);
  }

  /* Linke Sidebar – geschlossen */
  body.rct-left-closed #left {
    transform: translateX(calc(var(--rct-sidebar-left-width) * -1));
  }

  /* Rechte Sidebar – Standard: ausgeblendet */
  #right {
    transform: translateX(100%);
    transition: transform var(--rct-transition-speed) var(--rct-transition-type);
  }
  body.rct-right-open #right {
    transform: translateX(0);
  }

}
 
/* --- TABLET / MOBILE (≤ 1024px) ---
   Beide Sidebars fliegen vollständig aus dem Bild.
   Werden per Toggle-Button (und JS-Klasse) reingeschoben.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {

  /* Header: sticky */
  #header {
    position: sticky;
    top: 0;
    z-index: 500;
    height: 60px;
  }

  #header .rct-header-brand span {
    display: none;
  }

  /* Beide Sidebars: weg */
  #left  { transform: translateX(calc(var(--rct-sidebar-left-width) * -1)); }
  #right { transform: translateX(var(--rct-sidebar-right-width)); }

  /* Logo im Sidebar-Menü auf Mobile sichtbar */
  #left .rct-sidebar-logo,
  #right .rct-sidebar-logo { display: block; }

  /* Main: kein seitlicher Abstand */
  #main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    z-index: unset;
  }

  /* Linke Sidebar – offen */
  body.rct-left-open #left {
    transform: translateX(0);
  }
  /* Overlay für linke Sidebar */
  body.rct-left-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(1px);
    z-index: 200; /* Mobile Overlay – hinter Sidebars */
    cursor: pointer; /* <--- Zeigt dem User: Hier klicken zum Schließen! */    
  }

  /* Rechte Sidebar – offen */
  body.rct-right-open #right {
    transform: translateX(0);
  }
  /* Overlay für rechte Sidebar */
  body.rct-right-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200;
    cursor: pointer;
    backdrop-filter: blur(2px);
  }



  /* Sidebar-Close-Button: mobile Position */
  .rct-sidebar-close-btn {
    top: 15px;
    right: 8px;
  }

  /* Bento-Grid: eine Spalte */
  .rct-bento-8,
  .rct-bento-4 { grid-column: span 12; }

  /* Seitentitel */
  .rct-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .rct-page-header h1,
  .rct-page-title { font-size: 1.75rem; }
}

@media (max-width: 1250px) { nav.mod_breadcrumb { display: none !important; } }

@media (max-width: 1024px) {
  #rct-scroll-top  { right: 20px !important; }
  #rct-privacy-btn { right: 54px !important; }
}

/* --- MOBILE (≤ 767px) --- */
@media (max-width: 767px) {
  #header { 
    padding: 0 1rem;
    max-width: 100%;

  }
  .mod_breadcrumb {
    display: none;
  }

  #main {padding: 10px;}
  .mod_article { padding: 10px; }
  .rct-bento {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* --- MOBILE (≤ 540px) --- */
@media (max-width: 540px) {
  .rct-logo-mobile {
    height: 24px !important;
    width: auto;
    margin-right: 10px;
  }
  #header_right .inside {
    gap: 0;
  }
  .rct-header-icon {
    padding: 0px;
  }
}



/* ------------------------------------------------------------
   12. HAMBURGER-BUTTON ANIMATION
   Klassen werden von rct.js gesetzt.
   ------------------------------------------------------------ */

#rct-nav-toggle svg {
  transition: transform var(--rct-transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
}
#rct-nav-toggle svg rect {
  transition: transform var(--rct-transition-speed) cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s var(--rct-transition-type);
  transform-origin: center;
}

/* Zustand: OFFEN (rect-basierter Hamburger) */
body.rct-left-open #rct-nav-toggle svg rect:nth-child(1) { transform: translateY(7px)  rotate(45deg);  }
body.rct-left-open #rct-nav-toggle svg rect:nth-child(2) { opacity: 0; }
body.rct-left-open #rct-nav-toggle svg rect:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Zustand: OFFEN (line-basierter Hamburger) */
#rct-nav-toggle.is-active .line-mid { opacity: 0; }
#rct-nav-toggle.is-active .line-top { transform: translateY(6px)  rotate(45deg);  transform-origin: center; }
#rct-nav-toggle.is-active .line-bot { transform: translateY(-6px) rotate(-45deg); transform-origin: center; }

/* Sidebar-Schließen-Button (SVG mit Doppelpfeil) */
.rct-sidebar-close-btn {
  background: transparent;
  border: none;
  color: var(--rct-accent);
  cursor: pointer;
  padding: 8px;
  line-height: 0;
  border-radius: 4px;
  position: absolute;
  right: 0;
  top: calc(((100vh - var(--rct-header-height) - var(--rct-bottom-height) - 1px) / 2) - 34px);
  z-index: 700;
  transition: all var(--rct-transition-speed) var(--rct-transition-type);
}
#right .rct-sidebar-close-btn {
  right: calc(var(--rct-sidebar-right-width) - 30px);
}
.rct-sidebar-close-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.rct-icon-shove {
  width: 20px;
  height: 30px;
  transition: transform var(--rct-transition-speed) var(--rct-transition-type);
}
.rct-sidebar-close-btn:hover .rct-icon-shove {
  animation: shoveLeft 1s var(--rct-transition-type) infinite;
}
.rct-icon-shove path {
  transition: stroke-width 0.2s var(--rct-transition-type);
}
.rct-sidebar-close-btn:hover .arrow-1 {
  stroke-width: 2.5px;
}
@keyframes shoveLeft {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

/* Ripple-Welle (wird per JS ins DOM injiziert) */
.rct-ripple {
  position: absolute;
  background: rgba(var(--rct-primary-rgb, 74, 103, 0), 0.15);
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
}
@keyframes ripple-animation {
  to { transform: scale(4); opacity: 0; }
}


.mod_article {
  position: relative;
  z-index: 40;
}


/* ------------------------------------------------------------
   14. Global Overlay für Pop-Ups etc
   Liegt im Template unterhalb des Wrappers
   ------------------------------------------------------------ */
.rct-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px); /* Dein Signature-Look */
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.rct-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.rct-overlay-content {
    width: 90%;
    max-width: 600px;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.rct-overlay.is-active .rct-overlay-content {
    transform: translateY(0);
}

/* Gallery-Modus: breiter, kein translateY-Effekt */
.rct-overlay.rct-gallery-mode .rct-overlay-content {
    max-width: 92vw;
    width: 92vw;
}

.rct-gallery-lb {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
}

.rct-gallery-lb-img-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.rct-gallery-lb-img {
    max-width: 100%;
    max-height: 82vh;
    width: auto;
    height: auto;
    display: block;
    border-radius: 2px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}

.rct-gallery-lb-prev,
.rct-gallery-lb-next {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-size: 1.5rem;
    width: 2.8rem;
    height: 2.8rem;
    cursor: pointer;
    display: flex;
    padding-top: 6px;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
    line-height: 1;
}

.rct-gallery-lb-prev:hover,
.rct-gallery-lb-next:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.6);
}

.rct-gallery-lb-counter {
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    margin: 0;
    white-space: nowrap;
}

.rct-overlay-close-btn {
    position: absolute;
    top: 30px;    /* 30px oberhalb der Content-Ecke */
    right: 30px;  /* 30px rechts von der Content-Ecke */
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--rct-primary-light);
    cursor: pointer;
    line-height: 1;
    transition: transform 0.2s ease;
}

.rct-overlay-close-btn:hover {
    transform: scale(1.1);
}

/* Styling für die "Nicht mehr zeigen" Zeile im Artikel */
.rct-remember-box {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--rct-shell-bg);
    display: flex;
    justify-content: flex-end; 
    align-items: center;      
    gap: 20px;                
}

.rct-checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    /* Dezentes Grau/Weiß aus dem Menü-Kontext */
    color: var(--rct-text);
    opacity: 0.8;
    cursor: pointer;
}

.rct-checkbox-group input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--rct-primary-light); /* Haken in Menüfarbe */
}

.rct-btn-small {
    /* Button im Look der Navigations-Elemente */
    background: var(--rct-shell-bg);
    color: var(--rct-shell-muted);
    border: 1px solid var(--rct-primary-light);
    padding: 6px 18px;
    font-weight: 400;
    border-radius: 0px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.rct-btn-small:hover {
    color: var(--rct-primary-light); /* Invertiert beim Hover für den System-Look */
}



/* Der Artikel ist auf der Seite erst mal unsichtbar */
.mod_article.rct-popup-content {
    display: none;
    
}

/* Styling für den Inhalt im Overlay */
#globalOverlay .rct-overlay-content .mod_article {
    display: block !important;
    background: #fff;

    position:relative;
    z-index: 1100;
}


/* Such-Button im Header-menu*/
.rct-header-icon {
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rct-accent);
    transition: transform 0.2s ease, color 0.2s ease;
}

.rct-header-icon:hover {
    transform: scale(1.1);
    color: var(--rct-primary-light); /* Deine WebGL-Akzentfarbe */
}


@media (max-width: 767px) {
  #rct-nav-login { display: none; }
}

/* Styling für die Searchbox im Overlay */
.rct-search-box {
    text-align: left;
    width: 100%;
}

.rct-search-box h2 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    color: var(--rct-shell-text);
    margin-bottom: 20px;
    opacity: 0.7;
}

.rct-search-box form {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.rct-search-box input[type="text"] {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--rct-accent);
    color: var(--rct-shell-text);
    font-size: 2.25rem;
    padding: 10px;
    outline: none;
    font-weight: 400;
}

.rct-search-box button[type="submit"],
.rct-search-box .rct-btn {
    background: #fff;
    color: #1a1a1a;
    border: 1px solid var(--rct-accent);
    border-left: none;
    font-family: var(--rct-font-headline);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0 1.5rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
    align-self: stretch;
}
.rct-search-box button[type="submit"]:hover,
.rct-search-box .rct-btn:hover {
    background: var(--rct-accent);
    color: #fff;
}

.rct-search-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3rem;
    color: var(--rct-shell-muted);
    margin-bottom: 10px;
    font-weight: bold;
}

.rct-search-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--rct-primary-light);
    color: #fff;
    font-size: 3rem;
    font-weight: 300;
    padding: 10px 0;
    outline: none;
    transition: border-color 0.3s ease;
}

.rct-search-input:focus {
    border-color: var(--rct-accent);
}

.rct-search-info {
    margin-top: 15px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
    font-family: monospace;
}


/* ------------------------------------------------------------
   15. LOGIN-PANEL & LOGIN IM OVERLAY
   Das Modul (#rct-login) liegt im Seitenlayout versteckt im DOM.
   JS klont es bei Klick auf #rct-nav-login ins globalOverlay.
   ------------------------------------------------------------ */

/* Modul im normalen Layout unsichtbar halten */
#rct-login {
    display: none !important;
}

/* Login-Formular im Overlay
   Nutzt --rct-shell-* Variablen → automatisch theme-aware
   (Sparta II: hell, alle anderen: dunkel) */
.rct-overlay-content .rct-login-in-overlay {
    background: var(--rct-shell-bg);
    border: 1px solid var(--rct-shell-border);
    border-radius: 8px;
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    color: var(--rct-shell-text);
}

/* Überschrift */
.rct-overlay-content .rct-login-in-overlay h2 {
    font-family: var(--rct-font-headline);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rct-shell-text);
    margin-bottom: 1.75rem;
    letter-spacing: -0.015em;
}

/* Labels */
.rct-overlay-content .rct-login-in-overlay .widget label {
    color: var(--rct-shell-muted);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
    display: block;
}

/* Eingabefelder */
.rct-overlay-content .rct-login-in-overlay .widget input[type="text"],
.rct-overlay-content .rct-login-in-overlay .widget input[type="password"] {
    background: var(--rct-shell-hover);
    border: 1px solid var(--rct-shell-border);
    border-radius: 4px;
    color: var(--rct-shell-text);
    padding: 0.65rem 0.875rem;
    width: 100%;
    font-size: 0.9375rem;
    outline: none;
    transition: border-color 0.2s ease;
}
.rct-overlay-content .rct-login-in-overlay .widget input[type="text"]:focus,
.rct-overlay-content .rct-login-in-overlay .widget input[type="password"]:focus {
    border-color: var(--rct-accent);
}

/* Checkbox-Zeile */
.rct-overlay-content .rct-login-in-overlay .widget.checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.rct-overlay-content .rct-login-in-overlay .widget.checkbox label {
    color: var(--rct-shell-muted);
    font-size: 0.75rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

/* Submit-Button */
.rct-overlay-content .rct-login-in-overlay .widget.submit button,
.rct-overlay-content .rct-login-in-overlay .widget.submit input[type="submit"] {
    width: 100%;
    background: var(--rct-accent);
    color: var(--rct-shell-bg);
    font-family: var(--rct-font-headline);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 0.875rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 1rem;
    transition: opacity 0.2s ease;
}
.rct-overlay-content .rct-login-in-overlay .widget.submit button:hover,
.rct-overlay-content .rct-login-in-overlay .widget.submit input[type="submit"]:hover {
    opacity: 0.85;
}

/* Fehlertext */
.rct-overlay-content .rct-login-in-overlay p.error {
    color: #ff5f5f;
    font-size: 0.8rem;
    margin-top: 0.75rem;
}
.rct-overlay-content .rct-login-in-overlay .widget.error input {
    border-color: #ff5f5f;
}

/* Login-Icon: leuchtet wenn eingeloggt */
body.logged-in #rct-nav-login svg path:last-child {
    stroke: var(--rct-accent);
}


/* ------------------------------------------------------------
   16. BLITZSCHUTZ / FOUC-GUARD
   Twig-Inline-Script im <head> setzt vor First-Paint:
     - data-layout (falls != sidebar)
     - rct-left-initial-closed (wenn localStorage left = closed)
     - rct-right-initial-open  (wenn localStorage right = open + nicht topnav)
   JS (rct.js) ersetzt die html-Init-Klassen durch body-Klassen und setzt
   rct-js-ready, sobald geladen.

   Strategie: html-Init-Klassen schalten direkt die Sidebar-Vars um —
   damit greift dieselbe Var-Cascade wie spaeter durch die body-Klassen.
   Keine doppelten padding-/transform-Overrides mehr.
   ------------------------------------------------------------ */

/* Default-Vars fuer den FOUC-Zeitraum, layout-spezifisch.
   (Body-Klassen vom JS uebernehmen, sobald rct-js-ready gesetzt ist.) */
html:not(.rct-js-ready) {
  --rct-sidebar-left-current:  var(--rct-sidebar-left-width); /* sidebar layout default: links auf */
  --rct-sidebar-right-current: 0px;
}
html[data-layout="sidebar-right"]:not(.rct-js-ready) {
  --rct-sidebar-left-current:  0px;
  --rct-sidebar-right-current: var(--rct-sidebar-right-width);
}
html[data-layout="topnav"]:not(.rct-js-ready),
html[data-layout="classic"]:not(.rct-js-ready) {
  --rct-sidebar-left-current:  0px;
  --rct-sidebar-right-current: 0px;
}
/* localStorage-getriebene Override-Klassen */
html.rct-left-initial-closed:not(.rct-js-ready) { --rct-sidebar-left-current:  0px; }
html.rct-right-initial-open:not(.rct-js-ready)  { --rct-sidebar-right-current: var(--rct-sidebar-right-width); }

/* Sidebar-Transforms sofort auf den richtigen Stand, ohne Animation */
html.rct-left-initial-closed:not(.rct-js-ready) #left {
  transform: translateX(calc(var(--rct-sidebar-left-width) * -1)) !important;
  transition: none !important;
}
html[data-layout="sidebar-right"]:not(.rct-js-ready) #left {
  transform: translateX(calc(var(--rct-sidebar-left-width) * -1)) !important;
  transition: none !important;
}
html.rct-right-initial-open:not(.rct-js-ready) #right,
html[data-layout="sidebar-right"]:not(.rct-js-ready) #right {
  transform: translateX(0) !important;
  transition: none !important;
}
html:not([data-layout]):not(.rct-js-ready) #right,
html[data-layout="sidebar"]:not(.rct-js-ready) #right {
  transform: translateX(100%) !important;
  transition: none !important;
}
/* mainContainer-Transition unterdruecken bis JS bereit (kein animiertes Snap) */
html:not(.rct-js-ready) #mainContainer { transition: none !important; }