/* ================================================= */
/*       BASE.CSS - rhenus-referenz.space/de         */
/* ================================================= */




/* ================================================= */
/* 1. DESIGN-SYSTEM / THEMES                         */
/* ================================================= */


:root {
    --bg-main: rgba(26, 29, 33, 1);
    --bg-soft: rgba(32, 36, 42, 1);
    --text-main: rgba(232, 236, 241, 1);
    --text-muted: rgba(174, 182, 191, 1);
    --accent: rgba(255,160,0, 1);

    --header-height: 96px;
    
}

body.light-theme {
    --bg-main: rgba(251, 251, 251, 1);
    --bg-soft: rgba(255, 255, 255, 1);
    --text-main: rgba(31, 46, 61, 1);
    --text-muted: rgba(74, 90, 106, 1);
}

/* ================================================= */
/* 2. GLOBAL RESET                                    */
/* ================================================= */

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

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

    width: 100%;
    max-width: 100%;

  
}

/* ================================================= */
/* 3. BASIS / SEITEN-FUNDAMENT                        */
/* ================================================= */

body {
    font-family: "Lab Grotesque", sans-serif;

    background: linear-gradient(
        180deg,
        var(--bg-main),
        var(--bg-soft)
    );

    background-attachment: scroll;

    width: 100%;
max-width: 100%;
    color: var(--text-main);

    line-height: 1.6;

   

    position: relative;

    letter-spacing: 0.02em;

    font-weight: 300;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* ================================================= */
/* ACCESS GATE                                      */
/* ================================================= */

/*.access-gate {
    position: fixed;
    inset: 0;

    background: rgba(0,0,0,0.96);

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 999999;
}

.access-box {
    width: min(92%, 460px);

    padding: 48px 32px;

    border: 1px solid rgba(255,255,255,0.12);

    background: rgba(10,10,10,0.98);

    text-align: center;
}

.access-box h1 {

    margin-bottom: 20px;

    font-size: 32px;
    font-weight: 500;

    color: rgba(255,255,255,1);
}

.access-box p {

    margin-bottom: 24px;

    line-height: 1.7;

    color: rgba(255,255,255,0.72);
}

.access-box input {

    width: 100%;

    padding: 14px 16px;
    margin-bottom: 18px;

    border: 1px solid rgba(255,255,255,0.12);

    background: rgba(255,255,255,0.04);

    color: rgba(255,255,255,1);
}

.access-box button {

    width: 100%;

    padding: 14px;

    border: none;

    background: rgba(255,255,255,1);

    color: rgba(0,0,0,1);

    cursor: pointer;
}

#access-message {

    margin-top: 18px;

    color: rgba(255,120,120,1);
}

body.locked {

    overflow: hidden;
}*/


/* ================================================= */
/* HEADING-SYSTEM — H1 BIS H6                        */
/* ================================================= */

h1 {

    font-family: "Inter", sans-serif;

    font-size: 40px;
    font-weight: 500;

    letter-spacing: 0.02em;
    line-height: 1.25;

    margin-top: 0;
    margin-bottom: 38px;
}

h2 {

    font-family: "Inter", sans-serif;

    font-size: 30px;
    font-weight: 500;

    letter-spacing: 0.015em;
    line-height: 1.3;

    margin-top: 34px;
    margin-bottom: 18px;
}

h3 {

    font-family: "Inter", sans-serif;

    font-size: 26px;
    font-weight: 400;

    letter-spacing: 0.015em;
    line-height: 1.4;

    margin-top: 34px;
    margin-bottom: 12px;
}

h4 {

    font-family: "Inter", sans-serif;

    font-size: 22px;
    font-weight: 400;

    letter-spacing: 0.02em;
    line-height: 1.4;

    margin-top: 28px;
    margin-bottom: 12px;
}

h5 {

    font-family: "Inter", sans-serif;

    font-size: 19px;
    font-weight: 400;

    letter-spacing: 0.02em;
    line-height: 1.45;

    margin-top: 24px;
    margin-bottom: 0;
}

h6 {

    font-family: "Inter", sans-serif;

    font-size: 16px;
    font-weight: 400;

    letter-spacing: 0.02em;
    line-height: 1.5;

    margin-top: 20px;
    margin-bottom: 8px;

    opacity: 0.85;
}

/* ================================================= */
/* TEXT-GRUNDLAGEN                                   */
/* ================================================= */

p {
    margin-bottom: 18px;
    font-size: 18px;
    letter-spacing: 0.01em;
}

ul {
    list-style: disc;

    margin-top: 28px;
    margin-bottom: 28px;

    padding-left: 20px;

    margin-left: auto;
    margin-right: auto;
}

li {
    display: list-item;

    font-size: 18px;

    letter-spacing: 0.02em;

    margin: 0 0 10px 0;
}

/* verhindert Abstandskollisionen */

section > *:last-child {
    margin-bottom: 0;
}

/* ================================================= */
/*  HEADER / NAVIGATION                             */
/* ================================================= */

header {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;

    background: rgba(32, 36, 42, 1);

    overflow: visible;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.50);
    
}

body.light-theme header {

    background: rgb(234, 224, 208);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);

    /* border-bottom: 1px solid rgba(31, 46, 61, 0.12); */
}



.layout-header {
    --header-pad-y: clamp(12px, 1.6vw, 32px);

    position: relative;

    max-width: 1340px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding-top: var(--header-pad-y);
    padding-bottom: var(--header-pad-y);

    padding-left: clamp(18px, 2vw, 28px);
    padding-right: clamp(18px, 2vw, 28px);
}

header nav {
    display: inline-flex;
    align-items: stretch;
    gap: 12px;

    position: relative;
    top: 0;

    align-self: stretch;
    
}

.nav-menu {
    list-style: none;

    display: flex;
    flex-direction: row;
    align-items: stretch;

    gap: 34px;
    white-space: nowrap;

    margin: 0;
    padding: 0;
}



.nav-menu a {

    display: flex;
    align-items: center;

    font-family: "Inter", sans-serif;
    font-size: 19.2px;
    font-weight: 400;
    letter-spacing: 0.075em;

    height: 44px;

    padding-top: 8px;

    line-height: 1;
    text-decoration: none;
    color: rgba(230, 230, 230, 1);

    transition:
        font-weight 0.15s ease,
        color 0.15s ease;
}

body.light-theme .nav-menu a {

    color: rgba(31, 46, 61, 1);

}

.nav-menu a:hover {
     color: rgba(255, 255, 255, 1);
    text-shadow: 0 0 0.6px currentColor;
}

body.light-theme .nav-menu a:hover {
    text-shadow: 0 0 0.6px currentColor;
    color: rgba(0, 0, 0, 1);
}

/* =================================== */
/*  NAV-MENÜ - TRENNSTRICHE            */
/* =================================== */

.nav-menu > li {
    position: relative;

    display: flex;
    align-items: center;
    
    }

  

.nav-menu > li.has-submenu::after {
    content: "";
    position: absolute;

    left: 0;
    right: 0;

    top: 100%;
    height: var(--header-pad-y);

    background: transparent;
}

.nav-menu > li > a {
    transform: scaleY(1.00);
    transform-origin: center;
}


/* ================================================= */
/* 5. DROPDOWN-MENÜ                                   */
/* ================================================= */

.nav-container {
   /* position: sticky; */
    display: flex;
    align-items: center;
}

.nav-button {
    font-size: 14px;
    letter-spacing: 0.08em;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    background: rgba(42, 52, 64, 1);
    color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(255,255,255,0.25);
    padding: 6px 10px;
    border-radius: 4px;
}


/* ================================================= */
/* MOBILE-MENÜ — MODERNE DARSTELLUNG                 */
/* ================================================= */

 
  .nav-menu.nav-open {
  position: fixed;
    display: flex;
    flex-direction: column;
 top: var(--header-height);
    right: 0;
    gap: 0px;

    width: 220px;                         /* breiter Kasten */
    max-width: 80vw;

    align-items: stretch;

    background: rgba(36, 42, 48, 0.98);

    backdrop-filter: blur(8px);
    border-radius: 0px;
   /* border: 1px solid rgba(255, 255, 255, 0.08); */

    padding-top: 0px;
    padding-bottom: 0px;
box-shadow:
    -1px 0 0px rgba(0, 0, 0, 0.28),
     0 2px 0px rgba(0, 0, 0, 0.28);

    z-index: 1500;

}

/* =========== */
/* Light Theme */
/* =========== */

body.light-theme .nav-menu.nav-open {

    background: rgb(234, 224, 208);

  /* border: 1px solid rgba(31, 46, 61, 0.10); */
box-shadow:
    -1px 0 0px rgba(0, 0, 0, 0.07),
     0 2px 0px rgba(0, 0, 0, 0.14);
}

/* ================================================= */
/* MENÜ-EINTRÄGE — KLAR UND LESBAR                  */
/* ================================================= */

.nav-menu.nav-open li {

    margin: 0;
    padding: 0;

}

/* einzelne Zeile */

.nav-menu.nav-open a {

    display: block;

    width: 100%;

    padding: 12px 22px;
font-family: "Inter", sans-serif;
    font-size: 18px;                      /* größere Schrift */
    font-weight: 500;
    line-height: 1.25;         /* enger */
    letter-spacing: 0.04em;

    color: rgba(232, 236, 241, 1);

    transition:
        background 0.15s ease,
        padding-left 0.15s ease;

}

/* Light Theme */

body.light-theme .nav-menu.nav-open a {

    color: rgba(31, 46, 61, 1);
    font-size: 18px;                      /* größere Schrift */
    font-weight: 500;
    line-height: 1.25;         /* enger */
    letter-spacing: 0.04em;
}

/* ================================================= */
/* HOVER — MODERN UND RUHIG                          */
/* ================================================= */

.nav-menu.nav-open a:hover {

    background: rgba(255, 255, 255, 0.06);

    padding-left: none;

}

body.light-theme .nav-menu.nav-open a:hover {

    background: rgba(31, 46, 61, 0.06);

}

/* ================================================= */
/* 5. LOGO                                            */
/* ================================================= */

.logo {
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    font-family: "Inter", sans-serif;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: inherit;
    margin-left: 14px;
    position: relative;
    top: -2px;
gap: 14px;
}

.logo-main {
    
    font-family: "Inter", sans-serif;

    font-size: 32px;
    font-weight: 600;
    font-variant-caps: small-caps;
    color: rgba(255, 255, 255, 1);
    letter-spacing: 0.08em;
    text-decoration: none;
}

body.light-theme .logo-main {
    color: rgba(60, 82, 128, 1); 
}

/* ================================================= */
/*              LOGO — ZWEIZEILIG                    */
/* ================================================= */

.logo-stack {

    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.05;

}

.logo-subline {

    font-size: 21px;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    letter-spacing: 0.12em;

    padding-left: 1px;
    padding-top: 0px;
    opacity: 0.92;
    font-variant-caps: small-caps;
}

body.light-theme .logo-subline {

    color: rgba(60, 82, 128, 1);

}

/* ================================= */
/*             UNTERMENÜ             */
/* ================================= */

.has-submenu {

    position: relative;

}



.submenu {
    display: none;
    position: absolute;

    top: var(--header-height);
    left: 0;
    right: auto;
    transform: none;

    min-width: 280px;

    margin: 0;
    padding: 0;

    list-style: none;

    background: rgba(36,42,48,0.98);

    box-shadow:
        0 10px 24px rgba(0,0,0,0.30);

    z-index: 5000;
}

.submenu::before {
    content: "";
    position: absolute;

    left: 0;
    right: 0;

    top: calc(-1 * var(--header-pad-y));
    height: var(--header-pad-y);

    background: transparent;
}


.submenu li{

    margin:0;

}

.submenu a{

    display:block;

    padding:12px 22px;

    text-decoration:none;

    white-space:nowrap;

    font-family: "Inter", sans-serif;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 0.02em;

    color:rgba(232,236,241,1);

    


}

.submenu a:hover{

    background:rgba(255,255,255,.06);

}

body.light-theme .submenu a:hover{

    background:rgba(120,120,120,.06);

}

.submenu-arrow{

    margin-left:8px;

    font-size:.80em;

}

.has-submenu.submenu-open > .submenu {

    display: block;

}



/* ========================= */
/*        TAGMODUS           */
/* ========================= */

body.light-theme .submenu{

    background: rgb(225, 208, 183);

    box-shadow:
        0 8px 18px rgba(0,0,0,.14);

}

/* =================================== */
/* GESPERRTE REFERENZRAUM-EINTRÄGE     */
/* =================================== */

.submenu a.rr-lock::before {
    content: "🔒";
    display: inline-block;
    margin-right: 9px;
    font-size: 13px;
    line-height: 1;
    vertical-align: middle;
    opacity: .55;
}

.submenu a.rr-lock:hover::before {
    opacity: 1;
}



/* ========================== */
/*       HAMBURGER-MENÜ       */
/* ========================== */

.nav-toggle {

    display: none;
    width: 34px;
    height: 34px;

    background: none;
    border: none;

    position: relative;
    cursor: pointer;

    /* Zentrierung der Linien */
    flex-direction: column;
    justify-content: center;
    align-items: center;
  
    gap: 6px;

    padding: 0;
}

/* ================================================= */
/* FARBLOGIK                                         */
/* ================================================= */

.nav-toggle .bar {

    background: rgba(210, 216, 224, 1);

}

body.light-theme .nav-toggle .bar {

    background: rgba(53, 64, 87, 1);

}

/* ================================================= */
/* GRUNDLINIE                                        */
/* ================================================= */

.nav-toggle .bar {

    display: block;

    width: 20px;
    height: 2.0px;

    border-radius: 0px;

    transition: all 0.0s ease;
}

body.light-theme .nav-toggle .bar {

    background: rgba(53, 64, 87, 1);
}



/* ================================================= */
/* 4. THEME-SCHALTER (Tag/Nacht)                     */
/* ================================================= */

.ui-theme-toggle {
    position: relative;
    width: 34px;
    height: 34px;
    font-size: 0;
    border: none;
    background: none;
    color: var(--text-main);
    cursor: pointer;
    border-radius: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: 7px; 

}


/* Hover-Effekt für Sonne / Mond */

.ui-theme-toggle:hover {

    background: transparent;

    box-shadow: none;

    transform: scale(1.08);

}

body.light-theme .ui-theme-toggle:hover {

    background: transparent;

    box-shadow: none;

    transform: scale(1.08);

}

.ui-theme-toggle::before {
    content: "☀️";
    font-size: 18px;
    line-height: 1;
    color: #FFC400;
}

body.light-theme .ui-theme-toggle::before {
    content: "🌙";
}

body.light-theme .ui-theme-toggle {
    color: rgba(31, 46, 61, 1);
}


/* ============================== */
/* LANGUAGE SWITCH                */
/* ============================== */

.language-switch {

    position: relative;

    display: flex;
    align-items: center;
margin-left: 12px;
/* margin-right: 8px: */
top: -2px;

}

/* ========================= */
/* Hauptbutton               */
/* ========================= */

.language-toggle {

    display: flex;
    align-items: center;
    gap: 4px;

    background: transparent;
    border: none;

    cursor: pointer;

font-family: "Inter", sans-serif;
    font-weight: 500;

    font-size: clamp(15px, 0.95vw, 1.1rem);
    letter-spacing: 0.05em;

    color: var(--text-main);

    opacity: 0.72;

    padding: 0;

}

/* ========================= */
/* Pfeil                     */
/* ========================= */

.language-arrow {

    font-size: 0.9rem;

    position: relative;
    top: 1px;

}

/* ========================= */
/* Dropdown                  */
/* ========================= */

.language-dropdown {

    position: absolute;

    top: calc(100% + 0px);
    right: 0;

    display: none;

    flex-direction: column;

    min-width: 50px;

    padding: 8px 12px;

    background: rgba(80, 85, 90, 0.98);

    z-index: 9999;

}

body.light-theme .language-dropdown {

    background: rgba(245,245,245,1);

}

/* ========================= */
/* geöffnet                  */
/* ========================= */

.language-dropdown.language-open {

    display: flex;

}

/* ========================= */
/* Links                     */
/* ========================= */

.language-dropdown a {

    text-decoration: none;

font-family: "Inter", sans-serif;
    font-weight: 500;

    font-size: 1.1rem;
    letter-spacing: 0.05em;

    color: var(--text-main);

    opacity: 0.72;

}

.language-dropdown a:hover {

    opacity: 1;

}

/* ======================================= */
/* UTILITIES                               */
/* ======================================= */

/* ===== Abstände ===== */

.mt-20 { 
     margin-top: 20px; 
}

.mb-20 { 
     margin-bottom: 20px; 
}

/* ===== Fixes ===== */

.no-list {
    list-style: none;
    padding-left: 0;
}


/* ===================================================================== */
/*                            HERO / EINSTIEG                            */
/* ===================================================================== */

 
.hero {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    width: 100%;
    max-width: none;

    margin-top: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    height: calc(100svh - var(--header-height));
    padding-bottom: 0;

    cursor: default;

    color: rgba(255, 255, 255, 1);

    text-shadow:
          0 2px 6px rgba(0,0,0,0.45),
          0 0 1px rgba(0,0,0,0.25);

    margin-bottom: 56px;
}

body.light-theme .hero {
    color: rgba(255, 255, 255, 1);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55); 
                 0 0 1px rgba(0,0,0,0.35);
}

.hero-image{

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: 0;
}




/* ================================================= */
/* HERO — STRUKTUR / TEXTAUFBAU                      */
/* ================================================= */

.hero .layout-container {

    position: relative;
    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    max-width: 900px;

    padding-top: clamp(28px, 4vh, 80px);
    padding-bottom: clamp(18px, 3vh, 50px);
}

.hero h1 {

    font-family: "Inter", sans-serif;

    line-height: 0.98;

    font-size: 72px;

    font-weight: 700;

    letter-spacing: 0.18em;

    font-variant-caps: small-caps;

    margin: 42px 0 0 0;
}

.hero h2 {
    font-family: "Inter", sans-serif;
    font-size: 45px;
    font-weight: 500;
    letter-spacing: 0.025em;

    margin-top: 10px;
    margin-bottom: 16px;
    font-variant-caps: small-caps;
}

.hero p {

    font-family: "Inter", sans-serif;
    font-size: 36px;
    font-weight: 450;
    line-height: 1.45;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

/* ========================== */
/* HERO DIVIDER — NACHTMODUS  */
/* ========================== */

.hero-divider {

    width: 464px;

    height: 2px;

    margin: 18px 0 30px 0px;
    background: rgba(255,255,255,0.82);
   
/* background: linear-gradient(
        to right,
        rgba(255,255,255,0),
        rgba(255,255,255,0.60),
        rgba(255,255,255,0.92),
        rgba(255,255,255,0.60),
        rgba(255,255,255,0)
    ); */

}

/* ========================= */
/* HERO DIVIDER — TAGMODUS   */
/* ========================= */

body.light-theme .hero-divider {

   background: rgba(255,255,255,0.92);
 /*   background: linear-gradient(
        to right,
        rgba(255,255,255,0),
        rgba(255,255,255,0.60),
        rgba(255,255,255,0.92),
        rgba(255,255,255,0.60),
        rgba(255,255,255,0)
    ); */

}


.hero-content {

position: absolute;

top: 58%;
left: 14%;

transform: translateY(-50%);

display: flex;
justify-content: flex-start;
align-items: center;

width: min(1400px, 82vw);

text-align: left;

z-index: 2;
}




.hero-content h1 {

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(38px, 3.3vw, 52.8px);

    font-weight: 500;

    line-height: 1.28;

    letter-spacing: 0.01em;

    font-variant-caps: normal;

    text-transform: none;

 transition: opacity 1000ms ease-in-out;

    color: rgba(255,255,255,1);
    /*text-shadow: 0 0 0 rgba(0,0,0,0);*/
    /*background: rgba(255,0,0,.4);*/

 text-shadow:
        0 3px 10px rgba(0,0,0,.75),
        0 1px 2px rgba(0,0,0,.90);

    margin: 0;

    max-width: 1400px;
}

/* ========================= */
/* HERO — POSITIONSANZEIGE   */
/* ========================= */

.hero-indicator {
    position: absolute;
    bottom: 6.2rem;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    z-index: 20;
}

.hero-indicator span {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.40);
    transition:
        width 0.25s ease,
        height 0.25s ease,
        opacity 0.25s ease;
}

.hero-indicator span.active {
    width: 7px;
    height: 7px;
    background: rgba(255, 255, 255, 0.95);
}


/* ========================= */
/* HERO — PAUSE TOGGLE       */
/* ========================= */

.hero-controls {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    z-index: 20;
}

.hero-controls button {

    width: 54px;
    height: 54px;

    border-radius: 50%;

    background: rgba(25,30,36,.58);
    border: 2px solid rgba(95,225,245,.95);

    color: rgba(255,255,255,1);

    font-size: 1.45rem;
    font-weight: 500;

    backdrop-filter: blur(12px);

    box-shadow:
        0 6px 18px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.15);

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.hero-controls button:hover{

    background: rgba(45,55,65,.82);

    transform: scale(1.08);

    box-shadow:
        0 10px 24px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.25);
}

.hero-controls button:active {
    transform: scale(0.96);
}

/* ================================================= */
/* HERO — WEICHER ÜBERGANG ZUM HEADER (OBEN)        */
/* ================================================= */

.hero::after {

    content: "";
    position: absolute;
inset: 0;

background: rgba(0,0,0,0);
    left: 0;
    right: 0;
    bottom: 0;

       /* background: linear-gradient(
        to bottom,
        rgba(26, 29, 33, 0),
        rgba(26, 29, 33, 0.20),
        rgba(26, 29, 33, 0.75)
    ); */

    z-index: 2;
pointer-events: none;
}

body.light-theme .hero::after {

    content: "";
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

     /* background: linear-gradient(
        to bottom,
        rgba(251, 251, 251, 0),
        rgba(251, 251, 251, 0.20),
        rgba(251, 251, 251, 0.75) 
    );*/

    z-index: 2;
}

.hero .layout-container {

    position: relative;

    z-index: 2;
  
    width: 100%;
    max-width: none;

    min-height: calc(100svh - var(--header-height));

    display: flex;

    align-items: center;

    justify-content: flex-start;

    padding-left: 120px;

    padding-right: 40px;
}

/* ========================== */
/* HERO DIVIDER — NACHTMODUS  */
/* ========================== */

.hero-divider {

    width: 280px;

    height: 1.5px;

    margin-top: 22px;
    margin-right: 0;
    margin-bottom: 24px;
    margin-left: 40px;

    background: rgba(255,255,255,1);
}

/* ========================= */
/* HERO — PAUSE-SYMBOL       */
/* ========================= */

.hero-play {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.hero-play span {
    display: block;

    width: 5px;
    height: 19px;

    background: rgba(255,255,255,1);
    border-radius: 0;
}

.hero-play.playing {
    display: flex;
}

.hero-play.paused {
    font-size: 1.35rem;
}

/* ========================= */
/* HERO DIVIDER — TAGMODUS   */
/* ========================= */

body.light-theme .hero-divider {

   background: rgba(255,255,255,1);
  /*  background: linear-gradient(
        to right,
        rgba(255,255,255,0),
        rgba(255,255,255,0.92),
        rgba(255,255,255,0)
    ); */

}

/* ================================================= */
/*               LAYOUT / CONTAINER                  */
/* ================================================= */

.layout-container {

    position: relative;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    padding: 0px 22px 60px 22px;
    overflow-x: hidden;
z-index: 5;
}

/* ===================================================== */
/*             Page-Abstand zum Header                   */
/* ===================================================== */

.page-legal {

    margin-top: 50px;
}

.page-legal .schrift-referenz {
    margin-top: 0;
    margin-bottom: 2.2rem;
}

/* ================================== */
/*   AUTOR-NAME   */
/* ================================== */

.autor-name {
    display: inline-block;
    font-size: 1.1rem;
    margin-top: 0px;
    margin-left: 18px;
    font-weight: 700;
}

/* ================================================= */
/* KOPIERSCHUTZ – TEXTAUSWAHL                        */
/* ================================================= */

.copy-protected {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ================================================= */
/* KOPIERFREIGABE – CODEFENSTER                      */
/* ================================================= */

.copy-code-window {
    position: fixed;
    display: none;

    width: 240px;
    padding: 16px;

    background: #ffffff;

    border: 1px solid #9aa5af;
    border-radius: 4px;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);

    z-index: 9999;
}


.copy-code-window.active {
    display: block;
}


.copy-code-title {
    margin-bottom: 10px;

    font-weight: 600;
}


.copy-code-text {
    margin-bottom: 10px;

    font-size: 0.85rem;
}


.copy-code-username,
.copy-code-password {
    width: 100%;

    box-sizing: border-box;

    margin-bottom: 8px;

    padding: 7px 8px;
}


.copy-code-button {
    cursor: pointer;

    padding: 7px 12px;
}


.copy-code-error {
    display: none;

    margin-top: 8px;

    font-size: 0.8rem;

    color: #90c5b3;
}

.copy-code-error.active {
    display: block;
}

/* ============================== */
/*    KOPIERFENSTER SCHLIEßEN     */
/* ============================== */

.copy-code-close {
    position: absolute;
    top: 6px;
    right: 8px;

    background: none;
    border: none;

    cursor: pointer;

    font-size: 18px;
    line-height: 1;

    padding: 2px 5px;
}



/* ===================================================== */
/*          Inhalt / Text - Komponenten                  */
/*          HERVORHEBUNG / TEXT-ELEMENTE                 */
/* ===================================================== */

/* ============================== */
/*    LISTEN RESET + KONTROLLE    */
/* ============================== */

.list-indent,
.list-indent ul {

    margin: 0;
    padding-left: 0;
    list-style: none;
}

.list-indent {

    margin-top: 12px;
    margin-bottom: 18px;
}

.list-indent li {

    position: relative;
    padding-left: 18px;
    margin-bottom: 10px;
    line-height: 1.6;
}

.list-indent li::before {

    content: "•";
    position: absolute;
    left: 0;
}

/* ============================== */
/* Highlight-Text Vergleichsblock */
/* ============================== */

.highlight-text {

    font-size: 1.3rem;
    font-weight: 600;

}

.comparison-box {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 30px;

}

.comparison-column h3 {

    margin-bottom: 20px;

}


/* ========= */
/* Section 1 */
/* ========= */


.reference-lead {

    font-size: 26px;

    line-height: 1.5;

    letter-spacing: 0.015em;

    font-weight: 300;

    margin-bottom: 40px;

    color: var(--text-main);
}

/* ========= */
/* Section 3 */
/* ========= */
.rr-answer {

    margin-top: 60px;

    text-align: center;

    font-size: 20px;

    line-height: 1.6;

    letter-spacing: 0.03em;

    font-weight: 400;
}

/* ========= */
/* Section 7 */
/* ========= */

.function-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px 32px;

    margin: 42px 0;
}

.function-grid p {

    margin: 0;

    font-size: 20px;

    text-align: center;
}

/* ========= */
/* Section 8 */
/* ========= */

.relevance-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 40px;

    margin: 48px 0;
}

.relevance-card h3 {

    margin-top: 0;
}

.reference-conclusion {

    text-align: center;

    font-size: 24px;

    margin-top: 60px;
}

/* ======================== */
/* Referenzraum - Menüpunkt */
/* ======================== */

.section-block h2 {
    margin-bottom: 40px;
}

.section-block {
    scroll-margin-top: 140px;
}

/* ================================================= */
/* REFERENZRAUM — INITIATOR - ÜBERSICHT              */
/* ================================================= */

.rr-overview {

    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 80px;
}




.rr-overview a {

    display: block;

    color: inherit;

    text-decoration: none;

    transition:
        color 0.15s ease,
        padding-left 0.15s ease;

}

.rr-overview a:visited {

    color: inherit;

}

.rr-overview a:hover {

    color: var(--text-main);

    padding-left: 2px;

}

.rr-overview a:active {

    color: var(--text-main);

}





.rr-overview ul {

    list-style: none;

    padding: 0;
    margin: 0;

}

.rr-overview li {
    position: relative;
    padding: 10px 0 10px 26px;
    text-indent: -26px;
    font-size: 20px;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

/*.rr-overview li {
    position: relative;
    padding: 10px 0;
    font-size: 20px;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}*/

.rr-overview li::after {
    content: "";
    display: block;
   width: calc(70% + 30px);
    margin-top: 10px;
    margin-left: -24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

body.light-theme .rr-overview li::after {
    border-bottom: 1px solid rgba(31,46,61,0.08);
}

.rr-overview .overview-subline {
    display: inline-block;
    margin-left: 40px;
}

.rr-overview .overview-subitem {
    margin-left: 1.0em;
}

.rr-development-point {

    margin-top: 80px;
    margin-bottom: 20px;

    text-align: center;

    font-size: 28px;

    line-height: 1.4;

    letter-spacing: 0.04em;

    font-weight: 300;

    color: var(--text-main);

}

/* ===================================== */
/* Anbindung RR — LEITSATZ               */
/* ===================================== */

.rr-leitsatz {

    margin-bottom: 20px;

    text-align: center;

    font-size: 28px;

    line-height: 1.8;

    letter-spacing: 0.03em;

    font-weight: 300;

}

/* ===================================== */
/* Anbindung RR — SETZUNGSBLOCK          */
/* ===================================== */

.rr-setzung {

    margin: 50px 0;

    padding-left: 28px;

    /*border-left: 2px solid rgba(255,160,0,0.65);*/

    font-size: 21px;

    line-height: 1.8;

    letter-spacing: 0.02em;

}

body.light-theme .rr-setzung {

    /*border-left: 2px solid rgba(140,105,35,0.70);*/

}

/* ============================================ */

.rhtrko-title {

   font-family: "Inter", sans-serif;
   font-size: 48px;
   font-weight: 400;
   letter-spacing: 0.02em;
   line-height: 1.5;
   margin-bottom: 15px;
   font-variant-caps: small-caps;
}

.rhtrko-subtitle {

   font-family: "Inter", sans-serif;
   font-size: 40px;
   font-weight: 400;
   letter-spacing: 0.017em;
   line-height: 1.5;
   margin-bottom: 15px;
   font-variant-caps: small-caps;
}


/* ============================================================== */
/*            SCROLL-JUMP — Doppelbutton unten rechts             */
/* ============================================================== */

.scroll-jump {

   position: fixed;
   right: 18px;
   top: 50%; 
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   gap: 8px;
   z-index: 1200;

}

/* ============================================================= */
/*                        Button-Grundform                       */
/* ============================================================= */

.jump-btn {

   width: 38px;
   height: 38px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   font-size: 18px;
   font-weight: 600;
   color: rgba(255,255,255,1);
   background: rgba(42, 52, 64, 0.85);
   backdrop-filter: blur(6px);
   transition: transform 0.18s ease,
                background 0.18s ease;
}
/* ================= */
/*       Hover       */
/* ================= */

.jump-btn:hover {

   transform: translateY(-2px);
   background: rgba(255,160,0,1);
}

/* ================== */
/*  Hover - Tagmodus  */
/* ================== */

body.light-theme .jump-btn {

   color: rgba(255,255,255,0.85);
   background: rgba(105,120,136,0.85);
}

body.light-theme .jump-btn:hover {

   transform: translateY(-2px);
   background: rgba(105,120,136,1);
}

/* =============================== */
/*       BUTTON — NACHTMODUS       */
/* =============================== */

.button {

   display: inline-block;
   margin-top: 18px;
   margin-bottom: 30px;
   padding: 12px 22px;
   font-size: 16px;
   font-weight: 500;
   letter-spacing: 0.03em;

   color: rgba(232, 236, 241, 1);
   border: 1.4px solid rgba(232, 236, 241, 0.32);
   border-radius: 8px;
   background: transparent;
   transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.12s ease;
text-decoration: none;
}

.button:hover {

   background: rgba(255, 255, 255, 0.06);
   border-color: rgba(255, 255, 255, 0.60);
   transform: translateY(-1px);
}

/* ============================== */
/*       BUTTON — TAGMODUS        */
/* ============================== */

body.light-theme .button {

   color: rgba(31, 46, 61, 1);
   border: 1.4px solid rgba(31, 46, 61, 0.28);
   background: rgba(255, 255, 255, 1);
}

body.light-theme .button:hover {

   background: rgba(31, 46, 61, 0.05);
   border-color: rgba(31, 46, 61, 0.55);
}

/* =============================== */
/*     FOOTER — SYNCHRONISIERT     */
/* =============================== */

.footer-signatur {

   position: relative;
   width: 100%;

   background-image: url("/de/assets/images/antrazit-struktur-klein.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

   padding-top: 28px;
   padding-bottom: 28px;
   overflow: hidden;
   text-align: center;
   line-height: 1.45;
   z-index: 0;
}

/* ================= */
/*      Overlay      */
/* ================= */

.footer-signatur::before {

   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   background: rgba(255, 255, 255, 0.42);
}

body.light-theme .footer-signatur::before {
    background: rgba(224, 234, 243, 0.80);
}

/* ======================== */
/*   Inhalte über Overlay   */
/* ======================== */

.footer-signatur > * {

   position: relative;
   z-index: 2;
}

/* ======================= */
/*     SIGNATUR-TEXT       */
/* ======================= */

.footer-name {

   margin-bottom: 8px;
}

.footer-domain {

   margin-bottom: 8px;
   color: rgba(210, 216, 224, 1);
}

.footer-copyright {

   font-size: 0.85rem;
   margin-top: 8px;
   margin-bottom: 24px;
   color: rgba(200, 206, 214, 1);
}

/* ================ */
/*     DIVIDER      */
/* ================ */

.footer-divider {

   width: 420px;
   max-width: 60%;
   height: 1.2px;
   background: linear-gradient(
        to right,
        rgba(40,40,40,0) 0%,
        rgba(40,40,40,0.35) 20%,
        rgba(40,40,40,0.55) 50%,
        rgba(40,40,40,0.35) 80%,
        rgba(40,40,40,0) 100%
    );

   margin: 0 auto 22px auto;
}

body.light-theme .footer-divider {

   background: linear-gradient(
        to right,
        rgba(31, 46, 61, 0) 0%,
        rgba(31, 46, 61, 0.25) 20%,
        rgba(31, 46, 61, 0.45) 50%,
        rgba(31, 46, 61, 0.25) 80%,
        rgba(31, 46, 61, 0) 100%
    );

}

/* ========================= */
/*     FOOTER-STATEMENT      */
/* ========================= */

.footer-statement {
    font-size: 18px;              /* frei einstellbar */

    font-weight: 600;
    color: rgba(74, 90, 106, 1);
    margin-bottom: 18px;
    line-height: 1.5;
}

/* Tagmodus */
body.light-theme .footer-statement {
    color: rgba(74, 90, 106, 1);;
}

/* =================== */
/*     FOOTER-MENÜ     */
/* =================== */

.footer-legal {

   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 22px;
   font-size: 1rem;
   font-weight: 600;
   letter-spacing: 0.05em;
   max-width: 100%;
   overflow-wrap: break-word;
}

.footer-legal a {

   color: rgba(210, 216, 224, 1);
   text-decoration: none;
}

body.light-theme .footer-legal a {

   color: rgba(255, 255, 255, 1);
}

.footer-legal a:hover {

   text-shadow: 0 0 0.6px currentColor;  
   color: rgba(255, 255, 255, 1);
}

body.light-theme .footer-legal a:hover {

   text-shadow: 0 0 0.6px currentColor;
   color: rgba(0, 0, 0, 0.20);
}

/* ========================= */
/*     FARBLOGIK THEMES      */
/* ========================= */

body.light-theme .footer-name {

   color: rgba(255, 255, 255, 0.92);
   font-weight: 500;
}

body.light-theme .footer-domain {

   color: rgba(255, 255, 255, 0.84);
   font-weight: 500;
}

body.light-theme .footer-copyright {

   color: rgba(255, 255, 255, 0.80);
   font-weight: 550;
}

 .footer-name {

   color: rgba(255, 255, 255, 0.96);
   font-weight: 500;
}

 .footer-domain {

   color: rgba(255, 255, 255, 0.88);
   font-weight: 500;
}

 .footer-copyright {

   color: rgba(255, 255, 255, 0.70);
   font-weight: 550;
}

/* ============================================================= */
/*             Aufklapp-Toggle für Mehr/Weniger-Text             */
/* ============================================================= */

/* Container */
.fade-expand {

    position: relative;
    text-align: center;
}

/* Inhalt */
.fade-content {

    display: none;
    text-align: left;
    position: relative;
    z-index: 2;
}

/* Fade */
.fade-expand::after {

    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    height: 0px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
    to bottom,
    rgba(15,15,15,0) 0%,
    rgba(15,15,15,1) 0% 
  );
} 

body.light-theme .fade-expand::after {

    background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,1) 0% 
  );
} 

.fade-expand.active > .fade-toggle {

    display: block;

}

/* expanded */
.fade-expand.active .fade-content {

    display: block;
}

.fade-expand.active::after {

    display: none;
}

/* ======================= */
/*    Mehr lesen Button    */
/* ======================= */

.fade-toggle {

    display: block;
    margin: 20px auto 80px auto;
    
    padding: 8px 18px;
    cursor: pointer;
    position: relative;
    z-index: 3;             /* Button über dem Gradient */
    background: none;
    border: 1px solid rgba(255,255,255,0.4);
    color: rgba(255,255,255,0.8);
}

/* TAGMODUS Button */

body.light-theme .fade-toggle {

    border: 1px solid rgba(0,0,0,0.4);
    color: rgba(0,0,0,0.8);
}

/* Zur Ordnung Button in Flow */

.inline-button {

    display: block;
    margin: 10px 0 0 0;   /* kein auto → nicht zentriert */
}



/* ================================== */
/*   MANUELLER ABSATZ-ZWISCHENRAUM    */
/* ================================== */

.space-10 {
    height: 10px;
}

.space-20 {
    height: 20px;
}

.space-30 {
    height: 30px;
}

.space-40 {
    height: 40px;
}

.space-60 {
    height: 60px;
}

.space-80 {
    height: 80px;
}

.space-100 {
    height: 100px;
}

/* ========================================================== */
/*          Schriften — Schriftenliste                        */
/* ========================================================== */

.schriften-liste {

    display: flex;
    flex-direction: column;
    gap: 8px;

}

.schriften-liste a {

    display: block;
    color: var(--text-main);

    text-decoration: none;
}

.schriften-liste a:hover {

    text-decoration: underline;

}

/* ========================================================== */
/*       Button für Bibliotheks-Schriften-Navigation          */
/* ========================================================== */

.schriften-navigation {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ================================================= */
/* INITIATOR.html - Highlight-Text                   */
/* ================================================= */

.highlight-text {
    margin: 2.5rem 0;
    padding: 1.2rem 0 1.2rem 1.4rem;
    border-left: 3px solid rgba(90,110,140,0.45);
}

/* ================================================= */
/* COPYRIGHT - SCHRIFT-HINWEIS                     */
/* ================================================= */

.schrift-hinweis {

    max-width: 700px;

    margin: 90px auto 0 auto;

   /* padding-top: 24px;*/

   /* border-top: 1px solid rgba(255,255,255,0.08); */

    text-align: center;

}

body.light-theme .schrift-hinweis {

  /*  border-top: 1px solid rgba(31,46,61,0.08); */

}

.schrift-hinweis p {

    margin: 6px 0;

    font-size: 0.9rem;

    line-height: 1.6;

    color: var(--text-muted);

}



/* ================================================= */
/* COPYRIGHT-Zeichen hinter Refrenzraum              */
/* ================================================= */

.copyright {
    font-size: 0.55em;
    position: relative;
    top: -0.45em;
    margin-left: -0.08em;
    opacity: 0.6;
}



/* ================================================= */
/* PERSPEKTIVWECHSEL.HTML                            */
/* ================================================= */

.perspektive {

    margin: 0 0 18px 0;

    border: none;

}

/* ========================= */
/* Zeile                     */
/* ========================= */

.perspektive summary {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    cursor: pointer;

    list-style: none;

    padding: 8px 0;

    font-size: 1.7rem;

    font-weight: 400;

    color: var(--text-main);

}

/* Browser-Pfeil ausblenden */

.perspektive summary::-webkit-details-marker {

    display: none;

}

.perspektive summary::marker {

    content: "";

}

/* Eigener Pfeil */

.perspektive summary::after {

    content: "▸";

    margin-left: 12px;

    font-size: 1.15rem;

    color: rgba(130,130,130,1);

    transition: transform .2s ease;

}

/* geöffneter Zustand */

.perspektive[open] summary::after {

    transform: rotate(90deg);

}

/* ========================= */
/* Überschrift               */
/* ========================= */

.perspektive h3 {

    margin: 18px 0 12px;

    font-size: 2rem;

    font-weight: 400;

    color: var(--text-main);

}

/* ========================= */
/* Text                      */
/* ========================= */

.perspektive p {

    margin: 0 0 18px;

    line-height: 1.8;

}

/* =============================================================== */
/*          Kontaktaufnahme — VERANLASSUNG                         */
/* =============================================================== */

.divider {

    width: 320px;
    max-width: 60%;
    height: 1px;

    margin: 54px auto;

    background: linear-gradient(
        to right,
        rgba(255,255,255,0),
        rgba(255,255,255,0.28),
        rgba(255,255,255,0)
    );

}

body.light-theme .divider {

    background: linear-gradient(
        to right,
        rgba(234, 224, 208,0.30),
        rgba(234, 224, 208,1),
        rgba(234, 224, 208,0.30)
    );

}

/* ========================= */
/* CHECKBOX                  */
/* ========================= */

.entry-checkbox {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-top: 26px;
    margin-bottom: 26px;

    line-height: 1.7;

}

.entry-checkbox input {

    margin-top: 6px;

    width: 18px;
    height: 18px;

}

.usage-label {

    display: inline-block;

    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.04em;

}

/* ========================= */
/* Kontaktaufnahme BUTTON           */
/* ========================= */

.entry-main-button {

    margin-top: 12px;
    margin-bottom: 32px;

}

/* ========================= */
/* REFERENZCODE              */
/* ========================= */

#referenceCode,
#usageCode,
#emailCode,
#usageCodePaypal {

    display: inline-block;

    margin-top: 4px;

    font-size: 22px;
    font-weight: 600;

    letter-spacing: 0.04em;

}

.entry-order-note {

    max-width: 760px;

    margin-top: 28px;

    font-size: 18px;

    line-height: 1.8;

    opacity: 0.88;

}

/* ========================= */
/* strong                    */
/* ========================= */

strong {
    font-weight: 600;
}


/* ========================= */
/* ZITAT-LINE senkrecht      */
/* ========================= */

.zitat-line {

    position: relative;

    padding-left: 28px;

    padding-top: 12px;
    padding-bottom: 12px;
}

.zitat-line::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 5px;

    background: rgba(255, 255, 255, 0.60);

    border-radius: 999px;

}

 body.light-theme .zitat-line::before {

    background: rgba(60, 82, 105, 0.35);

}

/* ========================= */
/* ZITAT-LINE Hervorhebung   */
/* ========================= */

.zitat-emphase {

    font-size: 1.3em;

    font-weight: 500;

    line-height: 1.75;

    letter-spacing: 0.02em;

    color: rgba(200, 200, 200, 1);

}

body.light-theme .zitat-emphase {

 color: rgba(45, 70, 110, 1);   
}

.zitat-center {
    text-align: center;
}

.zitat-emphase-big {

    font-size: 1.6rem;

    line-height: 1.35;

}

.zitat-emphase-small {

    font-size: 1em;

    font-weight: 500;

    line-height: 1.6;

    letter-spacing: 0.04em;

    color: rgba(45, 70, 110, 1);

}

/* =========================================================
   RHENUS — konsequenter Schutz redaktioneller Inhalte
   SEO bleibt erhalten, Browser-Kopierkontext wird deaktiviert
   ========================================================= */

.protected-content {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    -webkit-touch-callout: none;
}

/* Bilder innerhalb geschützter Inhalte nicht per Drag kopieren */
.protected-content img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

/* Interaktive Elemente bleiben bedienbar */
.protected-content a,
.protected-content button,
.protected-content input,
.protected-content textarea,
.protected-content select {
    user-select: auto;
    -webkit-user-select: auto;
    -moz-user-select: auto;
}

/* =================================== */
/*         NACH OBEN BUTTON            */
/* =================================== */

#toTop {

    position: fixed;

    right: 17px;
    bottom: 12px;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 4px;

    background: rgba(140,140,140,0.72);
    color: rgba(255,255,255,1);

    font-size: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 9999;

    opacity: 0;
    pointer-events: none;

    transition:
        opacity 0.1s ease,
       /* bottom 0.1s linear;*/

}

#toTop.show {

    opacity: 1;
    pointer-events: auto;

}

body.light-theme #toTop {

    background: rgba(163,168,172,0.60);
    color: rgba(255,255,255,1);

}

/* ================================================= */
/* GESPERRTER LINK – SCHLOSS                         */
/* ================================================= */

.button.rb-lock::before {
    content: "🔒";
    display: inline-block;
    margin-right: 8px;
    font-size: 0.9em;
    line-height: 1;
    opacity: 0.65;
}

.button.rb-lock:hover::before {
    opacity: 1;
}

/* ============================================================== */
/* ============================================================== */
/*                     RESPONSIVE — TABLET                        */
/*           1240px - 768px - 480px                     */
/* ============================================================== */
/* ============================================================== */

/* =============================================== */
/*                  DESKTOP                        */
/* =============================================== */

@media (max-width: 1240px) {

    /* ========================= */
    /* HEADER                    */
    /* ========================= */

    .layout-header {
        /*adding: 18px 22px;*/
    }

    .logo {
        margin-left: 0;
    }

    .logo-main {
        font-size: 29px;
    }

    .logo-subline {
        font-size: 17px;
    }

    header nav {
      
        gap: 8px;
    }


    /* ========================= */
    /* NAVIGATION                */
    /* ========================= */

    .nav-menu {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
        top: 6px;
    }

    .nav-menu.nav-open {
        width: 250px;
}

    .submenu {
        left: auto;
        right: 0;
        transform: none;
    }

/* ========================= */
/* RESPONSIVE UNTERMENÜ      */
/* ========================= */

.nav-menu.nav-open > li.has-submenu {
    position: relative;
    width: 100%;
}

.nav-menu.nav-open > li.has-submenu > .submenu {
    position: absolute;

    top: 100%;
    right: 0;
    left: auto;

    width: max-content;
    min-width: 280px;
    max-width: calc(100vw - 20px);

    margin: 0;
    padding: 0;

    transform: none;

    max-height: calc(100vh - var(--header-height) - 20px);
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-menu.nav-open > li.has-submenu > .submenu a {
    white-space: normal;
}


    /* ========================= */
    /* THEME / LANGUAGE          */
    /* ========================= */

    .ui-theme-toggle {
        top: 5;
    }

    .language-switch {
        top: 0;
    }


    /* ========================= */
    /* HERO                      */
    /* ========================= */

    .hero {
        margin-bottom: 38px;
        padding: 0;
    }


    /* ========================= */
    /* HERO CONTAINER            */
    /* ========================= */

    .hero .layout-container {
        max-width: none;
        min-height: calc(100svh - var(--header-height));

        display: flex;
        align-items: center;
        justify-content: flex-start;

        width: 100%;

        padding-left: 70px;
        padding-right: 70px;
    }


    /* ========================= */
    /* HERO INNER                */
    /* ========================= */

    .hero-inner {
        max-width: 600px;
        transform: translateY(180px);
    }


    /* ========================= */
    /* HERO TITLE                */
    /* ========================= */

    .hero-title {
        font-size: clamp(38px, 4.2vw, 56px);
    }


    /* ========================= */
    /* HERO PRELINE              */
    /* ========================= */

    .hero-preline {
        font-size: 20px;
        letter-spacing: 0.18em;
        margin-bottom: 22px;
        text-align: center;
    }


    /* ========================= */
    /* HERO SUBTEXT              */
    /* ========================= */

    .hero-subtext {
        max-width: 660px;
        font-size: 20px;
        line-height: 1.45;
    }


    /* ========================= */
    /* HERO-BILD — PFEILE        */
    /* ========================= */

    .hero-nav {
        width: 36px;
        height: 36px;
    }

    .hero-prev {
        left: 12px;
    }

    .hero-next {
        right: 12px;
    }


    /* ========================= */
    /* HERO DIVIDER              */
    /* ========================= */

    .hero-divider {
        width: 220px;
        margin: 18px 0 24px 68px;
    }


    /* ========================= */
    /* CONTENT                   */
    /* ========================= */

    .layout-container {
        max-width: 820px;
    }

    h1 {
        font-size: 36px;
    }

    h2 {
        font-size: 30px;
    }

    p,
    li {
        font-size: 17px;
    }

/* ========================= */
/* SCROLL-JUMP               */
/* ========================= */

.scroll-jump {
    display: none;
}

}


/* =============================================== */
/*                    TABLET                       */
/* =============================================== */

@media (max-width: 768px) {

/* ========================= */
/*          HEADER           */
/* ========================= */

body {
        font-family: "Inter", sans-serif;
    }

    p,
    li,
    td,
    blockquote,
    details,
    summary {
        font-family: "Inter", sans-serif;
    }


.layout-header {

    /*padding: 14px 18px;*/

}

header nav {

    gap: 4px;

}

.logo-main {

    font-size: 27px;

}

.logo-subline {

    font-size: 15px;

    letter-spacing: 0.08em;

}

/* ========================= */
/* MOBILE NAV                */
/* ========================= */

.nav-toggle {

    width: 40px;
    height: 40px;

    gap: 5px;
    top: 3px;

}

.nav-menu.nav-open {

    width: 250px;

}

.nav-menu.nav-open a {

    padding: 12px 18px;

    font-size: 18px;

}

/* ===================== */
/* HERO                  */
/* ===================== */

.hero-content {
        top: 45%;
        left: 5%;
        width: 90%;
        transform: translateY(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 0 12px 90px 12px;
    }

    .hero-content h1 {
        width: 100%;
        max-width: 620px;
        margin: 0;
        font-size: 32px;
        line-height: 1.12;
        letter-spacing: 0;
        text-align: center;
    }


/* ========================= */
/* LANGUAGE / THEME          */
/* ========================= */

.language-arrow {

    font-size: 0.95rem;

}


.language-switch {
    top: 7;
}

.ui-theme-toggle {
    top: 7px;
}

.nav-toggle {

    top: 4px;

}

/* ========================= */
/* HERO                      */
/* ========================= */

.hero {

    margin-bottom: 42px;

    padding-top: 0;
    padding-bottom: 0;

}

/* ========================= */
/* CONTENT                   */
/* ========================= */

.layout-container {

    padding: 0 20px 48px 20px;

}

/* ========================= */
/* TYPOGRAFIE                */
/* ========================= */

h1 {

    font-size: 30px;

    margin-bottom: 22px;

}

h2 {

    font-size: 25px;

}

h3 {

    font-size: 22px;

}

h4 {

    font-size: 19px;

}

h5 {

    font-size: 17px;

}

p,
li {

    font-size: 16px;

}

/* ============================== */
/* Highlight-Text Vergleichsblock */
/* ============================== */

.comparison-box {

        grid-template-columns: 1fr;

    }

/* ========================= */
/* BUTTONS                   */
/* ========================= */

.button {

    padding: 11px 18px;

    font-size: 15px;

}


.setzdevelopment-point {

    font-size: 22px;

    line-height: 1.3;

    letter-spacing: 0.03em;

}

.rr-overview {
        margin-left: 0;
    }

    .rr-overview li {
        padding-left: 0;
        text-indent: 0;
    }

    .rr-overview li::after {
        width: 100%;
        margin-left: 0;
    }

    .rr-overview .overview-subline {
        display: inline;
        margin-left: 0;
    }



/* ========================= */
/* FOOTER                    */
/* ========================= */

.footer-legal {

    gap: 14px;

    font-size: 0.92rem;

}

.footer-statement {

    font-size: 16px;

}

/* ========================= */
/* SCROLL BUTTONS            */
/* ========================= */

.scroll-jump {

    display: none;

}

}



/* =============================================== */
/*                    MOBILE                       */
/* =============================================== */

@media (max-width: 480px) {

/* ========================= */
/* HEADER                    */
/* ========================= */

body,
p,
li,
td,
blockquote {

    /*hyphens: auto;
    overflow-wrap: normal;*/
    font-family: "Inter", sans-serif;

}

p {
        font-family: "Inter", sans-serif;
        font-size: 18px;
        line-height: 1.7;
    }



.layout-header {

    padding: 12px 14px;

}

header nav {

    gap: 2px;

}

.logo-main {

    font-size: 24px;

}

.logo-subline {

    font-size: 13px;

    letter-spacing: 0.07em;

}

/* ========================= */
/* MOBILE NAV                */
/* ========================= */

.nav-toggle {

    width: 38px;
    height: 38px;
    top: 0px;
    gap: 5px;

}

.nav-toggle .bar {

    width: 18px;

}

.nav-menu.nav-open {

    width: 230px;

}

.nav-menu.nav-open .submenu li + li {
    margin-top: 12px;
}

.nav-menu.nav-open > li.has-submenu > .submenu {
    max-height: calc(100dvh - var(--header-height) - 140px);
    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: none;
}

.nav-menu.nav-open > li.has-submenu > .submenu::-webkit-scrollbar {
    display: none;
}

.submenu-scroll-track {
    position: fixed;
    width: 8px;
    background: rgba(31, 46, 61, 0.15);
    border-radius: 4px;
    z-index: 99999;
    pointer-events: none;
}

.submenu-scroll-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    min-height: 32px;
    background: rgba(31, 46, 61, 0.55);
    border-radius: 4px;
}

.submenu a.rr-lock {
    display: flex;
    align-items: center;
}

.submenu a.rr-lock::before {
    flex: 0 0 auto;
}







/*body.light-theme*/

.nav-menu.nav-open a {

    font-size: 16px;

    padding: 11px 16px;

}

/* ========================= */
/* HERO — SMARTPHONE         */
/* ========================= */

.hero {
        height: calc(100svh - var(--header-height));
        min-height: 0;
    }

 .hero-content {
        top: 44%;
        left: 5%;
        width: 90%;
        padding: 0 12px 80px 12px;
    }



.hero.hero-text-long .hero-content {
    top: 50%;
}


    .hero-content h1 {
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
        font-size: 32px;
        line-height: 1.12;
        letter-spacing: 0;
        text-align: center;
        hyphens: manual;
        overflow-wrap: normal;

    }

    .hero-controls {
        bottom: 1rem;
    }


.hero-controls button {

    border: 1px solid rgba(95,225,245,.95);

}

/* ========================= */
/* LANGUAGE / THEME          */
/* ========================= */

.language-toggle {

    font-size: 1rem;
    top: 3px;
}

.language-arrow {

    font-size: 1.05rem;

    top: 1px;

}

/* ========================= */
/* THEME - Toggle            */
/* ========================= */

.ui-theme-toggle {

    font-size: 17px;
    top: 1px;
}

/* ========================= */
/* HERO                      */
/* ========================= */




/* ========================= */
/* CONTENT                   */
/* ========================= */

.layout-container {

    padding: 0 16px 42px 16px;

}

/* ========================= */
/* TYPOGRAFIE                */
/* ========================= */

h1 {

    font-size: 27px;

}

h2 {

    font-size: 23px;

}

h3 {

    font-size: 20px;

}

h4 {

    font-size: 18px;

}

h5 {

    font-size: 16px;

}

p,
li {

    font-size: 18px;

    line-height: 1.7;

}

/* ========================= */
/* BUTTONS                   */
/* ========================= */

.button {

    width: 100%;

    text-align: center;

    padding: 12px 16px;

    font-size: 15px;

}

.rr-overview {
        margin-left: 0;
    }

    .rr-overview li {
        padding-left: 0;
        text-indent: 0;
    }

    .rr-overview li::after {
        width: 100%;
        margin-left: 0;
    }

    .rr-overview .overview-subline {
        display: inline;
        margin-left: 0;
    }



/* ========================= */
/* FOOTER                    */
/* ========================= */

.footer-divider {

    width: 180px;

}

.footer-legal {

   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 6px 22px;

}

.footer-statement {

    font-size: 15px;

}

}