/* ==========================================================================
   JoomION Template – template.css
   Joomla 6 kompatibel | Version 1.0.0
   ========================================================================== */

/* ── CSS Custom Properties (Standardwerte – werden via PHP überschrieben) ── */
:root {
    --ji-primary:       #1f6fad;
    --ji-secondary:     #2d3748;
    --ji-accent:        #e53e3e;
    --ji-bg:            #f8f9fa;
    --ji-text:          #333333;
    --ji-header-bg:     #1a202c;
    --ji-header-text:   #ffffff;
    --ji-footer-bg:     #1a202c;
    --ji-footer-text:   #cccccc;
    --ji-link:          #1f6fad;
    --ji-link-hover:    #154f7c;
    --ji-font-body:     system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ji-font-heading:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ji-font-size:     16px;
    --ji-line-height:   1.6;
    --ji-container:     1280px;
    --ji-radius:        6px;
    --ji-radius-lg:     12px;
    --ji-gap:         1.25rem;
    --ji-shadow:        0 2px 8px rgba(0,0,0,.12);
    --ji-shadow-lg:     0 8px 24px rgba(0,0,0,.16);
    --ji-transition:    .2s ease;
    --ji-header-h:      72px;
    --ji-topbar-h:      40px;
    --ji-spacing:       1.5rem;
    --ji-section-py:    3.5rem;
}

/* ── Vordefinierte Farbschemata ────────────────────────────────────────────── */
/* ── Farbschema: Dunkel (Standard-Dark) ────────────────────────────────────── */
.joomion-scheme-joomion-dark {
    --ji-primary:      #bb86fc;
    --ji-secondary:    #03dac6;
    --ji-accent:       #cf6679;
    --ji-bg:           #121212;
    --ji-text:         #e0e0e0;
    --ji-header-bg:    #1e1e1e;
    --ji-header-text:  #ffffff;
    --ji-footer-bg:    #1e1e1e;
    --ji-footer-text:  #b0b0b0;
    --ji-link:         #bb86fc;
    --ji-link-hover:   #d7b0fd;
}
/* ── Farbschema: Gelb ──────────────────────────────────────────────────────── */
.joomion-scheme-joomion-yellow {
    --ji-primary:      #d97706;
    --ji-secondary:    #b45309;
    --ji-accent:       #dc2626;
    --ji-bg:           #fffbeb;
    --ji-text:         #1c1917;
    --ji-header-bg:    #78350f;
    --ji-header-text:  #fef3c7;
    --ji-footer-bg:    #78350f;
    --ji-footer-text:  #fde68a;
    --ji-link:         #d97706;
    --ji-link-hover:   #92400e;
}

/* ── Farbschema: Rot ───────────────────────────────────────────────────────── */
.joomion-scheme-joomion-red {
    --ji-primary:      #dc2626;
    --ji-secondary:    #9f1239;
    --ji-accent:       #f59e0b;
    --ji-bg:           #fff1f2;
    --ji-text:         #1c1917;
    --ji-header-bg:    #450a0a;
    --ji-header-text:  #fee2e2;
    --ji-footer-bg:    #450a0a;
    --ji-footer-text:  #fca5a5;
    --ji-link:         #dc2626;
    --ji-link-hover:   #b91c1c;
}

/* ── Farbschema: Blau ──────────────────────────────────────────────────────── */
.joomion-scheme-joomion-blue {
    --ji-primary:      #1d4ed8;
    --ji-secondary:    #1e40af;
    --ji-accent:       #f59e0b;
    --ji-bg:           #eff6ff;
    --ji-text:         #1e293b;
    --ji-header-bg:    #1e3a8a;
    --ji-header-text:  #dbeafe;
    --ji-footer-bg:    #1e3a8a;
    --ji-footer-text:  #bfdbfe;
    --ji-link:         #2563eb;
    --ji-link-hover:   #1d4ed8;
}

/* ── Farbschema: Schwarz ───────────────────────────────────────────────────── */
.joomion-scheme-joomion-black {
    --ji-primary:      #9ca3af;
    --ji-secondary:    #6b7280;
    --ji-accent:       #f59e0b;
    --ji-bg:           #0a0a0a;
    --ji-text:         #e5e7eb;
    --ji-header-bg:    #000000;
    --ji-header-text:  #f9fafb;
    --ji-footer-bg:    #111111;
    --ji-footer-text:  #9ca3af;
    --ji-link:         #d1d5db;
    --ji-link-hover:   #ffffff;
}

/* ── Farbschema: Grau ──────────────────────────────────────────────────────── */
.joomion-scheme-joomion-gray {
    --ji-primary:      #4b5563;
    --ji-secondary:    #374151;
    --ji-accent:       #3b82f6;
    --ji-bg:           #f9fafb;
    --ji-text:         #111827;
    --ji-header-bg:    #1f2937;
    --ji-header-text:  #f3f4f6;
    --ji-footer-bg:    #111827;
    --ji-footer-text:  #d1d5db;
    --ji-link:         #4b5563;
    --ji-link-hover:   #1f2937;
}

/* ── Farbschema: Grün ──────────────────────────────────────────────────────── */
.joomion-scheme-joomion-green {
    --ji-primary:      #16a34a;
    --ji-secondary:    #15803d;
    --ji-accent:       #f59e0b;
    --ji-bg:           #f0fdf4;
    --ji-text:         #14532d;
    --ji-header-bg:    #14532d;
    --ji-header-text:  #dcfce7;
    --ji-footer-bg:    #052e16;
    --ji-footer-text:  #bbf7d0;
    --ji-link:         #16a34a;
    --ji-link-hover:   #15803d;
}

/* ── Farbschema: Orange ────────────────────────────────────────────────────── */
.joomion-scheme-joomion-orange {
    --ji-primary:      #ea580c;
    --ji-secondary:    #c2410c;
    --ji-accent:       #7c3aed;
    --ji-bg:           #fff7ed;
    --ji-text:         #1c1917;
    --ji-header-bg:    #431407;
    --ji-header-text:  #fed7aa;
    --ji-footer-bg:    #431407;
    --ji-footer-text:  #fdba74;
    --ji-link:         #ea580c;
    --ji-link-hover:   #c2410c;
}

/* ── Farbschema: Weiß ──────────────────────────────────────────────────────── */
.joomion-scheme-joomion-white {
    --ji-primary:      #1d4ed8;
    --ji-secondary:    #374151;
    --ji-accent:       #dc2626;
    --ji-bg:           #ffffff;
    --ji-text:         #111827;
    --ji-header-bg:    #f8fafc;
    --ji-header-text:  #111827;
    --ji-footer-bg:    #f1f5f9;
    --ji-footer-text:  #374151;
    --ji-link:         #1d4ed8;
    --ji-link-hover:   #1e40af;
}
/* Weiß: Header-Border für sichtbare Abgrenzung */
.joomion-scheme-joomion-white .ji-header {
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.joomion-scheme-joomion-white .ji-brand-link { color: #111827; }
.joomion-scheme-joomion-white .ji-site-name  { color: #111827; }

/* ── Farbschema: Lila (Purple) ──────────────────────────────────────────────── */
.joomion-scheme-joomion-purple {
    --ji-primary:      #7c3aed;
    --ji-secondary:    #6d28d9;
    --ji-accent:       #ec4899;
    --ji-bg:           #faf5ff;
    --ji-text:         #1e1b4b;
    --ji-header-bg:    #2e1065;
    --ji-header-text:  #ede9fe;
    --ji-footer-bg:    #1e0a3c;
    --ji-footer-text:  #ddd6fe;
    --ji-link:         #7c3aed;
    --ji-link-hover:   #6d28d9;
}

/* ── Farbschema: Pink ───────────────────────────────────────────────────────── */
.joomion-scheme-joomion-pink {
    --ji-primary:      #ec4899;
    --ji-secondary:    #db2777;
    --ji-accent:       #8b5cf6;
    --ji-bg:           #fdf2f8;
    --ji-text:         #500724;
    --ji-header-bg:    #831843;
    --ji-header-text:  #fce7f3;
    --ji-footer-bg:    #500724;
    --ji-footer-text:  #fbcfe8;
    --ji-link:         #ec4899;
    --ji-link-hover:   #db2777;
}

/* ── Farbschema: Türkis ─────────────────────────────────────────────────────── */
.joomion-scheme-joomion-turquoise {
    --ji-primary:      #0d9488;
    --ji-secondary:    #0f766e;
    --ji-accent:       #f59e0b;
    --ji-bg:           #f0fdfa;
    --ji-text:         #134e4a;
    --ji-header-bg:    #134e4a;
    --ji-header-text:  #ccfbf1;
    --ji-footer-bg:    #042f2e;
    --ji-footer-text:  #99f6e4;
    --ji-link:         #0d9488;
    --ji-link-hover:   #0f766e;
}

/* ── Farbschema: Braun ──────────────────────────────────────────────────────── */
.joomion-scheme-joomion-brown {
    --ji-primary:      #92400e;
    --ji-secondary:    #78350f;
    --ji-accent:       #d97706;
    --ji-bg:           #fefce8;
    --ji-text:         #1c1917;
    --ji-header-bg:    #431407;
    --ji-header-text:  #fed7aa;
    --ji-footer-bg:    #27110a;
    --ji-footer-text:  #fde68a;
    --ji-link:         #92400e;
    --ji-link-hover:   #78350f;
}

/* ── Farbschema: Rosa ───────────────────────────────────────────────────────── */
.joomion-scheme-joomion-rose {
    --ji-primary:      #e11d48;
    --ji-secondary:    #be185d;
    --ji-accent:       #7c3aed;
    --ji-bg:           #fff1f2;
    --ji-text:         #1c1917;
    --ji-header-bg:    #881337;
    --ji-header-text:  #ffe4e6;
    --ji-footer-bg:    #4c0519;
    --ji-footer-text:  #fecdd3;
    --ji-link:         #e11d48;
    --ji-link-hover:   #be185d;
}

/* ── Farbschema: Magenta ────────────────────────────────────────────────────── */
.joomion-scheme-joomion-magenta {
    --ji-primary:      #c026d3;
    --ji-secondary:    #a21caf;
    --ji-accent:       #f59e0b;
    --ji-bg:           #fdf4ff;
    --ji-text:         #3b0764;
    --ji-header-bg:    #4a044e;
    --ji-header-text:  #f5d0fe;
    --ji-footer-bg:    #2e1065;
    --ji-footer-text:  #e879f9;
    --ji-link:         #c026d3;
    --ji-link-hover:   #a21caf;
}

/* ── Farbschema: Joomla ─────────────────────────────────────────────────────── */
/* Offizielle Joomla-Farben: Blau #003d79, Orange #f0a500, Dunkelblau #002d5a */
.joomion-scheme-joomion-joomla {
    --ji-primary:      #0088cc;
    --ji-secondary:    #003d79;
    --ji-accent:       #f0a500;
    --ji-bg:           #f4f7fa;
    --ji-text:         #1a2b3c;
    --ji-header-bg:    #002d5a;
    --ji-header-text:  #e8f4fd;
    --ji-footer-bg:    #001d3d;
    --ji-footer-text:  #7ec8e3;
    --ji-link:         #0088cc;
    --ji-link-hover:   #006699;
}


/* ── Reset & Basis ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: var(--ji-font-size);
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--ji-bg);
    color: var(--ji-text);
    font-family: var(--ji-font-body);
    line-height: var(--ji-line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ji-font-heading);
    font-weight: 700;
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: .75rem;
    color: var(--ji-text);
}
h1 { font-size: var(--ji-h1-size, 2rem);   color: var(--ji-h1-color, var(--ji-text)); font-weight: var(--ji-h1-weight, 700); font-style: var(--ji-h1-style, normal); text-decoration: var(--ji-h1-decoration, none); font-family: var(--ji-h1-font-family, var(--ji-font-body)); }
h2 { font-size: var(--ji-h2-size, 1.75rem); color: var(--ji-h2-color, var(--ji-text)); font-weight: var(--ji-h2-weight, 700); font-style: var(--ji-h2-style, normal); text-decoration: var(--ji-h2-decoration, none); font-family: var(--ji-h2-font-family, var(--ji-font-body)); }
h3 { font-size: var(--ji-h3-size, 1.5rem);  color: var(--ji-h3-color, var(--ji-text)); font-weight: var(--ji-h3-weight, 700); font-style: var(--ji-h3-style, normal); text-decoration: var(--ji-h3-decoration, none); font-family: var(--ji-h3-font-family, var(--ji-font-body)); }
h4 { font-size: var(--ji-h4-size, 1.25rem); color: var(--ji-h4-color, var(--ji-text)); font-weight: var(--ji-h4-weight, 700); font-style: var(--ji-h4-style, normal); text-decoration: var(--ji-h4-decoration, none); font-family: var(--ji-h4-font-family, var(--ji-font-body)); }
h5 { font-size: var(--ji-h5-size, 1.1rem);  color: var(--ji-h5-color, var(--ji-text)); font-weight: var(--ji-h5-weight, 700); font-style: var(--ji-h5-style, normal); text-decoration: var(--ji-h5-decoration, none); font-family: var(--ji-h5-font-family, var(--ji-font-body)); }
h6 { font-size: var(--ji-h6-size, 1rem);    color: var(--ji-h6-color, var(--ji-text)); font-weight: var(--ji-h6-weight, 700); font-style: var(--ji-h6-style, normal); text-decoration: var(--ji-h6-decoration, none); font-family: var(--ji-h6-font-family, var(--ji-font-body)); }
/* Links INNERHALB von Überschriften – eigene Farbe + Hover je H-Ebene (leer = globale Linkfarbe) */
h1 a { color: var(--ji-h1-link, var(--ji-link)); }
h2 a { color: var(--ji-h2-link, var(--ji-link)); }
h3 a { color: var(--ji-h3-link, var(--ji-link)); }
h4 a { color: var(--ji-h4-link, var(--ji-link)); }
h5 a { color: var(--ji-h5-link, var(--ji-link)); }
h6 a { color: var(--ji-h6-link, var(--ji-link)); }
h1 a:hover { color: var(--ji-h1-link-hover, var(--ji-link-hover)); }
h2 a:hover { color: var(--ji-h2-link-hover, var(--ji-link-hover)); }
h3 a:hover { color: var(--ji-h3-link-hover, var(--ji-link-hover)); }
h4 a:hover { color: var(--ji-h4-link-hover, var(--ji-link-hover)); }
h5 a:hover { color: var(--ji-h5-link-hover, var(--ji-link-hover)); }
h6 a:hover { color: var(--ji-h6-link-hover, var(--ji-link-hover)); }

a {
    color: var(--ji-link);
    text-decoration: none;
    transition: color var(--ji-transition);
}
a:hover,
a:focus-visible {
    color: var(--ji-link-hover);
    text-decoration: underline;
}
a:focus-visible {
    outline: 3px solid var(--ji-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

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

/* ── Wrapper / Container ───────────────────────────────────────────────────── */
.ji-wrapper-fluid,
.ji-wrapper-container {
    width: 100%;
    max-width: var(--ji-container);
    margin-inline: auto;
    padding-inline: var(--ji-spacing);
}
.ji-wrapper-fullwidth {
    width: 100%;
    padding-inline: var(--ji-spacing);
}

/* ── Grid / Layout ─────────────────────────────────────────────────────────── */
.ji-grid {
    display: grid;
    gap: var(--ji-spacing);
}
.ji-grid--2  { grid-template-columns: repeat(2, 1fr); }
.ji-grid--3  { grid-template-columns: repeat(3, 1fr); }
.ji-grid--4  { grid-template-columns: repeat(4, 1fr); }

.ji-content-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ji-spacing);
    align-items: flex-start;
}

/* Spalten-Klassen */
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-2  { flex: 0 0 16.667%; max-width: 16.667%; }
.col-3  { flex: 0 0 25%; max-width: 25%; }
.col-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.col-6  { flex: 0 0 50%; max-width: 50%; }
.col-8  { flex: 0 0 66.667%; max-width: 66.667%; }
.col-9  { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333%; max-width: 83.333%; }

/* ── Topbar ────────────────────────────────────────────────────────────────── */
.ji-topbar {
    background-color: var(--ji-topbar-bg, var(--ji-secondary));
    color: var(--ji-topbar-text, var(--ji-header-text));
    font-family: var(--ji-topbar-font-family, inherit);
    font-size: var(--ji-topbar-font-size, .85rem);
    font-weight: var(--ji-topbar-weight, inherit);
    font-style: var(--ji-topbar-style, normal);
    min-height: var(--ji-topbar-h);
}
.ji-topbar a {
    color: var(--ji-topbar-text, var(--ji-header-text));
    text-decoration: var(--ji-topbar-decoration, none);
}
.ji-topbar a:hover {
    color: var(--ji-topbar-text-hover, var(--ji-primary));
    text-decoration: var(--ji-topbar-decoration, none);
}
/* Topbar zweigeteilt: topbar-left | topbar-right nebeneinander */
.ji-topbar .ji-flex-row { justify-content: space-between; align-items: center; }
.ji-topbar [data-position="topbar-left"]  { text-align: left; }
.ji-topbar [data-position="topbar-right"] { text-align: right; margin-inline-start: auto; }

/* ── Header ────────────────────────────────────────────────────────────────── */
.ji-header {
    background-color: var(--ji-header-bg);
    color: var(--ji-header-text);
    min-height: var(--ji-header-h);
    position: relative;
    z-index: 100;
    font-family: var(--ji-header-font-family, inherit);
    font-size: var(--ji-header-font-size, inherit);
    font-weight: var(--ji-header-weight, inherit);
    font-style: var(--ji-header-style, normal);
    /* "Ganzen Text unterstreichen" – unterstreicht den gesamten Header-Text (nicht nur Links). */
    text-decoration: var(--ji-header-decoration-all, none);
}
/* Header-Links + Text-Hover (Mainmenü-Regeln bleiben durch höhere Spezifität aktiv) */
.ji-header a {
    color: var(--ji-header-link, var(--ji-header-text, inherit));
    text-decoration: var(--ji-header-decoration, none);
}
.ji-header a:hover {
    color: var(--ji-header-link-hover, var(--ji-primary));
    text-decoration: var(--ji-header-decoration, none);
}
.ji-brand-link:hover,
.ji-header .ji-site-name:hover { color: var(--ji-header-text-hover, var(--ji-primary)); }
/* Sticky-Wrapper: umfasst Header-Zeile + direkt folgendes Hauptmenü und klebt
   gemeinsam oben. position:sticky hält den Platz im Fluss (kein JS-Padding nötig),
   die darüberstehende Topbar scrollt normal weg. */
.ji-header--sticky {
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: var(--ji-shadow-lg);
    background-color: var(--ji-header-bg);
}
.ji-header--sticky .ji-header { box-shadow: none; }
.ji-header-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: var(--ji-header-h);
    flex-wrap: wrap;
}

/* Logo / Brand */
.ji-brand-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    flex-shrink: 0;
}
.ji-logo-img {
    /* Höhe kommt als CSS-Variable aus den Template-Optionen (--ji-logo-h, inline gesetzt).
       Dadurch kann sie responsiv proportional skalieren (Inline-height würde das verhindern). */
    height: var(--ji-logo-h, 60px);
    width: auto;
    max-width: 100%;        /* auf sehr schmalen Screens nie breiter als der Container */
    display: block;
    object-fit: contain;    /* Seitenverhältnis bleibt erhalten */
}
/* Logo verkleinert sich responsiv im Verhältnis zur eingestellten Höhe */
@media (max-width: 991.98px) { .ji-logo-img { height: calc(var(--ji-logo-h, 60px) * .85); } }
@media (max-width: 575.98px) { .ji-logo-img { height: calc(var(--ji-logo-h, 60px) * .68); } }
@media (max-width: 360px)    { .ji-logo-img { height: calc(var(--ji-logo-h, 60px) * .58); } }
.ji-site-name {
    font-family: var(--ji-font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ji-header-text);
    white-space: nowrap;
}

/* Header-Module */
.ji-header-modules {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ── Navigation ────────────────────────────────────────────────────────────── */
.ji-nav {
    display: flex;
    align-items: center;
    flex: 1;
    background: var(--ji-nav-bg, transparent);
    border-style: var(--ji-nav-border-style, none);
    border-color: var(--ji-nav-border-color, transparent);
    border-width: var(--ji-nav-border-width, 0);
    border-radius: var(--ji-nav-border-radius, 0);
    padding-top: var(--ji-nav-pad-top, 0);
    padding-bottom: var(--ji-nav-pad-bottom, 0);
}
/* Menüleiste über die volle Bildschirmbreite (Breakout aus dem Container) */
body.ji-navwidth-full .ji-nav {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: max(1rem, calc(50vw - 50% ));
}
.ji-nav-toggle {
    display: none;
    background: transparent;
    border: 2px solid var(--ji-header-text);
    border-radius: var(--ji-radius);
    padding: .4rem .6rem;
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
    margin-inline-start: auto;
}
.ji-burger {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ji-header-text);
    transition: transform var(--ji-transition), opacity var(--ji-transition);
}
.ji-nav-menu {
    display: flex;
    align-items: center;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Joomla-Menü Override für Header-Kontext */
.ji-header .nav-item > .nav-link,
.ji-header .ji-nav-menu > li > a {
    color: var(--ji-header-text) !important;
    padding: .5rem .9rem;
    border-radius: var(--ji-radius);
    transition: background var(--ji-transition), color var(--ji-transition);
    white-space: nowrap;
}
.ji-header .nav-item > .nav-link:hover,
.ji-header .ji-nav-menu > li > a:hover,
.ji-header .nav-item.active > .nav-link,
.ji-header .current > a {
    background: rgba(255,255,255,.15) !important;
    color: var(--ji-header-text) !important;
    text-decoration: none;
}

/* ── Hauptmenü: anpassbar über Template-Stil → Farben → Hauptmenü ──────────── */
.ji-nav-menu {
    /* Container: KEIN eigener Hintergrund/Rahmen/Innenabstand mehr – Hintergrund,
       Rahmen und Hover werden je Menüpunkt (a/.nav-link) gesetzt, damit jeder
       Punkt einzeln behandelt wird. */
    margin: var(--ji-mainmenu-margin, 0);
    justify-content: center;            /* Menüpunkte mittig in der Box */
}
/* Joomla-Menüliste zurücksetzen: KEINE Standard-Aufzählungszeichen / -Einrückung.
   Verhindert den dauerhaft sichtbaren Bullet, die linke Einrückung und – zusammen
   mit dem ::before-Marker – doppelte Listenzeichen. */
.ji-nav-menu ul { list-style: none; margin: 0; padding: 0; }
.ji-nav-menu li { list-style: none; }
/* Joomlas natives Toggle-Button-Element (fuer Tap-to-Open bei Touch-Bedienung)
   wird von mod_menu automatisch bei jedem Menüpunkt MIT Untermenü zusätzlich
   zum <a>-Link eingefügt – unstyled nimmt es mit Standard-Button-Optik echten
   Platz im Menüpunkt ein und machte ausgerechnet DIESEN Punkt breiter (dadurch
   wirkte der Abstand zum nächsten Hauptmenüpunkt größer). Das Hauptmenü öffnet
   Untermenüs bereits per Hover/Fokus (siehe unten) und braucht den Button nicht;
   im Off-Canvas-Menü ist er analog bereits ausgeblendet (.ji-oc-nav Regel). */
.ji-nav-menu .mod-menu__toggle-sub { display: none !important; }
.ji-nav-menu > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;            /* mittig in der Box */
    gap: var(--ji-mainmenu-item-gap, .35rem);  /* Abstand zwischen den Menüpunkten */
    width: 100%;
}
/* Schriftart / -größe / -stil / -farbe der Menülinks */
.ji-nav-menu a,
.ji-nav-menu .nav-link {
    display: inline-block;
    padding: .4rem .8rem;
    /* Rahmen JE Menüpunkt (statt um die ganze Leiste) */
    border-style: var(--ji-mainmenu-border-style, none);
    border-width: var(--ji-mainmenu-border-width, 0);
    border-color: var(--ji-mainmenu-border-color, transparent);
    border-radius: var(--ji-mainmenu-border-radius, var(--ji-radius, 6px));
    font-family: var(--ji-mainmenu-font-family, inherit);
    font-size: var(--ji-mainmenu-font-size, inherit);
    font-weight: var(--ji-mainmenu-weight, inherit);
    font-style: var(--ji-mainmenu-style, normal);
    text-decoration: var(--ji-mainmenu-decoration, none);
    color: var(--ji-mainmenu-color, var(--ji-header-text)) !important;
    transition: background var(--ji-transition, .2s), color var(--ji-transition, .2s), border-color var(--ji-transition, .2s);
}
/* Hover: Hintergrund- und Schriftfarbe der Menüpunkte – NUR beim echten Überfahren */
.ji-nav-menu a:hover,
.ji-nav-menu .nav-link:hover {
    background: var(--ji-mainmenu-bg-hover, rgba(255,255,255,.15));
    color: var(--ji-mainmenu-color-hover, var(--ji-header-text)) !important;
    border-color: var(--ji-mainmenu-border-color-hover, var(--ji-mainmenu-border-color, transparent));
    font-weight: var(--ji-mainmenu-weight-hover, var(--ji-mainmenu-weight, inherit));
    font-style: var(--ji-mainmenu-style-hover, var(--ji-mainmenu-style, normal));
    text-decoration: var(--ji-mainmenu-decoration-hover, var(--ji-mainmenu-decoration, none));
}
/* Box-Modus: Jeder Menüpunkt ist eine eigene Box mit Hintergrund und Innenabstand.
   Hover wirkt dadurch NUR auf den überfahrenen Punkt (siehe a:hover oben), nicht
   mehr auf die gesamte Leiste. */
.ji-nav-menu--box a,
.ji-nav-menu--box .nav-link {
    background: var(--ji-mainmenu-bg, transparent);
    padding: var(--ji-mainmenu-padding, .4rem .8rem);
}
/* Listenzeichen vor jedem Top-Level-Menüpunkt (Auswahl oder eigenes Zeichen) */
.ji-nav-menu > ul > li > a::before {
    content: var(--ji-mainmenu-marker, none);
    margin-inline-end: .35em;
    opacity: .8;
}

/* ── Untermenüs / Dropdowns (2.+ Menüebene) ─────────────────────────────────
   Voraussetzung: im Menü-Modul „Untermenüpunkte anzeigen = Ja" (sonst rendert
   Joomla die verschachtelten <ul> gar nicht erst). */
.ji-nav-menu > ul li { position: relative; }
.ji-nav-menu > ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    margin: var(--ji-submenu-margin, 0);  /* Außenabstand des gesamten Dropdowns - eigener Wert */
    padding: var(--ji-submenu-box-padding, .35rem);  /* Innenabstand der gesamten Dropdown-Box (Rand zu den Punkten) */
    display: flex;
    flex-direction: column;
    gap: var(--ji-submenu-item-gap, .12rem);  /* Abstand zwischen den Submenü-Punkten - eigener Wert, unabhaengig vom Hauptmenü */
    background: var(--ji-submenu-bg, var(--ji-header-bg, #1a202c));
    border-style: var(--ji-submenu-box-border-style, none);
    border-width: var(--ji-submenu-box-border-width, 0);
    border-color: var(--ji-submenu-box-border-color, transparent);
    border-radius: var(--ji-submenu-box-border-radius, var(--ji-radius, 6px));
    box-shadow: var(--ji-submenu-box-shadow, 0 10px 28px rgba(10, 20, 40, .28));
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s, border-color .15s ease;
}
.ji-nav-menu > ul li:hover > ul,
.ji-nav-menu > ul li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* Rahmen ums gesamte Dropdown – Hover-Farbe, wenn man über das Submenü fährt */
.ji-nav-menu > ul ul:hover {
    border-color: var(--ji-submenu-box-border-color-hover, var(--ji-submenu-box-border-color, transparent));
}
/* Untermenü-Links: eigene Submenü-Stile (Farbe, Schrift, Rahmen, Innenabstand).
   Höhere Spezifität als die Top-Level-Regel → überschreibt die Hauptmenü-Werte. */
.ji-nav-menu > ul ul a,
.ji-nav-menu > ul ul .nav-link {
    display: block;
    width: 100%;
    white-space: nowrap;
    text-align: start;
    padding: var(--ji-submenu-padding, .4rem .8rem);
    background: transparent;
    color: var(--ji-submenu-color, var(--ji-mainmenu-color, var(--ji-header-text))) !important;
    font-family: var(--ji-submenu-font-family, inherit);
    font-size: var(--ji-submenu-font-size, inherit);
    font-weight: var(--ji-submenu-weight, inherit);
    font-style: var(--ji-submenu-style, normal);
    text-decoration: var(--ji-submenu-decoration, none);
    border-style: var(--ji-submenu-border-style, none);
    border-width: var(--ji-submenu-border-width, 0);
    border-color: var(--ji-submenu-border-color, transparent);
    border-radius: var(--ji-submenu-border-radius, var(--ji-radius, 6px));
    transition: background var(--ji-transition, .2s), color var(--ji-transition, .2s), border-color var(--ji-transition, .2s);
}
.ji-nav-menu > ul ul a:hover,
.ji-nav-menu > ul ul .nav-link:hover {
    background: var(--ji-submenu-bg-hover, rgba(255, 255, 255, .15)) !important;
    color: var(--ji-submenu-color-hover, var(--ji-submenu-color)) !important;
    border-color: var(--ji-submenu-border-color-hover, var(--ji-submenu-border-color, transparent));
    font-weight: var(--ji-submenu-weight-hover, var(--ji-submenu-weight, inherit));
    font-style: var(--ji-submenu-style-hover, var(--ji-submenu-style, normal));
    text-decoration: var(--ji-submenu-decoration-hover, var(--ji-submenu-decoration, none));
}
.ji-nav-menu > ul ul li > a::before { content: none; }
/* Pfeil am Eltern-Menüpunkt (sobald er ein Untermenü hat) */
/* Reines CSS-Dreieck statt Text-/Unicode-Zeichen: ein Unicode-Symbol (z. B. ▾)
   hat je nach Schriftart/Betriebssystem eine unterschiedliche, teils deutlich
   groessere Breite als ein normaler Buchstabe – dadurch wurde ausgerechnet der
   Menuepunkt MIT Untermenue breiter als die anderen und der Abstand zum
   naechsten Hauptmenuepunkt sah dadurch groesser aus. Ein CSS-Dreieck hat eine
   feste, vorhersehbare Breite unabhaengig von Schriftart/Betriebssystem. */
.ji-nav-menu > ul li:has(> ul) > a::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-inline-start: .4em;
    vertical-align: middle;
    border-left: .3em solid transparent;
    border-right: .3em solid transparent;
    border-top: .35em solid currentColor;
    opacity: .75;
}
/* 3. Ebene öffnet seitlich rechts */
.ji-nav-menu > ul ul ul {
    top: -.35rem;
    left: 100%;
}

/* ── Banner ────────────────────────────────────────────────────────────────── */
.ji-banner {
    width: 100%;
    overflow: hidden;
}

/* ── Sektionen ─────────────────────────────────────────────────────────────── */
.ji-section {
    padding-block: var(--ji-section-py);
}
.ji-section--feature {
    background: rgba(0,0,0,.03);
}
.joomion-scheme-joomion-dark .ji-section--feature {
    background: rgba(255,255,255,.04);
}

/* ── Main / Breadcrumbs / Inhalt ──────────────────────────────────────────── */
.ji-main {
    padding-block: calc(var(--ji-spacing) * 1.5);
    min-height: 50vh;
}
/* Breadcrumbs: HINTERGRUND + Außenabstand auf der Spalte (.ji-breadcrumbs),
   RAHMEN + Eckenrundung + Innenabstand auf dem Modul-Body (.ji-module-card-body). */
.ji-breadcrumbs {
    margin: var(--ji-bc-margin, 0);
    padding: 0;
    font-size: .9rem;
    color: var(--ji-bc-color, inherit);
    background: var(--ji-bc-bg, transparent);
    border-radius: var(--ji-bc-border-radius, 0);
}
/* Modul-Card im Breadcrumb-Bereich neutralisieren (eigener Hintergrund/Rahmen/Schatten weg) */
.ji-breadcrumbs .ji-module-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
    border-radius: 0;
}
.ji-breadcrumbs .ji-module-card-body {
    background: transparent;
    padding: var(--ji-bc-padding, 0);
    border-style: var(--ji-bc-border-style, none);
    border-width: var(--ji-bc-border-width, 0);
    border-color: var(--ji-bc-border-color, transparent);
    border-radius: var(--ji-bc-border-radius, 0);
}
/* Allgemeiner Text erbt von .ji-breadcrumbs; Links (inkl. innerer Spans) bekommen die LINK-Farbe. */
.ji-breadcrumbs a, .ji-breadcrumbs a * { color: var(--ji-bc-link, var(--ji-bc-color, inherit)) !important; text-decoration: var(--ji-bc-decoration, none); }
.ji-breadcrumbs a:hover, .ji-breadcrumbs a:hover * { color: var(--ji-bc-link-hover, var(--ji-bc-link, var(--ji-bc-color, inherit))) !important; text-decoration: var(--ji-bc-decoration, none); }
/* Eigener Wrapper UND Joomla-Standard-Markup (mod_breadcrumbs: ol.breadcrumb /
   .mod-breadcrumbs__list) horizontal in EINER Reihe darstellen. */
.ji-breadcrumbs ol,
.ji-breadcrumbs ul,
.mod-breadcrumbs__list,
ol.breadcrumb,
ul.breadcrumb {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.ji-breadcrumbs li + li::before,
.mod-breadcrumbs__item + .mod-breadcrumbs__item::before,
.breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    margin-inline-end: .5rem;
    opacity: .5;
}
/* mod_breadcrumbs-Wrapper (nav) + Items sauber inline */
.mod-breadcrumbs { font-size: .9rem; }
.mod-breadcrumbs__item,
.breadcrumb-item { display: inline-flex; align-items: center; }
.ji-main-top  { margin-bottom: var(--ji-spacing); }
.ji-main-bottom { margin-top: var(--ji-spacing); }

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.ji-sidebar {
    min-width: 0;
}

/* ── Modul-Karte (Chrome joomion_module) ──────────────────────────────────── */
.ji-module-card {
    background: transparent;
    border-radius: var(--ji-radius-lg);
    box-shadow: var(--ji-module-box-shadow, var(--ji-shadow));
    overflow: hidden;
    margin: var(--ji-module-margin, 0 0 var(--ji-spacing) 0);
    transition: box-shadow var(--ji-transition);

    border-style:  var(--ji-module-border-style,  none);
    border-width:  var(--ji-module-border-width,  1px);
    border-color:  var(--ji-module-border-color,  #dddddd);
    border-radius: var(--ji-module-border-radius, 6px);}
.joomion-scheme-joomion-dark .ji-module-card-body {
    background: #1e1e1e;
}
.ji-module-card:hover {
    box-shadow: var(--ji-shadow-lg);
}
.ji-module-card-header {
    background:    var(--ji-module-header-bg, transparent);
    color:         var(--ji-module-header-text, #fff);
    padding:       .85rem 1.25rem;
    font-family:   var(--ji-module-hdr-font-family, var(--ji-font-body));
    font-weight:   var(--ji-module-hdr-weight, 600);
    font-size:     var(--ji-module-hdr-font-size, 1rem);
    border-bottom-style: var(--ji-module-hdr-brd-style, none);
    border-bottom-width: var(--ji-module-hdr-brd-width, 1px);
    border-bottom-color: var(--ji-module-hdr-brd-color, #cccccc);
}
/* Modul-Titel ist ein <h3> – die globale h3-Farbregel würde die Header-Textfarbe
   überschreiben. Daher hier explizit auf die Modul-Header-Textfarbe zwingen. */
.ji-module-card-header .ji-module-card-title,
.ji-module-card-header h3 {
    color: var(--ji-module-header-text, #fff) !important;
    margin: 0;
    font-size: inherit;
    font-family: inherit;
    font-weight: var(--ji-module-hdr-weight, inherit);
    font-style: var(--ji-module-hdr-style, normal);
    /* "Ganzen Text unterstreichen" – unterstreicht den Titeltext selbst. */
    text-decoration: var(--ji-module-hdr-decoration-all, none);
}
/* "Unterstrichen"-Schalter (Links) unterstreicht nur Links im Modul-Header. */
.ji-module-card-header a {
    text-decoration: var(--ji-module-hdr-decoration, none);
}
.ji-module-card-body {
    background: var(--ji-module-bg, transparent);
    color: var(--ji-module-text, inherit);
    padding: var(--ji-module-padding, 1.25rem);
    font-family: var(--ji-module-font-family, inherit);
    font-size: var(--ji-module-font-size, inherit);
    font-weight: var(--ji-module-weight, inherit);
    font-style: var(--ji-module-style, normal);
    /* "Ganzen Text unterstreichen" – unterstreicht den gesamten Modul-Inhalt. */
    text-decoration: var(--ji-module-decoration-all, none);
}
/* "Unterstrichen"-Schalter unterstreicht nur Links im Modul-Inhalt, nicht den gesamten Fließtext. */
.ji-module-card-body a {
    text-decoration: var(--ji-module-decoration, none);
}
/* Module, die per Positions-Zuweisung in Topbar/Header landen, werden mit dem
   Chrome "joomion_module" in eine Modul-Karte gepackt (gleiche Spezifität wie
   die generischen Modul-Link-Regeln, die aber weiter unten stehen und sonst
   IMMER gewinnen würden). WICHTIG: Topbar-/Header-Schalter und der eigene
   Modul-Text-/Modul-Header-Schalter müssen unabhängig voneinander wirken –
   keiner darf den anderen aushebeln. Die Variablen unten sind daher bereits
   in PHP als ODER-Verknüpfung berechnet ($tbModDecoration usw.). */
.ji-topbar .ji-module-card-body a {
    text-decoration: var(--ji-topbar-mod-decoration, none);
}
.ji-topbar .ji-module-card-header a {
    text-decoration: var(--ji-topbar-modhdr-decoration, none);
}
.ji-header .ji-module-card-body a {
    text-decoration: var(--ji-header-mod-decoration, none);
}
.ji-header .ji-module-card-header a {
    text-decoration: var(--ji-header-modhdr-decoration, none);
}
.ji-module-card-title-none > * {
    padding: 1.25rem;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.ji-footer {
    background-color: var(--ji-footer-bg);
    color: var(--ji-footer-text);
    padding-top: 3rem;
    font-family: var(--ji-footer-font-family, inherit);
    font-size: var(--ji-footer-font-size, inherit);
    font-weight: var(--ji-footer-weight, inherit);
    font-style: var(--ji-footer-style, normal);
}
.ji-footer a {
    color: var(--ji-footer-link, var(--ji-footer-text));
    text-decoration: var(--ji-footer-link-decoration, none);
}
.ji-footer a:hover {
    color: var(--ji-footer-link-hover, #fff);
    text-decoration: var(--ji-footer-link-decoration, none);
}
.ji-footer-modules { padding-bottom: 2.5rem; }
.ji-footer-copyright,
.ji-footer [data-position="footer-copyright"] {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-block: 1.25rem;
    text-align: center;
    font-size: .875rem;
}
/* Copyright-Footer-Inhalt mittig (auch Modul-Output zentrieren) */
.ji-footer [data-position="footer-copyright"] > * { margin-inline: auto; }
.ji-footer-copy { margin: 0; }
.ji-footer .ji-grid { color: var(--ji-footer-text); }
/* Footer-Modulinhalt (footer-a/b/c) erbt die Footer-Textfarbe statt der Grund-Textfarbe.
   Links behalten ihre eigene Footer-Link-Farbe (.ji-footer a greift direkt). */
.ji-footer .ji-col,
.ji-footer .ji-col :where(p,li,td,th,dt,dd,span,small,strong,em,b,i,h1,h2,h3,h4,h5,h6,label,blockquote,figcaption) {
    color: var(--ji-footer-text);
}

/* ── Schaltflächen ─────────────────────────────────────────────────────────── */
.ji-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.2rem;
    border-radius: var(--ji-radius);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background var(--ji-transition), color var(--ji-transition), border-color var(--ji-transition);
    line-height: 1.4;
}
.ji-btn:focus-visible {
    outline: 3px solid var(--ji-primary);
    outline-offset: 2px;
}
.ji-btn-primary {
    background: var(--ji-primary);
    color: #fff;
    border-color: var(--ji-primary);
}
.ji-btn-primary:hover {
    background: var(--ji-link-hover);
    border-color: var(--ji-link-hover);
    color: #fff;
    text-decoration: none;
}
.ji-btn-secondary {
    background: var(--ji-secondary);
    color: #fff;
    border-color: var(--ji-secondary);
}
.ji-btn-secondary:hover {
    background: #1a202c;
    color: #fff;
    text-decoration: none;
}
.ji-btn-outline {
    background: transparent;
    color: var(--ji-primary);
    border-color: var(--ji-primary);
}
.ji-btn-outline:hover {
    background: var(--ji-primary);
    color: #fff;
    text-decoration: none;
}

/* ── Button-Block (Template-Stil → Farben → Buttons) ─────────────────────────
   Wirkt auf die primären Schaltflächen des Templates und auf Joomla-Buttons
   (.btn-primary) im Inhalt. Andere Klassen (.ji-abar-btn, .ji-fw-btn) tragen
   kein .btn und sind nicht betroffen. */
.ji-btn-primary,
.btn-primary,
button.btn-primary,
input.btn-primary {
    background: var(--ji-button-bg, var(--ji-primary));
    color: var(--ji-button-color, #fff);
    border-style: var(--ji-button-border-style, solid);
    border-width: var(--ji-button-border-width, 2px);
    border-color: var(--ji-button-border-color, var(--ji-button-bg, var(--ji-primary)));
    border-radius: var(--ji-button-border-radius, var(--ji-radius));
    font-family: var(--ji-button-font-family, inherit);
    font-size: var(--ji-button-font-size, inherit);
    font-weight: var(--ji-button-weight, 600);
    font-style: var(--ji-button-style, normal);
    text-decoration: var(--ji-button-decoration, none);
}
.ji-btn-primary:hover,
.btn-primary:hover,
button.btn-primary:hover,
input.btn-primary:hover {
    background: var(--ji-button-bg-hover, var(--ji-link-hover));
    color: var(--ji-button-color-hover, var(--ji-button-color, #fff));
    border-color: var(--ji-button-border-color-hover, var(--ji-button-border-color, var(--ji-button-bg-hover, var(--ji-link-hover))));
    font-weight: var(--ji-button-weight-hover, var(--ji-button-weight, 600));
    font-style: var(--ji-button-style-hover, var(--ji-button-style, normal));
    text-decoration: var(--ji-button-decoration-hover, none);
}

/* ── Formular-Elemente ─────────────────────────────────────────────────────── */
.ji-form-group {
    margin-bottom: 1rem;
}
.ji-form-group label {
    display: block;
    margin-bottom: .35rem;
    font-weight: 600;
    font-size: .9rem;
}
.ji-form-control {
    width: 100%;
    padding: .6rem .9rem;
    border: 1px solid #d1d5db;
    border-radius: var(--ji-radius);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color var(--ji-transition), box-shadow var(--ji-transition);
    background: #fff;
    color: var(--ji-text);
}
.ji-form-control:focus {
    outline: none;
    border-color: var(--ji-primary);
    box-shadow: 0 0 0 3px rgba(31,111,173,.2);
}

/* ── Zurück nach oben ──────────────────────────────────────────────────────── */
.ji-back-to-top {
    position: fixed;
    bottom: 2rem;
    inset-inline-end: 2rem;
    width: 46px;
    height: 46px;
    background: var(--ji-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ji-shadow-lg);
    transition: background var(--ji-transition), transform var(--ji-transition), opacity var(--ji-transition);
    z-index: 999;
    opacity: .9;
}
.ji-back-to-top:hover { background: var(--ji-link-hover); transform: translateY(-3px); opacity: 1; }
/* hidden-Attribut wirksam machen: ohne diese Regel überschreibt display:flex oben
   das UA-[hidden]{display:none}, der Button bliebe dauerhaft sichtbar. */
.ji-back-to-top[hidden] { display: none; }

/* ── Admin-Editor-Trigger ──────────────────────────────────────────────────── */
.ji-open-editor {
    position: fixed;
    bottom: 5rem;
    inset-inline-end: 2rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--ji-accent);
    color: #fff;
    padding: .5rem .9rem;
    border-radius: 99px;
    font-size: .85rem;
    font-weight: 600;
    box-shadow: var(--ji-shadow-lg);
    text-decoration: none;
    z-index: 998;
    transition: background var(--ji-transition), transform var(--ji-transition);
}
.ji-open-editor:hover { background: #c53030; color: #fff; transform: translateY(-2px); text-decoration: none; }

/* ── Debug ─────────────────────────────────────────────────────────────────── */
.ji-debug {
    margin-top: 2rem;
    padding: 1rem;
    font-size: .8rem;
    background: #fff8e1;
    border-top: 3px solid #f59e0b;
}

/* ── Fehlerseite / Offline-Seite ────────────────────────────────────────────── */
.ji-error-page,
.ji-offline-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ji-bg);
}
.ji-error-wrapper,
.ji-offline-wrapper {
    width: 100%;
    max-width: 500px;
    padding: 2rem;
}
.ji-error-box,
.ji-offline-box {
    background: #fff;
    border-radius: var(--ji-radius-lg);
    box-shadow: var(--ji-shadow-lg);
    padding: 3rem 2.5rem;
    text-align: center;
}
.ji-error-code {
    font-size: 5rem;
    font-weight: 800;
    color: var(--ji-accent);
    line-height: 1;
    margin-bottom: 1rem;
}
.ji-error-title { font-size: 1.5rem; margin-bottom: 1.5rem; }
.ji-offline-logo { margin-bottom: 1.5rem; }
.ji-offline-logo-img { display: block; margin: 0 auto .75rem; max-width: 240px; max-height: 100px; object-fit: contain; }
.ji-offline-title { font-size: 1.75rem; margin-bottom: 1rem; }
.ji-offline-message { color: #666; margin-bottom: 2rem; }
.ji-offline-login { text-align: left; margin-top: 2rem; }
.ji-form-offline .ji-btn { width: 100%; justify-content: center; margin-top: .5rem; }

/* ── Joomla-System-Meldungen ───────────────────────────────────────────────── */
.alert {
    padding: 1rem 1.25rem;
    border-radius: var(--ji-radius);
    margin-bottom: 1rem;
    border: 1px solid transparent;
}
.alert-success { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.alert-info    { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.alert-warning { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.alert-danger  { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

/* ── Joomla-Pagination ─────────────────────────────────────────────────────── */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    justify-content: center;
}
.pagination .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 .75rem;
    border-radius: var(--ji-radius);
    background: #fff;
    border: 1px solid #d1d5db;
    color: var(--ji-text);
    text-decoration: none;
    transition: all var(--ji-transition);
    font-size: .9rem;
}
.pagination .page-item.active .page-link {
    background: var(--ji-primary);
    border-color: var(--ji-primary);
    color: #fff;
}
.pagination .page-item .page-link:hover {
    background: var(--ji-primary);
    border-color: var(--ji-primary);
    color: #fff;
}
.pagination .page-item.disabled .page-link {
    opacity: .4;
    cursor: default;
    pointer-events: none;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .ji-grid--3 { grid-template-columns: 1fr; }
    .ji-grid--2 { grid-template-columns: 1fr; }

    .col-2, .col-3, .col-4 { flex: 0 0 100%; max-width: 100%; }
    .col-8, .col-9, .col-10 { flex: 0 0 100%; max-width: 100%; }

    .ji-nav-toggle { display: flex; }
    .ji-nav-menu {
        display: none;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: 100%;
        inset-inline-start: 0;
        inset-inline-end: 0;
        background: var(--ji-header-bg);
        padding: 1rem;
        box-shadow: var(--ji-shadow-lg);
        z-index: 200;
    }
    .ji-nav-menu.is-open { display: flex; }
    /* Innere Menüliste auf Mobil vertikal (überschreibt das zentrierte Flex-Row) */
    .ji-nav-menu > ul {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
    }
    .ji-header .nav-item > .nav-link,
    .ji-nav-menu > ul > li > a {
        width: 100%;
        border-radius: 0;
        padding: .75rem 1rem;
    }

    :root { --ji-section-py: 2.5rem; }
}

@media (max-width: 575.98px) {
    :root { --ji-spacing: 1rem; }
    .ji-back-to-top { bottom: 1rem; inset-inline-end: 1rem; }
    .ji-open-editor { bottom: 4rem; inset-inline-end: 1rem; }
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.4rem; }
}

/* ── Barrierefreiheit ──────────────────────────────────────────────────────── */
/*
   WICHTIG: Joomlas Core-mod_menu (Bootstrap 5) blendet den Screenreader-Text
   des Dropdown-Umschalters mit der Klasse ".visually-hidden" aus. Fehlt diese
   Regel, wird der Text (z. B. "Weitere Informationen: Shop") neben dem
   Hauptmenüpunkt SICHTBAR. Darum hier BEIDE Klassen (.sr-only = Bootstrap 4,
   .visually-hidden = Bootstrap 5) identisch definieren.
*/
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}

/* ── Print ──────────────────────────────────────────────────────────────────── */
@media print {
    .ji-header, .ji-topbar, .ji-nav, .ji-footer,
    .ji-back-to-top, .ji-open-editor, #ji-editor-bar { display: none !important; }
    body { background: #fff; color: #000; }
    a[href]::after { content: ' (' attr(href) ')'; font-size: .75rem; color: #555; }
}

/* ── Zusätzliche Wrapper-Klassen (kompatibel mit index.php v1.0.3) ─────────── */
.ji-wrap-fluid,
.ji-wrap-container { width: 100%; max-width: var(--ji-container); margin-inline: auto; padding-inline: var(--ji-spacing); }
.ji-wrap-fullwidth { width: 100%; padding-inline: var(--ji-spacing); }
.ji-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ji-spacing); }
.ji-col-2  { flex: 0 0 16.667%; max-width: 16.667%; }
.ji-col-3  { flex: 0 0 25%;     max-width: 25%; }
.ji-col-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.ji-col-6  { flex: 0 0 50%;     max-width: 50%; }
.ji-col-8  { flex: 0 0 66.667%; max-width: 66.667%; }
.ji-col-9  { flex: 0 0 75%;     max-width: 75%; }
.ji-col-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.ji-col-12 { flex: 0 0 100%;    max-width: 100%; }
@media (max-width: 991.98px) {
    .ji-grid-3 { grid-template-columns: 1fr; }
    .ji-col-2,.ji-col-3,.ji-col-4 { flex: 0 0 100%; max-width: 100%; }
    .ji-col-8,.ji-col-9,.ji-col-10 { flex: 0 0 100%; max-width: 100%; }
}

/* ── Admin-Trigger-Buttons ─────────────────────────────────────────────────── */
.ji-admin-triggers {
    position: fixed;
    bottom: 2rem;
    inset-inline-end: 2rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    z-index: 998;
}
.ji-open-editor,
.ji-open-framework {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border-radius: 99px;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--ji-shadow-lg);
    transition: background var(--ji-transition), transform var(--ji-transition);
}
.ji-open-editor {
    background: var(--ji-accent);
    color: #fff;
}
.ji-open-editor:hover { background: #c53030; color: #fff; transform: translateY(-2px); text-decoration: none; }
.ji-open-framework {
    background: #3b82f6;
    color: #fff;
}
.ji-open-framework:hover { background: #2563eb; color: #fff; transform: translateY(-2px); text-decoration: none; }

/* Admin-Buttons im Header */
.ji-admin-btns {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
    margin-left: auto;
}
.ji-admin-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.12);
    color: var(--ji-header-text, #ffffff);
    white-space: nowrap;
    transition: background .15s;
    font-family: inherit;
}
.ji-admin-btn:hover {
    background: rgba(255,255,255,.25);
    color: #fff;
    text-decoration: none;
}
.ji-admin-btn-schema {
    border-color: rgba(255,200,50,.5);
    background: rgba(255,200,50,.1);
}
.ji-admin-btn-schema:hover {
    background: rgba(255,200,50,.25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   JoomION Admin-Leiste – Prominent, immer sichtbar unten
   ═══════════════════════════════════════════════════════════════════════════ */
.ji-admin-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99990;
    background: linear-gradient(135deg, #0a0f1e 0%, #1a2744 100%);
    border-top: 3px solid #3b82f6;
    box-shadow: 0 -4px 20px rgba(0,0,0,.5);
}
.ji-admin-bar-inner {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.25rem;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.ji-admin-bar-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #64748b;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding-right: .75rem;
    border-right: 1px solid #334155;
    white-space: nowrap;
    flex-shrink: 0;
}
.ji-abar-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.4rem;
    border-radius: 6px;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    border: 2px solid transparent;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all .15s ease;
    font-family: inherit;
}
.ji-abar-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.35);
    text-decoration: none;
    color: #fff;
}
/* Editor – Blau */
.ji-abar-btn--editor {
    background: #1d4ed8;
    border-color: #3b82f6;
}
.ji-abar-btn--editor:hover { background: #1e40af; border-color: #60a5fa; }
/* Layout – Grün */
.ji-abar-btn--layout {
    background: #15803d;
    border-color: #22c55e;
}
.ji-abar-btn--layout:hover { background: #166534; border-color: #4ade80; }

/* Backend – Dunkelgrau */
.ji-abar-btn--admin {
    background: #334155;
    border-color: #64748b;
}
.ji-abar-btn--admin:hover { background: #1e293b; border-color: #94a3b8; }

/* Seite nach unten verschieben damit Admin-Leiste Inhalt nicht verdeckt */
body:has(.ji-admin-bar) {
    padding-bottom: 62px;
}
/* "Nach oben"-Button 50px höher legen, solange die JoomION-Leiste sichtbar ist,
   damit er nicht von ihr überlagert wird. */
body:has(.ji-admin-bar) .ji-back-to-top {
    bottom: calc(2rem + 50px);
}
/* Fallback für ältere Browser ohne :has() */
.ji-admin-bar-spacer {
    height: 62px;
    display: block;
}

/* ── Inhalts-Zeile (Sidebars + Hauptbereich) ────────────────────────────────
   Breiten kommen als Inline-Styles aus index.php (Template-Parameter in %/px).
   Auf schmalen Viewports stapeln Sidebars und Hauptbereich auf volle Breite. */
@media (max-width: 768px) {
    .ji-layout-row .ji-sidebar,
    .ji-layout-row .ji-component {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}

/* ── Kontaktdaten-Block (Phase C) ───────────────────────────────────────── */
.ji-contact {
    margin-block: var(--ji-spacing, 1.5rem);
    /* inherit: passt sich dem Kontext an (Off-Canvas -> --ji-oc-text, Footer ->
       --ji-footer-text, sonst Grund-Textfarbe). Vorher erzwang var(--ji-text) die
       Grundfarbe und ignorierte die Off-Canvas-Textfarbe. */
    color: inherit;
}
.ji-contact-title {
    margin: 0 0 .6rem;
    font-size: 1.1rem;
    color: var(--ji-contact-title-color, inherit);
}
.ji-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.ji-contact-list li {
    line-height: 1.45;
}
.ji-contact-company {
    font-weight: 600;
}
.ji-contact-list a {
    color: inherit;
    /* Kein hartcodiertes text-decoration hier: der Kontaktblock kann in Topbar,
       Header, Footer oder Off-Canvas platziert werden – die jeweilige
       "Unterstrichen"-Einstellung dieses Bereichs (z. B. --ji-topbar-decoration)
       soll greifen. Ohne passenden Bereich fällt es auf den globalen a-Reset zurück. */
}
.ji-contact-list a:hover {
    text-decoration: underline;
}

/* ── Social-Media-Block (Phase C) ───────────────────────────────────────── */
.ji-social {
    margin-block: var(--ji-spacing, 1.5rem);
}
.ji-social-title {
    margin: 0 0 .6rem;
    font-size: 1.1rem;
}
.ji-social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
}
.ji-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ji-social-bg, rgba(127, 127, 127, .14));
    color: var(--ji-social-color, var(--ji-text, currentColor));
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
/* Off-Canvas-Social-Icons: eigener Icon-Hintergrund (getrennt von Footer/Position) */
.ji-offcanvas .ji-social-link {
    background: var(--ji-social-bg-oc, var(--ji-social-bg, rgba(127, 127, 127, .14)));
}
.ji-social-link:hover {
    background: var(--ji-social-bg-hover, var(--ji-primary, #1f6fad));
    color: var(--ji-social-color-hover, #fff);
    transform: translateY(-2px);
}
/* Off-Canvas-Social-Icons: eigener Hover-Hintergrund (Fallback: Footer-Hover) */
.ji-offcanvas .ji-social-link:hover {
    background: var(--ji-social-bg-oc-hover, var(--ji-social-bg-hover, var(--ji-primary, #1f6fad)));
}
.ji-social-link svg {
    display: block;
}
/* Pro-Netzwerk Icon-Farbe + Hover (leer = generische Social-Farbe).
   Doppelklasse-Selektor schlägt .ji-footer a / .ji-header a (höhere Spezifität),
   damit eigene Icon-Farben im Footer NICHT von der Footer-Textfarbe überschrieben werden. */
.ji-social-link.ji-social-facebook  { color: var(--ji-so-facebook,  var(--ji-social-color, currentColor)); }
.ji-social-link.ji-social-instagram { color: var(--ji-so-instagram, var(--ji-social-color, currentColor)); }
.ji-social-link.ji-social-whatsapp  { color: var(--ji-so-whatsapp,  var(--ji-social-color, currentColor)); }
.ji-social-link.ji-social-threads   { color: var(--ji-so-threads,   var(--ji-social-color, currentColor)); }
.ji-social-link.ji-social-youtube   { color: var(--ji-so-youtube,   var(--ji-social-color, currentColor)); }
.ji-social-link.ji-social-x         { color: var(--ji-so-x,         var(--ji-social-color, currentColor)); }
.ji-social-link.ji-social-linkedin  { color: var(--ji-so-linkedin,  var(--ji-social-color, currentColor)); }
.ji-social-link.ji-social-tiktok    { color: var(--ji-so-tiktok,    var(--ji-social-color, currentColor)); }
.ji-social-link.ji-social-telegram  { color: var(--ji-so-telegram,  var(--ji-social-color, currentColor)); }
.ji-social-link.ji-social-xing      { color: var(--ji-so-xing,      var(--ji-social-color, currentColor)); }
.ji-social-link.ji-social-pinterest { color: var(--ji-so-pinterest, var(--ji-social-color, currentColor)); }
.ji-social-link.ji-social-facebook:hover  { color: var(--ji-so-facebook-h,  var(--ji-social-color-hover, #fff)); }
.ji-social-link.ji-social-instagram:hover { color: var(--ji-so-instagram-h, var(--ji-social-color-hover, #fff)); }
.ji-social-link.ji-social-whatsapp:hover  { color: var(--ji-so-whatsapp-h,  var(--ji-social-color-hover, #fff)); }
.ji-social-link.ji-social-threads:hover   { color: var(--ji-so-threads-h,   var(--ji-social-color-hover, #fff)); }
.ji-social-link.ji-social-youtube:hover   { color: var(--ji-so-youtube-h,   var(--ji-social-color-hover, #fff)); }
.ji-social-link.ji-social-x:hover         { color: var(--ji-so-x-h,         var(--ji-social-color-hover, #fff)); }
.ji-social-link.ji-social-linkedin:hover  { color: var(--ji-so-linkedin-h,  var(--ji-social-color-hover, #fff)); }
.ji-social-link.ji-social-tiktok:hover    { color: var(--ji-so-tiktok-h,    var(--ji-social-color-hover, #fff)); }
.ji-social-link.ji-social-telegram:hover  { color: var(--ji-so-telegram-h,  var(--ji-social-color-hover, #fff)); }
.ji-social-link.ji-social-xing:hover      { color: var(--ji-so-xing-h,      var(--ji-social-color-hover, #fff)); }
.ji-social-link.ji-social-pinterest:hover { color: var(--ji-so-pinterest-h, var(--ji-social-color-hover, #fff)); }
/* Markenfarbe wird override-sicher als Inline-fill-Attribut am SVG gesetzt (index.php) –
   im Ruhezustand bewusst KEINE CSS-fill-Regel, damit das Attribut nicht überschrieben wird.
   Nur Hover schlägt das Attribut per CSS (Var --ji-soh ist inline am <a> gesetzt). */
.ji-social-link:hover svg { fill: var(--ji-soh, var(--ji-social-color-hover, #fff)); }

/* ── Off-Canvas-/Burger-Menü (Phase D) ──────────────────────────────────── */
.ji-oc-toggle {
    display: none;                 /* Standard aus – via body-Klasse aktiviert */
    position: fixed;
    top: 1rem;
    z-index: 1100;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0;
    background: var(--ji-oc-burger-bg, var(--ji-primary, #1f6fad));
    border: none;
    border-radius: var(--ji-radius, 8px);
    cursor: pointer;
    box-shadow: var(--ji-shadow, 0 2px 8px rgba(0, 0, 0, .2));
}
.ji-oc-toggle--left  { inset-inline-start: 1rem; }
.ji-oc-toggle--right { inset-inline-end: 1rem; }
.ji-oc-toggle--top   { inset-inline-start: 1rem; }
.ji-oc-toggle .ji-burger {
    width: 24px;
    height: 3px;
    background: var(--ji-oc-burger, #ffffff);
    transition: transform var(--ji-transition, .25s ease), opacity var(--ji-transition, .25s ease), background-color .2s ease;
}
.ji-oc-toggle:hover .ji-burger { background: var(--ji-oc-burger-hover, var(--ji-oc-burger, #ffffff)); }

/* Sichtbarkeit des Burger-Buttons je nach Modus
   always       = immer sichtbar, ersetzt die Menüleiste
   always_bar   = immer sichtbar, Menüleiste bleibt zusätzlich erhalten
   mobile       = nur auf Mobilgeräten */
body.ji-oc-on.ji-oc-always    .ji-oc-toggle,
body.ji-oc-on.ji-oc-alwaysbar .ji-oc-toggle { display: flex; }
@media (max-width: 768px) {
    body.ji-oc-on.ji-oc-mobile .ji-oc-toggle { display: flex; }
}

/* Inline-Navigation ausblenden (nur wenn die Menüleiste ersetzt werden soll) */
body.ji-oc-on.ji-oc-always .ji-nav { display: none; }
@media (max-width: 768px) {
    body.ji-oc-on.ji-oc-mobile .ji-nav { display: none; }
}

/* Overlay (Backdrop) */
.ji-oc-overlay {
    position: fixed;
    inset: 0;
    z-index: 1098;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity .3s ease;
}
.ji-oc-overlay.is-open { opacity: 1; }

/* Einschiebbares Panel */
.ji-offcanvas {
    position: fixed;
    z-index: 1099;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--ji-oc-bg, var(--ji-header-bg, #ffffff));
    color: var(--ji-oc-text, var(--ji-header-text, inherit));
    font-family: var(--ji-oc-font-family, inherit);
    font-size: var(--ji-oc-font-size, 1rem);
    box-shadow: var(--ji-shadow-lg, 0 0 30px rgba(0, 0, 0, .3));
    transition: transform .3s ease;
}
/* Seitlich (links/rechts) */
.ji-offcanvas--left,
.ji-offcanvas--right {
    top: 0;
    bottom: 0;
    width: min(320px, 85vw);
    max-width: 85vw;
    padding: 3.25rem 1.5rem 1.5rem;
}
.ji-offcanvas--left  { inset-inline-start: 0; transform: translateX(-105%); }
.ji-offcanvas--right { inset-inline-end: 0;  transform: translateX(105%); }
/* Von oben einschiebend (volle Breite) */
.ji-offcanvas--top {
    top: 0;
    inset-inline: 0;
    width: 100%;
    max-height: 90vh;
    padding: 4rem 1.5rem 1.5rem;
    transform: translateY(-105%);
}
.ji-offcanvas.is-open { transform: none; }

.ji-oc-close {
    position: absolute;
    top: .4rem;
    inset-inline-end: .6rem;
    padding: .15rem .5rem;
    background: transparent;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}
.ji-oc-inner { display: flex; flex-direction: column; gap: 1.5rem; }

/* Logo: 20px mehr Abstand nach oben, da der Burger-Button darüber liegt */
.ji-oc-logo { margin-top: 20px; }
.ji-oc-logo img { display: block; max-width: 100%; height: auto; }

/* Menü im Panel immer vertikal darstellen */
.ji-oc-nav ul { list-style: none; margin: 0; padding: 0; }
.ji-oc-nav li { margin: 0; }
/* Link-Styling der Menü-Einträge. Höhere Spezifität + !important, weil die
   Links aus dem Menü-Modul kommen und sonst von Bootstrap/Joomla-Regeln
   (.nav-link, a:hover{underline}) überschrieben werden. */
.ji-offcanvas .ji-oc-nav a,
.ji-offcanvas .ji-oc-nav .nav-link,
.ji-offcanvas .ji-oc-nav li > a {
    display: block;
    padding: var(--ji-oc-link-pad-y, 6px) .25rem;
    color: var(--ji-oc-link, var(--ji-oc-text, inherit)) !important;
    font-weight: var(--ji-oc-weight, inherit);
    font-style: var(--ji-oc-style, normal);
    text-decoration: var(--ji-oc-decoration, none) !important;
}
.ji-offcanvas .ji-oc-nav a:hover,
.ji-offcanvas .ji-oc-nav .nav-link:hover,
.ji-offcanvas .ji-oc-nav li > a:hover {
    color: var(--ji-oc-link-hover, var(--ji-link-hover, var(--ji-primary, #1f6fad))) !important;
    text-decoration: var(--ji-oc-decoration, none) !important;
}

/* ── Off-Canvas-Menü: Abstände, Listenpunkte & Einzug (Template-Optionen) ──
   Selektoren NACHKOMMEN-basiert (kein „>"), damit sie – wie die funktionierende
   Linien-/Link-Regel oben – unabhängig von evtl. Wrappern des Menü-Moduls greifen.
   Prinzip: Basiswert = Hauptpunkt; verschachtelte Unterpunkte überschreiben ihn. */
/* Abstand zwischen Punkten (Basis = Hauptpunkte) */
.ji-oc-nav li + li        { margin-top: var(--ji-oc-item-gap, 6px); }
/* Unterpunkte überschreiben: eigener Abstand + Einzug + Abstand Eltern→erstes Unterelement */
.ji-oc-nav ul ul li + li  { margin-top: var(--ji-oc-subitem-gap, 4px); }
.ji-oc-nav ul ul {
    padding-inline-start: var(--ji-oc-indent, 16px);
    margin-top: var(--ji-oc-subitem-gap, 4px);
    max-width: 100%;
}
/* Listenpunkte (Marker): Basis = Haupt-Marker für alle Links, Unterpunkte überschreiben.
   „Kein Symbol" = leerer content + 0 Abstand (über die CSS-Variablen gesteuert). */
.ji-offcanvas .ji-oc-nav li > a::before {
    content: var(--ji-oc-marker, "");
    margin-inline-end: var(--ji-oc-marker-mr, 0);
    color: var(--ji-oc-link, var(--ji-oc-text, currentColor));
}
.ji-offcanvas .ji-oc-nav ul ul li > a::before {
    content: var(--ji-oc-submarker, "");
    margin-inline-end: var(--ji-oc-submarker-mr, 0);
}
/* Eigene Schriftgröße der Unterpunkte (Typografie-Option). Leer = wie Hauptpunkte. */
.ji-offcanvas .ji-oc-nav ul ul a,
.ji-offcanvas .ji-oc-nav .mod-menu__sub a {
    font-size: var(--ji-oc-sub-font-size, inherit);
}
@media (max-width: 360px) {
    .ji-oc-nav ul ul { padding-inline-start: calc(var(--ji-oc-indent, 16px) * .7); }
}
/* Im Drawer den KOMPLETTEN Menübaum zeigen: Untermenüs dauerhaft ausgeklappt
   (kein Hover/Dropdown wie auf dem Desktop, daher würde sonst z. B. „Downloads" fehlen).
   Joomlas Aufklapp-Button (Chevron) entfällt – er funktioniert im Panel nicht zuverlässig
   und erzeugte zudem einen störenden Block-Abstand vor dem Untermenü. */
.ji-oc-nav .mod-menu__sub {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
}
.ji-oc-nav .mod-menu__toggle-sub { display: none !important; }

/* Textlinks im Panel (E-Mail/Telefon/Mobil aus dem Kontakt-Block) – eigene
   Schriftfarbe + Hover, unabhängig von den Menü-Links. */
.ji-offcanvas .ji-contact-list a {
    color: var(--ji-oc-textlink, var(--ji-oc-text, inherit)) !important;
    text-decoration: var(--ji-oc-decoration, none);
}
.ji-offcanvas .ji-contact-list a:hover {
    color: var(--ji-oc-textlink-hover, var(--ji-link-hover, var(--ji-primary, #1f6fad))) !important;
}

/* Beim „Oben"-Modus das Menü horizontal umbrechen lassen */
.ji-offcanvas--top .ji-oc-nav > ul,
.ji-offcanvas--top .ji-oc-nav .nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.ji-offcanvas--top .ji-oc-nav a { border-bottom: none; }

/* Off-Canvas Kontakt-/Social-Block etwas kompakter */
.ji-offcanvas .ji-contact,
.ji-offcanvas .ji-social { margin-block: 0; }

/* Admin-Leiste: Logo und Warn-Button (bis 1.9.134 Inline-Styles in index.php) */
.ji-admin-bar-logo {
    height: 20px;
    vertical-align: middle;
    margin-right: 4px;
}

.ji-abar-btn.ji-abar-btn--warn {
    background: #fd7e14;
    border-color: #fd7e14;
    color: #fff;
    font-weight: 600;
}

.ji-abar-btn.ji-abar-btn--warn:hover,
.ji-abar-btn.ji-abar-btn--warn:focus {
    background: #e8690b;
    border-color: #e8690b;
    color: #fff;
}