/* ============================================================================
   shardserv – Marken-Schicht über Bootstrap 5.3, verspielt.
   Runde Schrift (Fredoka für Überschriften, Nunito für Text), bunte Kacheln,
   weiche Blobs, Sticker, Knöpfe mit „Druck“-Schatten und federnde Hover.
   Hell und dunkel: Tokens unter [data-bs-theme], umgeschaltet von /assets/libs/theme/theme.js.
   ============================================================================ */

@font-face { font-family: "Fredoka Variable"; font-style: normal; font-display: swap; font-weight: 300 700; src: url("/assets/libs/fonts/fredoka/fredoka-latin-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Nunito Variable"; font-style: normal; font-display: swap; font-weight: 200 1000; src: url("/assets/libs/fonts/nunito/nunito-latin-wght-normal.woff2") format("woff2-variations"); }

/* ---------- Farb-Tokens ---------- */
:root, [data-bs-theme="light"] {
    --site-brand: #004cd6;
    --site-brand-dark: #00369a;
    --site-brand-rgb: 0, 76, 214;
    --site-brand-soft: #e6eeff;
    --site-brand-text: var(--site-brand-dark); /* Schrift auf hellem Grund: Kontrast mindestens 4,5:1 */
    --site-accent: #19b4d8;
    --site-bg: #fffaf3;
    --site-surface: #ffffff;
    --site-surface-2: #fff3e3;
    --site-line: #efe4d4;
    --site-ink: #1d1b35;
    --site-muted: #5d5a7a;
    --site-shadow: 0 2px 0 rgba(29, 27, 53, .06), 0 12px 30px rgba(29, 27, 53, .07);
    --site-shadow-pop: 0 6px 0 rgba(29, 27, 53, .08), 0 24px 50px rgba(29, 27, 53, .12);

    /* Bunte Kacheln: Hintergrund und Icon-Farbe */
    --tone-1-bg: #e6eeff; --tone-1: #004cd6;
    --tone-2-bg: #ffe4e4; --tone-2: #e5484d;
    --tone-3-bg: #fff1c7; --tone-3: #c27c00;
    --tone-4-bg: #d9f7ec; --tone-4: #0f9a6d;
    --tone-5-bg: #efe5ff; --tone-5: #7c3aed;
    --tone-6-bg: #d8f5fb; --tone-6: #0a8fae;

    --bs-body-bg: var(--site-bg);
    --bs-body-bg-rgb: 255, 250, 243;
    --bs-body-color: var(--site-ink);
    --bs-body-color-rgb: 29, 27, 53;
    --bs-emphasis-color: #0f0e22;
    --bs-secondary-color: var(--site-muted);
    --bs-secondary-bg: var(--site-surface-2);
    --bs-tertiary-bg: var(--site-surface-2);
    --bs-border-color: var(--site-line);
    --bs-primary: var(--site-brand);
    --bs-primary-rgb: 0, 76, 214;
    --bs-light: var(--site-surface-2);
    --bs-light-rgb: 255, 243, 227;
    --bs-link-color: var(--site-brand);
    --bs-link-color-rgb: 0, 76, 214;
    --bs-link-hover-color: var(--site-brand-dark);
    --bs-link-hover-color-rgb: 26, 79, 196;
}

[data-bs-theme="dark"] {
    --site-brand: #5b8cff;
    --site-brand-dark: #3f74f5;
    --site-brand-rgb: 91, 140, 255;
    --site-brand-soft: rgba(91, 140, 255, .16);
    --site-brand-text: #8fb0ff;
    --site-bg: #15142a;
    --site-surface: #1f1e3a;
    --site-surface-2: #1a1932;
    --site-line: #302e55;
    --site-ink: #f4f2ff;
    --site-muted: #aeaacd;
    --site-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 12px 30px rgba(0, 0, 0, .3);
    --site-shadow-pop: 0 6px 0 rgba(0, 0, 0, .3), 0 24px 50px rgba(0, 0, 0, .4);

    --tone-1-bg: rgba(91, 140, 255, .16); --tone-1: #8fb0ff;
    --tone-2-bg: rgba(255, 107, 107, .16); --tone-2: #ff8f8f;
    --tone-3-bg: rgba(255, 201, 60, .16);  --tone-3: #ffd666;
    --tone-4-bg: rgba(46, 211, 163, .16);  --tone-4: #5fe3bb;
    --tone-5-bg: rgba(167, 123, 255, .18); --tone-5: #c3a3ff;
    --tone-6-bg: rgba(34, 211, 238, .16);  --tone-6: #67e3f5;

    --bs-body-bg: var(--site-bg);
    --bs-body-bg-rgb: 21, 20, 42;
    --bs-body-color: var(--site-ink);
    --bs-body-color-rgb: 244, 242, 255;
    --bs-emphasis-color: #fff;
    --bs-secondary-color: var(--site-muted);
    --bs-secondary-bg: var(--site-surface-2);
    --bs-tertiary-bg: var(--site-surface-2);
    --bs-border-color: var(--site-line);
    --bs-primary: var(--site-brand);
    --bs-primary-rgb: 91, 140, 255;
    --bs-light: var(--site-surface-2);
    --bs-light-rgb: 26, 25, 50;
    --bs-link-color: #8fb0ff;
    --bs-link-color-rgb: 143, 176, 255;
    --bs-link-hover-color: #b6cbff;
    --bs-link-hover-color-rgb: 182, 203, 255;
}

:root {
    --site-font-head: "Fredoka Variable", "Nunito Variable", ui-rounded, "Segoe UI", system-ui, sans-serif;
    --bs-body-font-family: "Nunito Variable", ui-rounded, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --bs-body-font-weight: 500;
    --bs-border-radius: 1rem;
    --bs-border-radius-lg: 1.5rem;
    --site-radius: 1.5rem;
}

body { -webkit-font-smoothing: antialiased; transition: background-color .2s, color .2s; }
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .h5, .h6, .display-4, .display-5, .display-6, .navbar-brand { font-family: var(--site-font-head); font-weight: 600; letter-spacing: -.01em; }
.text-secondary { color: var(--site-muted) !important; }
.text-muted { color: var(--site-muted) !important; }
.bg-light { background-color: var(--site-surface-2) !important; }

/* ---------- Buttons mit Druck-Schatten ---------- */
.btn { --bs-btn-font-weight: 700; --bs-btn-border-radius: 999px; --bs-btn-padding-x: 1.25rem; transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), box-shadow .15s; }
.btn-lg { --bs-btn-padding-x: 1.6rem; --bs-btn-padding-y: .75rem; }
.btn-primary {
    --bs-btn-bg: var(--site-brand); --bs-btn-border-color: var(--site-brand); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--site-brand); --bs-btn-hover-border-color: var(--site-brand); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--site-brand-dark); --bs-btn-active-border-color: var(--site-brand-dark);
    --bs-btn-focus-shadow-rgb: var(--site-brand-rgb);
    box-shadow: 0 4px 0 var(--site-brand-dark);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--site-brand-dark); }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--site-brand-dark); }
.btn-outline-primary { --bs-btn-color: var(--site-brand); --bs-btn-border-color: var(--site-brand); --bs-btn-hover-bg: var(--site-brand); --bs-btn-hover-border-color: var(--site-brand); --bs-btn-hover-color: #fff; border-width: 2px; }
.btn-outline-secondary {
    --bs-btn-color: var(--site-ink); --bs-btn-bg: var(--site-surface); --bs-btn-border-color: var(--site-line);
    --bs-btn-hover-color: var(--site-ink); --bs-btn-hover-bg: var(--site-surface); --bs-btn-hover-border-color: var(--site-ink);
    --bs-btn-active-color: var(--site-ink); --bs-btn-active-bg: var(--site-surface-2); --bs-btn-active-border-color: var(--site-ink);
    border-width: 2px;
}
.btn-outline-secondary:hover { transform: translateY(-2px); }
.btn-link { --bs-btn-color: var(--bs-link-color); --bs-btn-hover-color: var(--bs-link-hover-color); }

/* ---------- Navigation ---------- */
.site-navbar {
    background: color-mix(in srgb, var(--site-bg) 88%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    min-height: 74px;
    --bs-navbar-color: var(--site-muted);
    --bs-navbar-hover-color: var(--site-ink);
    --bs-navbar-active-color: var(--site-ink);
    border-color: var(--site-line) !important;
}
.site-navbar .nav-link { font-size: .97rem; font-weight: 700; border-radius: 999px; padding-inline: .9rem !important; }
.site-navbar .nav-link:hover, .site-navbar .nav-link.show { background: var(--site-brand-soft); color: var(--site-brand); }
.site-navbar .dropdown-menu {
    --bs-dropdown-bg: var(--site-surface);
    --bs-dropdown-color: var(--site-ink);
    --bs-dropdown-link-color: var(--site-ink);
    --bs-dropdown-link-hover-color: var(--site-ink);
    --bs-dropdown-border-color: var(--site-line);
    --bs-dropdown-border-radius: 1.4rem;
    --bs-dropdown-link-hover-bg: var(--site-surface-2);
    --bs-dropdown-link-active-bg: var(--site-brand-soft);
    --bs-dropdown-link-active-color: var(--site-ink);
    border-width: 2px;
    box-shadow: var(--site-shadow-pop);
}
.site-navbar .dropdown-item:hover .site-icon { transform: rotate(-8deg) scale(1.08); }
.site-toggle {
    width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; padding: 0;
    border-radius: 50%; border: 2px solid var(--site-line); background: var(--site-surface); color: var(--site-ink);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), border-color .15s;
}
.site-toggle:hover { transform: rotate(-20deg) scale(1.06); border-color: var(--site-ink); }
@media (min-width: 992px) {
    .site-mega { width: 580px; }
}

/* Logo (Inline-SVG aus additional/logo.php, Schriftzug in Textfarbe) */
.site-logo { display: block; height: 2rem; width: auto; color: var(--site-ink); }
.site-footer .site-logo { height: 1.75rem; }

/* Bunte Icon-Kacheln (tone-1 … tone-6, sonst Markenblau) */
.site-icon {
    flex: 0 0 auto; width: 2.4rem; height: 2.4rem; display: inline-grid; place-items: center;
    border-radius: .8rem; background: var(--tone-bg, var(--tone-1-bg)); color: var(--tone, var(--tone-1)); font-size: 1.1rem;
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.site-icon-lg { width: 3.2rem; height: 3.2rem; border-radius: 1rem; font-size: 1.45rem; }
.tone-1 { --tone-bg: var(--tone-1-bg); --tone: var(--tone-1); }
.tone-2 { --tone-bg: var(--tone-2-bg); --tone: var(--tone-2); }
.tone-3 { --tone-bg: var(--tone-3-bg); --tone: var(--tone-3); }
.tone-4 { --tone-bg: var(--tone-4-bg); --tone: var(--tone-4); }
.tone-5 { --tone-bg: var(--tone-5-bg); --tone: var(--tone-5); }
.tone-6 { --tone-bg: var(--tone-6-bg); --tone: var(--tone-6); }

.site-eyebrow {
    display: inline-block; background: var(--site-brand-soft); color: var(--site-brand-text);
    font-family: var(--site-font-head); font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-transform: none;
    padding: .45em 1em; border-radius: 999px; rotate: -2deg;
}

/* ---------- Hero ---------- */
.site-hero { position: relative; overflow: hidden; isolation: isolate; }
.site-blob { position: absolute; z-index: -1; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; filter: blur(2px); animation: site-morph 14s ease-in-out infinite alternate; }
.site-blob-1 { width: 26rem; height: 26rem; right: -6rem; top: -6rem; background: var(--tone-3-bg); }
.site-blob-2 { width: 18rem; height: 18rem; left: -6rem; bottom: -5rem; background: var(--tone-5-bg); animation-duration: 18s; }
.site-blob-3 { width: 10rem; height: 10rem; left: 46%; top: 8%; background: var(--tone-4-bg); animation-duration: 11s; }
@keyframes site-morph {
    from { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: translate(0, 0) rotate(0); }
    to { border-radius: 62% 38% 35% 65% / 55% 62% 38% 45%; transform: translate(1.5rem, 1rem) rotate(12deg); }
}
.site-shape { position: absolute; z-index: -1; pointer-events: none; animation: site-bob 5s ease-in-out infinite; }
.site-shape-star { color: var(--tone-3); font-size: 1.8rem; left: 54%; top: 70%; }
.site-shape-ring { width: 1.6rem; height: 1.6rem; border: 4px solid var(--tone-2); border-radius: 50%; right: 44%; bottom: 14%; animation-delay: -2s; }
.site-shape-dot { width: .9rem; height: .9rem; background: var(--tone-4); border-radius: 50%; right: 8%; bottom: 22%; animation-delay: -1s; }
@keyframes site-bob { 50% { transform: translateY(-10px) rotate(10deg); } }

/* Kringel unter einem Wort */
.site-squiggle { position: relative; white-space: nowrap; color: var(--site-brand); }
.site-squiggle svg { position: absolute; left: 0; bottom: -.28em; width: 100%; height: .35em; overflow: visible; }
.site-squiggle path { fill: none; stroke: var(--tone-3); stroke-width: 6; stroke-linecap: round; }

.site-dot {
    display: inline-block; width: .55rem; height: .55rem; border-radius: 50%;
    background: #1fae6a; box-shadow: 0 0 0 4px rgba(31, 174, 106, .18); margin-right: .5rem;
}
.site-sticker {
    position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .35rem;
    font-family: var(--site-font-head); font-weight: 600; font-size: .9rem; color: #1d1b35;
    background: #ffd84d; border-radius: 999px; padding: .5rem 1rem; rotate: 8deg;
    box-shadow: 0 4px 0 #d9a900; animation: site-wiggle 4s ease-in-out infinite;
}
.site-sticker-card { left: -1.25rem; bottom: -1.1rem; rotate: -6deg; animation-name: site-wiggle-left; }
@keyframes site-wiggle-left { 0%, 100% { rotate: -6deg; } 50% { rotate: -1deg; } }
[data-bs-theme="dark"] .site-blob { opacity: .7; }
@keyframes site-wiggle { 0%, 100% { rotate: 8deg; } 50% { rotate: 2deg; } }

/* ---------- Karten ---------- */
.site-card {
    --bs-card-bg: var(--site-surface); --bs-card-color: var(--site-ink);
    --bs-card-border-color: var(--site-line); --bs-card-border-width: 2px; --bs-card-border-radius: var(--site-radius);
    --bs-card-cap-bg: var(--site-surface);
    box-shadow: var(--site-shadow);
}
.site-card.shadow { box-shadow: var(--site-shadow-pop) !important; }
.site-card .list-group { --bs-list-group-bg: var(--site-surface); --bs-list-group-color: var(--site-ink); --bs-list-group-border-color: var(--site-line); --bs-list-group-action-hover-bg: var(--site-surface-2); --bs-list-group-action-hover-color: var(--site-ink); --bs-list-group-action-color: var(--site-ink); }
.site-card .list-group-item-action:hover .site-icon { transform: rotate(-10deg) scale(1.1); }
.site-tilt { rotate: -2deg; }
.site-card-hover { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s, border-color .2s; }
.site-card-hover:hover { transform: translateY(-6px) rotate(-1deg); border-color: var(--tone, var(--site-brand)); box-shadow: var(--site-shadow-pop); }
.site-card-hover:hover .site-icon { transform: rotate(-10deg) scale(1.12); }
.site-card-hover:nth-child(even):hover { transform: translateY(-6px) rotate(1deg); }
.site-step {
    width: 3.2rem; height: 3.2rem; display: inline-grid; place-items: center;
    font-family: var(--site-font-head); font-size: 1.4rem; font-weight: 700; color: #fff;
    border-radius: 1rem; rotate: -6deg; background: var(--tone, var(--site-brand)); box-shadow: 0 4px 0 rgba(0, 0, 0, .15);
}

/* Wellen als Abschnittsgrenze */
.site-wave { display: block; width: 100%; height: 48px; color: var(--site-surface-2); }
.site-wave-flip { transform: scaleY(-1); }
.site-band { background: var(--site-surface-2); }

/* ---------- FAQ ---------- */
.site-accordion {
    --bs-accordion-bg: var(--site-surface);
    --bs-accordion-color: var(--site-ink);
    --bs-accordion-btn-color: var(--site-ink);
    --bs-accordion-btn-bg: var(--site-surface);
    --bs-accordion-border-color: var(--site-line);
    --bs-accordion-border-width: 2px;
    --bs-accordion-border-radius: 1.25rem;
    --bs-accordion-inner-border-radius: 1.1rem;
    --bs-accordion-active-bg: var(--site-brand-soft);
    --bs-accordion-active-color: var(--site-brand);
    --bs-accordion-btn-focus-border-color: var(--site-brand);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--site-brand-rgb), .2);
}
.site-accordion .accordion-item { border: 2px solid var(--site-line) !important; border-radius: 1.25rem !important; overflow: hidden; margin-bottom: .75rem; }
.site-accordion .accordion-button { font-family: var(--site-font-head); font-weight: 500; font-size: 1.05rem; }

/* ---------- CTA ---------- */
.site-cta {
    position: relative; overflow: hidden; isolation: isolate; border-radius: 2rem !important;
    background: linear-gradient(135deg, var(--site-brand-dark), #004cd6 50%, #7c3aed);
    box-shadow: 0 8px 0 #1a3fa0;
}
.site-cta::before, .site-cta::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; }
.site-cta::before { width: 16rem; height: 16rem; right: -4rem; top: -6rem; background: rgba(255, 216, 77, .35); }
.site-cta::after { width: 10rem; height: 10rem; left: 30%; bottom: -5rem; background: rgba(46, 211, 163, .3); }
.site-cta .btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-hover-bg: #fff; --bs-btn-color: #004cd6; --bs-btn-hover-color: #004cd6; box-shadow: 0 4px 0 rgba(0, 0, 0, .2); }
.site-cta .btn-light:hover { transform: translateY(-2px) rotate(-1deg); }
.site-cta .btn-outline-light { border-width: 2px; }

/* ---------- Fußzeile ---------- */
.site-footer { background: var(--site-surface-2) !important; }
.site-footer a:not(.fw-bold) { color: var(--site-muted); text-decoration: none; }
.site-footer a:not(.fw-bold):hover { color: var(--site-brand); }
.site-footer-heading { font-family: var(--site-font-head); font-size: .95rem; font-weight: 600; text-transform: none !important; letter-spacing: 0; color: var(--site-ink) !important; }

/* ---------- Unterseiten (Variablen für /assets/libs/landing/pages.css) ---------- */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
    --page-accent: var(--site-brand);
    --page-alt-bg: var(--site-surface-2);
    --page-card-bg: var(--site-surface);
    --page-radius: 1.5rem;
    --page-shadow: var(--site-shadow);
    --page-shadow-hover: var(--site-shadow-pop);
    --page-header-bg: transparent;
    --page-header-muted: var(--site-muted);
    --page-eyebrow-bg: var(--site-brand-soft);
    --page-icon-bg: var(--tone-1-bg);
    --page-icon-color: var(--tone-1);
    --page-cta-bg: linear-gradient(135deg, var(--site-brand-dark), #004cd6 50%, #7c3aed);
    /* Überschriften der Unterseiten stehen linksbündig, Hinweise und schmale Blöcke auch */
    --page-align: start;
    --page-justify: flex-start;
    --page-narrow-start: 0;
}

/* ---------- Unterseiten-Bausteine (resources/project/shardserv/additional/page/components.php) ---------- */
.ss-page-hero { padding: 2.5rem 0 4rem; }
.ss-page-hero .breadcrumb { --bs-breadcrumb-divider-color: var(--site-muted); --bs-breadcrumb-item-active-color: var(--site-muted); }
.ss-hero-icon { width: 9rem; height: 9rem; border-radius: 2.25rem; font-size: 4rem; rotate: -6deg; box-shadow: var(--site-shadow-pop); }
.ss-plan-highlight { --bs-card-border-color: var(--site-brand); border-width: 3px; }

/* ---------- Inhaltsbereich der Unterseiten (Karten, Listen, Formulare) ---------- */
.page-card { --bs-card-border-width: 2px; --bs-card-border-radius: 1.5rem; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s, border-color .2s; }
.page-card-link:hover { transform: translateY(-6px) rotate(-1deg); border-color: var(--site-brand); }
.page-icon { border-radius: 1rem; width: 3rem; height: 3rem; rotate: -6deg; }
.page-section .col:nth-child(6n+2) .page-icon { background: var(--tone-2-bg); color: var(--tone-2); }
.page-section .col:nth-child(6n+3) .page-icon { background: var(--tone-3-bg); color: var(--tone-3); }
.page-section .col:nth-child(6n+4) .page-icon { background: var(--tone-4-bg); color: var(--tone-4); }
.page-section .col:nth-child(6n+5) .page-icon { background: var(--tone-5-bg); color: var(--tone-5); }
.page-section .col:nth-child(6n+6) .page-icon { background: var(--tone-6-bg); color: var(--tone-6); }
.page-card .card-body > .page-h3:first-child { display: flex; align-items: center; gap: .5rem; }
.page-h2, .page-h3, .page-title, .page-stat strong, .page-price-amount { font-family: var(--site-font-head); font-weight: 600; }
.page-checklist li::before { content: "\F270"; font-weight: 400; }
.page-stat strong { font-size: 2.4rem; }
.page-section .form-control, .page-section .form-select { border-radius: 1rem; border-width: 2px; padding: .65rem .95rem; background-color: var(--site-surface); }
.page-section .form-control:focus, .page-section .form-select:focus { border-color: var(--site-brand); box-shadow: 0 0 0 .25rem rgba(var(--site-brand-rgb), .15); }
.form-label { font-weight: 700; font-size: .9rem; }
.page-pills { --bs-nav-pills-link-active-bg: var(--site-surface); --bs-nav-pills-link-active-color: var(--site-brand); background: var(--site-surface-2); border: 2px solid var(--site-line); border-radius: 999px; padding: .25rem; display: inline-flex; }
.page-pills .nav-link { --bs-nav-pills-border-radius: 999px; font-weight: 700; }
.page-pills .nav-link.active { box-shadow: var(--site-shadow); }
.page-table thead th { background: var(--site-surface-2); }
.page-section-alt { background: var(--site-surface-2); }
.page-avatar-initials { border-radius: 1.2rem !important; rotate: -4deg; }
.page-figure { border-radius: 1.75rem; }
.page-cta { border-radius: 2rem; box-shadow: 0 8px 0 #1a3fa0; }
.modal { --bs-modal-bg: var(--site-surface); --bs-modal-border-radius: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
    .site-blob, .site-shape, .site-sticker { animation: none; }
}
.ss-price { font-family: var(--site-font-head); }

/* ---------- Social-Media-Icons in der Fußzeile: bunte, schräge Kacheln ---------- */
.ss-social { gap: .6rem; }
.ss-social a { border: 0; border-radius: .9rem; background: var(--tone-1-bg); color: var(--tone-1) !important; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.ss-social a:nth-child(6n+2) { background: var(--tone-2-bg); color: var(--tone-2) !important; }
.ss-social a:nth-child(6n+3) { background: var(--tone-3-bg); color: var(--tone-3) !important; }
.ss-social a:nth-child(6n+4) { background: var(--tone-4-bg); color: var(--tone-4) !important; }
.ss-social a:nth-child(6n+5) { background: var(--tone-5-bg); color: var(--tone-5) !important; }
.ss-social a:nth-child(6n+6) { background: var(--tone-6-bg); color: var(--tone-6) !important; }
.ss-social a:hover { transform: rotate(-10deg) scale(1.12); }

/* Info-Leiste über dem Kopf (page_topbar): dunkles Markenblau, in beiden Farbmodi gleich */
.ss-topbar { background: #00369a; font-weight: 600; }