*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.qn-site{margin:0;background:var(--qn-bg,#fff);color:var(--qn-text,#132238);font-family:var(--qn-font-family,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:var(--qn-font-size,17px);line-height:1.6}
img{max-width:100%;height:auto}
a{color:var(--qn-accent,#1689ff)}
h1,h2,h3,h4,h5,h6{font-weight:var(--qn-heading-weight,700);line-height:1.1;letter-spacing:-.025em}
.qn-shell{width:min(calc(100% - 40px),var(--qn-container,1280px));margin-inline:auto}
.qn-skip{position:absolute;left:-9999px;top:10px;background:#fff;color:#000;padding:10px 14px;z-index:99999}.qn-skip:focus{left:10px}
.qn-topbar{border-bottom:1px solid var(--qn-line,#e4e9ef);font-size:.88rem;color:var(--qn-muted,#687385)}
.qn-header{height:var(--qn-header-height,82px);background:rgba(255,255,255,.96);border-bottom:1px solid var(--qn-line,#e4e9ef);z-index:1000}
.qn-sticky-header .qn-header{position:sticky;top:0;backdrop-filter:blur(12px)}
.qn-header-inner{height:100%;display:flex;align-items:center;gap:28px}
.qn-brand{display:flex;flex-direction:column;text-decoration:none;color:var(--qn-primary,#132238);min-width:0}
.qn-brand-name{font-weight:800;font-size:1.15rem;line-height:1.05}.qn-brand small{color:var(--qn-muted,#687385);font-size:.72rem;margin-top:4px}
.qn-menu{margin-left:auto}.qn-menu ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:24px}.qn-menu a{text-decoration:none;color:var(--qn-text,#132238);font-weight:650}
.qn-menu .current>a,.qn-menu a:hover{color:var(--qn-accent,#1689ff)}
.qn-header-extra{display:flex;align-items:center;gap:10px}
.qn-menu-toggle{display:none;margin-left:auto;border:1px solid var(--qn-line);background:#fff;border-radius:10px;padding:9px 12px;font:inherit;font-weight:700}
.qn-hero-module{width:100%}
.qn-breadcrumbs{border-bottom:1px solid var(--qn-line);color:var(--qn-muted);font-size:.9rem;padding:10px 0}
.qn-main{padding:36px 0 56px}
.qn-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.qn-layout.has-left{grid-template-columns:250px minmax(0,1fr)}
.qn-layout.has-right{grid-template-columns:minmax(0,1fr) 250px}
.qn-layout.has-left.has-right{grid-template-columns:230px minmax(0,1fr) 230px}
.qn-component{min-width:0;width:min(100%,var(--qn-content,1120px));margin-inline:auto}
.qn-sidebar{min-width:0}
.qn-module-card{border:1px solid var(--qn-line);border-radius:var(--qn-radius);padding:18px;background:var(--qn-surface)}
.qn-above,.qn-below{margin-block:18px}
.qn-footer{border-top:1px solid var(--qn-line);background:var(--qn-surface);padding:42px 0 24px}
.qn-footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.qn-footer-bottom{display:flex;justify-content:space-between;gap:24px;align-items:center;border-top:1px solid var(--qn-line);padding-top:18px;margin-top:26px;color:var(--qn-muted);font-size:.88rem}
.qn-powered strong{color:var(--qn-primary)}
.qn-button,.qn-offline-form button{display:inline-block;border:0;background:var(--qn-primary,#132238);color:#fff;text-decoration:none;padding:12px 18px;border-radius:12px;font:inherit;font-weight:750;cursor:pointer}
.qn-error-page,.qn-offline-page{min-height:100vh;display:grid;place-items:center;padding:30px;background:#f5f8fb}
.qn-error-box,.qn-offline-box{max-width:640px;background:#fff;border:1px solid #e4e9ef;border-radius:22px;padding:42px;text-align:center}
.qn-error-code{font-size:5rem;font-weight:800;line-height:1;color:var(--qn-accent,#1689ff)}
.qn-kicker{letter-spacing:.16em;text-transform:uppercase;font-size:.75rem;font-weight:800;color:#687385}
.qn-offline-form{display:grid;gap:10px;margin-top:22px}.qn-offline-form input{padding:12px;border:1px solid #ccd5df;border-radius:10px;font:inherit}
.qn-component-only{padding:24px}
@media(max-width:960px){
  .qn-header-inner{gap:16px}
  .qn-menu-toggle{display:block}
  .qn-menu{display:none;position:absolute;left:20px;right:20px;top:calc(var(--qn-header-height) - 4px);background:#fff;border:1px solid var(--qn-line);border-radius:16px;padding:14px;box-shadow:0 18px 45px rgba(14,28,45,.12)}
  .qn-menu.is-open{display:block}
  .qn-menu ul{flex-direction:column;align-items:stretch;gap:4px}.qn-menu a{display:block;padding:10px 12px;border-radius:8px}
  .qn-layout,.qn-layout.has-left,.qn-layout.has-right,.qn-layout.has-left.has-right{grid-template-columns:1fr}
  .qn-sidebar-left{order:2}.qn-component{order:1}.qn-sidebar-right{order:3}
}
@media(max-width:700px){
  .qn-shell{width:min(calc(100% - 28px),var(--qn-container,1280px))}
  .qn-header-extra{display:none}
  .qn-footer-grid{grid-template-columns:1fr}
  .qn-footer-bottom{align-items:flex-start;flex-direction:column}
}


/* QUVENTY NEXA 0.1.4 – full width desktop navigation + mobile hamburger */
.qn-header{height:auto}
.qn-header-brandrow{background:rgba(255,255,255,.98)}
.qn-header-inner{min-height:var(--qn-header-height,82px);height:auto}
.qn-header-extra{margin-left:auto}
.qn-menu-toggle{margin-left:auto}
.qn-navrow{border-top:1px solid var(--qn-line,#e4e9ef);background:#fff}
.qn-navrow .qn-shell{position:relative}
.qn-menu{margin-left:0;width:100%}
.qn-menu ul{width:100%;justify-content:flex-start;gap:0}
.qn-menu li{display:block}
.qn-menu a{display:block;padding:14px 18px;border-bottom:3px solid transparent}
.qn-menu .current>a,.qn-menu a:hover{border-bottom-color:var(--qn-accent,#1689ff)}
.qn-hamburger{display:inline-flex;width:22px;height:16px;flex-direction:column;justify-content:space-between}
.qn-hamburger span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px}
.qn-menu-toggle{align-items:center;gap:9px}
@media(min-width:961px){
  .qn-menu-toggle{display:none}
  .qn-navrow{display:block}
  .qn-menu{display:block!important;position:static!important;border:0!important;box-shadow:none!important;padding:0!important;background:transparent!important}
}
@media(max-width:960px){
  .qn-header{position:relative}
  .qn-menu-toggle{display:inline-flex}
  .qn-menu-label{font-size:.95rem}
  .qn-navrow{border-top:0}
  .qn-navrow .qn-shell{width:100%;margin:0}
  .qn-menu{display:none;position:absolute;left:14px;right:14px;top:0;width:auto;background:#fff;border:1px solid var(--qn-line);border-radius:16px;padding:10px;box-shadow:0 18px 45px rgba(14,28,45,.15);z-index:1200}
  .qn-menu.is-open{display:block}
  .qn-menu ul{flex-direction:column;align-items:stretch;gap:2px}
  .qn-menu a{padding:12px 14px;border-bottom:0;border-radius:10px}
  .qn-menu .current>a,.qn-menu a:hover{background:var(--qn-surface,#f5f8fb)}
}


/* QUVENTY NEXA 0.1.5
   Einheitliche Darstellung aller Hauptmenüpunkte.
   Neu angelegte Hauptpunkte erhalten automatisch dieselbe Schriftstärke. */
.qn-mainnav > ul > li > a,
.qn-mainnav > ul > li > span,
.qn-mainnav .mod-menu > li > a,
.qn-mainnav .mod-menu > li > span,
.qn-navigation > ul > li > a,
.qn-navigation > ul > li > span,
.qn-navigation .mod-menu > li > a,
.qn-navigation .mod-menu > li > span,
header nav > ul > li > a,
header nav > ul > li > span,
header nav .mod-menu > li > a,
header nav .mod-menu > li > span {
    font-weight: 700;
}


/* QUVENTY NEXA 0.1.6
   Einheitliche Schriftstärke für ALLE Punkte der obersten Navigationsebene,
   unabhängig davon, ob es sich um Link, Überschrift oder anderen Menütyp handelt. */
.qn-mainnav .mod-menu > li,
.qn-mainnav .mod-menu > li > *,
.qn-navigation .mod-menu > li,
.qn-navigation .mod-menu > li > *,
header nav .mod-menu > li,
header nav .mod-menu > li > *,
header .mod-menu > li,
header .mod-menu > li > * {
    font-weight: 700 !important;
}

/* Auch typische Joomla-Menüüberschrift-Markups sicher erfassen */
.qn-mainnav .mod-menu > li > .mod-menu__heading,
.qn-navigation .mod-menu > li > .mod-menu__heading,
header nav .mod-menu > li > .mod-menu__heading,
header .mod-menu > li > .mod-menu__heading {
    font-weight: 700 !important;
}


/* QUVENTY NEXA 0.1.7
   Einheitliche Abstände für alle Hauptmenüpunkte – unabhängig vom Menütyp.
   Der Abstand sitzt jetzt auf dem Listenelement statt nur auf anklickbaren Links. */
.qn-mainnav .mod-menu,
.qn-navigation .mod-menu,
header nav .mod-menu,
header .mod-menu {
    display: flex;
    align-items: center;
}

.qn-mainnav .mod-menu > li,
.qn-navigation .mod-menu > li,
header nav .mod-menu > li,
header .mod-menu > li {
    margin: 0 14px !important;
    padding: 0 !important;
}

/* Link und reine Überschrift sollen sich im Hauptmenü gleich verhalten. */
.qn-mainnav .mod-menu > li > a,
.qn-mainnav .mod-menu > li > span,
.qn-mainnav .mod-menu > li > .mod-menu__heading,
.qn-navigation .mod-menu > li > a,
.qn-navigation .mod-menu > li > span,
.qn-navigation .mod-menu > li > .mod-menu__heading,
header nav .mod-menu > li > a,
header nav .mod-menu > li > span,
header nav .mod-menu > li > .mod-menu__heading,
header .mod-menu > li > a,
header .mod-menu > li > span,
header .mod-menu > li > .mod-menu__heading {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
}

/* Erster und letzter Punkt ohne unnötigen Außenabstand. */
.qn-mainnav .mod-menu > li:first-child,
.qn-navigation .mod-menu > li:first-child,
header nav .mod-menu > li:first-child,
header .mod-menu > li:first-child {
    margin-left: 0 !important;
}

.qn-mainnav .mod-menu > li:last-child,
.qn-navigation .mod-menu > li:last-child,
header nav .mod-menu > li:last-child,
header .mod-menu > li:last-child {
    margin-right: 0 !important;
}

/* Mobile Navigation: vertikale Liste und saubere Abstände. */
@media (max-width: 900px) {
    .qn-mainnav .mod-menu,
    .qn-navigation .mod-menu,
    header nav .mod-menu,
    header .mod-menu {
        flex-direction: column;
        align-items: stretch;
    }

    .qn-mainnav .mod-menu > li,
    .qn-navigation .mod-menu > li,
    header nav .mod-menu > li,
    header .mod-menu > li {
        margin: 0 !important;
    }
}


/* QUVENTY NEXA 0.1.8
   Automatische Trennstriche zwischen Hauptmenüpunkten.
   Keine eigenen Menüeinträge nötig, kein Trenner nach dem letzten Punkt. */
.qn-mainnav .mod-menu > li:not(:last-child)::after,
.qn-navigation .mod-menu > li:not(:last-child)::after,
header nav .mod-menu > li:not(:last-child)::after,
header .mod-menu > li:not(:last-child)::after {
    content: "|";
    display: inline-block;
    margin-left: 14px;
    font-weight: 400;
    opacity: 0.55;
}

/* Hauptmenüpunkte und Trenner sauber in einer Zeile ausrichten */
.qn-mainnav .mod-menu > li,
.qn-navigation .mod-menu > li,
header nav .mod-menu > li,
header .mod-menu > li {
    display: inline-flex;
    align-items: center;
}

/* Mobile Navigation ohne Trennstriche */
@media (max-width: 900px) {
    .qn-mainnav .mod-menu > li::after,
    .qn-navigation .mod-menu > li::after,
    header nav .mod-menu > li::after,
    header .mod-menu > li::after {
        content: none !important;
        display: none !important;
    }
}


/* ==========================================================
   QUVENTY NEXA 0.1.9 – Dropdown Navigation
   Unterpunkte sind auf Desktop verborgen und erscheinen erst
   bei Hover/Fokus des zugehörigen Hauptmenüpunkts.
   ========================================================== */

@media (min-width: 901px) {
    /* Nur die oberste Ebene läuft horizontal. */
    .qn-mainnav .mod-menu,
    .qn-navigation .mod-menu,
    header nav .mod-menu,
    header .mod-menu {
        overflow: visible !important;
    }

    .qn-mainnav .mod-menu > li,
    .qn-navigation .mod-menu > li,
    header nav .mod-menu > li,
    header .mod-menu > li {
        position: relative;
    }

    /* Untermenü zunächst vollständig ausblenden. */
    .qn-mainnav .mod-menu > li > ul,
    .qn-navigation .mod-menu > li > ul,
    header nav .mod-menu > li > ul,
    header .mod-menu > li > ul {
        display: none !important;
        position: absolute !important;
        top: 100%;
        left: 0;
        z-index: 1000;
        min-width: 220px;
        margin: 0 !important;
        padding: 10px 0 !important;
        list-style: none;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 12px 30px rgba(0,0,0,.12);
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Maus und Tastatur: Untermenü öffnen. */
    .qn-mainnav .mod-menu > li:hover > ul,
    .qn-mainnav .mod-menu > li:focus-within > ul,
    .qn-navigation .mod-menu > li:hover > ul,
    .qn-navigation .mod-menu > li:focus-within > ul,
    header nav .mod-menu > li:hover > ul,
    header nav .mod-menu > li:focus-within > ul,
    header .mod-menu > li:hover > ul,
    header .mod-menu > li:focus-within > ul {
        display: flex !important;
    }

    /* Unterpunkte: normale vertikale Dropdown-Einträge. */
    .qn-mainnav .mod-menu > li > ul > li,
    .qn-navigation .mod-menu > li > ul > li,
    header nav .mod-menu > li > ul > li,
    header .mod-menu > li > ul > li {
        display: block !important;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        position: relative;
    }

    .qn-mainnav .mod-menu > li > ul > li > a,
    .qn-mainnav .mod-menu > li > ul > li > span,
    .qn-navigation .mod-menu > li > ul > li > a,
    .qn-navigation .mod-menu > li > ul > li > span,
    header nav .mod-menu > li > ul > li > a,
    header nav .mod-menu > li > ul > li > span,
    header .mod-menu > li > ul > li > a,
    header .mod-menu > li > ul > li > span {
        display: block !important;
        width: 100%;
        padding: 10px 18px !important;
        margin: 0 !important;
        white-space: nowrap;
        font-weight: 600 !important;
        text-decoration: none;
        box-sizing: border-box;
    }

    /* Die | Trenner gelten ausschließlich für die Hauptmenüebene. */
    .qn-mainnav .mod-menu > li > ul > li::after,
    .qn-navigation .mod-menu > li > ul > li::after,
    header nav .mod-menu > li > ul > li::after,
    header .mod-menu > li > ul > li::after {
        content: none !important;
        display: none !important;
    }
}

/* Mobile: Untermenüs bleiben innerhalb der aufgeklappten Navigation
   sichtbar und werden sauber eingerückt. Kein Hover erforderlich. */
@media (max-width: 900px) {
    .qn-mainnav .mod-menu > li > ul,
    .qn-navigation .mod-menu > li > ul,
    header nav .mod-menu > li > ul,
    header .mod-menu > li > ul {
        position: static !important;
        display: block;
        width: 100%;
        margin: 4px 0 8px 0 !important;
        padding: 0 0 0 18px !important;
        list-style: none;
        box-shadow: none;
        background: transparent;
    }

    .qn-mainnav .mod-menu > li > ul > li,
    .qn-navigation .mod-menu > li > ul > li,
    header nav .mod-menu > li > ul > li,
    header .mod-menu > li > ul > li {
        margin: 0 !important;
        padding: 0 !important;
    }

    .qn-mainnav .mod-menu > li > ul > li::after,
    .qn-navigation .mod-menu > li > ul > li::after,
    header nav .mod-menu > li > ul > li::after,
    header .mod-menu > li > ul > li::after {
        content: none !important;
        display: none !important;
    }
}


/* ==========================================================
   QUVENTY NEXA 0.1.10 – Navigation Fix
   Die echte Template-Navigation verwendet .qn-menu.
   Deshalb werden Hauptmenü, Überschriften und Untermenüs
   ab hier direkt und eindeutig über .qn-menu gesteuert.
   ========================================================== */

/* ---------- DESKTOP ---------- */
@media (min-width: 901px) {

    /* Nur die erste Ebene ist eine horizontale Zeile. */
    .qn-menu > .mod-menu,
    .qn-menu > ul.mod-menu,
    .qn-menu > ul {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        width: 100%;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* Hauptmenüpunkte. */
    .qn-menu > .mod-menu > li,
    .qn-menu > ul.mod-menu > li,
    .qn-menu > ul > li {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* Link UND reine Überschrift identisch darstellen. */
    .qn-menu > .mod-menu > li > a,
    .qn-menu > .mod-menu > li > span,
    .qn-menu > ul.mod-menu > li > a,
    .qn-menu > ul.mod-menu > li > span,
    .qn-menu > ul > li > a,
    .qn-menu > ul > li > span {
        display: inline-flex !important;
        align-items: center !important;
        padding: 14px 18px !important;
        margin: 0 !important;
        border-bottom: 3px solid transparent;
        color: var(--qn-text,#132238);
        font-weight: 700 !important;
        line-height: 1.2;
        text-decoration: none;
        white-space: nowrap;
        cursor: default;
    }

    .qn-menu > .mod-menu > li > a,
    .qn-menu > ul.mod-menu > li > a,
    .qn-menu > ul > li > a {
        cursor: pointer;
    }

    /* Automatischer Trenner nur zwischen Punkten der ersten Ebene. */
    .qn-menu > .mod-menu > li:not(:last-child)::after,
    .qn-menu > ul.mod-menu > li:not(:last-child)::after,
    .qn-menu > ul > li:not(:last-child)::after {
        content: "|" !important;
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--qn-muted,#687385);
        font-weight: 400 !important;
        opacity: .55;
    }

    /* JEDE verschachtelte Liste der zweiten Ebene standardmäßig verstecken.
       Das überschreibt bewusst die alte globale Regel .qn-menu ul {display:flex}. */
    .qn-menu > .mod-menu > li > ul,
    .qn-menu > ul.mod-menu > li > ul,
    .qn-menu > ul > li > ul {
        display: none !important;
        position: absolute !important;
        top: calc(100% - 1px);
        left: 0;
        z-index: 3000;
        min-width: 230px;
        width: max-content;
        max-width: 360px;
        margin: 0 !important;
        padding: 8px 0 !important;
        list-style: none !important;
        background: #fff !important;
        border: 1px solid var(--qn-line,#e4e9ef);
        border-radius: 12px;
        box-shadow: 0 16px 38px rgba(14,28,45,.14);
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
    }

    /* Dropdown erst bei Maus oder Tastatur öffnen. */
    .qn-menu > .mod-menu > li:hover > ul,
    .qn-menu > .mod-menu > li:focus-within > ul,
    .qn-menu > ul.mod-menu > li:hover > ul,
    .qn-menu > ul.mod-menu > li:focus-within > ul,
    .qn-menu > ul > li:hover > ul,
    .qn-menu > ul > li:focus-within > ul {
        display: block !important;
    }

    /* Untermenüpunkte sind wieder normale vertikale Zeilen. */
    .qn-menu > .mod-menu > li > ul > li,
    .qn-menu > ul.mod-menu > li > ul > li,
    .qn-menu > ul > li > ul > li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .qn-menu > .mod-menu > li > ul > li > a,
    .qn-menu > .mod-menu > li > ul > li > span,
    .qn-menu > ul.mod-menu > li > ul > li > a,
    .qn-menu > ul.mod-menu > li > ul > li > span,
    .qn-menu > ul > li > ul > li > a,
    .qn-menu > ul > li > ul > li > span {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        padding: 11px 16px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: var(--qn-text,#132238);
        font-weight: 600 !important;
        line-height: 1.35;
        text-decoration: none;
        white-space: nowrap;
    }

    .qn-menu > .mod-menu > li > ul > li > a:hover,
    .qn-menu > ul.mod-menu > li > ul > li > a:hover,
    .qn-menu > ul > li > ul > li > a:hover {
        background: var(--qn-surface,#f5f8fb) !important;
        color: var(--qn-accent,#1689ff) !important;
    }

    /* Untermenü bekommt niemals Hauptmenü-Trenner. */
    .qn-menu > .mod-menu > li > ul > li::after,
    .qn-menu > ul.mod-menu > li > ul > li::after,
    .qn-menu > ul > li > ul > li::after {
        content: none !important;
        display: none !important;
    }
}

/* ---------- MOBILE ---------- */
@media (max-width: 900px) {

    /* Im geöffneten Hamburger-Menü ist die Navigation vertikal. */
    .qn-menu > .mod-menu,
    .qn-menu > ul.mod-menu,
    .qn-menu > ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 2px !important;
        width: 100%;
    }

    .qn-menu > .mod-menu > li,
    .qn-menu > ul.mod-menu > li,
    .qn-menu > ul > li {
        display: block !important;
        width: 100%;
        margin: 0 !important;
    }

    .qn-menu > .mod-menu > li > a,
    .qn-menu > .mod-menu > li > span,
    .qn-menu > ul.mod-menu > li > a,
    .qn-menu > ul.mod-menu > li > span,
    .qn-menu > ul > li > a,
    .qn-menu > ul > li > span {
        display: block !important;
        padding: 12px 14px !important;
        font-weight: 700 !important;
    }

    .qn-menu > .mod-menu > li::after,
    .qn-menu > ul.mod-menu > li::after,
    .qn-menu > ul > li::after {
        content: none !important;
        display: none !important;
    }

    /* Unterpunkte im mobilen Menü sichtbar und eingerückt. */
    .qn-menu > .mod-menu > li > ul,
    .qn-menu > ul.mod-menu > li > ul,
    .qn-menu > ul > li > ul {
        display: block !important;
        position: static !important;
        width: 100% !important;
        margin: 0 0 6px 0 !important;
        padding: 0 0 0 18px !important;
        list-style: none !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .qn-menu > .mod-menu > li > ul > li > a,
    .qn-menu > .mod-menu > li > ul > li > span,
    .qn-menu > ul.mod-menu > li > ul > li > a,
    .qn-menu > ul.mod-menu > li > ul > li > span,
    .qn-menu > ul > li > ul > li > a,
    .qn-menu > ul > li > ul > li > span {
        display: block !important;
        padding: 9px 14px !important;
        font-weight: 600 !important;
    }
}


/* ==========================================================
   QUVENTY NEXA 0.1.11 – Einheitliche Hauptnavigation
   Alle Hauptpunkte sehen gleich aus. Punkte mit Untermenü
   erhalten ausschließlich einen kleinen visuellen Pfeil.
   ========================================================== */

@media (min-width: 901px) {
    /* Exakt gleiche Typografie für Links und reine Überschriften. */
    .qn-menu > .mod-menu > li > a,
    .qn-menu > .mod-menu > li > span,
    .qn-menu > ul.mod-menu > li > a,
    .qn-menu > ul.mod-menu > li > span,
    .qn-menu > ul > li > a,
    .qn-menu > ul > li > span {
        font-family: inherit !important;
        font-size: inherit !important;
        font-style: normal !important;
        font-weight: 700 !important;
        letter-spacing: normal !important;
        text-transform: none !important;
        color: var(--qn-text,#132238) !important;
    }

    /* Joomla kennzeichnet Eltern mit Untermenü u.a. über parent/deeper.
       Der Pfeil ist rein visuell und verändert die Funktion nicht. */
    .qn-menu > .mod-menu > li.parent > a::after,
    .qn-menu > .mod-menu > li.parent > span::after,
    .qn-menu > .mod-menu > li.deeper > a::after,
    .qn-menu > .mod-menu > li.deeper > span::after,
    .qn-menu > ul.mod-menu > li.parent > a::after,
    .qn-menu > ul.mod-menu > li.parent > span::after,
    .qn-menu > ul.mod-menu > li.deeper > a::after,
    .qn-menu > ul.mod-menu > li.deeper > span::after,
    .qn-menu > ul > li.parent > a::after,
    .qn-menu > ul > li.parent > span::after,
    .qn-menu > ul > li.deeper > a::after,
    .qn-menu > ul > li.deeper > span::after {
        content: "▾";
        display: inline-block;
        margin-left: 6px;
        font-size: .72em;
        font-weight: 700;
        line-height: 1;
        vertical-align: .08em;
        opacity: .65;
    }
}

@media (max-width: 900px) {
    /* Auch mobil bleiben alle Hauptpunkte typografisch identisch. */
    .qn-menu > .mod-menu > li > a,
    .qn-menu > .mod-menu > li > span,
    .qn-menu > ul.mod-menu > li > a,
    .qn-menu > ul.mod-menu > li > span,
    .qn-menu > ul > li > a,
    .qn-menu > ul > li > span {
        font-family: inherit !important;
        font-size: inherit !important;
        font-style: normal !important;
        font-weight: 700 !important;
        letter-spacing: normal !important;
        text-transform: none !important;
    }

    .qn-menu > .mod-menu > li.parent > a::after,
    .qn-menu > .mod-menu > li.parent > span::after,
    .qn-menu > .mod-menu > li.deeper > a::after,
    .qn-menu > .mod-menu > li.deeper > span::after,
    .qn-menu > ul.mod-menu > li.parent > a::after,
    .qn-menu > ul.mod-menu > li.parent > span::after,
    .qn-menu > ul.mod-menu > li.deeper > a::after,
    .qn-menu > ul.mod-menu > li.deeper > span::after,
    .qn-menu > ul > li.parent > a::after,
    .qn-menu > ul > li.parent > span::after,
    .qn-menu > ul > li.deeper > a::after,
    .qn-menu > ul > li.deeper > span::after {
        content: "▾";
        display: inline-block;
        margin-left: 6px;
        font-size: .72em;
        line-height: 1;
        opacity: .65;
    }
}


/* ==========================================================
   QUVENTY NEXA 0.1.12 – Harte Vereinheitlichung Hauptmenü
   Ursache: Menütypen können unterschiedlich gerendert werden
   (Link, Überschrift, Button, div). Deshalb wird NICHT mehr
   nach dem HTML-Typ unterschieden.
   ========================================================== */

@media (min-width: 901px) {

    /* Die Schrift wird bereits am Hauptmenü-LI festgelegt.
       Damit erben auch Überschriften/Button-Typen exakt dieselbe Typografie. */
    .qn-menu > ul > li,
    .qn-menu > .mod-menu > li,
    .qn-menu > ul.mod-menu > li {
        font-family: inherit !important;
        font-size: 1rem !important;
        font-style: normal !important;
        font-weight: 700 !important;
        letter-spacing: normal !important;
        text-transform: none !important;
        line-height: 1.2 !important;
        color: var(--qn-text,#132238) !important;
    }

    /* ALLE möglichen direkten Ausgabeelemente eines Hauptmenüpunkts
       werden optisch gleich behandelt – nicht nur a/span. */
    .qn-menu > ul > li > :is(a, span, button, div),
    .qn-menu > .mod-menu > li > :is(a, span, button, div),
    .qn-menu > ul.mod-menu > li > :is(a, span, button, div),
    .qn-menu > ul > li > .mod-menu__heading,
    .qn-menu > .mod-menu > li > .mod-menu__heading,
    .qn-menu > ul.mod-menu > li > .mod-menu__heading {
        appearance: none !important;
        -webkit-appearance: none !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 14px 18px !important;
        border: 0 !important;
        border-bottom: 3px solid transparent !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        font: inherit !important;
        font-family: inherit !important;
        font-size: 1rem !important;
        font-style: normal !important;
        font-weight: 700 !important;
        letter-spacing: normal !important;
        text-transform: none !important;
        line-height: 1.2 !important;
        color: var(--qn-text,#132238) !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    /* Kleine Pfeilmarkierung wird anhand der tatsächlichen Existenz
       eines Untermenüs erzeugt. Keine Abhängigkeit von parent/deeper-Klassen. */
    .qn-menu > ul > li:has(> ul) > :is(a, span, button, div)::after,
    .qn-menu > .mod-menu > li:has(> ul) > :is(a, span, button, div)::after,
    .qn-menu > ul.mod-menu > li:has(> ul) > :is(a, span, button, div)::after {
        content: "▾" !important;
        display: inline-block !important;
        margin-left: 6px !important;
        padding: 0 !important;
        font-size: .70em !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        color: currentColor !important;
        opacity: .62;
        transform: translateY(-1px);
    }

    /* Falls der Browser/Renderer das Überschriftselement anders benennt,
       bekommt auch jedes direkte Element außer UL dieselbe Formatierung. */
    .qn-menu > ul > li > *:not(ul),
    .qn-menu > .mod-menu > li > *:not(ul),
    .qn-menu > ul.mod-menu > li > *:not(ul) {
        font-family: inherit !important;
        font-size: 1rem !important;
        font-style: normal !important;
        font-weight: 700 !important;
        letter-spacing: normal !important;
        text-transform: none !important;
        line-height: 1.2 !important;
        color: var(--qn-text,#132238) !important;
    }

    /* Dropdown bleibt verborgen bis Hover/Fokus. */
    .qn-menu > ul > li > ul,
    .qn-menu > .mod-menu > li > ul,
    .qn-menu > ul.mod-menu > li > ul {
        display: none !important;
    }

    .qn-menu > ul > li:hover > ul,
    .qn-menu > ul > li:focus-within > ul,
    .qn-menu > .mod-menu > li:hover > ul,
    .qn-menu > .mod-menu > li:focus-within > ul,
    .qn-menu > ul.mod-menu > li:hover > ul,
    .qn-menu > ul.mod-menu > li:focus-within > ul {
        display: block !important;
    }
}

@media (max-width: 900px) {
    .qn-menu > ul > li,
    .qn-menu > .mod-menu > li,
    .qn-menu > ul.mod-menu > li {
        font-family: inherit !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        font-style: normal !important;
    }

    .qn-menu > ul > li > *:not(ul),
    .qn-menu > .mod-menu > li > *:not(ul),
    .qn-menu > ul.mod-menu > li > *:not(ul) {
        font: inherit !important;
        font-family: inherit !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        font-style: normal !important;
        color: var(--qn-text,#132238) !important;
    }

    .qn-menu > ul > li:has(> ul) > :is(a, span, button, div)::after,
    .qn-menu > .mod-menu > li:has(> ul) > :is(a, span, button, div)::after,
    .qn-menu > ul.mod-menu > li:has(> ul) > :is(a, span, button, div)::after {
        content: "▾" !important;
        display: inline-block !important;
        margin-left: 6px !important;
        font-size: .70em !important;
        font-weight: 700 !important;
        opacity: .62;
    }
}


/* 0.1.13 – freigegebenes QUVENTY NEXA Logo dezent im Footer */
.qn-powered-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:var(--qn-muted,#687385);
    font-size:.82rem;
    white-space:nowrap;
}
.qn-powered-logo img{
    display:block;
    width:92px;
    height:auto;
    max-height:48px;
    object-fit:contain;
    opacity:.88;
}
.qn-powered-logo:hover img{opacity:1}
@media(max-width:700px){
    .qn-powered-logo{
        white-space:normal;
        justify-content:flex-start;
    }
    .qn-powered-logo img{width:82px}
}


/* ==========================================================
   QUVENTY NEXA 0.2.0 – neue leichte Startseite
   ========================================================== */
.qn-built-in-logo{display:block;width:min(290px,45vw);height:auto}
.qn-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}
.qn-nexa-home{position:relative;min-height:calc(100svh - 120px);overflow:hidden;color:#102a46;background:#fff}
.qn-nexa-home-bg{position:absolute;inset:0;background-image:var(--qn-nexa-bg);background-size:cover;background-position:center;z-index:0}
.qn-nexa-home-content{position:relative;z-index:1;width:min(calc(100% - 64px),1480px);min-height:inherit;margin-inline:auto;padding:52px 0 28px;display:flex;flex-direction:column;align-items:center}
.qn-nexa-statement{text-align:center;max-width:850px}
.qn-nexa-statement h1{margin:0;color:#092847;font-size:clamp(2.9rem,4.5vw,5.1rem);font-weight:650;letter-spacing:-.045em;line-height:1.02}
.qn-nexa-statement i{display:block;width:62px;height:3px;background:#1689ff;margin:24px auto}
.qn-nexa-statement p{margin:0;font-size:clamp(1rem,1.45vw,1.4rem);line-height:1.45;color:#253f5a}
.qn-nexa-competences{margin:34px 0 28px;display:flex;justify-content:center;align-items:stretch;max-width:760px}
.qn-nexa-competence{width:240px;padding:0 24px;text-align:center;color:#102a46;text-decoration:none;border-right:1px solid rgba(16,42,70,.13);transition:transform .18s ease,color .18s ease}
.qn-nexa-competence:last-child{border-right:0}.qn-nexa-competence:hover{transform:translateY(-2px);color:#087fc8}
.qn-nexa-competence img{display:block;width:44px;height:44px;margin:0 auto 10px}.qn-nexa-competence strong{display:block;font-size:.83rem;line-height:1.2}
.qn-nexa-competence span{display:block;margin-top:6px;font-size:.91rem;line-height:1.35;color:#4d6074}
.qn-nexa-dialog{width:min(900px,92vw);margin-top:auto;padding:24px 34px 22px;text-align:center;background:rgba(255,255,255,.95);border:1px solid rgba(17,46,77,.08);border-radius:26px;box-shadow:0 18px 50px rgba(35,60,83,.14);backdrop-filter:blur(14px)}
.qn-nexa-dialog h2{margin:0;color:#0c2b49;font-size:clamp(1.55rem,2vw,2rem);font-weight:720}.qn-nexa-dialog>p{margin:5px 0 17px;color:#4f6071;font-size:.96rem}
.qn-nexa-input{width:100%;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #d6dfe7;border-radius:999px;padding:5px 6px 5px 22px;box-shadow:0 2px 9px rgba(17,46,77,.04)}
.qn-nexa-input input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#102a46;font:inherit;font-size:1.08rem;padding:10px 0}.qn-nexa-input input::placeholder{color:#a2adb8}
.qn-nexa-input button{width:50px;height:50px;flex:0 0 50px;border:0;border-radius:50%;color:#fff;background:#0784cf;font-size:1.65rem;line-height:1;cursor:pointer}
.qn-nexa-or{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0;color:#87929c;font-size:.84rem}.qn-nexa-or::before,.qn-nexa-or::after{content:"";width:78px;height:1px;background:#d9e0e6}
.qn-nexa-voice{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:9px 22px;border:1px solid #1689ff;border-radius:999px;color:#0977bd;text-decoration:none;font-size:.82rem;font-weight:760;letter-spacing:.01em}
.qn-nexa-voice:hover{background:#f4faff}.qn-mic{font-size:1.25rem;color:#1689ff}
.qn-nexa-quick-label{margin:13px 0 6px;color:#536679;font-size:.83rem}
.qn-nexa-quick{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:0}
.qn-nexa-quick a{min-width:126px;display:flex;align-items:center;justify-content:center;gap:7px;padding:5px 13px;border-right:1px solid #d9e0e6;color:#19354f;text-decoration:none;font-size:.86rem;line-height:1.15}
.qn-nexa-quick a:last-child{border-right:0}.qn-nexa-quick a:hover{color:#0784cf}.qn-nexa-quick img{width:22px;height:22px;flex:0 0 22px}
.qn-nexa-menu-note{margin:13px 0 0;font-size:.84rem;color:#435a6f}
@media(min-width:961px){.qn-header-brandrow{background:rgba(255,255,255,.91);backdrop-filter:blur(12px)}.qn-navrow{background:rgba(255,255,255,.95)}}
@media(max-width:760px){
    .qn-built-in-logo{width:min(300px,68vw)}
    .qn-nexa-home{min-height:auto}.qn-nexa-home-bg{background-position:center top;opacity:.92}
    .qn-nexa-home-content{width:min(calc(100% - 28px),720px);padding:26px 0 22px}
    .qn-nexa-statement{max-width:92%}.qn-nexa-statement h1{font-size:clamp(2.15rem,10vw,3.4rem);line-height:1.04}.qn-nexa-statement i{margin:17px auto}.qn-nexa-statement p{font-size:1rem}
    .qn-nexa-competences{width:100%;margin:22px 0 18px;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}.qn-nexa-competences::-webkit-scrollbar{display:none}
    .qn-nexa-competence{min-width:155px;width:155px;padding:0 11px}.qn-nexa-competence img{width:34px;height:34px}.qn-nexa-competence strong{font-size:.72rem}.qn-nexa-competence span{font-size:.78rem}
    .qn-nexa-dialog{width:100%;margin-top:0;padding:20px 15px 18px;border-radius:22px}.qn-nexa-dialog h2{font-size:1.55rem}.qn-nexa-dialog>p{font-size:.9rem;line-height:1.4}
    .qn-nexa-input{padding-left:16px}.qn-nexa-input input{font-size:1rem}.qn-nexa-input button{width:46px;height:46px;flex-basis:46px}
    .qn-nexa-voice{width:auto;max-width:100%;font-size:.75rem}
    .qn-nexa-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
    .qn-nexa-quick a{min-width:0;padding:9px 4px;border:1px solid #e1e7ed!important;border-radius:12px;flex-direction:column;font-size:.72rem;background:rgba(255,255,255,.86)}
    .qn-nexa-quick img{width:24px;height:24px}.qn-nexa-menu-note{font-size:.78rem}
}
\n\n/* ==========================================================\n   QUVENTY NEXA 0.2.1 – Startseite vertikal kompakter\n   Ziel: kompletter Dialog inkl. 6 Direkteinstiege im ersten Blickfeld\n   ========================================================== */\n.qn-nexa-home{min-height:calc(100svh - 94px)}\n.qn-nexa-home-content{padding-top:24px;padding-bottom:10px}\n.qn-nexa-statement h1{font-size:clamp(2.35rem,3.55vw,4rem);line-height:1.01}\n.qn-nexa-statement i{margin:12px auto}\n.qn-nexa-statement p{font-size:clamp(.94rem,1.12vw,1.1rem);line-height:1.32}\n.qn-nexa-competences{margin:14px 0 10px}\n.qn-nexa-competence{padding-inline:18px}\n.qn-nexa-competence img{width:34px;height:34px;margin-bottom:5px}\n.qn-nexa-competence strong{font-size:.76rem}\n.qn-nexa-competence span{margin-top:2px;font-size:.80rem}\n.qn-nexa-dialog{margin-top:0;padding:14px 28px 12px;border-radius:22px}\n.qn-nexa-dialog h2{font-size:clamp(1.32rem,1.55vw,1.62rem)}\n.qn-nexa-dialog>p{margin:2px 0 9px;font-size:.86rem}\n.qn-nexa-input{padding-top:2px;padding-bottom:2px}\n.qn-nexa-input input{padding:6px 0;font-size:.98rem}\n.qn-nexa-input button{width:42px;height:42px;flex-basis:42px;font-size:1.35rem}\n.qn-nexa-or{margin:4px 0}\n.qn-nexa-voice{padding:6px 17px;font-size:.76rem}\n.qn-nexa-quick-label{margin:7px 0 3px}\n.qn-nexa-quick a{padding-top:2px;padding-bottom:2px;font-size:.80rem}\n.qn-nexa-quick img{width:19px;height:19px;flex-basis:19px}\n.qn-nexa-menu-note{margin-top:5px;font-size:.76rem}\n@media(max-height:900px) and (min-width:761px){\n  .qn-nexa-home-content{padding-top:14px;padding-bottom:8px}\n  .qn-nexa-statement h1{font-size:clamp(2.05rem,3vw,3.4rem)}\n  .qn-nexa-statement i{margin:8px auto}\n  .qn-nexa-statement p{font-size:.94rem}\n  .qn-nexa-competences{margin:9px 0 8px}\n  .qn-nexa-dialog{padding:12px 24px 10px}\n  .qn-nexa-dialog>p{margin-bottom:7px}\n  .qn-nexa-quick-label{margin-top:6px}\n  .qn-nexa-menu-note{margin-top:4px}\n}\n@media(max-width:760px){\n  .qn-nexa-home-content{padding-top:16px;padding-bottom:10px}\n  .qn-nexa-statement h1{font-size:clamp(1.9rem,8.4vw,2.65rem)}\n  .qn-nexa-statement i{margin:10px auto}\n  .qn-nexa-statement p{font-size:.90rem;line-height:1.3}\n  .qn-nexa-competences{margin:11px 0 9px}\n  .qn-nexa-dialog{padding:14px 12px 12px}\n  .qn-nexa-dialog h2{font-size:1.28rem}\n  .qn-nexa-dialog>p{margin-bottom:7px;font-size:.81rem}\n  .qn-nexa-input button{width:42px;height:42px;flex-basis:42px}\n  .qn-nexa-quick{grid-template-columns:repeat(3,1fr);gap:4px}\n  .qn-nexa-quick a{padding:6px 3px}\n}\n

/* ==========================================================
   QUVENTY NEXA 0.2.2
   Reine Positionskorrektur nach Live-Screenshot:
   NEXA-Dialog ca. 120px höher, ohne Navigation/Bild/Funktionen anzutasten.
   ========================================================== */

/* Desktop */
@media (min-width: 761px) {
    .qn-nexa-home-content{
        padding-top:18px;
        justify-content:flex-start;
    }

    .qn-nexa-statement{
        transform:translateY(-4px);
    }

    .qn-nexa-competences{
        margin-top:10px;
        margin-bottom:0;
    }

    .qn-nexa-dialog{
        margin-top:-18px;
        transform:translateY(-34px);
        position:relative;
        z-index:3;
    }

    .qn-nexa-menu-note{
        transform:translateY(-32px);
        margin-top:0;
    }
}

/* Bei typischen Notebook-/Desktop-Höhen wie im Live-Screenshot
   wird der Dialog noch deutlicher in das Hero-Bild gezogen. */
@media (min-width: 761px) and (max-height: 950px) {
    .qn-nexa-statement h1{
        font-size:clamp(2.15rem,3.15vw,3.55rem);
    }

    .qn-nexa-statement i{
        margin:8px auto 10px;
    }

    .qn-nexa-statement p{
        line-height:1.25;
    }

    .qn-nexa-competences{
        margin-top:8px;
        margin-bottom:0;
    }

    .qn-nexa-competence img{
        width:34px;
        height:34px;
        margin-bottom:4px;
    }

    .qn-nexa-dialog{
        transform:translateY(-58px);
    }

    .qn-nexa-menu-note{
        transform:translateY(-56px);
    }
}

/* Noch niedrigere Browserfenster: Inhalt bleibt lesbar,
   Dialog wird aber konsequent im ersten Blickfeld gehalten. */
@media (min-width: 761px) and (max-height: 820px) {
    .qn-nexa-home-content{
        padding-top:10px;
    }

    .qn-nexa-statement h1{
        font-size:clamp(2rem,2.8vw,3.1rem);
    }

    .qn-nexa-statement i{
        margin:6px auto 8px;
    }

    .qn-nexa-competences{
        margin-top:5px;
    }

    .qn-nexa-dialog{
        transform:translateY(-76px);
    }

    .qn-nexa-menu-note{
        transform:translateY(-74px);
    }
}

/* Mobil bleibt die bereits funktionierende 0.2.1-Anordnung erhalten. */
@media (max-width:760px){
    .qn-nexa-dialog,
    .qn-nexa-menu-note,
    .qn-nexa-statement{
        transform:none;
    }
}


/* ==========================================================
   QUVENTY NEXA 0.2.3 – Feinjustierung nach Live-Screenshot
   1) Hauptaussage + Kompetenz-Hinweise nach oben
   2) NEXA-Dialog etwas tiefer, damit nichts überdeckt wird
   ========================================================== */

@media (min-width:761px) {
    .qn-nexa-statement{
        transform:translateY(-18px);
    }

    .qn-nexa-competences{
        transform:translateY(-22px);
        margin-top:4px;
        margin-bottom:0;
    }

    .qn-nexa-dialog{
        transform:translateY(-38px);
        margin-top:0;
    }

    .qn-nexa-menu-note{
        transform:translateY(-34px);
    }
}

/* Genau für typische Desktop-/Notebook-Höhen wie im Screenshot */
@media (min-width:761px) and (max-height:950px) {
    .qn-nexa-statement{
        transform:translateY(-24px);
    }

    .qn-nexa-competences{
        transform:translateY(-30px);
        margin-top:2px;
    }

    .qn-nexa-dialog{
        transform:translateY(-42px);
    }

    .qn-nexa-menu-note{
        transform:translateY(-38px);
    }
}

/* Sehr niedrige Browserfenster: Dialog weiterhin vollständig sichtbar */
@media (min-width:761px) and (max-height:820px) {
    .qn-nexa-statement{
        transform:translateY(-28px);
    }

    .qn-nexa-competences{
        transform:translateY(-34px);
    }

    .qn-nexa-dialog{
        transform:translateY(-50px);
    }

    .qn-nexa-menu-note{
        transform:translateY(-46px);
    }
}

/* Mobil unverändert zur 0.2.2 */
@media (max-width:760px){
    .qn-nexa-statement,
    .qn-nexa-competences,
    .qn-nexa-dialog,
    .qn-nexa-menu-note{
        transform:none;
    }
}


/* ==========================================================
   QUVENTY NEXA 0.2.4 – Positionen über Template-Backend steuerbar
   Werte werden als CSS-Variablen aus den Template-Parametern gesetzt.
   ========================================================== */

@media (min-width:761px) {
    .qn-nexa-statement{
        transform:translateY(calc(-18px + var(--qn-statement-offset, 0px)));
    }

    .qn-nexa-competences{
        transform:translateY(calc(-22px + var(--qn-competences-offset, 0px)));
        margin-bottom:var(--qn-dialog-gap, 0px);
    }

    .qn-nexa-dialog{
        width:min(var(--qn-dialog-width, 900px), 92vw);
        transform:translateY(calc(-38px + var(--qn-dialog-offset, 0px)));
    }

    .qn-nexa-menu-note{
        transform:translateY(calc(-34px + var(--qn-dialog-offset, 0px)));
    }
}

@media (min-width:761px) and (max-height:950px) {
    .qn-nexa-statement{
        transform:translateY(calc(-24px + var(--qn-statement-offset, 0px)));
    }

    .qn-nexa-competences{
        transform:translateY(calc(-30px + var(--qn-competences-offset, 0px)));
        margin-bottom:var(--qn-dialog-gap, 0px);
    }

    .qn-nexa-dialog{
        width:min(var(--qn-dialog-width, 900px), 92vw);
        transform:translateY(calc(-42px + var(--qn-dialog-offset, 0px)));
    }

    .qn-nexa-menu-note{
        transform:translateY(calc(-38px + var(--qn-dialog-offset, 0px)));
    }
}

@media (min-width:761px) and (max-height:820px) {
    .qn-nexa-statement{
        transform:translateY(calc(-28px + var(--qn-statement-offset, 0px)));
    }

    .qn-nexa-competences{
        transform:translateY(calc(-34px + var(--qn-competences-offset, 0px)));
        margin-bottom:var(--qn-dialog-gap, 0px);
    }

    .qn-nexa-dialog{
        width:min(var(--qn-dialog-width, 900px), 92vw);
        transform:translateY(calc(-50px + var(--qn-dialog-offset, 0px)));
    }

    .qn-nexa-menu-note{
        transform:translateY(calc(-46px + var(--qn-dialog-offset, 0px)));
    }
}

@media (max-width:760px) {
    .qn-nexa-dialog{
        width:100%;
    }
}


/* ==========================================================
   QUVENTY NEXA 0.2.8 – Intelligence Test
   Additiv auf Master 0.2.4.
   ========================================================== */
.qn-conversation-back{
    display:none;border:0;background:transparent;padding:0;margin:0 0 14px;
    font:inherit;font-size:14px;font-weight:650;color:#526170;cursor:pointer;
}
.qn-conversation-back:hover,.qn-conversation-back:focus-visible{color:#0b66b2}
.qn-conversation-topic{
    margin:0 0 9px;font-size:13px;font-weight:800;letter-spacing:.09em;
    text-transform:uppercase;color:#0b66b2;
}
.qn-conversation-response{max-width:780px;margin:4px auto 24px;text-align:center}
.qn-conversation-understood{
    color:#596777;font-size:clamp(16px,1.3vw,19px);line-height:1.5;margin-bottom:14px;
}
.qn-conversation-question{
    color:#102d4a;font-size:clamp(27px,3.2vw,42px);font-weight:760;
    line-height:1.12;letter-spacing:-.03em;
}
body.qn-conversation-mode .qn-nexa-home{
    min-height:calc(100vh - 145px)!important;background:#fbfcfd!important;
}
body.qn-conversation-mode .qn-nexa-home-bg{
    opacity:.055!important;filter:blur(10px) saturate(.35)!important;transform:scale(1.025)!important;
}
body.qn-conversation-mode .qn-nexa-statement,
body.qn-conversation-mode .qn-nexa-competences,
body.qn-conversation-mode .qn-nexa-menu-note{display:none!important}
body.qn-conversation-mode .qn-nexa-home-content{
    min-height:calc(100vh - 145px);display:flex!important;align-items:center!important;
    justify-content:center!important;padding-top:28px!important;padding-bottom:40px!important;
}
body.qn-conversation-mode .qn-nexa-dialog{
    position:relative!important;z-index:20!important;width:min(var(--qn-dialog-width,900px),92vw)!important;
    margin:0 auto!important;transform:none!important;box-shadow:0 22px 70px rgba(25,43,62,.10)!important;
}
body.qn-conversation-mode .qn-conversation-back{display:inline-block!important}
body.qn-conversation-busy .qn-nexa-dialog{opacity:.78}
body.qn-conversation-busy .qn-nexa-input button{cursor:wait}
@media(max-width:760px){
    body.qn-conversation-mode .qn-nexa-home,
    body.qn-conversation-mode .qn-nexa-home-content{min-height:calc(100vh - 90px)!important}
    body.qn-conversation-mode .qn-nexa-dialog{width:100%!important}
    .qn-conversation-response{text-align:left}
}


/* ==========================================================
   QUVENTY NEXA 0.2.9 – Interviewfortschritt & Abschluss
   Additiv auf 0.2.8 / Masterbasis 0.2.4.
   ========================================================== */
.qn-interview-progress{
    max-width:760px;margin:0 auto 26px;
}
.qn-interview-progress-head{
    display:flex;justify-content:space-between;gap:18px;align-items:center;
    margin-bottom:9px;font-size:13px;color:#667483;
}
.qn-interview-progress-head span{font-weight:700}
.qn-interview-progress-head strong{font-weight:800;color:#173b5e}
.qn-interview-progress-track{
    height:7px;border-radius:999px;background:#e8eef4;overflow:hidden;
}
.qn-interview-progress-track i{
    display:block;height:100%;border-radius:999px;background:#1689ff;
    transition:width .45s ease;
}
.qn-conversation-summary{
    margin:18px auto 22px;padding:20px 22px;max-width:760px;text-align:left;
    border:1px solid #dfe8f0;border-radius:16px;background:#f8fbfd;
    color:#23394e;font-size:17px;line-height:1.55;white-space:pre-wrap;
}
.qn-conversation-summary::before{
    content:"So haben wir Ihr Anliegen verstanden";
    display:block;margin-bottom:9px;font-size:12px;font-weight:800;
    letter-spacing:.08em;text-transform:uppercase;color:#1689ff;
}
.qn-conversation-complete{
    margin:22px auto 0;max-width:700px;padding:16px 18px;border-radius:14px;
    background:#eef8f3;color:#176b49;font-weight:750;
}


/* ==========================================================
   QUVENTY NEXA 0.2.10 – Betreiber-Menü im Frontend
   Nur für QUVENTY NEXA Betreiber und Super User sichtbar.
   ========================================================== */
.qn-operatorbar{
    position:relative;
    z-index:1100;
    background:#10263d;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.12);
}
.qn-operatorbar-inner{
    min-height:46px;
    display:flex;
    align-items:center;
    gap:22px;
}
.qn-operatorbar-brand{
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
    font-size:13px;
}
.qn-operatorbar-brand strong{
    letter-spacing:.04em;
}
.qn-operatorbar-brand>span:last-child{
    opacity:.68;
}
.qn-operatorbar-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#32c985;
    box-shadow:0 0 0 4px rgba(50,201,133,.13);
}
.qn-operatorbar-links{
    display:flex;
    align-items:center;
    gap:4px;
}
.qn-operatorbar-links a{
    color:#fff!important;
    text-decoration:none!important;
    padding:7px 11px;
    border-radius:8px;
    font-size:14px;
    font-weight:650;
    opacity:.86;
}
.qn-operatorbar-links a:hover,
.qn-operatorbar-links a:focus-visible{
    background:rgba(255,255,255,.1);
    opacity:1;
}
.qn-operatorbar-user{
    margin-left:auto;
    white-space:nowrap;
    font-size:12px;
    opacity:.72;
}
.qn-operatorbar-user strong{
    color:#fff;
}
@media(max-width:820px){
    .qn-operatorbar-inner{
        flex-wrap:wrap;
        gap:6px 12px;
        padding-top:8px;
        padding-bottom:8px;
    }
    .qn-operatorbar-links{
        order:3;
        width:100%;
        overflow-x:auto;
    }
    .qn-operatorbar-user{
        margin-left:auto;
    }
}
@media(max-width:520px){
    .qn-operatorbar-user{
        display:none;
    }
    .qn-operatorbar-links a{
        padding-left:9px;
        padding-right:9px;
        font-size:13px;
    }
}


/* QUVENTY NEXA 0.2.15 – Aktivitätsanzeige „Ich überlege …“ */
.qn-thinking[hidden] {
    display: none !important;
}
.qn-thinking {
    width: 100%;
    margin: 16px 0 8px;
}
.qn-thinking-label {
    margin-bottom: 7px;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #b4232f;
}
.qn-thinking-track {
    position: relative;
    width: 100%;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(180, 35, 47, 0.14);
}
.qn-thinking-runner {
    position: absolute;
    top: 0;
    left: 0;
    width: 28%;
    height: 100%;
    border-radius: inherit;
    background: #c62836;
    animation: qn-thinking-sweep 1.15s ease-in-out infinite alternate;
}
@keyframes qn-thinking-sweep {
    from { transform: translateX(-15%); }
    to { transform: translateX(275%); }
}
@media (prefers-reduced-motion: reduce) {
    .qn-thinking-runner {
        width: 100%;
        animation: none;
        transform: none;
    }
}


/* QUVENTY NEXA 0.2.18 – Mobile Sprachkommunikation */
.qn-nexa-voice {
    border: 0;
    cursor: pointer;
    font: inherit;
}
.qn-nexa-voice .qn-mic {
    font-size: .72em;
}
.qn-nexa-voice.is-listening {
    transform: translateY(-1px);
}
.qn-nexa-voice.is-listening .qn-mic {
    animation: qn-voice-pulse 1s ease-in-out infinite;
}
.qn-voice-status {
    margin-top: 10px;
    text-align: center;
    font-size: .92rem;
    font-weight: 700;
}
.qn-listen-answer {
    margin-top: 14px;
    border: 1px solid rgba(22,51,78,.18);
    background: #fff;
    color: inherit;
    border-radius: 999px;
    padding: 9px 14px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.qn-conversation-mode .qn-nexa-voice {
    display: inline-flex !important;
    margin-top: 14px;
}
@keyframes qn-voice-pulse {
    0%,100% { opacity:.45; transform:scale(.86); }
    50% { opacity:1; transform:scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
    .qn-nexa-voice.is-listening .qn-mic { animation:none; }
}


/* QUVENTY NEXA 0.2.19 – echter Mikrofon-Livepegel */
.qn-voice-meter {
    margin: 12px auto 0;
    max-width: 360px;
    text-align: center;
}
.qn-voice-meter-bars {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(22,51,78,.12);
    overflow: hidden;
}
.qn-voice-meter-bars i {
    display: block;
    width: 7px;
    height: 34px;
    border-radius: 999px;
    background: currentColor;
    transform: scaleY(.15);
    transform-origin: center;
    transition: transform 55ms linear;
    opacity: .78;
}
.qn-voice-meter-caption {
    margin-top: 7px;
    font-size: .8rem;
    opacity: .72;
}
.qn-mic-help {
    max-width: 620px;
    margin: 12px auto 0;
    padding: 12px 14px;
    border: 1px solid rgba(22,51,78,.14);
    border-radius: 12px;
    background: rgba(255,255,255,.86);
    font-size: .9rem;
    line-height: 1.45;
}
@media (max-width:480px) {
    .qn-voice-meter-bars { gap:3px; }
    .qn-voice-meter-bars i { width:6px; }
}


/* QUVENTY NEXA 0.2.20 – Stille-Erkennung */
.qn-voice-status:not([hidden]) {
    min-height: 1.4em;
}


/* QUVENTY NEXA – Freihändiger Sprachdialog */
.qn-voice-stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin: 10px auto 0;
    padding: 8px 16px;
    border: 1px solid rgba(22,51,78,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    color: inherit;
    font: inherit;
    font-size: .86rem;
    cursor: pointer;
}
.qn-voice-stop[hidden] { display: none !important; }
.qn-voice-stop:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* QUVENTY NEXA 0.2.23 – Footer Barrierefreiheit */
.qn-footer-accessibility{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .8rem;padding-top:.85rem;padding-bottom:1.15rem;font-size:.875rem;line-height:1.5}
.qn-footer-accessibility a{text-decoration:underline;text-underline-offset:.18em}
.qn-footer-accessibility a:focus-visible{outline:3px solid currentColor;outline-offset:3px}
@media (max-width:640px){.qn-footer-accessibility{align-items:flex-start;flex-direction:column}}


/* ==========================================================================
   QUVENTY NEXA 0.2.24 – Editoriales KI-Seitenlayout
   Bilder sind bewusst präsent, aber nicht dominant.
   ========================================================================== */

.qn-ai-page.qn-ai-page-editorial{
    width:min(1180px, calc(100% - 40px));
    margin-inline:auto;
    padding-block:clamp(28px, 5vw, 64px);
}

.qn-ai-page-editorial .qn-ai-hero{
    display:block;
    max-width:980px;
    margin:0 0 clamp(34px, 5vw, 64px);
    padding:0;
}

.qn-ai-page-editorial .qn-ai-hero .qn-ai-copy{
    max-width:920px;
}

.qn-ai-page-editorial .qn-ai-hero h1{
    margin:0 0 14px;
    font-size:clamp(2rem, 4.3vw, 3.6rem);
    line-height:1.08;
    text-wrap:balance;
}

.qn-ai-page-editorial .qn-ai-lead{
    max-width:860px;
    margin:0;
    font-size:clamp(1.05rem, 1.5vw, 1.25rem);
    line-height:1.65;
}

.qn-ai-page-editorial .qn-ai-section{
    margin:0;
    padding:clamp(26px, 4vw, 48px) 0;
    border-top:1px solid rgba(15,35,50,.12);
}

.qn-ai-page-editorial .qn-ai-section:first-of-type{
    border-top:0;
    padding-top:0;
}

.qn-ai-page-editorial .qn-ai-split{
    display:grid;
    grid-template-columns:minmax(280px, 38%) minmax(0, 1fr);
    gap:clamp(28px, 4.5vw, 58px);
    align-items:start;
}

.qn-ai-page-editorial .qn-ai-split .qn-ai-figure{
    grid-column:1;
    margin:0;
    width:100%;
    max-width:430px;
}

.qn-ai-page-editorial .qn-ai-split .qn-ai-copy{
    grid-column:2;
    min-width:0;
}

.qn-ai-page-editorial .qn-ai-copy h2{
    margin:0 0 14px;
    font-size:clamp(1.45rem, 2.2vw, 2rem);
    line-height:1.2;
    text-wrap:balance;
}

.qn-ai-page-editorial .qn-ai-copy h3{
    margin:1.4em 0 .55em;
    line-height:1.25;
}

.qn-ai-page-editorial .qn-ai-copy p,
.qn-ai-page-editorial .qn-ai-copy li{
    font-size:clamp(1rem, 1.15vw, 1.12rem);
    line-height:1.72;
}

.qn-ai-page-editorial .qn-ai-copy p:first-child{
    margin-top:0;
}

.qn-ai-page-editorial .qn-ai-figure img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:3 / 2;
    object-fit:cover;
    border-radius:10px;
}

.qn-ai-page-editorial .qn-ai-photo-label{
    margin-top:7px;
    font-size:.82rem;
    line-height:1.35;
    opacity:.72;
}

.qn-ai-page-editorial .qn-ai-more-images{
    display:block;
}

.qn-ai-page-editorial .qn-ai-gallery{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:clamp(16px, 2vw, 28px);
    margin-top:24px;
}

.qn-ai-page-editorial .qn-ai-gallery .qn-ai-figure{
    margin:0;
}

.qn-ai-page-editorial .qn-ai-cta{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:28px;
    align-items:center;
    margin-top:clamp(36px, 5vw, 68px);
    padding:clamp(24px, 3.5vw, 38px);
    border:1px solid rgba(15,35,50,.12);
    border-radius:12px;
    background:rgba(15,35,50,.035);
}

.qn-ai-page-editorial .qn-ai-cta h2{
    margin-top:0;
}

.qn-ai-page-editorial .qn-ai-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:.75rem 1.15rem;
    border-radius:8px;
    text-decoration:none;
    font-weight:700;
}

.qn-ai-page-editorial .qn-ai-action:focus-visible{
    outline:3px solid currentColor;
    outline-offset:4px;
}

@media (max-width: 820px){
    .qn-ai-page.qn-ai-page-editorial{
        width:min(100% - 28px, 760px);
    }

    .qn-ai-page-editorial .qn-ai-split{
        grid-template-columns:1fr;
        gap:18px;
    }

    .qn-ai-page-editorial .qn-ai-split .qn-ai-figure,
    .qn-ai-page-editorial .qn-ai-split .qn-ai-copy{
        grid-column:1;
    }

    .qn-ai-page-editorial .qn-ai-split .qn-ai-figure{
        width:min(100%, 520px);
        max-width:none;
    }

    .qn-ai-page-editorial .qn-ai-gallery{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }

    .qn-ai-page-editorial .qn-ai-cta{
        grid-template-columns:1fr;
    }
}

@media (max-width: 540px){
    .qn-ai-page-editorial .qn-ai-gallery{
        grid-template-columns:1fr;
    }

    .qn-ai-page-editorial .qn-ai-split .qn-ai-figure{
        width:100%;
    }
}

@media (prefers-reduced-motion: reduce){
    .qn-ai-page-editorial *,
    .qn-ai-page-editorial *::before,
    .qn-ai-page-editorial *::after{
        scroll-behavior:auto !important;
        transition:none !important;
        animation:none !important;
    }
}