/* ================================================= */
/* BASE.CSS - rhenus.one/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%;
}
strong {
font-weight: 700;
}
/* ===================================================== */
/* kombiniert: front-weight / underline */
/* nicht */
/* ===================================================== */
.underline {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: rgba(255,160,0,1);
}
/* ================================================= */
/* kombiniert: front-weight / underline */
/* nicht */
/* ================================================= */
.important {
font-weight: 700;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1.5px;
}
/* ================================================= */
/* 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%;
}
/* ================================================= */
/* HEADING-SYSTEM — H1 BIS H6 */
/* ================================================= */
h1 {
font-family: "Inter", sans-serif;
font-size: 40px;
font-weight: 400;
letter-spacing: 0.015em;
line-height: 1.25;
margin-top: 0;
margin-bottom: 38px;
}
h2 {
font-family: "Inter", sans-serif;
font-size: 32px;
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: fixed;
top: 0;
z-index: 1000;
width: 100%;
background: rgba(32, 36, 42, 1);
overflow: visible;
}
body.light-theme header {
background: rgba(250,250,250,1);
/* border-bottom: 1px solid rgba(31, 46, 61, 0.12); */
}
/* ============================================================== */
/* HEADER - Schattenkante zur Page_Impressum, AHb, Urheberrecht */
/* ============================================================== */
body.subpage header {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
body.light-theme.subpage header {
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.40);
}
.layout-header {
position: relative;
max-width: 1340px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 30px 28px;
}
header nav {
display: inline-flex;
align-items: center;
gap: 12px;
/* position: relative; */
top: 3px;
}
.nav-menu {
list-style: none;
display: flex;
flex-direction: row;
gap: 14px;
white-space: nowrap;
margin: 0;
padding: 0;
}
.nav-menu a {
display: flex;
align-items: center;
height: 44px;
padding-top: 2px;
font-size: 1.1rem;
font-weight: 400;
letter-spacing: 0.075em;
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);
}
/* ================================================= */
/* 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: absolute;
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
top: calc(100% - 0px);
right: 0px;
gap: 0px;
width: 210px; /* breiter Kasten */
max-width: 80vw;
align-items: stretch;
background: rgba(36, 42, 48, 0.98);
backdrop-filter: none;
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: rgba(248, 249, 250, 1);
/* 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-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);
}
/* ================================================= */
/* SCHRIFTEN - DROPDOWN */
/* ================================================= */
.nav-item-dropdown {
position: relative;
}
.nav-link-dropdown {
cursor: pointer;
}
/* ================================================= */
/* Schriften - Layout */
/* ================================================= */
.schriften-layout {
display: grid;
grid-template-columns: 500px minmax(0, 900px);
gap: 48px;
}
.schriften-sidebar {
position: sticky;
top: 200px;
align-self: start;
}
.schriften-content {
min-width: 0;
}
.schriften-liste a {
display: block;
width: 100%;
font-size: 18px;
padding: 12px 0;
line-height: 1.45;
font-weight: 400;
letter-spacing: 0.02em;
white-space: normal;
text-decoration: none;
color: rgba(220,225,230,1);
}
body.light-theme .schriften-liste a {
color: rgba(31,46,61,0.88);
}
.schriften-liste a:hover {
color: rgba(255,160,0,1);
}
body.light-theme .schriften-liste a:hover {
color: rgba(140,105,35,1);
}
.schriften-toggle {
font-size: 24px;
font-weight: 500;
}
/* ================================================= */
/* TEXTE SCHRIFTEN COPYRIGHT REFERENZ */
/* ================================================= */
.schrift-referenz {
margin-top: -18px;
margin-bottom: 42px;
font-size: 0.95rem;
letter-spacing: 0.08em;
color: var(--text-muted);
}
/* ================================================= */
/* TEXTE im Bereich SCHRIFTEN */
/* ================================================= */
.schrift {
padding-top: 10px;
padding-bottom: 80px;
}
.schrift h1 {
margin-bottom: 40px;
}
.schrift h2 {
margin-top: 60px;
margin-bottom: 25px;
}
.schrift p {
max-width: 900px;
}
.schrift ul {
margin: 30px 0;
padding-left: 28px;
}
.schrift li {
margin-bottom: 12px;
line-height: 1.8;
}
/* ================================================= */
/* EINLEITUNG im Bereich SCHRIFTEN */
/* ================================================= */
.schrift-intro {
max-width: 900px;
margin-top: 0;
margin-bottom: 50px;
font-size: 1.25rem;
line-height: 1.8;
font-weight: 300;
}
/* ================================================= */
/* SCHRIFT - META */
/* ================================================= */
.schrift-meta {
margin: 0 0 16px 0;
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
}
/* ================================================= */
/* SCHRIFT - LEITSATZ */
/* ================================================= */
.schrift-leitsatz {
max-width: 900px;
margin-top: 80px;
margin-bottom: 0;
padding-top: 32px;
font-size: 1.5rem;
line-height: 1.9;
font-weight: 300;
font-style: italic;
/*border-top: 1px solid rgba(255,255,255,0.12);*/
text-align: center;
}
body.light-theme .schrift-leitsatz {
/*border-top: 1px solid rgba(31,46,61,0.12);*/
}
/* ================================================= */
/* 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);
}
/* ================================================= */
/* SCHRIFT - DIVIDER */
/* ================================================= */
.schrift-divider {
width: 240px;
height: 1px;
text-align: center;
margin: 90px auto 32px auto;
background: rgba(170,176,184,0.18);
}
/* ===============================================*/
/* ========================= */
/* DROPDOWN */
/* ========================= */
.nav-dropdown {
position: absolute;
top: calc(100% + 0px);
left: 0;
display: none;
list-style: none;
margin: 0;
padding: 0;
min-width: 260px;
background: rgba(36, 42, 48, 0.98);
z-index: 2000;
}
body.light-theme .nav-dropdown {
background: rgba(248,249,250,1);
}
/* ========================= */
/* EINBLENDEN */
/* ========================= */
.nav-item-dropdown:hover .nav-dropdown {
display: block;
}
/* ========================= */
/* LINKS */
/* ========================= */
.nav-dropdown li {
margin: 0;
}
.nav-dropdown a {
display: block;
padding: 14px 20px;
font-size: 17px;
letter-spacing: 0.04em;
text-decoration: none;
color: rgba(232,236,241,1);
}
body.light-theme .nav-dropdown a {
color: rgba(31,46,61,1);
}
.nav-dropdown a:hover {
background: rgba(255,255,255,0.06);
}
body.light-theme .nav-dropdown 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: 34px;
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: rgb(60, 82, 128);
}
/* ================================================= */
/* LOGO — Symbol */
/* ================================================= */
.logo-symbol {
height: 72px;
width: auto;
flex-shrink: 0;
}
/* ================================================= */
/* LOGO — ZWEIZEILIG */
/* ================================================= */
.logo-stack {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.05;
}
.logo-subline {
font-size: 20px;
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);
}
/* ================================================= */
/* HAMBURGER-MENÜ — KOMPLETT SAUBER */
/* ================================================= */
.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: -5px;
}
/* ============================= */
/* 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 */
/* ============================ */
.language-switch {
position: relative;
display: flex;
align-items: center;
margin-left: 12px;
/* margin-right: 8px: */
top: -5px;
}
/* ========================= */
/* Hauptbutton */
/* ========================= */
.language-toggle {
display: flex;
align-items: center;
gap: 4px;
background: transparent;
border: none;
cursor: pointer;
font-size: 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-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: min(1580px, 96vw);
margin-top: var(--header-height);
margin-left: auto;
margin-right: auto;
height: calc(100vh - 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
============================ */
.hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
z-index: 0;
}
/* ================================================= */
/* HERO — WEICHER ÜBERGANG ZUM HEADER (OBEN) */
/* ================================================= */
.hero::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.18),
rgba(0, 0, 0, 0.10),
rgba(0, 0, 0, 0.18)
);
z-index: 1;
}
body.light-theme .hero::before {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.18),
rgba(0, 0, 0, 0.10),
rgba(0, 0, 0, 0.18)
);
}
.hero::after {
display: none;
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
inset: 0;
/*background: rgba(0,0,0,0.24);*/
pointer-events: none;
z-index: 1;
}
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: 1;
}
.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 — SLIDESHOW */
/* ========================= */
.hero-slideshow {
position: absolute;
inset: 0;
opacity: 1;
transition: opacity 0.35s ease;
z-index: 0;
}
.hero-slideshow.ready {
opacity: 1;
}
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.8s ease-in-out;
}
.hero-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ========================= */
/* AKTIVES BILD */
/* ========================= */
.hero-slide.active {
opacity: 1;
}
.hero-content {
position: absolute;
top: 58%;
left: 8%;
transform: translateY(-50%);
display: flex;
justify-content: flex-start;
align-items: center;
width: min(980px, 70%);
text-align: left;
z-index: 2;
}
.hero-content h1 {
font-family: "Cormorant Garamond", serif;
font-size: 3.0rem;
font-weight: 400;
line-height: 1.22;
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);*/
margin: 0;
max-width: 980px;
}
/* ========================= */
/* 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: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: rgba(255,255,255,0.18);
color: rgba(255,255,255,0.95);
font-size: 1.2rem;
cursor: pointer;
backdrop-filter: blur(8px);
transition: background 0.3s ease, transform 0.2s ease;
}
.hero-controls button:hover {
background: rgba(255,255,255,0.30);
transform: scale(1.08);
}
.hero-controls button:active {
transform: scale(0.96);
}
/* ================================================= */
/* LAYOUT / CONTAINER */
/* ================================================= */
.layout-container {
position: relative;
max-width: 900px;
margin: 0 auto;
width: 100%;
padding: 20px 22px 20px 22px;
overflow-x: hidden;
}
/* ===================================================== */
/* Page-Abstand zum Header */
/* ===================================================== */
.page-legal {
padding-top: 160px;
}
/* ================================== */
/* 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;
}
/* ===================================================== */
/* Inhalt / Text - Komponenten */
/* HERVORHEBUNG / TEXT-ELEMENTE */
/* ===================================================== */
.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: 46px;
font-weight: 400;
letter-spacing: 0.017em;
line-height: 1.5;
margin-bottom: 15px;
font-variant-caps: small-caps;
}
/* ===================================================== */
/* LISTEN-Nummerierungen - Aufzählungen */
/* ===================================================== */
.list-order {
margin-top: 12px;
margin-bottom: 18px;
padding-left: 22px;
}
.list-order li {
margin-bottom: 10px;
line-height: 1.6;
}
/* ============================== */
/* 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;
}
/* ========================= */
/* LEGAL-SECTION für AHb */
/* ========================= */
.legal-section {
margin-top: 80px;
}
.legal-section:first-of-type {
margin-top: 0;
}
.legal-section h2,
.legal-section h3 {
margin-bottom: 24px;
}
.legal-section p {
margin-bottom: 18px;
}
.legal-section ul {
margin-top: 18px;
}
.legal-section li {
margin-bottom: 12px;
}
/* ============================================================== */
/* 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: 40px;
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);
}
/* ============================== */
/* PERSPEKTIVWECHSEL-SEITE */
/* ============================== */
.perspektivwechsel {
max-width: 760px;
margin: 80px auto;
}
.perspektive {
padding: 34px 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
body.light-theme .perspektive {
border-bottom: 1px solid rgba(31,46,61,0.08);
}
.perspektive-alt {
font-size: 26px;
font-weight: 300;
opacity: 0.55;
letter-spacing: 0.03em;
}
.perspektive-neu {
margin-top: 8px;
font-size: 38px;
font-weight: 400;
letter-spacing: 0.02em;
}
/* =============================== */
/* FOOTER — SYNCHRONISIERT */
/* =============================== */
.footer-signatur {
position: relative;
width: 100%;
margin-top: 40px;
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-menu {
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-menu a {
color: rgba(210, 216, 224, 1);
text-decoration: none;
}
body.light-theme .footer-menu a {
color: rgba(255, 255, 255, 1);
}
.footer-menu a:hover {
text-shadow: 0 0 0.6px currentColor;
color: rgba(255, 255, 255, 1);
}
body.light-theme .footer-menu 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;
}
body:not(.light-theme) .footer-name {
color: rgba(255, 255, 255, 0.96);
font-weight: 500;
}
body:not(.light-theme) .footer-domain {
color: rgba(255, 255, 255, 0.88);
font-weight: 500;
}
body:not(.light-theme) .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%
);
}
/* expanded */
.fade-expand.active .fade-content {
display: block;
}
.fade-expand.active::after {
display: none;
}
/* ======================= */
/* Mehr lesen Button */
/* ======================= */
.fade-toggle {
display: block;
margin: 20px auto 10px 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 */
}
/* ========================= */
/* 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.08em;
font-weight: 500;
line-height: 1.75;
letter-spacing: 0.02em;
color: rgba(45, 70, 110, 1);
}
.zitat-center {
text-align: center;
}
.zitat-gross {
font-size: 2.1rem;
line-height: 1.35;
}
/* ========================= */
/* VIDEO */
/* ========================= */
.video-section {
text-align: center;
}
.video-wrapper {
max-width: 760px; /* bewusst ruhiger als Textbreite */
margin: 0 auto;
aspect-ratio: 16 / 9; /* hält das Video proportional */
}
.video-wrapper iframe {
width: 100%;
height: 100%;
border: none;
}
/* ============================================================== */
/* ============================================================== */
/* RESPONSIVE — TABLET */
/* 1400px - 1100px - 768px - 480px */
/* ============================================================== */
/* ============================================================== */
/* =============================================== */
/* DESKTOP */
/* =============================================== */
@media (max-width: 1400px) {
/* ========================= */
/* HEADER */
/* ========================= */
main {
padding:
calc(var(--header-height) + 24px)
20px
24px;
}
:root {
--header-height: 84px;
}
.layout-header {
padding: 20px 24px;
}
.logo-main {
font-size: 31px;
}
.logo-subline {
font-size: 18px;
}
.nav-menu a {
font-size: 1.02rem;
}
/* ========================= */
/* HERO */
/* ========================= */
.hero {
height: calc(100dvh - var(--header-height));
}
.hero .layout-container {
padding-top: 70px;
padding-bottom: 60px;
}
/* ========================= */
/* HERO TYPOGRAFIE */
/* ========================= */
.hero > .layout-container h1 {
font-size: 72px;
letter-spacing: 0.17em;
left: 58px;
margin: 38px 0 0 0;
}
.hero h2 {
font-size: 38px;
}
.hero p {
font-size: 28px;
margin-bottom: 14px;
line-height: 1.35;
}
/* ========================= */
/* HERO DIVIDER */
/* ========================= */
.hero-divider {
width: 390px;
margin: 14px 0 18px 0px;
}
/* ========================= */
/* LAYOUT */
/* ========================= */
.layout-container {
max-width: 860px;
}
/* ========================= */
/* SCROLL BUTTONS */
/* ========================= */
.scroll-jump {
right: 14px;
}
.jump-btn {
width: 36px;
height: 36px;
}
}
/* ========================================================= */
/* LAPTOP */
/* ========================================================= */
@media (max-width: 1250px) {
/* ========================= */
/* HEADER */
/* ========================= */
main {
padding:
calc(var(--header-height) + 24px)
20px
24px;
}
:root {
--header-height: 78px;
}
.layout-header {
padding: 18px 22px;
}
.logo {
margin-left: 0;
}
.logo-main {
font-size: 29px;
}
.logo-subline {
font-size: 17px;
}
/* ========================= */
/* NAVIGATION */
/* ========================= */
.nav-menu {
display: none;
}
.nav-toggle {
display: inline-flex;
}
header nav {
gap: 8px;
}
/* ========================= */
/* THEME / LANGUAGE */
/* ========================= */
.ui-theme-toggle {
top: 0;
}
.language-switch {
top: 0;
}
/* ========================= */
/* HERO */
/* ========================= */
.hero {
}
.hero .layout-container {
padding-top: 40px;
padding-bottom: 40px;
padding-left: 50px;
padding-right: 30px;
}
/* ========================= */
/* HERO TYPOGRAFIE */
/* ========================= */
.hero > .layout-container h1 {
font-size: 60px;
letter-spacing: 0.16em;
left: 46px;
margin: 36px 0 0 0;
}
.hero h2 {
font-size: 33px;
}
.hero p {
font-size: 24px;
line-height: 1.4;
}
/* ========================= */
/* HERO DIVIDER */
/* ========================= */
.hero-divider {
width: 340px;
margin: 14px 0 21px 0px;
}
/* ========================= */
/* CONTENT */
/* ========================= */
.layout-container {
max-width: 820px;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
p,
li {
font-size: 17px;
}
}
/* =============================================== */
/* TABLET */
/* =============================================== */
@media (max-width: 768px) {
/* ========================= */
/* HEADER */
/* ========================= */
main {
padding:
calc(var(--header-height) + 24px)
20px
24px;
}
:root {
--header-height: 68px;
}
.layout-header {
padding: 14px 18px;
}
header nav {
gap: 4px;
}
.logo-symbol {
height: 58px;
}
.logo-main {
font-size: 27px;
}
.logo-subline {
font-size: 15px;
letter-spacing: 0.08em;
}
/* ========================= */
/* MOBILE NAV */
/* ========================= */
.nav-toggle {
width: 40px;
height: 40px;
gap: 5px;
}
/*.nav-menu.nav-open {
width: 172px;
}*/
.nav-menu.nav-open a {
padding: 12px 18px;
font-size: 17px;
}
/* ========================= */
/* LANGUAGE / THEME */
/* ========================= */
.language-arrow {
font-size: 0.95rem;
}
.ui-theme-toggle,
.language-switch {
top: 0;
}
/* ========================= */
/* HERO */
/* ========================= */
.hero {
margin-bottom: 42px;
padding-bottom: env(safe-area-inset-bottom);
padding-top: 0;
padding-bottom: 0;
}
/* ========================= */
/* HERO CONTAINER */
/* ========================= */
.hero .layout-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
padding: 56px 24px 60px 24px;
}
/* ========================= */
/* HERO TYPOGRAFIE */
/* ========================= */
.hero h1,
.hero h2,
.hero p {
position: static;
left: auto;
width: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.hero > .layout-container h1 {
font-size: 48px;
line-height: 0.92;
letter-spacing: 0.16em;
}
.hero h2 {
font-size: 28px;
margin-bottom: 14px;
}
.hero p {
font-size: 21px;
line-height: 1.4;
margin-bottom: 12px;
}
/* ========================= */
/* HERO DIVIDER */
/* ========================= */
.hero-divider {
width: 170px;
margin: 12px auto 18px auto;
left: 0;
}
/* ========================= */
/* CONTENT */
/* ========================= */
.page-legal {
padding-top: 100px;
}
.layout-container {
padding: 0 20px 48px 20px;
}
/* ========================= */
/* TYPOGRAFIE */
/* ========================= */
h1 {
font-size: 34px;
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;
margin-bottom: 15px;
font-size: 15px;
}
/* ========================= */
/* FOOTER */
/* ========================= */
.footer-menu {
gap: 14px;
font-size: 0.92rem;
}
.footer-statement {
font-size: 16px;
}
/* ========================= */
/* SCROLL BUTTONS */
/* ========================= */
.scroll-jump {
display: none;
}
/* ========================= */
/* SCHRIFTEN */
/* ========================= */
.schriften-layout {
grid-template-columns: 1fr;
gap: 30px;
}
.schriften-sidebar {
position: static;
}
}
/* =============================================== */
/* MOBILE */
/* =============================================== */
/* ================================================= */
/* RESPONSIVE — SMARTPHONE */
/* 480px und kleiner */
/* ================================================= */
@media (max-width: 480px) {
/* ========================= */
/* HEADER */
/* ========================= */
main {
padding:
calc(var(--header-height) + 24px)
20px
24px;
}
:root {
--header-height: 62px;
}
.layout-header {
padding: 12px 14px;
}
header nav {
gap: 2px;
}
.logo-symbol {
height: 48px;
}
.logo-main {
font-size: 24px;
}
.logo-subline {
font-size: 13px;
letter-spacing: 0.07em;
}
/* ========================= */
/* MOBILE NAV */
/* ========================= */
.nav-toggle {
width: 38px;
height: 38px;
gap: 5px;
}
.nav-toggle .bar {
width: 18px;
}
.nav-menu.nav-open {
width: 195px;
}
.nav-menu.nav-open a {
font-size: 16px;
padding: 11px 16px;
}
/* ========================= */
/* LANGUAGE / THEME */
/* ========================= */
.language-toggle {
font-size: 1rem;
}
.language-arrow {
font-size: 1rem;
top: 1px;
}
.ui-theme-toggle::before {
font-size: 17px;
}
/* ========================= */
/* HERO */
/* ========================= */
.hero {
margin-bottom: 36px;
}
/* ========================= */
/* HERO CONTAINER */
/* ========================= */
.hero .layout-container {
padding: 34px 18px 52px 18px;
}
/* ========================= */
/* HERO TYPOGRAFIE */
/* ========================= */
.hero > .layout-container h1 {
font-size: 44px;
line-height: 0.98;
letter-spacing: 0.14em;
margin: 18px 0 0 0;
}
.hero h2 {
font-size: 22px;
line-height: 1.15;
margin-bottom: 12px;
}
.hero p {
font-size: 18px;
line-height: 1.4;
margin-bottom: 10px;
}
/* ========================= */
/* HERO DIVIDER */
/* ========================= */
.hero-divider {
width: 130px;
margin: 10px auto 12px auto;
opacity: 0.82;
}
/* ========================= */
/* CONTENT */
/* ========================= */
.layout-container {
padding: 0 16px 42px 16px;
}
/* ========================= */
/* TYPOGRAFIE */
/* ========================= */
h1 {
font-size: 30px;
}
h2 {
font-size: 23px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 16px;
}
p,
li {
font-size: 15px;
line-height: 1.6;
}
/* ========================= */
/* BUTTONS */
/* ========================= */
.button {
width: 100%;
text-align: center;
padding: 12px 16px;
font-size: 15px;
margin-bottom: 10px;
}
/* ========================= */
/* FOOTER */
/* ========================= */
.footer-divider {
width: 180px;
}
.footer-menu {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 10px 18px;
}
.footer-statement {
font-size: 15px;
}
}