/* ============================================================
   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('../../bundles/rct/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('../../bundles/rct/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('../../bundles/rct/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('../../bundles/rct/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('../../bundles/rct/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('../../bundles/rct/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; }
/* ============================================================
   RCT – Rallos Contao Toolbox
   rct-utilities.css v2.0.0
   Design: Clinical Architect / Tech Inspector Aesthetic

   INHALT DIESER DATEI:
   1.  Globale Element-Resets (Ergänzungen zum Reset in rct-layout.css)
   2.  Display / Visibility
   3.  Margins (mt-*, mb-*, inkl. responsive mts-*, mbs-*)
   4.  Paddings (pt-*, pb-*)
   5.  Responsive Hide/Show
   6.  Divider, Tags, Dots
   7.  Skip-Navigation (Barrierefreiheit)
   8.  Print
   ============================================================ */


/* ------------------------------------------------------------
   1. GLOBALE ELEMENT-RESETS
   Ergänzungen zu *, body im rct-layout.css
   ------------------------------------------------------------ */

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}


/* ------------------------------------------------------------
   2. DISPLAY / VISIBILITY
   ------------------------------------------------------------ */

.invisible {
  display: none !important;
}


/* ------------------------------------------------------------
   3. MARGINS
   ------------------------------------------------------------ */

/* Desktop-Margins */
.mt-0  { margin-top: 0 !important; }
.mt-10 { margin-top: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-50 { margin-top: 50px !important; }
.mt-60 { margin-top: 60px !important; }
.mt-70 { margin-top: 70px !important; }
.mt-80 { margin-top: 80px !important; }

.mb-0  { margin-bottom: 0 !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-50 { margin-bottom: 50px !important; }
.mb-60 { margin-bottom: 60px !important; }
.mb-70 { margin-bottom: 70px !important; }
.mb-80 { margin-bottom: 80px !important; }

/* Mobile-Margins (nur aktiv bei ≤ 1024px) */
@media (max-width: 1024px) {
  .mts-0  { margin-top: 0 !important; }
  .mts-10 { margin-top: 10px !important; }
  .mts-20 { margin-top: 20px !important; }
  .mts-30 { margin-top: 30px !important; }
  .mts-40 { margin-top: 40px !important; }
  .mts-50 { margin-top: 50px !important; }
  .mts-60 { margin-top: 60px !important; }
  .mts-70 { margin-top: 70px !important; }
  .mts-80 { margin-top: 80px !important; }

  .mbs-0  { margin-bottom: 0 !important; }
  .mbs-10 { margin-bottom: 10px !important; }
  .mbs-20 { margin-bottom: 20px !important; }
  .mbs-30 { margin-bottom: 30px !important; }
  .mbs-40 { margin-bottom: 40px !important; }
  .mbs-50 { margin-bottom: 50px !important; }
  .mbs-60 { margin-bottom: 60px !important; }
  .mbs-70 { margin-bottom: 70px !important; }
  .mbs-80 { margin-bottom: 80px !important; }
}


/* ------------------------------------------------------------
   4. PADDINGS
   ------------------------------------------------------------ */

.pt-0  { padding-top: 0 !important; }
.pt-10 { padding-top: 10px !important; }
.pt-20 { padding-top: 20px !important; }
.pt-40 { padding-top: 40px !important; }
.pt-60 { padding-top: 60px !important; }
.pt-80 { padding-top: 80px !important; }

.pb-0  { padding-bottom: 0 !important; }
.pb-10 { padding-bottom: 10px !important; }
.pb-20 { padding-bottom: 20px !important; }
.pb-40 { padding-bottom: 40px !important; }
.pb-60 { padding-bottom: 60px !important; }
.pb-80 { padding-bottom: 80px !important; }


/* ------------------------------------------------------------
   5. RESPONSIVE HIDE/SHOW
   ------------------------------------------------------------ */

/* Standardmäßig versteckt (Mobile-First) */
.hide-mobile {
  display: none !important;
}

/* Sichtbar ab Desktop */
@media (min-width: 1025px) {
  .hide-mobile {
    display: block !important;
  }
}


/* ------------------------------------------------------------
   6. TAGS, DOTS
   (.rct-divider lebt jetzt als CE-Klasse in rct-components.css)
   ------------------------------------------------------------ */

.rct-tag {
  display: inline-flex;
  align-items: center;
  background: var(--rct-surface-high);
  font-family: var(--rct-font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rct-text-muted);
  padding: 0.2rem 0.6rem;
}

.rct-dot {
  width: 6px;
  height: 6px;
  display: inline-block;
}
.rct-dot-primary   { background: var(--rct-primary); }
.rct-dot-secondary { background: var(--rct-secondary); }
.rct-dot-error     { background: var(--rct-error); }


/* ------------------------------------------------------------
   7. SKIP-NAVIGATION (Barrierefreiheit)
   ------------------------------------------------------------ */

.rct-skip-nav {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.rct-skip-nav:focus {
  position: static;
  width: auto;
  height: auto;
}


/* ------------------------------------------------------------
   8. PRINT
   ------------------------------------------------------------ */

@media print {
  #left, #right, #header, .rct-mobile-nav { display: none !important; }
  body.rct-layout-sidebar #container       { margin-left: 0; }
  #main                                    { padding: 0; background: none; }
  .mod_article                             { box-shadow: none; border: 1px solid #ccc; }
}

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

   INHALT DIESER DATEI:
   1.  Theme-Switcher
   2.  Sidebar-Close-Button (in rct-layout.css als Layout-Element,
       hier nur komponentenspezifische Styles)
   3.  Page-Header / Seitentitel
   4.  Artikel / Content-Karten (.mod_article)
   5.  Bento-Grid
   6.  Tabelle (.rct-table)
   7.  Status-Badges (.rct-badge)
   8.  Navigation: Breadcrumb & Pagination
   9.  Typografie (.ce_text)
   10. Formulare (.ce_form, .mod_login, .mod_search)
   11. Highlight / Insight-Box
   12. Ripple-Effekt
   13. Flex-Grid (.rct-flex)
   15. Akkordeon (.content-accordion / handorgel)
   ============================================================ */


/* ------------------------------------------------------------
   1. THEME-SWITCHER
   Einsetzbar in #header, #left, #right
   ------------------------------------------------------------ */

.rct-theme-switcher {
  position: relative;
  display: inline-block;
  font-family: var(--rct-font-mono);
  z-index: 510;
}

/* Trigger-Button */
.theme-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 6px 12px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 140px;
}
.theme-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Chevron dreht sich wenn offen */
.chevron {
  margin-left: auto;
  transition: transform 0.3s ease;
}
.rct-theme-switcher.is-open .chevron {
  transform: rotate(180deg);
}

/* Dropdown */
.theme-dropdown,
.layout-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  min-width: 200px;
  z-index: 520;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.rct-theme-switcher.is-open .theme-dropdown,
.rct-layout-switcher.is-open .theme-dropdown,
.rct-layout-switcher.is-open .layout-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/* test */

.rct-theme-switcher.is-open .chevron,
.rct-layout-switcher.is-open .chevron {
  transform: rotate(180deg);
}


/* Liste */
.theme-list {
  list-style: none;
  padding: 6px 0;
  margin: 0;
}


.theme-opt-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  transition: all 0.2s ease;
}
.theme-opt-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* Farbige Dots (Indikator für das aktive Theme) */
.current-theme-dot,
.opt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Standard-Farbe des aktuellen Dots */
.current-theme-dot         { background: #27c4f4; }

/* Dots im Dropdown nach Theme-Option */
.current-theme-dot.default,
.opt-dot.default { background: #27c4f4; }
.current-theme-dot.lime,
.opt-dot.lime    { background: #8aba16; }
.current-theme-dot.purple,
.opt-dot.purple  { background: #704f98; }
.current-theme-dot.dark-cherry-bloom,
.opt-dot.dark-cherry-bloom { background: radial-gradient(circle, #cc1a33 30%, #3d0010 100%); }
.current-theme-dot.dark-cherry,
.opt-dot.dark-cherry    { background: #971330; }
.current-theme-dot.honey-moon,
.opt-dot.honey-moon  { background: #caa428; }
.current-theme-dot.candy-chaos,
.opt-dot.candy-chaos  { background: #a53abb; }
.current-theme-dot.sparta,
.opt-dot.sparta       { background: #000000; border: 1px solid #555; }
.current-theme-dot.sparta2,
.opt-dot.sparta2       { background: #ffffff; border: 1px solid #555; }
.current-theme-dot.toxic-green,
.opt-dot.toxic-green { background: #39FF14; }
.current-theme-dot.claudy-sky,
.opt-dot.claudy-sky { background: linear-gradient(135deg, #5ba4e5 0%, #87CEEB 50%, #c8e8f8 100%); }
.current-theme-dot.glass-tank,
.opt-dot.glass-tank { background: radial-gradient(circle, #22FF88 0%, #003322 100%); }
.current-theme-dot.neon-grid,
.opt-dot.neon-grid { background: linear-gradient(135deg, #ff2d78 0%, #1a0030 100%); }
.current-theme-dot.magnetic-field,
.opt-dot.magnetic-field { background: radial-gradient(circle, #27c4f4 30%, #03040a 100%); }
.current-theme-dot.baker-street,
.opt-dot.baker-street { background: radial-gradient(circle at 40% 35%, #c87828 0%, #3d1a08 55%, #08060a 100%); }
.current-theme-dot.lotus,
.opt-dot.lotus { background: radial-gradient(circle, #d8b4fe 30%, #0a0612 100%); }
.current-theme-dot.plasma,
.opt-dot.plasma { background: radial-gradient(circle at 35% 35%, #ff7d3c 0%, #c41840 50%, #180828 100%); }
.current-theme-dot.inversion,
.opt-dot.inversion { background: radial-gradient(circle, #5fcfff 0%, #2080d0 50%, #040814 100%); }
.current-theme-dot.wave,
.opt-dot.wave { background: radial-gradient(circle at 70% 30%, #ffffff 0%, #4fc3f7 25%, #1e88c5 60%, #062035 100%); }
.current-theme-dot.starry,
.opt-dot.starry { background: radial-gradient(circle at 50% 50%, #ffffff 0%, #c879ff 12%, #4a3070 35%, #000000 100%); }

/* ============================================================
   RCT Glow Card — WebGL Distance-Field Neon Border
   ============================================================ */

.rct-glow-card {
  position: relative;
  border-radius: 1rem;
  background: transparent;
  isolation: isolate;
  margin: 1rem 0;
  min-height: 200px;
  overflow: hidden;
}

.rct-glow-card__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}

.rct-glow-card__inner {
  position: relative;
  z-index: 1;
  padding: 2.5rem;
  color: var(--rct-shell-text, #f0f0f0);
  text-align: center;
}

.rct-glow-card.align-left  .rct-glow-card__inner { text-align: left;  padding-left: 80px; }
.rct-glow-card.align-right .rct-glow-card__inner { text-align: right; padding-right: 80px; }
.rct-glow-card.align-center .rct-glow-card__inner { text-align: center; }

.rct-glow-card__headline {
  font-family: var(--rct-font-headline, var(--rct-font-body));
  font-size: 1.75rem;
  margin: 0 0 1rem 0;
  color: var(--rct-accent);
}

.rct-glow-card__text {
  margin: 0 0 1.5rem 0;
  line-height: 1.6;
}

.rct-glow-card__link {
  display: inline-block;
}
.current-theme-dot.fire,
.opt-dot.fire { background: radial-gradient(circle at 50% 70%, #ffaa44 0%, #ff5020 35%, #6b0a05 75%, #0a0202 100%); }


/* ------------------------------------------------------------
   LAYOUT-SWITCHER – gespiegelt von .rct-theme-switcher
   ------------------------------------------------------------ */

.rct-layout-switcher {
  position: relative;
  display: inline-block;
  font-family: var(--rct-font-mono);
  z-index: 510;
}

/* Trigger-Button – identisch zu .theme-trigger */
.layout-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 6px 12px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 140px;
}
.layout-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Liste */
.layout-list {
  list-style: none;
  padding: 6px 0;
  margin: 0;
}

/* Buttons in der Layout-Liste */
.layout-opt-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  transition: all 0.2s ease;
}
.layout-opt-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* SVGs in den Layout-Buttons – größer */
.layout-opt-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Das "aktive" rect in den Layout-SVGs bekommt die Accent-Farbe */
.layout-opt-btn svg rect.active,
.layout-opt-btn svg rect[data-active],
.layout-opt-btn.is-active svg rect:first-child {
  fill: var(--rct-accent);
}

/* Aktiver Button-Zustand */
.layout-opt-btn.is-active {
  color: #fff;
}
.layout-opt-btn.is-active svg rect.active,
.layout-opt-btn.is-active svg rect[data-active],
.layout-opt-btn.is-active svg rect:first-child {
  fill: var(--rct-accent);
}

/* Dropdown-Footer mit Persistenz-Checkbox */
.theme-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.2);
}
.save-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #666;
  cursor: pointer;
}
.save-toggle input {
  cursor: pointer;
}


/* ------------------------------------------------------------
   3. PAGE-HEADER / SEITENTITEL
   ------------------------------------------------------------ */

.rct-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.rct-page-header h1,
.rct-page-title {
  font-family: var(--rct-font-headline);
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rct-text);
  line-height: 1.1;
}

.rct-status-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.rct-status-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--rct-font-headline);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rct-primary);
}
.rct-status-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--rct-primary);
  display: inline-block;
}


/* ------------------------------------------------------------
   4. ARTIKEL / CONTENT-KARTEN (.mod_article)
   ------------------------------------------------------------ */

.mod_article {
  margin: 10px auto;
  max-width: var(--rct-content-width);
  padding: 20px 20px;
  border-radius: 12px;
  /* Leicht transluzent damit die Aurora-Animation durch scheint */
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a1a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  position: relative;
}

.mod_article + .mod_article {
  margin-top: 2rem;
}

/* Schlagschatten-Override pro Artikel (tl_article.rct_article_shadow).
   Doppelklasse (0,2,0) schlägt Default-.mod_article (0,1,0) und
   classic-Override (0,1,1). Für rct-fullwidth-article wird die
   :not()-Klausel in rct-layout.css erweitert, damit diese Regel
   auch dort greift. */
.mod_article.rct-article-shadow-none   { box-shadow: none; }
.mod_article.rct-article-shadow-soft   { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10); }
.mod_article.rct-article-shadow-strong { box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); }

/* Variante: Featured (etwas mehr Padding) */
.mod_article.rct-card-featured {
  padding: 60px;
}

/* Karten-Label */
.rct-card-label {
  font-family: var(--rct-font-headline);
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--rct-text-muted);
  margin-bottom: 0.375rem;
}

/* Karten-Überschrift */
.rct-card-heading {
  font-family: var(--rct-font-headline);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--rct-primary);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

/* Metrik-Anzeige (große Zahl) */
.rct-metric {
  font-family: var(--rct-font-headline);
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--rct-text);
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
.rct-metric-unit {
  font-size: 1.125rem;
  font-weight: 700;
}

/* Progress-Bar */
.rct-progress {
  width: 100%;
  height: 4px;
  background: var(--rct-surface-high);
  overflow: hidden;
  margin-top: 0.75rem;
}
.rct-progress-bar {
  height: 100%;
  background: var(--rct-primary);
  transition: width 0.6s cubic-bezier(.4,0,.2,1);
}
.rct-progress-bar.secondary { background: var(--rct-secondary); }
.rct-progress-bar.muted     { background: var(--rct-text-muted); }


/* ------------------------------------------------------------
   5. BENTO-GRID
   ------------------------------------------------------------ */

.rct-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
}

.rct-bento-8  { grid-column: span 8;  }
.rct-bento-4  { grid-column: span 4;  }
.rct-bento-6  { grid-column: span 6;  }
.rct-bento-12 { grid-column: span 12; }

/* Responsive-Anpassung steht in rct-layout.css (Media Query ≤ 1024px) */


/* ------------------------------------------------------------
   6. TABELLE (.rct-table)
   ------------------------------------------------------------ */

.rct-table {
  width: 100%;
  border-collapse: collapse;
}

.rct-table thead tr {
  border-bottom: 1px solid var(--rct-surface-high);
}

.rct-table th {
  text-align: left;
  padding: 1rem 0;
  font-family: var(--rct-font-headline);
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--rct-text-muted);
}

.rct-table td {
  padding: 1rem 0;
  font-size: 0.875rem;
}

.rct-table tbody tr {
  border-bottom: 1px solid var(--rct-surface-high);
  transition: background 0.15s ease;
}
.rct-table tbody tr:hover {
  background: var(--rct-surface-low);
}


/* ------------------------------------------------------------
   7. STATUS-BADGES (.rct-badge)
   ------------------------------------------------------------ */

.rct-badge {
  display: inline-block;
  font-family: var(--rct-font-headline);
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.2rem 0.5rem;
}

.rct-badge-success { background: var(--rct-primary-container);   color: var(--rct-primary);   }
.rct-badge-error   { background: var(--rct-error-container);      color: var(--rct-error);     }
.rct-badge-info    { background: var(--rct-secondary-container);  color: var(--rct-secondary); }
.rct-badge-muted   { background: var(--rct-surface-high);         color: var(--rct-text-muted);}


/* ------------------------------------------------------------
   8. NAVIGATION – BREADCRUMB & PAGINATION
   ------------------------------------------------------------ */

/* Breadcrumb */
.mod_breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  flex-wrap: wrap;
}
.mod_breadcrumb ol li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--rct-font-mono);
  font-size: 0.7rem;
  color: var(--rct-text-muted);
  text-transform: uppercase;
}
.mod_breadcrumb ol li + li::before {
  content: '/';
  color: var(--rct-outline);
}
.mod_breadcrumb ol li.last a,
.mod_breadcrumb ol li.last span {
  color: var(--rct-primary);
  font-weight: 600;
}

/* Pagination */
.mod_pagination {
  margin-top: 2rem;
}
.mod_pagination ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}
.mod_pagination ul li a,
.mod_pagination ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-family: var(--rct-font-headline);
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--rct-outline);
  color: var(--rct-text-muted);
  transition: all 0.15s ease;
}
.mod_pagination ul li a:hover {
  border-color: var(--rct-primary);
  color: var(--rct-primary);
}
.mod_pagination ul li.active span {
  background: var(--rct-primary);
  border-color: var(--rct-primary);
  color: white;
}



/* ------------------------------------------------------------
   9. TYPOGRAFIE (.ce_text)
   Contao-spezifische Text-Elemente innerhalb von Content-Elementen
   ------------------------------------------------------------ */

.ce_text h1, .ce_text h2, .ce_text h3,
.ce_text h4, .ce_text h5, .ce_text h6 {
  font-family: var(--rct-font-headline);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: var(--rct-text);
}
.ce_text h1 { font-size: 2.25rem; }
.ce_text h2 { font-size: 1.75rem; }
.ce_text h3 { font-size: 1.375rem; }
.ce_text h4 { font-size: 1.125rem; }

.ce_text p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--rct-text);
  margin-bottom: 1rem;
}
.ce_text p:last-child { margin-bottom: 0; }

.ce_text ul, .ce_text ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.ce_text ul { list-style: disc; }
.ce_text ol { list-style: decimal; }
.ce_text li { margin-bottom: 0.4rem; font-size: 0.9375rem; }

.ce_text a {
  color: var(--rct-primary);
  border-bottom: 1px solid var(--rct-primary-light);
  transition: color 0.15s ease;
}
.ce_text a:hover { color: var(--rct-primary-light); }

.ce_text strong { font-weight: 700; }
.ce_text em     { font-style: italic; }

.ce_text blockquote {
  border-left: 3px solid var(--rct-primary-light);
  padding: 0.75rem 1.25rem;
  margin: 1.5rem 0;
  background: var(--rct-primary-container);
  font-style: italic;
}

.ce_text code {
  font-family: var(--rct-font-mono);
  font-size: 0.8125rem;
  background: var(--rct-surface-high);
  padding: 0.125rem 0.375rem;
  border-radius: var(--rct-radius);
}

.ce_text pre {
  font-family: var(--rct-font-mono);
  font-size: 0.8125rem;
  background: var(--rct-shell-bg);
  color: var(--rct-primary-dim);
  padding: 1.25rem;
  overflow-x: auto;
  margin: 1.25rem 0;
  line-height: 1.6;
}

/* Überline-Label über einer Überschrift */
.rct-overline {
  font-family: var(--rct-font-headline);
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--rct-primary);
  margin-bottom: 0.5rem;
  display: block;
}

/* Mono-Label (für Metadaten) */
.rct-mono-label {
  font-family: var(--rct-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rct-text-muted);
}


/* ------------------------------------------------------------
   10. FORMULARE (.ce_form, .mod_login, .mod_search)
   ------------------------------------------------------------ */

.mod_login,
.mod_search {
  background: var(--rct-surface);
  padding: 2rem;
  box-shadow: var(--rct-shadow);
}

.widget {
  margin-bottom: 1.25rem;
}

.widget label {
  display: block;
  font-family: var(--rct-font-headline);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--rct-text-muted);
  margin-bottom: 0.4rem;
}

.widget input[type="text"],
.widget input[type="email"],
.widget input[type="password"],
.widget input[type="search"],
.widget input[type="url"],
.widget input[type="tel"],
.widget textarea,
.widget select {
  width: 100%;
  background: var(--rct-surface-low);
  border: 1px solid var(--rct-outline);
  border-radius: var(--rct-radius);
  padding: 0.6rem 0.875rem;
  font-family: var(--rct-font-body);
  font-size: 0.875rem;
  color: var(--rct-text);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.widget input:focus,
.widget textarea:focus,
.widget select:focus {
  border-color: var(--rct-primary);
  background: var(--rct-surface);
}

.widget textarea {
  resize: vertical;
  min-height: 120px;
}

.widget.submit button,
.widget.submit input[type="submit"] {
  background: var(--rct-primary);
  color: white;
  font-family: var(--rct-font-headline);
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 0.75rem 1.75rem;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s ease;
}
.widget.submit button:hover,
.widget.submit input[type="submit"]:hover {
  background: var(--rct-primary-light);
  color: #141f00;
}

/* Login- & Logout-Buttons: weißer Button mit Accent-Rahmen */
.mod_login button[type="submit"],
.mod_login input[type="submit"],
.mod_logout button[type="submit"],
.mod_logout input[type="submit"] {
  background: #fff !important;
  color: var(--rct-shell-bg) !important;
  border: 1px solid var(--rct-accent) !important;
  font-family: var(--rct-font-headline);
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 0.75rem 1.75rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.mod_login button[type="submit"]:hover,
.mod_login input[type="submit"]:hover,
.mod_logout button[type="submit"]:hover,
.mod_logout input[type="submit"]:hover {
  background: var(--rct-accent) !important;
  color: #fff !important;
}

/* Sparta II: Shell-BG ist hell → Button-Text explizit dunkel */
[data-theme="sparta2"] .mod_login button[type="submit"],
[data-theme="sparta2"] .mod_login input[type="submit"],
[data-theme="sparta2"] .mod_logout button[type="submit"],
[data-theme="sparta2"] .mod_logout input[type="submit"] {
  color: #1a1a1a !important;
}

/* Fehlerzustand */
.widget.error input,
.widget.error textarea {
  border-color: var(--rct-error);
}
.widget p.error {
  font-size: 0.75rem;
  color: var(--rct-error);
  margin-top: 0.25rem;
}

/* Suche: Eingabe + Button nebeneinander */
.mod_search .formbody {
  display: flex;
  gap: 0;
}
.mod_search .formbody input[type="search"] {
  border-right: none;
  flex: 1;
}
.mod_search .formbody input[type="search"] {
  border-right: none;
  flex: 1;
}
.mod_search .formbody button[type="submit"] {
  background: var(--rct-primary);
  color: var(--rct-text);
  font-family: var(--rct-font-headline);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 12px 20px 12px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.mod_search .formbody button[type="submit"]:hover {
  background: var(--rct-primary-light);
}


/* ------------------------------------------------------------
   11. HIGHLIGHT / INSIGHT-BOX
   ------------------------------------------------------------ */

.rct-insight {
  background: var(--rct-surface);
  border-left: 4px solid var(--rct-secondary);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.rct-insight-label {
  font-family: var(--rct-font-headline);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--rct-secondary);
  margin-bottom: 0.375rem;
}

.rct-insight p {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--rct-text);
}


/* ------------------------------------------------------------
   12. RIPPLE-EFFEKT
   Das .rct-ripple-Element wird per JS ins DOM injiziert.
   Die @keyframes stehen in rct.js (wird dort per style-Tag einmalig erzeugt).
   ------------------------------------------------------------ */

.rct-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  pointer-events: none;
}


/* ------------------------------------------------------------
   13. RCT-GRID (.rct-flex)
   Verwendung via Artikel-Klasse (Stufe 1) oder rct_grid_start CE (Stufe 2).

   Öffnendes Element:  <div class="rct-flex rct-flex--3col rct-gap--sm">
   Inhalt:             beliebige Contao Content-Elemente
   Schließendes Elem.: </div>

   Spalten:  --2col / --3col / --4col
   Gap:      rct-gap--sm (0.75rem) / default (1.5rem) / rct-gap--lg (2.5rem)
   Ausricht: rct-flex--align-start / --align-center / --align-end / --align-stretch
   ------------------------------------------------------------ */

.rct-flex {
  display: grid;
  gap: 1.5rem;
}

/* Spalten-Varianten */
.rct-flex--2col { grid-template-columns: repeat(2, 1fr); }
.rct-flex--3col { grid-template-columns: repeat(3, 1fr); }
.rct-flex--4col { grid-template-columns: repeat(4, 1fr); }

/* Gap-Varianten */
.rct-flex.rct-gap--sm { gap: 0.75rem; }
.rct-flex.rct-gap--lg { gap: 2.5rem; }

/* Grid-Spalten-Wrapper: gestapelte Inhalte in einer Grid-Zelle */
.rct-grid-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.rct-grid-col.rct-gap--sm { gap: 0.5rem; }
.rct-grid-col.rct-gap--lg { gap: 1.75rem; }
.rct-grid-col.rct-flex--align-start   { align-items: flex-start; }
.rct-grid-col.rct-flex--align-center  { align-items: center; }
.rct-grid-col.rct-flex--align-end     { align-items: flex-end; }

/* Vertikale Ausrichtung */
.rct-flex--align-start   { align-items: start; }
.rct-flex--align-center  { align-items: center; }
.rct-flex--align-end     { align-items: end; }
.rct-flex--align-stretch { align-items: stretch; }   /* default */

/* Responsive: Container Queries auf .rct-content-inner */
@container (max-width: 1200px) {
  .rct-flex--4col { grid-template-columns: repeat(3, 1fr); }
}

@container (max-width: 900px) {
  .rct-flex--3col,
  .rct-flex--4col { grid-template-columns: repeat(2, 1fr); }
}

@container (max-width: 480px) {
  .rct-flex--2col,
  .rct-flex--3col,
  .rct-flex--4col { grid-template-columns: 1fr; }
}

@container (max-width: 680px) {
  .rct-flex--3col,
  .rct-flex--4col { --rct-flex-basis: calc(50% - 0.75rem); }
}

@container (max-width: 480px) {
  .rct-flex--2col,
  .rct-flex--3col,
  .rct-flex--4col { flex-direction: column; }
}

/* ============================================================
   14. Download-Card (.rct-download-card)
   ============================================================ */

.rct-download-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--rct-border, rgba(0,0,0,0.1));
  border-left: 4px solid var(--rct-primary, #2951c7);
  border-radius: 8px;
  background: var(--rct-surface, #fff);
  color: var(--rct-text, #1a1a2e);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.rct-download-link:hover {
  border-left-color: var(--rct-accent, #27c4f4);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-1px);
  color: var(--rct-text, #1a1a2e);
  text-decoration: none;
}

.rct-download-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--rct-primary-container, rgba(41,81,199,0.12));
  color: var(--rct-primary, #2951c7);
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.rct-download-link:hover .rct-download-icon {
  background: var(--rct-primary, #2951c7);
  color: #fff;
}

.rct-download-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.rct-download-name {
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rct-download-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rct-download-badge {
  display: inline-block;
  padding: 0.1em 0.45em;
  border-radius: 4px;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--rct-primary-container, rgba(41,81,199,0.12));
  color: var(--rct-primary, #2951c7);
}

/* Dateityp-Farben — alle via Theme-Variablen, kein hardcoded Farbchaos */

/* ============================================================
   15. Listen (.content-list)
   ============================================================ */

/* Basis: ul */
.content-list ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.content-list ul li {
  margin-bottom: 0.45rem;
  padding-bottom: 0.45rem;
  line-height: 1.65;
  list-style: none;
  border-bottom: 1px solid var(--rct-outline);
}
.content-list ul li:last-child {
  border-bottom: none;
}

/* Default-Marker: inline, margin-right funktioniert */
.content-list ul li::before {
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}

/* Varianten per Artikel-CSS-Klasse */
.rct-list--dot li::before {
  content: '●';
  font-size: 1.2em;
  margin-right: 5px;
  color: var(--rct-primary, #2951c7);
}

.rct-list--check li::before {
  content: '✓';
  font-size: 1.25em;   /* 0.9 × 1.5 */
  font-weight: 700;
  margin-right: 5px;
  color: var(--rct-primary);
}

.rct-list--arrow li::before {
  content: '›';
  font-size: 1.3em;    /* 1.2 × 1.5 */
  line-height: 1;
  margin-right: 5px;
  color: var(--rct-primary);
}

.rct-list--dash li::before {
  content: '—';
  font-size: 1.275em;  /* 0.85 × 1.5 */
  margin-right: 5px;
  color: var(--rct-primary);
}

.rct-list--plus li::before {
  content: '+';
  font-size: 2.0em;    /* 1.0 × 1.5 */
  font-weight: 700;
  line-height: 1;
  margin-right: 5px;
  color: var(--rct-primary);
  position: relative;
  top: 0.3rem;
}

.rct-list--star li::before {
  content: '★';
  font-size: 1.125em;  /* 0.75 × 1.5 */
  margin-right: 5px;
  color: var(--rct-primary);
}

.rct-list--none li::before {
  display: none;
}
.rct-list--none li {
  padding-left: 0;
}

/* Ordered List — Tech-Inspector-Stil: führende Nullen, DM Mono, Akzentfarbe */
.content-list ol {
  list-style: none;
  counter-reset: rct-counter;
  padding: 0;
  margin: 0 0 0.2rem;
}

.content-list ol li {
  counter-increment: rct-counter;
  position: relative;
  padding-left: 2.25rem;
  padding-bottom: 0.45rem;
  margin-bottom: 0.45rem;
  line-height: 1.65;
  border-bottom: 1px solid var(--rct-outline);
}
.content-list ol li:last-child {
  border-bottom: none;
}

.content-list ol li::before {
  content: counter(rct-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: var(--rct-font-mono);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--rct-accent, #2951c7);
  line-height: 1.65;
  letter-spacing: 0.02em;
}

/* ============================================================
   15. Akkordeon (.content-accordion / handorgel)
   ============================================================ */

.content-accordion {
  border: 1px solid var(--rct-border, rgba(0,0,0,0.1));
  border-radius: 8px;
  overflow: hidden;
  margin-block: 1.5rem;
}

/* Header-Button */
.handorgel__header__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.25rem;
  margin: 0;
  border: none;
  border-top: 1px solid var(--rct-border, rgba(0,0,0,0.1));
  border-radius: 0;
  background: var(--rct-surface, #fff);
  color: var(--rct-text, #1a1a2e);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.handorgel__header:first-child .handorgel__header__button {
  border-top: none;
}

.handorgel__header__button:hover {
  background: var(--rct-accent-soft, rgba(41, 81, 199, 0.06));
  color: var(--rct-accent, #2951c7);
}

/* Chevron-Icon via CSS */
.handorgel__header__button::after {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  flex-shrink: 0;
  margin-left: 1rem;
  opacity: 0.6;
}

.handorgel__header__button[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  opacity: 1;
}

.handorgel__header__button[aria-expanded="true"] {
  background: var(--rct-accent-soft, rgba(41, 81, 199, 0.06));
  color: var(--rct-accent, #2951c7);
}

/* Content-Panel */
.handorgel__content {
  display: none;
  overflow: hidden;
  height: 0;
  background: var(--rct-surface, #fff);
  border-top: 1px solid var(--rct-border, rgba(0,0,0,0.08));
  transition: height 0.25s ease;
}

.handorgel__content--open {
  display: block;
  transition: height 0.25s ease;
}

.handorgel__content--opened {
  overflow: visible;
}

.handorgel__content__inner {
  padding: 1.25rem;
  opacity: 0;
  color: var(--rct-text-muted, #555);
  font-size: 0.925rem;
  line-height: 1.7;
  transition: opacity 0.15s ease;
}

.handorgel__content--opened .handorgel__content__inner {
  opacity: 1;
  transition: opacity 0.25s ease 0.05s;
}

/* Theme-aware Farben */
[data-theme="purple"] .handorgel__header__button:hover,
[data-theme="purple"] .handorgel__header__button[aria-expanded="true"] {
  background: rgba(168, 85, 247, 0.06);
  color: #a855f7;
}
[data-theme="purple"] .handorgel__header__button[aria-expanded="true"]::after {
  border-color: #a855f7;
}

[data-theme="lime"] .handorgel__header__button:hover,
[data-theme="lime"] .handorgel__header__button[aria-expanded="true"] {
  background: rgba(138, 186, 22, 0.08);
  color: #4d8a12;
}
[data-theme="lime"] .handorgel__header__button[aria-expanded="true"]::after {
  border-color: #4d8a12;
}

/* ------------------------------------------------------------------
   15a. Akkordeon DARK — "Classified Archive" Terminal-Look
   ------------------------------------------------------------------ */

.content-accordion.style-dark {
  border: 1px solid rgba(39, 196, 244, 0.18);
  border-radius: 0;
  background: rgba(10, 14, 20, 0.85);
  position: relative;
  overflow: visible;
  /* Notched corner oben links */
  clip-path: polygon(12px 0%, 100% 0%, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0% 100%, 0% 12px);
}

/* Scan-Linie über dem ganzen Block */
.content-accordion.style-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent 3px,
    rgba(39, 196, 244, 0.018) 3px,
    rgba(39, 196, 244, 0.018) 4px
  );
  pointer-events: none;
  z-index: 0;
}

/* CSS-Zähler für [01] [02] Nummerierung */
.content-accordion.style-dark {
  counter-reset: acc-item;
}

/* DARK — Header */
.content-accordion.style-dark .handorgel__header {
  counter-increment: acc-item;
  position: relative;
  z-index: 1;
}

.content-accordion.style-dark .handorgel__header__button {
  background: rgba(15, 20, 28, 0.9);
  color: rgba(255, 255, 255, 0.75);
  border-top: 1px solid rgba(39, 196, 244, 0.12);
  border-radius: 0;
  font-family: var(--rct-font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.9rem 1.25rem 0.9rem 1rem;
  gap: 0.75rem;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

/* Nummerierung [01] via counter */
.content-accordion.style-dark .handorgel__header__button::before {
  content: '[' counter(acc-item, decimal-leading-zero) ']';
  color: var(--rct-accent, #27c4f4);
  font-family: var(--rct-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  opacity: 0.8;
}

.content-accordion.style-dark .handorgel__header:first-child .handorgel__header__button {
  border-top: none;
}

/* Chevron ersetzen durch Terminal-Pfeil */
.content-accordion.style-dark .handorgel__header__button::after {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--rct-accent, #27c4f4);
  border-bottom: 2px solid var(--rct-accent, #27c4f4);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  opacity: 0.5;
  margin-left: auto;
  flex-shrink: 0;
}

.content-accordion.style-dark .handorgel__header__button[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  opacity: 1;
}

/* Hover */
.content-accordion.style-dark .handorgel__header__button:hover {
  background: rgba(39, 196, 244, 0.06);
  color: var(--rct-accent, #27c4f4);
  box-shadow: inset 3px 0 0 var(--rct-accent, #27c4f4);
}

/* Offen-Zustand — Glow */
.content-accordion.style-dark .handorgel__header__button[aria-expanded="true"] {
  background: rgba(39, 196, 244, 0.08);
  color: var(--rct-accent, #27c4f4);
  box-shadow: inset 3px 0 0 var(--rct-accent, #27c4f4),
              0 0 12px rgba(39, 196, 244, 0.08);
  text-shadow: 0 0 8px rgba(39, 196, 244, 0.4);
}

.content-accordion.style-dark .handorgel__header__button[aria-expanded="true"]::before {
  opacity: 1;
  text-shadow: 0 0 6px rgba(39, 196, 244, 0.6);
}

/* DARK — Content-Panel */
.content-accordion.style-dark .handorgel__content {
  background: rgba(6, 9, 14, 0.92);
  border-top: 1px solid rgba(39, 196, 244, 0.1);
}

.content-accordion.style-dark .handorgel__content__inner {
  padding: 1.25rem 1.5rem 1.25rem 1.25rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.75;
  border-left: 2px solid rgba(39, 196, 244, 0.2);
  position: relative;
  z-index: 1;
}

.content-accordion.style-dark .handorgel__content__inner p,
.content-accordion.style-dark .handorgel__content__inner li {
  color: rgba(255, 255, 255, 0.65);
}

.content-accordion.style-dark .handorgel__content__inner a {
  color: var(--rct-accent, #27c4f4);
  text-decoration: none;
  border-bottom: 1px solid rgba(39, 196, 244, 0.3);
}

.content-accordion.style-dark .handorgel__content__inner a:hover {
  text-shadow: 0 0 6px rgba(39, 196, 244, 0.5);
  border-bottom-color: var(--rct-accent, #27c4f4);
}

/* Theme-Varianten für DARK */
[data-theme="lime"] .content-accordion.style-dark {
  border-color: rgba(138, 186, 22, 0.2);
}
[data-theme="lime"] .content-accordion.style-dark .handorgel__header__button::before,
[data-theme="lime"] .content-accordion.style-dark .handorgel__header__button::after {
  color: var(--rct-primary-light, #8aba16);
  border-color: var(--rct-primary-light, #8aba16);
}
[data-theme="lime"] .content-accordion.style-dark .handorgel__header__button[aria-expanded="true"],
[data-theme="lime"] .content-accordion.style-dark .handorgel__header__button:hover {
  background: rgba(138, 186, 22, 0.07);
  color: var(--rct-primary-light, #8aba16);
  box-shadow: inset 3px 0 0 var(--rct-primary-light, #8aba16);
}
[data-theme="lime"] .content-accordion.style-dark .handorgel__content__inner a {
  color: var(--rct-primary-light, #8aba16);
}
[data-theme="lime"] .content-accordion.style-dark .handorgel__content__inner {
  border-left-color: rgba(138, 186, 22, 0.25);
}

[data-theme="purple"] .content-accordion.style-dark {
  border-color: rgba(168, 85, 247, 0.2);
}
[data-theme="purple"] .content-accordion.style-dark .handorgel__header__button::before,
[data-theme="purple"] .content-accordion.style-dark .handorgel__header__button::after {
  color: #a855f7;
  border-color: #a855f7;
}
[data-theme="purple"] .content-accordion.style-dark .handorgel__header__button[aria-expanded="true"],
[data-theme="purple"] .content-accordion.style-dark .handorgel__header__button:hover {
  background: rgba(168, 85, 247, 0.07);
  color: #a855f7;
  box-shadow: inset 3px 0 0 #a855f7;
}
[data-theme="purple"] .content-accordion.style-dark .handorgel__content__inner a {
  color: #a855f7;
}
[data-theme="purple"] .content-accordion.style-dark .handorgel__content__inner {
  border-left-color: rgba(168, 85, 247, 0.25);
}

/* ------------------------------------------------------------------
   15b. Akkordeon LIGHT — Clean Editorial
   ------------------------------------------------------------------ */

.content-accordion.style-light {
  border: none;
  border-radius: 0;
  background: transparent;
  border-top: 2px solid #e5e7eb;
}

.content-accordion.style-light .handorgel__header__button {
  background: transparent;
  color: #1a1a2e;
  border-top: 1px solid #e5e7eb;
  border-radius: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 1.1rem 0.25rem;
  transition: color 0.2s;
}

.content-accordion.style-light .handorgel__header:first-child .handorgel__header__button {
  border-top: none;
}

.content-accordion.style-light .handorgel__header__button::after {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid #9ca3af;
  border-bottom: 2px solid #9ca3af;
  transform: rotate(45deg);
  transition: transform 0.25s ease, border-color 0.2s;
  margin-left: auto;
  flex-shrink: 0;
  opacity: 1;
}

.content-accordion.style-light .handorgel__header__button[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  border-color: var(--rct-accent, #27c4f4);
}

.content-accordion.style-light .handorgel__header__button:hover {
  color: var(--rct-accent, #27c4f4);
  background: transparent;
  box-shadow: none;
}

.content-accordion.style-light .handorgel__header__button[aria-expanded="true"] {
  color: var(--rct-accent, #27c4f4);
  background: transparent;
  box-shadow: none;
}

.content-accordion.style-light .handorgel__content {
  background: transparent;
  border-top: none;
}

.content-accordion.style-light .handorgel__content__inner {
  padding: 0.5rem 0.25rem 1.25rem;
  color: #4b5563;
  font-size: 0.95rem;
  line-height: 1.75;
  border-left: 3px solid var(--rct-accent, #27c4f4);
  padding-left: 1.25rem;
}

.content-accordion.style-light .handorgel__content__inner p,
.content-accordion.style-light .handorgel__content__inner li {
  color: #4b5563;
}

.content-accordion.style-light .handorgel__content__inner a {
  color: var(--rct-accent, #27c4f4);
  font-weight: 500;
}

/* ==========================================================================
   17. Sidebar Logo
   ========================================================================== */

/* Hover-Feedback auf dem Logo-Link */
.rct-logo-link:hover .rct-logo {
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

/* ==========================================================================
   18. Swiper Content Slider
   ========================================================================== */

/* Pfeile + Dots in Theme-Farbe, Pagination im Padding-Bereich */
.swiper {
  --swiper-theme-color: var(--rct-primary);
  --swiper-pagination-bottom: 0px;
  --swiper-pagination-bullet-width: 16px;
  --swiper-pagination-bullet-height: 16px;
  --swiper-pagination-bullet-inactive-opacity: 0.4;
  padding-bottom: 40px;
}

/* Slide-Inhalt zentrieren, falls schmaler als der Slide; optional max-height */
.swiper-wrapper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: var(--rct-slide-max-height, none);
  overflow: hidden;
}
@media (max-width: 1024px) {
  .swiper-wrapper .swiper-slide {
    max-height: var(--rct-slide-max-height-mobile, var(--rct-slide-max-height, none));
  }
}

/* ==========================================================================
   19. Downloads (Mehrfach)
   ========================================================================== */

.rct-downloads-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rct-downloads-list li {
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   19. Beschreibungsliste (dl/dt/dd)
   ========================================================================== */

.content-description-list dl {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 1.25rem;
}

.content-description-list dt {
  font-family: var(--rct-font-headline);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rct-primary);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rct-primary-container);
  white-space: nowrap;
}

.content-description-list dd {
  margin: 0;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--rct-text, inherit);
  border-bottom: 1px solid var(--rct-primary-container);
  line-height: 1.5;
}

/* Letztes Paar ohne Trennlinie */
.content-description-list dl dt:last-of-type,
.content-description-list dl dd:last-of-type {
  border-bottom: none;
}

/* ==========================================================================
   20. RCT People Box
   ========================================================================== */

.rct-people-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--rct-surface, #fff);
  border: 1px solid var(--rct-primary-container);
  border-radius: 1rem;
  padding: 2rem 1.5rem 1.5rem;
  gap: 0;
}

/* Avatar */
.rct-people-avatar {
  width: var(--rct-avatar-size, 96px);
  height: var(--rct-avatar-size, 96px);
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.25rem;
  border: 3px solid var(--rct-primary-container);
  flex-shrink: 0;
}

.rct-people-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder: Initiale */
.rct-people-avatar--placeholder {
  background: var(--rct-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rct-people-avatar--placeholder span {
  font-family: var(--rct-font-headline);
  font-size: 2rem;
  font-weight: 700;
  color: var(--rct-primary);
}

/* Body */
.rct-people-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.rct-people-name {
  font-family: var(--rct-font-headline);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--rct-text, inherit);
  margin: 0;
}

.rct-people-role {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rct-accent);
  margin: 0;
}

.rct-people-bio {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--rct-text-muted, #555);
  margin: 0.5rem 0 0;
}

/* Kontakte */
.rct-people-contacts {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  border-top: 1px solid var(--rct-primary-container);
  padding-top: 1rem;
  margin-top: auto;
}

.rct-people-contact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--rct-primary);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 0.4rem;
  transition: background 0.15s ease;
  overflow: hidden;
}

.rct-people-contact:hover {
  background: var(--rct-primary-container);
}

.rct-people-contact svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: var(--rct-accent);
}

.rct-people-contact span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   RCT Parallax / Video Background
   ============================================================ */

.rct-parallax {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
}

.rct-parallax--200px { min-height: 200px; }
.rct-parallax--300px { min-height: 300px; }
.rct-parallax--50vh  { min-height: 50vh; }
.rct-parallax--100vh { min-height: 100vh; }

.rct-parallax--image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media (max-width: 768px) {
  .rct-parallax--image {
    background-attachment: scroll;
  }
}

.rct-parallax-video {
  position: absolute;
  top: -40%;
  left: 0;
  width: 100%;
  height: 180%;
  object-fit: cover;
  will-change: transform;
  object-position: center;
  z-index: 0;
}

.rct-parallax-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
}
.rct-parallax-overlay--20 { opacity: 0.2; }
.rct-parallax-overlay--40 { opacity: 0.4; }
.rct-parallax-overlay--60 { opacity: 0.6; }
.rct-parallax-overlay--80 { opacity: 0.8; }

.rct-parallax-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 120px 60px;
}

/* ============================================================
   RCT BG-Color Wrapper (farblich/bildlich hinterlegte Hinweis-Boxen)
   Wrapper-Paar rct_bgcolor_start / rct_bgcolor_end aus tl_content.
   Inline-Style setzt background-color + optional background-image —
   nur Padding und Surface-Reset stehen hier.
   ============================================================ */
.rct-bgbox {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--rct-radius-lg, 0.5rem);
}
.rct-bgbox--none { padding: 0; }
.rct-bgbox--sm   { padding: 0.75rem 1rem; }
.rct-bgbox--md   { padding: 1.5rem; }
.rct-bgbox--lg   { padding: 2.5rem 2rem; }

/* ============================================================
   RCT News Pager (Vor/Zurück innerhalb eines News-Archivs)
   FE-Modul mod_rct_news_pager. Touch-Targets gross fuer Mobile.
   ============================================================ */
.rct-news-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--rct-shell-border, rgba(255,255,255,0.08));
  border-bottom: 1px solid var(--rct-shell-border, rgba(255,255,255,0.08));
  font-family: var(--rct-font-headline, sans-serif);
}
.rct-news-pager--top    { margin-top: 0; }
.rct-news-pager--bottom { margin-bottom: 0; }

.rct-pager-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  min-height: 44px;             /* Touch-Target Apple-Min */
  color: var(--rct-primary-light, var(--rct-accent, currentColor));
  text-decoration: none;
  border-radius: var(--rct-radius, 0.125rem);
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}
.rct-pager-link:hover {
  background: rgba(127,127,127,0.08);
  transform: translateY(-1px);
}
.rct-pager-link--disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: not-allowed;
}

.rct-pager-arrow {
  font-size: 1.5rem;
  line-height: 1;
}
.rct-pager-label {
  font-size: 0.9rem;
  font-weight: 500;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rct-pager-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  color: var(--rct-text-muted, var(--rct-shell-muted, currentColor));
  letter-spacing: 0.05em;
}
.rct-pager-position { font-weight: 600; color: var(--rct-text, currentColor); }
.rct-pager-separator { opacity: 0.5; margin: 0 0.15rem; }

.rct-pager-cover {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.85rem;
  color: var(--rct-text-muted, currentColor);
  text-decoration: none;
  border-radius: var(--rct-radius, 0.125rem);
  transition: color 0.2s ease, background 0.2s ease;
}
.rct-pager-cover:hover {
  color: var(--rct-primary-light, var(--rct-accent, currentColor));
  background: rgba(127,127,127,0.06);
}
.rct-pager-cover-icon { font-size: 1.1rem; }

@media (max-width: 640px) {
  .rct-news-pager { padding: 0.75rem; gap: 0.5rem; }
  .rct-pager-label { display: none; }      /* auf Mobile Pfeile pur, Titel weg */
  .rct-pager-cover-label { display: none; } /* Cover als Icon-only */
}

/* ============================================================
   RCT Map (OpenStreetMap / Leaflet)
   ============================================================ */

.rct-map-wrap {
  width: 100%;
  border-radius: var(--rct-radius, 8px);
  overflow: hidden;
}

.rct-map-canvas {
  width: 100%;
  height: 100%;
}

.rct-map-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--rct-text-muted, #888);
  font-size: 0.85rem;
}


/* ------------------------------------------------------------
   LANGUAGE-SWITCHER
   ------------------------------------------------------------ */

.rct-lang-switcher {
  position: relative;
  display: inline-block;
  font-family: var(--rct-font-mono);
  z-index: 510;
}

.lang-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 6px 10px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--rct-font-mono);
}
.lang-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.lang-flag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rct-accent, #8bc34a);
}

.lang-trigger .chevron {
  transition: transform 0.2s ease;
  opacity: 0.6;
}
.rct-lang-switcher.is-open .chevron {
  transform: rotate(180deg);
}

.lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background: var(--rct-sidebar-bg, #1a1f2e);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  overflow: hidden;
  z-index: 520;
}
.rct-lang-switcher.is-open .lang-dropdown {
  display: block;
}

.lang-list {
  list-style: none;
  padding: 4px 0;
  margin: 0;
}

.lang-opt-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 0.8rem;
  font-family: var(--rct-font-mono);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.lang-opt-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.lang-opt-btn.is-active {
  color: var(--rct-accent, #8bc34a);
}

.lang-code {
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  min-width: 22px;
}
.lang-label {
  flex: 1;
}
.lang-check {
  opacity: 0.8;
  color: var(--rct-accent, #8bc34a);
}


/* ============================================================
   KLARO — RCT Theme Override
   Dark Shell Aesthetic / Space Grotesk / Accent Buttons
   ============================================================ */

.klaro * {
  font-family: var(--rct-font-body) !important;
  box-sizing: border-box;
}

/* --- Cookie Notice (untere Leiste) --- */
.klaro .cookie-notice {
  background: var(--rct-shell-bg) !important;
  border-top: 1px solid var(--rct-shell-border) !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.4) !important;
  padding: 1rem 1.5rem !important;
}
.klaro .cn-body { color: var(--rct-shell-text) !important; }
.klaro .cn-body p,
.klaro .cn-body .cn-changes {
  color: var(--rct-shell-muted) !important;
  font-size: 0.875rem !important;
}
.klaro .cn-body .cn-learn-more {
  color: var(--rct-accent) !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
}
.klaro .cn-body .cn-learn-more:hover { text-decoration: underline !important; }

/* --- Modal --- */
.klaro .cookie-modal {
  background: rgba(0,0,0,0.7) !important;
  backdrop-filter: blur(4px) !important;
}
.klaro .cm-modal {
  background: var(--rct-shell-bg) !important;
  border: 1px solid var(--rct-shell-border) !important;
  border-radius: var(--rct-radius-xl) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6) !important;
  color: var(--rct-shell-text) !important;
  max-width: 540px !important;
}
.klaro .cm-header {
  background: transparent !important;
  border-bottom: 1px solid var(--rct-shell-border) !important;
  padding: 1.25rem 1.5rem !important;
}
.klaro .cm-header h1,
.klaro .cm-header .title {
  color: var(--rct-shell-text) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
.klaro .cm-body { padding: 1rem 1.5rem !important; }
.klaro .cm-body p,
.klaro .cm-list-description,
.klaro .cm-purpose > p {
  color: var(--rct-shell-muted) !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
}

/* --- Service-Zeilen --- */
.klaro .cm-service,
.klaro .cm-purpose {
  border-bottom: 1px solid var(--rct-shell-border) !important;
  padding: 0.75rem 0 !important;
}
.klaro .cm-service:last-child,
.klaro .cm-purpose:last-child { border-bottom: none !important; }

/* --- Label: Titel links, Toggle rechts --- */
.klaro .cm-list-input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}
.klaro .cm-list-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 1rem !important;
  cursor: pointer !important;
  padding: 0.5rem 0 0 !important;
}
.klaro .cm-list-title {
  flex: 1 1 auto !important;
  color: var(--rct-shell-text) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}
.klaro .cm-switch {
  position: relative !important;
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 26px !important;
  display: inline-block !important;
}
.klaro .cm-switch .slider {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 26px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

/* --- Toggle-Farben --- */
.klaro .cm-list-input:checked + .cm-list-label .slider {
  background: var(--rct-accent) !important;
}
.klaro .cm-list-input + .cm-list-label .slider {
  background: var(--rct-shell-hover) !important;
  border: 1px solid var(--rct-shell-border) !important;
}
.klaro .cm-list-input:focus + .cm-list-label .slider {
  box-shadow: 0 0 0 2px var(--rct-accent) !important;
}

/* --- Caret --- */
.klaro .cm-caret a {
  color: var(--rct-shell-muted) !important;
  font-size: 0.78rem !important;
  text-decoration: none !important;
}
.klaro .cm-caret a:hover { color: var(--rct-accent) !important; }

/* --- Footer & Buttons --- */
.klaro .cm-footer {
  background: transparent !important;
  border-top: 1px solid var(--rct-shell-border) !important;
  padding: 1rem 1.5rem !important;
}
.klaro .cm-footer-buttons {
  display: flex !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}
.klaro .cm-btn {
  border: none !important;
  border-radius: var(--rct-radius-xl) !important;
  cursor: pointer !important;
  font-family: var(--rct-font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  padding: 0.55rem 1.1rem !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  letter-spacing: 0.02em !important;
}
.klaro .cm-btn-success,
.klaro .cm-btn-accept,
.klaro .cm-footer .cm-btn:only-child {
  background: var(--rct-accent) !important;
  color: #000 !important;
}
.klaro .cm-btn-success:hover,
.klaro .cm-btn-accept:hover,
.klaro .cm-footer .cm-btn:only-child:hover {
  background: var(--rct-primary-light) !important;
}
.klaro .cm-btn-success-var {
  background: var(--rct-primary) !important;
  color: #fff !important;
}
.klaro .cm-btn-success-var:hover {
  background: var(--rct-accent) !important;
  color: #000 !important;
}
.klaro .cm-btn-info,
.klaro .cm-btn-close {
  background: transparent !important;
  color: var(--rct-shell-muted) !important;
  border: 1px solid var(--rct-shell-border) !important;
}
.klaro .cm-btn-info:hover,
.klaro .cm-btn-close:hover {
  color: var(--rct-shell-text) !important;
  border-color: var(--rct-shell-muted) !important;
}
/* cn-ok ist der Container (flex-row aus klaro.min.css) → auf block umstellen */
.klaro .cookie-notice .cn-ok {
  display: block !important;
  margin-top: 0.75rem !important;
}
/* Link linksbündig, kein flex-grow */
.klaro .cookie-notice .cn-learn-more {
  display: block !important;
  flex-grow: 0 !important;
  margin: 0 0 0.5rem !important;
  vertical-align: unset !important;
}
/* Buttons-Container: float-clearfix, kein inline-block */
.klaro .cookie-notice .cn-buttons {
  display: block !important;
  overflow: hidden !important;
  margin-top: 0 !important;
}
.klaro .cookie-notice .cn-buttons .cn-decline    { float: left  !important; }
.klaro .cookie-notice .cn-buttons .cm-btn-success { float: right !important; }

/* Links im Modal */
.klaro .cm-modal a,
.klaro .cm-body a {
  color: var(--rct-accent) !important;
  text-decoration: underline !important;
}
.klaro .cm-modal a:hover,
.klaro .cm-body a:hover {
  color: var(--rct-primary-light) !important;
}

/* Powered by Klaro ausblenden */
.klaro .cm-powered-by { display: none !important; }

/* -------------------------------------------------------
   Klaro — Consent-Placeholders + Reopen-Button
------------------------------------------------------- */

.rct-klaro-reopen {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: var(--rct-primary, #2950C7);
  color: #fff;
  border: none;
  border-radius: 6px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.rct-klaro-reopen:hover {
  background: var(--rct-accent, #27C3F3);
  color: #000;
}

.rct-map-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rct-surface, #1e2533);
  border: 1px solid var(--rct-border, rgba(255,255,255,0.1));
  border-radius: 6px;
  height: 100%;
}
.rct-map-placeholder p {
  color: var(--rct-text-muted, #8892a0);
  font-size: 0.9rem;
  text-align: center;
  padding: 1rem;
}
.rct-map-placeholder button,
.rct-youtube-placeholder button {
  background: none;
  border: none;
  color: var(--rct-accent);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font: inherit;
}

.rct-youtube-wrap { margin: 0; }

.rct-youtube-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 6px;
  background: var(--rct-surface, #1e2533);
}
.rct-youtube-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.rct-youtube-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--rct-text-muted, #8892a0);
  text-align: center;
  padding: 1.5rem;
}
.rct-youtube-placeholder svg {
  width: 48px;
  height: 48px;
  opacity: 0.4;
}
.rct-youtube-placeholder p {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}
.rct-youtube-placeholder small {
  font-size: 0.8rem;
  line-height: 1.4;
}


/* ------------------------------------------------------------
   16. CHART BARS (.rct-chart-bars)
   Scroll-triggered animated bar/column chart.
   Orientation: vertical (default) | horizontal
   Color:       accent | primary | mixed | warn
   ------------------------------------------------------------ */

.rct-chart-bars {
  --chart-color: var(--rct-accent);
  --chart-track: rgba(128, 128, 128, 0.12);
  --chart-radius: 3px;
  --chart-bar-min-width: 48px;
  container-type: inline-size;
}

/* Color variants */
.rct-chart-bars.color-primary  { --chart-color: var(--rct-primary-light); }
.rct-chart-bars.color-warn     { --chart-color: #f59e0b; }

/* ── VERTICAL (Säulen) ── */
.rct-chart-bars.orientation-vertical {
  display: flex;
  align-items: flex-end;
  gap: clamp(0.5rem, 2cqi, 1.5rem);
  padding-bottom: 0.5rem;
}

.rct-chart-bars.orientation-vertical .rct-chart-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: var(--chart-bar-min-width);
}

.rct-chart-bars.orientation-vertical .rct-chart-bar-track {
  width: 100%;
  height: 220px;
  background: var(--chart-track);
  border-radius: var(--chart-radius);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.rct-chart-bars.orientation-vertical .rct-chart-bar-fill {
  width: 100%;
  height: 0;
  background: linear-gradient(to top, var(--chart-color), color-mix(in srgb, var(--chart-color) 70%, white));
  border-radius: var(--chart-radius);
  transition: height 0.85s cubic-bezier(0.34, 1.4, 0.64, 1) var(--bar-delay, 0s);
  box-shadow: 0 -4px 20px color-mix(in srgb, var(--chart-color) 55%, transparent);
}

.rct-chart-bars.orientation-vertical .rct-chart-bar-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin-top: 0.6rem;
  text-align: center;
  width: 100%;
}

/* ── HORIZONTAL (Balken) ── */
.rct-chart-bars.orientation-horizontal {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.rct-chart-bars.orientation-horizontal .rct-chart-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
}

.rct-chart-bars.orientation-horizontal .rct-chart-bar-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.rct-chart-bars.orientation-horizontal .rct-chart-bar-track {
  height: 10px;
  background: var(--chart-track);
  border-radius: 99px;
  overflow: hidden;
}

.rct-chart-bars.orientation-horizontal .rct-chart-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(to right, var(--chart-color), color-mix(in srgb, var(--chart-color) 70%, white));
  border-radius: 99px;
  transition: width 0.85s cubic-bezier(0.34, 1.2, 0.64, 1) var(--bar-delay, 0s);
  box-shadow: 4px 0 16px color-mix(in srgb, var(--chart-color) 55%, transparent);
}

/* ── TRIGGER: animation startet wenn .is-animated gesetzt wird ── */
.rct-chart-bars.is-animated.orientation-vertical   .rct-chart-bar-fill { height: var(--bar-target); }
.rct-chart-bars.is-animated.orientation-horizontal .rct-chart-bar-fill { width:  var(--bar-target); }

/* ── Labels & Values ── */
.rct-chart-bar-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--rct-chart-text-color, var(--rct-text-muted, #8892a0));
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.rct-chart-bar-value {
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rct-chart-text-color, var(--chart-color));
  opacity: 0.9;
}

/* append % sign via CSS */
.rct-chart-bar-value::after {
  content: '%';
  font-weight: 400;
  font-size: 0.7em;
  margin-left: 1px;
}

/* ── Mixed: 6 Theme-Farben, automatisch durch alle CSS-Vars ── */
.rct-chart-bars.color-mixed .rct-chart-bar:nth-child(6n+1) { --chart-color: var(--rct-accent); }
.rct-chart-bars.color-mixed .rct-chart-bar:nth-child(6n+2) { --chart-color: var(--rct-primary-light); }
.rct-chart-bars.color-mixed .rct-chart-bar:nth-child(6n+3) { --chart-color: var(--rct-primary-dim, #a5d737); }
.rct-chart-bars.color-mixed .rct-chart-bar:nth-child(6n+4) { --chart-color: var(--rct-secondary-light, #d4aeff); }
.rct-chart-bars.color-mixed .rct-chart-bar:nth-child(6n+5) { --chart-color: var(--rct-primary-fixed, #c0f452); }
.rct-chart-bars.color-mixed .rct-chart-bar:nth-child(6n+6) { --chart-color: #f59e0b; }

/* ── Pie: eine Torte, Segmente teilen sich 100% ── */
.rct-chart-bars.orientation-pie {
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  padding: 0;
}

.rct-pie-wrap {
  width: 220px;
  height: 220px;
  flex-shrink: 0;
  margin: auto;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.6s, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.rct-chart-bars.is-animated .rct-pie-wrap {
  opacity: 1;
  transform: scale(1);
}

.rct-pie-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rct-pie-segment {
  stroke: var(--chart-color);
}

.rct-pie-frame {
  stroke: rgba(0, 0, 0, 0.45);
  stroke-width: 0.6;
}

.rct-pie-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.rct-pie-legend-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--rct-font-mono);
  font-size: 0.875rem;
  color: var(--rct-chart-text-color, inherit);
}

.rct-pie-legend-swatch {
  width: 14px;
  height: 14px;
  background: var(--chart-color);
  border-radius: 2px;
  flex-shrink: 0;
}

.rct-pie-legend-label { flex: 1; }
.rct-pie-legend-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rct-chart-bars.color-mixed .rct-pie-segment:nth-child(6n+1) { stroke: var(--rct-accent); }
.rct-chart-bars.color-mixed .rct-pie-segment:nth-child(6n+2) { stroke: var(--rct-primary-light); }
.rct-chart-bars.color-mixed .rct-pie-segment:nth-child(6n+3) { stroke: var(--rct-primary-dim, #a5d737); }
.rct-chart-bars.color-mixed .rct-pie-segment:nth-child(6n+4) { stroke: var(--rct-secondary-light, #d4aeff); }
.rct-chart-bars.color-mixed .rct-pie-segment:nth-child(6n+5) { stroke: var(--rct-primary-fixed, #c0f452); }
.rct-chart-bars.color-mixed .rct-pie-segment:nth-child(6n+6) { stroke: #f59e0b; }

.rct-chart-bars.color-mixed .rct-pie-legend-item:nth-child(6n+1) .rct-pie-legend-swatch { background: var(--rct-accent); }
.rct-chart-bars.color-mixed .rct-pie-legend-item:nth-child(6n+2) .rct-pie-legend-swatch { background: var(--rct-primary-light); }
.rct-chart-bars.color-mixed .rct-pie-legend-item:nth-child(6n+3) .rct-pie-legend-swatch { background: var(--rct-primary-dim, #a5d737); }
.rct-chart-bars.color-mixed .rct-pie-legend-item:nth-child(6n+4) .rct-pie-legend-swatch { background: var(--rct-secondary-light, #d4aeff); }
.rct-chart-bars.color-mixed .rct-pie-legend-item:nth-child(6n+5) .rct-pie-legend-swatch { background: var(--rct-primary-fixed, #c0f452); }
.rct-chart-bars.color-mixed .rct-pie-legend-item:nth-child(6n+6) .rct-pie-legend-swatch { background: #f59e0b; }

/* ── Donut: pro Datenzeile ein Ring (Grid) ── */
.rct-chart-bars.orientation-donut {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  padding: 0;
}

.rct-donut-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  color: var(--rct-chart-text-color, inherit);
}

.rct-donut-ring {
  position: relative;
  width: 140px;
  height: 140px;
  max-width: 100%;
}

.rct-donut-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rct-donut-frame {
  stroke: rgba(0, 0, 0, 0.45);
  stroke-width: 0.6;
}

.rct-donut-marker {
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 1.4;
  stroke-linecap: square;
}

.rct-donut-fill {
  stroke: var(--chart-color);
  transition: stroke-dasharray 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--bar-delay, 0s);
}

.rct-donut-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rct-font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--chart-color);
}

.rct-donut-value::after {
  content: '%';
  font-size: 0.65em;
  margin-left: 0.1em;
  opacity: 0.7;
}

.rct-donut-label {
  font-family: var(--rct-font-mono);
  font-size: 0.8125rem;
  text-align: center;
  letter-spacing: 0.04em;
}

.rct-chart-bars.color-mixed .rct-donut-item:nth-child(6n+1) { --chart-color: var(--rct-accent); }
.rct-chart-bars.color-mixed .rct-donut-item:nth-child(6n+2) { --chart-color: var(--rct-primary-light); }
.rct-chart-bars.color-mixed .rct-donut-item:nth-child(6n+3) { --chart-color: var(--rct-primary-dim, #a5d737); }
.rct-chart-bars.color-mixed .rct-donut-item:nth-child(6n+4) { --chart-color: var(--rct-secondary-light, #d4aeff); }
.rct-chart-bars.color-mixed .rct-donut-item:nth-child(6n+5) { --chart-color: var(--rct-primary-fixed, #c0f452); }
.rct-chart-bars.color-mixed .rct-donut-item:nth-child(6n+6) { --chart-color: #f59e0b; }

@media (max-width: 640px) {
  .rct-chart-bars.orientation-pie {
    flex-direction: column;
    gap: 1rem;
  }
  .rct-pie-wrap { width: 180px; height: 180px; }
}

/* ── Responsive: bei engen Containern Balken minimal ── */
@container (max-width: 400px) {
  .rct-chart-bars.orientation-vertical .rct-chart-bar-track { height: 140px; }
  .rct-chart-bar-label { font-size: 0.65rem; }
}


/* ------------------------------------------------------------
   17. BUTTONS (.rct-btn)
   Reusable button styles — used by CTA and standalone.
   Styles: primary | outline | ghost
   ------------------------------------------------------------ */

.rct-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1.4em;
  border-radius: var(--rct-radius-xl, 0.5rem);
  font-family: var(--rct-font-body, sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease,
              color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}

.rct-btn:hover  { transform: translateY(-1px); }
.rct-btn:active { transform: translateY(0); }

/* Primary — filled with --cta-color / --rct-accent fallback
   Hohe Spezifität nötig: globale Theme-Regel "[data-theme] #main a"
   überschreibt sonst die Textfarbe im Button. */
.rct-btn--primary,
[data-theme] #main a.rct-btn--primary,
[data-theme] #bottom a.rct-btn--primary {
  background: var(--cta-color, var(--rct-accent));
  color: var(--cta-btn-fg, var(--rct-shell-bg, #171717));
  border-color: var(--cta-color, var(--rct-accent));
  box-shadow: 0 2px 12px color-mix(in srgb, var(--cta-color, var(--rct-accent)) 35%, transparent);
}
.rct-btn--primary:hover,
[data-theme] #main a.rct-btn--primary:hover,
[data-theme] #bottom a.rct-btn--primary:hover {
  background: color-mix(in srgb, var(--cta-color, var(--rct-accent)) 85%, white);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--cta-color, var(--rct-accent)) 50%, transparent);
}

/* Outline — border only */
.rct-btn--outline,
[data-theme] #main a.rct-btn--outline,
[data-theme] #bottom a.rct-btn--outline {
  background: transparent;
  color: var(--cta-color, var(--rct-accent));
  border-color: var(--cta-color, var(--rct-accent));
}
.rct-btn--outline:hover,
[data-theme] #main a.rct-btn--outline:hover,
[data-theme] #bottom a.rct-btn--outline:hover {
  background: color-mix(in srgb, var(--cta-color, var(--rct-accent)) 12%, transparent);
}

/* Ghost — no border, just colored text */
.rct-btn--ghost,
[data-theme] #main a.rct-btn--ghost,
[data-theme] #bottom a.rct-btn--ghost {
  background: transparent;
  color: var(--cta-color, var(--rct-accent));
  border-color: transparent;
  padding: 0.6em 1em;
}
.rct-btn--ghost:hover,
[data-theme] #main a.rct-btn--ghost:hover,
[data-theme] #bottom a.rct-btn--ghost:hover {
  background: color-mix(in srgb, var(--cta-color, var(--rct-accent)) 8%, transparent);
  border-radius: var(--rct-radius-xl);
}
/* Arrow for ghost */
.rct-btn--ghost::after { content: '→'; transition: transform 0.2s ease; }
.rct-btn--ghost:hover::after { transform: translateX(3px); }


/* ------------------------------------------------------------
   18. CTA (.rct-cta)
   Call-to-Action element.
   Layouts: centered | banner | card
   ------------------------------------------------------------ */

.rct-cta {
  --cta-color: var(--rct-accent);
  position: relative;
  overflow: hidden;
  /* Eigenen Stacking-Context aufspannen, damit der fixed #gradient-canvas
     nicht durch den has-bg-*-Alpha durchschlägt, sobald #main unter 1024px
     z-index: unset bekommt. */
  z-index: 20;
}

/* ── Centered ── */
.rct-cta.layout-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 2rem;
  gap: 1rem;
}

/* ── Card ── */
.rct-cta.layout-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 2rem;
  gap: 1rem;
  border-radius: var(--rct-radius-xl, 0.5rem);
  border: 1px solid color-mix(in srgb, var(--cta-color) 25%, transparent);
  background: var(--rct-surface, rgba(255,255,255,0.03));
}

/* ── Banner ── */
.rct-cta.layout-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  border-radius: var(--rct-radius-xl, 0.5rem);
  border: 1px solid color-mix(in srgb, var(--cta-color) 20%, transparent);
  background: var(--rct-surface, rgba(255,255,255,0.03));
  flex-wrap: wrap;
}

.rct-cta.layout-banner .rct-cta-body {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}

.rct-cta.layout-banner .rct-cta-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.rct-cta.layout-banner .rct-cta-headline {
  margin: 0;
  font-size: 1rem;
}

.rct-cta.layout-banner .rct-cta-text {
  margin: 0;
  font-size: 0.85rem;
}

.rct-cta.layout-banner .rct-cta-actions {
  flex-shrink: 0;
}

/* ── Shared content styles ── */
.rct-cta-icon {
  font-size: 3rem;
  line-height: 1;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--cta-color) 50%, transparent));
}

.rct-cta.layout-banner .rct-cta-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
}

.rct-cta-headline {
  font-family: var(--rct-font-headline, sans-serif);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
  color: var(--rct-text, #1b1c1c);
  margin: 0;
  line-height: 1.25;
}

.rct-cta-text {
  font-size: 0.95rem;
  color: var(--rct-text-faint, #747a64);
  line-height: 1.6;
  max-width: 56ch;
  margin: 0;
}

.rct-cta-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.rct-cta.layout-banner .rct-cta-actions { justify-content: flex-end; }

/* ── Glow (card + centered) ── */
.rct-cta-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 70% 50% at 50% 120%,
    color-mix(in srgb, var(--cta-color) 12%, transparent),
    transparent 70%
  );
  z-index: 0;
}

.rct-cta > *:not(.rct-cta-glow) { position: relative; z-index: 1; }

/* No glow on banner (too distracting inline) */
.rct-cta.layout-banner .rct-cta-glow { display: none; }

/* ── Light style variant (Default) ── */
.rct-cta.style-light {
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--cta-color) 18%, transparent);
  border-radius: var(--rct-radius-xl, 0.75rem);
}

/* ── Dark style variant ── */
.rct-cta.style-dark {
  background: color-mix(in srgb, var(--cta-color) 5%, var(--rct-shell-bg, #171717));
  border: 1px solid color-mix(in srgb, var(--cta-color) 25%, transparent);
  border-radius: var(--rct-radius-xl, 0.75rem);
}

/* ── BG-Override (überschreibt style-Default wenn rct_cta_bg_color gesetzt) ── */
.rct-cta.has-bg-white  { background: rgba(255, 255, 255, var(--rct-cta-bg-alpha, 1)); color: #1a1a1a; }
.rct-cta.has-bg-dark   { background: rgba(23, 23, 23,    var(--rct-cta-bg-alpha, 1)); color: var(--rct-shell-text, #e0e0e0); }
.rct-cta.has-bg-accent { background: color-mix(in srgb, var(--rct-accent) calc(var(--rct-cta-bg-alpha, 1) * 100%), transparent); color: #0a0a0a; }
.rct-cta.has-bg-dark .rct-cta-headline   { color: var(--rct-shell-text, #e0e0e0); }
.rct-cta.has-bg-dark .rct-cta-text       { color: color-mix(in srgb, var(--rct-shell-text, #e0e0e0) 60%, transparent); }
.rct-cta.has-bg-accent .rct-cta-headline { color: #0a0a0a; }
.rct-cta.has-bg-accent .rct-cta-text     { color: rgba(0, 0, 0, 0.7); }

.rct-cta.style-dark.layout-card {
  background: color-mix(in srgb, var(--cta-color) 7%, var(--rct-shell-bg, #171717));
}

.rct-cta.style-dark .rct-cta-headline {
  color: var(--rct-shell-text, #e0e0e0);
}

.rct-cta.style-dark .rct-cta-text {
  color: color-mix(in srgb, var(--rct-shell-text, #e0e0e0) 60%, transparent);
}

.rct-cta.style-dark .rct-cta-icon {
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--cta-color) 90%, transparent));
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .rct-cta.layout-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .rct-cta.layout-banner .rct-cta-actions { justify-content: flex-start; }
}


/* ------------------------------------------------------------
   19. TIMELINE (.rct-timeline)
   Vertical animated timeline, alternate or single-column.
   Each item slides in from its side on scroll.
   ------------------------------------------------------------ */

.rct-timeline {
  --tl-line-color: rgba(128,128,128,0.18);
  --tl-dot-size:   14px;
  --tl-gap:        2.5rem;
  position: relative;
  padding: 1rem 0 2rem;
}

/* ── Vertical center line ── */
.rct-timeline.show-line::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--tl-line-color) 8%,
    var(--tl-line-color) 92%,
    transparent
  );
}

.rct-timeline.variant-single.show-line::before {
  left: calc(var(--tl-dot-size) / 2 + 1px);
  transform: none;
}

/* ── Items ── */
.rct-timeline-item {
  --tl-color: var(--rct-accent);
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--tl-dot-size) 1fr;
  gap: 0 1.5rem;
  margin-bottom: var(--tl-gap);
  align-items: start;
}

/* Single-column: alle Items links */
.rct-timeline.variant-single .rct-timeline-item {
  grid-template-columns: var(--tl-dot-size) 1fr;
  gap: 0 1.25rem;
}

/* ── Dot ── */
.rct-timeline-dot {
  grid-column: 2;
  grid-row: 1;
  width: var(--tl-dot-size);
  height: var(--tl-dot-size);
  border-radius: 50%;
  background: var(--tl-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-color) 25%, transparent),
              0 0 12px color-mix(in srgb, var(--tl-color) 50%, transparent);
  margin-top: 0.6rem;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
}

.rct-timeline.variant-single .rct-timeline-dot {
  grid-column: 1;
}

.rct-timeline-dot-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.8);
  font-size: 0.7rem;
  line-height: 1;
  pointer-events: none;
}

/* ── Card placement: left side ── */
.rct-timeline-item.side-left .rct-timeline-card {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
}

/* ── Card placement: right side ── */
.rct-timeline-item.side-right .rct-timeline-card {
  grid-column: 3;
  grid-row: 1;
  text-align: left;
}

/* Single-column: immer rechts vom Dot */
.rct-timeline.variant-single .rct-timeline-card {
  grid-column: 2 !important;
  text-align: left !important;
}

/* ── Card styles ── */
.rct-timeline-card {
  min-width: 0; /* CSS-Grid-Fix: verhindert dass Content die 1fr-Spalte aufbläst */
  background: var(--rct-surface, rgba(255,255,255,0.04));
  border: 1px solid color-mix(in srgb, var(--tl-color) 22%, transparent);
  padding: 1.1rem 1.25rem;
  position: relative;

  /* Entrance animation */
  opacity: 0;
  transition:
    opacity  0.55s ease,
    transform 0.55s cubic-bezier(0.34, 1.3, 0.64, 1),
    border-color 0.3s ease;
}

.rct-timeline-item.side-left  .rct-timeline-card { transform: translateX(24px); }
.rct-timeline-item.side-right .rct-timeline-card { transform: translateX(-24px); }
.rct-timeline.variant-single  .rct-timeline-card { transform: translateX(-16px); }

/* Arrow pointing toward the dot */
.rct-timeline-item.side-left .rct-timeline-card::after {
  content: '';
  position: absolute;
  top: 0.7rem;
  right: -7px;
  width: 12px;
  height: 12px;
  background: var(--rct-surface, rgba(255,255,255,0.04));
  border-top: 1px solid color-mix(in srgb, var(--tl-color) 22%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--tl-color) 22%, transparent);
  transform: rotate(45deg);
}

.rct-timeline-item.side-right .rct-timeline-card::after,
.rct-timeline.variant-single  .rct-timeline-card::after {
  content: '';
  position: absolute;
  top: 0.7rem;
  left: -7px;
  width: 12px;
  height: 12px;
  background: var(--rct-surface, rgba(255,255,255,0.04));
  border-bottom: 1px solid color-mix(in srgb, var(--tl-color) 22%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--tl-color) 22%, transparent);
  transform: rotate(45deg);
}

/* ── Animated state ── */
.rct-timeline-item.is-animated .rct-timeline-card {
  opacity: 1;
  transform: translateX(0) !important;
}

.rct-timeline-item.is-animated .rct-timeline-dot {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tl-color) 30%, transparent),
              0 0 20px color-mix(in srgb, var(--tl-color) 60%, transparent);
}

/* ── Card content ── */
.rct-timeline-date {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tl-color);
  margin-bottom: 0.35rem;
  opacity: 0.9;
}

.rct-timeline-rubrik {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rct-accent, #27c4f4);
  margin-bottom: 0.4rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: 0.85;
}

.rct-timeline-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--rct-text, #1b1c1c);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.rct-timeline-body {
  font-size: 0.875rem;
  color: var(--rct-text-faint, #747a64);
  line-height: 1.6;
}

/* ── Hover glow on card ── */
.rct-timeline-card:hover {
  border-color: color-mix(in srgb, var(--tl-color) 45%, transparent);
}

/* ── side-auto: nth-child alternation for news timeline ── */
/* Odd items: card left, dot center */
.rct-timeline .rct-timeline-item.side-auto:nth-child(odd) {
  grid-template-columns: 1fr var(--tl-dot-size) 1fr;
}
.rct-timeline .rct-timeline-item.side-auto:nth-child(odd) .rct-timeline-dot {
  grid-column: 2;
}
.rct-timeline .rct-timeline-item.side-auto:nth-child(odd) .rct-timeline-card {
  grid-column: 1;
  text-align: right;
  transform: translateX(24px);
}
.rct-timeline .rct-timeline-item.side-auto:nth-child(odd) .rct-timeline-card::after {
  content: '';
  position: absolute;
  top: 0.7rem;
  right: -7px;
  left: auto;
  width: 12px;
  height: 12px;
  background: var(--rct-surface, rgba(255,255,255,0.04));
  border-top:   1px solid color-mix(in srgb, var(--tl-color) 22%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--tl-color) 22%, transparent);
  border-bottom: none;
  border-left:   none;
  transform: rotate(45deg);
}

/* Even items: card right, dot center */
.rct-timeline .rct-timeline-item.side-auto:nth-child(even) {
  grid-template-columns: 1fr var(--tl-dot-size) 1fr;
}
.rct-timeline .rct-timeline-item.side-auto:nth-child(even) .rct-timeline-dot {
  grid-column: 2;
}
.rct-timeline .rct-timeline-item.side-auto:nth-child(even) .rct-timeline-card {
  grid-column: 3;
  text-align: left;
  transform: translateX(-24px);
}
.rct-timeline .rct-timeline-item.side-auto:nth-child(even) .rct-timeline-card::after {
  content: '';
  position: absolute;
  top: 0.7rem;
  left: -7px;
  right: auto;
  width: 12px;
  height: 12px;
  background: var(--rct-surface, rgba(255,255,255,0.04));
  border-bottom: 1px solid color-mix(in srgb, var(--tl-color) 22%, transparent);
  border-left:   1px solid color-mix(in srgb, var(--tl-color) 22%, transparent);
  border-top:    none;
  border-right:  none;
  transform: rotate(45deg);
}

/* Animated state for side-auto */
.rct-timeline .rct-timeline-item.side-auto.is-animated .rct-timeline-card {
  opacity: 1;
  transform: translateX(0) !important;
}

/* News timeline: einheitlich primary, seriös */
.rct-news-timeline .rct-timeline-item { --tl-color: var(--rct-primary-light); }

/* News-specific tweaks */
.rct-timeline-title a {
  color: inherit;
  text-decoration: none;
}
.rct-timeline-title a:hover {
  color: var(--tl-color);
}
.rct-tl-author {
  opacity: 0.6;
  font-size: 0.9em;
}
.rct-timeline-more {
  margin-top: 0.65rem;
  margin-bottom: 1.25rem;
}
.rct-timeline-more a {
  display: inline-block;
  color: var(--tl-color);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  opacity: 0.85;
  border: 1px solid color-mix(in srgb, var(--tl-color) 38%, transparent);
  padding: 0.35rem 0.85rem;
  border-radius: 3px;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.rct-timeline-more a:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--tl-color) 10%, transparent);
  border-color: color-mix(in srgb, var(--tl-color) 65%, transparent);
}

/* ── Mobile: always single-column ── */
@media (max-width: 767px) {
  .rct-timeline.show-line::before {
    left: calc(var(--tl-dot-size) / 2 + 1px);
    transform: none;
  }

  .rct-timeline-item {
    grid-template-columns: var(--tl-dot-size) 1fr !important;
    gap: 0 1.25rem !important;
  }

  .rct-timeline-dot {
    grid-column: 1 !important;
  }

  .rct-timeline-card {
    grid-column: 2 !important;
    text-align: left !important;
    transform: translateX(-16px) !important;
  }

  .rct-timeline-item.side-left .rct-timeline-card::after { display: none; }
  .rct-timeline-item.side-right .rct-timeline-card::after,
  .rct-timeline.variant-single  .rct-timeline-card::after {
    top: 0.7rem;
    left: -7px;
    right: auto;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--tl-color) 22%, transparent);
    border-left:  1px solid color-mix(in srgb, var(--tl-color) 22%, transparent);
    transform: rotate(45deg);
  }
  /* re-add left-side arrow for mobile */
  .rct-timeline-item.side-left .rct-timeline-card::after {
    display: block;
    right: auto;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--tl-color) 22%, transparent);
    border-left:  1px solid color-mix(in srgb, var(--tl-color) 22%, transparent);
    transform: rotate(45deg);
  }
}


/* ------------------------------------------------------------
   20. STAT BOX (.rct-stat-box)
   Animated KPI card — big number, label, optional icon.
   Designed to sit inside rct_grid_start containers.
   ------------------------------------------------------------ */

.rct-stat-box {
  --stat-color: var(--rct-accent);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem 1.75rem;
  border-radius: var(--rct-radius-xl, 0.5rem);
  background: var(--rct-surface, rgba(255,255,255,0.04));
  border: 1px solid color-mix(in srgb, var(--stat-color) 20%, transparent);
  overflow: hidden;
  gap: 0.35rem;
  container-type: inline-size;

  /* Subtle entrance — triggered by .is-animated */
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity  0.5s ease var(--stat-delay, 0s),
    transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) var(--stat-delay, 0s);
}

.rct-stat-box.is-animated {
  opacity: 1;
  transform: translateY(0);
}

/* ── Glow backdrop ── */
.rct-stat-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 80% 60% at 50% 110%,
    color-mix(in srgb, var(--stat-color) 18%, transparent),
    transparent 70%
  );
  z-index: 0;
}

/* all direct children above glow */
.rct-stat-box > *:not(.rct-stat-glow) {
  position: relative;
  z-index: 1;
}

/* ── Icon ── */
.rct-stat-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.25rem;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--stat-color) 50%, transparent));
}

/* ── Number ── */
.rct-stat-number {
  display: flex;
  align-items: baseline;
  gap: 0.1em;
  line-height: 1;
  font-family: var(--rct-font-headline, sans-serif);
  font-weight: 800;
  color: var(--stat-color);
  text-shadow: 0 0 24px color-mix(in srgb, var(--stat-color) 40%, transparent);
}

/* Size variants */
.rct-stat-box.size-sm .rct-stat-number { font-size: clamp(2rem,   6cqi, 2.5rem); }
.rct-stat-box.size-md .rct-stat-number { font-size: clamp(2.5rem, 8cqi, 3.5rem); }
.rct-stat-box.size-lg .rct-stat-number { font-size: clamp(3rem,  10cqi, 5rem);   }

.rct-stat-prefix {
  font-size: 0.55em;
  font-weight: 600;
  opacity: 0.7;
  margin-right: 0.05em;
  align-self: center;
}

.rct-stat-unit {
  font-size: 0.45em;
  font-weight: 600;
  opacity: 0.75;
  align-self: flex-end;
  padding-bottom: 0.15em;
}

/* ── Labels ── */
.rct-stat-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--rct-text, #1b1c1c);
  margin-top: 0.5rem;
}

.rct-stat-sublabel {
  font-size: 0.72rem;
  color: var(--rct-text-faint, #747a64);
  line-height: 1.4;
}

/* ── Hover: Glow intensivieren ── */
.rct-stat-box:hover {
  border-color: color-mix(in srgb, var(--stat-color) 45%, transparent);
  transition:
    border-color 0.3s ease,
    opacity  0.5s ease var(--stat-delay, 0s),
    transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) var(--stat-delay, 0s);
}

.rct-stat-box:hover .rct-stat-glow {
  background: radial-gradient(
    ellipse 80% 60% at 50% 110%,
    color-mix(in srgb, var(--stat-color) 30%, transparent),
    transparent 70%
  );
  transition: background 0.3s ease;
}

/* ------------------------------------------------------------
   21. ICON BOX (.rct-icon-box)
   Feature card — icon, headline, text, optional link.
   ------------------------------------------------------------ */

.rct-icon-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 2rem 1.75rem 2.25rem;
  border: 1px solid color-mix(in srgb, var(--icon-color, var(--rct-accent)) 20%, transparent);
  border-radius: var(--rct-radius-lg, 1rem);
  background: color-mix(in srgb, var(--icon-color, var(--rct-accent)) 4%, var(--rct-shell-bg, #171717));
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.rct-icon-box:hover {
  border-color: color-mix(in srgb, var(--icon-color, var(--rct-accent)) 45%, transparent);
  transform: translateY(-2px);
}

/* Alignment */
.rct-icon-box.align-centered {
  align-items: center;
  text-align: center;
}

.rct-icon-box.align-left {
  align-items: flex-start;
  text-align: left;
}

/* Universelles Icon (Emoji oder Tabler-SVG) */
.rct-icon {
  display: inline-block;
  vertical-align: middle;
}
.rct-icon-tabler {
  width: 1em;
  height: 1em;
  stroke-width: 1.75;
}

/* ============================================================
   RCT Fun-Box (Hover-Reveal mit Farbgradient)
   ============================================================ */
.rct-fun-box {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  min-height: 380px;
  border-radius: var(--rct-radius-lg, 12px);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #1a1a1a;
  color: var(--fb-text, #fff);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s;
  isolation: isolate;
}

.rct-fun-box.has-link {
  cursor: pointer;
}

.rct-fun-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Dezenter Dunkel-Gradient unten für Lesbarkeit im Default-State */
.rct-fun-box-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.25) 35%,
    transparent 65%);
  z-index: 1;
  transition: opacity 0.45s ease;
}

/* Farb-Tint: von unten vollfarbig bis 50% transparent — nur beim Hover */
.rct-fun-box-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--fb-color) 95%, transparent) 0%,
    color-mix(in srgb, var(--fb-color) 80%, transparent) 30%,
    transparent 50%);
  opacity: 0;
  z-index: 2;
  transition: opacity 0.45s ease;
}
.rct-fun-box:hover .rct-fun-box-tint {
  opacity: 1;
}
.rct-fun-box:hover .rct-fun-box-shade {
  opacity: 0;
}

/* Content */
.rct-fun-box-content {
  position: absolute;
  inset: 0;
  padding: 40px 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;  /* Default + Hover: Inhalt unten verankert */
  gap: 0.5rem;
  z-index: 3;
  transition: padding-bottom 0.45s ease;
}
/* Hover: mehr padding-bottom, damit Text über dem More-Link bleibt */
.rct-fun-box:hover .rct-fun-box-content {
  padding-bottom: 100px;  /* 40px Button-Offset + ~20px Button + 40px Abstand */
}

.rct-fun-box-icon {
  font-size: 4rem;
  line-height: 1;
  opacity: 0.95;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
  margin-bottom: 0.5rem;
}

.rct-fun-box-headline {
  margin: 0;
  font-family: var(--rct-font-headline);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

/* Body-Text — kommt beim Hover von unten rein */
.rct-fun-box-text {
  margin: 0.5rem 0 0;
  font-size: 1.2rem;
  line-height: 1.45;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(24px);
  transition: opacity 0.4s ease 0.1s, max-height 0.5s ease, transform 0.45s ease 0.1s;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
.rct-fun-box:hover .rct-fun-box-text {
  opacity: 1;
  max-height: 400px;
  transform: translateY(0);
}

/* Mehr-Link — absolut am Boden positioniert, kommt beim Hover von unten rein */
.rct-fun-box-more {
  position: absolute;
  left: 1.75rem;
  bottom: 40px;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--rct-font-headline);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(24px);
  z-index: 3;
  transition: opacity 0.4s ease 0.2s, transform 0.45s ease 0.2s, gap 0.2s;
}
.rct-fun-box:hover .rct-fun-box-more {
  opacity: 1;
  transform: translateY(0);
  gap: 0.7em;
}

/* Overlay-Link (macht die ganze Karte klickbar) */
.rct-fun-box-overlay-link {
  position: absolute;
  inset: 0;
  z-index: 4;
  text-indent: -9999px;
  overflow: hidden;
}

@media (max-width: 640px) {
  .rct-fun-box { aspect-ratio: 4 / 3; min-height: 320px; }
  .rct-fun-box-headline { font-size: 1.7rem; }
  .rct-fun-box-text { font-size: 1rem; }
  .rct-fun-box-icon { font-size: 3rem; }
}

/* ============================================================
   RCT Image-Textbox / Icon-Textbox
   ============================================================ */
.rct-itb {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.rct-itb:hover {
  transform: translateY(-2px);
}

/* Layout-Direction: Bild/Icon links/rechts vom Text (Desktop).
   40/60-Verhaeltnis. Bei Image-Variante aspect-ratio aufgehoben damit
   das Bild die Gesamthoehe der Karte ausfuellt; bei Icon-Variante
   bleibt das Icon vertikal+horizontal zentriert in seiner 40%-Spalte.
   Auf Mobile (<=768px) faellt alles zurueck zu column (Bild/Icon oben). */
.rct-itb--layout-left {
  flex-direction: row;
}
.rct-itb--layout-right {
  flex-direction: row-reverse;
}
.rct-itb--layout-left  > .rct-itb-media,
.rct-itb--layout-right > .rct-itb-media,
.rct-itb--layout-left  > .rct-itb-iconwrap,
.rct-itb--layout-right > .rct-itb-iconwrap {
  flex: 0 0 40%;
  align-self: stretch;
}
.rct-itb--layout-left  > .rct-itb-media,
.rct-itb--layout-right > .rct-itb-media {
  aspect-ratio: auto;
}
.rct-itb--layout-left  > .rct-itb-body,
.rct-itb--layout-right > .rct-itb-body {
  flex: 1 1 60%;
  min-width: 0;
}

@media (max-width: 768px) {
  .rct-itb--layout-left,
  .rct-itb--layout-right {
    flex-direction: column;
  }
  .rct-itb--layout-left  > .rct-itb-media,
  .rct-itb--layout-right > .rct-itb-media {
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
  }
  .rct-itb--layout-left  > .rct-itb-iconwrap,
  .rct-itb--layout-right > .rct-itb-iconwrap {
    flex: 0 0 auto;
  }
}

/* Clippath-Ecken nur bei dark */
.rct-itb.style-dark {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

/* Corner-Nodge nur bei dark */
.rct-itb.style-dark::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: var(--rct-accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: 0.8;
  z-index: 3;
  transform: rotate(45deg);
  pointer-events: none;
  transition: background 0.3s, opacity 0.3s;
}

/* Media (Bild) */
.rct-itb-media {
  margin: 0;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: rgba(0,0,0,0.05);
}
.rct-itb-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.rct-itb:hover .rct-itb-media img {
  transform: scale(1.04);
}

/* Icon-Wrap (für Icon-Variante) */
.rct-itb-iconwrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.25rem 1rem 1.25rem;
  font-size: 3.25rem;
  line-height: 1;
}

/* Body */
.rct-itb-body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.rct-itb-headline {
  margin: 0;
  font-family: var(--rct-font-headline);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
}

.rct-itb-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  flex: 1;
}

.rct-itb-link {
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--rct-font-headline);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  align-self: flex-start;
  transition: gap 0.2s, color 0.2s;
}
.rct-itb-link:hover {
  gap: 0.7em;
}

/* ── LIGHT ── */
.rct-itb.style-light {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--rct-radius-lg, 12px);
  color: #1a1a2e;
}
.rct-itb.style-light .rct-itb-iconwrap {
  color: var(--rct-accent);
}
.rct-itb.style-light .rct-itb-headline {
  color: #1a1a2e;
}
.rct-itb.style-light .rct-itb-text {
  color: #4a4a5e;
}
.rct-itb.style-light .rct-itb-link {
  color: var(--rct-accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ── DARK ── */
.rct-itb.style-dark {
  background-color: rgba(10, 14, 20, 0.88);
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0px, transparent 3px,
    rgba(39, 196, 244, 0.015) 3px, rgba(39, 196, 244, 0.015) 4px
  );
  border: 1px solid rgba(39, 196, 244, 0.2);
  color: rgba(255, 255, 255, 0.85);
}
.rct-itb.style-dark .rct-itb-iconwrap {
  color: var(--rct-accent);
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--rct-accent) 55%, transparent));
}
.rct-itb.style-dark .rct-itb-headline {
  font-family: var(--rct-font-mono);
  color: var(--rct-shell-text, #fff);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1.1rem;
}
.rct-itb.style-dark .rct-itb-text {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--rct-font-mono);
  font-size: 0.875rem;
}
.rct-itb.style-dark .rct-itb-link {
  color: var(--rct-accent);
  font-family: var(--rct-font-mono);
}
.rct-itb.style-dark .rct-itb-media {
  background: rgba(39, 196, 244, 0.04);
}

/* Icon-Referenz-Grid */
.rct-icon-reference-hint {
  font-family: var(--rct-font-mono);
  font-size: 0.82rem;
  opacity: 0.75;
  margin-bottom: 1rem;
}
.rct-icon-reference-hint code {
  background: rgba(39, 196, 244, 0.1);
  padding: 0.1em 0.4em;
  border-radius: 3px;
}
.rct-icon-reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.5rem;
}
.rct-icon-reference-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.rct-icon-reference-cell:hover {
  background: rgba(39, 196, 244, 0.08);
  border-color: var(--rct-accent);
}
.rct-icon-reference-cell.is-copied {
  background: rgba(138, 186, 22, 0.15);
  border-color: var(--rct-primary-dim, #a5d737);
}
.rct-icon-reference-svg {
  font-size: 1.75rem;
  color: var(--rct-accent);
  line-height: 1;
}
.rct-icon-reference-slug {
  font-family: var(--rct-font-mono);
  font-size: 0.7rem;
  opacity: 0.8;
  word-break: break-all;
  text-align: center;
}

/* Icon */
.rct-icon-box-icon {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--icon-color, var(--rct-accent));
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--icon-color, var(--rct-accent)) 60%, transparent));
  transition: filter 0.3s ease, transform 0.3s ease;
}

.rct-icon-box:hover .rct-icon-box-icon {
  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--icon-color, var(--rct-accent)) 90%, transparent));
  transform: scale(1.1);
}

/* Headline */
.rct-icon-box-headline {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--rct-shell-text, #e0e0e0);
  margin: 0;
  line-height: 1.3;
}

/* Text */
.rct-icon-box-text {
  font-size: 0.9rem;
  color: var(--rct-text-faint, #747a64);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

/* Link — nutzt .rct-btn--ghost, nur Farbe übersteuern */
.rct-icon-box .rct-btn--ghost {
  color: var(--icon-color, var(--rct-accent));
  margin-top: 0.25rem;
}

.rct-icon-box .rct-btn--ghost::before {
  background: var(--icon-color, var(--rct-accent));
}

/* Glow am Boden */
.rct-icon-box-glow {
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background: radial-gradient(
    ellipse 80% 50% at 50% 110%,
    color-mix(in srgb, var(--icon-color, var(--rct-accent)) 12%, transparent),
    transparent 70%
  );
  pointer-events: none;
  transition: background 0.3s ease;
}

.rct-icon-box:hover .rct-icon-box-glow {
  background: radial-gradient(
    ellipse 80% 50% at 50% 110%,
    color-mix(in srgb, var(--icon-color, var(--rct-accent)) 25%, transparent),
    transparent 70%
  );
}

/* Clipped corners */
.rct-icon-box.style-dark {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

/* Corner notch accent */
.rct-icon-box.style-dark::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: var(--icon-color, var(--rct-accent));
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: 0.75;
  z-index: 2;
  transition: background 0.4s;
  pointer-events: none;
  transform: rotate(45deg);
}


/* ------------------------------------------------------------
   22. ALERT (.rct-alert)
   Terminal-style status readouts — sci-fi HUD aesthetic.
   ------------------------------------------------------------ */

@keyframes rct-alert-in {
  from { opacity: 0; transform: translateX(-16px); clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; transform: translateX(0);     clip-path: inset(0 0% 0 0); }
}

@keyframes rct-signal-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 4px 1px var(--alert-color); }
  50%       { opacity: 0.4; box-shadow: 0 0 2px 0px var(--alert-color); }
}

@keyframes rct-signal-load {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

.rct-alert {
  --alert-color: var(--rct-accent, #27c4f4);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem 1rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--alert-color) 25%, transparent);
  border-left: none;
  border-radius: 0 var(--rct-radius, 0.5rem) var(--rct-radius, 0.5rem) 0;
  background: color-mix(in srgb, var(--alert-color) 5%, var(--rct-shell-bg, #171717));
  overflow: hidden;
  animation: rct-alert-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Left signal bar */
.rct-alert::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--alert-color) 20%,
    var(--alert-color) 80%,
    transparent
  );
  transform-origin: top;
  animation: rct-signal-load 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

/* Scanline overlay */
.rct-alert::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 3px,
    color-mix(in srgb, var(--alert-color) 2%, transparent) 3px,
    color-mix(in srgb, var(--alert-color) 2%, transparent) 4px
  );
  pointer-events: none;
}

/* Pulsing signal dot */
.rct-alert-signal {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 0.35rem;
  background: var(--alert-color);
  animation: rct-signal-pulse 2s ease-in-out infinite;
}

/* Body */
.rct-alert-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Type label — monospace terminal style */
.rct-alert-label {
  font-family: var(--rct-font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--alert-color);
  text-transform: uppercase;
  line-height: 1;
}

/* Title */
.rct-alert-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--rct-shell-text, #e0e0e0);
  line-height: 1.3;
}

/* Text */
.rct-alert-text {
  font-size: 0.875rem;
  color: var(--rct-text-faint, #747a64);
  line-height: 1.6;
  margin: 0;
}

/* Dismiss button */
.rct-alert-dismiss {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--alert-color) 30%, transparent);
  border-radius: 4px;
  background: transparent;
  color: color-mix(in srgb, var(--alert-color) 70%, transparent);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: -0.1rem;
}

.rct-alert-dismiss:hover {
  background: color-mix(in srgb, var(--alert-color) 15%, transparent);
  color: var(--alert-color);
  border-color: var(--alert-color);
}

/* Dismissed state */
.rct-alert.is-dismissed {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  max-height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* Type-specific signal pulse speeds */
.rct-alert--warning .rct-alert-signal { animation-duration: 1.2s; }
.rct-alert--error   .rct-alert-signal { animation-duration: 0.7s; }
.rct-alert--success .rct-alert-signal { animation-name: none; opacity: 1; box-shadow: 0 0 6px 2px var(--alert-color); }


/* ------------------------------------------------------------
   23. TABS (.rct-tabs)
   Terminal IDE panel–selector aesthetic.
   Active tab: top accent line loads in, seamless bottom edge.
   ------------------------------------------------------------ */

@keyframes rct-tab-accent-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes rct-tab-content-in {
  0%   { opacity: 0;   transform: translateY(6px); }
  40%  { opacity: 0.5; }
  100% { opacity: 1;   transform: translateY(0); }
}

.rct-tabs {
  --tab-color: var(--rct-accent, #27c4f4);
}

/* ── Tab navigation bar ── */
.rct-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: flex-end;
}

/* ── Individual tab button ── */
.rct-tabs-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.55rem 1.1rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--tab-color) 18%, transparent);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--tab-color) 3%, var(--rct-shell-bg, #171717));
  color: var(--rct-text-faint, #747a64);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  margin-bottom: -1px;
  z-index: 1;
  white-space: nowrap;
  outline: none;
}

.rct-tabs-btn:hover:not(.is-active) {
  color: var(--rct-shell-text, #e0e0e0);
  background: color-mix(in srgb, var(--tab-color) 6%, var(--rct-shell-bg, #171717));
  border-color: color-mix(in srgb, var(--tab-color) 30%, transparent);
}

/* Active state */
.rct-tabs-btn.is-active {
  color: var(--rct-shell-text, #e0e0e0);
  background: color-mix(in srgb, var(--tab-color) 8%, var(--rct-shell-bg, #171717));
  border-color: color-mix(in srgb, var(--tab-color) 35%, transparent);
  border-bottom-color: color-mix(in srgb, var(--tab-color) 8%, var(--rct-shell-bg, #171717));
  z-index: 3;
}

/* Top accent line — loads in on activation */
.rct-tabs-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--tab-color);
  transform-origin: left;
  transform: scaleX(0);
  border-radius: 4px 4px 0 0;
  transition: none;
}

.rct-tabs-btn.is-active::before {
  transform: scaleX(1);
  animation: rct-tab-accent-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Sequential number badge */
.rct-tab-num {
  font-family: var(--rct-font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--tab-color);
  opacity: 0.5;
  letter-spacing: 0.05em;
  transition: opacity 0.2s ease;
}

.rct-tabs-btn.is-active .rct-tab-num,
.rct-tabs-btn:hover .rct-tab-num {
  opacity: 1;
}

/* ── Content body ── */
.rct-tabs-body {
  position: relative;
  z-index: 2;
  border: 1px solid color-mix(in srgb, var(--tab-color) 25%, transparent);
  border-radius: 0 4px 4px 4px;
  background: color-mix(in srgb, var(--tab-color) 4%, var(--rct-shell-bg, #171717));
  padding: 1.75rem;
  overflow: hidden;
  color: var(--rct-shell-text, #e0e0e0);
}

/* Scanline texture */
.rct-tabs-body::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 3px,
    color-mix(in srgb, var(--tab-color) 1.5%, transparent) 3px,
    color-mix(in srgb, var(--tab-color) 1.5%, transparent) 4px
  );
  pointer-events: none;
}

/* ── Panels ── */
.rct-tabs-panel {
  display: none;
  color: var(--rct-shell-text, #e0e0e0);
  line-height: 1.7;
  font-size: 0.925rem;
}

.rct-tabs-panel.is-active {
  display: block;
  animation: rct-tab-content-in 0.3s ease both;
}

/* ── Mobile: scroll horizontally ── */
@media (max-width: 600px) {
  .rct-tabs-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .rct-tabs-nav::-webkit-scrollbar { display: none; }
  .rct-tabs-body { border-radius: 0 0 4px 4px; }
}


/* ------------------------------------------------------------
   24. LIGHT-STYLE VARIANTS
   .style-light — alle dunklen RCT-CEs auf hellem Hintergrund
   ------------------------------------------------------------ */

/* Icon Box – light */
.rct-icon-box.style-light {
  background: color-mix(in srgb, var(--icon-color) 6%, #ffffff);
  border-color: color-mix(in srgb, var(--icon-color) 20%, transparent);
}
.rct-icon-box.style-light:hover {
  border-color: color-mix(in srgb, var(--icon-color) 40%, transparent);
}
.rct-icon-box.style-light .rct-icon-box-headline {
  color: var(--rct-text, #1b1c1c);
}
.rct-icon-box.style-light .rct-icon-box-text {
  color: var(--rct-text-faint, #747a64);
}
.rct-icon-box.style-light .rct-icon-box-glow {
  background: radial-gradient(
    ellipse 80% 50% at 50% 110%,
    color-mix(in srgb, var(--icon-color) 10%, transparent),
    transparent 70%
  );
}

/* Alert – light */
.rct-alert.style-light {
  background: color-mix(in srgb, var(--alert-color) 6%, #ffffff);
}
.rct-alert.style-light .rct-alert-title {
  color: var(--rct-text, #1b1c1c);
}
.rct-alert.style-light .rct-alert-text {
  color: var(--rct-text-faint, #747a64);
}
.rct-alert.style-light .rct-alert-dismiss {
  color: color-mix(in srgb, var(--alert-color) 60%, #1b1c1c);
}

/* Tabs – light */
.rct-tabs.style-light .rct-tabs-btn {
  background: color-mix(in srgb, var(--tab-color) 4%, #f5f5f5);
  border-color: color-mix(in srgb, var(--tab-color) 20%, #e0e0e0);
  color: var(--rct-text-faint, #747a64);
}
.rct-tabs.style-light .rct-tabs-btn:hover:not(.is-active) {
  background: color-mix(in srgb, var(--tab-color) 8%, #f5f5f5);
  color: var(--rct-text, #1b1c1c);
}
.rct-tabs.style-light .rct-tabs-btn.is-active {
  background: #ffffff;
  border-color: color-mix(in srgb, var(--tab-color) 35%, #e0e0e0);
  border-bottom-color: #ffffff;
  color: var(--rct-text, #1b1c1c);
}
.rct-tabs.style-light .rct-tabs-body {
  background: #ffffff;
  border-color: color-mix(in srgb, var(--tab-color) 25%, #e0e0e0);
  color: var(--rct-text, #1b1c1c);
}
.rct-tabs.style-light .rct-tabs-panel {
  color: var(--rct-text, #1b1c1c);
}
.rct-tabs.style-light .rct-tabs-body::after { display: none; }


/* ============================================================
   25. NEWS TIMELINE VARIANTS
   .rct-news-timeline.style-dark  — Classified Archive
   .rct-news-timeline.style-light — Editorial / Print Journal
   ============================================================ */

/* ── DARK: Classified Research Archive ── */

.rct-news-timeline.style-dark .rct-timeline-item {
  --tl-color: var(--rct-accent, #27c4f4);
}

/* Dot: glowing ring */
.rct-news-timeline.style-dark .rct-timeline-dot {
  background: var(--rct-shell-bg, #171717);
  border: 2px solid var(--rct-accent, #27c4f4);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--rct-accent, #27c4f4) 20%, transparent),
    0 0 12px color-mix(in srgb, var(--rct-accent, #27c4f4) 50%, transparent);
  width: 14px;
  height: 14px;
}

/* Card: notched corner, top accent line */
.rct-news-timeline.style-dark .rct-timeline-card {
  background: color-mix(in srgb, var(--rct-accent, #27c4f4) 4%, #0d1117);
  border: 1px solid color-mix(in srgb, var(--rct-accent, #27c4f4) 20%, transparent);
  border-top: 2px solid var(--rct-accent, #27c4f4);
  border-radius: 0 0 6px 6px;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  position: relative;
  overflow: visible;
}

/* Corner fold indicator */
.rct-news-timeline.style-dark .rct-timeline-card::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 20px;
  height: 20px;
  background: color-mix(in srgb, var(--rct-accent, #27c4f4) 15%, #0d1117);
  clip-path: polygon(0 0, 100% 100%, 100% 0);
  border-bottom: 1px solid color-mix(in srgb, var(--rct-accent, #27c4f4) 30%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--rct-accent, #27c4f4) 30%, transparent);
}

/* Scan-line texture */
.rct-news-timeline.style-dark .rct-timeline-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent, transparent 3px,
    color-mix(in srgb, var(--rct-accent, #27c4f4) 2%, transparent) 3px,
    color-mix(in srgb, var(--rct-accent, #27c4f4) 2%, transparent) 4px
  );
  pointer-events: none;
  border-radius: inherit;
}

/* Date: log-timestamp style */
.rct-news-timeline.style-dark .rct-timeline-date {
  font-family: 'Courier New', var(--rct-font-headline, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--rct-accent, #27c4f4);
  opacity: 0.7;
}
.rct-news-timeline.style-dark .rct-timeline-date time::before { content: '[ '; }
.rct-news-timeline.style-dark .rct-timeline-date time::after  { content: ' ]'; }

/* Title */
.rct-news-timeline.style-dark .rct-timeline-title {
  color: var(--rct-shell-text, #ffffff);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.rct-news-timeline.style-dark .rct-timeline-title a:hover {
  color: var(--rct-accent, #27c4f4);
  text-shadow: 0 0 8px color-mix(in srgb, var(--rct-accent, #27c4f4) 60%, transparent);
}

/* Body text */
.rct-news-timeline.style-dark .rct-timeline-body,
.rct-news-timeline.style-dark .rct-timeline-body p {
  color: color-mix(in srgb, var(--rct-shell-text, #fff) 65%, transparent);
  font-size: 0.875rem;
  line-height: 1.65;
}

/* "Weiterlesen" → "ACCESS FILE →" */
.rct-news-timeline.style-dark .rct-timeline-more a {
  font-family: 'Courier New', var(--rct-font-headline, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rct-accent, #27c4f4);
  border: 1px solid color-mix(in srgb, var(--rct-accent, #27c4f4) 35%, transparent);
  padding: 0.3em 0.8em;
  border-radius: 2px;
  display: inline-block;
  transition: all 0.2s ease;
}
.rct-news-timeline.style-dark .rct-timeline-more a:hover {
  background: color-mix(in srgb, var(--rct-accent, #27c4f4) 15%, transparent);
  border-color: var(--rct-accent, #27c4f4);
  box-shadow: 0 0 8px color-mix(in srgb, var(--rct-accent, #27c4f4) 40%, transparent);
  opacity: 1;
}

/* Bottom glow */
.rct-news-timeline.style-dark .rct-timeline-card:hover {
  border-color: color-mix(in srgb, var(--rct-accent, #27c4f4) 45%, transparent);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--rct-accent, #27c4f4) 10%, transparent);
}


/* ── LIGHT: Editorial / Print Journal ── */

.rct-news-timeline.style-light .rct-timeline-item {
  --tl-color: var(--rct-accent, #27c4f4);
}

/* Connector line */
.rct-news-timeline.style-light.show-line::before {
  background: color-mix(in srgb, var(--rct-accent, #27c4f4) 30%, #e0e0e0);
}

/* Dot: clean circle */
.rct-news-timeline.style-light .rct-timeline-dot {
  background: #ffffff;
  border: 2px solid var(--rct-accent, #27c4f4);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rct-accent, #27c4f4) 15%, transparent);
  width: 12px;
  height: 12px;
}

/* Card: warm off-white, left accent, lined paper */
.rct-news-timeline.style-light .rct-timeline-card {
  background-color: #fafaf7;
  background-image: repeating-linear-gradient(
    transparent, transparent 23px,
    rgba(0, 0, 0, 0.04) 23px, rgba(0, 0, 0, 0.04) 24px
  );
  border: 1px solid #e8e4df;
  border-left: 3px solid var(--rct-accent, #27c4f4);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
  transition: box-shadow 0.25s ease, border-left-color 0.25s ease;
}
.rct-news-timeline.style-light .rct-timeline-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  border-left-color: color-mix(in srgb, var(--rct-accent, #27c4f4) 80%, #000);
}

/* Date: editorial small-caps */
.rct-news-timeline.style-light .rct-timeline-date {
  font-size: 0.72rem;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: #888;
}

/* Title: editorial headline */
.rct-news-timeline.style-light .rct-timeline-title {
  color: #1a1a1a;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.35;
}
.rct-news-timeline.style-light .rct-timeline-title a:hover {
  color: var(--rct-accent, #27c4f4);
}

/* Body text */
.rct-news-timeline.style-light .rct-timeline-body,
.rct-news-timeline.style-light .rct-timeline-body p {
  color: #444;
  font-size: 0.9rem;
  line-height: 1.7;
}

/* "Weiterlesen" — clean link arrow */
.rct-news-timeline.style-light .rct-timeline-more a {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--rct-accent, #27c4f4);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 1px solid color-mix(in srgb, var(--rct-accent, #27c4f4) 40%, transparent);
  padding-bottom: 1px;
  opacity: 1;
  transition: border-color 0.2s ease;
}
.rct-news-timeline.style-light .rct-timeline-more a::after {
  content: ' →';
}
.rct-news-timeline.style-light .rct-timeline-more a:hover {
  border-color: var(--rct-accent, #27c4f4);
}

/* =============================================================
   26. TIMELINE STYLE VARIANTS
   .rct-timeline.style-dark  — Classified Archive (Terminal/HUD)
   .rct-timeline.style-light — Print Journal (Editorial/Clean)
   ============================================================= */

/* ── DARK: Classified Archive ── */
.rct-timeline.style-dark .rct-timeline-card {
  background: rgba(10, 10, 10, 0.85);
  border: 1px solid rgba(var(--tl-color, 39, 196, 244), 0.25);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  box-shadow:
    0 0 20px rgba(var(--tl-color, 39, 196, 244), 0.07),
    inset 0 0 40px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

/* Right-side cards: clip-path horizontal gespiegelt (oben-links + unten-rechts) */
.rct-timeline.style-dark .rct-timeline-item.side-right .rct-timeline-card,
.rct-timeline.style-dark.variant-single .rct-timeline-card,
.rct-timeline.style-dark .rct-timeline-item.side-auto:nth-child(even) .rct-timeline-card {
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

/* Scanlines overlay */
.rct-timeline.style-dark .rct-timeline-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.08) 3px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  z-index: 0;
}

/* Corner notch accent — left cards: oben rechts */
.rct-timeline.style-dark .rct-timeline-item.side-left .rct-timeline-card::after,
.rct-timeline.style-dark .rct-timeline-item.side-auto:nth-child(odd) .rct-timeline-card::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: var(--tl-color, var(--rct-accent));
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: 0.75;
  z-index: 2;
  transition: background 0.4s;
  pointer-events: none;
  transform: rotate(45deg);
}

/* Corner notch accent — right cards: oben links */
.rct-timeline.style-dark .rct-timeline-item.side-right .rct-timeline-card::after,
.rct-timeline.style-dark.variant-single .rct-timeline-card::after,
.rct-timeline.style-dark .rct-timeline-item.side-auto:nth-child(even) .rct-timeline-card::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--tl-color, var(--rct-accent));
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: 0.75;
  z-index: 2;
  transition: background 0.4s;
  pointer-events: none;
  transform: rotate(225deg);
}

.rct-timeline.style-dark .rct-timeline-card > * { position: relative; z-index: 1; }

.rct-timeline.style-dark .rct-timeline-dot {
  background: var(--rct-shell-bg, #171717);
  border: 2px solid var(--tl-color, var(--rct-accent, #27c4f4));
  box-shadow: 0 0 12px var(--tl-color, var(--rct-accent, #27c4f4)),
              0 0 24px rgba(39, 196, 244, 0.2);
}

.rct-timeline.style-dark .rct-timeline-date {
  font-family: 'Courier New', var(--rct-font-headline, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tl-color, var(--rct-accent, #27c4f4));
  opacity: 0.9;
  margin-bottom: 0.5rem;
}

.rct-timeline.style-dark .rct-timeline-date::before { content: '[ '; }
.rct-timeline.style-dark .rct-timeline-date::after  { content: ' ]'; }

.rct-timeline.style-dark .rct-timeline-title {
  font-family: 'Courier New', var(--rct-font-headline, monospace);
  color: var(--rct-shell-text, #fff);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.rct-timeline.style-dark .rct-timeline-body,
.rct-timeline.style-dark .rct-timeline-body p {
  font-family: 'Courier New', var(--rct-font-headline, monospace);
  font-size: 0.82rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
}

.rct-timeline.style-dark .rct-timeline-card:hover {
  border-color: rgba(var(--tl-color, 39, 196, 244), 0.6);
  box-shadow:
    0 0 30px rgba(var(--tl-color, 39, 196, 244), 0.15),
    inset 0 0 40px rgba(0, 0, 0, 0.4);
  transform: translateY(-3px);
  transition: all 0.3s ease;
}

/* ── LIGHT: Print Journal ── */
.rct-timeline.style-light .rct-timeline-card {
  background: #fff;
  border: none;
  border-left: 4px solid var(--tl-color, var(--rct-accent, #27c4f4));
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.05);
  clip-path: none;
}

.rct-timeline.style-light .rct-timeline-card::before {
  display: none;
}

.rct-timeline.style-light .rct-timeline-card::after {
  display: none;
}

.rct-timeline.style-light .rct-timeline-dot {
  background: #fff;
  border: 3px solid var(--tl-color, var(--rct-accent, #27c4f4));
  box-shadow: 0 0 0 4px rgba(39, 196, 244, 0.12);
}

.rct-timeline.style-light.show-line::before {
  background: rgba(0, 0, 0, 0.12);
}

.rct-timeline.style-light .rct-timeline-date {
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--tl-color, var(--rct-accent, #27c4f4));
  opacity: 1;
  margin-bottom: 0.4rem;
  text-transform: none;
}

.rct-timeline.style-light .rct-timeline-date::before,
.rct-timeline.style-light .rct-timeline-date::after { content: ''; }

.rct-timeline.style-light .rct-timeline-title {
  color: #1b1c1c;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 0.5rem;
}

.rct-timeline.style-light .rct-timeline-body,
.rct-timeline.style-light .rct-timeline-body p {
  font-size: 0.9rem;
  line-height: 1.75;
  color: #3a3a3a;
}

.rct-timeline.style-light .rct-timeline-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-left-width: 6px;
  transition: all 0.25s ease;
}

/* =============================================================
   27. PEOPLE BOX — DARK VARIANT
   ============================================================= */

.rct-people-box.style-dark {
  background: rgba(10, 10, 10, 0.88);
  border: 1px solid rgba(39, 196, 244, 0.2);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow: 0 0 30px rgba(39, 196, 244, 0.06), inset 0 0 40px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}

/* Scanlines */
.rct-people-box.style-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.07) 3px,
    rgba(0,0,0,0.07) 4px
  );
  pointer-events: none;
  z-index: 0;
}

/* Corner notch accent */
.rct-people-box.style-dark::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: var(--rct-accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: 0.75;
  z-index: 2;
  transition: background 0.4s;
  pointer-events: none;
  transform: rotate(45deg);
}

.rct-people-box.style-dark > * { position: relative; z-index: 1; }

.rct-people-box.style-dark .rct-people-avatar {
  border: 2px solid var(--rct-accent, #27c4f4);
  box-shadow: 0 0 16px rgba(39, 196, 244, 0.35);
}

.rct-people-box.style-dark .rct-people-avatar--placeholder {
  background: rgba(39, 196, 244, 0.1);
}

.rct-people-box.style-dark .rct-people-avatar--placeholder span {
  color: var(--rct-accent, #27c4f4);
}

.rct-people-box.style-dark .rct-people-name {
  font-family: var(--rct-font-mono);
  color: var(--rct-shell-text, #fff);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rct-people-box.style-dark .rct-people-role {
  font-family: var(--rct-font-mono);
  font-size: 0.7rem;
  color: var(--rct-accent, #27c4f4);
  letter-spacing: 0.14em;
}

.rct-people-box.style-dark .rct-people-role::before { content: '[ '; }
.rct-people-box.style-dark .rct-people-role::after  { content: ' ]'; }

.rct-people-box.style-dark .rct-people-bio {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
  font-family: var(--rct-font-mono);
  line-height: 1.65;
}

.rct-people-box.style-dark .rct-people-contacts {
  border-top: 1px solid rgba(39, 196, 244, 0.2);
}

.rct-people-box.style-dark .rct-people-contact {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--rct-font-mono);
  font-size: 0.75rem;
}

.rct-people-box.style-dark .rct-people-contact:hover {
  background: rgba(39, 196, 244, 0.08);
  color: var(--rct-accent, #27c4f4);
}

.rct-people-box.style-dark .rct-people-contact svg {
  stroke: var(--rct-accent, #27c4f4);
}

.rct-people-box.style-dark:hover {
  border-color: rgba(39, 196, 244, 0.45);
  box-shadow: 0 0 40px rgba(39, 196, 244, 0.12), inset 0 0 40px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

/* =============================================================
   28. DOWNLOAD / DOWNLOADS  (Contao native CE)
   style-dark  — Terminal / Classified
   style-light — Editorial (überschreibt Contao-Standard)
   ============================================================= */

/* Extension-Farben als Custom Properties */
.style-dark .download-element.ext-pdf,
.style-light .download-element.ext-pdf   { --ext-color: #ef4444; --ext-label: 'PDF'; }
.style-dark .download-element.ext-doc,
.style-dark .download-element.ext-docx,
.style-light .download-element.ext-doc,
.style-light .download-element.ext-docx  { --ext-color: #3b82f6; --ext-label: 'DOC'; }
.style-dark .download-element.ext-xls,
.style-dark .download-element.ext-xlsx,
.style-light .download-element.ext-xls,
.style-light .download-element.ext-xlsx  { --ext-color: #22c55e; --ext-label: 'XLS'; }
.style-dark .download-element.ext-ppt,
.style-dark .download-element.ext-pptx,
.style-light .download-element.ext-ppt,
.style-light .download-element.ext-pptx  { --ext-color: #f97316; --ext-label: 'PPT'; }
.style-dark .download-element.ext-zip,
.style-dark .download-element.ext-rar,
.style-dark .download-element.ext-gz,
.style-dark .download-element.ext-7z,
.style-light .download-element.ext-zip,
.style-light .download-element.ext-rar,
.style-light .download-element.ext-gz,
.style-light .download-element.ext-7z    { --ext-color: #eab308; --ext-label: 'ZIP'; }
.style-dark .download-element.ext-mp3,
.style-dark .download-element.ext-wav,
.style-light .download-element.ext-mp3,
.style-light .download-element.ext-wav   { --ext-color: #a855f7; --ext-label: 'AUD'; }
.style-dark .download-element.ext-mp4,
.style-dark .download-element.ext-mov,
.style-light .download-element.ext-mp4,
.style-light .download-element.ext-mov   { --ext-color: #ec4899; --ext-label: 'VID'; }
.style-dark .download-element.ext-jpg,
.style-dark .download-element.ext-jpeg,
.style-dark .download-element.ext-png,
.style-dark .download-element.ext-webp,
.style-light .download-element.ext-jpg,
.style-light .download-element.ext-jpeg,
.style-light .download-element.ext-png,
.style-light .download-element.ext-webp  { --ext-color: #06b6d4; --ext-label: 'IMG'; }

/* ── DARK ── */

/* UL-Reset bei plural */
.content-downloads.style-dark ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Container pro Item: singular <a> ODER plural LI */
.content-download.style-dark .rct-download-link,
.content-downloads.style-dark li {
  background-color: rgba(10, 14, 20, 0.88);
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0px, transparent 3px,
    rgba(39, 196, 244, 0.015) 3px, rgba(39, 196, 244, 0.015) 4px
  );
  border: 1px solid rgba(39, 196, 244, 0.2);
  border-left: 3px solid var(--ext-color, var(--rct-accent, #27c4f4));
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  position: relative;
  overflow: hidden;
  margin: 0;
  list-style: none;
  color: rgba(255, 255, 255, 0.75);
}

/* Padding nur beim singular <a> (plural LI hat padding 0, das .download-element innen gibt padding) */
.content-download.style-dark .rct-download-link {
  padding: 1rem 1.25rem;
}
.content-downloads.style-dark li {
  padding: 0;
}

/* Outer-Div bei singular: kein Box-Look, nur Passthrough */
.content-download.style-dark {
  background: none;
  border: none;
  clip-path: none;
  padding: 0;
  margin: 0;
}

/* Corner-Nodge oben rechts */
.content-download.style-dark .rct-download-link::after,
.content-downloads.style-dark li::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: var(--rct-accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: 0.75;
  z-index: 2;
  transform: rotate(45deg);
  pointer-events: none;
  transition: background 0.4s;
}

/* Download-Element innen bei plural — transparent */
.content-downloads.style-dark .download-element {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 0.875rem;
  background: transparent;
  border: none;
  border-left: 3px solid var(--ext-color, var(--rct-accent, #27c4f4));
  position: relative;
  transition: background 0.2s, color 0.2s;
}

/* rct-download-link bei plural: Surface-Background raus (LI ist Container) */
.content-downloads.style-dark .rct-download-link {
  background: transparent;
  border: none;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.75);
}

/* Extension-Badge */
.content-download.style-dark .download-element::before,
.content-downloads.style-dark .download-element::before {
  content: var(--ext-label, 'FILE');
  font-family: var(--rct-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ext-color, var(--rct-accent, #27c4f4));
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ext-color, var(--rct-accent, #27c4f4));
  padding: 0.15em 0.5em;
  flex-shrink: 0;
  opacity: 0.85;
}

/* Link */
.content-download.style-dark .download-element a,
.content-downloads.style-dark .download-element a {
  font-family: var(--rct-font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
}

/* Download-Pfeil rechts */
.content-download.style-dark .download-element a::after,
.content-downloads.style-dark .download-element a::after {
  content: ' ↓';
  color: var(--ext-color, var(--rct-accent, #27c4f4));
  opacity: 0;
  transition: opacity 0.2s;
}

/* Hover auf einzelne Reihe */
.content-download.style-dark .download-element:hover,
.content-downloads.style-dark .download-element:hover {
  background: rgba(39, 196, 244, 0.05);
}

.content-download.style-dark .download-element:hover a,
.content-downloads.style-dark .download-element:hover a {
  color: var(--ext-color, var(--rct-accent, #27c4f4));
  text-shadow: 0 0 6px rgba(39, 196, 244, 0.3);
}

.content-download.style-dark .download-element:hover a::after,
.content-downloads.style-dark .download-element:hover a::after {
  opacity: 1;
}

.content-downloads.style-dark li {
  margin: 0;
  padding: 0;
}

/* Theme-Varianten dark */
[data-theme="lime"] .content-download.style-dark .download-element,
[data-theme="lime"] .content-downloads.style-dark .download-element {
  border-color: rgba(138, 186, 22, 0.15);
}
[data-theme="lime"] .content-download.style-dark .download-element:hover,
[data-theme="lime"] .content-downloads.style-dark .download-element:hover {
  background: rgba(138, 186, 22, 0.05);
}

[data-theme="purple"] .content-download.style-dark .download-element,
[data-theme="purple"] .content-downloads.style-dark .download-element {
  border-color: rgba(168, 85, 247, 0.15);
}
[data-theme="purple"] .content-download.style-dark .download-element:hover,
[data-theme="purple"] .content-downloads.style-dark .download-element:hover {
  background: rgba(168, 85, 247, 0.05);
}

/* ── LIGHT ── */

.content-download.style-light,
.content-downloads.style-light {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.content-download.style-light .download-element,
.content-downloads.style-light .download-element {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1rem;
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-left: 3px solid var(--ext-color, var(--rct-accent, #27c4f4));
  transition: background 0.15s, border-color 0.15s;
}

.content-download.style-light .download-element::before,
.content-downloads.style-light .download-element::before {
  content: var(--ext-label, 'FILE');
  font-family: var(--rct-font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--ext-color, var(--rct-accent, #27c4f4));
  padding: 0.2em 0.5em;
  border-radius: 2px;
  flex-shrink: 0;
}

.content-download.style-light .download-element a,
.content-downloads.style-light .download-element a {
  font-size: 0.9rem;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  flex: 1;
  transition: color 0.15s;
}

.content-download.style-light .download-element a::after,
.content-downloads.style-light .download-element a::after {
  content: ' ↓';
  color: var(--ext-color, var(--rct-accent, #27c4f4));
  opacity: 0;
  transition: opacity 0.15s;
}

.content-download.style-light .download-element:hover,
.content-downloads.style-light .download-element:hover {
  background: #fff;
  border-color: var(--ext-color, var(--rct-accent, #27c4f4));
}

.content-download.style-light .download-element:hover a,
.content-downloads.style-light .download-element:hover a {
  color: var(--ext-color, var(--rct-accent, #27c4f4));
}

.content-download.style-light .download-element:hover a::after,
.content-downloads.style-light .download-element:hover a::after {
  opacity: 1;
}

.content-downloads.style-light ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.content-downloads.style-light li {
  margin: 0;
  padding: 0;
}

/* =============================================================
   29. SPACING UTILITIES
   mt-{n}, mb-{n}, pt-{n}, pb-{n}, mx-auto, gap-{n}
   Skala: 0 4 8 12 16 20 24 32 40 48 56 64 80 96 (px)
   ============================================================= */

.mt-0  { margin-top:    0      !important; }
.mt-4  { margin-top:    0.25rem !important; }
.mt-8  { margin-top:    0.5rem  !important; }
.mt-12 { margin-top:    0.75rem !important; }
.mt-16 { margin-top:    1rem    !important; }
.mt-20 { margin-top:    1.25rem !important; }
.mt-24 { margin-top:    1.5rem  !important; }
.mt-32 { margin-top:    2rem    !important; }
.mt-40 { margin-top:    2.5rem  !important; }
.mt-48 { margin-top:    3rem    !important; }
.mt-56 { margin-top:    3.5rem  !important; }
.mt-64 { margin-top:    4rem    !important; }
.mt-80 { margin-top:    5rem    !important; }
.mt-96 { margin-top:    6rem    !important; }

.mb-0  { margin-bottom: 0       !important; }
.mb-4  { margin-bottom: 0.25rem !important; }
.mb-8  { margin-bottom: 0.5rem  !important; }
.mb-12 { margin-bottom: 0.75rem !important; }
.mb-16 { margin-bottom: 1rem    !important; }
.mb-20 { margin-bottom: 1.25rem !important; }
.mb-24 { margin-bottom: 1.5rem  !important; }
.mb-32 { margin-bottom: 2rem    !important; }
.mb-40 { margin-bottom: 2.5rem  !important; }
.mb-48 { margin-bottom: 3rem    !important; }
.mb-56 { margin-bottom: 3.5rem  !important; }
.mb-64 { margin-bottom: 4rem    !important; }
.mb-80 { margin-bottom: 5rem    !important; }
.mb-96 { margin-bottom: 6rem    !important; }

.pt-0  { padding-top:    0       !important; }
.pt-8  { padding-top:    0.5rem  !important; }
.pt-16 { padding-top:    1rem    !important; }
.pt-24 { padding-top:    1.5rem  !important; }
.pt-32 { padding-top:    2rem    !important; }
.pt-40 { padding-top:    2.5rem  !important; }
.pt-48 { padding-top:    3rem    !important; }
.pt-64 { padding-top:    4rem    !important; }
.pt-80 { padding-top:    5rem    !important; }
.pt-96 { padding-top:    6rem    !important; }

.pb-0  { padding-bottom: 0       !important; }
.pb-8  { padding-bottom: 0.5rem  !important; }
.pb-16 { padding-bottom: 1rem    !important; }
.pb-24 { padding-bottom: 1.5rem  !important; }
.pb-32 { padding-bottom: 2rem    !important; }
.pb-40 { padding-bottom: 2.5rem  !important; }
.pb-48 { padding-bottom: 3rem    !important; }
.pb-64 { padding-bottom: 4rem    !important; }
.pb-80 { padding-bottom: 5rem    !important; }
.pb-96 { padding-bottom: 6rem    !important; }

.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.ml-auto { margin-left:  auto !important; }
.mr-auto { margin-right: auto !important; }

.gap-4  { gap: 0.25rem !important; }
.gap-8  { gap: 0.5rem  !important; }
.gap-16 { gap: 1rem    !important; }
.gap-24 { gap: 1.5rem  !important; }
.gap-32 { gap: 2rem    !important; }
.gap-40 { gap: 2.5rem  !important; }
.gap-48 { gap: 3rem    !important; }

.w-full  { width: 100%  !important; }
.h-full  { height: 100% !important; }
.hidden  { display: none !important; }
/* :not(.mod_article) — Contao nutzt "block" als Marker-Klasse auf mod_article;
   die Utility würde sonst leere Article-Hüllen sichtbar erzwingen */
.block:not(.mod_article)   { display: block !important; }
.flex    { display: flex  !important; }
.flex-col       { flex-direction: column !important; }
.justify-center { justify-content: center !important; }
.items-center   { align-items: center !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right  !important; }

/* =============================================================
   Section 30 — RCT Gallery (Isotope)
   ============================================================= */

/* ── Base layout ── */
.rct-gallery {
  position: relative;
}

.rct-gallery-grid {
  position: relative;
}

/* Masonry column-sizer (invisible helper for Isotope) */
.rct-gallery-sizer {
  width: calc(100% / var(--cols, 3));
}

/* Grid items */
.rct-gallery-item {
  width: calc(100% / var(--cols, 3));
  padding: 4px;
  box-sizing: border-box;
}

/* Cols per config */
.rct-gallery.cols-2 { --cols: 2; }
.rct-gallery.cols-3 { --cols: 3; }
.rct-gallery.cols-4 { --cols: 4; }
.rct-gallery.cols-5 { --cols: 5; }
.rct-gallery.cols-6 { --cols: 6; }

@media (max-width: 900px) {
  .rct-gallery.cols-4,
  .rct-gallery.cols-5,
  .rct-gallery.cols-6 { --cols: 3; }
}
@media (max-width: 600px) {
  .rct-gallery { --cols: 2; }
}
@media (max-width: 400px) {
  .rct-gallery { --cols: 1; }
}

/* Images */
.rct-gallery-link {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  border-radius: 2px;
  background: #111;
}

.rct-gallery-img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

a.rct-gallery-link:hover .rct-gallery-img {
  transform: scale(1.05);
  opacity: 0.85;
}

/* Overlay on hover */
.rct-gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(39,196,244,0.15) 0%, rgba(0,0,0,0.3) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
a.rct-gallery-link:hover .rct-gallery-overlay {
  opacity: 1;
}

/* Empty state */
.rct-gallery-empty {
  font-size: 0.875rem;
  opacity: 0.5;
  padding: 2rem 0;
}

/* ── fitRows layout ── */
.rct-gallery.layout-fitrows .rct-gallery-item {
  display: inline-block;
  vertical-align: top;
}

/* ── Filter buttons — base ── */
.rct-gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.rct-gallery-filter-btn {
  padding: 0.35rem 1rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  font-size: 0.8rem;
  font-family: inherit;
  transition: background 0.2s, color 0.2s;
  line-height: 1.4;
}

/* ── DARK variant ── */
.rct-gallery {
  /* default: dark */
}

.rct-gallery-filter-btn {
  color: var(--rct-accent, #27c4f4);
  border-color: color-mix(in srgb, var(--rct-accent, #27c4f4) 40%, transparent);
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.rct-gallery-filter-btn:hover,
.rct-gallery-filter-btn.is-active {
  background: var(--rct-accent, #27c4f4);
  color: #000;
  border-color: var(--rct-accent, #27c4f4);
  box-shadow: 0 0 12px color-mix(in srgb, var(--rct-accent, #27c4f4) 60%, transparent);
}

.rct-gallery .rct-gallery-link {
  border: 1px solid color-mix(in srgb, var(--rct-accent, #27c4f4) 15%, transparent);
}

/* Lightbox cursor hint */
a.rct-gallery-link {
  cursor: zoom-in;
}

/* ── LIGHT variant ── */
.rct-gallery.style-light .rct-gallery-filter-btn {
  color: #333;
  border-color: #ccc;
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.82rem;
}

.rct-gallery.style-light .rct-gallery-filter-btn:hover,
.rct-gallery.style-light .rct-gallery-filter-btn.is-active {
  background: #333;
  color: #fff;
  border-color: #333;
  box-shadow: none;
}

.rct-gallery.style-light .rct-gallery-link {
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  background: #f5f5f5;
}

.rct-gallery.style-light .rct-gallery-img {
  border-radius: 2px;
}

/* Isotope hide during filter transition */
.rct-gallery-item.is-hidden {
  pointer-events: none;
}



/* ============================================================
   RCT Article Background
   ============================================================ */
[class*="rct-article-bg-"] {
  padding: 1.5rem;
  border-radius: var(--rct-radius-lg);
  overflow: hidden;
  position: relative;
}
/* Explizit dunkler/heller Article-BG — Editor-Wahl, NICHT theme-folge.
 * Color über --rct-on-surface-dark/-light (immer kontrastsicher), damit
 * der gewählte Mode bei jedem Theme rendert wie intendiert. */
.rct-article-bg-dark {
  background: rgba(23, 23, 23, var(--rct-article-alpha, 1));
  color: var(--rct-on-surface-dark, #ffffff);
}
.rct-article-bg-white {
  background: rgba(255, 255, 255, var(--rct-article-alpha, 1));
  color: var(--rct-on-surface-light, #1a1a1a);
}
.rct-article-bg-accent {
  background: rgba(39, 196, 244, var(--rct-article-alpha, 1));
  color: #0a0a0a;
}

/* ============================================================
   RCT Pricing Table
   ============================================================ */
.rct-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  align-items: start;
}
.rct-pricing-plan {
  display: flex;
  flex-direction: column;
  border-radius: var(--rct-radius-lg);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rct-pricing-plan:hover {
  transform: translateY(-3px);
}

/* Highlight: clip-path ersetzt overflow:hidden + border-radius */
.rct-pricing-plan.is-highlight {
  position: relative;
  overflow: visible;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}

.rct-pricing-plan.is-highlight::after {
  content: '';
  position: absolute;
  top: 0px;
  right: 4px;
  width: 30px;
  height: 32px;
  background: var(--rct-accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: 0.75;
  z-index: 2;
  transition: background 0.4s;
  pointer-events: none;
  transform: rotate(45deg);
}

/* Dark style */
.rct-pricing.style-dark .rct-pricing-plan {
  background: #0d0d0d;
  border: 1px solid rgba(255,255,255,0.08);
}
.rct-pricing.style-dark .rct-pricing-plan.is-highlight {
  border-color: var(--rct-accent);
  box-shadow: 0 0 0 1px var(--rct-accent), 0 8px 32px rgba(0,0,0,0.4);
}
.rct-pricing.style-dark .rct-pricing-header {
  background: #171717;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.rct-pricing.style-dark .rct-pricing-plan.is-highlight .rct-pricing-header {
  background: linear-gradient(135deg, color-mix(in srgb, var(--rct-accent) 15%, #171717), #171717);
}
.rct-pricing.style-dark .rct-pricing-name { color: #aaa; }
.rct-pricing.style-dark .rct-pricing-amount { color: #f0f0f0; }
.rct-pricing.style-dark .rct-pricing-period { color: #888; }
.rct-pricing.style-dark .rct-pricing-feature { color: #e8e8e8; border-bottom-color: rgba(255,255,255,0.05); }
.rct-pricing.style-dark .rct-pricing-feature.type-yes .rct-pricing-icon { color: var(--rct-accent); }
.rct-pricing.style-dark .rct-pricing-feature.type-no { opacity: 0.4; }
.rct-pricing.style-dark .rct-pricing-feature.type-no .rct-pricing-icon { color: #aaa; }
.rct-pricing.style-dark .rct-pricing-footer { background: #0d0d0d; border-top: 1px solid rgba(255,255,255,0.08); }
.rct-pricing.style-dark .rct-pricing-btn { background: #1a1a1a; color: #f0f0f0 !important; border: 1px solid rgba(255,255,255,0.12); }
.rct-pricing.style-dark .rct-pricing-btn.btn-highlight { background: var(--rct-accent); color: #fff !important; border-color: var(--rct-accent); }
html[data-theme="sparta"] .rct-pricing.style-dark .rct-pricing-btn { background: #2a2a2a !important; border-color: rgba(255,255,255,0.2) !important; }
html[data-theme="sparta"] .rct-pricing.style-dark .rct-pricing-btn.btn-highlight { background: #cccccc !important; color: #000 !important; border-color: #cccccc !important; }
.rct-pricing.style-dark .rct-pricing-btn:hover { opacity: 0.85; }

/* Light style */
.rct-pricing.style-light .rct-pricing-plan {
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.rct-pricing.style-light .rct-pricing-plan.is-highlight {
  border-color: var(--rct-accent);
  box-shadow: 0 0 0 2px var(--rct-accent), 0 8px 24px rgba(0,0,0,0.1);
}
.rct-pricing.style-light .rct-pricing-header { background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
.rct-pricing.style-light .rct-pricing-plan.is-highlight .rct-pricing-header {
  background: linear-gradient(135deg, color-mix(in srgb, var(--rct-accent) 10%, white), white);
}
.rct-pricing.style-light .rct-pricing-name { color: #6b7280; }
.rct-pricing.style-light .rct-pricing-amount { color: #111827; }
.rct-pricing.style-light .rct-pricing-period { color: #9ca3af; }
.rct-pricing.style-light .rct-pricing-feature { color: #374151; border-bottom-color: #f3f4f6; }
.rct-pricing.style-light .rct-pricing-feature.type-yes .rct-pricing-icon { color: var(--rct-accent); }
.rct-pricing.style-light .rct-pricing-feature.type-no { opacity: 0.45; }
.rct-pricing.style-light .rct-pricing-footer { background: #f9fafb; border-top: 1px solid #e5e7eb; }
.rct-pricing.style-light .rct-pricing-btn { background: #f3f4f6; color: #111827; border: 1px solid #d1d5db; }
.rct-pricing.style-light .rct-pricing-btn.btn-highlight { background: var(--rct-accent); color: #fff !important; border-color: var(--rct-accent); }
html[data-theme="sparta"] .rct-pricing.style-light .rct-pricing-btn { background: #2a2a2a !important; color: #f0f0f0 !important; border-color: rgba(255,255,255,0.2) !important; }
html[data-theme="sparta"] .rct-pricing.style-light .rct-pricing-btn.btn-highlight { background: #cccccc !important; color: #000 !important; border-color: #cccccc !important; }
.rct-pricing.style-light .rct-pricing-btn:hover { opacity: 0.85; }

/* Shared layout */
.rct-pricing-header { padding: 24px; }
.rct-pricing-name { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; }
.rct-pricing-amount { display: block; font-size: 2.5rem; font-weight: 800; line-height: 1; }
.rct-pricing-period { display: block; font-size: 0.8rem; margin-top: 4px; }
.rct-pricing-features { list-style: none; margin: 0; padding: 0; flex: 1; }
.rct-pricing-feature { display: flex; align-items: baseline; gap: 10px; padding: 10px 24px; font-size: 0.875rem; border-bottom: 1px solid transparent; }
.rct-pricing-icon { flex-shrink: 0; width: 16px; font-size: 0.8rem; font-weight: 700; }
.rct-pricing-footer { padding: 20px 24px; }
.rct-pricing-btn {
  display: block; width: 100%; padding: 10px 20px;
  text-align: center; text-decoration: none;
  font-size: 0.875rem; font-weight: 600;
  border-radius: var(--rct-radius);
  transition: opacity 0.2s ease;
  cursor: pointer;
}

/* ============================================================
   18. HERO ELEMENT (.rct-hero)
   ============================================================ */

@keyframes rct-hero-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rct-hero-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.rct-hero {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  /* Eigenen Stacking-Context — analog .rct-cta, siehe dort. */
  z-index: 20;
}

/* BG-Override (rct_hero_bg_color gesetzt) — färbt direkt die Hero-Section.
   Mit BG bekommt die Section auch horizontales Padding + Border-Radius
   damit Inhalt nicht am Rand klebt. */
.rct-hero.has-bg-white  { background: rgba(255, 255, 255, var(--rct-hero-bg-alpha, 1)); color: #1a1a1a; }
.rct-hero.has-bg-dark   { background: rgba(23, 23, 23,    var(--rct-hero-bg-alpha, 1)); }
.rct-hero.has-bg-accent { background: color-mix(in srgb, var(--rct-accent) calc(var(--rct-hero-bg-alpha, 1) * 100%), transparent); color: #0a0a0a; }
.rct-hero[class*=" has-bg-"],
.rct-hero[class^="has-bg-"] {
  padding: 80px 60px;
  border-radius: var(--rct-radius-lg);
  border: 1px solid color-mix(in srgb, var(--rct-accent) 25%, transparent);
}
@media (max-width: 900px) {
  .rct-hero[class*=" has-bg-"],
  .rct-hero[class^="has-bg-"] {
    padding: 60px 24px;
  }
}

.rct-hero-inner {
  display: flex;
  align-items: center;
  gap: 48px;
}

/* ── Text block ── */
.rct-hero-text {
  flex: 1;
  min-width: 0;
}

/* Overline */
.rct-hero-overline {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--rct-font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--rct-accent);
  margin-bottom: 20px;
  animation: rct-hero-up 0.8s 0.05s both cubic-bezier(.4,0,.2,1);
}
.rct-hero-overline::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--rct-accent);
  flex-shrink: 0;
}

/* Headline */
.rct-hero-headline {
  font-family: var(--rct-font-headline);
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--rct-shell-text, #fff);
  margin: 0 0 24px;
  animation: rct-hero-up 0.8s 0.12s both cubic-bezier(.4,0,.2,1);
}
.rct-hero-headline em {
  font-style: normal;
  color: var(--rct-accent);
  transition: color 0.4s;
}

/* Body */
.rct-hero-body {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,0.55);
  max-width: 480px;
  margin-bottom: 36px;
  animation: rct-hero-up 0.8s 0.20s both cubic-bezier(.4,0,.2,1);
}

/* Actions */
.rct-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 44px;
  animation: rct-hero-up 0.8s 0.28s both cubic-bezier(.4,0,.2,1);
}
.rct-hero-btn-arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.2s;
  vertical-align: middle;
}
.rct-hero-actions .rct-btn:hover .rct-hero-btn-arrow { transform: translateX(4px); }

/* Stats */
.rct-hero-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  animation: rct-hero-up 0.8s 0.36s both cubic-bezier(.4,0,.2,1);
}
.rct-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rct-hero-stat-val {
  font-family: var(--rct-font-mono);
  font-size: 20px;
  font-weight: 500;
  color: var(--rct-shell-text, #fff);
  letter-spacing: -0.02em;
  line-height: 1;
}
.rct-hero-stat-label {
  font-family: var(--rct-font-mono);
  font-size: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rct-shell-muted, #737373);
}
.rct-hero-stat-sep {
  width: 1px;
  height: 32px;
  background: var(--rct-shell-border, rgba(255,255,255,0.08));
  flex-shrink: 0;
}

/* Ambient glow */
.rct-hero-glow {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 200px;
  background: radial-gradient(ellipse at center, var(--rct-accent) 0%, transparent 70%);
  opacity: 0.125;
  pointer-events: none;
  transition: background 0.4s;
}

/* ── Centered layout ── */
.rct-hero.layout-centered { text-align: center; }
.rct-hero.layout-centered .rct-hero-inner {
  flex-direction: column;
  max-width: 760px;
  margin: 0 auto;
}
.rct-hero.layout-centered .rct-hero-overline  { justify-content: center; }
.rct-hero.layout-centered .rct-hero-body      { margin-left: auto; margin-right: auto; }
.rct-hero.layout-centered .rct-hero-actions   { justify-content: center; }
.rct-hero.layout-centered .rct-hero-stats     { justify-content: center; }

/* ── Split layout ── */
.rct-hero.layout-split .rct-hero-inner {
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: center;
  gap: 0;
}
.rct-hero.layout-split .rct-hero-text {
  position: relative;
  padding-right: 56px;
}
/* Vertical accent divider */
.rct-hero.layout-split .rct-hero-text::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 5%;
  bottom: 0;
  width: 5px;
  background: linear-gradient(to bottom, transparent, var(--rct-accent), transparent);
  opacity: 0.25;
}

/* Visual panel */
.rct-hero-visual {
  position: relative;
  height: 100%;
  min-height: 420px;
  animation: rct-hero-in 1s 0.18s both cubic-bezier(.4,0,.2,1);
}
/* Eselsohr oben rechts — sitzt auf dem Visual-Wrapper über dem geclippten Bild */
.rct-hero-visual::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 32px;
  background: var(--rct-accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: 0.95;
  z-index: 2;
  transition: background 0.4s;
  pointer-events: none;
  transform: rotate(45deg);
}
.rct-hero-img-wrap {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 420px;
  /* Trapez-Tür: linke Kante kürzer als rechte ("öffnet" sich nach innen,
     der vertikale Akzent-Strich am Text wirkt wie der Lichtschein durch die
     Tür). Plus Eselsohr oben rechts. */
  clip-path: polygon(
    0% 5%,
    calc(100% - 22px) 0%,
    100% 22px,
    100% 100%,
    0% 95%
  );
}
.rct-hero-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(.4,0,.2,1);
}
.rct-hero-img-wrap:hover img { transform: scale(1.03); }

/* Slideshow — mehrere Bilder */
[data-hero-slides] img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(.4,0,.2,1), transform 0.6s cubic-bezier(.4,0,.2,1);
}
[data-hero-slides] img.is-active { opacity: 1; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .rct-hero { padding: 60px 0; }
  .rct-hero.layout-split .rct-hero-inner { grid-template-columns: 1fr; }
  .rct-hero.layout-split .rct-hero-text  { padding-right: 0; }
  .rct-hero.layout-split .rct-hero-text::after { display: none; }
  .rct-hero-visual,
  .rct-hero-img-wrap { min-height: 260px; }
  .rct-hero-img-wrap {
    margin-top: 40px;
    /* Bild liegt unter dem Text → Tür-Effekt aus, nur Eselsohr behalten */
    clip-path: polygon(0% 0%, calc(100% - 22px) 0%, 100% 22px, 100% 100%, 0% 100%);
  }
  .rct-hero-visual::after { top: 46px; }
  .rct-hero-headline { font-size: clamp(34px, 9vw, 54px); }
  .rct-hero-body     { max-width: 100%; }
}

/* ============================================================
   RCT Slider Box — Hero-Slide self-contained (BG + Inhalt)
   ============================================================ */
.rct-sliderbox {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  color: #fff;
}
.rct-sliderbox-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.rct-sliderbox-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--rct-max-width);
  margin: 0 auto;
  padding: 60px 40px;
}
.rct-sliderbox.align-left   .rct-sliderbox-content { text-align: left; }
.rct-sliderbox.align-center .rct-sliderbox-content { text-align: center; }
.rct-sliderbox.align-right  .rct-sliderbox-content { text-align: right; }
.rct-sliderbox.align-center .rct-sliderbox-text    { margin-left: auto; margin-right: auto; }
.rct-sliderbox.align-right  .rct-sliderbox-text    { margin-left: auto; }

.rct-sliderbox-overline {
  font-family: var(--rct-font-headline);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin: 0 0 1rem;
  opacity: 0.85;
}
.rct-sliderbox-headline {
  font-family: var(--rct-font-headline);
  font-size: clamp(2rem, 5vw, 4rem);
  margin: 0 0 1rem;
  line-height: 1.1;
  color: inherit;
}
.rct-sliderbox-text {
  font-size: 1.125rem;
  line-height: 1.55;
  margin: 0 0 1.75rem;
  max-width: 640px;
}
.rct-sliderbox-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 0.5rem;
}
.rct-sliderbox.align-center .rct-sliderbox-buttons { justify-content: center; }
.rct-sliderbox.align-right  .rct-sliderbox-buttons { justify-content: flex-end; }

/* Slider-Kontext: full-width über fullwidth-CE oder rct-fullwidth Wrapper */
.rct-fullwidth .rct-sliderbox-inner {
  max-width: var(--rct-max-width);
}

@media (max-width: 768px) {
  .rct-sliderbox-inner   { padding: 40px 20px; }
  .rct-sliderbox-text    { font-size: 1rem; }
}


/* ------------------------------------------------------------
   N. DIVIDERS (.rct-divider)
   13 token-basierte Trenner-Varianten (Port aus design_handoff_dividers).
   Markup-Pattern siehe Twig-Template content_element/rct_divider.html.twig.
   Statisch, keine JS, keine Hover-States. Theme-Switching automatisch
   über bestehende RCT-Tokens (--rct-accent, --rct-shell-border, --grad-*).
   ------------------------------------------------------------ */

.rct-divider {
  --_rd-border:        var(--rct-shell-border, rgba(255,255,255,0.08));
  --_rd-border-strong: rgba(255,255,255,0.16);
  --_rd-muted:         var(--rct-text-faint, #737373);
  width: 100%;
}
[data-theme="sparta2"] .rct-divider {
  --_rd-border-strong: rgba(0,0,0,0.20);
}

/* ── 01 · Accent fade ── */
.rct-divider--fade {
  height: var(--rd-h, 1px);
  background: linear-gradient(to right,
    transparent 0%,
    var(--_rd-border-strong) 20%,
    var(--rct-accent) 50%,
    var(--_rd-border-strong) 80%,
    transparent 100%);
  opacity: 0.9;
}

/* ── 02 · Tick rail ── */
.rct-divider--ticks {
  position: relative;
  height: 14px;
}
.rct-divider--ticks::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: var(--_rd-border);
}
.rct-divider--ticks::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, var(--_rd-border-strong) 1px, transparent 1px);
  background-size: 24px 100%;
  background-position: 0 0;
}

/* ── 03 · Labeled rule ── */
.rct-divider--labeled {
  display: flex;
  align-items: center;
  gap: 16px;
}
.rct-divider--labeled .line {
  flex: 1;
  height: 1px;
  background: var(--_rd-border);
}
.rct-divider--labeled .lbl {
  font-family: var(--rct-font-mono);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--_rd-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.rct-divider--labeled .lbl .num {
  color: var(--rct-accent);
  font-weight: 500;
}

/* ── 04 · Section starter (left accent) ── */
.rct-divider--section {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}
.rct-divider--section .bar {
  width: 3px;
  height: 20px;
  background: var(--rct-accent);
}
.rct-divider--section .ttl {
  font-family: var(--rct-font-headline);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: inherit;
}
.rct-divider--section .rule {
  flex: 1;
  height: 1px;
  background: var(--_rd-border);
}
.rct-divider--section .idx {
  font-family: var(--rct-font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--_rd-muted);
}

/* ── 05 · Coordinate divider ── */
.rct-divider--coord {
  display: flex;
  align-items: center;
  font-family: var(--rct-font-mono);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--_rd-muted);
}
.rct-divider--coord .x {
  color: var(--rct-accent);
}
.rct-divider--coord .line {
  flex: 1;
  height: 1px;
  background: var(--_rd-border);
  margin: 0 14px;
  position: relative;
}
.rct-divider--coord .line::before,
.rct-divider--coord .line::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 1px;
  height: 7px;
  background: var(--_rd-border-strong);
}
.rct-divider--coord .line::before { left: 0; }
.rct-divider--coord .line::after  { right: 0; }

/* ── 06 · Marker (Default = Diamond, optional Icon-Slot) ── */
.rct-divider--marker {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rct-divider--marker .line {
  flex: 1;
  height: 1px;
  background: var(--_rd-border);
}
/* Default: Diamond-Raute (Fallback, wenn kein Icon gesetzt) */
.rct-divider--marker .mark {
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  border: 1px solid var(--rct-accent);
  flex-shrink: 0;
  position: relative;
}
.rct-divider--marker .mark::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--rct-accent);
  opacity: 0.55;
}
/* Icon-Slot (Tabler-SVG oder Emoji) — überschreibt Diamond, wenn vorhanden */
.rct-divider--marker .icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rct-accent);
  font-size: 48px;
  line-height: 1;
}
.rct-divider--marker .icon .rct-icon {
  width: 48px;
  height: 48px;
  stroke-width: 1.25;
}

/* ── 07 · Bracket rail ── */
.rct-divider--bracket {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rct-font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: inherit;
}
.rct-divider--bracket .b {
  color: var(--rct-accent);
  font-weight: 500;
}
.rct-divider--bracket .line {
  flex: 1;
  position: relative;
  height: 12px;
}
.rct-divider--bracket .line::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: repeating-linear-gradient(to right,
    var(--_rd-border-strong) 0 4px, transparent 4px 8px);
}

/* ── 08 · Stepped accent ── */
.rct-divider--stepped {
  display: flex;
  align-items: stretch;
  height: 6px;
}
.rct-divider--stepped .seg {
  flex: 1;
  background: var(--_rd-border);
}
.rct-divider--stepped .seg.on {
  background: var(--rct-accent);
}
.rct-divider--stepped .seg + .seg {
  margin-left: 4px;
}

/* ── 09 · Mono caption rule (split 18% accent / rest border) ── */
.rct-divider--caption {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rct-divider--caption .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--rct-font-mono);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.rct-divider--caption .row .end {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rct-divider--caption .row .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rct-accent);
  animation: rct-divider-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes rct-divider-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--rct-accent) 60%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in oklab, var(--rct-accent)  0%, transparent); }
}
.rct-divider--caption .line {
  height: 1px;
  background: linear-gradient(to right,
    var(--rct-accent) 0%, var(--rct-accent) 18%,
    var(--_rd-border) 18%, var(--_rd-border) 100%);
}

/* ── 10 · Aurora gradient (Hero-Break, sparsam) ── */
.rct-divider--aurora {
  height: var(--rd-h, 1px);
  background: linear-gradient(to right,
    transparent,
    var(--grad-1) 20%,
    var(--grad-2) 50%,
    var(--grad-3) 80%,
    transparent);
  position: relative;
  box-shadow: 0 0 24px color-mix(in oklab, var(--grad-1) 30%, transparent);
}

/* ── 11 · Ruler ── */
.rct-divider--ruler {
  position: relative;
  height: 18px;
}
.rct-divider--ruler::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 1px;
  background: var(--_rd-border-strong);
}
.rct-divider--ruler .ticks {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--_rd-border-strong) 1px, transparent 1px),
    linear-gradient(to right, var(--_rd-border) 1px, transparent 1px);
  background-size: 80px 10px, 16px 6px;
  background-repeat: repeat-x;
  background-position: 0 0, 0 0;
}
.rct-divider--ruler .nums {
  position: absolute;
  left: 0; right: 0;
  top: 11px;
  display: flex;
  justify-content: space-between;
  font-family: var(--rct-font-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--_rd-muted);
  letter-spacing: 0.1em;
}

/* ── 12 · Counter divider ── */
.rct-divider--counter {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rct-divider--counter .num {
  font-family: var(--rct-font-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--_rd-muted);
  letter-spacing: 0.14em;
}
.rct-divider--counter .num b {
  color: var(--rct-accent);
  font-weight: 500;
}
.rct-divider--counter .line {
  flex: 1;
  height: 1px;
  background: var(--_rd-border);
}
.rct-divider--counter .arrow {
  font-family: var(--rct-font-mono);
  font-size: 28px;
  color: var(--rct-accent);
}

/* ── 13 · Dotted rail ── */
.rct-divider--dots {
  height: 6px;
  background-image: radial-gradient(circle, var(--rct-accent) 1px, transparent 1.2px);
  background-size: 8px 6px;
  background-position: 0 50%;
  background-repeat: repeat-x;
}


/* ------------------------------------------------------------
   N+1. PRODUCTBOX (.rct-productbox)
   Produkt-Karte: Banner (optional, oben links), Bild, Headline,
   Subheadline, Text, Preis-Block (Foot), optionaler CTA.
   Style: light | dark. Akzentfarbe via --pb-color (inline-Style
   vom Controller).
   ------------------------------------------------------------ */

.rct-productbox {
  --pb-color: var(--rct-accent);
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--rct-radius-lg, 0.5rem);
  border: 1px solid color-mix(in srgb, var(--pb-color) 25%, transparent);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.rct-productbox.style-light {
  background: #ffffff;
  color: #1a1a1a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.rct-productbox.style-dark {
  background: color-mix(in srgb, var(--pb-color) 5%, var(--rct-shell-bg, #171717));
  color: var(--rct-shell-text, #e0e0e0);
  /* Clipped corner oben rechts (unten links bleibt offen — sonst kollidiert
     es mit dem schrägen Banner) */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  border: 0;
  /* Schatten kann hier nicht hin — clip-path wird nach filter angewendet
     und würde drop-shadow weg-clippen. Schatten lebt auf .rct-productbox-frame.is-dark */
}

/* Wrapper-Div um das <article> — trägt den drop-shadow für dark
   (clip-path auf article schneidet drop-shadow auf article weg) */
.rct-productbox-frame {
  position: relative;
  transition: filter 0.25s ease;
}
.rct-productbox-frame.is-dark {
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.06));
}
.content-rct-productbox:hover .rct-productbox-frame.is-dark {
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.18));
}
/* Akzent-Notch oben rechts (Triangle, in Akzentfarbe) */
.rct-productbox.style-dark::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: var(--pb-color);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: 0.85;
  z-index: 2;
  pointer-events: none;
  transform: rotate(45deg);
  transition: background 0.4s;
}

/* Hover-Trigger liegt auf dem Contao-CE-Wrapper (.content-rct-productbox)
   statt auf dem inneren <article> — damit der Hover-Bereich der ganzen
   sichtbaren Card-Fläche entspricht und nicht nur dem article. */
.content-rct-productbox:hover .rct-productbox {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.content-rct-productbox:hover .rct-productbox-image img {
  transform: scale(1.04);
}

/* Layout: horizontal (Bild links, Body rechts) */
.rct-productbox.layout-horizontal {
  flex-direction: row;
  align-items: stretch;
}
.rct-productbox.layout-horizontal .rct-productbox-image {
  flex: 0 0 40%;
  max-width: 40%;
  padding: 24px;
}
.rct-productbox.layout-horizontal .rct-productbox-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media (max-width: 720px) {
  .rct-productbox.layout-horizontal {
    flex-direction: column;
  }
  .rct-productbox.layout-horizontal .rct-productbox-image {
    flex: 1 1 auto;
    max-width: 100%;
  }
}

/* Banner (diagonal unten links, Sticker-Look) */
.rct-productbox-banner {
  position: absolute;
  bottom: 34px;
  left: -20px;
  z-index: 2;
  padding: 6px 16px 6px 30px;
  background: var(--pb-color);
  color: #ffffff;
  font-family: var(--rct-font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
  transform: rotate(33deg);
  -webkit-transform: rotate(33deg);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Bild (single oder slideshow) */
.rct-productbox-image {
  margin: 0;
  padding: 24px 24px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.rct-productbox-image img {
  max-width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}
/* Slideshow: erstes Bild im flow (definiert Höhe), folgende als overlay
   mit fade-Wechsel — so behalten Multi-Bild-Karten dieselbe Höhe wie Single. */
.rct-productbox-image[data-pb-slides] img {
  transition: opacity 0.6s ease;
}
.rct-productbox-image[data-pb-slides] img:not(.is-active) {
  opacity: 0;
}
.rct-productbox-image[data-pb-slides] img:not(:first-child) {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  bottom: 8px;
  width: calc(100% - 48px);
  height: calc(100% - 32px);
  object-fit: contain;
  margin: 0 auto;
}

/* Body wraps Content + Foot (für horizontal-Layout flex-grow rechts) */
.rct-productbox-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Content (Stock + Headline + Subheadline + Text) */
.rct-productbox-content {
  flex: 1;
  padding: 16px 24px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Stock-Indikator */
.rct-productbox-stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rct-font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, currentColor 65%, transparent);
  margin-bottom: 4px;
}
.rct-productbox-stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.rct-productbox-stock.is-available  { color: #22c55e; }
.rct-productbox-stock.is-available  .rct-productbox-stock-dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px color-mix(in oklab, #22c55e 20%, transparent);
  animation: rct-productbox-stock-pulse 2.4s ease-in-out infinite;
}
.rct-productbox-stock.is-low        { color: #f59e0b; }
.rct-productbox-stock.is-low        .rct-productbox-stock-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 3px color-mix(in oklab, #f59e0b 20%, transparent);
}
.rct-productbox-stock.is-sold_out   { color: #ef4444; }
.rct-productbox-stock.is-sold_out   .rct-productbox-stock-dot {
  background: #ef4444;
}
@keyframes rct-productbox-stock-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, #22c55e 50%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in oklab, #22c55e  0%, transparent); }
}
.rct-productbox-headline {
  font-family: var(--rct-font-headline);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  color: inherit;
}
.rct-productbox-subheadline {
  font-family: var(--rct-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pb-color);
  margin: 0;
}
.rct-productbox-text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: color-mix(in srgb, currentColor 80%, transparent);
}
.rct-productbox-text :is(p, ul, ol) { margin: 0 0 0.5rem; }
.rct-productbox-text :is(p, ul, ol):last-child { margin-bottom: 0; }

/* Foot — Preis-Block + optionaler Button, rechtsbündig */
.rct-productbox-foot {
  padding: 12px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}
.rct-productbox-price-extra {
  font-family: var(--rct-font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pb-color);
}
.rct-productbox-price {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.rct-productbox-price-old {
  font-family: var(--rct-font-mono);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
  color: color-mix(in srgb, currentColor 55%, transparent);
}
.rct-productbox-price-value {
  font-family: var(--rct-font-headline);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1;
  color: var(--pb-color);
}
.rct-productbox-price-note {
  margin-top: 4px;
  font-family: var(--rct-font-mono);
  font-size: 0.7rem;
  color: color-mix(in srgb, currentColor 60%, transparent);
}
.rct-productbox-btn {
  margin-top: 4px;
}

/* Mobile */
@media (max-width: 600px) {
  .rct-productbox-image   { padding: 20px 16px 4px; }
  .rct-productbox-content { padding: 12px 16px 4px; }
  .rct-productbox-foot    { padding: 8px 16px 16px; }
  .rct-productbox-banner  { font-size: 11px; padding: 5px 14px 5px 12px; letter-spacing: 0.14em; }
}


/* ============================================================
   FORMS — Contact-Form Skin
   Style auf Contao-Standard mod_form (.ce_form > form > .formbody >
   .widget-text/.widget-textarea/.widget-checkbox/.widget-captcha/.widget-submit).
   Default-Variante = light (für weiße mod_articles).
   Dark-Variante per CSS-Klasse "is-dark" auf dem ce_form-Wrapper.
   ============================================================ */

/* Lokale Tokens für Forms — werden von .is-dark überschrieben */
.ce_form {
  --rf-field-bg:       #ffffff;
  --rf-field-bg-focus: #ffffff;
  --rf-border:         rgba(27, 28, 28, 0.12);
  --rf-border-strong:  rgba(27, 28, 28, 0.28);
  --rf-border-focus:   var(--rct-accent);
  --rf-txt:            var(--rct-text, #1b1c1c);
  --rf-txt-muted:      var(--rct-text-muted, #434936);
  --rf-txt-faint:      var(--rct-text-faint, #747a64);
  --rf-label:          var(--rct-text-faint, #747a64);
  --rf-error:          #ba1a1a;
  --rf-btn-fg:         #ffffff;
}
/* Dark-Variante — greift wenn .is-dark auf .ce_form ODER auf <form> liegt */
.ce_form.is-dark,
.ce_form form.is-dark {
  --rf-field-bg:       rgba(255, 255, 255, 0.04);
  --rf-field-bg-focus: rgba(255, 255, 255, 0.06);
  --rf-border:         rgba(255, 255, 255, 0.10);
  --rf-border-strong:  rgba(255, 255, 255, 0.20);
  --rf-border-focus:   var(--rct-accent);
  --rf-txt:            #ffffff;
  --rf-txt-muted:      rgba(255, 255, 255, 0.6);
  --rf-txt-faint:      rgba(255, 255, 255, 0.4);
  --rf-label:          rgba(255, 255, 255, 0.55);
  --rf-error:          #ff6b6b;
  --rf-btn-fg:         #0e0e18;
}
/* Dark-Form bekommt eigenes dunkles Surface — sonst wäre weiße Schrift
   auf weißem mod_article-BG unlesbar. --rct-surface-dark ist garantiert
   dunkel, folgt NICHT dem Theme (bei hellen Themes wie Soft Edition
   würde --rct-shell-bg sonst hell, was die is-dark-Intent kaputt macht). */
.ce_form form.is-dark {
  background: var(--rct-surface-dark, #171717);
  color: var(--rf-txt);
  border-radius: var(--rct-radius-lg, 0.5rem);
}

/* Form-Body Layout */
.ce_form .formbody {
  display: flex;
  flex-direction: column;
  gap: 22px;
  color: var(--rf-txt);
}
.ce_form.is-dark .formbody {
  color: var(--rf-txt);
}

/* 2-Spalten-Wrapper für Form-Felder.
   Im Form-Generator als HTML-Snippet einsetzen:
     <div class="rct-form-row">
   …Felder…
     </div>
   Klappt auf Mobile auf 1 Spalte. Vertikal mittig (für Submit + Status). */
.ce_form .rct-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: center;
}
@media (max-width: 540px) {
  .ce_form .rct-form-row { grid-template-columns: 1fr; }
}

/* Widget-Wrapper */
.ce_form .widget {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.ce_form .widget label {
  font-family: var(--rct-font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rf-label);
}
/* Mandatory-Marker: Contao rendert bereits <span class="mandatory"> *</span>
   im Label — wir färben ihn nur in Akzentfarbe */
.ce_form .widget label .mandatory {
  color: var(--rct-accent);
  font-weight: 500;
}

/* Inputs (text, email, captcha) + Textarea */
.ce_form .widget input.text,
.ce_form .widget input.captcha,
.ce_form .widget input[type="email"],
.ce_form .widget input[type="tel"],
.ce_form .widget input[type="url"],
.ce_form .widget textarea.textarea {
  width: 100%;
  background: var(--rf-field-bg);
  border: 1px solid var(--rf-border);
  color: var(--rf-txt);
  font-family: var(--rct-font-headline);
  font-size: 14.5px;
  font-weight: 400;
  padding: 13px 14px;
  outline: none;
  border-radius: 2px;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.ce_form .widget textarea.textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.55;
}
.ce_form .widget input::placeholder,
.ce_form .widget textarea::placeholder {
  color: var(--rf-txt-faint);
}
.ce_form .widget input:hover,
.ce_form .widget textarea:hover {
  border-color: var(--rf-border-strong);
}
.ce_form .widget input:focus,
.ce_form .widget textarea:focus {
  border-color: var(--rf-border-focus);
  background: var(--rf-field-bg-focus);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--rf-border-focus) 18%, transparent);
}
/* Validierungsfehler */
.ce_form .widget input[aria-invalid="true"],
.ce_form .widget textarea[aria-invalid="true"] {
  border-color: var(--rf-error);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--rf-error) 18%, transparent);
}
.ce_form .widget p.error {
  font-family: var(--rct-font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--rf-error);
  margin: 0;
}
.ce_form .widget p.error::before { content: '! '; }

/* Captcha — Frage als boxed prompt rechts neben Input */
.ce_form .widget-captcha {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.ce_form .widget-captcha .captcha_text {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border: 1px dashed var(--rf-border-strong);
  font-family: var(--rct-font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--rf-txt-muted);
  letter-spacing: 0.05em;
  user-select: none;
  width: max-content;
  border-radius: 2px;
}

/* Checkbox — fieldset zu flex-row, damit Checkbox+Ja und der p.help
   (Datenschutz-Text) nebeneinander stehen statt untereinander */
.ce_form .widget-checkbox fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.ce_form .widget-checkbox legend {
  font-family: var(--rct-font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rf-label);
  padding: 0;
  margin-bottom: 6px;
  flex: 1 1 100%;
}
.ce_form .widget-checkbox span {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.55;
  color: var(--rf-txt-muted);
}
.ce_form .widget-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1px solid var(--rf-border-strong);
  background: var(--rf-field-bg);
  position: relative;
  margin: 1px 0 0;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  border-radius: 2px;
}
.ce_form .widget-checkbox input[type="checkbox"]::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--rct-accent);
  transform: scale(0);
  transition: transform 0.15s ease;
}
.ce_form .widget-checkbox input[type="checkbox"]:checked {
  border-color: var(--rct-accent);
}
.ce_form .widget-checkbox input[type="checkbox"]:checked::after {
  transform: scale(1);
}
.ce_form .widget-checkbox label {
  font-family: var(--rct-font-headline);
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--rf-txt-muted);
  cursor: pointer;
}
.ce_form .widget-checkbox p.help {
  font-family: var(--rct-font-headline);
  font-size: 12px;
  color: var(--rf-txt-muted);
  margin: 0;
  flex: 1;
  min-width: 0;
  position: relative;
  left: -10px;
  top: -2px;
}
.ce_form .widget-checkbox a {
  color: var(--rct-accent);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in oklab, var(--rct-accent) 60%, transparent);
}

/* Submit */
.ce_form .widget-submit {
  margin-top: 6px;
}
.ce_form .widget-submit button.submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rct-font-headline);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  background: var(--rct-accent);
  color: var(--rf-btn-fg);
  border: 0;
  padding: 15px 30px;
  cursor: pointer;
  border-radius: 2px;
  transition: opacity 0.18s, transform 0.15s;
}
.ce_form .widget-submit button.submit:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}
.ce_form .widget-submit button.submit::after {
  content: '→';
  font-size: 13px;
  transition: transform 0.2s;
}
.ce_form .widget-submit button.submit:hover::after {
  transform: translateX(4px);
}

/* ── Form-Footer (Status-Zeile mit Akzent-Punkt) ──
   Im Form-Generator als HTML-Snippet einsetzen:
     <div class="rct-form-footer"><span>Verschlüsselte Übertragung</span></div>
   Der Punkt vor dem Span wird automatisch gerendert. */
.rct-form-footer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rct-font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--rct-text-faint, #747a64);
  position: relative;
  top: -5px;
}
.rct-form-footer::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rct-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--rct-accent) 22%, transparent);
}

/* In einer .rct-form-row (z.B. Submit + Status) rechtsbündig */
.ce_form .rct-form-row > .rct-form-footer {
  justify-self: end;
}
@media (max-width: 540px) {
  .ce_form .rct-form-row > .rct-form-footer { justify-self: start; }
}

/* ── Form-Header (Meta-Strip CE) ──
   Default = light (für weiße mod_articles).
   Modifier .style-dark für Form-Header über/in dark-Forms. */
.rct-form-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid rgba(27, 28, 28, 0.12);
  border-bottom: 1px solid rgba(27, 28, 28, 0.12);
  font-family: var(--rct-font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--rct-text-faint, #747a64);
  margin: 22px 0;
}
.rct-form-meta.style-dark {
  border-top-color: rgba(255, 255, 255, 0.12);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
}
.rct-form-meta .v {
  width: 1px;
  height: 12px;
  background: color-mix(in srgb, currentColor 35%, transparent);
}
.rct-form-meta .acc {
  color: var(--rct-accent);
}


/* ------------------------------------------------------------
   16. NEWSREADER (.mod_newsreader)
   Frontend-Detail-Ansicht einer News. Contao 5 nutzt im Newsreader
   Twig-Render-Klassen (.content-text, .content-image, ...) statt der
   alten .ce_* PHP-Wrapper, plus h1-h6 mit .content-headline direkt
   am Tag. Wir greifen ueber den Layout-Wrapper .layout_full auf alle
   direkten Kinder zu — deckt auch <p class="info">, <p class="back">
   und unbekannte CE-Typen ab.

   figcaption nutzt --rct-caption-color (default = --rct-text-faint,
   pro Theme override-bar).
   ------------------------------------------------------------ */

.mod_newsreader .layout_full > * {
  margin-bottom: 20px;
}
.mod_newsreader .layout_full > h1,
.mod_newsreader .layout_full > h2,
.mod_newsreader .layout_full > h3,
.mod_newsreader .layout_full > h4,
.mod_newsreader .layout_full > h5,
.mod_newsreader .layout_full > h6 {
  margin-bottom: 0; /* Headlines tragen ihren eigenen Rhythm */
}
.mod_newsreader .layout_full > *:last-child {
  margin-bottom: 0;
}

.mod_newsreader .content-image figure {
  margin: 0;
  text-align: center; /* zentriert kleine Bilder (Icons/QR-Codes) im breiten Spaltenfluss */
}
.mod_newsreader .content-image img {
  max-width: 100%;    /* nur grosse Bilder auf Container-Breite kappen, kleine in intrinsic Groesse */
  height: auto;
  border-radius: 4px;
}

.mod_newsreader figcaption {
  margin-top: 6px;
  padding: 0 4px;
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--rct-caption-color);
}

.mod_newsreader .content-list ul,
.mod_newsreader .content-list ol {
  margin: 0;
  padding-left: 1.5rem;
}
.mod_newsreader .content-list ul { list-style: disc; }
.mod_newsreader .content-list ol { list-style: decimal; }
.mod_newsreader .content-list li {
  margin-bottom: 0.4rem;
}
.mod_newsreader .content-list li:last-child {
  margin-bottom: 0;
}

/* Multi-Column-Infografik (gallery-CE mit cssClass rct-infografik):
   Auf Desktop nahtlos nebeneinander (sieht aus wie Original-PDF),
   auf Mobile <768px gestackt damit jede Sub-Spalte voll lesbar ist.
   BG-Color matcht typische Magazin-Infografik-Hintergrundfarbe und
   kaschiert leichten Pixel-Versatz zwischen Sub-Crops. CSS-Var
   ueberschreibbar pro Theme/Page falls eine Ausgabe abweichende
   BG-Color nutzt. */
.mod_newsreader .content-gallery.rct-infografik {
  background-color: var(--rct-infografik-bg, #f9f9f9);
}
.mod_newsreader .content-gallery.rct-infografik > ul,
.mod_newsreader .content-gallery.rct-infografik > div {
  display: grid;
  grid-template-columns: repeat(var(--rct-cols, 3), 1fr);
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mod_newsreader .content-gallery.rct-infografik li,
.mod_newsreader .content-gallery.rct-infografik figure {
  margin: 0;
  padding: 0;
  text-align: initial;
}
.mod_newsreader .content-gallery.rct-infografik img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
.mod_newsreader .content-gallery.rct-infografik figcaption {
  /* gallery rendert ggf. einzelne figcaptions pro Bild — die unterdruecken,
     die echte Gesamt-Caption kommt ueber das content-gallery-eigene caption */
  display: none;
}
.mod_newsreader .content-gallery.rct-infografik > .caption,
.mod_newsreader .content-gallery.rct-infografik > p.caption {
  margin-top: 6px;
  padding: 0 4px;
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--rct-caption-color);
}

/* Separate Caption fuer rct-infografik-Gallery: Contao rendert
   tl_content.caption beim gallery-CE nicht, daher hat
   contao-pdf-import nach jeder Gallery ein eigenes text-CE mit dieser
   Klasse. Look = figcaption. Direkter Geschwister-Selektor zum
   gallery-CE haelt den engen Margin (kein doppelter Abstand zu Block
   davor). */
.mod_newsreader .content-gallery.rct-infografik + .content-text.rct-infografik-caption,
.mod_newsreader .content-text.rct-infografik-caption {
  margin-top: 6px;
  padding: 0 4px;
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--rct-caption-color);
}
.mod_newsreader .content-text.rct-infografik-caption p {
  margin: 0;
}

/* Zurueck-Link am Ende der Newsreader-Detail-Page: Abstand zum letzten
   Content-Block, sonst klebt der Button am Text. */
.mod_newsreader .back {
  margin-top: 20px;
}

@media (max-width: 767px) {
  .mod_newsreader .content-gallery.rct-infografik > ul,
  .mod_newsreader .content-gallery.rct-infografik > div {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Text-Shadow Utilities
   ============================================================ */

.rct-ts-sm       { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.rct-ts-md       { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.rct-ts-lg       { text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); }
.rct-ts-glow     { text-shadow: 0 0 8px color-mix(in srgb, var(--rct-accent) 60%, transparent); }
.rct-ts-neon     { text-shadow:
                     0 0 4px currentColor,
                     0 0 12px currentColor,
                     0 0 24px color-mix(in srgb, var(--rct-accent) 70%, transparent); }
.rct-ts-readable { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9); }

/* ============================================================
   RCT – rct-customize.css
   Patch v3: Sidebar als Overlay, Content wächst/schrumpft
   ohne Compositing-Blitzer

   Strategie:
   - Sidebars sind reine Overlays (fixed, kein Layout-Einfluss)
   - #mainContainer bekommt padding-left/right statt margin
   - padding animiert auf der CPU, kein GPU-Layer-Rebuild
   - backdrop-filter auf .mod_article entfernt (Blitz-Ursache)
   ============================================================ */


body.mbj-reader .mod_article p {
  padding-bottom: 10px;
}

body.mbj-reader .mod_article p em {
  font-size: 14px;
  line-height: 18px;
}

/* ============================================================
   Theme: Honey Moon – Canvas-Hintergrundbild honeycombs.jpg
   ============================================================ */

[data-theme="honey-moon"] #gradient-canvas {
  background-image: url('../../bundles/rct/img/theme-bg-honey-moon.webp') !important;
  background-size: cover;
  background-position: center top;
  mask-image: none;
  -webkit-mask-image: none;
}

[data-theme="toxic-green"] #gradient-canvas {
  background-image: url('../../bundles/rct/img/theme-bg-toxic-green.webp') !important;
  background-size: cover;
  background-position: center top;
  mask-image: none;
  -webkit-mask-image: none;
}


/* ============================================================
   Theme: Sparta II – Vollständig helles Layout (schwarz auf weiss)
   ============================================================ */

/* Hintergründe: Shell, Container, Canvas */
[data-theme="sparta2"] #left::before,
[data-theme="sparta2"] #right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffffff !important;
  opacity: 1;
  z-index: -1;
  pointer-events: none;
}

[data-theme="sparta2"] #mainContainer {
  background-color: #ffffff !important;
}

[data-theme="sparta2"] #header,
[data-theme="sparta2"] #navbar,
[data-theme="sparta2"] .rct-navbar-bg {
  background: #ffffff !important;
  border-bottom-color: rgba(0, 0, 0, 0.10) !important;
}

/* Navigation: alle Bereiche (Sidebar L/R, Header, Navbar) */
[data-theme="sparta2"] nav ul li a,
[data-theme="sparta2"] .mod_navigation ul li a {
  color: #666666 !important;
  text-shadow: none !important;
}

[data-theme="sparta2"] nav ul li a:hover,
[data-theme="sparta2"] nav ul li.active > a,
[data-theme="sparta2"] nav ul li.trail > a,
[data-theme="sparta2"] .mod_navigation ul li a:hover,
[data-theme="sparta2"] .mod_navigation ul li.active > a,
[data-theme="sparta2"] .mod_navigation ul li.trail > a {
  color: #1a1a1a !important;
  background: rgba(0, 0, 0, 0.05) !important;
  text-shadow: none !important;
}

/* Navbar Level 1: aktive Linie + Dropdown-BGs */
[data-theme="sparta2"] #navbar .mod_navigation ul.level_1 > li > a:hover,
[data-theme="sparta2"] #navbar .mod_navigation ul.level_1 > li.trail > a,
[data-theme="sparta2"] #navbar .mod_navigation ul.level_1 > li.active > a {
  border-bottom-color: #1a1a1a !important;
}

[data-theme="sparta2"] #navbar .mod_navigation ul.level_1 > li > a::after {
  background: #1a1a1a !important;
}

[data-theme="sparta2"] #navbar .mod_navigation ul.level_2,
[data-theme="sparta2"] #navbar .mod_navigation ul.level_3,
[data-theme="sparta2"] #navbar .mod_navigation ul.level_4 {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
}

/* Theme- & Layout-Switcher */
[data-theme="sparta2"] .theme-trigger,
[data-theme="sparta2"] .layout-trigger {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: #1a1a1a !important;
}

[data-theme="sparta2"] .theme-trigger:hover,
[data-theme="sparta2"] .layout-trigger:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
}

[data-theme="sparta2"] .theme-dropdown,
[data-theme="sparta2"] .layout-dropdown {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="sparta2"] .theme-opt-btn,
[data-theme="sparta2"] .layout-opt-btn {
  color: #666666 !important;
}

[data-theme="sparta2"] .theme-opt-btn:hover,
[data-theme="sparta2"] .layout-opt-btn:hover,
[data-theme="sparta2"] .layout-opt-btn.is-active {
  color: #1a1a1a !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="sparta2"] .current-theme-name,
[data-theme="sparta2"] .current-layout-name {
  color: #1a1a1a !important;
}

/* Breadcrumb & Headerbereich */
[data-theme="sparta2"] nav.mod_breadcrumb,
[data-theme="sparta2"] nav.mod_breadcrumb ul li,
[data-theme="sparta2"] nav.mod_breadcrumb ul li a,
[data-theme="sparta2"] #headerTitle,
[data-theme="sparta2"] #headerTitle h2 {
  color: #666666 !important;
}


/* ============================================================
   Erweiterung-overwrites
   ============================================================ */

.mod_c4g_maps .c4g-sideboard {
  background-color: var(--rct-shell-bg);
  color: var(--rct-primary-light);
}

.mod_c4g_maps .c4g-starboard-headline {
  color: var(--rct-primary-light) !important;
}

.mod_c4g_maps .ol-control button {
  color: var(--rct-primary-light);
  background-color: var(--rct-shell-bg);
  background-image: none;
}

/* ============================================================
 * RCT Soft Edition Themes
 * Familien-Pattern: gemeinsame Base + 4 Akzent-Overrides.
 * Spec: docs/superpowers/specs/2026-05-13-rct-soft-edition-design.md
 * ============================================================ */

/* === Gemeinsame Soft-Base — überschreibt globale Tokens ===
 * Greift für alle Themes deren Slug mit "soft-" beginnt. */
[data-theme^="soft-"] {
  --rct-bg: #fafaf6;
  --rct-text: #2a2a28;
  --rct-text-muted: #6e6e68;
  --rct-radius: 0.25rem;
  --rct-radius-lg: 0.5rem;
  --rct-radius-xl: 1rem;
  --rct-section-padding-y: 5rem;
  --rct-shadow-soft: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.04);
  /* DM Mono raus — Mono-Slot zeigt auf Body-Font */
  --rct-font-mono: var(--rct-font-body);
  /* Hell-Färbung Step 1: Shell (Header, Bottom, Sidebars) folgt dem Theme-BG-Tint */
  --rct-shell-bg: var(--rct-bg);
  /* Step 2: Shell-Text + Border auf dunkel-passend (Default ist white/white-transparent für Dark-Themes) */
  --rct-shell-text: var(--rct-text);
  --rct-shell-muted: var(--rct-text-muted);
  --rct-shell-border: rgba(0,0,0,0.08);
  /* Step 4: Sidebar-Pseudo-Overlay deckender — Restschimmer der Aurora unterdrücken */
  --rct-sidebar-alpha: 0.9;
}

/* Text-Shadow auf Sidebar-Menü-Links für Soft-Themes entfernen.
 * Default ist `0 1px 6px rgba(0,0,0,0.9)` — schwarz-glow für weißen Text auf dunkel.
 * Bei dunklem Text auf hell verschmiert das Schwarz-Glow alles. */
[data-theme^="soft-"] #left nav ul li a,
[data-theme^="soft-"] #left .mod_navigation ul li a,
[data-theme^="soft-"] #right nav ul li a,
[data-theme^="soft-"] #right .mod_navigation ul li a {
  text-shadow: none;
}

/* Step 3: Theme-Switcher + Layout-Switcher für Soft-Themes.
 * Default-Stylesheet (rct-components.css) hardcoded weiße rgba-Werte für Dark-Themes —
 * Trigger-BG `rgba(255,255,255,0.05)`, Dropdown-BG `#1a1a1a`, Text `#fff`.
 * Für Soft-Themes spiegeln wir das ins Dunkel-auf-Hell. */
[data-theme^="soft-"] .theme-trigger,
[data-theme^="soft-"] .layout-trigger {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.10);
  color: var(--rct-text);
}
[data-theme^="soft-"] .theme-trigger:hover,
[data-theme^="soft-"] .layout-trigger:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.18);
}
[data-theme^="soft-"] .theme-dropdown,
[data-theme^="soft-"] .layout-dropdown {
  background: var(--rct-bg);
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
[data-theme^="soft-"] .theme-opt-btn,
[data-theme^="soft-"] .layout-opt-btn {
  color: var(--rct-text-muted);
}
[data-theme^="soft-"] .theme-opt-btn:hover,
[data-theme^="soft-"] .layout-opt-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--rct-text);
}

/* Sidebar-Logo-Box für Soft-Themes — leichte Tönung + Trennlinie. */
[data-theme^="soft-"] #left .rct-sidebar-logo,
[data-theme^="soft-"] #right .rct-sidebar-logo {
  padding: 1rem;
  border-top: 1px solid var(--rct-shell-border);
  background-color: rgba(0,0,0,0.05);
}

/* Fullscreen-Mode überschreibt header-icon-btn auf hardcoded #fff
 * (siehe rct-layout.css:796) — für Soft-Themes auf dunkel zurückholen. */
[data-theme^="soft-"]:fullscreen .header-icon-btn,
:fullscreen [data-theme^="soft-"] .header-icon-btn {
  color: var(--rct-text);
}

/* Hauptnavigation Submenu-Dropdowns (Level 2/3/4) — Default hardcoded #1a1a1a
 * in rct-layout.css:1039/1074/1116 — für Soft-Themes auf Theme-BG-Tint. */
[data-theme^="soft-"] #navbar .mod_navigation ul.level_2,
[data-theme^="soft-"] #navbar .mod_navigation ul.level_3,
[data-theme^="soft-"] #navbar .mod_navigation ul.level_4 {
  background: var(--rct-bg);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Sprachschalter — analog zum Theme-/Layout-Switcher. */
[data-theme^="soft-"] .lang-trigger {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.10);
  color: var(--rct-text);
}
[data-theme^="soft-"] .lang-trigger:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.18);
}
[data-theme^="soft-"] .lang-dropdown {
  background: var(--rct-bg);
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
[data-theme^="soft-"] .lang-opt-btn {
  color: var(--rct-text-muted);
}
[data-theme^="soft-"] .lang-opt-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--rct-text);
}

/* Body-BG tint pro Theme (überschreibt --rct-bg in der Variant-Section unten) */
[data-theme^="soft-"] body {
  background-color: var(--rct-bg);
  color: var(--rct-text);
}

/* === Akzent-Overrides pro Theme === */

[data-theme="soft-sage"] {
  --rct-bg: #f5f7f0;
  --rct-accent: #7a9070;
  --rct-accent-rgb: 122,144,112;
  --rct-accent-strong: #5d7256;
  --rct-accent-soft: rgba(122,144,112,0.12);
  --rct-text-on-accent: #ffffff;
  /* Bundle-weit verwendete Primary-Tokens (Menü, Links, Hover) */
  --rct-primary: #5d7256;
  --rct-primary-light: #7a9070;
  --rct-primary-container: rgba(122,144,112,0.12);
  /* Aurora-Gradienten in Salbei-Tönen — übergangsweise bis WebGL Mode 19 in v1.7.1 */
  --grad-1: #7a9070;
  --grad-2: #5d7256;
  --grad-3: #b8c8a8;
  --grad-4: #f5f7f0;
}

[data-theme="soft-sky"] {
  --rct-bg: #f3f6fa;
  --rct-accent: #6a92b8;
  --rct-accent-rgb: 106,146,184;
  --rct-accent-strong: #4f7395;
  --rct-accent-soft: rgba(106,146,184,0.12);
  --rct-text-on-accent: #ffffff;
  --rct-primary: #4f7395;
  --rct-primary-light: #6a92b8;
  --rct-primary-container: rgba(106,146,184,0.12);
}

[data-theme="soft-honey"] {
  --rct-bg: #faf6ee;
  --rct-accent: #c89a4e;
  --rct-accent-rgb: 200,154,78;
  --rct-accent-strong: #a17a32;
  --rct-accent-soft: rgba(200,154,78,0.14);
  --rct-text-on-accent: #ffffff;
  --rct-primary: #a17a32;
  --rct-primary-light: #c89a4e;
  --rct-primary-container: rgba(200,154,78,0.14);
}

[data-theme="soft-rose"] {
  --rct-bg: #faf3f3;
  --rct-accent: #b88a8a;
  --rct-accent-rgb: 184,138,138;
  --rct-accent-strong: #966a6a;
  --rct-accent-soft: rgba(184,138,138,0.13);
  --rct-text-on-accent: #ffffff;
  --rct-primary: #966a6a;
  --rct-primary-light: #b88a8a;
  --rct-primary-container: rgba(184,138,138,0.13);
}

/* === Animationen — nur dezent, alle deaktiviert via prefers-reduced-motion === */

/* soft-sky: Akzent-Glow auf interaktiven Elementen */
[data-theme="soft-sky"] .rct-cta-primary,
[data-theme="soft-sky"] button.theme-trigger {
  box-shadow: 0 0 0 0 var(--rct-accent-soft);
  transition: box-shadow 0.6s ease;
}
[data-theme="soft-sky"] .rct-cta-primary:hover,
[data-theme="soft-sky"] button.theme-trigger:hover {
  box-shadow: 0 0 0 8px var(--rct-accent-soft);
}

/* soft-honey: sehr langsamer BG-Gradient-Shift (60s pro Cycle) */
[data-theme="soft-honey"] body {
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(200,154,78,0.05), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(200,154,78,0.04), transparent 50%);
  background-size: 200% 200%;
  animation: rct-soft-honey-drift 60s ease-in-out infinite alternate;
}
@keyframes rct-soft-honey-drift {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}

/* soft-rose: atmender Akzent-Glow */
[data-theme="soft-rose"] .rct-accent-mark,
[data-theme="soft-rose"] .opt-dot.soft-rose {
  animation: rct-soft-rose-breathe 6s ease-in-out infinite;
}
@keyframes rct-soft-rose-breathe {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* === Tech-Canvas-Stack ausblenden für die 3 statischen Soft-Themes ===
 * soft-sage behält den Standard-Aurora-Canvas als Übergang bis WebGL Mode 19 (v1.7.1).
 * sky/honey/rose sind CSS-only — die cyan-tech-Aurora und das Dots-Punktefeld
 * passen optisch nicht zum ruhigen Coach-Look.
 *
 * Beide Properties (display + opacity) gesetzt + is-visible-Variante mit
 * im Selektor: #gradient-canvas.is-visible hat opacity:0.95 !important (Spec 110)
 * — wir brauchen Spec 131 um es robust zu schlagen, sonst blitzt's beim
 * Theme-Wechsel kurz durch. */
[data-theme^="soft-"]:not([data-theme="soft-sage"]) #gradient-canvas,
[data-theme^="soft-"]:not([data-theme="soft-sage"]) #gradient-canvas.is-visible,
[data-theme^="soft-"]:not([data-theme="soft-sage"]) #rct-effects-canvas,
[data-theme^="soft-"]:not([data-theme="soft-sage"]) #rct-dots-canvas,
[data-theme^="soft-"]:not([data-theme="soft-sage"]) #rct-sky-canvas,
[data-theme^="soft-"]:not([data-theme="soft-sage"]) #rct-baker-bg {
  display: none !important;
  opacity: 0 !important;
}

/* === Accessibility: alle Soft-Animationen pausieren === */
@media (prefers-reduced-motion: reduce) {
  [data-theme^="soft-"] * {
    animation: none !important;
    transition: none !important;
  }
}

/* === Theme-Switcher-Dot-Farben ===
 * opt-dot = Vorschau-Punkte im Dropdown,
 * current-theme-dot = der eine Punkt im Trigger-Button (zeigt das aktive Theme). */
.current-theme-dot.soft-sage,
.opt-dot.soft-sage  { background: #7a9070; }
.current-theme-dot.soft-sky,
.opt-dot.soft-sky   { background: #6a92b8; }
.current-theme-dot.soft-honey,
.opt-dot.soft-honey { background: #c89a4e; }
.current-theme-dot.soft-rose,
.opt-dot.soft-rose  { background: #b88a8a; }

/* ============================================================
 * RCT Owl — customization stylesheet. NOT part of the RCT bundle.
 * Wired into a Contao instance via the layout's "external CSS" field.
 * Every rule is gated on html.rct-owl-on, which rct-owl.js sets only
 * when the active data-theme is in RCT_OWL_CONFIG.themes.
 * ============================================================ */

/* Pre-injection: hide the original logo content so there is no flash of
 * the default RCT logo between the controller setting .rct-owl-on (at script
 * parse time) and injecting the inline SVG (at DOMContentLoaded). Once the
 * owl is injected it is the only child, so this rule then matches nothing. */
html.rct-owl-on #left .rct-logo-link > *:not(.rct-owl),
html.rct-owl-on #right .rct-logo-link > *:not(.rct-owl) {
  visibility: hidden;
}

/* The injected inline owl. */
html.rct-owl-on .rct-owl {
  display: block;
  width: 100%;
  max-width: 100px;
  height: auto;
  margin: auto;
  overflow: visible;            /* head-tilt must not clip */
  transform-origin: 50% 95%;    /* tilt pivots around the owl's base */
  transition: transform .25s ease;
  cursor: pointer;
}

/* Accent layer follows the active soft-theme accent; body/eyes/pupils fixed. */
html.rct-owl-on .rct-owl .owl-accent { fill: var(--rct-accent); }
html.rct-owl-on .rct-owl .owl-body   { fill: #fbfafa; }
html.rct-owl-on .rct-owl .owl-eye    { fill: #262625; }
html.rct-owl-on .rct-owl .owl-pupil  { fill: #fbfafa; }

/* Eye band: blink + both sleep depths are a scaleY around the eye centre. */
html.rct-owl-on .rct-owl .owl-eyes {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .12s ease;
}
html.rct-owl-on .rct-owl .owl-eyes.is-blinking    { transform: scaleY(.08); }
html.rct-owl-on .rct-owl.is-sleepy-half .owl-eyes { transform: scaleY(.45); }
html.rct-owl-on .rct-owl.is-sleepy-full .owl-eyes { transform: scaleY(.06); }

/* Per-eye group: the click-wink scaleY's a single eye. */
html.rct-owl-on .rct-owl .owl-eye-group {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .12s ease;
}
html.rct-owl-on .rct-owl .owl-eye-group.is-winking { transform: scaleY(.08); }

/* Accessibility: no transitions when the user asked for reduced motion.
 * The controller additionally stays dormant — see rct-owl-controller.js. */
@media (prefers-reduced-motion: reduce) {
  html.rct-owl-on .rct-owl,
  html.rct-owl-on .rct-owl .owl-eyes,
  html.rct-owl-on .rct-owl .owl-eye-group {
    transition: none;
  }
}