:root {
    /* ── Farbschema: nur diese zwei Werte ändern ── */
    --pb-hue: 257;
    --pb-chroma: 0.17;
    /* 500 ≈ #279BD0  |  Hue-Beispiele: 234 Blau-Cyan · 262 Violett · 142 Grün · 29 Orange */
    /* Palette – abgeleitet via oklch */
    --pb-50: oklch(97% calc(var(--pb-chroma) * 0.30) var(--pb-hue));
    --pb-100: oklch(93% calc(var(--pb-chroma) * 0.50) var(--pb-hue));
    --pb-200: oklch(87% calc(var(--pb-chroma) * 0.70) var(--pb-hue));
    --pb-300: oklch(79% calc(var(--pb-chroma) * 0.85) var(--pb-hue));
    --pb-400: oklch(72% var(--pb-chroma) var(--pb-hue));
    --pb-500: oklch(65% var(--pb-chroma) var(--pb-hue));
    --pb-600: oklch(56% var(--pb-chroma) var(--pb-hue));
    --pb-700: oklch(46% var(--pb-chroma) var(--pb-hue));
    --pb-800: oklch(36% var(--pb-chroma) var(--pb-hue));
    --pb-900: oklch(26% var(--pb-chroma) var(--pb-hue));
    --pb-950: oklch(18% var(--pb-chroma) var(--pb-hue));
    /* Semantische Variablen */
    --pb-primary: var(--pb-600);
    --pb-primary-bright: var(--pb-300);
    --pb-secondary: var(--pb-500);
    --pb-accent: var(--pb-400);
    --pb-bg: var(--pb-50);
    --pb-text: var(--pb-950);
    --pb-text-bright: var(--pb-50);
    --pb-muted: #6B7280;
}

body {
    color: var(--pb-text);
    background-color: var(--pb-bg);
}

/* Navbar */
.pb-navbar {
    background-color: var(--pb-primary) !important;
}

/* Hero */
.pb-hero {
    background-color: var(--pb-primary);
    color: #ffffff;
}
    .pb-hero p {
        color: #ffffff;
    }

/* Such-Button */
.pb-btn-primary {
    background-color: var(--pb-secondary);
    border-color: var(--pb-secondary);
    color: #ffffff;
    font-weight: 600;
}
    .pb-btn-primary:hover,
    .pb-btn-primary:focus {
        background-color: var(--pb-primary-bright);
        border-color: var(--pb-secondary);
        color: #ffffff;
    }

/* Hintergrundsektion (Footer etc.) */
.pb-bg-section {
    background-color: var(--pb-bg);
}

/* Footer */
.pb-footer {
    background-color: var(--pb-100);
    border-color: var(--pb-200) !important;
    border-radius: 0.5rem;
}

/* Muted-Text */
.pb-muted {
    color: var(--pb-muted);
}

/* Farbabzeichen für sehr helle Farben lesbarer machen */
.badge[style*="background-color"] {
    border: 1px solid rgba(0,0,0,.15);
}