/*
Theme Name: RackBit-IT
Theme URI: https://rackbit-it.de/
Author: RackBit-IT
Author URI: https://rackbit-it.de/
Description: Unternehmens-Theme für RackBit-IT — IT-Beratung, Softwareentwicklung und Managed Services. Enthält Custom Post Types für Leistungen, Produkte, IT-Services und Teammitglieder sowie ein dynamisches Mega-Menü.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rackbit-it
Tags: business, custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/

/* =========================================================================
   INHALT
   0.  Schriften (lokal, Google Fonts selbst gehostet)
   1.  Design-Tokens (Farben, Fonts, Maße)
   2.  Reset & Basis
   3.  Layout-Bausteine (Container, Sections, Grids)
   4.  Buttons
   5.  Platzhalter-Grafiken (gestreifte Muster)
   6.  Header, Navigation, Mega-Menü, Mobile-Menü
   7.  Breadcrumbs
   8.  Startseite
   9.  Übersichts-Seiten (Archive)
   10. Detail-Seiten (Single CPT)
   11. FAQ-Accordion
   12. Blog (Übersicht + Artikel)
   13. Über uns
   14. Kontakt & Formular
   15. Statische Seiten / Prosa / 404 / Suche
   16. Footer
   17. Scroll-to-Top
   18. WordPress-Standardklassen & Barrierefreiheit
   19. Responsive (< 1080px)
   ========================================================================= */

/* =========================================================================
   0. SCHRIFTEN (lokal eingebunden, kein Google-Server)
   Variable Fonts: eine Datei pro Familie und Subset, die Strichstärke
   steuert die wght-Achse. Lizenz: SIL Open Font License 1.1.
   ========================================================================= */

/* Plus Jakarta Sans — Headlines (600–800) */
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url('fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter — Fließtext (400–600) */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono — Code/Tags (400–500) */
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}



/* =========================================================================
   1. DESIGN-TOKENS
   ========================================================================= */

:root {
	/* Farben aus der Design-Vorlage */
	--rb-primary: #6C5BB5;
	--rb-primary-dark: #2D2255;
	--rb-darkest: #1A1333;
	--rb-accent: #F59E0B;
	--rb-accent-hover: #D97706;
	--rb-bg-light: #F6F4FE;
	--rb-bg-sunken: #F8F7FB;
	--rb-white: #FFFFFF;
	--rb-border: #C8C4D4;
	--rb-border-light: #F0EFF4;

	/* Tokens der neuen Vorlage: hellere Trennlinie, getoente Flaeche und
	   dunklere Akzentstufe fuer Hover-Zustaende. */
	--rb-line: #E6E3EE;
	--rb-surface-accent: #F3F1FC;
	--rb-primary-strong: #574796;
	--rb-faint: #6F6885;
	--rb-text-dark: #2D2255;
	--rb-text-medium: #4A4260;
	--rb-text-light: #7A7490;
	--rb-highlight: #EDEAFC;
	--rb-purple-light: #B0A4DD;
	--rb-purple-mid: #8677C9;

	/* Verläufe & Schatten */
	--rb-gradient: linear-gradient(160deg, #2D2255 0%, #1A1333 100%);
	--rb-shadow: 0 8px 24px rgba(45, 34, 85, 0.12);
	--rb-shadow-soft: 0 8px 24px rgba(45, 34, 85, 0.2);

	/* Schriften */
	--rb-font-head: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
	--rb-font-body: 'Inter', system-ui, -apple-system, sans-serif;
	--rb-font-mono: 'JetBrains Mono', ui-monospace, monospace;

	/* Maße */
	--rb-container: 1240px;
	--rb-container-wide: 1280px;
	--rb-container-narrow: 780px;
	--rb-radius-card: 16px;
	--rb-radius-btn: 10px;
	--rb-radius-lg: 24px;
	--rb-header-height: 68px;
	--rb-header-height-small: 60px;
}


/* =========================================================================
   2. RESET & BASIS
   ========================================================================= */

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

html {
	/* Bewusst kein scroll-behavior: smooth — das wuerde auch Mausrad-Eingaben
	   ueber den Scroll-Animator leiten. Der Zurueck-nach-oben-Knopf gibt sein
	   sanftes Scrollen selbst an. */
	scroll-behavior: auto;
}

body {
	margin: 0;
	font-family: var(--rb-font-body);
	font-weight: 400;
	color: var(--rb-darkest);
	background: var(--rb-white);
	-webkit-font-smoothing: antialiased;
}

/* Grundgerüst: Footer bleibt bei kurzen Seiten unten */
.rb-site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--rb-white);
}

.rb-main {
	flex: 1;
}

a {
	color: var(--rb-primary);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--rb-primary-dark);
}

::selection {
	background: var(--rb-highlight);
	color: var(--rb-primary-dark);
}

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

/* Sichtbarer Fokus für Tastaturnutzung */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--rb-primary);
	outline-offset: 2px;
}

/* Hinweisleiste über dem Header (Beispielprojekt-Hinweis) */
.rb-notice-bar {
	background: var(--rb-border-light);
	color: var(--rb-text-medium);
	text-align: center;
	padding: 6px 12px;
	font-family: var(--rb-font-mono);
	font-size: 12px;
	letter-spacing: 0.02em;
}


/* =========================================================================
   3. LAYOUT-BAUSTEINE
   ========================================================================= */

.rb-container {
	max-width: var(--rb-container);
	margin: 0 auto;
	width: 100%;
}

.rb-container--wide {
	max-width: var(--rb-container-wide);
}

.rb-container--narrow {
	max-width: var(--rb-container-narrow);
}

.rb-container--640 {
	max-width: 640px;
}

.rb-container--680 {
	max-width: 680px;
}

/* Sections: Hintergrund-Varianten */
.rb-section {
	padding: 96px 24px;
}

.rb-section--white {
	background: var(--rb-white);
}

.rb-section--light {
	background: var(--rb-bg-light);
}

/* Eckdaten-Streifen: flacher als die uebrigen Sections und mit eigenem,
   leicht abgesenktem Hintergrund. */
.rb-section--stats {
	background: var(--rb-bg-sunken);
	padding: 40px 20px;
}

/* Dieselben Kennzahlen auf "Ueber uns": weisser Grund mit Abschlusslinie und
   die Containerbreite der uebrigen Unterseiten. */
.rb-section--about-stats {
	background: var(--rb-white);
	border-bottom: 1px solid var(--rb-border-light);
	padding: 40px 24px;
}

.rb-section--about-stats .rb-stats {
	max-width: none;
}

@media (min-width: 640px) {
	.rb-section--stats {
		padding-left: 32px;
		padding-right: 32px;
	}
}

.rb-section--gradient {
	background: var(--rb-gradient);
}

/* Sections: Abstands-Varianten */
.rb-section--md {
	padding: 72px 24px;
}

.rb-section--sm {
	padding: 56px 24px;
}

.rb-section--top-flush {
	padding-top: 0;
}

.rb-section--page-head {
	padding: 32px 24px 64px 24px;
}

.rb-section--cta {
	padding: 80px 24px;
	text-align: center;
}

/* Überschriften innerhalb von Sections */
.rb-section__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 32px;
	letter-spacing: -0.015em;
	color: var(--rb-primary-dark);
	margin: 0 0 12px 0;
}

.rb-section__title--center {
	text-align: center;
}

.rb-section__title--sm {
	font-size: 28px;
	margin-bottom: 32px;
}

.rb-section__title--xs {
	font-size: 26px;
	margin-bottom: 32px;
}

.rb-section__subtitle {
	text-align: center;
	color: var(--rb-text-medium);
	font-size: 16px;
	margin: 0 0 48px 0;
}

/* Grids */
.rb-grid {
	display: grid;
	gap: 24px;
}

.rb-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.rb-grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

.rb-grid--gap-lg {
	gap: 32px;
}

/* Kreis-Avatare mit Buchstaben */
.rb-avatar {
	border-radius: 50%;
	background: var(--rb-highlight);
	color: var(--rb-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--rb-font-head);
	font-weight: 700;
	flex-shrink: 0;
	overflow: hidden;
}

.rb-avatar--40 {
	width: 40px;
	height: 40px;
	font-size: 16px;
}

.rb-avatar--44 {
	width: 44px;
	height: 44px;
	font-size: 17px;
}

.rb-avatar--56 {
	width: 56px;
	height: 56px;
	font-size: 20px;
}


/* =========================================================================
   4. BUTTONS
   ========================================================================= */

.rb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: var(--rb-radius-btn);
	padding: 14px 32px;
	font-family: var(--rb-font-head);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.rb-btn--accent {
	background: var(--rb-accent);
	color: var(--rb-white);
}

.rb-btn--accent:hover,
.rb-btn--accent:focus {
	background: var(--rb-accent-hover);
	color: var(--rb-white);
}

.rb-btn--primary {
	background: var(--rb-primary);
	color: var(--rb-white);
}

.rb-btn--primary:hover,
.rb-btn--primary:focus {
	background: var(--rb-primary-dark);
	color: var(--rb-white);
}

/* Outline hell (auf dunklem Verlauf) */
.rb-btn--outline-light {
	background: transparent;
	color: var(--rb-white);
	border: 2px solid var(--rb-purple-mid);
	padding: 12px 32px;
}

.rb-btn--outline-light:hover,
.rb-btn--outline-light:focus {
	background: rgba(134, 119, 201, 0.15);
	color: var(--rb-white);
}

/* Outline lila (auf hellem Grund) */
.rb-btn--outline {
	background: transparent;
	color: var(--rb-primary);
	border: 2px solid var(--rb-primary);
	padding: 10px 16px;
	font-size: 13px;
	font-family: var(--rb-font-body);
}

.rb-btn--outline:hover,
.rb-btn--outline:focus {
	background: var(--rb-highlight);
	color: var(--rb-primary);
}

.rb-btn--sm {
	padding: 12px 24px;
	font-size: 0.875rem;
	min-height: 44px;
}

.rb-btn--lg {
	padding: 16px 40px;
	font-size: 16px;
}

.rb-btn--block {
	width: 100%;
}


/* =========================================================================
   5. PLATZHALTER-GRAFIKEN
   Die gestreiften Muster bleiben als CSS-Hintergrund erhalten, solange
   kein echtes Bild (Beitragsbild) hinterlegt ist.
   ========================================================================= */

.rb-ph {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: repeating-linear-gradient(45deg, #F0EFF4, #F0EFF4 12px, #EDEAFC 12px, #EDEAFC 24px);
	border-radius: var(--rb-radius-card);
}

/* Variante auf dunklem Hintergrund (Hero) */
.rb-ph--dark {
	background: repeating-linear-gradient(45deg, rgba(108, 91, 181, 0.18), rgba(108, 91, 181, 0.18) 12px, rgba(108, 91, 181, 0.08) 12px, rgba(108, 91, 181, 0.08) 24px);
	border: 1px solid rgba(176, 164, 221, 0.3);
	border-radius: var(--rb-radius-lg);
}

/* Variante mit weißen Streifen und Rahmen */
.rb-ph--card {
	background: repeating-linear-gradient(45deg, #EDEAFC, #EDEAFC 12px, #FFFFFF 12px, #FFFFFF 24px);
	border: 1px solid var(--rb-border);
	border-radius: 20px;
}

.rb-ph--round-lg {
	border-radius: var(--rb-radius-lg);
}

.rb-ph--4-3 {
	aspect-ratio: 4 / 3;
}

.rb-ph--16-9 {
	aspect-ratio: 16 / 9;
}

.rb-ph--16-10 {
	aspect-ratio: 16 / 10;
}

.rb-ph--2-1 {
	aspect-ratio: 2 / 1;
}

.rb-ph--4-5 {
	aspect-ratio: 4 / 5;
}

.rb-ph--16-7 {
	aspect-ratio: 16 / 7;
}

.rb-ph--1-1 {
	aspect-ratio: 1 / 1;
}

.rb-ph__label {
	font-family: var(--rb-font-mono);
	font-size: 13px;
	color: var(--rb-text-light);
}

.rb-ph__label--sm {
	font-size: 12px;
}

.rb-ph__label--boxed {
	background: var(--rb-white);
	padding: 8px 16px;
	border-radius: 8px;
}

.rb-ph__label--dark {
	color: var(--rb-purple-light);
	background: rgba(26, 19, 51, 0.6);
	padding: 8px 16px;
	border-radius: 8px;
}

/* Echte Bilder in denselben Rahmen einpassen */
.rb-media {
	width: 100%;
	overflow: hidden;
	border-radius: var(--rb-radius-card);
}

.rb-media--round-lg {
	border-radius: var(--rb-radius-lg);
}

.rb-media--20 {
	border-radius: 20px;
}

.rb-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rb-media--4-3 img {
	aspect-ratio: 4 / 3;
}

/* Hero-Bild: eigener Radius und ein Verhaeltniswechsel, den es sonst nirgends
   im Theme gibt — der hochkantigere 5:4-Ausschnitt erst ab dem Desktop. */
.rb-hero__media {
	border-radius: 14px;
}

.rb-hero__media img {
	aspect-ratio: 4 / 3;
}

@media (min-width: 1024px) {
	.rb-hero__media img {
		aspect-ratio: 5 / 4;
	}
}

.rb-media--16-9 img {
	aspect-ratio: 16 / 9;
}

.rb-media--16-10 img {
	aspect-ratio: 16 / 10;
}

.rb-media--2-1 img {
	aspect-ratio: 2 / 1;
}

.rb-media--4-5 img {
	aspect-ratio: 4 / 5;
}

.rb-media--16-7 img {
	aspect-ratio: 16 / 7;
}

.rb-media--1-1 img {
	aspect-ratio: 1 / 1;
}


/* =========================================================================
   6. HEADER, NAVIGATION, MEGA-MENÜ
   ========================================================================= */

/* Bewusst deckend statt halbtransparent mit backdrop-filter: Der Weichzeichner
   muss den Bereich hinter dem klebenden Header in jedem Frame neu berechnen, in
   dem sich darunter etwas aendert. Zusammen mit den scroll-getriebenen
   Reveal-Animationen ist das jeden Scroll-Frame der Fall — das kostet so viel,
   dass Scroll-Eingaben auflaufen und die Seite ruckt. */
.rb-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--rb-white);
	border-bottom: 1px solid var(--rb-border-light);
}

.rb-header__inner {
	max-width: var(--rb-container-wide);
	margin: 0 auto;
	padding: 0 24px;
	height: var(--rb-header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: height 0.2s ease;
}

/* Verkleinerter Header nach dem Scrollen */
.rb-header.is-scrolled .rb-header__inner {
	height: var(--rb-header-height-small);
}

.rb-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.rb-logo__mark {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.rb-logo__mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Rückfallebene ohne Logodatei: gefüllter Kreis mit dem Buchstaben "R" */
.rb-logo__mark--letter {
	border-radius: 50%;
	background: var(--rb-primary);
	font-family: var(--rb-font-head);
	font-weight: 800;
	color: var(--rb-white);
	font-size: 16px;
}

/* In der Navigation steht der Name bewusst in Großbuchstaben — überall sonst
   (Footer, Fließtexte, Seitentitel) in der Schreibweise "RackBit-IT". */
.rb-logo__text {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.02em;
	color: var(--rb-primary-dark);
	text-transform: uppercase;
}

/* Desktop-Navigation */
.rb-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	gap: 26px;
	margin: 0;
	padding: 0 26px;
	list-style: none;
}

.rb-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

.rb-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--rb-primary-dark);
	font-weight: 500;
	font-size: 0.9375rem;
	line-height: 1.2;
	cursor: pointer;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	font-family: var(--rb-font-body);
	white-space: nowrap;
}

.rb-nav__link:hover {
	color: var(--rb-primary);
}

/* Der Unterstrich liegt als Pseudo-Element unter dem Link und zählt damit
   nicht zur Boxhöhe. Nur so sitzt die Schrift der Menüpunkte exakt auf der
   gleichen Mittellinie wie der Text im Header-CTA. */
.rb-nav__link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	border-radius: 1px;
	background: var(--rb-primary);
	opacity: 0;
	transition: opacity 0.15s ease;
}

/* Aktiver Menüpunkt: nur Farbe und Unterstrich, bewusst dieselbe
   Schriftstärke wie inaktive Punkte — sonst wird der aktive Eintrag breiter
   und die Abstände im Menü verspringen von Seite zu Seite. */
.rb-nav__link.is-active,
.rb-nav__item.is-active > .rb-nav__link {
	color: var(--rb-primary);
}

.rb-nav__link.is-active::after,
.rb-nav__item.is-active > .rb-nav__link::after {
	opacity: 1;
}

/* Feste Metrik für das Caret, damit Punkte mit und ohne Dropdown
   (z. B. "Home" und "Produkte") exakt gleich hoch sind. Das SVG ist mit 12px
   niedriger als die Zeilenhöhe des Labels und beeinflusst die Boxhöhe daher
   nicht. */
.rb-nav__caret {
	display: block;
	flex: none;
	width: 12px;
	height: 12px;
	transition: transform 0.2s ease;
}

/* Beim geöffneten Mega-Menü dreht der Pfeil weich nach oben. */
.rb-nav__item.is-open .rb-nav__caret {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.rb-nav__caret {
		transition: none;
	}
}

/* Mega-Menü */
.rb-megamenu {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--rb-white);
	border-radius: var(--rb-radius-card);
	box-shadow: var(--rb-shadow);
	padding: 20px;
	width: 560px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, visibility 0.15s ease;
}

.rb-nav__item.is-open .rb-megamenu {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

/* Unsichtbare Brücke, damit der Hover zwischen Link und Menü nicht abreißt */
.rb-megamenu::before {
	content: '';
	position: absolute;
	top: -16px;
	left: 0;
	right: 0;
	height: 16px;
}

.rb-megamenu__item {
	display: flex;
	gap: 12px;
	padding: 10px;
	border-radius: var(--rb-radius-btn);
	transition: background-color 0.15s ease;
}

.rb-megamenu__item:hover,
.rb-megamenu__item:focus {
	background: var(--rb-bg-light);
}

/* Das Icon sitzt an der Oberkante der ersten Textzeile, nicht mittig zum
   gesamten Eintrag — bei zweizeiligen Tags waere es sonst versetzt. */
.rb-megamenu__item .rb-icon {
	flex: none;
	margin-top: 1px;
	color: var(--rb-primary);
}

.rb-megamenu__title {
	display: block;
	font-weight: 600;
	font-size: 14px;
	color: var(--rb-primary-dark);
	margin-bottom: 2px;
}

.rb-megamenu__tags {
	display: block;
	font-size: 12px;
	color: var(--rb-text-light);
}

/* Abschluss-Link ueber beide Spalten, unter der Aufzaehlung. */
.rb-megamenu__all {
	grid-column: 1 / -1;
	display: block;
	margin-top: 4px;
	padding: 10px 12px;
	border-radius: var(--rb-radius-btn);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--rb-primary);
	transition: background-color 0.15s ease;
}

.rb-megamenu__all:hover,
.rb-megamenu__all:focus-visible {
	background: var(--rb-surface-accent);
}

.rb-megamenu__empty {
	grid-column: 1 / -1;
	padding: 10px;
	font-size: 13px;
	color: var(--rb-text-light);
}

/* Header-CTA */
.rb-header__cta {
	flex-shrink: 0;
}

/* Hamburger */
.rb-burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
	padding: 8px;
	background: none;
	border: none;
}

.rb-burger__line {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--rb-primary-dark);
}

/* Mobile-Menü (Fullscreen-Overlay) */
.rb-mobile-nav {
	display: none;
	position: fixed;
	inset: var(--rb-header-height-small) 0 0 0;
	background: var(--rb-white);
	z-index: 99;
	padding: 24px;
	flex-direction: column;
	gap: 4px;
	overflow-y: auto;
}

.rb-mobile-nav.is-open {
	display: flex;
}

.rb-mobile-nav__item,
.rb-mobile-nav__toggle {
	padding: 16px 8px;
	font-size: 18px;
	font-weight: 600;
	color: var(--rb-primary-dark);
	border-bottom: 1px solid var(--rb-border-light);
	font-family: var(--rb-font-body);
	text-align: left;
	background: none;
	border-left: none;
	border-right: none;
	border-top: none;
	width: 100%;
	cursor: pointer;
	display: block;
}

.rb-mobile-nav__toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.rb-mobile-nav__sub {
	display: none;
	flex-direction: column;
}

.rb-mobile-nav__sub.is-open {
	display: flex;
}

.rb-mobile-nav__sublink {
	padding: 12px 8px 12px 24px;
	font-size: 15px;
	color: var(--rb-text-medium);
	display: block;
}

.rb-mobile-nav__cta {
	margin-top: 24px;
	padding: 14px;
	font-size: 16px;
}

/* Body sperren, solange das Mobile-Menü offen ist */
body.rb-nav-open {
	overflow: hidden;
}


/* =========================================================================
   7. BREADCRUMBS
   ========================================================================= */

.rb-breadcrumb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 8px;
	row-gap: 4px;
	font-family: var(--rb-font-mono);
	font-size: 0.75rem;
	color: var(--rb-faint);
}

.rb-breadcrumb__item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rb-breadcrumb__link {
	color: var(--rb-primary);
}

.rb-breadcrumb__link:hover,
.rb-breadcrumb__link:focus-visible {
	color: var(--rb-primary-strong);
}

.rb-breadcrumb__current {
	color: var(--rb-text-medium);
}

.rb-breadcrumb__sep {
	color: var(--rb-line);
}

/* Steht die Brotkrumen-Zeile ohne Seitenkopf allein, braucht sie den
   Seitenrahmen selbst — gleiche Breite wie die uebrigen Sections. */
.rb-crumbbar {
	max-width: var(--rb-container);
	margin: 0 auto;
	padding: 16px 24px 0 24px;
}


/* =========================================================================
   8. STARTSEITE
   ========================================================================= */

.rb-hero {
	background: var(--rb-gradient);
	padding: 48px 20px 64px;
	position: relative;
	overflow: hidden;
}

.rb-hero__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
}

@media (min-width: 640px) {
	.rb-hero {
		padding-left: 32px;
		padding-right: 32px;
	}
}

@media (min-width: 1024px) {
	.rb-hero {
		padding-top: 80px;
		padding-bottom: 96px;
	}

	.rb-hero__inner {
		grid-template-columns: 1.15fr 0.85fr;
		gap: 64px;
	}
}

/* Headline-Stufen mobile-first. Bewusst min-width, anders als der Rest der
   Datei: die Groessen sind als Vorgabe genau so definiert (36 → 48 → 44 → 48).
   Deshalb stehen fuer .rb-hero__title auch keine Werte mehr in den
   max-width-Bloecken am Dateiende — die wuerden hier spaeter gewinnen. */
.rb-hero__title {
	font-family: var(--rb-font-head);
	font-weight: 800;
	font-size: 2.25rem;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--rb-white);
	margin: 0 0 24px 0;
}

@media (min-width: 640px) {
	.rb-hero__title {
		font-size: 3rem;
	}
}

@media (min-width: 1024px) {
	.rb-hero__title {
		font-size: 2.75rem;
	}
}

@media (min-width: 1280px) {
	.rb-hero__title {
		font-size: 3rem;
	}
}

/* Zeilenlaenge in ch statt px: die Textbreite haengt so an der Schriftgroesse
   und bleibt bei rund 62 Zeichen pro Zeile gut lesbar. */
.rb-hero__text {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--rb-purple-light);
	max-width: 62ch;
	margin: 0 0 32px 0;
}

.rb-hero__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* Hero-Buttons: schmaleres Padding und eine Spur groesserer Text als der
   Basis-Button. Bewusst nur hier, damit die Buttons im Rest der Seite
   unveraendert bleiben. */
.rb-hero__actions .rb-btn {
	gap: 8px;
	padding: 14px 24px;
	font-size: 1rem;
	white-space: nowrap;
}

/* Statistik-Reihe */
.rb-stats {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 24px;
	row-gap: 32px;
	text-align: center;
}

@media (min-width: 1024px) {
	.rb-stats {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Browser geben dd einen Einzug von 40px — der muss hier weg. */
.rb-stats dd {
	margin: 0;
}

.rb-stat__value {
	display: block;
	font-family: var(--rb-font-head);
	font-weight: 800;
	font-size: 2rem;
	letter-spacing: -0.02em;
	color: var(--rb-text-dark);
}

.rb-stat__label {
	display: block;
	margin-top: 4px;
	font-size: 0.875rem;
	color: var(--rb-text-medium);
}

/* =========================================================================
   Reveal: Ein- und Ausblenden beim Scrollen
   =========================================================================

   Bewusst ueber einen IntersectionObserver und nicht ueber
   animation-timeline: view(). Die scroll-getriebene Variante wurde in beiden
   Auspraegungen getestet — mit variabler und mit fester animation-range — und
   liess Chrome in jedem Scroll-Frame rechnen: Scroll-Eingaben liefen auf und
   die Seite ruckte, vor allem nach dem Weiterscrollen ueber die Seitenenden
   hinaus. Der Observer meldet nur Ein- und Austritte, den Uebergang dazwischen
   uebernimmt der Compositor.

   Verhalten bleibt: hereinscrollen blendet ein, hinausscrollen wieder aus.
   Der Startzustand haengt an .rb-js — ohne JavaScript greift keine der Regeln
   und alles ist von Anfang an sichtbar.

   Die Stufenklassen setzen den Versatz zwischen benachbarten Karten. */

.rb-js .rb-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.rb-js .rb-reveal--2 {
	transition-delay: 60ms;
}

.rb-js .rb-reveal--3 {
	transition-delay: 100ms;
}

.rb-js .rb-reveal--4 {
	transition-delay: 120ms;
}

.rb-js .rb-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	.rb-js .rb-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* =========================================================================
   "Was wir fuer Sie tun" — Leistungskarten
   ========================================================================= */

.rb-section--services {
	background: var(--rb-white);
	padding: 64px 20px;
}

@media (min-width: 640px) {
	.rb-section--services {
		padding-left: 32px;
		padding-right: 32px;
	}
}

@media (min-width: 1024px) {
	.rb-section--services {
		padding-top: 96px;
		padding-bottom: 96px;
	}
}

.rb-services {
	max-width: 1180px;
	margin: 0 auto;
}

.rb-services__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--rb-text-dark);
	margin: 0;
}

@media (min-width: 640px) {
	.rb-services__title {
		font-size: 1.875rem;
	}
}

@media (min-width: 1024px) {
	.rb-services__title {
		font-size: 2.125rem;
	}
}

.rb-services__lead {
	max-width: 62ch;
	margin: 12px 0 0 0;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--rb-text-medium);
}

.rb-services__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 40px;
}

@media (min-width: 768px) {
	.rb-services__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Die ganze Karte ist der Link — darum flex-column mit voller Hoehe, damit
   alle Karten einer Reihe gleich hoch sind und der Link unten buendig sitzt. */
.rb-scard {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 24px;
	border: 1px solid var(--rb-line);
	border-radius: 14px;
	background: var(--rb-white);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.rb-scard--featured {
	background: var(--rb-surface-accent);
}

.rb-scard:hover,
.rb-scard:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(108, 91, 181, 0.4);
}

.rb-scard .rb-icon {
	flex: none;
	color: var(--rb-primary);
}

.rb-scard > .rb-avatar {
	margin: 0;
}

.rb-scard__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--rb-text-dark);
	margin: 20px 0 0 0;
}

.rb-scard--featured .rb-scard__title {
	font-size: 1.25rem;
}

/* flex: 1 schiebt den "Mehr erfahren"-Link ans Kartenende, unabhaengig davon
   wie lang der Beschreibungstext ist. */
.rb-scard__text {
	flex: 1;
	margin: 8px 0 0 0;
	font-size: 0.9375rem;
	line-height: 1.625;
	color: var(--rb-text-medium);
}

.rb-scard__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 20px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--rb-primary);
}

.rb-scard .rb-arrow {
	transition: transform 0.2s ease;
}

.rb-scard:hover .rb-arrow,
.rb-scard:focus-visible .rb-arrow {
	transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {

	.rb-scard,
	.rb-scard .rb-arrow {
		transition: none;
	}

	.rb-scard:hover,
	.rb-scard:focus-visible {
		transform: none;
	}
}


/* =========================================================================
   "Warum RackBit-IT?" — Vorteilsliste mit mitlaufender Spalte
   ========================================================================= */

.rb-section--why {
	background: var(--rb-bg-sunken);
	border-top: 1px solid var(--rb-border-light);
	border-bottom: 1px solid var(--rb-border-light);
	padding: 64px 20px;
}

@media (min-width: 640px) {
	.rb-section--why {
		padding-left: 32px;
		padding-right: 32px;
	}
}

@media (min-width: 1024px) {
	.rb-section--why {
		padding-top: 96px;
		padding-bottom: 96px;
	}
}

.rb-why {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
}

@media (min-width: 1024px) {
	.rb-why {
		grid-template-columns: 0.85fr 1.15fr;
		gap: 64px;
	}

	/* Die linke Spalte laeuft beim Scrollen mit, bis die Liste durch ist.
	   112px = Hoehe des klebenden Headers plus Abstand. align-self verhindert,
	   dass das Grid-Item auf volle Zeilenhoehe gestreckt wird — sonst klebt
	   nichts. */
	.rb-why__intro {
		position: sticky;
		top: 112px;
		align-self: start;
	}
}

.rb-why__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--rb-text-dark);
	margin: 0;
}

@media (min-width: 640px) {
	.rb-why__title {
		font-size: 1.875rem;
	}
}

@media (min-width: 1024px) {
	.rb-why__title {
		font-size: 2.125rem;
	}
}

.rb-why__media {
	margin-top: 32px;
	border-radius: 14px;
}

.rb-why__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rb-why__item {
	display: flex;
	gap: 20px;
	padding: 28px 0;
}

.rb-why__item + .rb-why__item {
	border-top: 1px solid var(--rb-line);
}

.rb-why__item-title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--rb-text-dark);
	margin: 0;
}

.rb-why__item-desc {
	max-width: 52ch;
	margin: 6px 0 0 0;
	line-height: 1.625;
	color: var(--rb-text-medium);
}

/* =========================================================================
   Uebersichtskarten der Archivseiten
   ========================================================================= */

.rb-section--overview {
	background: var(--rb-white);
	padding: 56px 24px;
}

@media (min-width: 1024px) {
	.rb-section--overview {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}

.rb-ocards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 640px) {
	.rb-ocards {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Bei ungerader Anzahl laeuft die letzte Karte ueber beide Spalten, damit
	   unten rechts keine Luecke stehen bleibt. */
	.rb-ocards > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* Die ganze Karte ist der Link. */
.rb-ocard {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 24px;
	border: 1px solid var(--rb-line);
	border-radius: 14px;
	background: var(--rb-white);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

@media (min-width: 1024px) {
	.rb-ocard {
		padding: 28px;
	}
}

.rb-ocard:hover,
.rb-ocard:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(108, 91, 181, 0.4);
}

.rb-ocard .rb-icon {
	flex: none;
	color: var(--rb-primary);
}

.rb-ocard__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--rb-text-dark);
	margin: 20px 0 0 0;
}

/* flex: 1 schiebt Schlagwortzeile und Link ans Kartenende, damit sie in einer
   Reihe auf gleicher Hoehe stehen. */
.rb-ocard__text {
	flex: 1;
	max-width: 58ch;
	margin: 8px 0 0 0;
	line-height: 1.625;
	color: var(--rb-text-medium);
}

.rb-ocard__tags {
	margin: 16px 0 0 0;
	font-family: var(--rb-font-mono);
	font-size: 0.75rem;
	color: var(--rb-faint);
}

.rb-ocard__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 20px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--rb-primary);
}

.rb-ocard .rb-arrow {
	transition: transform 0.2s ease;
}

.rb-ocard:hover .rb-arrow,
.rb-ocard:focus-visible .rb-arrow {
	transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {

	.rb-ocard,
	.rb-ocard .rb-arrow {
		transition: none;
	}

	.rb-ocard:hover,
	.rb-ocard:focus-visible {
		transform: none;
	}
}


/* =========================================================================
   Bereichsliste (Produkte / Leistungen / IT-Service)
   ========================================================================= */

.rb-section--areas {
	background: var(--rb-white);
	padding: 64px 20px;
}

@media (min-width: 640px) {
	.rb-section--areas {
		padding-left: 32px;
		padding-right: 32px;
	}
}

@media (min-width: 1024px) {
	.rb-section--areas {
		padding-top: 96px;
		padding-bottom: 96px;
	}
}

.rb-areas {
	max-width: 1180px;
	margin: 0 auto;
}

.rb-areas__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--rb-line);
	border-bottom: 1px solid var(--rb-line);
}

.rb-areas__item + .rb-areas__item {
	border-top: 1px solid var(--rb-line);
}

/* Untereinander auf schmalen Schirmen, ab 640px eine Zeile mit fester
   Titelspalte, damit die Beschreibungen aller drei Zeilen buendig starten. */
.rb-areas__link {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px 0;
	color: inherit;
	text-decoration: none;
}

@media (min-width: 640px) {
	.rb-areas__link {
		flex-direction: row;
		align-items: center;
		gap: 40px;
	}

	.rb-areas__title {
		width: 224px;
		flex: none;
	}
}

.rb-areas__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--rb-text-dark);
	margin: 0;
	transition: color 0.2s ease;
}

@media (min-width: 1024px) {
	.rb-areas__title {
		font-size: 1.75rem;
	}
}

.rb-areas__link:hover .rb-areas__title,
.rb-areas__link:focus-visible .rb-areas__title {
	color: var(--rb-primary);
}

.rb-areas__text {
	flex: 1;
	max-width: 58ch;
	margin: 0;
	line-height: 1.625;
	color: var(--rb-text-medium);
}

.rb-areas__arrow {
	flex: none;
	color: var(--rb-primary);
	transition: transform 0.2s ease;
}

.rb-areas__link:hover .rb-areas__arrow,
.rb-areas__link:focus-visible .rb-areas__arrow {
	transform: translate(4px, -4px);
}

@media (prefers-reduced-motion: reduce) {

	.rb-areas__title,
	.rb-areas__arrow {
		transition: none;
	}

	.rb-areas__link:hover .rb-areas__arrow,
	.rb-areas__link:focus-visible .rb-areas__arrow {
		transform: none;
	}
}


/* =========================================================================
   "Aus dem Blog" — die drei neuesten Beitraege
   ========================================================================= */

.rb-section--blog {
	background: var(--rb-bg-sunken);
	border-top: 1px solid var(--rb-border-light);
	border-bottom: 1px solid var(--rb-border-light);
	padding: 64px 20px;
}

@media (min-width: 640px) {
	.rb-section--blog {
		padding-left: 32px;
		padding-right: 32px;
	}
}

@media (min-width: 1024px) {
	.rb-section--blog {
		padding-top: 96px;
		padding-bottom: 96px;
	}
}

.rb-blog {
	max-width: 1180px;
	margin: 0 auto;
}

/* Ueberschrift und "Alle Artikel" auf einer Grundlinie; bei wenig Platz
   rutscht der Link in die naechste Zeile. */
.rb-blog__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.rb-blog__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--rb-text-dark);
	margin: 0;
}

@media (min-width: 640px) {
	.rb-blog__title {
		font-size: 1.875rem;
	}
}

@media (min-width: 1024px) {
	.rb-blog__title {
		font-size: 2.125rem;
	}
}

.rb-blog__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--rb-primary);
	text-decoration: none;
}

.rb-blog__all:hover,
.rb-blog__all:focus-visible {
	color: var(--rb-primary-strong);
}

.rb-blog__all .rb-arrow {
	transition: transform 0.2s ease;
}

.rb-blog__all:hover .rb-arrow,
.rb-blog__all:focus-visible .rb-arrow {
	transform: translateX(2px);
}

.rb-blog__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	margin-top: 40px;
}

@media (min-width: 768px) {
	.rb-blog__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* position: relative traegt den aufgespannten Link der Ueberschrift —
   dadurch ist die ganze Karte klickbar, ohne das Bild zu verlinken. */
.rb-bcard {
	position: relative;
}

.rb-bcard__media {
	border-radius: 14px;
	overflow: hidden;
}

.rb-bcard__media img {
	transition: transform 0.3s ease;
}

.rb-bcard:hover .rb-bcard__media img {
	transform: scale(1.03);
}

.rb-bcard__cat {
	margin: 16px 0 0 0;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--rb-primary);
}

.rb-bcard__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.375;
	color: var(--rb-text-dark);
	margin: 6px 0 0 0;
}

.rb-bcard__title a {
	color: inherit;
	text-decoration: none;
}

.rb-bcard__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.rb-bcard__teaser {
	margin: 8px 0 0 0;
	line-height: 1.625;
	color: var(--rb-text-medium);
}

.rb-bcard__meta {
	margin: 12px 0 0 0;
	font-family: var(--rb-font-mono);
	font-size: 0.75rem;
	color: var(--rb-faint);
}

.rb-bcard__sep {
	padding: 0 6px;
}

@media (prefers-reduced-motion: reduce) {

	.rb-bcard__media img,
	.rb-blog__all .rb-arrow {
		transition: none;
	}

	.rb-bcard:hover .rb-bcard__media img {
		transform: none;
	}
}


/* CTA-Section auf Verlauf */
.rb-cta__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 32px;
	color: var(--rb-white);
	margin: 0 0 16px 0;
}

.rb-cta__title--sm {
	font-size: 28px;
	margin-bottom: 24px;
}

.rb-cta__title--xs {
	font-size: 26px;
	margin-bottom: 24px;
}

.rb-cta__text {
	font-size: 18px;
	color: var(--rb-purple-light);
	line-height: 1.7;
	margin: 0 0 32px 0;
}


/* =========================================================================
   9. ÜBERSICHTS-SEITEN (Archive)
   ========================================================================= */

/* Breite und Seitenrand bewusst wie bei allen uebrigen Sections (--rb-container
   plus 24px), nicht die 1180px/20px der Vorlage: sonst steht der Seitenkopf
   weiter innen als der Inhalt darunter. */
.rb-page-header {
	background: var(--rb-bg-sunken);
	border-bottom: 1px solid var(--rb-border-light);
	padding: 40px 24px;
}

@media (min-width: 1024px) {
	.rb-page-header {
		padding-top: 56px;
		padding-bottom: 56px;
	}
}

.rb-page-header__inner {
	max-width: var(--rb-container);
	margin: 0 auto;
}

/* Abstand zwischen Brotkrumen und Titel liegt am Titelblock, damit ohne
   Brotkrumen kein leerer Vorschub entsteht. */
.rb-page-header__body {
	margin-top: 20px;
}

.rb-page-header__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 1.875rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--rb-text-dark);
	margin: 0;
}

@media (min-width: 640px) {
	.rb-page-header__title {
		font-size: 2.25rem;
	}
}

@media (min-width: 1024px) {
	.rb-page-header__title {
		font-size: 2.75rem;
	}
}

.rb-page-header__intro {
	max-width: 62ch;
	margin: 16px 0 0 0;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--rb-text-medium);
}

/* Service-Level-Vergleich */
.rb-tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.rb-tier {
	border: 1px solid var(--rb-border);
	border-radius: var(--rb-radius-card);
	padding: 28px;
	text-align: center;
	background: var(--rb-white);
}

.rb-tier--highlight {
	background: var(--rb-bg-light);
}

.rb-tier__name {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 20px;
	color: var(--rb-primary-dark);
	margin-bottom: 4px;
}

.rb-tier__subtitle {
	font-size: 13px;
	color: var(--rb-text-light);
	margin-bottom: 16px;
}

.rb-tier__price {
	font-family: var(--rb-font-head);
	font-weight: 800;
	font-size: 24px;
	color: var(--rb-primary);
	margin-bottom: 20px;
}

.rb-tier__features {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: left;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rb-tier__feature {
	font-size: 14px;
	color: var(--rb-text-medium);
}


/* =========================================================================
   10. DETAIL-SEITEN (Single CPT)
   ========================================================================= */

.rb-section--features {
	background: var(--rb-white);
	padding: 56px 24px;
}

@media (min-width: 1024px) {
	.rb-section--features {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}

.rb-features {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 40px;
	row-gap: 36px;
}

@media (min-width: 640px) {
	.rb-features {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Die Linie sitzt am Eintrag selbst, nicht am Raster — so bekommt jeder
   Punkt seinen eigenen Strich, auch in der zweiten Spalte. */
.rb-feature {
	border-top: 1px solid var(--rb-line);
	padding-top: 20px;
}

.rb-feature__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--rb-text-dark);
	margin: 0;
}

.rb-feature__desc {
	max-width: 52ch;
	margin: 8px 0 0 0;
	line-height: 1.625;
	color: var(--rb-text-medium);
}

/* =========================================================================
   Beispielprojekt mit Technologie-Liste
   ========================================================================= */

.rb-section--case {
	background: var(--rb-bg-sunken);
	border-top: 1px solid var(--rb-border-light);
	border-bottom: 1px solid var(--rb-border-light);
	padding: 56px 24px;
}

@media (min-width: 1024px) {
	.rb-section--case {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}

.rb-case {
	max-width: var(--rb-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
}

@media (min-width: 1024px) {
	.rb-case {
		grid-template-columns: repeat(2, 1fr);
		gap: 64px;
	}
}

.rb-case__media {
	border-radius: 14px;
}

.rb-case__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--rb-text-dark);
	margin: 0;
}

@media (min-width: 640px) {
	.rb-case__title {
		font-size: 1.875rem;
	}
}

@media (min-width: 1024px) {
	.rb-case__title {
		font-size: 2.125rem;
	}
}

.rb-case__text {
	max-width: 54ch;
	margin: 16px 0 0 0;
	font-size: 1.0625rem;
	line-height: 1.625;
	color: var(--rb-text-medium);
}

/* Technologien */
.rb-techs {
	margin-top: 32px;
}

.rb-techs__title {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--rb-text-dark);
	margin: 0;
}

.rb-pills {
	list-style: none;
	margin: 12px 0 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rb-pill {
	border: 1px solid var(--rb-line);
	border-radius: 999px;
	background: var(--rb-white);
	padding: 6px 14px;
	font-family: var(--rb-font-mono);
	font-size: 0.75rem;
	color: var(--rb-text-medium);
}


/* =========================================================================
   11. FAQ-ACCORDION
   ========================================================================= */

.rb-section--faq {
	background: var(--rb-white);
	padding: 56px 24px;
}

@media (min-width: 1024px) {
	.rb-section--faq {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}

.rb-faq {
	max-width: var(--rb-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media (min-width: 1024px) {
	.rb-faq {
		grid-template-columns: 0.7fr 1.3fr;
		gap: 64px;
	}

	/* Die Ueberschrift laeuft neben der Liste mit. 112px = Hoehe des klebenden
	   Headers plus Abstand; align-self verhindert das Strecken im Raster. */
	.rb-faq__title {
		position: sticky;
		top: 112px;
		align-self: start;
	}
}

.rb-faq__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--rb-text-dark);
	margin: 0;
}

@media (min-width: 640px) {
	.rb-faq__title {
		font-size: 1.875rem;
	}
}

@media (min-width: 1024px) {
	.rb-faq__title {
		font-size: 2.125rem;
	}
}

.rb-faq__list {
	border-top: 1px solid var(--rb-line);
	border-bottom: 1px solid var(--rb-line);
}

.rb-faq__item + .rb-faq__item {
	border-top: 1px solid var(--rb-line);
}

/* Die Frage ist eine Ueberschrift mit einer Schaltflaeche darin — das h3
   selbst bringt keine eigene Typografie mit. */
.rb-faq__heading {
	margin: 0;
	font: inherit;
}

.rb-faq__question {
	display: flex;
	width: 100%;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: 20px 0;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	color: var(--rb-text-dark);
	transition: color 0.2s ease;
}

.rb-faq__question:hover,
.rb-faq__question:focus-visible {
	color: var(--rb-primary);
}

.rb-faq__label {
	font-family: var(--rb-font-head);
	font-size: 1.0625rem;
	font-weight: 600;
	color: inherit;
}

.rb-faq__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--rb-surface-accent);
	color: var(--rb-primary);
	transition: transform 0.2s ease;
}

/* Geoeffnet wird aus dem Plus ein Schliessen-Kreuz. */
.rb-faq__question[aria-expanded="true"] .rb-faq__icon {
	transform: rotate(45deg);
}

/* Der Abstand nach unten liegt bewusst als margin am Text und nicht als
   padding am abgeschnittenen Kasten: Innenabstand zaehlt zur Hoehe des
   Kastens und bliebe auch im eingeklappten Zustand stehen. */
.rb-faq__answer p {
	max-width: 68ch;
	margin: 0 0 20px 0;
	font-size: 0.9375rem;
	line-height: 1.625;
	color: var(--rb-text-medium);
}

/* Auf- und Zuklappen ueber grid-template-rows: 0fr -> 1fr laesst sich
   animieren, ein Wechsel von display: none nicht. Der Innenwrapper haelt den
   Text und wird dabei abgeschnitten.

   Der eingeklappte Zustand haengt an .rb-js: ohne JavaScript stehen alle
   Antworten offen da, statt unerreichbar zu bleiben. */
.rb-js .rb-faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.rb-js .rb-faq__item.is-open .rb-faq__answer {
	grid-template-rows: 1fr;
}

/* visibility nimmt die eingeklappte Antwort aus Tabreihenfolge und
   Screenreader-Ausgabe — verzoegert, damit sie waehrend des Zuklappens noch
   sichtbar bleibt. Das Einblenden laeuft leicht versetzt mit, sonst wirkt der
   Text waehrend des Aufklappens an der Trennlinie abgeschnitten. */
.rb-js .rb-faq__answer-inner {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease, visibility 0s linear 0.3s;
}

.rb-js .rb-faq__item.is-open .rb-faq__answer-inner {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.25s ease 0.08s, visibility 0s;
}

/* Kein padding-bottom: der wuerde die Hoehe des eingeklappten Kastens
   bestimmen. Nur seitlicher Innenabstand, der die Hoehe nicht beeinflusst. */
.rb-faq__answer-inner {
	overflow: hidden;
	padding-right: 48px;
}

@media (prefers-reduced-motion: reduce) {

	.rb-faq__question,
	.rb-faq__icon,
	.rb-js .rb-faq__answer,
	.rb-js .rb-faq__answer-inner {
		transition: none;
	}
}


/* =========================================================================
   12. BLOG
   ========================================================================= */

.rb-section--posts {
	background: var(--rb-white);
	padding: 48px 24px;
}

@media (min-width: 1024px) {
	.rb-section--posts {
		padding-top: 64px;
		padding-bottom: 64px;
	}
}

.rb-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rb-filter__link {
	padding: 8px 16px;
	border: 1px solid var(--rb-line);
	border-radius: 999px;
	background: var(--rb-white);
	color: var(--rb-text-medium);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.rb-filter__link:hover,
.rb-filter__link:focus-visible {
	border-color: rgba(108, 91, 181, 0.5);
	color: var(--rb-primary);
}

.rb-filter__link:active {
	transform: translateY(1px);
}

.rb-filter__link.is-active {
	background: var(--rb-primary);
	border-color: var(--rb-primary);
	color: var(--rb-white);
}

.rb-posts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 640px) {
	.rb-posts {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.rb-posts {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Abstand nur, wenn der Filter tatsaechlich darueber steht. */
.rb-filter + .rb-posts {
	margin-top: 40px;
}

/* Blog-Karten */
.rb-post-card {
	/* Traegt den aufgespannten Link des Titels. */
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--rb-line);
	border-radius: 14px;
	background: var(--rb-white);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.rb-post-card:hover,
.rb-post-card:focus-within {
	transform: translateY(-2px);
	border-color: rgba(108, 91, 181, 0.4);
}

/* Der Radius sitzt an der Karte, das Bild schliesst oben buendig ab. */
.rb-post-card__media {
	border-radius: 0;
	background: var(--rb-bg-sunken);
}

.rb-post-card__media img {
	transition: transform 0.3s ease;
}

.rb-post-card:hover .rb-post-card__media img {
	transform: scale(1.03);
}

.rb-post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px;
}

.rb-post-card__cat {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--rb-primary);
}

.rb-post-card__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.375;
	color: var(--rb-text-dark);
	margin: 8px 0 0 0;
}

.rb-post-card__title a {
	color: inherit;
	text-decoration: none;
}

.rb-post-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

/* flex: 1 schiebt die Metazeile ans Kartenende, damit sie in einer Reihe auf
   gleicher Hoehe steht. */
.rb-post-card__teaser {
	flex: 1;
	margin: 8px 0 0 0;
	font-size: 0.9375rem;
	line-height: 1.625;
	color: var(--rb-text-medium);
}

.rb-post-card__meta {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--rb-border-light);
}

.rb-post-card__meta p {
	margin: 0;
	font-family: var(--rb-font-mono);
	font-size: 0.75rem;
	color: var(--rb-faint);
}

.rb-post-card__sep {
	padding: 0 6px;
}

@media (prefers-reduced-motion: reduce) {

	.rb-post-card,
	.rb-post-card__media img {
		transition: none;
	}

	.rb-post-card:hover {
		transform: none;
	}

	.rb-post-card:hover .rb-post-card__media img {
		transform: none;
	}
}

/* Blog-Artikel: Kopfbereich */

/* 46rem statt der vollen Containerbreite — haelt Titel und Vorspann in einer
   gut lesbaren Zeilenlaenge. */
.rb-article__head {
	max-width: 46rem;
	margin-top: 24px;
}

.rb-article__cat {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--rb-primary);
}

.rb-article__cat a {
	color: inherit;
	text-decoration: none;
}

.rb-article__cat a:hover,
.rb-article__cat a:focus-visible {
	color: var(--rb-primary-strong);
}

.rb-article__title {
	font-family: var(--rb-font-head);
	font-weight: 800;
	font-size: 2rem;
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--rb-text-dark);
	margin: 12px 0 0 0;
}

@media (min-width: 1024px) {
	.rb-article__title {
		font-size: 2.75rem;
	}
}

.rb-article__lead {
	margin: 20px 0 0 0;
	font-size: 1.0625rem;
	line-height: 1.625;
	color: var(--rb-text-medium);
}

.rb-article__meta {
	margin: 24px 0 0 0;
	font-family: var(--rb-font-mono);
	font-size: 0.75rem;
	color: var(--rb-faint);
}

.rb-article__sep {
	padding: 0 6px;
}

/* Artikelkoerper */
.rb-section--article {
	background: var(--rb-white);
	padding: 48px 24px;
}

@media (min-width: 1024px) {
	.rb-section--article {
		padding-top: 64px;
		padding-bottom: 64px;
	}
}

/* Titelbild etwas breiter als der Text, beides mittig — das gibt dem Artikel
   eine ruhige Mittelachse. */
.rb-article__hero {
	max-width: 46rem;
	margin: 0 auto;
	border-radius: 14px;
	background: var(--rb-bg-sunken);
}

.rb-article__content {
	max-width: 42rem;
	margin: 48px auto 0 auto;
	font-size: 1.0625rem;
	line-height: 1.75;
	/* Fliesstext im Artikel bewusst dunkler als sonst auf der Seite — das ist
	   die Lesefarbe der Vorlage (#1A1333). */
	color: var(--rb-darkest);
}

.rb-article__content > :first-child {
	margin-top: 0;
}

.rb-article__content p {
	margin: 0 0 20px 0;
}

.rb-article__content h2 {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	color: var(--rb-text-dark);
	margin: 40px 0 16px 0;
}

.rb-article__content h3 {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	color: var(--rb-text-dark);
	margin: 32px 0 12px 0;
}

.rb-article__content img {
	border-radius: var(--rb-radius-card);
}

.rb-article__content blockquote {
	margin: 32px 0;
	padding: 16px 24px;
	border-left: 3px solid var(--rb-primary);
	background: var(--rb-bg-light);
	border-radius: 0 12px 12px 0;
	color: var(--rb-text-medium);
}

/* Teilen */
/* Teilen-Leiste im Artikelkopf, durch eine Linie von der Metazeile getrennt. */
.rb-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--rb-line);
}

.rb-share__label {
	font-family: var(--rb-font-mono);
	font-size: 0.75rem;
	color: var(--rb-faint);
}

.rb-share__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--rb-line);
	border-radius: 50%;
	background: var(--rb-white);
	color: var(--rb-primary);
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.rb-share__link:hover,
.rb-share__link:focus-visible {
	border-color: rgba(108, 91, 181, 0.5);
	background: var(--rb-surface-accent);
}

/* Verwandte Artikel — dieselben Karten wie in "Aus dem Blog" auf der
   Startseite, nur ohne Datums- und Lesezeitzeile. */
.rb-section--related {
	background: var(--rb-bg-sunken);
	border-top: 1px solid var(--rb-border-light);
	padding: 56px 24px;
}

@media (min-width: 1024px) {
	.rb-section--related {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}

.rb-related__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--rb-text-dark);
	margin: 0;
}

@media (min-width: 640px) {
	.rb-related__title {
		font-size: 1.875rem;
	}
}

@media (min-width: 1024px) {
	.rb-related__title {
		font-size: 2.125rem;
	}
}

.rb-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	margin-top: 32px;
}

@media (min-width: 768px) {
	.rb-related__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Pagination */
.rb-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 48px;
}

.rb-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--rb-border);
	border-radius: var(--rb-radius-btn);
	font-size: 14px;
	font-weight: 600;
	color: var(--rb-text-medium);
}

.rb-pagination .page-numbers:hover {
	border-color: var(--rb-primary);
	color: var(--rb-primary);
}

.rb-pagination .page-numbers.current {
	background: var(--rb-primary);
	border-color: var(--rb-primary);
	color: var(--rb-white);
}


/* =========================================================================
   13. ÜBER UNS
   ========================================================================= */

/* =========================================================================
   "Unsere Geschichte" — Zeitleiste mit mitlaufendem Bild
   ========================================================================= */

.rb-section--story {
	background: var(--rb-white);
	padding: 64px 24px;
}

@media (min-width: 1024px) {
	.rb-section--story {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}

.rb-story {
	max-width: var(--rb-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
}

@media (min-width: 1024px) {
	.rb-story {
		grid-template-columns: 1.1fr 0.9fr;
		gap: 64px;
	}

	/* Das Bild laeuft neben der Zeitleiste mit. 112px = Hoehe des klebenden
	   Headers plus Abstand. */
	.rb-story__media {
		position: sticky;
		top: 112px;
		align-self: start;
	}
}

.rb-story__media {
	border-radius: 14px;
	background: var(--rb-bg-sunken);
}

.rb-story__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--rb-text-dark);
	margin: 0;
}

@media (min-width: 640px) {
	.rb-story__title {
		font-size: 1.875rem;
	}
}

@media (min-width: 1024px) {
	.rb-story__title {
		font-size: 2.125rem;
	}
}

/* Zeitleiste */
.rb-timeline {
	list-style: none;
	margin: 32px 0 0 0;
	padding: 0;
}

/* Die senkrechte Linie ist der linke Rahmen des Eintrags, der Punkt sitzt
   mittig darauf. Beim letzten Eintrag verschwindet die Linie, damit sie nicht
   ins Leere laeuft. */
.rb-timeline__item {
	position: relative;
	border-left: 1px solid var(--rb-line);
	padding: 0 0 40px 32px;
}

.rb-timeline__item:last-child {
	border-color: transparent;
	padding-bottom: 0;
}

.rb-timeline__dot {
	position: absolute;
	left: -5px;
	top: 6px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--rb-primary);
	/* Ring in Hintergrundfarbe, damit die Linie hinter dem Punkt verschwindet. */
	box-shadow: 0 0 0 4px var(--rb-white);
}

.rb-timeline__year {
	margin: 0;
	font-family: var(--rb-font-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--rb-primary);
}

.rb-timeline__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--rb-text-dark);
	margin: 8px 0 0 0;
}

.rb-timeline__desc {
	max-width: 52ch;
	margin: 8px 0 0 0;
	line-height: 1.625;
	color: var(--rb-text-medium);
}

/* =========================================================================
   "Unsere Werte"
   ========================================================================= */

.rb-section--values {
	background: var(--rb-bg-sunken);
	border-top: 1px solid var(--rb-border-light);
	border-bottom: 1px solid var(--rb-border-light);
	padding: 64px 24px;
}

@media (min-width: 1024px) {
	.rb-section--values {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}

.rb-values__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--rb-text-dark);
	margin: 0;
}

@media (min-width: 640px) {
	.rb-values__title {
		font-size: 1.875rem;
	}
}

@media (min-width: 1024px) {
	.rb-values__title {
		font-size: 2.125rem;
	}
}

.rb-values {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 40px;
	row-gap: 36px;
	margin-top: 40px;
}

@media (min-width: 640px) {
	.rb-values {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.rb-values {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Kein Kasten mehr: Icon, Titel und Text stehen frei auf dem Untergrund. */
.rb-value .rb-icon {
	display: block;
	color: var(--rb-primary);
}

.rb-value__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--rb-text-dark);
	margin: 16px 0 0 0;
}

.rb-value__desc {
	margin: 8px 0 0 0;
	line-height: 1.625;
	color: var(--rb-text-medium);
}

/* Team */
.rb-team {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	max-width: 640px;
	margin: 0 auto;
}

.rb-team--3 {
	grid-template-columns: repeat(3, 1fr);
	max-width: 960px;
}

.rb-team__member {
	text-align: center;
}

/* Teamfotos: rund und deutlich kleiner als die Spaltenbreite */
.rb-team__photo {
	width: 160px;
	max-width: 100%;
	margin: 0 auto 16px auto;
	border-radius: 50%;
}

.rb-team__photo img {
	border-radius: 50%;
}

.rb-team__name {
	font-weight: 700;
	font-size: 16px;
	color: var(--rb-primary-dark);
	font-family: var(--rb-font-head);
}

.rb-team__role {
	font-size: 14px;
	color: var(--rb-primary);
	margin-bottom: 8px;
}

.rb-team__bio {
	font-size: 13px;
	color: var(--rb-text-medium);
	line-height: 1.5;
}

/* Karriere */
.rb-career {
	text-align: center;
}

.rb-career__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 24px;
	color: var(--rb-primary-dark);
	margin: 0 0 16px 0;
}

.rb-career__text {
	font-size: 15px;
	line-height: 1.7;
	color: var(--rb-text-medium);
	margin: 0 0 24px 0;
}


/* =========================================================================
   14. KONTAKT & FORMULAR
   ========================================================================= */

.rb-section--contact {
	background: var(--rb-white);
	padding: 56px 24px;
}

@media (min-width: 1024px) {
	.rb-section--contact {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}

.rb-contact-grid {
	max-width: var(--rb-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
}

@media (min-width: 1024px) {
	.rb-contact-grid {
		grid-template-columns: 1.15fr 0.85fr;
		gap: 64px;
	}

	/* Die Kontaktdaten laufen neben dem Formular mit. */
	.rb-contact-side {
		position: sticky;
		top: 112px;
		align-self: start;
	}
}

/* Das Formular steht frei auf der Flaeche, nicht mehr in einem Kasten —
   .rb-form-box ist nur noch die Spalte im Raster und braucht keine Optik. */
.rb-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.rb-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 640px) {
	.rb-form__row {
		grid-template-columns: repeat(2, 1fr);
	}
}

.rb-label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--rb-text-dark);
}

.rb-input,
.rb-select,
.rb-textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--rb-line);
	border-radius: var(--rb-radius-btn);
	background: var(--rb-white);
	font-family: var(--rb-font-body);
	font-size: 0.9375rem;
	color: var(--rb-darkest);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rb-textarea {
	resize: vertical;
	min-height: 130px;
}

/* Ring statt Standard-Outline, damit der Fokus zum Rahmen passt. */
.rb-input:focus,
.rb-select:focus,
.rb-textarea:focus {
	outline: none;
	border-color: var(--rb-primary);
	box-shadow: 0 0 0 2px rgba(108, 91, 181, 0.25);
}

/* Fehlerzustand der clientseitigen Validierung */
.rb-input.is-invalid,
.rb-select.is-invalid,
.rb-textarea.is-invalid {
	border-color: #DC2626;
}

.rb-field__error {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: #DC2626;
}

/* Honeypot – fuer Menschen unsichtbar, fuer Bots sichtbar */
.rb-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.rb-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.875rem;
	line-height: 1.625;
	color: var(--rb-text-medium);
}

.rb-consent input {
	width: 16px;
	height: 16px;
	margin-top: 4px;
	flex-shrink: 0;
	accent-color: var(--rb-primary);
}

.rb-consent a {
	font-weight: 600;
	color: var(--rb-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.rb-form__submit {
	align-self: flex-start;
	padding: 14px 24px;
	font-size: 1rem;
}

.rb-form__success {
	text-align: center;
	padding: 40px 0;
}

.rb-form__success-title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 20px;
	color: var(--rb-text-dark);
	margin-bottom: 8px;
}

.rb-form__success-text {
	font-size: 15px;
	color: var(--rb-text-medium);
}

.rb-form__notice {
	padding: 14px 16px;
	border-radius: var(--rb-radius-btn);
	font-size: 14px;
	background: #FEF2F2;
	color: #B91C1C;
	border: 1px solid #FECACA;
}

.rb-form__notice[hidden] {
	display: none;
}

/* Kontaktdaten */
.rb-contact-box {
	padding: 24px;
	border: 1px solid var(--rb-line);
	border-radius: 14px;
	background: var(--rb-bg-sunken);
}

@media (min-width: 1024px) {
	.rb-contact-box {
		padding: 28px;
	}
}

.rb-contact-box__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--rb-text-dark);
	margin: 0;
}

.rb-contact-list {
	margin: 20px 0 0 0;
}

.rb-contact-list__row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.rb-contact-list__row + .rb-contact-list__row {
	margin-top: 16px;
}

.rb-contact-list__row .rb-ui-icon {
	flex: none;
	margin-top: 2px;
	color: var(--rb-primary);
}

.rb-contact-list dd {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--rb-text-medium);
}

.rb-contact-list__company {
	font-family: var(--rb-font-head);
	font-weight: 600;
	color: var(--rb-text-dark);
}

.rb-contact-list a {
	color: var(--rb-primary);
}

.rb-contact-list a:hover,
.rb-contact-list a:focus-visible {
	color: var(--rb-primary-strong);
}


/* =========================================================================
   15. STATISCHE SEITEN / PROSA / 404 / SUCHE
   ========================================================================= */

.rb-prose {
	font-size: 15px;
	line-height: 1.8;
	color: var(--rb-text-medium);
}

.rb-prose h1 {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 36px;
	letter-spacing: -0.02em;
	color: var(--rb-primary-dark);
	margin: 16px 0 32px 0;
}

.rb-prose h2 {
	font-family: var(--rb-font-head);
	font-weight: 600;
	font-size: 18px;
	color: var(--rb-primary-dark);
	margin: 32px 0 8px 0;
}

.rb-prose h3 {
	font-family: var(--rb-font-head);
	font-weight: 600;
	font-size: 16px;
	color: var(--rb-primary-dark);
	margin: 24px 0 8px 0;
}

.rb-prose p {
	margin: 0 0 16px 0;
}

.rb-prose ul,
.rb-prose ol {
	margin: 0 0 16px 0;
	padding-left: 20px;
}

.rb-prose li {
	margin-bottom: 8px;
}

.rb-prose table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 16px;
}

.rb-prose th,
.rb-prose td {
	border: 1px solid var(--rb-border);
	padding: 10px 12px;
	text-align: left;
}

.rb-prose code {
	font-family: var(--rb-font-mono);
	font-size: 13px;
	background: var(--rb-bg-light);
	padding: 2px 6px;
	border-radius: 4px;
	color: var(--rb-primary);
}

.rb-prose pre {
	background: var(--rb-bg-light);
	padding: 16px;
	border-radius: 12px;
	overflow-x: auto;
}

/* Suchformular */
.rb-searchform {
	display: flex;
	gap: 8px;
	max-width: 480px;
}

.rb-searchform__input {
	flex: 1;
	height: 48px;
	border: 1.5px solid var(--rb-border);
	border-radius: 6px;
	padding: 0 14px;
	font-size: 15px;
	font-family: var(--rb-font-body);
	min-width: 0;
}

.rb-searchform__input:focus {
	border-color: var(--rb-primary);
	outline: none;
}

/* 404 */
.rb-404 {
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
}

.rb-404__code {
	font-family: var(--rb-font-head);
	font-weight: 800;
	font-size: 72px;
	color: var(--rb-primary);
	margin: 0 0 8px 0;
	line-height: 1;
}

.rb-404__title {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 28px;
	color: var(--rb-primary-dark);
	margin: 0 0 16px 0;
}

.rb-404__text {
	font-size: 16px;
	line-height: 1.7;
	color: var(--rb-text-medium);
	margin: 0 0 32px 0;
}

.rb-404__search {
	display: flex;
	justify-content: center;
	margin-bottom: 32px;
}

.rb-404__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
}

/* Ergebnis-/Leer-Zustände */
.rb-empty {
	font-size: 16px;
	color: var(--rb-text-medium);
	line-height: 1.7;
}

.rb-result {
	padding: 24px 0;
	border-bottom: 1px solid var(--rb-border-light);
}

.rb-result__title {
	font-family: var(--rb-font-head);
	font-weight: 600;
	font-size: 20px;
	color: var(--rb-primary-dark);
	margin: 0 0 8px 0;
}

.rb-result__title a {
	color: inherit;
}

.rb-result__meta {
	font-size: 13px;
	color: var(--rb-text-light);
	margin-bottom: 8px;
}


/* =========================================================================
   16. FOOTER
   ========================================================================= */

.rb-footer {
	background: var(--rb-primary-dark);
	padding: 64px 24px 24px 24px;
}

.rb-footer__inner {
	max-width: var(--rb-container);
	margin: 0 auto;
}

.rb-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(176, 164, 221, 0.2);
}

.rb-footer__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.rb-footer__brand-name {
	font-family: var(--rb-font-head);
	font-weight: 700;
	font-size: 17px;
	color: var(--rb-white);
}

.rb-footer__about {
	font-size: 14px;
	color: var(--rb-purple-light);
	line-height: 1.6;
	max-width: 260px;
	margin: 0;
}

.rb-footer__col-title {
	font-weight: 600;
	color: var(--rb-white);
	margin-bottom: 16px;
	font-size: 14px;
}

.rb-footer__links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rb-footer__link,
.rb-footer__links a {
	color: var(--rb-purple-light);
}

.rb-footer__link:hover,
.rb-footer__link:focus,
.rb-footer__links a:hover,
.rb-footer__links a:focus {
	color: var(--rb-white);
}

.rb-footer__contact {
	font-size: 14px;
	color: var(--rb-purple-light);
	line-height: 1.8;
	margin-bottom: 16px;
}

.rb-footer__contact a {
	color: var(--rb-purple-light);
}

.rb-footer__contact a:hover {
	color: var(--rb-white);
}

/* Social-Icons */
.rb-social {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

.rb-social__link {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: var(--rb-purple-light);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
}

.rb-social__link:hover,
.rb-social__link:focus {
	background: rgba(255, 255, 255, 0.2);
	color: var(--rb-white);
}

/* Fußzeile unten */
.rb-footer__bottom {
	padding-top: 20px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 13px;
	color: var(--rb-text-light);
}

.rb-footer__legal {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rb-footer__legal a {
	color: var(--rb-text-light);
}

.rb-footer__legal a:hover {
	color: var(--rb-purple-light);
}


/* =========================================================================
   17. SCROLL-TO-TOP
   ========================================================================= */

.rb-to-top {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--rb-primary-dark);
	color: var(--rb-white);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--rb-shadow-soft);
	z-index: 90;
	font-size: 18px;
	border: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.rb-to-top.is-visible {
	opacity: 1;
	visibility: visible;
}

.rb-to-top:hover {
	background: var(--rb-darkest);
	color: var(--rb-white);
}


/* =========================================================================
   18. WORDPRESS-STANDARDKLASSEN & BARRIEREFREIHEIT
   ========================================================================= */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--rb-white);
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: var(--rb-primary-dark);
	display: block;
	font-size: 14px;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.rb-skip-link:focus {
	position: absolute;
}

.alignleft {
	float: left;
	margin: 0 24px 16px 0;
}

.alignright {
	float: right;
	margin: 0 0 16px 24px;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignwide,
.alignfull {
	max-width: 100%;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.gallery-caption {
	font-size: 13px;
	color: var(--rb-text-light);
	margin-top: 8px;
}

.sticky,
.bypostauthor {
	display: block;
}


/* =========================================================================
   19. RESPONSIVE (< 1080px)
   ========================================================================= */

@media (max-width: 1079px) {

	/* Header */
	.rb-header__inner,
	.rb-header.is-scrolled .rb-header__inner {
		height: var(--rb-header-height-small);
	}

	.rb-nav,
	.rb-header__cta {
		display: none;
	}

	.rb-burger {
		display: flex;
	}

	/* Alle mehrspaltigen Raster werden einspaltig */
	.rb-grid--2,
	.rb-grid--3,
	.rb-grid--4,
	.rb-tiers,
	.rb-team,
	.rb-team--3,
	.rb-footer__grid {
		grid-template-columns: 1fr;
	}

	/* Typografie etwas kompakter */
	.rb-section {
		padding: 64px 24px;
	}

	.rb-section--md {
		padding: 48px 24px;
	}

	.rb-section--sm {
		padding: 40px 24px;
	}

	.rb-section--cta {
		padding: 64px 24px;
	}

	.rb-section__title,
	.rb-cta__title {
		font-size: 26px;
	}

	.rb-article__title {
		font-size: 28px;
	}

	.rb-prose h1 {
		font-size: 28px;
	}

	.rb-footer__about {
		max-width: none;
	}

	.rb-footer__bottom {
		flex-direction: column;
	}

	.rb-form__submit {
		width: 100%;
	}
}

@media (max-width: 600px) {

	.rb-share {
		flex-wrap: wrap;
	}
}

/* Nutzerpräferenz: reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}