/* =====================================================================
RAE INHALT – Stile fuer Inhalts- und Pflichtseiten
=====================================================================
Fuer Seiten ohne Video-Hero: Team, Karriere, Kontakt, Impressum,
Datenschutz. Ergaenzt assets/css/chrome.css und assets/css/landing.css
und benutzt ausschliesslich deren Farbtoken – dadurch bleiben Header,
Footer und Buttons ueberall identisch.
Einbindung:
===================================================================== */
/* ---------------------------------------------------------------
SEITENKOPF – kompakter Kopf statt Video-Hero
----------------------------------------------------------------
Damit die Kopfzeile beim Scrollen richtig umschaltet, traegt der
Abschnitt data-header-theme="dark" (bei hellen Koepfen "light").
Aufbau: Farbverlauf als Grund, darauf das Kanzleizeichen als
blosse Linie (assets/js/kopf.js zeichnet es ein), darueber der
Text. Alles Gestaltbare steht in den Variablen unten.
Jede Seite bekommt ihre eigene Farbkombination ueber
Die Kombinationen stehen weiter unten unter FARBKOMBINATIONEN.
Groesse, Lage und Drehung des Zeichens sind ueberall gleich –
von Seite zu Seite wechseln nur die Farben.
Das Attribut data-kopf ist zugleich der Schalter: JEDER Abschnitt,
der es traegt, bekommt Verlauf und Zeichen – auch die eigenen Koepfe
von c.html (.lkx) und d.html (.stx-kopf). Deshalb haengen Verlauf,
Variablen und Zeichen unten an [data-kopf] und nicht an der Klasse.
---------------------------------------------------------------- */
[data-kopf] {
/* ---- Hintergrund ---- */
--kopf-bg-winkel: 160deg;
--kopf-bg-1: #0d2530; /* oben links */
--kopf-bg-2: #1b3d4c; /* Mitte */
--kopf-bg-2-pos: 52%; /* Lage der Mittelfarbe */
--kopf-bg-3: #2f5f70; /* unten rechts */
/* ---- Schrift ---- */
--kopf-text: #eef4f7;
--kopf-text-h1: #ffffff;
--kopf-text-tag: rgba(255, 255, 255, 0.62);
--kopf-text-lead: rgba(255, 255, 255, 0.78);
--kopf-punkt: var(--color-neon-green);
/* ---- Kacheln, die auf dem Kopf liegen ----
Benutzt die Linkliste auf c.html. Steht hier, damit eine Kachel
auf hellem wie auf dunklem Grund von selbst richtig aussieht. */
--kopf-flaeche: rgba(255, 255, 255, 0.05);
--kopf-flaeche-hover: rgba(255, 255, 255, 0.10);
--kopf-flaeche-linie: rgba(255, 255, 255, 0.14);
--kopf-schatten: rgba(0, 0, 0, 0.28);
/* ---- Kanzleizeichen: nur Kanten ---- */
--kopf-ico-farbe: #ffffff;
--kopf-ico-deck: 0.10; /* hebt sich nur minimal ab */
--kopf-ico-strich: 1px; /* bleibt haarfein */
--kopf-ico-groesse: 510px;
--kopf-ico-x: -180px; /* Abstand rechts (negativ = ragt hinaus) */
--kopf-ico-y: -200px; /* Abstand unten */
--kopf-ico-oben: -55px; /* nur bei data-kopf-hoch, s. u. */
--kopf-ico-dreh: 0deg;
/* ---- Farbwelle ueber die Kanten ---- */
--kopf-welle-strich: 1.4px;
--kopf-welle-intervall: 9; /* Sekunden zwischen zwei Durchlaeufen */
--kopf-welle-dauer: 2.6; /* Dauer eines Durchlaufs */
--kopf-welle-staerke: 0.25; /* Leuchtkraft */
--kopf-welle-breite: 34; /* Breite des Farbbandes, % */
--kopf-welle-schraeg: 28; /* zufaellige Schraeglage bis … Grad */
--kopf-welle-zufall: 1; /* 1 = zufaelliger Farbton, 0 = feste Farben */
--kopf-welle-a: #51e184;
--kopf-welle-b: #7ad0ff;
--kopf-welle-takt: 1; /* 0 = nur beim Scrollen, kein Takt */
/* ---- Farbwelle beim Scrollen ----
Waehrend gescrollt wird, laeuft das Farbband mit: nach unten in
die eine, nach oben in die andere Richtung. Bleibt das Scrollen
stehen, blendet es weich aus. */
--kopf-scroll: 1; /* 0 = aus */
--kopf-scroll-weg: 900; /* Scrollweg in px fuer einen Durchlauf */
--kopf-scroll-staerke: 0.3; /* Leuchtkraft */
--kopf-scroll-winkel: -18; /* Schraeglage in Grad */
position: relative;
background: linear-gradient(var(--kopf-bg-winkel),
var(--kopf-bg-1) 0%,
var(--kopf-bg-2) var(--kopf-bg-2-pos),
var(--kopf-bg-3) 100%);
color: var(--kopf-text);
overflow: hidden;
}
.rae-seitenkopf { padding: 11rem 0 5.5rem; }
/* Die frueher hier gezeichnete Raute ist durch das Kanzleizeichen
ersetzt – siehe assets/js/kopf.js. */
.rae-seitenkopf::after { content: none; }
.rae-kopf-ico {
position: absolute;
right: var(--kopf-ico-x);
bottom: var(--kopf-ico-y);
width: var(--kopf-ico-groesse);
height: auto;
transform: rotate(var(--kopf-ico-dreh));
transform-origin: 50% 50%;
pointer-events: none;
overflow: visible;
z-index: 0;
}
/* Ruhige Grundlinie: aeussere Raute, Innenkante des Rings, Mittelraute. */
.rae-kopf-ico .kante {
fill: none;
stroke: var(--kopf-ico-farbe);
stroke-opacity: var(--kopf-ico-deck);
stroke-width: var(--kopf-ico-strich);
vector-effect: non-scaling-stroke;
}
/* Zweite Lage derselben Linien – traegt nur die Farbwelle. */
.rae-kopf-ico .welle {
fill: none;
stroke-width: var(--kopf-welle-strich);
vector-effect: non-scaling-stroke;
}
.rae-kopf-welle { opacity: 0; }
/* Traegt ein Abschnitt nicht nur den Kopf, sondern die ganze Seite
(c.html: die Linkliste steht mit im selben Abschnitt), dann haengt
das Zeichen oben statt unten – sonst saesse es am Seitenende und
waere im Kopf gar nicht zu sehen. Groesse und Abstand rechts
bleiben unveraendert. Kennzeichen im HTML: data-kopf-hoch */
[data-kopf-hoch] .rae-kopf-ico { top: var(--kopf-ico-oben); bottom: auto; }
/* Am Handy kleiner und weiter nach aussen, damit die Linien nicht
durch die Ueberschrift laufen. */
@media (max-width: 768px) {
[data-kopf] {
--kopf-ico-groesse: 380px;
--kopf-ico-x: -170px;
--kopf-ico-y: -120px;
}
}
.rae-seitenkopf .rae-container { position: relative; z-index: 1; }
.rae-seitenkopf .rae-tag { color: var(--kopf-text-tag); }
.rae-seitenkopf h1 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2.1rem, 5vw, 3.4rem);
font-weight: 500;
line-height: 1.12;
margin: 0.7rem 0 0;
color: var(--kopf-text-h1);
}
.rae-seitenkopf h1 .rae-dot { color: var(--kopf-punkt); }
.rae-seitenkopf p.rae-seitenkopf-lead {
max-width: 620px;
margin: 1.1rem 0 0;
color: var(--kopf-text-lead);
font-size: 1rem;
line-height: 1.85;
}
.rae-seitenkopf .rae-hero-hours {
margin-top: 1.5rem;
justify-content: flex-start;
color: var(--kopf-text-lead);
}
.rae-seitenkopf .lp-btns { justify-content: flex-start; margin-top: 2rem; }
/* ---------------------------------------------------------------
HELLE KOEPFE
Ein heller Kopf traegt zusaetzlich data-kopf-hell und
data-header-theme="light". Dann wird die Schrift dunkel und die
beiden Knoepfe bekommen tragfaehige Farben – sonst waeren der
weisse Text und der Glas-Knopf auf hellem Grund nicht zu lesen.
---------------------------------------------------------------- */
[data-kopf-hell] {
--kopf-text: #1d2e36;
--kopf-text-h1: #0f242d;
--kopf-text-tag: rgba(29, 46, 55, 0.58);
--kopf-text-lead: rgba(29, 46, 55, 0.76);
--kopf-punkt: #2f9c63;
--kopf-flaeche: rgba(255, 255, 255, 0.62);
--kopf-flaeche-hover: rgba(255, 255, 255, 0.9);
--kopf-flaeche-linie: rgba(18, 48, 60, 0.14);
--kopf-schatten: rgba(18, 48, 60, 0.14);
}
[data-kopf-hell] .rae-hero-hours { text-shadow: none; }
[data-kopf-hell] .rae-btn--video { --btn-line: rgba(15, 36, 45, 0.26); }
[data-kopf-hell] .rae-btn--video.rae-btn--dunkel {
--btn-fill: rgba(15, 36, 45, 0.9);
--btn-ink: #ffffff;
--btn-line: rgba(15, 36, 45, 0.3);
}
/* ---------------------------------------------------------------
FARBKOMBINATIONEN
----------------------------------------------------------------
Eine Zeile je Seite. Geaendert werden nur Farben, Deckkraft und der
Takt der Welle – Groesse und Lage des Zeichens bleiben ueberall
gleich. Etwa die Haelfte der Koepfe ist hell gehalten; helle Koepfe
tragen im HTML zusaetzlich data-kopf-hell und
data-header-theme="light".
VERGEBEN
dunkel nordlicht vollmachtbankdaten.html
eis d.html (Standorte/QR)
hell hellperle team.html
hellzink c.html (Linkliste)
hellsilber karriere.html
hellsalbei kontakt.html
hellrauch e.html (Mandantenstammblatt)
hellgrau impressum.html
hellstein datenschutz.html
VORRAT – fertig, aber keiner Seite zugeteilt: petrol (steht nur noch
in test-team-kopf.html), stahl, tinte, mineral, nacht, graphit,
indigo.
Zum Tauschen genuegt das Attribut data-kopf in der jeweiligen Seite.
---------------------------------------------------------------- */
/* ================= DUNKLE KOEPFE ================= */
/* Petrol – die Hausfarbe, nur tiefer und mit Jadegruen im Auslauf. */
[data-kopf="petrol"] {
--kopf-bg-winkel: 165deg;
--kopf-bg-1: #0b2630;
--kopf-bg-2: #16454f;
--kopf-bg-2-pos: 51%;
--kopf-bg-3: #3c7a72;
--kopf-ico-farbe: #ffffff;
--kopf-ico-deck: 0.13;
--kopf-welle-intervall: 9;
--kopf-welle-dauer: 3.2;
--kopf-welle-staerke: 0.26;
--kopf-welle-zufall: 0;
--kopf-welle-a: #86e8c4;
--kopf-welle-b: #46a2c9;
}
/* Graphit – trockenes Schiefergrau, kuehler Mintschimmer in der Welle. */
[data-kopf="graphit"] {
--kopf-bg-winkel: 168deg;
--kopf-bg-1: #13181c;
--kopf-bg-2: #232c33;
--kopf-bg-2-pos: 53%;
--kopf-bg-3: #3e4d58;
--kopf-ico-farbe: #ffffff;
--kopf-ico-deck: 0.13;
--kopf-welle-intervall: 10;
--kopf-welle-dauer: 3.4;
--kopf-welle-staerke: 0.27;
--kopf-welle-zufall: 0;
--kopf-welle-a: #7fd8c4;
--kopf-welle-b: #93a7b5;
}
/* Nordlicht – drei kuehle Toene in einem Zug, alle aus der blauen
Familie: Tintenmarine oben links, kraeftiges Azur in der Mitte,
Cyan-Petrol unten rechts. Kein Violett – es hat sich am Blau der
unteren Ecke gerieben. Zeichen in Eisblau, Welle von Aquamarin nach
Eisblau. Heller und gesaettigter als "eis" auf d.html, damit die
beiden Seiten nicht gleich wirken. */
[data-kopf="nordlicht"] {
--kopf-bg-winkel: 145deg;
--kopf-bg-1: #06182e;
--kopf-bg-2: #124a86;
--kopf-bg-2-pos: 45%;
--kopf-bg-3: #1c8fa6;
--kopf-ico-farbe: #cfe6ff;
--kopf-ico-deck: 0.15;
--kopf-punkt: #5ce0d0;
--kopf-welle-intervall: 10;
--kopf-welle-dauer: 3.8;
--kopf-welle-staerke: 0.3;
--kopf-welle-zufall: 0;
--kopf-welle-a: #7ff5d6;
--kopf-welle-b: #7fc4ff;
}
/* Indigo – tiefes Blauviolett, Zeichen in gedecktem Gold. */
[data-kopf="indigo"] {
--kopf-bg-winkel: 154deg;
--kopf-bg-1: #0c1130;
--kopf-bg-2: #1b2352;
--kopf-bg-2-pos: 52%;
--kopf-bg-3: #3e4180;
--kopf-ico-farbe: #e6cf9a;
--kopf-ico-deck: 0.16;
--kopf-welle-intervall: 11;
--kopf-welle-dauer: 3.8;
--kopf-welle-staerke: 0.28;
--kopf-welle-zufall: 0;
--kopf-welle-a: #f0d08a;
--kopf-welle-b: #8f8fe0;
}
/* Eis – kaltes Mitternachtsblau, das ins Cyan aufreisst. Zeichen in
Eisblau, die Welle laeuft von Cyan nach Violett. */
[data-kopf="eis"] {
--kopf-bg-winkel: 158deg;
--kopf-bg-1: #050f1a;
--kopf-bg-2: #0d2b3f;
--kopf-bg-2-pos: 50%;
--kopf-bg-3: #17667e;
--kopf-ico-farbe: #bfe8f5;
--kopf-ico-deck: 0.16;
--kopf-punkt: #4fd6e8;
--kopf-welle-intervall: 8;
--kopf-welle-dauer: 3.4;
--kopf-welle-staerke: 0.3;
--kopf-welle-zufall: 0;
--kopf-welle-a: #63e8ff;
--kopf-welle-b: #9d8cff;
--kopf-scroll-staerke: 0.34;
}
/* Nacht – fast schwarzes Marineblau, Zeichen in Kupfer. */
[data-kopf="nacht"] {
--kopf-bg-winkel: 150deg;
--kopf-bg-1: #070e17;
--kopf-bg-2: #10202f;
--kopf-bg-2-pos: 55%;
--kopf-bg-3: #263b4e;
--kopf-ico-farbe: #e8c9a0;
--kopf-ico-deck: 0.17;
--kopf-welle-intervall: 12;
--kopf-welle-dauer: 4.2;
--kopf-welle-staerke: 0.28;
--kopf-welle-zufall: 0;
--kopf-welle-a: #e0a668;
--kopf-welle-b: #6f9ec0;
}
/* ================= HELLE KOEPFE =================
Alle bauen auf hellem Grau auf und unterscheiden sich nur im
Beiton. Die Linie des Zeichens ist hier dunkel und liegt bewusst
etwas tiefer als auf dunklem Grund – dunkel auf hell traegt weiter. */
/* Hellsilber – kuehles Silbergrau mit blauem Schimmer. */
[data-kopf="hellsilber"] {
--kopf-bg-winkel: 170deg;
--kopf-bg-1: #f7f8fa;
--kopf-bg-2: #e9ecf1;
--kopf-bg-2-pos: 54%;
--kopf-bg-3: #c9d0da;
--kopf-ico-farbe: #17293a;
--kopf-ico-deck: 0.12;
--kopf-punkt: #2b6f8f;
--kopf-welle-intervall: 9;
--kopf-welle-dauer: 3.4;
--kopf-welle-staerke: 0.36;
--kopf-welle-zufall: 0;
--kopf-welle-a: #4a7f9c;
--kopf-welle-b: #8e9aa6;
--kopf-scroll-staerke: 0.4;
}
/* Hellsalbei – helles Grau mit einem Hauch Salbei. */
[data-kopf="hellsalbei"] {
--kopf-bg-winkel: 166deg;
--kopf-bg-1: #f5f7f4;
--kopf-bg-2: #e8ece7;
--kopf-bg-2-pos: 53%;
--kopf-bg-3: #c9d2c9;
--kopf-ico-farbe: #1e2f2a;
--kopf-ico-deck: 0.11;
--kopf-punkt: #3f7d5a;
--kopf-welle-intervall: 8;
--kopf-welle-dauer: 3.2;
--kopf-welle-staerke: 0.34;
--kopf-welle-zufall: 0;
--kopf-welle-a: #4c7d63;
--kopf-welle-b: #8b968e;
--kopf-scroll-staerke: 0.38;
}
/* Hellrauch – das tiefste der hellen Grau, fast Rauch. */
[data-kopf="hellrauch"] {
--kopf-bg-winkel: 174deg;
--kopf-bg-1: #eef1f3;
--kopf-bg-2: #dee3e8;
--kopf-bg-2-pos: 50%;
--kopf-bg-3: #bcc5cd;
--kopf-ico-farbe: #16222b;
--kopf-ico-deck: 0.12;
--kopf-punkt: #2f6d86;
--kopf-welle-intervall: 10;
--kopf-welle-dauer: 3.6;
--kopf-welle-staerke: 0.36;
--kopf-welle-zufall: 0;
--kopf-welle-a: #3d6b86;
--kopf-welle-b: #7d8790;
--kopf-scroll-staerke: 0.4;
}
/* Hellzink – klares, kuehles Hellgrau fuer die Schnellzugriffsseite.
Etwas mehr Zeichnung als hellgrau, damit die Kacheln der Linkliste
sich abheben. */
[data-kopf="hellzink"] {
--kopf-bg-winkel: 172deg;
--kopf-bg-1: #f8f9fa;
--kopf-bg-2: #e8ecef;
--kopf-bg-2-pos: 48%;
--kopf-bg-3: #c4ccd3;
--kopf-ico-farbe: #14252e;
--kopf-ico-deck: 0.11;
--kopf-punkt: #2f9c63;
--kopf-welle-intervall: 9;
--kopf-welle-dauer: 3.4;
--kopf-welle-staerke: 0.36;
--kopf-welle-zufall: 0;
--kopf-welle-a: #3f7f8f;
--kopf-welle-b: #7f8b95;
--kopf-scroll-staerke: 0.4;
}
/* Hellgrau – kuehles Papiergrau. */
[data-kopf="hellgrau"] {
--kopf-bg-winkel: 168deg;
--kopf-bg-1: #f5f7f8;
--kopf-bg-2: #e6ebee;
--kopf-bg-2-pos: 55%;
--kopf-bg-3: #cbd6dc;
--kopf-ico-farbe: #12303c;
--kopf-ico-deck: 0.12;
--kopf-punkt: #2f7d8c;
--kopf-welle-intervall: 10;
--kopf-welle-dauer: 3.4;
--kopf-welle-staerke: 0.38;
--kopf-welle-zufall: 0;
--kopf-welle-a: #2f7d8c;
--kopf-welle-b: #6d8496;
--kopf-scroll-staerke: 0.42;
}
/* Hellstein – warmes Sandgrau, Bronze und Moos in der Welle. */
[data-kopf="hellstein"] {
--kopf-bg-winkel: 176deg;
--kopf-bg-1: #f7f5f2;
--kopf-bg-2: #ebe7e1;
--kopf-bg-2-pos: 52%;
--kopf-bg-3: #d3ccc2;
--kopf-ico-farbe: #2b2b28;
--kopf-ico-deck: 0.11;
--kopf-punkt: #8a6b3a;
--kopf-welle-intervall: 11;
--kopf-welle-dauer: 3.8;
--kopf-welle-staerke: 0.36;
--kopf-welle-zufall: 0;
--kopf-welle-a: #9a7b4f;
--kopf-welle-b: #5f6f66;
--kopf-scroll-staerke: 0.4;
}
/* Hellperle – das hellste Grau der Reihe. Anders als die uebrigen
hellen Koepfe laeuft es unten nicht ins mittlere Grau aus, sondern
bleibt fast weiss; deshalb sind Zeichen und Welle hier etwas
zurueckgenommen, sonst wuerden sie auf dem hellen Grund stechen. */
[data-kopf="hellperle"] {
--kopf-bg-winkel: 168deg;
--kopf-bg-1: #fbfcfd;
--kopf-bg-2: #f2f5f7;
--kopf-bg-2-pos: 52%;
--kopf-bg-3: #dfe6eb;
--kopf-ico-farbe: #12303c;
--kopf-ico-deck: 0.10;
--kopf-punkt: #2f9c63;
--kopf-welle-intervall: 10;
--kopf-welle-dauer: 3.5;
--kopf-welle-staerke: 0.32;
--kopf-welle-zufall: 0;
--kopf-welle-a: #35708a;
--kopf-welle-b: #7c8a94;
--kopf-scroll-staerke: 0.36;
}
/* ================= VORRAT ================= */
/* Stahl – kuehles Blau, sachlich. */
[data-kopf="stahl"] {
--kopf-bg-winkel: 158deg;
--kopf-bg-1: #0e2939;
--kopf-bg-2: #1c4a63;
--kopf-bg-2-pos: 53%;
--kopf-bg-3: #43829a;
--kopf-ico-farbe: #ffffff;
--kopf-ico-deck: 0.12;
--kopf-welle-intervall: 8;
--kopf-welle-dauer: 3;
--kopf-welle-staerke: 0.25;
--kopf-welle-zufall: 0;
--kopf-welle-a: #7fd8ff;
--kopf-welle-b: #bdf0de;
}
/* Tinte – dunkles Blau, unten rechts ein warmer, gedeckter Ton. */
[data-kopf="tinte"] {
--kopf-bg-winkel: 156deg;
--kopf-bg-1: #0f1e33;
--kopf-bg-2: #1e3a5c;
--kopf-bg-2-pos: 58%;
--kopf-bg-3: #6f524c;
--kopf-ico-farbe: #ffffff;
--kopf-ico-deck: 0.12;
--kopf-welle-intervall: 7;
--kopf-welle-dauer: 3;
--kopf-welle-staerke: 0.25;
--kopf-welle-zufall: 0;
--kopf-welle-a: #ffbc93;
--kopf-welle-b: #74b9da;
}
/* Mineral – Graphit ins gedeckte Indigo. */
[data-kopf="mineral"] {
--kopf-bg-winkel: 172deg;
--kopf-bg-1: #151f2b;
--kopf-bg-2: #26364f;
--kopf-bg-2-pos: 54%;
--kopf-bg-3: #565080;
--kopf-ico-farbe: #ffffff;
--kopf-ico-deck: 0.14;
--kopf-welle-intervall: 8;
--kopf-welle-dauer: 3.6;
--kopf-welle-staerke: 0.27;
--kopf-welle-zufall: 0;
--kopf-welle-a: #a496ff;
--kopf-welle-b: #6ed7c6;
}
/* ---------------------------------------------------------------
INHALT – Fliesstext fuer Impressum, Datenschutz und aehnliche Seiten
---------------------------------------------------------------- */
.rae-inhalt { background: var(--color-white); padding: 4.5rem 0 5rem; }
.rae-inhalt .rae-container { max-width: 820px; }
.rae-inhalt h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.35rem, 2.6vw, 1.75rem);
font-weight: 600;
color: #113647;
margin: 2.6rem 0 0.85rem;
}
.rae-inhalt h2:first-child { margin-top: 0; }
.rae-inhalt h3 {
font-family: 'Instrument Sans', sans-serif;
font-size: 1rem;
font-weight: 600;
color: #2684b0;
margin: 1.8rem 0 0.5rem;
}
.rae-inhalt p,
.rae-inhalt li {
color: #333;
font-size: 0.95rem;
line-height: 1.95;
}
.rae-inhalt p + p { margin-top: 0.9rem; }
.rae-inhalt ul { margin: 0.7rem 0 0 1.1rem; }
.rae-inhalt li { margin-bottom: 0.25rem; }
.rae-inhalt a { color: #2684b0; text-decoration: underline; text-underline-offset: 3px; }
.rae-inhalt a:hover { color: var(--color-dark-blue); }
.rae-inhalt strong { font-weight: 600; color: #113647; }
.rae-inhalt hr {
border: 0;
border-top: 1px solid var(--color-medium-gray);
margin: 2.8rem 0;
}
.rae-inhalt-stand {
margin-top: 2.6rem;
color: #8b9aa3;
font-size: 0.82rem;
}
/* Hervorgehobener Kasten (z. B. Berufsrechtliche Angaben) */
.rae-kasten {
background: var(--color-light-gray);
border-left: 3px solid var(--rae-hellblau);
padding: 1.2rem 1.4rem;
margin: 1.6rem 0;
}
.rae-kasten p { margin: 0; }
.rae-kasten p + p { margin-top: 0.5rem; }
/* ---------------------------------------------------------------
KARTEN – Kontaktdaten, Standorte, "Was wir bieten"
---------------------------------------------------------------- */
.rae-karten {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.2rem;
margin-top: 2.4rem;
}
.rae-karte {
position: relative;
background: var(--color-light-gray);
padding: 1.5rem 1.6rem 1.7rem;
}
.rae-karte h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.28rem;
font-weight: 600;
color: #113647;
margin: 0 0 0.7rem;
}
.rae-karte p,
.rae-karte address {
color: #333;
font-size: 0.93rem;
font-style: normal;
line-height: 1.9;
margin: 0;
}
.rae-karte a { color: #2684b0; text-decoration: none; }
.rae-karte a:hover { text-decoration: underline; }
.rae-karte-zeile {
display: flex;
align-items: flex-start;
gap: 0.65rem;
margin-top: 0.55rem;
}
.rae-karte-zeile svg {
width: 16px; height: 16px; flex: none; margin-top: 0.32rem;
fill: none; stroke: var(--rae-hellblau); stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
}
.rae-karte-liste { list-style: none; margin: 0; padding: 0; }
.rae-karte-liste li {
position: relative;
padding-left: 1.1rem;
color: #333;
font-size: 0.93rem;
line-height: 1.9;
}
.rae-karte-liste li::before {
content: '';
position: absolute;
left: 0; top: 0.78em;
width: 6px; height: 6px;
border: 1.4px solid var(--rae-hellblau);
transform: rotate(45deg);
}
/* ---------------------------------------------------------------
STELLEN – Karriereseite
---------------------------------------------------------------- */
.rae-stellen { max-width: 820px; margin: 2.4rem auto 0; border-top: 1px solid var(--color-medium-gray); }
.rae-stelle { border-bottom: 1px solid var(--color-medium-gray); padding: 1.6rem 0 1.7rem; }
.rae-stelle h3 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.15rem, 2.2vw, 1.42rem);
font-weight: 600;
color: #113647;
margin: 0 0 0.45rem;
}
.rae-stelle-art {
display: inline-block;
margin-bottom: 0.7rem;
font-size: 0.73rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #2684b0;
}
.rae-stelle p { color: #333; font-size: 0.94rem; line-height: 1.92; margin: 0; }
/* ---------------------------------------------------------------
PERSONEN – Teamseite mit Werdegang
---------------------------------------------------------------- */
.rae-personen { max-width: 860px; margin: 2.6rem auto 0; }
.rae-person {
border-top: 1px solid var(--color-medium-gray);
padding: 1.7rem 0 1.8rem;
}
.rae-person:last-child { border-bottom: 1px solid var(--color-medium-gray); }
.rae-person-rolle {
display: block;
font-size: 0.73rem;
letter-spacing: 0.11em;
text-transform: uppercase;
color: #8b9aa3;
margin-bottom: 0.35rem;
}
.rae-person h3 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.25rem, 2.4vw, 1.55rem);
font-weight: 600;
color: #113647;
margin: 0 0 0.35rem;
}
.rae-person-gebiete { color: #2684b0; font-size: 0.9rem; line-height: 1.7; margin: 0 0 0.7rem; }
.rae-person p { color: #333; font-size: 0.94rem; line-height: 1.92; margin: 0; }
/* ---------------------------------------------------------------
Mobil
---------------------------------------------------------------- */
@media (max-width: 768px) {
.rae-seitenkopf { padding: 8.5rem 0 3.6rem; }
.rae-seitenkopf .lp-btns { flex-direction: column; align-items: stretch; }
.rae-inhalt { padding: 3.2rem 0 3.6rem; }
.rae-karten { grid-template-columns: 1fr; }
}