/*
Theme Name: Hotline
Theme URI: https://designingmedia.com/
Author: Sphinx FlashDesign
Author URI: https://www.sphinx-flashdesign.de/
Description: WordPress-Theme auf Basis des ThemeForest-HTML-Templates "Hotline - Call Center & Telemarketing" (DesigningMedia, Item 9bqSV93J).
Version: 1.0.0
Requires PHP: 7.4
License: ThemeForest Regular License
Text Domain: hotline
*/

/* =========================================================================
   MARKENFARBEN — zentral einstellbar.
   Das Rot hier ändern, dann gilt es überall (Buttons, Headlines, Icons via
   CSS). Ausnahme: SVG-Dateien unter assets/images/ und die url(data:…)-
   Hintergründe können keine CSS-Variablen nutzen — dort steht der Wert
   fest im Code (Suchen/Ersetzen nach dem alten Hexwert).
   --sb-rot-rgb muss als r, g, b immer zum Hexwert von --sb-rot passen
   (wird für rgba()-Schatten und -Verläufe gebraucht).
   ========================================================================= */

:root {
    --sb-rot: #b9002b;
    --sb-rot-rgb: 185, 0, 43;
    --sb-rot-hover: #9a0024;
    --sb-rot-tinte: #e08ca0;
    /* Schriftfarben: Ueberschriften/starker Text und Fliesstext */
    --sb-schrift: #161616;
    --sb-schrift-soft: #372f2f;
}

/* Video-Lightbox (Hero-Button "So funktioniert's") */
.sb-video-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sb-video-lightbox[hidden] { display: none; }

.sb-video-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 35, 0.82);
}

.sb-video-lightbox__frame {
    position: relative;
    width: min(92vw, 1100px);
    z-index: 1;
}

.sb-video-lightbox__player {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.sb-video-lightbox__player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.sb-video-lightbox__close {
    position: absolute;
    top: -46px;
    right: 0;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--sb-schrift);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.sb-video-lightbox__close:hover {
    background: var(--sb-rot);
    color: #fff;
}

/* Handschrift-Font fuer den Hero-Slogan */
@font-face {
    font-family: 'Feltpen LT';
    src: url('assets/fonts/Linotype - Feltpen LT Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   WordPress-spezifische Ergänzungen
   (Das eigentliche Template-CSS liegt unter assets/css/)
   ========================================= */

.wp-page-section,
.wp-archive-section {
    padding: 90px 0;
}

.wp-page-section .entry-title {
    margin-bottom: 30px;
}

.entry-content img {
    max-width: 100%;
    height: auto;
}

.entry-content .alignleft {
    float: left;
    margin: 0 25px 15px 0;
}

.entry-content .alignright {
    float: right;
    margin: 0 0 15px 25px;
}

.entry-content .aligncenter {
    display: block;
    margin: 15px auto;
}

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

.entry-content .wp-caption-text {
    font-size: 14px;
    opacity: .7;
}

.wp-archive-section .blog-section-plan-box {
    margin-bottom: 30px;
    height: calc(100% - 30px);
}

.wp-archive-section .blog-section-plan-box figure img {
    width: 100%;
    height: auto;
}

/* Pagination */
.wp-archive-section .navigation.pagination {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

.wp-archive-section .nav-links .page-numbers {
    display: inline-block;
    padding: 10px 18px;
    margin: 0 4px;
    background: #f5f6fa;
    border-radius: 8px;
    color: #212121;
    text-decoration: none;
    font-weight: 600;
}

.wp-archive-section .nav-links .page-numbers.current,
.wp-archive-section .nav-links .page-numbers:hover {
    background: #4c4c9d;
    color: #fff;
}

/* Sub-Banner: klickbare Breadcrumb */
.sub-banner-text .breadcrum a {
    opacity: .85;
}

.sub-banner-text .breadcrum a:hover {
    opacity: 1;
}

/* Custom Logo */
.navbar-logo .custom-logo,
.footer-logo .custom-logo {
    max-height: 70px;
    width: auto;
}

/* =========================================================================
   Sonia-Bonolo-Hero (Design-Nachbau im Hotline-Theme)
   Wirkt nur auf Startseiten-Wrapper (.banner-section-outer), Header-Logo
   und die neue Hero-Markup-Struktur (.sb-hero).
   ========================================================================= */

/* Navy-Hintergrund mit rotem Glow statt Template-Verlauf */
.banner-section-outer {
    background-color: var(--sb-schrift);
    background-image:
        radial-gradient(ellipse 60% 55% at 0% 100%, rgba(var(--sb-rot-rgb), 0.45), transparent 70%),
        radial-gradient(ellipse 55% 60% at 92% 8%, rgba(84, 96, 158, 0.35), transparent 70%),
        radial-gradient(ellipse 40% 40% at 100% 100%, rgba(var(--sb-rot-rgb), 0.25), transparent 70%);
}

/* Header: SB-Logo, Telefon, CTA */
/* Custom-Logo (SVG) im Header: Breite fuehrt, Hoehe folgt dem Seitenverhaeltnis */
.navbar-brand img.sb-header-logo {
    display: block;
    width: min(52vw, 240px);
    height: auto;
}

.sb-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--sb-rot);
    color: #fff;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: 0.02em;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
    margin-right: 10px;
    vertical-align: middle;
}

.sb-logo-text {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.15;
}

.sb-logo-text small {
    display: block;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.75);
}

.sb-header-extra {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: 16px;
}

.sb-header-phone {
    color: var(--sb-rot) !important;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none !important;
    white-space: nowrap;
}

.sb-header-phone i { margin-right: 6px; }

.sb-header-cta {
    background: var(--sb-rot);
    color: #fff !important;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.sb-header-cta:hover { background: var(--sb-rot-hover); }

/* Hero-Grundfläche */
.sb-hero {
    position: relative;
    padding: 50px 0 90px;
}

/* Punkteraster links unten (Deko) */
.sb-hero::before {
    content: "";
    position: absolute;
    left: 22px;
    bottom: 70px;
    width: 80px;
    height: 150px;
    background-image: radial-gradient(rgba(255, 255, 255, 0.28) 2px, transparent 2.6px);
    background-size: 17px 17px;
    pointer-events: none;
}

/* Flagline */
.sb-hero-flag {
    display: inline-block;
    color: var(--sb-rot);
    /* Slogan — Handschrift, sehr prominent ueber der Headline */
    font-family: 'Feltpen LT', 'Comic Sans MS', cursive;
    font-size: clamp(30px, 3.3vw, 47px);
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    margin-bottom: 20px;
}

/* Serifen-Headline */
.sb-hero h1 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 43px;
    line-height: 1.14;
    font-weight: 700;
    margin-bottom: 22px;
}

.sb-hero-text {
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
    line-height: 1.7;
    max-width: 460px;
    margin-bottom: 32px;
}

/* Buttons */
.sb-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-bottom: 42px;
}

.sb-btn-red {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--sb-rot);
    color: #fff !important;
    padding: 16px 26px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 12px 28px rgba(var(--sb-rot-rgb), 0.35);
    transition: background 0.2s ease;
}

.sb-btn-red:hover { background: var(--sb-rot-hover); }

.sb-btn-red i { font-size: 14px; }

.sb-btn-play {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    color: var(--sb-schrift) !important;
    padding: 11px 24px 11px 12px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
    transition: transform 0.2s ease;
}

.sb-btn-play:hover { transform: translateY(-2px); }

.sb-btn-play .play {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1d2340;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* USP-Zeile */
.sb-hero-usps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
}

.sb-hero-usps li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 14.5px;
    line-height: 1.35;
}

.sb-hero-usps li i {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.92);
}

.sb-hero-usps li strong {
    color: var(--sb-rot);
    font-size: 17px;
    font-weight: 700;
    margin-right: 4px;
}

/* Steht im Zahlenfeld ein Wort (z. B. "Langjährige"), bleibt es fett,
   uebernimmt aber die dunkle Textfarbe statt des roten Akzents. */
.sb-hero-usps li strong.sb-hero-usps__word { color: inherit; }

.sb-hero-usps li span { color: rgba(255, 255, 255, 0.9); }

/* Rechte Seite: Kreisbild */
.sb-hero-media {
    position: relative;
    padding: 20px 0;
}

.sb-hero-circle {
    width: 540px;
    height: 540px;
    max-width: none;
    margin: 0 -110px 0 auto;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 22px rgba(255, 255, 255, 0.06), 0 30px 70px rgba(0, 0, 0, 0.35);
}

.sb-hero-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Hochformat-Portrait: Fokus auf das Gesicht im oberen Drittel */
    object-position: center 30%;
    display: block;
}

/* Gestrichelter Pfeil */
.sb-hero-arrow {
    position: absolute;
    top: -26px;
    left: -2%;
    opacity: 0.9;
    pointer-events: none;
}

/* Vertrauens-Karte */
.sb-hero-card {
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border-radius: 12px;
    padding: 20px 22px;
    width: 258px;
    box-shadow: 0 22px 50px rgba(10, 14, 35, 0.35);
    z-index: 2;
}

.sb-hero-card p {
    color: var(--sb-schrift);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
    margin: 0 0 14px;
}

.sb-hero-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}


/* Icon-Chips im Hero-Kaertchen — gleiche Optik wie vorher die Avatar-Fotos */
.sb-hero-avatars { display: flex; }

.sb-hero-avatar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #fff;
    outline: 1px solid rgba(var(--sb-rot-rgb), 0.25);
    margin-left: -9px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.sb-hero-avatar-icon:first-child { margin-left: 0; }

.sb-hero-avatar-icon img.hl-icon {
    width: 18px;
    height: 18px;
}

.sb-hero-card-num { text-align: left; }

.sb-hero-card-num strong {
    display: block;
    color: var(--sb-rot);
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
}

.sb-hero-card-num span {
    font-size: 12.5px;
    color: var(--sb-schrift-soft);
}

/* =========================================================================
   Video + Anfrage-Formular ("Kein Anruf geht verloren.") — 3 Spalten
   ========================================================================= */

.sb-vf {
    background: #f7f4ef;
    padding: 80px 0;
}

.sb-vf-grid { align-items: flex-start; }

/* ── Spalte links: Text + USP-Liste ── */

.sb-vf-flag {
    display: inline-block;
    color: var(--sb-rot);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.sb-vf-left h2 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 40px;
    font-weight: 700;
    color: var(--sb-schrift);
    line-height: 1.18;
    margin-bottom: 18px;
}

.sb-vf-text {
    color: var(--sb-schrift-soft);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 26px;
}

.sb-vf-usps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sb-vf-usps li {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 17px 0;
    border-bottom: 1px solid #e9e2d6;
    color: var(--sb-schrift);
    font-size: 15.5px;
    font-weight: 600;
}

.sb-vf-usps li:last-child { border-bottom: 0; }

.sb-vf-usps li i {
    color: var(--sb-rot);
    font-size: 26px;
    width: 34px;
    text-align: center;
    flex: 0 0 auto;
}

.sb-vf-usps li img.hl-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
}

/* ── Spalte Mitte: Video + Team-Diagramm ── */

.sb-vf-mid { text-align: center; }

.sb-vf-video-label {
    display: block;
    color: var(--sb-rot);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.sb-vf-video {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 44px rgba(29, 35, 64, 0.16);
    background: #000;
}

.sb-vf-video-cover { position: relative; cursor: pointer; }

.sb-vf-video-cover figure { margin: 0; }

.sb-vf-video-cover img { width: 100%; height: auto; display: block; }

.sb-vf-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--sb-rot);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding-left: 5px;
    box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.65), 0 14px 30px rgba(var(--sb-rot-rgb), 0.45);
    transition: transform 0.2s ease;
}

.sb-vf-video-cover:hover .sb-vf-play { transform: translate(-50%, -50%) scale(1.08); }

.sb-vf-video-frame { position: relative; aspect-ratio: 16 / 9; }

.sb-vf-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.sb-vf-video-link {
    background: none;
    border: 0;
    color: var(--sb-rot);
    font-size: 13.5px;
    font-weight: 600;
    margin-top: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.sb-vf-video-link:hover { color: var(--sb-rot-hover); }

.sb-vf-diagram-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--sb-schrift);
    margin: 30px 0 0;
}

.sb-vf-diagram { margin-top: 34px; }

.sb-vf-team-wrap { position: relative; display: inline-block; padding-top: 22px; }

.sb-vf-diagram-phone {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--sb-rot);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 8px 20px rgba(var(--sb-rot-rgb), 0.4), 0 0 0 4px #f7f4ef;
    z-index: 2;
}

.sb-vf-diagram-team {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.sb-vf-diagram-team img {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 8px 20px rgba(29, 35, 64, 0.16);
}

.sb-vf-connector {
    display: block;
    width: 0;
    height: 26px;
    margin: 8px auto;
    border-left: 2px solid rgba(var(--sb-rot-rgb), 0.6);
    position: relative;
}

.sb-vf-connector::after {
    content: "";
    position: absolute;
    left: -5px;
    bottom: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sb-rot);
}

.sb-vf-channels {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 10px;
}

.sb-vf-channel { text-align: center; }

.sb-vf-channel-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #1d2340;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 8px;
    box-shadow: 0 8px 18px rgba(29, 35, 64, 0.25);
}

.sb-vf-channel-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sb-schrift);
}

.sb-vf-caption {
    margin: 20px 0 0;
    color: #8a8fa3;
    font-size: 13.5px;
}

/* ── Call-Flow-Animation (Positionen in % vom 560x340-Raster) ── */

.sb-call-flow {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 560 / 340;
    margin: 20px auto 0;
    isolation: isolate;
}

.sb-call-flow .flow-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 1;
}

.sb-call-flow .network-base path,
.sb-call-flow .active-path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.sb-call-flow .network-base path {
    stroke: #ffd8da;
    stroke-width: 1.55;
    opacity: 0.62;
}

.sb-call-flow .active-path {
    stroke: var(--sb-rot);
    stroke-width: 2.1;
    filter: drop-shadow(0 2px 3px rgba(var(--sb-rot-rgb), 0.13));
}

.sb-call-flow .flow-packet {
    fill: var(--sb-rot);
    stroke: #fff;
    stroke-width: 2.2;
    filter: url(#packetGlow);
}

.sb-call-flow .phone-wrap {
    position: absolute;
    z-index: 6;
    left: 50%;
    top: 7%;
    width: 9.3%;
    aspect-ratio: 1;
    transform: translateX(-50%);
}

.sb-call-flow .phone-node {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sb-rot);
    box-shadow: 0 8px 20px rgba(var(--sb-rot-rgb), 0.25);
    transform-origin: center;
}

.sb-call-flow .phone-node svg {
    width: 52%;
    height: 52%;
    display: block;
    transform: rotate(-12deg);
}

.sb-call-flow .ring-mark {
    position: absolute;
    top: 50%;
    width: 13px;
    height: 27px;
    opacity: 0;
    transform: translateY(-50%);
    border: 2px solid var(--sb-rot);
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
}

.sb-call-flow .ring-mark--left { right: calc(100% + 7px); border-right-color: transparent; }
.sb-call-flow .ring-mark--right { left: calc(100% + 7px); border-left-color: transparent; }

.sb-call-flow.is-ringing .phone-node { animation: sbPhoneRing 0.62s cubic-bezier(0.36, 0.07, 0.19, 0.97) 2; }
.sb-call-flow.is-ringing .ring-mark--left { animation: sbRingMarks 0.62s ease-out 2; }
.sb-call-flow.is-ringing .ring-mark--right { animation: sbRingMarks 0.62s ease-out 0.08s 2; }
.sb-call-flow.phone-connected .phone-node { box-shadow: 0 0 0 6px rgba(var(--sb-rot-rgb), 0.10), 0 8px 20px rgba(var(--sb-rot-rgb), 0.26); }

.sb-call-flow .avatar-node {
    position: absolute;
    z-index: 4;
    top: 33%;
    width: 13.9%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translateX(-50%);
}

.sb-call-flow .avatar-node--1 { left: 14.64%; }
.sb-call-flow .avatar-node--2 { left: 50%; }
.sb-call-flow .avatar-node--3 { left: 85.36%; }

.sb-call-flow .avatar-node img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 7px 20px rgba(29, 35, 64, 0.11);
    filter: saturate(0.65);
    opacity: 0.72;
    transform: scale(0.94);
    transition: filter 0.45s ease, opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.85, 0.25, 1.2), box-shadow 0.45s ease;
}

.sb-call-flow .avatar-node.is-active img {
    filter: saturate(1);
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 9px 24px rgba(29, 35, 64, 0.15);
}

.sb-call-flow .connection-core {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 67.6%;
    width: 20px;
    height: 20px;
    transform: translateX(-50%) scale(0.75);
    opacity: 0.25;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--sb-rot);
    transition: opacity 0.3s ease, transform 0.42s cubic-bezier(0.2, 1.3, 0.3, 1);
}

.sb-call-flow .core-dot {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--sb-rot);
}

.sb-call-flow .core-halo {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--sb-rot);
    opacity: 0;
}

.sb-call-flow .connection-core.is-active { opacity: 1; transform: translateX(-50%) scale(1); }
.sb-call-flow .connection-core.is-active .core-halo { animation: sbCorePulse 0.85s ease-out 2; }

.sb-call-flow .outcome {
    position: absolute;
    z-index: 4;
    top: 81.8%;
    width: 18%;
    transform: translateX(-50%);
    opacity: 0.55;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.sb-call-flow .outcome--1 { left: 14.64%; }
.sb-call-flow .outcome--2 { left: 50%; }
.sb-call-flow .outcome--3 { left: 85.36%; }

.sb-call-flow .outcome-icon {
    width: 46%;
    max-width: 46px;
    aspect-ratio: 1;
    margin: 0 auto 5px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #1d2340;
    box-shadow: 0 7px 16px rgba(29, 35, 64, 0.14);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.sb-call-flow .outcome-icon svg {
    width: 52%;
    height: 52%;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sb-call-flow .outcome-icon svg.forward-handset {
    width: 46%;
    height: 46%;
    fill: #fff;
    stroke: none;
    transform: rotate(-12deg);
}

.sb-call-flow .outcome-label {
    display: block;
    color: var(--sb-schrift-soft);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.sb-call-flow .outcome.is-active { opacity: 1; transform: translateX(-50%) translateY(-2px); }

.sb-call-flow .outcome.is-active .outcome-icon {
    transform: scale(1.035);
    box-shadow: 0 0 0 5px rgba(var(--sb-rot-rgb), 0.09), 0 8px 18px rgba(29, 35, 64, 0.16);
}

@keyframes sbPhoneRing {
    0%, 100% { transform: rotate(0deg); }
    14% { transform: rotate(-6deg); }
    28% { transform: rotate(5deg); }
    42% { transform: rotate(-4deg); }
    58% { transform: rotate(3deg); }
    74% { transform: rotate(-2deg); }
}

@keyframes sbRingMarks {
    0% { opacity: 0; transform: translateY(-50%) scale(0.72); }
    30% { opacity: 0.9; }
    100% { opacity: 0; transform: translateY(-50%) scale(1.24); }
}

@keyframes sbCorePulse {
    0% { opacity: 0.75; transform: scale(0.65); }
    100% { opacity: 0; transform: scale(2.8); }
}

@media (prefers-reduced-motion: reduce) {
    .sb-call-flow .phone-node,
    .sb-call-flow .ring-mark,
    .sb-call-flow .core-halo { animation: none !important; }
    .sb-call-flow .avatar-node img { transition: none; filter: none; opacity: 1; transform: none; }
    .sb-call-flow .connection-core { opacity: 1; transform: translateX(-50%) scale(1); transition: none; }
    .sb-call-flow .outcome { opacity: 1; transition: none; }
    .sb-call-flow .active-path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

/* ── Spalte rechts: Formular-Karte ── */

.sb-vf-form {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 32px 30px;
    box-shadow: 0 22px 48px rgba(29, 35, 64, 0.12);
}

.sb-vf-form::before {
    content: "";
    position: absolute;
    top: -9px;
    right: -9px;
    width: 55%;
    height: 45%;
    border-top: 2px solid var(--sb-rot);
    border-right: 2px solid var(--sb-rot);
    border-top-right-radius: 22px;
    pointer-events: none;
}

.sb-vf-form-flag {
    display: inline-block;
    color: var(--sb-rot);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.sb-vf-form h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 25px;
    font-weight: 700;
    color: var(--sb-schrift);
    margin-bottom: 8px;
}

.sb-vf-form-text {
    color: var(--sb-schrift-soft);
    font-size: 13.5px;
    margin-bottom: 20px;
}

.sb-vf-form .form-group { margin-bottom: 12px; }

.sb-vf-form input.form-control,
.sb-vf-form select.form-control {
    border: 1px solid #e2ddd3;
    border-radius: 9px;
    background: #fff;
    padding: 13px 15px;
    font-size: 14.5px;
    height: auto;
    box-shadow: none;
    color: var(--sb-schrift);
}

.sb-vf-form select.form-control { color: #7c8093; }

.sb-vf-form input.form-control:focus,
.sb-vf-form select.form-control:focus {
    border-color: var(--sb-rot);
    box-shadow: 0 0 0 3px rgba(var(--sb-rot-rgb), 0.12);
}

.sb-vf-submit {
    width: 100%;
    justify-content: center;
    border: 0;
    cursor: pointer;
    font-size: 15px;
    padding: 15px 20px;
}

.sb-vf-note {
    margin: 12px 0 0;
    text-align: center;
    color: #8a8fa3;
    font-size: 12.5px;
}

.sb-vf-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 16px 0 12px;
    color: #b3b7c6;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.sb-vf-divider::before,
.sb-vf-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #ece7dd;
}

.sb-vf-phone {
    margin: 0;
    text-align: center;
    color: var(--sb-schrift-soft);
    font-size: 14px;
}

.sb-vf-phone i { color: var(--sb-rot); margin-right: 4px; }

.sb-vf-phone a {
    color: var(--sb-rot) !important;
    font-weight: 700;
    text-decoration: none !important;
}

@media (max-width: 991px) {
    .sb-vf { padding: 56px 0; }
    .sb-vf-left h2 { font-size: 32px; }
    .sb-vf-left { margin-bottom: 40px; }
    .sb-vf-mid { margin-bottom: 40px; }
}

/* =========================================================================
   Kundenstimmen-Karten ("Hunderte Schweizer Unternehmer vertrauen auf uns.")
   Design: helle Flaeche mit Punkteraster/Wellen, Karten mit rotem
   Zitat-Zeichen, Branchen-Badge unten, zentrierte Slider-Navigation.
   ========================================================================= */

.sb-qs {
    position: relative;
    background: #fcfbf9;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='70' viewBox='0 0 320 70'><path d='M0 40 Q 30 18 60 40 T 120 40 T 180 40 T 240 40 T 300 40' fill='none' stroke='%23b9002b' stroke-opacity='0.16' stroke-width='2'/><path d='M0 55 Q 30 33 60 55 T 120 55 T 180 55 T 240 55 T 300 55' fill='none' stroke='%23b9002b' stroke-opacity='0.10' stroke-width='2'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='70' viewBox='0 0 320 70'><path d='M0 40 Q 30 18 60 40 T 120 40 T 180 40 T 240 40 T 300 40' fill='none' stroke='%23b9002b' stroke-opacity='0.14' stroke-width='2'/></svg>");
    background-repeat: no-repeat, no-repeat;
    background-position: left -40px bottom 90px, right -30px top 46%;
    padding: 88px 0;
    overflow: hidden;
}

/* Punkteraster links oben und rechts (Navy-Blau wie im Design) */
.sb-qs::before,
.sb-qs::after {
    content: "";
    position: absolute;
    background-image: radial-gradient(rgba(37, 56, 128, 0.28) 1.8px, transparent 2.2px);
    background-size: 16px 16px;
    pointer-events: none;
}

.sb-qs::before {
    top: 40px;
    left: 24px;
    width: 150px;
    height: 170px;
}

.sb-qs::after {
    top: 45%;
    right: 20px;
    width: 120px;
    height: 200px;
}

.sb-qs-head {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto 44px;
}

.sb-qs-flag {
    display: inline-block;
    color: var(--sb-rot);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.sb-qs-head h2 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 40px;
    font-weight: 700;
    color: var(--sb-schrift);
    line-height: 1.2;
    margin-bottom: 14px;
}

.sb-qs-text {
    color: var(--sb-schrift-soft);
    font-size: 16.5px;
    line-height: 1.7;
    margin: 0;
}

/* Slider */
.sb-qs-slider-wrap { position: relative; z-index: 1; }

/* Owl kappt Schatten am Rand von .owl-stage-outer — Innenabstand schafft
   Platz, damit der weiche Kartenschatten nicht als harte Kante abbricht. */
.sb-qs-slider .owl-stage-outer { padding: 16px 0 26px; margin-bottom: -10px; }

.sb-qs-slider .owl-stage { display: flex; }

.sb-qs-slider .owl-item { display: flex; float: none; }

.sb-qs-slider .owl-item .sb-qs-card { width: 100%; }

/* Karten: weiss, randlos, sehr weicher Schatten (wie in der Vorlage) */
.sb-qs-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 0;
    border-radius: 16px;
    padding: 30px 28px 26px;
    box-shadow:
        0 1px 2px rgba(31, 42, 85, 0.04),
        0 8px 18px rgba(31, 42, 85, 0.045);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sb-qs-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 2px 4px rgba(31, 42, 85, 0.05),
        0 14px 30px rgba(31, 42, 85, 0.08);
}

/* Rotes Zitat-Zeichen — Selektor muss Owls ".owl-carousel .owl-item img"
   (width:100%) schlagen, sonst wird das Zeichen kartenbreit gestreckt. */
.sb-qs-mark { margin-bottom: 16px; }

.sb-qs-mark img,
.sb-qs-slider .owl-item .sb-qs-mark img {
    width: 44px;
    height: auto;
    display: block;
}

.sb-qs-quote {
    color: #4a4f63;
    font-size: 15.5px;
    line-height: 1.75;
    margin: 0 0 24px;
    flex: 1;
}

/* Branchen-Zeile unten: rundes Badge + Label */
.sb-qs-person {
    display: flex;
    align-items: center;
    gap: 13px;
}

.sb-qs-badge {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #fdf3f2;
    border: 1px solid #f5d8d5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sb-qs-badge img.hl-icon,
.sb-qs-slider .owl-item .sb-qs-badge img.hl-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
}

.sb-qs-badge i { color: var(--sb-rot); font-size: 18px; }

.sb-qs-meta { display: flex; flex-direction: column; }

.sb-qs-label {
    color: var(--sb-schrift);
    font-size: 15px;
    font-weight: 700;
}

.sb-qs-name {
    color: #8a8fa3;
    font-size: 13px;
    margin-top: 1px;
}

/* Navigation: zentriert unter den Karten — ← • • • → */
.sb-qs-slider .owl-nav {
    display: flex;
    justify-content: center;
    gap: 150px;
    margin-top: 22px;
}

.sb-qs-slider .owl-nav button.owl-prev,
.sb-qs-slider .owl-nav button.owl-next {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff !important;
    border: 1px solid #ece6dc;
    box-shadow: 0 8px 20px rgba(29, 35, 64, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    outline: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sb-qs-slider .owl-nav button.owl-prev:hover,
.sb-qs-slider .owl-nav button.owl-next:hover {
    transform: scale(1.07);
    box-shadow: 0 12px 26px rgba(29, 35, 64, 0.16);
}

.sb-qs-slider .owl-nav button img {
    width: 20px;
    height: auto;
    display: block;
}

/* Dots mittig zwischen den Pfeilen */
.sb-qs-slider .owl-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 19px;
    display: flex;
    gap: 9px;
    z-index: 2;
}

.sb-qs-slider .owl-dots .owl-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #c3cade;
    border: 0;
    padding: 0;
    outline: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.sb-qs-slider .owl-dots .owl-dot.active {
    background: var(--sb-rot);
    transform: scale(1.15);
}

/* "Weitere Kundenstimmen" als schlichter Text darunter */
.sb-qs-more { position: relative; z-index: 1; margin-top: 14px; }

.sb-qs-more-link {
    color: #3c4157 !important;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none !important;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.sb-qs-more-link:hover {
    color: var(--sb-rot) !important;
    border-bottom-color: var(--sb-rot);
}

@media (max-width: 991px) {
    .sb-qs { padding: 56px 0; }
    .sb-qs-head h2 { font-size: 32px; }
    .sb-qs::before, .sb-qs::after { display: none; }
    .sb-qs-slider .owl-nav { gap: 110px; }
}

/* =========================================================================
   Zahlen-Band ("17+ Jahre Erfahrung" / "Hunderte Schweizer Unternehmen")
   Hintergrund-Grafik als CSS-Variable: Desktop- und Mobil-Bild getrennt.
   ========================================================================= */

.sb-band {
    background: #fcfbf9;
    padding: 20px 0 70px;
}

.sb-band-card {
    display: flex;
    align-items: stretch;
    /* Radius etwas groesser als der in der Grafik gebackene, damit keine
       hellen Ecken der JPEG-Rundung stehen bleiben. */
    border-radius: 28px;
    overflow: hidden;
    background-image: var(--sb-band-bg-desktop);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 22px 50px rgba(31, 42, 85, 0.16);
    padding: 52px 40px;
}

.sb-band-col {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 6px 30px;
    min-width: 0;
}

/* Feine Trennlinie zwischen den Bloecken */
.sb-band-col + .sb-band-col {
    border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.sb-band-icon { flex: 0 0 auto; }

.sb-band-icon img.hl-icon {
    width: 104px;
    height: auto;
    display: block;
}

/* Die Unternehmens-Illustration ist filigraner gezeichnet als das
   Headset-Icon und braucht deshalb mehr Flaeche. */
.sb-band-icon img.hl-icon[src*="hundred-swiss-companies"] { width: 150px; }

.sb-band-body { min-width: 0; }

.sb-band-big {
    display: block;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 62px;
    font-weight: 700;
    line-height: 1.02;
    color: #fff;
    letter-spacing: -0.01em;
}

.sb-band-title {
    display: block;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 27px;
    font-weight: 700;
    color: #fff;
    margin-top: 6px;
    line-height: 1.2;
}

.sb-band-text {
    color: rgba(255, 255, 255, 0.82);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 12px 0 0;
    max-width: 320px;
}

@media (max-width: 991px) {
    .sb-band-card { padding: 42px 26px; }
    .sb-band-col { gap: 18px; padding: 6px 16px; }
    .sb-band-icon img.hl-icon { width: 78px; }
    .sb-band-icon img.hl-icon[src*="hundred-swiss-companies"] { width: 112px; }
    .sb-band-big { font-size: 46px; }
    .sb-band-title { font-size: 22px; }
}

/* =========================================================================
   Verpasste-Anrufe-Schritte ("Jeder verpasste Anruf …")
   ========================================================================= */

.sb-lost {
    position: relative;
    background: #fcfbf9;
    padding: 78px 0 88px;
    overflow: hidden;
}

/* Punkteraster links und rechts am Rand */
.sb-lost::before,
.sb-lost::after {
    content: "";
    position: absolute;
    top: 90px;
    width: 128px;
    height: 210px;
    background-image: radial-gradient(rgba(37, 56, 128, 0.20) 1.7px, transparent 2.1px);
    background-size: 17px 17px;
    pointer-events: none;
}

.sb-lost::before { left: 10px; }
.sb-lost::after { right: 10px; }

.sb-lost-head {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 0 auto 52px;
}

.sb-lost-flag {
    display: inline-block;
    color: var(--sb-rot);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.sb-lost-head h2 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 42px;
    font-weight: 700;
    color: var(--sb-schrift);
    line-height: 1.2;
    margin-bottom: 16px;
}

.sb-lost-text {
    color: var(--sb-schrift-soft);
    font-size: 16px;
    line-height: 1.7;
    margin: 0 auto;
    max-width: 660px;
}

/* Wellenlinie, die hinter den Karten durchläuft */
.sb-lost-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
}

.sb-lost-grid::before {
    content: "";
    position: absolute;
    left: -50vw;
    right: -50vw;
    top: 48%;
    height: 92px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='560' height='92' viewBox='0 0 560 92'><path d='M0 60 Q 70 8 140 48 T 280 52 T 420 30 T 560 54' fill='none' stroke='%23b9002b' stroke-opacity='0.30' stroke-width='1.6'/><path d='M0 76 Q 70 26 140 64 T 280 68 T 420 46 T 560 70' fill='none' stroke='%23b9002b' stroke-opacity='0.16' stroke-width='1.4' stroke-dasharray='3 6'/></svg>");
    background-repeat: repeat-x;
    background-position: center;
    z-index: 0;
    pointer-events: none;
}

.sb-lost-item {
    position: relative;
    z-index: 1;
    padding-top: 20px;
}

/* Roter Nummern-Kreis auf der Kartenoberkante */
.sb-lost-num {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sb-rot);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(var(--sb-rot-rgb), 0.35);
}

/* Schlaufen-Verbinder zwischen den Karten (nur Desktop) */
.sb-lost-item + .sb-lost-item::before {
    content: "";
    position: absolute;
    top: 52%;
    left: -34px;
    width: 34px;
    height: 26px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='26' viewBox='0 0 34 26'><path d='M0 14 H10 C15 14 15 6 11 6 C7 6 7 20 13 20 C19 20 20 14 24 14 H34' fill='none' stroke='%23b9002b' stroke-width='1.6' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
}

.sb-lost-card {
    height: 100%;
    border-radius: 18px;
    padding: 34px 26px 28px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(31, 42, 85, 0.06);
}

/* Farbabstufung der Karten wie in der Vorlage */
.sb-lost-item:nth-child(2) .sb-lost-card { background: #fdf1ef; }
.sb-lost-item:nth-child(3) .sb-lost-card { background: #fbe7e4; }

.sb-lost-visual {
    margin: 0 0 22px;
    text-align: center;
}

.sb-lost-visual img.hl-visual {
    width: 100%;
    max-width: 340px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.sb-lost-body h3 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 25px;
    font-weight: 700;
    color: var(--sb-schrift);
    margin: 0 0 10px;
}

.sb-lost-body p {
    color: var(--sb-schrift-soft);
    font-size: 14.5px;
    line-height: 1.65;
    margin: 0;
}

@media (max-width: 1199px) {
    .sb-lost::before, .sb-lost::after { display: none; }
    .sb-lost-head h2 { font-size: 34px; }
    .sb-lost-grid { gap: 26px; }
    .sb-lost-item + .sb-lost-item::before { left: -26px; }
    .sb-lost-body h3 { font-size: 22px; }
}

/* Mobil: Nummern links ausserhalb, senkrechte Verbindungslinie,
   im Karteninneren Text links und Illustration rechts. */
@media (max-width: 767px) {
    .sb-lost { padding: 52px 0 60px; }
    .sb-lost-head { margin-bottom: 34px; }
    .sb-lost-head h2 { font-size: 27px; }
    .sb-lost-grid { grid-template-columns: 1fr; gap: 26px; }
    .sb-lost-grid::before { display: none; }

    .sb-lost-item {
        padding: 0 0 0 52px;
    }

    .sb-lost-num {
        top: 22px;
        left: 0;
        transform: none;
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    /* Senkrechte Linie von Nummer zu Nummer */
    .sb-lost-item:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 16px;
        top: 56px;
        bottom: -26px;
        width: 2px;
        background: rgba(var(--sb-rot-rgb), 0.55);
    }

    .sb-lost-item + .sb-lost-item::before { display: none; }

    .sb-lost-card {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 22px 20px;
        border-radius: 14px;
    }

    .sb-lost-visual {
        order: 2;
        flex: 0 0 42%;
        margin: 0;
    }

    .sb-lost-visual img.hl-visual { max-width: 100%; }

    .sb-lost-body { order: 1; flex: 1 1 auto; }
    .sb-lost-body h3 { font-size: 21px; }
    .sb-lost-body p { font-size: 13.5px; margin-top: 8px; }
}

/* Mobil: eigenes Hochformat-Bild, Bloecke untereinander und zentriert */
@media (max-width: 767px) {
    .sb-band { padding: 10px 0 50px; }

    .sb-band-card {
        flex-direction: column;
        background-image: var(--sb-band-bg-mobile);
        border-radius: 22px;
        padding: 44px 22px;
    }

    .sb-band-col {
        flex-direction: column;
        text-align: center;
        gap: 14px;
        padding: 26px 6px;
    }

    .sb-band-col + .sb-band-col {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.22);
    }

    .sb-band-icon img.hl-icon { width: 92px; margin: 0 auto; }
    .sb-band-icon img.hl-icon[src*="hundred-swiss-companies"] { width: 132px; }

    .sb-band-big { font-size: 54px; }
    .sb-band-title { font-size: 24px; }
    .sb-band-text { margin-left: auto; margin-right: auto; }
}

/* Responsive */
@media (max-width: 1199px) {
    .sb-hero h1 { font-size: 40px; }
    .sb-hero-circle { width: 440px; height: 440px; margin-right: -80px; }
}

@media (max-width: 991px) {
    .sb-hero h1 { font-size: 38px; }
    .sb-hero-circle { width: 360px; height: 360px; margin: 0 auto; }
    .sb-hero-card { left: 0; }
    /* Im Burger-Menue: Telefonnummer und CTA untereinander statt gequetscht nebeneinander */
    .sb-header-extra {
        margin: 10px 0 16px;
        margin-left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

@media (max-width: 575px) {
    .sb-hero { padding: 30px 0 60px; }
    .sb-hero h1 { font-size: 31px; }
    .sb-hero-circle { width: 280px; height: 280px; }
    .sb-hero-card {
        position: static;
        transform: none;
        width: 100%;
        margin-top: 16px;
    }
    .sb-hero-usps { gap: 20px; }
    .sb-hero::before { display: none; }
}

/* =========================================================================
   Vergleichs-Banner (Paket: soniabonolo-section-mit-punkten-und-linien)
   Original-CSS 1:1, nur Asset-Pfade auf assets/images/comparison/ gesetzt.
   ========================================================================= */
.sb-comparison-wrap { background: #fcfbf9; padding: 0 0 70px; }
.sb-comparison,
.sb-comparison * {
    box-sizing: border-box;
}

.sb-comparison {
    --sb-comparison-accent: var(--sb-rot);
    --sb-comparison-heading-font: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --sb-comparison-body-font: "Roboto", "Helvetica Neue", Arial, sans-serif;
    --sb-comparison-cta-font: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;

    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: clamp(2.25rem, 5.5vw, 5.5rem);

    width: min(100%, 79rem); /* 1264px */
    min-height: 9.25rem;     /* 148px */
    margin-inline: auto;
    padding: 1.65rem clamp(4.75rem, 9.75vw, 8.75rem) 1.65rem clamp(3.5rem, 8.1vw, 7.25rem);

    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    background-color: #091f4b;
    background-image: url("assets/images/comparison/vergleich-hintergrund.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    box-shadow: 0 0.35rem 1.1rem rgba(7, 18, 43, 0.17);
}

/* Punktraster links – separates SVG, damit Größe und Position unabhängig steuerbar bleiben. */
.sb-comparison::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 1.45rem;
    left: 1.15rem;
    width: 4.9rem;
    height: 6.5rem;
    pointer-events: none;
    background: url("assets/images/comparison/punkte-links.svg") left top / 100% 100% no-repeat;
    opacity: 0.78;
}

/* Geschwungene Linien rechts – separates SVG-Overlay. */
.sb-comparison::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: 0;
    width: min(26vw, 22.5rem);
    height: 9.375rem;
    pointer-events: none;
    background: url("assets/images/comparison/linien-rechts.svg") right bottom / 100% 100% no-repeat;
}

.sb-comparison__copy,
.sb-comparison__link {
    position: relative;
    z-index: 1;
}

.sb-comparison__copy {
    min-width: 0;
}

.sb-comparison__title {
    margin: 0;
    color: #f7f3ed;
    font-family: var(--sb-comparison-heading-font);
    font-size: clamp(2rem, 2.65vw, 2.5rem);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.018em;
    text-wrap: balance;
}

.sb-comparison__text {
    margin: 0.7rem 0 0;
    color: rgba(247, 243, 237, 0.82);
    font-family: var(--sb-comparison-body-font);
    font-size: clamp(0.97rem, 1.18vw, 1.08rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.012em;
}

.sb-comparison__link {
    display: inline-flex;
    align-items: center;
    gap: clamp(1rem, 1.85vw, 1.65rem);
    justify-self: end;
    flex: 0 0 auto;

    color: var(--sb-comparison-accent);
    font-family: var(--sb-comparison-cta-font);
    font-size: clamp(1rem, 1.2vw, 1.12rem);
    font-weight: 700;
    line-height: 1.28;
    text-decoration: none;
}

.sb-comparison__arrow {
    display: block;
    width: clamp(2.75rem, 3.9vw, 3.5rem);
    height: auto;
    flex: 0 0 auto;
    transition: transform 180ms ease;
}

.sb-comparison__link:hover .sb-comparison__arrow,
.sb-comparison__link:focus-visible .sb-comparison__arrow {
    transform: translate(0.2rem, 0.2rem);
}

.sb-comparison__link:focus-visible {
    outline: 2px solid #f7f3ed;
    outline-offset: 0.45rem;
    border-radius: 0.2rem;
}

@media (max-width: 62rem) {
    .sb-comparison {
        gap: 2.25rem;
        padding-inline: 3.25rem;
    }

    .sb-comparison::after {
        width: 21rem;
    }
}

@media (max-width: 46rem) {
    .sb-comparison {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        min-height: 0;
        padding: 2rem 1.75rem 2rem 3.25rem;
        border-radius: 1.05rem;
        background-image: url("assets/images/comparison/vergleich-hintergrund-mobile.svg");
    }

    .sb-comparison::before {
        top: 1.35rem;
        left: 0.55rem;
        width: 2.75rem;
        height: 8.75rem;
        opacity: 0.48;
    }

    .sb-comparison::after {
        right: -0.2rem;
        bottom: -0.25rem;
        width: 13rem;
        height: 12.75rem;
        background-image: url("assets/images/comparison/linien-rechts-mobile.svg");
        opacity: 0.74;
    }

    .sb-comparison__title {
        max-width: 18ch;
        font-size: clamp(1.9rem, 8vw, 2.35rem);
        line-height: 1.08;
    }

    .sb-comparison__text {
        max-width: 38rem;
        margin-top: 0.8rem;
        font-size: 1rem;
    }

    .sb-comparison__link {
        justify-self: start;
        gap: 1rem;
        font-size: 1rem;
    }

    .sb-comparison__arrow {
        width: 2.8rem;
    }
}

@media (max-width: 26rem) {
    .sb-comparison {
        padding: 1.65rem 1.25rem 1.65rem 2.75rem;
    }

    .sb-comparison__title {
        font-size: 1.82rem;
    }
}

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

/* =========================================================================
   Gruenderin + Leistungs-Akkordeon (Paket: soniabonolo-service-section)
   Original-CSS 1:1, nur Asset-Pfade auf assets/images/service/ gesetzt.
   ========================================================================= */
.sb-service-stage { background: #fcfbf9; padding-top: 0; padding-bottom: 80px; }
.sb-service-stage,
.sb-service-stage * {
    box-sizing: border-box;
}

.sb-service-stage {
    --sb-service-accent: var(--sb-rot);
    --sb-service-button: var(--sb-rot);
    --sb-service-ivory: #f7f3ed;
    --sb-service-serif: "Cormorant Garamond", "Noto Serif", Georgia, "Times New Roman", serif;
    --sb-service-sans: Inter, "Helvetica Neue", Arial, sans-serif;

    position: relative;
    isolation: isolate;
    width: 100%;
    padding: clamp(0.75rem, 2.5vw, 1.5rem);
}

.sb-service-stage::before,
.sb-service-stage::after {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
}

.sb-service-stage::before {
    top: 4.4rem;
    right: 0;
    width: 7.9rem;
    height: 13.9rem;
    background: url("assets/images/service/deko-punkte.svg") center / contain no-repeat;
}

.sb-service-stage::after {
    right: -0.5rem;
    bottom: -1.5rem;
    width: min(34vw, 27rem);
    aspect-ratio: 430 / 250;
    background: url("assets/images/service/deko-linien.svg") center / contain no-repeat;
}

.sb-service {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.66fr) minmax(18rem, 0.94fr);
    gap: clamp(1rem, 2vw, 1.55rem);
    width: min(100%, 75rem);
    margin-inline: auto;
    padding: clamp(0.75rem, 1.25vw, 0.95rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: clamp(1.15rem, 2.1vw, 1.55rem);
    background:
        radial-gradient(circle at 75% 2%, rgba(var(--sb-rot-rgb), 0.9) 0, rgba(var(--sb-rot-rgb), 0.32) 22%, transparent 46%),
        radial-gradient(circle at 51% 58%, rgba(137, 44, 94, 0.38), transparent 41%),
        linear-gradient(109deg, #071b48 0%, #0d2a56 39%, #4d285b 70%, #a92f48 100%);
    box-shadow: 0 0.7rem 2.4rem rgba(13, 30, 66, 0.18);
}

.sb-service::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255,255,255,.025), transparent 32%),
        radial-gradient(circle at 8% 8%, rgba(255,255,255,.035), transparent 26%);
    mix-blend-mode: screen;
}

.sb-service__content {
    position: relative;
    z-index: 1;
    align-self: center;
    min-width: 0;
    padding: clamp(1.1rem, 2.3vw, 1.95rem) clamp(0.25rem, 1.2vw, 0.75rem) clamp(0.55rem, 1vw, 0.9rem) clamp(1rem, 2.45vw, 1.9rem);
}

.sb-service__eyebrow {
    margin: 0 0 clamp(0.55rem, 1vw, 0.8rem);
    color: var(--sb-service-accent);
    font-family: var(--sb-service-sans);
    font-size: clamp(0.66rem, 0.9vw, 0.78rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.sb-service__title {
    max-width: 34ch;
    margin: 0;
    color: var(--sb-service-ivory);
    font-family: var(--sb-service-serif);
    font-size: clamp(2.05rem, 3.1vw, 2.7rem);
    font-weight: 400;
    line-height: 0.99;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.sb-service__intro {
    max-width: 64ch;
    margin: clamp(0.55rem, 1vw, 0.8rem) 0 0;
    color: rgba(247, 243, 237, 0.87);
    font-family: var(--sb-service-sans);
    font-size: clamp(0.75rem, 1.02vw, 0.91rem);
    font-weight: 500;
    line-height: 1.45;
}

.sb-service__accordion {
    display: grid;
    gap: clamp(0.28rem, 0.55vw, 0.44rem);
    max-width: 39rem;
    margin-top: clamp(0.85rem, 1.45vw, 1.15rem);
}

.sb-service__item {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.7rem;
    background: linear-gradient(90deg, rgba(75, 109, 158, 0.24), rgba(255, 255, 255, 0.09));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    transition: border-color 180ms ease, background-color 180ms ease;
}

.sb-service__item[open] {
    border-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(100deg, rgba(62, 100, 153, 0.35), rgba(255, 255, 255, 0.1));
}

.sb-service__summary {
    display: grid;
    grid-template-columns: clamp(2.1rem, 3.1vw, 2.65rem) minmax(0, 1fr) 1rem;
    align-items: center;
    gap: clamp(0.35rem, 0.75vw, 0.7rem);
    min-height: clamp(2.35rem, 3.4vw, 2.85rem);
    padding: 0.2rem clamp(0.6rem, 1.15vw, 0.85rem) 0.2rem clamp(0.4rem, 0.8vw, 0.65rem);
    color: rgba(247, 243, 237, 0.95);
    cursor: pointer;
    list-style: none;
    font-family: var(--sb-service-sans);
    font-size: clamp(0.73rem, 1vw, 0.88rem);
    font-weight: 650;
    line-height: 1.25;
}

.sb-service__summary::-webkit-details-marker {
    display: none;
}

.sb-service__summary::marker {
    content: "";
}

.sb-service__summary:focus-visible {
    outline: 2px solid var(--sb-service-ivory);
    outline-offset: -3px;
    border-radius: 0.6rem;
}

.sb-service__feature-icon {
    display: block;
    width: clamp(1.85rem, 2.8vw, 2.35rem);
    height: auto;
    justify-self: center;
    opacity: 0.94;
}

.sb-service__summary-text {
    min-width: 0;
}

.sb-service__chevron {
    width: 0.62rem;
    height: 0.62rem;
    justify-self: end;
    border-right: 2px solid rgba(247, 243, 237, 0.88);
    border-bottom: 2px solid rgba(247, 243, 237, 0.88);
    transform: rotate(45deg) translate(-0.08rem, -0.08rem);
    transform-origin: center;
    transition: transform 180ms ease;
}

.sb-service__item[open] .sb-service__chevron {
    transform: rotate(225deg) translate(-0.02rem, -0.02rem);
}

.sb-service__answer {
    padding: 0 clamp(1rem, 2vw, 1.4rem) clamp(0.65rem, 1vw, 0.9rem) clamp(3.25rem, 5.35vw, 4.3rem);
}

.sb-service__answer p {
    margin: -0.05rem 0 0;
    color: rgba(247, 243, 237, 0.85);
    font-family: var(--sb-service-sans);
    font-size: clamp(0.7rem, 0.92vw, 0.82rem);
    font-weight: 450;
    line-height: 1.46;
}

.sb-service__actions {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.1vw, 1.75rem);
    margin-top: clamp(0.85rem, 1.55vw, 1.2rem);
}

.sb-service__button {
    display: inline-flex;
    min-height: clamp(2.65rem, 4vw, 3.15rem);
    align-items: center;
    justify-content: center;
    padding: 0.72rem clamp(1.1rem, 2vw, 1.55rem);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.38rem;
    background: linear-gradient(180deg, var(--sb-rot), var(--sb-service-button));
    box-shadow: 0 0.35rem 0.8rem rgba(53, 12, 21, 0.18);
    color: #fff;
    font-family: var(--sb-service-sans);
    font-size: clamp(0.76rem, 1vw, 0.9rem);
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.sb-service__button:hover {
    filter: brightness(1.055);
    transform: translateY(-1px);
    box-shadow: 0 0.48rem 1rem rgba(53, 12, 21, 0.22);
}

.sb-service__button:focus-visible {
    outline: 2px solid var(--sb-service-ivory);
    outline-offset: 0.25rem;
}

.sb-service__response {
    display: flex;
    align-items: center;
    gap: 0.62rem;
    margin: 0;
    color: rgba(247, 243, 237, 0.9);
    font-family: var(--sb-service-sans);
    font-size: clamp(0.64rem, 0.85vw, 0.75rem);
    font-weight: 650;
    line-height: 1.25;
}

.sb-service__response img {
    width: clamp(1.25rem, 2.1vw, 1.55rem);
    height: auto;
    flex: 0 0 auto;
}

.sb-service__portrait {
    position: relative;
    z-index: 1;
    align-self: stretch;
    min-height: 32rem;
    margin: 0;
    overflow: hidden;
    border-radius: clamp(0.95rem, 1.65vw, 1.2rem);
    background: #273243;
}

.sb-service__portrait picture,
.sb-service__portrait img {
    display: block;
    width: 100%;
    height: 100%;
}

.sb-service__portrait img {
    object-fit: cover;
    object-position: center center;
}

.sb-service__portrait::after {
    position: absolute;
    inset: auto 0 0;
    height: 28%;
    content: "";
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(4, 13, 26, 0.72));
}

.sb-service__caption {
    position: absolute;
    z-index: 2;
    right: clamp(1rem, 2vw, 1.45rem);
    bottom: clamp(0.85rem, 1.8vw, 1.3rem);
    display: grid;
    color: #fff;
    font-family: var(--sb-service-sans);
    line-height: 1.18;
    text-align: right;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.sb-service__caption strong {
    font-size: clamp(0.9rem, 1.3vw, 1.08rem);
    font-weight: 750;
}

.sb-service__caption span {
    margin-top: 0.1rem;
    font-size: clamp(0.67rem, 0.92vw, 0.78rem);
    font-weight: 450;
}

@media (max-width: 66rem) {
    .sb-service {
        grid-template-columns: minmax(0, 1.4fr) minmax(17rem, 0.85fr);
    }

    .sb-service__desktop-break {
        display: none;
    }

    .sb-service__portrait {
        min-height: 31rem;
    }
}

@media (max-width: 49rem) {
    .sb-service-stage {
        padding-inline: 0.75rem;
    }

    .sb-service-stage::before {
        top: 2.5rem;
        right: -2.2rem;
        opacity: 0.6;
    }

    .sb-service-stage::after {
        right: -4.5rem;
        bottom: -0.5rem;
        width: 18rem;
        opacity: 0.6;
    }

    .sb-service {
        grid-template-columns: 1fr;
        gap: 0.8rem;
        padding: 0.72rem;
    }

    .sb-service__content {
        padding: 1.3rem 0.75rem 0.4rem;
    }

    .sb-service__title-break {
        display: none;
    }

    .sb-service__title {
        max-width: 19ch;
        font-size: clamp(2rem, 8.2vw, 2.75rem);
        line-height: 1.02;
    }

    .sb-service__intro {
        max-width: 58ch;
        font-size: 0.89rem;
    }

    .sb-service__accordion {
        max-width: none;
        margin-top: 1rem;
    }

    .sb-service__summary {
        grid-template-columns: 2.35rem minmax(0, 1fr) 0.9rem;
        min-height: 3rem;
        padding-block: 0.32rem;
        font-size: 0.86rem;
    }

    .sb-service__answer {
        padding-left: 3.42rem;
    }

    .sb-service__answer p {
        font-size: 0.8rem;
    }

    .sb-service__actions {
        flex-wrap: wrap;
        margin-top: 1rem;
    }

    .sb-service__button {
        min-height: 3rem;
        font-size: 0.88rem;
    }

    .sb-service__response {
        font-size: 0.72rem;
    }

    .sb-service__portrait {
        min-height: 0;
        aspect-ratio: 4 / 4.9;
    }

    .sb-service__portrait img {
        object-position: center 42%;
    }
}

@media (max-width: 31rem) {
    .sb-service-stage {
        padding-inline: 0.5rem;
    }

    .sb-service {
        border-radius: 1.1rem;
    }

    .sb-service__content {
        padding-inline: 0.45rem;
    }

    .sb-service__eyebrow {
        font-size: 0.61rem;
        letter-spacing: 0.14em;
    }

    .sb-service__title {
        font-size: clamp(1.9rem, 10.4vw, 2.35rem);
    }

    .sb-service__intro {
        font-size: 0.82rem;
    }

    .sb-service__summary {
        grid-template-columns: 2.1rem minmax(0, 1fr) 0.75rem;
        gap: 0.38rem;
        padding-inline: 0.38rem 0.62rem;
        font-size: 0.79rem;
    }

    .sb-service__feature-icon {
        width: 1.8rem;
    }

    .sb-service__answer {
        padding-right: 0.75rem;
        padding-left: 2.85rem;
    }

    .sb-service__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .sb-service__button {
        width: 100%;
    }

    .sb-service__portrait {
        aspect-ratio: 4 / 5.4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sb-service__button,
    .sb-service__chevron,
    .sb-service__item {
        transition: none;
    }
}

/* Theme-Anpassung: Stage-Padding aus dem Paket + unser Section-Abstand */
.sb-service-stage { padding: 0 clamp(0.75rem, 2.5vw, 1.5rem) 80px; }
.sb-service-stage::before { top: 0.4rem; }

/* Service-Section: stabile Kartenhoehe + weiches Akkordeon.
   Die Content-Spalte bekommt eine Mindesthoehe, die auch bei laengster
   geoeffneter Antwort reicht — so springt die Seite beim Klappen nicht.
   Das Portrait streckt sich ohnehin auf die Kartenhoehe (align-self: stretch). */
.sb-service__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sb-service__answer {
    will-change: height;
}

.sb-service__chevron {
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 49rem) {
    .sb-service__content { justify-content: flex-start; }
}

/* =========================================================================
   Ablauf-Schritte (Paket: soniabonolo-process-section)
   Original-CSS 1:1; Asset-Pfade → assets/images/process/, :root → .sb-process.
   ========================================================================= */
.sb-process {
  --sb-process-navy: var(--sb-schrift);
  --sb-process-text: var(--sb-schrift-soft);
  --sb-process-accent: var(--sb-rot);
  --sb-process-border: rgba(18, 34, 74, 0.08);
  --sb-process-shadow: 0 10px 30px rgba(17, 34, 74, 0.06);
  --sb-process-surface: #ffffff;
  --sb-process-muted: #d9e5f3;
}

.sb-process {
  position: relative;
  overflow: clip;
  padding: 96px 24px 92px;
  background: #fff;
  isolation: isolate;
}

.sb-process::before,
.sb-process::after {
  content: "";
  position: absolute;
  top: 62px;
  width: 164px;
  height: 132px;
  background: url('assets/images/process/dots-grid.svg') center/contain no-repeat;
  opacity: .92;
  pointer-events: none;
  z-index: 0;
}

.sb-process::before { left: 12px; }
.sb-process::after { right: 12px; }

.sb-process__waves,
.sb-process__waves::before {
  content: "";
  position: absolute;
  bottom: 106px;
  width: 340px;
  height: 82px;
  pointer-events: none;
  z-index: 0;
}

.sb-process__waves {
  left: -18px;
  background: url('assets/images/process/wave-lines-left.svg') left center/contain no-repeat;
}

.sb-process__waves::before {
  right: -18px;
  background: url('assets/images/process/wave-lines-right.svg') right center/contain no-repeat;
}

.sb-process__container {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
}

.sb-process__header {
  max-width: 760px;
  margin: 0 auto 42px;
  text-align: center;
}

.sb-process__eyebrow {
  margin: 0 0 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sb-process-accent);
}

.sb-process__title {
  margin: 0;
  color: var(--sb-process-navy);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 1.45rem + 2.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.sb-process__subtitle {
  margin: 16px 0 0;
  color: var(--sb-schrift-soft);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 0.92rem + 0.45vw, 1.5rem);
  line-height: 1.45;
}

.sb-process__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.sb-process__card {
  position: relative;
  min-height: 330px;
  padding: 38px 22px 24px;
  border: 1px solid var(--sb-process-border);
  border-radius: 18px;
  background: var(--sb-process-surface);
  box-shadow: var(--sb-process-shadow);
  text-align: center;
}

.sb-process__card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -28px;
  width: 38px;
  height: 18px;
  transform: translateY(-50%);
  background: url('assets/images/process/step-arrow.svg') center/contain no-repeat;
}

.sb-process__badge {
  position: absolute;
  top: -18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--sb-rot) 0%, var(--sb-rot) 100%);
  color: #fff;
  font: 700 1.25rem/1 Arial, Helvetica, sans-serif;
  box-shadow: 0 10px 18px rgba(var(--sb-rot-rgb), 0.25);
}

.sb-process__icon-wrap {
  display: grid;
  place-items: center;
  width: 100%;
  margin: 4px 0 18px;
}

.sb-process__icon {
  width: min(132px, 82%);
  height: auto;
  display: block;
}

.sb-process__card-title {
  margin: 0;
  color: var(--sb-process-navy);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.45rem, 1.1rem + 0.55vw, 1.9rem);
  line-height: 1.16;
  font-weight: 500;
}

.sb-process__divider {
  width: 74px;
  height: 8px;
  margin: 12px auto 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='8' viewBox='0 0 74 8' fill='none'%3E%3Cpath d='M1 4H73' stroke='%23F2604B' stroke-width='1.8' stroke-linecap='round' stroke-dasharray='1 5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.sb-process__text {
  margin: 0;
  color: var(--sb-process-text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.05rem;
  line-height: 1.55;
}

@media (max-width: 1279px) {
  .sb-process__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sb-process__card:nth-child(3)::after,
  .sb-process__card:nth-child(5)::after {
    display: none;
  }
}

@media (max-width: 991px) {
  .sb-process {
    padding: 84px 18px 80px;
  }

  .sb-process::before,
  .sb-process::after {
    width: 110px;
    height: 88px;
    top: 40px;
    opacity: .8;
  }

  .sb-process__waves,
  .sb-process__waves::before {
    width: 220px;
    height: 56px;
    bottom: 64px;
  }

  .sb-process__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sb-process__card::after {
    display: none;
  }
}

@media (max-width: 639px) {
  .sb-process {
    padding: 72px 16px 72px;
  }

  .sb-process::before,
  .sb-process::after {
    width: 88px;
    height: 72px;
    top: 24px;
  }

  .sb-process::before { left: 2px; }
  .sb-process::after { right: 2px; }

  .sb-process__waves,
  .sb-process__waves::before {
    width: 160px;
    height: 44px;
    bottom: 48px;
    opacity: .7;
  }

  .sb-process__header {
    margin-bottom: 34px;
  }

  .sb-process__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .sb-process__card {
    min-height: auto;
    padding-inline: 20px;
  }

  .sb-process__text {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sb-process * {
    scroll-behavior: auto;
  }
}

/* Theme: Serifen-Font wie im uebrigen Design + Anschluss an vorherige Section */
.sb-process__title, .sb-process__card-title { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; }
.sb-process { background: #fcfbf9; }

/* =========================================================================
   CTA-Banner (Paket: soniabonolo-cta-banner-section)
   Original-CSS 1:1; Asset-Pfade → assets/images/cta-banner/, :root gescoped.
   ========================================================================= */
.sb-cta-banner-wrap { background: #fcfbf9; padding: 0 0 76px; }
.sb-cta-banner {
  --sb-cta-navy: #102652;
  --sb-cta-purple: #5c1d5d;
  --sb-cta-accent: var(--sb-rot);
  --sb-cta-accent-dark: var(--sb-rot);
  --sb-cta-text: #ffffff;
  --sb-cta-muted: rgba(255,255,255,0.82);
}

.sb-cta-banner {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(90deg, #0d285a 0%, #162e6d 26%, #432060 70%, #86254a 100%);
  box-shadow: 0 8px 26px rgba(16, 38, 82, 0.14);
  isolation: isolate;
}

.sb-cta-banner::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 18px;
  width: 96px;
  height: 74px;
  background: url('assets/images/cta-banner/dots-left.svg') center/contain no-repeat;
  pointer-events: none;
  z-index: 0;
}

.sb-cta-banner::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 250px;
  height: 94px;
  background: url('assets/images/cta-banner/waves-right.svg') right bottom/contain no-repeat;
  pointer-events: none;
  z-index: 0;
}

.sb-cta-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 18px 28px 18px 112px;
}

.sb-cta-banner__content {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  flex: 1 1 auto;
}

.sb-cta-banner__divider {
  width: 3px;
  min-width: 3px;
  align-self: stretch;
  border-radius: 999px;
  background: var(--sb-cta-accent);
}

.sb-cta-banner__title {
  margin: 0;
  color: var(--sb-cta-text);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.55rem, 1.08rem + 1vw, 2.35rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sb-cta-banner__actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-right: 120px;
}

.sb-cta-banner__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 196px;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sb-cta-accent) 0%, var(--sb-cta-accent-dark) 100%);
  color: #fff;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 10px 24px rgba(var(--sb-rot-rgb), 0.28);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.sb-cta-banner__button:hover,
.sb-cta-banner__button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(var(--sb-rot-rgb), 0.34);
  filter: brightness(1.02);
}

.sb-cta-banner__button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.sb-cta-banner__note {
  margin: 0;
  color: var(--sb-cta-muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.94rem;
  line-height: 1.3;
  font-weight: 600;
}

@media (max-width: 980px) {
  .sb-cta-banner::after {
    width: 180px;
    height: 72px;
  }

  .sb-cta-banner__inner {
    padding: 20px 22px 20px 96px;
    gap: 22px;
  }

  .sb-cta-banner__actions {
    margin-right: 78px;
  }

  .sb-cta-banner__button {
    min-width: 184px;
  }
}

@media (max-width: 760px) {
  .sb-cta-banner::before {
    left: 16px;
    top: 14px;
    width: 74px;
    height: 58px;
  }

  .sb-cta-banner::after {
    width: 156px;
    height: 64px;
    right: -20px;
    bottom: -2px;
    opacity: .9;
  }

  .sb-cta-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 18px 24px 18px;
    gap: 18px;
  }

  .sb-cta-banner__content {
    padding-left: 72px;
    width: 100%;
  }

  .sb-cta-banner__divider {
    min-height: 56px;
  }

  .sb-cta-banner__actions {
    width: 100%;
    align-items: flex-start;
    margin-right: 0;
    padding-left: 72px;
  }
}

@media (max-width: 540px) {
  .sb-cta-banner {
    border-radius: 18px;
  }

  .sb-cta-banner__content {
    gap: 14px;
    padding-left: 58px;
  }

  .sb-cta-banner__actions {
    padding-left: 58px;
  }

  .sb-cta-banner__button {
    width: 100%;
    min-width: 0;
  }

  .sb-cta-banner__title {
    font-size: 1.38rem;
  }

  .sb-cta-banner__note {
    font-size: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sb-cta-banner__button {
    transition: none;
  }
}

/* Theme: Serifen-Font wie im uebrigen Design */
.sb-cta-banner__title { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; }

/* =========================================================================
   Zusammenarbeits-Schritte (Paket: soniabonolo-workflow-section)
   Original-CSS 1:1; Asset-Pfade → assets/images/workflow/, :root gescoped.
   ========================================================================= */
.sb-workflow {
  --sb-wf-navy: var(--sb-schrift);
  --sb-wf-text: var(--sb-schrift-soft);
  --sb-wf-accent: var(--sb-rot);
  --sb-wf-surface: #ffffff;
  --sb-wf-bg: #fffaf9;
  --sb-wf-border: rgba(20, 40, 87, 0.08);
  --sb-wf-shadow: 0 12px 28px rgba(20, 40, 87, 0.08);
  --sb-wf-line: linear-gradient(90deg, #163c88 0%, #34286c 45%, #8c2a57 75%, var(--sb-rot) 100%);
}

.sb-workflow {
  position: relative;
  overflow: hidden;
  padding: 88px 24px 78px;
  background: #fff;
  isolation: isolate;
}

.sb-workflow::before,
.sb-workflow::after {
  content: "";
  position: absolute;
  top: 48px;
  width: 140px;
  height: 124px;
  background: url('assets/images/workflow/dots-grid.svg') center/contain no-repeat;
  z-index: 0;
  pointer-events: none;
}

.sb-workflow::before { left: 18px; }
.sb-workflow::after { right: 18px; }

.sb-workflow__waves,
.sb-workflow__waves::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 126px;
  bottom: 180px;
  z-index: 0;
  pointer-events: none;
}
.sb-workflow__waves {
  left: -48px;
  background: url('assets/images/workflow/waves-left.svg') left center/contain no-repeat;
}
.sb-workflow__waves::before {
  right: -48px;
  background: url('assets/images/workflow/waves-right.svg') right center/contain no-repeat;
}

.sb-workflow__container {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
}

.sb-workflow__header {
  max-width: 820px;
  margin: 0 auto 40px;
  text-align: center;
}

.sb-workflow__eyebrow {
  margin: 0 0 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sb-wf-accent);
}

.sb-workflow__title {
  margin: 0;
  color: var(--sb-wf-navy);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.15rem, 1.5rem + 2.1vw, 3.65rem);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -.025em;
}

.sb-workflow__subtitle {
  margin: 16px 0 0;
  color: var(--sb-schrift-soft);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, .92rem + .45vw, 1.35rem);
  line-height: 1.45;
}

.sb-workflow__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding-top: 8px;
}

.sb-workflow__steps::before {
  content: "";
  position: absolute;
  top: 66px;
  left: 9%;
  right: 9%;
  height: 8px;
  border-radius: 999px;
  background: var(--sb-wf-line);
  z-index: 0;
}

.sb-workflow__step {
  position: relative;
  padding-top: 8px;
}

.sb-workflow__step:not(:last-child)::after {
  content: "\2192"; /* Pfeil als Escape — robust gegen falsche Zeichensatz-Interpretation */
  position: absolute;
  top: 44px;
  right: -21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(20, 40, 87, 0.12);
  color: #76829a;
  font: 700 1.25rem/1 Arial, Helvetica, sans-serif;
  box-shadow: 0 4px 12px rgba(20, 40, 87, 0.08);
  z-index: 3;
}

.sb-workflow__node {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  margin-bottom: 20px;
}

.sb-workflow__badge {
  position: absolute;
  z-index: 4;
  top: -10px;
  left: 50%;
  transform: translateX(26px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sb-rot) 0%, var(--sb-rot) 100%);
  color: #fff;
  font: 700 1rem/1 Arial, Helvetica, sans-serif;
  box-shadow: 0 10px 18px rgba(var(--sb-rot-rgb), 0.25);
}

.sb-workflow__icon-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(var(--sb-rot-rgb), 0.16);
  box-shadow: 0 0 0 6px rgba(var(--sb-rot-rgb), 0.05);
}

.sb-workflow__icon-ring::after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 50%;
  width: 0;
  height: 24px;
  border-left: 2px dotted rgba(108, 127, 161, 0.35);
  transform: translateX(-50%);
}

.sb-workflow__icon {
  width: 72px;
  height: 72px;
  display: block;
  object-fit: contain;
}

.sb-workflow__card {
  min-height: 188px;
  padding: 22px 18px 18px;
  border-radius: 18px;
  background: var(--sb-wf-surface);
  border: 1px solid var(--sb-wf-border);
  box-shadow: var(--sb-wf-shadow);
  text-align: center;
}

.sb-workflow__card-title {
  margin: 0;
  color: var(--sb-wf-navy);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.55rem, 1.15rem + .5vw, 1.95rem);
  line-height: 1.14;
  font-weight: 500;
}

.sb-workflow__card-text {
  margin: 12px 0 0;
  color: var(--sb-wf-text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.02rem;
  line-height: 1.55;
}

.sb-workflow__cta {
  margin-top: 32px;
  text-align: center;
}

.sb-workflow__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 184px;
  min-height: 56px;
  padding: 14px 30px;
  border-radius: 999px;
  border: 2px solid rgba(var(--sb-rot-rgb), 0.55);
  background: #fff;
  color: var(--sb-wf-accent);
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 10px 24px rgba(var(--sb-rot-rgb), 0.08);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.sb-workflow__button:hover,
.sb-workflow__button:focus-visible {
  transform: translateY(-1px);
  background: rgba(var(--sb-rot-rgb), 0.04);
  box-shadow: 0 14px 28px rgba(var(--sb-rot-rgb), 0.12);
}

.sb-workflow__button:focus-visible {
  outline: 2px solid var(--sb-wf-accent);
  outline-offset: 3px;
}

.sb-workflow__note {
  margin: 14px 0 0;
  color: var(--sb-schrift-soft);
  font-family: Arial, Helvetica, sans-serif;
  font-size: .97rem;
  line-height: 1.45;
}

@media (max-width: 1080px) {
  .sb-workflow__steps {
    gap: 14px;
  }
  .sb-workflow__step:not(:last-child)::after { right: -15px; }
  .sb-workflow__icon-ring { width: 108px; height: 108px; }
  .sb-workflow__icon { width: 64px; height: 64px; }
}

@media (max-width: 860px) {
  .sb-workflow {
    padding: 78px 16px 68px;
  }

  .sb-workflow::before,
  .sb-workflow::after {
    width: 108px;
    height: 96px;
    top: 28px;
  }

  .sb-workflow::before { left: 6px; }
  .sb-workflow::after { right: 6px; }

  .sb-workflow__waves,
  .sb-workflow__waves::before {
    width: 220px;
    height: 84px;
    bottom: auto;
    top: 122px;
    opacity: .75;
  }

  .sb-workflow__waves { left: auto; right: -80px; background-position: right top; }
  .sb-workflow__waves::before { display: none; }

  .sb-workflow__header {
    max-width: 360px;
    margin-bottom: 28px;
  }

  .sb-workflow__steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-left: 0;
    padding-top: 4px;
  }

  .sb-workflow__steps::before {
    top: 22px;
    bottom: 22px;
    left: 19px;
    right: auto;
    width: 3px;
    height: auto;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--sb-rot) 0%, var(--sb-rot) 100%);
  }

  .sb-workflow__step {
    padding-top: 0;
    padding-left: 0;
  }

  .sb-workflow__step::after { display: none; }

  .sb-workflow__node {
    position: absolute;
    left: 0;
    top: 14px;
    margin: 0;
    z-index: 3;
  }

  .sb-workflow__badge {
    top: -8px;
    left: 0;
    transform: none;
    min-width: 40px;
    height: 40px;
  }

  .sb-workflow__icon-ring {
    width: 102px;
    height: 102px;
    position: absolute;
    left: 44px;
    top: 0;
    box-shadow: none;
    background: #fff;
  }

  .sb-workflow__icon-ring::after { display: none; }
  .sb-workflow__icon { width: 66px; height: 66px; }

  .sb-workflow__card {
    position: relative;
    min-height: 140px;
    display: flex;
    align-items: center;
    padding: 24px 18px 24px 154px;
    text-align: left;
  }

  .sb-workflow__card::before {
    content: "";
    position: absolute;
    left: 98px;
    top: 28px;
    width: 40px;
    height: 76px;
    background: url('assets/images/workflow/dots-grid.svg') center/contain no-repeat;
    opacity: .5;
    transform: translateX(-50%);
  }

  .sb-workflow__content {
    position: relative;
    z-index: 1;
  }

  .sb-workflow__card-title {
    font-size: 1.55rem;
  }

  .sb-workflow__card-text {
    font-size: 1rem;
    margin-top: 10px;
  }

  .sb-workflow__cta {
    margin-top: 24px;
  }
}

@media (max-width: 520px) {
  .sb-workflow {
    padding-inline: 12px;
  }

  .sb-workflow::before,
  .sb-workflow::after {
    width: 96px;
    height: 84px;
  }

  .sb-workflow__title {
    font-size: 2rem;
  }

  .sb-workflow__subtitle {
    font-size: 1rem;
  }

  .sb-workflow__steps::before {
    left: 17px;
  }

  .sb-workflow__badge {
    min-width: 36px;
    height: 36px;
    font-size: .98rem;
  }

  .sb-workflow__icon-ring {
    width: 82px;
    height: 82px;
    left: 40px;
  }

  .sb-workflow__icon { width: 50px; height: 50px; }

  .sb-workflow__card {
    min-height: 128px;
    padding: 20px 16px 20px 136px;
    border-radius: 16px;
  }

  .sb-workflow__card::before {
    left: 88px;
    width: 34px;
    height: 68px;
  }

  .sb-workflow__card-title {
    font-size: 1.38rem;
  }

  .sb-workflow__button {
    width: 100%;
    max-width: 260px;
  }

  .sb-workflow__note {
    font-size: .92rem;
    max-width: 270px;
    margin-inline: auto;
  }
}

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

/* Theme: Serifen-Font wie im uebrigen Design + heller Seitenhintergrund */
.sb-workflow__title, .sb-workflow__card-title { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; }
.sb-workflow { background: #fcfbf9; }

/* =========================================================================
   Fix: horizontaler Ueberlauf auf Mobil.
   Die Deko der Service-Section (Punkte right:-2.2rem, Wellen right:-4.5rem)
   ragt ueber den Viewport hinaus — die Stage kappt sie jetzt selbst (so ist
   es auch im Standalone-Demo des Pakets gemeint). Dazu ein globales Netz,
   damit kuenftige Deko-Elemente die Seite nie breiter als den Viewport machen.
   ========================================================================= */
.sb-service-stage { overflow: clip; }

html, body {
    overflow-x: hidden; /* Fallback */
    overflow-x: clip;
}

/* Blog-Uebersicht (home.php im Paket-Design): Pagination + Abstand */
.sb-blog--archive .navigation.pagination { display: block; text-align: center; margin-top: 40px; }
.sb-blog--archive .nav-links .page-numbers {
    display: inline-block; padding: 10px 18px; margin: 0 4px;
    background: #fff; border: 1px solid rgba(20, 40, 87, 0.12); border-radius: 10px;
    color: #142857; text-decoration: none; font-weight: 600;
}
.sb-blog--archive .nav-links .page-numbers.current,
.sb-blog--archive .nav-links .page-numbers:hover { background: var(--sb-rot); border-color: var(--sb-rot); color: #fff; }

/* =========================================================================
   Weitere Dienstleistungen (Paket: soniabonolo-services-section)
   Original-CSS 1:1; Asset-Pfade → assets/images/more-services/, :root gescoped.
   ========================================================================= */
.sb-services {
  --sb-services-navy: var(--sb-schrift);
  --sb-services-text: var(--sb-schrift-soft);
  --sb-services-accent: var(--sb-rot);
  --sb-services-border: rgba(16, 41, 88, 0.08);
  --sb-services-shadow: 0 12px 32px rgba(20, 42, 82, 0.07);
}

.sb-services,
.sb-services * {
  box-sizing: border-box;
}

.sb-services {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 88px 24px 96px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 241, 238, 0.52), transparent 26%),
    #fffdfc;
}

.sb-services::before,
.sb-services::after {
  content: "";
  position: absolute;
  top: 28px;
  width: 154px;
  height: 126px;
  background: url('assets/images/more-services/dots-grid.svg') center/contain no-repeat;
  pointer-events: none;
  z-index: 0;
}

.sb-services::before { left: 18px; }
.sb-services::after { right: 18px; }

.sb-services__decor {
  position: absolute;
  width: 270px;
  height: 310px;
  pointer-events: none;
  z-index: 0;
}

.sb-services__decor--left {
  left: -54px;
  top: 230px;
  background: url('assets/images/more-services/organic-lines-left.svg') center/contain no-repeat;
}

.sb-services__decor--right {
  right: -58px;
  top: 140px;
  background: url('assets/images/more-services/organic-lines-right.svg') center/contain no-repeat;
}

.sb-services__container {
  position: relative;
  z-index: 1;
  width: min(100%, 1180px);
  margin-inline: auto;
}

.sb-services__header {
  max-width: 850px;
  margin: 0 auto 34px;
  text-align: center;
}

.sb-services__eyebrow {
  margin: 0 0 12px;
  color: var(--sb-services-accent);
  font: 700 13px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.sb-services__title {
  margin: 0;
  color: var(--sb-services-navy);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.2rem, 1.55rem + 2vw, 3.6rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.sb-services__subtitle {
  margin: 13px 0 0;
  color: var(--sb-schrift-soft);
  font: 400 clamp(1rem, 0.93rem + 0.2vw, 1.15rem)/1.5 Arial, Helvetica, sans-serif;
}

.sb-services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.sb-services__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(210px, 1.1fr);
  align-items: center;
  min-height: 250px;
  overflow: hidden;
  padding: 22px 18px 18px 26px;
  border: 1px solid var(--sb-services-border);
  border-radius: 19px;
  box-shadow: var(--sb-services-shadow);
}

.sb-services__card--warm {
  background: linear-gradient(135deg, #fffdfc 0%, #fff6f3 100%);
}

.sb-services__card--rose {
  background: linear-gradient(135deg, #fffefd 0%, #fff8f5 100%);
}

.sb-services__card--blue {
  background: linear-gradient(135deg, #fcfeff 0%, #eef6fc 100%);
}

.sb-services__card--peach {
  background:
    radial-gradient(circle at 85% 18%, rgba(var(--sb-rot-rgb), 0.18), transparent 24%),
    linear-gradient(135deg, #fffefd 0%, #fff7f2 100%);
}

.sb-services__copy {
  position: relative;
  z-index: 2;
  align-self: center;
}

.sb-services__number {
  display: inline-block;
  margin-bottom: 5px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(var(--sb-rot-rgb), 0.6);
  color: var(--sb-services-accent);
  font: 500 1.15rem/1 Georgia, 'Times New Roman', serif;
}

.sb-services__small-icon {
  display: block;
  width: 34px;
  height: 34px;
  margin: 7px 0 8px;
}

.sb-services__card-title {
  margin: 0 0 10px;
  color: var(--sb-services-navy);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.55rem, 1.28rem + 0.4vw, 1.95rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.sb-services__text {
  margin: 0;
  color: var(--sb-services-text);
  font: 400 0.93rem/1.48 Arial, Helvetica, sans-serif;
}

.sb-services__visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 0;
}

.sb-services__visual img {
  display: block;
  width: min(100%, 245px);
  height: auto;
  max-height: 218px;
  object-fit: contain;
}

@media (max-width: 980px) {
  .sb-services {
    padding-inline: 18px;
  }

  .sb-services__grid {
    grid-template-columns: 1fr;
  }

  .sb-services__card {
    grid-template-columns: minmax(0, 0.92fr) minmax(250px, 1.08fr);
    min-height: 255px;
  }

  .sb-services__text {
    font-size: 0.98rem;
  }
}

@media (max-width: 640px) {
  .sb-services {
    padding: 64px 14px 72px;
  }

  .sb-services::before,
  .sb-services::after {
    width: 94px;
    height: 78px;
    top: 22px;
    opacity: 0.85;
  }

  .sb-services::before { left: 6px; }
  .sb-services::after {
    right: 6px;
    top: 345px;
  }

  .sb-services__decor--left {
    left: -90px;
    top: 74px;
    width: 210px;
    height: 250px;
  }

  .sb-services__decor--right {
    right: -108px;
    top: 0;
    width: 245px;
    height: 290px;
  }

  .sb-services__header {
    max-width: 390px;
    margin-bottom: 26px;
  }

  .sb-services__eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
  }

  .sb-services__title {
    font-size: clamp(2rem, 8.2vw, 2.85rem);
  }

  .sb-services__subtitle {
    font-size: 0.94rem;
    line-height: 1.45;
  }

  .sb-services__grid {
    gap: 12px;
  }

  .sb-services__card {
    grid-template-columns: minmax(0, 0.92fr) minmax(132px, 1.08fr);
    min-height: 272px;
    padding: 17px 12px 15px 16px;
    border-radius: 16px;
  }

  .sb-services__number {
    font-size: 1rem;
    margin-bottom: 3px;
  }

  .sb-services__small-icon {
    width: 30px;
    height: 30px;
    margin-block: 5px 6px;
  }

  .sb-services__card-title {
    margin-bottom: 7px;
    font-size: clamp(1.35rem, 5.3vw, 1.65rem);
  }

  .sb-services__text {
    font-size: clamp(0.76rem, 2.85vw, 0.88rem);
    line-height: 1.42;
  }

  .sb-services__visual img {
    width: min(100%, 190px);
    max-height: 215px;
  }
}

@media (max-width: 355px) {
  .sb-services__card {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 18px;
  }

  .sb-services__visual {
    margin-top: 8px;
  }

  .sb-services__visual img {
    width: min(100%, 220px);
  }
}

/* Theme: Serifen-Font wie im uebrigen Design + Overflow-Schutz */
.sb-services__title, .sb-services__card-title { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; }
.sb-services { overflow: clip; }

/* =========================================================================
   Team-Galerie (Paket: soniabonolo-team-section)
   Original-CSS 1:1; Asset-Pfade → assets/images/team-neu/, :root gescoped.
   ========================================================================= */
.sb-team {
  --sb-team-navy: var(--sb-schrift);
  --sb-team-copy: var(--sb-schrift-soft);
  --sb-team-accent: var(--sb-rot);
  --sb-team-bg: #fffdfc;
  --sb-team-radius: 16px;
}

.sb-team,
.sb-team * {
  box-sizing: border-box;
}

.sb-team {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 62px 24px 66px;
  background:
    radial-gradient(circle at 21% 15%, rgba(255, 243, 239, .44), transparent 28%),
    var(--sb-team-bg);
}

.sb-team::before,
.sb-team::after {
  content: "";
  position: absolute;
  width: 154px;
  height: 126px;
  background: url('assets/images/team-neu/dots-grid.svg') center / contain no-repeat;
  pointer-events: none;
  z-index: 0;
}

.sb-team::before {
  top: 22px;
  left: 14px;
}

.sb-team::after {
  top: 20px;
  right: 14px;
}

.sb-team__decor {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.sb-team__decor--left {
  left: -62px;
  top: 410px;
  width: 250px;
  height: 280px;
  background: url('assets/images/team-neu/organic-lines-left.svg') center / contain no-repeat;
}

.sb-team__decor--right {
  right: -70px;
  top: 132px;
  width: 270px;
  height: 310px;
  background: url('assets/images/team-neu/organic-lines-right.svg') center / contain no-repeat;
}

.sb-team__decor--bottom {
  left: 36%;
  bottom: -28px;
  width: 430px;
  height: 120px;
  background: url('assets/images/team-neu/bottom-wave.svg') center / contain no-repeat;
}

/* Kopf steht ueber der ganzen Section, nicht mehr in der linken Spalte. */
.sb-team__header {
  position: relative;
  z-index: 1;
  width: min(860px, 100%);
  margin: 0 auto 38px;
  text-align: center;
}

.sb-team__header .sb-team__title {
  max-width: none;
}

.sb-team__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(340px, .77fr) minmax(580px, 1.23fr);
  gap: clamp(42px, 5vw, 78px);
  align-items: start;
  width: min(100%, 1180px);
  margin-inline: auto;
}

.sb-team__copy {
  padding-top: 0;
}

.sb-team__eyebrow {
  margin: 0 0 15px;
  color: var(--sb-team-accent);
  font: 700 12px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.sb-team__title {
  max-width: 500px;
  margin: 0;
  color: var(--sb-team-navy);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.35rem, 1.85rem + 1.25vw, 3rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.sb-team__intro,
.sb-team__body,
.sb-team__promise {
  color: var(--sb-team-copy);
  font-family: Arial, Helvetica, sans-serif;
}

.sb-team__intro {
  max-width: 475px;
  margin: 21px 0 0;
  font-size: 1rem;
  line-height: 1.55;
}

.sb-team__promise {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 12px 0 0;
  padding: 10px 0 9px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
}

.sb-team__promise::before,
.sb-team__promise::after {
  content: "";
  position: absolute;
  left: 0;
  width: min(100%, 460px);
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--sb-rot-rgb), .9), rgba(var(--sb-rot-rgb), .25));
}

.sb-team__promise::before { top: 0; }
.sb-team__promise::after { bottom: 0; }

.sb-team__body {
  max-width: 500px;
  margin: 17px 0 0;
  font-size: 1rem;
  line-height: 1.62;
}

.sb-team__experience {
  display: grid;
  grid-template-columns: 88px 1px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  width: min(100%, 390px);
  min-height: 132px;
  margin-top: 26px;
  padding: 20px 24px 20px 20px;
  overflow: hidden;
  border-radius: 15px;
  background:
    radial-gradient(circle at 94% 14%, rgba(var(--sb-rot-rgb), .82), transparent 36%),
    linear-gradient(105deg, #102b61 0%, #25245e 45%, #742452 100%);
  box-shadow: 0 14px 28px rgba(22, 39, 78, .13);
  color: #fff;
}

.sb-team__experience-icon {
  display: block;
  width: 82px;
  height: 82px;
}

.sb-team__experience-rule {
  align-self: stretch;
  background: rgba(255, 255, 255, .38);
}

.sb-team__experience-number {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3rem;
  font-weight: 500;
  line-height: .95;
}

/* Steht statt einer Zahl ein Wort im Feld, wuerde die Zahlengroesse aus der
   Karte laufen — deshalb kleiner setzen und umbrechen lassen. */
.sb-team__experience-number--word {
  font-size: 1.9rem;
  line-height: 1.08;
  overflow-wrap: break-word;
  hyphens: auto;
}

.sb-team__experience-title {
  display: block;
  margin-top: 6px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.32rem;
  line-height: 1.1;
}

.sb-team__experience-note {
  display: block;
  margin-top: 8px;
  color: rgba(255, 245, 241, .9);
  font: 600 .78rem/1.35 Arial, Helvetica, sans-serif;
}

.sb-team__gallery-heading {
  margin: 0 0 14px;
  color: var(--sb-team-accent);
  font: 700 12px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.sb-team__gallery-grid {
  display: grid;
  grid-template-columns: 1.35fr .82fr .82fr;
  grid-template-rows: repeat(3, 174px);
  gap: 8px;
}

.sb-team__photo {
  position: relative;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--sb-team-radius);
  background: #eaf0f5;
  box-shadow: 0 5px 14px rgba(16, 41, 88, .05);
}

.sb-team__photo img,
.sb-team__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.sb-team__photo img {
  object-fit: cover;
}

.sb-team__photo--main {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.sb-team__photo--main img { object-position: center center; }
/* Gesicht sitzt im oberen Bildviertel — Ausschnitt nach oben, sonst wird der Kopf abgeschnitten */
.sb-team__photo--armchair img { object-position: 50% 18%; }
.sb-team__photo--red-phone { grid-column: 2; grid-row: 1; }
.sb-team__photo--glasses-phone { grid-column: 3; grid-row: 1; }
.sb-team__photo--blazer { grid-column: 2; grid-row: 2; }
.sb-team__photo--white { grid-column: 3; grid-row: 2; }
.sb-team__photo--armchair { grid-column: 1; grid-row: 3; }
.sb-team__photo--red-blouse { grid-column: 2; grid-row: 3; }
.sb-team__photo--green { grid-column: 3; grid-row: 3; }

@media (max-width: 1040px) {
  .sb-team__container {
    grid-template-columns: 1fr;
    gap: 42px;
    max-width: 760px;
  }

  .sb-team__copy { padding-top: 0; }
  .sb-team__experience { width: min(100%, 440px); }
  .sb-team__gallery-grid { grid-template-rows: repeat(3, 190px); }
}

@media (max-width: 680px) {
  .sb-team {
    padding: 18px clamp(18px, 12.5vw, 48px) 46px;
  }

  .sb-team::before,
  .sb-team::after {
    width: 88px;
    height: 72px;
  }

  .sb-team::before {
    top: 172px;
    left: -8px;
  }

  .sb-team::after {
    top: 0;
    right: 2px;
  }

  .sb-team__decor--left {
    left: -98px;
    top: 690px;
    width: 210px;
    height: 240px;
  }

  .sb-team__decor--right {
    right: -116px;
    top: 220px;
    width: 250px;
    height: 285px;
  }

  .sb-team__decor--bottom {
    left: -70px;
    bottom: -34px;
    width: 330px;
    height: 100px;
  }

  .sb-team__container {
    gap: 30px;
  }

  .sb-team__eyebrow,
  .sb-team__gallery-heading {
    font-size: 10px;
    letter-spacing: .2em;
  }

  .sb-team__title {
    font-size: clamp(1.72rem, 8vw, 2rem);
    line-height: 1.02;
  }

  .sb-team__intro {
    margin-top: 14px;
    font-size: .78rem;
    line-height: 1.5;
  }

  .sb-team__promise {
    margin-top: 8px;
    padding-block: 8px;
    font-size: .78rem;
  }

  .sb-team__body {
    margin-top: 13px;
    font-size: .78rem;
    line-height: 1.48;
  }

  .sb-team__experience {
    grid-template-columns: 58px 1px minmax(0, 1fr);
    gap: 14px;
    min-height: 92px;
    margin-top: 17px;
    padding: 12px 14px;
    border-radius: 12px;
  }

  .sb-team__experience-icon {
    width: 56px;
    height: 56px;
  }

  .sb-team__experience-number { font-size: 2.15rem; }
  .sb-team__experience-number--word { font-size: 1.5rem; }
  .sb-team__experience-title { font-size: .96rem; }
  .sb-team__experience-note { font-size: .58rem; }

  .sb-team__gallery-heading {
    margin-bottom: 8px;
  }

  .sb-team__gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 6px;
  }

  .sb-team__photo {
    grid-column: auto;
    grid-row: auto;
    border-radius: 9px;
    aspect-ratio: 1.48 / 1;
  }

  .sb-team__photo--main {
    grid-column: 1 / -1;
    aspect-ratio: 1.98 / 1;
  }

  .sb-team__photo--main img { object-position: center center; }

  .sb-team__photo--green {
    grid-column: 1 / -1;
    aspect-ratio: 4.35 / 1;
  }

  .sb-team__photo--green img { object-position: center 46%; }
}

@media (max-width: 360px) {
  .sb-team__experience {
    grid-template-columns: 58px 1px minmax(0, 1fr);
    gap: 12px;
    padding-inline: 12px;
  }

  .sb-team__experience-icon {
    width: 56px;
    height: 56px;
  }
}

/* Theme: Serifen-Font wie im uebrigen Design */
.sb-team__title { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; }

/* =========================================================================
   Standort mit Schweiz-Karte (Paket: soniabonolo-location-section)
   Original-CSS 1:1; Asset-Pfade → assets/images/location/, :root gescoped.
   ========================================================================= */
.sb-location {
  --sb-location-navy: var(--sb-schrift);
  --sb-location-blue: #06367d;
  --sb-location-purple: #4d1b62;
  --sb-location-coral: var(--sb-rot);
  --sb-location-paper: #fbfaf8;
  --sb-location-text: var(--sb-schrift-soft);
}

.sb-location,
.sb-location * {
  box-sizing: border-box;
}

.sb-location {
  position: relative;
  overflow: clip;
  padding: 82px 24px 88px;
  background: var(--sb-location-paper);
  isolation: isolate;
}

.sb-location::before,
.sb-location::after {
  content: "";
  position: absolute;
  top: 28px;
  width: 106px;
  height: 126px;
  background: url("assets/images/location/dots-grid.svg") center/contain no-repeat;
  opacity: .82;
  pointer-events: none;
  z-index: -1;
}

.sb-location::before { left: 24px; }
.sb-location::after { right: 24px; }

.sb-location__container {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}

.sb-location__container::before {
  content: "";
  position: absolute;
  right: -130px;
  top: 54px;
  width: 260px;
  height: 130px;
  background: url("assets/images/location/leaf-line.svg") center/contain no-repeat;
  pointer-events: none;
  opacity: .9;
}

.sb-location__container::after {
  content: "";
  position: absolute;
  left: 116px;
  bottom: -63px;
  width: 500px;
  height: 76px;
  background: url("assets/images/location/bottom-wave.svg") center/contain no-repeat;
  pointer-events: none;
}

.sb-location__header {
  max-width: 920px;
  margin: 0 0 28px 76px;
}

.sb-location__eyebrow,
.sb-location__map-kicker,
.sb-location__info-eyebrow {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .19em;
  color: var(--sb-location-coral);
}

.sb-location__eyebrow {
  margin-bottom: 10px;
  font-size: 13px;
}

.sb-location__title {
  margin: 0;
  color: var(--sb-location-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 1.65rem + 2.1vw, 3.75rem);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -.025em;
}

.sb-location__subtitle {
  margin: 13px 0 0;
  color: #4f5c7c;
  font: 500 1rem/1.5 Arial, Helvetica, sans-serif;
}

.sb-location__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(330px, .92fr);
  min-height: 410px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 15px 34px rgba(23, 43, 78, .11);
  overflow: hidden;
}

.sb-location__map {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #f8f6f0;
}

.sb-location__map picture,
.sb-location__map-image {
  display: block;
  width: 100%;
  height: 100%;
}

.sb-location__map-image {
  object-fit: cover;
  object-position: center;
  filter: saturate(.94) contrast(.99);
}

.sb-location__map-kicker {
  position: absolute;
  z-index: 5;
  top: 18px;
  left: 22px;
  font-size: 9px;
  line-height: 1;
}

.sb-location__routes {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sb-location__route-line {
  fill: none;
  stroke: var(--sb-rot);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-dasharray: 3.6 4.6;
  opacity: .78;
  vector-effect: non-scaling-stroke;
}

.sb-location__route-reveal {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.sb-location__route-point {
  fill: var(--sb-rot);
  stroke: #fff7f2;
  stroke-width: 1.3;
  transform-box: fill-box;
  transform-origin: center;
}

.sb-location__marker {
  position: absolute;
  z-index: 7;
  left: 77.1%;
  top: 13.9%;
  width: clamp(34px, 6.4%, 48px);
  aspect-ratio: 48 / 58;
  transform: translate(-50%, -60%);
  filter: drop-shadow(0 8px 10px rgba(166, 42, 42, .25));
  pointer-events: none;
}

.sb-location__marker svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sb-location__popover {
  position: absolute;
  z-index: 6;
  top: 19.5%;
  left: 75.2%;
  width: min(21.5%, 150px);
  padding: 10px 12px;
  border: 1px solid rgba(12, 48, 106, .13);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 7px 15px rgba(29, 43, 72, .13);
  color: var(--sb-location-navy);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.25;
  transform-origin: 8% 10%;
  backdrop-filter: blur(5px);
}

.sb-location__popover::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 15px;
  width: 12px;
  height: 12px;
  border-left: 1px solid rgba(12, 48, 106, .13);
  border-top: 1px solid rgba(12, 48, 106, .13);
  background: rgba(255,255,255,.94);
  transform: rotate(45deg);
}

.sb-location__popover strong,
.sb-location__popover span {
  position: relative;
  display: block;
}

.sb-location__popover strong {
  font-size: clamp(.55rem, .68vw, .75rem);
  font-weight: 700;
}

.sb-location__popover span {
  margin-top: 3px;
  font-size: clamp(.5rem, .61vw, .68rem);
  color: var(--sb-schrift-soft);
}

.sb-location__info {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 38px 28px;
  color: #fff;
  background:
    radial-gradient(circle at 96% 92%, rgba(var(--sb-rot-rgb), .68), transparent 31%),
    linear-gradient(145deg, #06357c 0%, #172b70 44%, #4b1c61 100%);
}

.sb-location__info-eyebrow {
  margin-bottom: 9px;
  font-size: 10px;
  color: var(--sb-rot);
}

.sb-location__info-title {
  margin: 0 0 14px;
  color: #fff9f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 1.35rem + .7vw, 2.25rem);
  line-height: 1.12;
  font-weight: 500;
}

.sb-location__info-text {
  margin: 0 0 10px;
  color: rgba(255, 250, 246, .9);
  font: 400 .93rem/1.46 Arial, Helvetica, sans-serif;
}

.sb-location__benefits {
  margin: 12px 0 18px;
  padding: 0;
  list-style: none;
}

.sb-location__benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  border-top: 1px solid rgba(255,255,255,.27);
  color: rgba(255,255,255,.95);
  font: 600 .86rem/1.3 Arial, Helvetica, sans-serif;
}

.sb-location__benefits li:last-child {
  border-bottom: 1px solid rgba(255,255,255,.27);
}

.sb-location__benefit-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
}

.sb-location__benefit-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sb-location__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-width: 188px;
  min-height: 48px;
  padding: 12px 25px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sb-rot), var(--sb-rot));
  box-shadow: 0 10px 22px rgba(var(--sb-rot-rgb), .28);
  color: #fff;
  text-decoration: none;
  font: 700 .92rem/1 Arial, Helvetica, sans-serif;
  transition: transform .18s ease, box-shadow .18s ease;
}

.sb-location__cta:hover,
.sb-location__cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(var(--sb-rot-rgb), .34);
}

.sb-location__cta:focus-visible {
  outline: 3px solid rgba(255,255,255,.48);
  outline-offset: 3px;
}

.sb-location__note {
  margin: 10px 0 0;
  color: rgba(255,255,255,.85);
  font: 500 .78rem/1.4 Arial, Helvetica, sans-serif;
}

/* Animation is hidden only after JS has initialized, preserving a no-JS fallback. */
.sb-location.is-animation-ready:not(.is-visible) .sb-location__marker {
  opacity: 0;
  transform: translate(-50%, -60%) scale(.2) rotate(-7deg);
}

.sb-location.is-animation-ready:not(.is-visible) .sb-location__popover {
  opacity: 0;
  transform: translateY(8px) scale(.72);
}

.sb-location.is-animation-ready:not(.is-visible) .sb-location__route-reveal {
  stroke-dashoffset: 1;
}

.sb-location.is-animation-ready:not(.is-visible) .sb-location__route-point {
  opacity: 0;
  transform: scale(0);
}

.sb-location.is-visible .sb-location__marker {
  animation: sb-location-marker-pop .68s .08s cubic-bezier(.2, 1.55, .45, 1) both;
}

.sb-location.is-visible .sb-location__popover {
  animation: sb-location-popover-pop .5s .98s cubic-bezier(.2, 1.35, .45, 1) both;
}

.sb-location.is-visible .sb-location__route-reveal--1 { animation: sb-location-route-draw 1.05s .82s ease-out both; }
.sb-location.is-visible .sb-location__route-reveal--2 { animation: sb-location-route-draw .96s .96s ease-out both; }
.sb-location.is-visible .sb-location__route-reveal--3 { animation: sb-location-route-draw 1.08s 1.10s ease-out both; }
.sb-location.is-visible .sb-location__route-reveal--4 { animation: sb-location-route-draw 1.16s 1.23s ease-out both; }
.sb-location.is-visible .sb-location__route-reveal--5 { animation: sb-location-route-draw .92s 1.38s ease-out both; }
.sb-location.is-visible .sb-location__route-reveal--6 { animation: sb-location-route-draw 1.14s 1.52s ease-out both; }

.sb-location.is-visible .sb-location__route-point--1 { animation: sb-location-point-pop .32s 1.74s ease-out both; }
.sb-location.is-visible .sb-location__route-point--2 { animation: sb-location-point-pop .32s 1.80s ease-out both; }
.sb-location.is-visible .sb-location__route-point--3 { animation: sb-location-point-pop .32s 1.98s ease-out both; }
.sb-location.is-visible .sb-location__route-point--4 { animation: sb-location-point-pop .32s 2.21s ease-out both; }
.sb-location.is-visible .sb-location__route-point--5 { animation: sb-location-point-pop .32s 2.14s ease-out both; }
.sb-location.is-visible .sb-location__route-point--6 { animation: sb-location-point-pop .32s 2.54s ease-out both; }

@keyframes sb-location-marker-pop {
  0% { opacity: 0; transform: translate(-50%, -60%) scale(.18) rotate(-7deg); }
  68% { opacity: 1; transform: translate(-50%, -60%) scale(1.13) rotate(2deg); }
  100% { opacity: 1; transform: translate(-50%, -60%) scale(1) rotate(0); }
}

@keyframes sb-location-popover-pop {
  0% { opacity: 0; transform: translateY(8px) scale(.72); }
  72% { opacity: 1; transform: translateY(-1px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sb-location-route-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes sb-location-point-pop {
  0% { opacity: 0; transform: scale(0); }
  70% { opacity: 1; transform: scale(1.35); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 980px) {
  .sb-location__header {
    margin-left: 24px;
  }

  .sb-location__panel {
    grid-template-columns: 1fr;
  }

  .sb-location__map {
    aspect-ratio: 454 / 309;
  }

  .sb-location__info {
    padding: 34px;
  }
}

@media (max-width: 640px) {
  .sb-location {
    padding: 62px 14px 70px;
  }

  .sb-location::before,
  .sb-location::after {
    width: 78px;
    height: 92px;
    top: 22px;
    opacity: .72;
  }

  .sb-location::before { left: 6px; }
  .sb-location::after { right: 6px; }

  .sb-location__container::before {
    right: -96px;
    top: 112px;
    width: 190px;
    height: 95px;
  }

  .sb-location__container::after {
    left: -100px;
    bottom: -50px;
    width: 360px;
    height: 56px;
  }

  .sb-location__header {
    margin: 0 16px 24px;
    text-align: center;
  }

  .sb-location__eyebrow {
    font-size: 11px;
  }

  .sb-location__title {
    font-size: clamp(2rem, 8.6vw, 2.75rem);
    line-height: 1.08;
  }

  .sb-location__subtitle {
    font-size: .94rem;
  }

  .sb-location__panel {
    border-radius: 16px;
  }

  .sb-location__map-kicker {
    top: 10px;
    left: 12px;
    font-size: 7px;
    letter-spacing: .16em;
  }

  .sb-location__marker {
    width: 34px;
  }

  .sb-location__popover {
    top: 19%;
    left: 73.2%;
    width: 24.5%;
    padding: 7px 8px;
    border-radius: 6px;
  }

  .sb-location__popover strong {
    font-size: clamp(.42rem, 1.8vw, .58rem);
  }

  .sb-location__popover span {
    font-size: clamp(.38rem, 1.55vw, .51rem);
  }

  .sb-location__info {
    padding: 30px 24px 26px;
  }

  .sb-location__info-title {
    font-size: 1.9rem;
  }

  .sb-location__cta {
    width: 100%;
    min-height: 52px;
    align-self: stretch;
  }

  .sb-location__note {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sb-location__marker,
  .sb-location__popover,
  .sb-location__route-reveal,
  .sb-location__route-point,
  .sb-location__cta {
    animation: none !important;
    transition: none !important;
  }

  .sb-location.is-animation-ready .sb-location__marker,
  .sb-location.is-animation-ready .sb-location__popover,
  .sb-location.is-animation-ready .sb-location__route-point {
    opacity: 1 !important;
  }

  .sb-location.is-animation-ready .sb-location__marker {
    transform: translate(-50%, -60%) !important;
  }

  .sb-location.is-animation-ready .sb-location__popover {
    transform: none !important;
  }

  .sb-location.is-animation-ready .sb-location__route-reveal {
    stroke-dashoffset: 0 !important;
  }

  .sb-location.is-animation-ready .sb-location__route-point {
    transform: scale(1) !important;
  }
}

/* Theme: Serifen-Font wie im uebrigen Design */
.sb-location__title, .sb-location__info-title { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; }

/* =========================================================================
   FAQ Startseite (Paket: soniabonolo-faq-section)
   Original-CSS 1:1; Asset-Pfade → assets/images/faq/, :root gescoped.
   ========================================================================= */
.sb-faq {
  --sb-faq-navy: var(--sb-schrift);
  --sb-faq-copy: var(--sb-schrift-soft);
  --sb-faq-accent: var(--sb-rot);
  --sb-faq-bg: #fbfaf8;
  --sb-faq-card: #ffffff;
  --sb-faq-shadow: 0 8px 24px rgba(21, 37, 73, 0.07);
  --sb-faq-border: rgba(20, 43, 91, 0.08);
}

.sb-faq,
.sb-faq * {
  box-sizing: border-box;
}

.sb-faq {
  position: relative;
  overflow: hidden;
  padding: 104px 24px 88px;
  background:
    radial-gradient(circle at 52% 8%, rgba(255,255,255,.95), transparent 32%),
    var(--sb-faq-bg);
  color: var(--sb-faq-navy);
  isolation: isolate;
}

/* Kopf steht ueber der ganzen Section, nicht mehr in der linken Spalte. */
.sb-faq__header {
  position: relative;
  z-index: 2;
  width: min(860px, 100%);
  margin: 0 auto 40px;
  text-align: center;
}

.sb-faq__container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
  grid-template-areas: "contact list";
  column-gap: clamp(48px, 6vw, 92px);
  row-gap: 28px;
  align-items: start;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.sb-faq__eyebrow {
  margin: 0 0 16px;
  font: 700 13px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sb-faq-accent);
}

.sb-faq__title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.65rem, 2.1rem + 1.05vw, 3.35rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.sb-faq__lead {
  max-width: 330px;
  margin: 24px 0 0;
  color: var(--sb-faq-copy);
  font: 400 1rem/1.65 Arial, Helvetica, sans-serif;
}

.sb-faq__list-wrap {
  grid-area: list;
  min-width: 0;
}

.sb-faq__list {
  display: grid;
  gap: 12px;
}

.sb-faq__item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--sb-faq-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--sb-faq-shadow);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.sb-faq__item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--sb-faq-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s ease;
}

.sb-faq__item.is-open {
  box-shadow: 0 12px 30px rgba(21, 37, 73, 0.09);
}

.sb-faq__item.is-open::before {
  transform: scaleY(1);
}

.sb-faq__question-heading {
  margin: 0;
  font-size: inherit;
}

.sb-faq__question {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 18px;
  align-items: center;
  width: 100%;
  min-height: 66px;
  padding: 18px 22px 18px 28px;
  border: 0;
  background: transparent;
  color: var(--sb-faq-navy);
  text-align: left;
  cursor: pointer;
  font: 400 1.2rem/1.3 Georgia, "Times New Roman", serif;
}

.sb-faq__question:hover .sb-faq__toggle,
.sb-faq__question:focus-visible .sb-faq__toggle {
  transform: scale(1.06);
}

.sb-faq__question:focus {
  /* Kein Browser-Standard-Fokusring (blau) beim Klicken */
  outline: none;
}

.sb-faq__question:focus-visible {
  outline: 3px solid rgba(var(--sb-rot-rgb), .22);
  outline-offset: -3px;
}

.sb-faq__toggle {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff5f2;
  transition: transform .2s ease, background .2s ease;
}

.sb-faq__toggle::before,
.sb-faq__toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1.8px;
  border-radius: 999px;
  background: var(--sb-faq-accent);
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .2s ease, background .2s ease;
}

.sb-faq__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.sb-faq__item.is-open .sb-faq__toggle {
  background: var(--sb-faq-accent);
}

.sb-faq__item.is-open .sb-faq__toggle::before,
.sb-faq__item.is-open .sb-faq__toggle::after {
  background: #fff;
}

.sb-faq__item.is-open .sb-faq__toggle::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.sb-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .34s ease, opacity .28s ease;
}

.sb-faq__item.is-open .sb-faq__answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.sb-faq__answer-inner {
  min-height: 0;
  overflow: hidden;
}

.sb-faq__answer p {
  margin: 0;
  padding: 0 74px 24px 28px;
  color: var(--sb-faq-copy);
  font: 400 .98rem/1.62 Arial, Helvetica, sans-serif;
}

.sb-faq__hint {
  margin: 16px 0 0;
  color: var(--sb-schrift-soft);
  font: 400 .88rem/1.45 Arial, Helvetica, sans-serif;
}

.sb-faq__contact {
  grid-area: contact;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 4px 14px;
  align-items: center;
  min-height: 264px;
  padding: 25px 25px 24px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 100%, rgba(var(--sb-rot-rgb), .94), transparent 42%),
    linear-gradient(135deg, #082766 0%, #241b63 52%, #7b2857 100%);
  color: #fff;
  box-shadow: 0 13px 30px rgba(17, 37, 88, .14);
}

.sb-faq__contact::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -64px;
  height: 120px;
  border: 1px solid rgba(var(--sb-rot-rgb), .44);
  border-radius: 50%;
  transform: rotate(-7deg);
  pointer-events: none;
}

.sb-faq__contact-icon {
  width: 88px;
  height: 88px;
  object-fit: contain;
}

.sb-faq__contact-copy h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.95rem;
  font-weight: 400;
  line-height: 1.03;
}

.sb-faq__contact-copy p {
  margin: 10px 0 0;
  color: rgba(255,255,255,.9);
  font: 600 .92rem/1.4 Arial, Helvetica, sans-serif;
}

.sb-faq__contact-button {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 180px);
  min-height: 46px;
  margin-top: 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sb-rot) 0%, var(--sb-rot) 100%);
  color: #fff;
  text-decoration: none;
  font: 700 .93rem/1 Arial, Helvetica, sans-serif;
  box-shadow: 0 10px 20px rgba(var(--sb-rot-rgb), .22);
  transition: transform .2s ease, box-shadow .2s ease;
}

.sb-faq__contact-button:hover,
.sb-faq__contact-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 13px 23px rgba(var(--sb-rot-rgb), .3);
}

.sb-faq__contact-button:focus-visible {
  outline: 3px solid rgba(255,255,255,.6);
  outline-offset: 3px;
}

.sb-faq__decor {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
}

.sb-faq__decor--dots-top {
  top: 20px;
  left: 12px;
  width: 116px;
  height: 136px;
  background-image: url("assets/images/faq/dots-grid.svg");
  opacity: .82;
}

.sb-faq__decor--dots-bottom {
  right: 4px;
  bottom: 22px;
  width: 112px;
  height: 150px;
  background-image: url("assets/images/faq/dots-grid.svg");
  opacity: .78;
}

.sb-faq__decor--botanical {
  left: 0;
  bottom: -16px;
  width: 520px;
  height: 250px;
  background-image: url("assets/images/faq/botanical-line.svg");
  background-size: 100% 100%;
}

@media (max-width: 980px) {
  .sb-faq {
    padding: 82px 20px 74px;
  }

  .sb-faq__container {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    column-gap: 36px;
  }

  .sb-faq__question {
    font-size: 1.08rem;
  }

  .sb-faq__contact {
    grid-template-columns: 72px minmax(0,1fr);
    padding: 22px;
  }

  .sb-faq__contact-icon {
    width: 72px;
    height: 72px;
  }

  .sb-faq__contact-copy h3 {
    font-size: 1.65rem;
  }
}

@media (max-width: 760px) {
  .sb-faq {
    padding: 54px 16px 64px;
  }

  .sb-faq__header {
    margin-bottom: 24px;
    width: min(520px, 100%);
  }

  .sb-faq__container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "list"
      "contact";
    gap: 24px;
    width: min(520px, 100%);
  }

  .sb-faq__lead {
    max-width: none;
  }

  .sb-faq__eyebrow {
    margin-bottom: 12px;
    font-size: 12px;
  }

  .sb-faq__title {
    font-size: clamp(2.35rem, 10.5vw, 3.35rem);
    line-height: 1.08;
  }

  .sb-faq__lead {
    margin-top: 17px;
    font-size: .96rem;
    line-height: 1.55;
  }

  .sb-faq__list-wrap {
    margin-top: 2px;
  }

  .sb-faq__list {
    gap: 8px;
  }

  .sb-faq__item {
    border-radius: 8px;
  }

  .sb-faq__question {
    grid-template-columns: minmax(0, 1fr) 32px;
    gap: 13px;
    min-height: 58px;
    padding: 15px 12px 15px 16px;
    font-size: 1.02rem;
    line-height: 1.25;
  }

  .sb-faq__toggle {
    width: 30px;
    height: 30px;
  }

  .sb-faq__answer p {
    padding: 0 18px 19px 16px;
    font-size: .9rem;
    line-height: 1.55;
  }

  .sb-faq__hint {
    margin-top: 10px;
    font-size: .79rem;
  }

  .sb-faq__contact {
    grid-template-columns: 72px minmax(0, 1fr);
    min-height: 0;
    padding: 20px 20px 18px;
    border-radius: 10px;
  }

  .sb-faq__contact-copy h3 {
    font-size: 1.65rem;
  }

  .sb-faq__contact-copy p {
    margin-top: 6px;
    font-size: .84rem;
  }

  .sb-faq__contact-button {
    width: 150px;
    min-height: 42px;
    margin-top: 8px;
    font-size: .86rem;
  }

  .sb-faq__decor--dots-top {
    top: 8px;
    right: 12px;
    left: auto;
    width: 76px;
    height: 94px;
  }

  .sb-faq__decor--dots-bottom {
    left: 4px;
    right: auto;
    bottom: 40%;
    width: 54px;
    height: 90px;
    opacity: .8;
  }

  .sb-faq__decor--botanical {
    left: auto;
    right: -74px;
    top: 130px;
    bottom: auto;
    width: 260px;
    height: 170px;
    transform: rotate(118deg);
    transform-origin: center;
    opacity: .85;
  }

  .sb-faq::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: -34px;
    bottom: -28px;
    width: 390px;
    height: 120px;
    background: url("assets/images/faq/botanical-line.svg") center/contain no-repeat;
    opacity: .85;
    pointer-events: none;
  }
}

@media (max-width: 380px) {
  .sb-faq__title {
    font-size: 2.18rem;
  }

  .sb-faq__question {
    font-size: .96rem;
  }

  .sb-faq__contact {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .sb-faq__contact-icon {
    width: 62px;
    height: 62px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sb-faq__item,
  .sb-faq__item::before,
  .sb-faq__answer,
  .sb-faq__toggle,
  .sb-faq__toggle::before,
  .sb-faq__toggle::after,
  .sb-faq__contact-button {
    transition: none !important;
  }
}

/* Theme: Serifen-Font wie im uebrigen Design */
.sb-faq__title { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; }

/* =========================================================================
   Footer (Paket: soniabonolo-footer-section)
   Original-CSS 1:1; Asset-Pfade → assets/images/footer/, :root gescoped.
   ========================================================================= */
.sb-footer {
  --sb-footer-white: #f8f4f0;
  --sb-footer-muted: rgba(248, 244, 240, 0.76);
  --sb-footer-red: var(--sb-rot);
  --sb-footer-line: rgba(248, 244, 240, 0.28);
}

.sb-footer,
.sb-footer * {
  box-sizing: border-box;
}

.sb-footer {
  position: relative;
  overflow: hidden;
  padding-top: 54px;
  color: var(--sb-footer-white);
  font-family: Arial, Helvetica, sans-serif;
}

.sb-footer__top-line {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 74px;
  pointer-events: none;
}

.sb-footer__panel {
  position: relative;
  overflow: hidden;
  min-height: 342px;
  padding: 56px 28px 24px;
  background:
    radial-gradient(circle at 92% 14%, rgba(var(--sb-rot-rgb), 0.32), transparent 28%),
    radial-gradient(circle at 58% 82%, rgba(98, 41, 95, 0.42), transparent 34%),
    linear-gradient(102deg, #061f50 0%, #042454 31%, #261a50 58%, #681a42 78%, var(--sb-rot) 100%);
  clip-path: polygon(0 7%, 25% 7%, 52% 8%, 69% 7%, 84% 5%, 100% 0, 100% 100%, 0 100%);
}

.sb-footer__container {
  position: relative;
  z-index: 2;
  width: min(100%, 1220px);
  margin: 0 auto;
}

.sb-footer__grid {
  display: grid;
  grid-template-columns: 1.32fr 1.28fr 0.96fr 1.18fr;
  grid-template-areas:
    "brand contact menu reach"
    "brand contact menu social";
  gap: 8px 48px;
  align-items: start;
}

.sb-footer__brand { grid-area: brand; }
.sb-footer__contact { grid-area: contact; }
.sb-footer__menu { grid-area: menu; }
.sb-footer__reach { grid-area: reach; }
.sb-footer__social { grid-area: social; }

.sb-footer__map-decor {
  position: absolute;
  left: -65px;
  bottom: 18px;
  width: 390px;
  height: auto;
  opacity: 0.52;
  pointer-events: none;
}

.sb-footer__dots {
  position: absolute;
  width: 132px;
  height: 110px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.10) 1.6px, transparent 1.9px);
  background-size: 13px 13px;
  pointer-events: none;
}

.sb-footer__dots--left {
  left: 12px;
  top: 68px;
  opacity: 0.48;
}

.sb-footer__dots--right {
  right: 8px;
  top: 48px;
  opacity: 0.88;
}

.sb-footer__curve {
  position: absolute;
  left: -80px;
  bottom: -110px;
  width: 680px;
  height: 270px;
  border: 1px solid rgba(111, 151, 190, 0.10);
  border-radius: 50%;
  transform: rotate(8deg);
  pointer-events: none;
}

.sb-footer__logo-link {
  display: inline-block;
  max-width: 100%;
}

.sb-footer__logo {
  display: block;
  width: min(100%, 275px);
  height: auto;
}

.sb-footer__greeting {
  margin: 10px 0 5px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.38;
}

.sb-footer__tagline {
  margin: 0;
  color: var(--sb-footer-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.sb-footer__quick-links {
  display: flex;
  gap: 13px;
  margin-top: 19px;
}

.sb-footer__round-link,
.sb-footer__contact-icon,
.sb-footer__social-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(248, 244, 240, 0.74);
  border-radius: 50%;
}

.sb-footer__round-link {
  width: 42px;
  height: 42px;
  color: var(--sb-footer-white);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.sb-footer__round-link:hover,
.sb-footer__round-link:focus-visible {
  transform: translateY(-2px);
  border-color: #fff;
  background: rgba(255, 255, 255, 0.09);
}

.sb-footer__round-link svg,
.sb-footer__contact-icon svg,
.sb-footer__social-icon svg,
.sb-footer__to-top svg {
  width: 55%;
  height: 55%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sb-footer__heading {
  margin: 9px 0 19px;
  color: var(--sb-footer-white);
  /* Ohne diese Zeile greift die globale h1/h2-Regel mit 'Abril Fatface'.
     Die Schrift wird nicht geladen, es blieb der Cursive-Fallback des
     Browsers. Spaltentitel laufen wie alle Eyebrows in der Grundschrift. */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.sb-footer__heading--center {
  margin-bottom: 1px;
  text-align: center;
}

.sb-footer__heading--social {
  display: none;
}

.sb-footer__contact-list {
  display: grid;
  gap: 10px;
  font-style: normal;
}

.sb-footer__contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--sb-footer-muted);
  font-size: 0.78rem;
  line-height: 1.35;
  text-decoration: none;
  transition: color .18s ease;
}

.sb-footer__contact-row:hover,
.sb-footer__contact-row:focus-visible {
  color: #fff;
}

.sb-footer__contact-row strong {
  color: var(--sb-footer-white);
  font-weight: 500;
}

.sb-footer__contact-icon {
  width: 37px;
  height: 37px;
  color: var(--sb-footer-white);
}

.sb-footer__menu-list {
  display: grid;
  gap: 12px;
}

.sb-footer__menu-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--sb-footer-muted);
  font-size: 0.8rem;
  line-height: 1.35;
  text-decoration: none;
  transition: color .18s ease;
}

.sb-footer__menu-list a:hover,
.sb-footer__menu-list a:focus-visible {
  color: #fff;
}

.sb-footer__menu-list b {
  color: var(--sb-footer-red);
  font-size: 1.2rem;
  font-weight: 400;
}

.sb-footer__reach {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sb-footer__availability {
  display: block;
  width: min(100%, 190px);
  height: auto;
  margin: 2px auto 0;
  object-fit: contain;
}

.sb-footer__reach p {
  margin: 0 0 10px;
  color: var(--sb-footer-muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.sb-footer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  min-height: 40px;
  padding: 10px 23px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sb-rot) 0%, var(--sb-rot) 100%);
  box-shadow: 0 10px 20px rgba(var(--sb-rot-rgb), 0.20);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.sb-footer__cta:hover,
.sb-footer__cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 13px 24px rgba(var(--sb-rot-rgb), 0.28);
}

.sb-footer__social {
  align-self: end;
  padding-top: 8px;
}

.sb-footer__social-links {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.sb-footer__social-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sb-footer-muted);
  font-size: 0.73rem;
  text-decoration: none;
}

.sb-footer__social-links a:hover,
.sb-footer__social-links a:focus-visible {
  color: #fff;
}

.sb-footer__social-icon {
  width: 28px;
  height: 28px;
  color: #fff;
}

.sb-footer__social-icon svg .fill {
  fill: currentColor;
  stroke: none;
}

.sb-footer__bottom {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 42px;
  align-items: center;
  gap: 24px;
  margin-top: 27px;
  padding: 19px 0 0;
  border-top: 1px solid var(--sb-footer-line);
}

.sb-footer__bottom p {
  margin: 0;
  color: var(--sb-footer-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.sb-footer__legal {
  display: flex;
  gap: 20px;
}

.sb-footer__legal a {
  color: var(--sb-footer-muted);
  font-size: 0.72rem;
  text-decoration: none;
}

.sb-footer__legal a:hover,
.sb-footer__legal a:focus-visible {
  color: #fff;
}

.sb-footer__to-top {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--sb-rot-rgb), 0.92);
  color: #fff;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease;
}

.sb-footer__to-top:hover,
.sb-footer__to-top:focus-visible {
  transform: translateY(-2px);
  background: var(--sb-rot);
}

.sb-footer a:focus-visible,
.sb-footer button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 1050px) {
  .sb-footer__grid {
    gap: 8px 28px;
  }

  .sb-footer__logo {
    width: min(100%, 235px);
  }
}

@media (max-width: 820px) {
  .sb-footer {
    padding-top: 29px;
  }

  .sb-footer__top-line {
    height: 46px;
  }

  .sb-footer__panel {
    min-height: auto;
    margin: 0 3px;
    padding: 31px 20px 18px;
    border-radius: 25px 25px 0 0;
    background:
      radial-gradient(circle at 94% 15%, rgba(var(--sb-rot-rgb), 0.20), transparent 30%),
      radial-gradient(circle at 95% 92%, rgba(var(--sb-rot-rgb), 0.58), transparent 34%),
      linear-gradient(160deg, #062451 0%, #082451 38%, #201b4d 63%, #6e1b42 82%, var(--sb-rot) 100%);
    clip-path: none;
  }

  .sb-footer__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "reach"
      "contact"
      "menu"
      "social";
    gap: 0;
  }

  .sb-footer__map-decor {
    left: auto;
    right: 6px;
    top: 55px;
    bottom: auto;
    width: 150px;
    opacity: 0.55;
  }

  .sb-footer__dots--left {
    display: none;
  }

  .sb-footer__dots--right {
    right: 0;
    top: 22px;
    width: 88px;
    height: 75px;
    opacity: 0.7;
  }

  .sb-footer__curve {
    left: -150px;
    bottom: -150px;
    width: 520px;
    height: 250px;
  }

  .sb-footer__brand {
    padding-right: 78px;
  }

  .sb-footer__logo {
    width: min(100%, 245px);
  }

  .sb-footer__greeting {
    margin-top: 4px;
    font-size: 1rem;
  }

  .sb-footer__tagline {
    font-size: 0.76rem;
  }

  .sb-footer__quick-links {
    display: none;
  }

  .sb-footer__reach {
    margin: 15px 0 20px;
    padding: 13px 16px 14px;
    border: 1px solid rgba(248, 244, 240, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
  }

  .sb-footer__heading {
    margin: 0 0 11px;
    font-size: 0.75rem;
  }

  .sb-footer__heading--center {
    margin-bottom: -5px;
  }

  .sb-footer__availability {
    width: min(100%, 160px);
    height: auto;
  }

  .sb-footer__reach p {
    margin-bottom: 11px;
    font-size: 0.72rem;
  }

  .sb-footer__cta {
    width: 100%;
    min-height: 36px;
    font-size: 0.8rem;
  }

  .sb-footer__contact,
  .sb-footer__menu,
  .sb-footer__social {
    padding-top: 3px;
  }

  .sb-footer__contact-list {
    gap: 0;
  }

  .sb-footer__contact-row {
    min-height: 39px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(248, 244, 240, 0.11);
    font-size: 0.73rem;
  }

  .sb-footer__contact-icon {
    width: 29px;
    height: 29px;
  }

  .sb-footer__menu {
    padding-top: 16px;
  }

  .sb-footer__menu-list {
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }

  .sb-footer__menu-list a {
    min-height: 34px;
    border-bottom: 1px solid rgba(248, 244, 240, 0.11);
    font-size: 0.72rem;
  }

  .sb-footer__social {
    padding-top: 16px;
  }

  .sb-footer__heading--social {
    display: block;
    margin-bottom: 9px;
  }

  .sb-footer__social-links {
    justify-content: flex-start;
    gap: 23px;
  }

  .sb-footer__bottom {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "copy top"
      "legal top";
    gap: 5px 12px;
    margin-top: 17px;
    padding-top: 13px;
  }

  .sb-footer__bottom p {
    grid-area: copy;
    max-width: 205px;
    font-size: 0.62rem;
  }

  .sb-footer__legal {
    grid-area: legal;
    gap: 14px;
  }

  .sb-footer__legal a {
    font-size: 0.62rem;
  }

  .sb-footer__to-top {
    grid-area: top;
    width: 35px;
    height: 35px;
    align-self: end;
  }
}

@media (max-width: 390px) {
  .sb-footer__panel {
    padding-inline: 16px;
  }

  .sb-footer__brand {
    padding-right: 60px;
  }

  .sb-footer__logo {
    width: min(100%, 220px);
  }

  .sb-footer__menu-list {
    gap: 0 12px;
  }

  .sb-footer__menu-list a {
    font-size: 0.67rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sb-footer *,
  .sb-footer *::before,
  .sb-footer *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Standort-Karte: Google-Maps-Button (Pill, unten rechts) + On-Demand-Embed.
   Die Google Map laedt erst nach Klick (Datenschutz) und ersetzt die
   Illustration samt Routen/Marker innerhalb derselben Flaeche. */
.sb-location__gmap-button {
    position: absolute;
    right: 5%;
    bottom: 6%;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border: 1.5px solid #1f2a55;
    border-radius: 999px;
    background: #fff;
    color: var(--sb-schrift);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(31, 42, 85, 0.14);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sb-location__gmap-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(31, 42, 85, 0.2);
}

.sb-location__gmap-button svg {
    width: 20px;
    height: 20px;
    color: var(--sb-rot);
    flex: 0 0 auto;
}

.sb-location__gmap {
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    overflow: hidden;
}

.sb-location__gmap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Aktiver Zustand: Illustration/Routen/Marker weichen der Google Map,
   die Flaeche behaelt ihre Groesse ueber das Kartenverhaeltnis. */
.sb-location__map.is-gmap-active { aspect-ratio: 3 / 2; }
.sb-location__map.is-gmap-active picture,
.sb-location__map.is-gmap-active .sb-location__routes,
.sb-location__map.is-gmap-active .sb-location__marker,
.sb-location__map.is-gmap-active .sb-location__popover,
.sb-location__map.is-gmap-active .sb-location__map-kicker { display: none; }

@media (max-width: 640px) {
    .sb-location__gmap-button {
        right: 50%;
        transform: translateX(50%);
        bottom: 4%;
        font-size: 13.5px;
        padding: 10px 18px;
    }
    .sb-location__gmap-button:hover { transform: translateX(50%) translateY(-2px); }
}

/* Hero-Pfeil: baut sich Strich fuer Strich entlang der Linie auf
   (Maskenpfad mit pathLength=1 gibt die gestrichelte Linie nach und nach
   frei), danach erscheint die Pfeilspitze; Loop mit Haltephase.
   Beim Hover auf den roten Button rueckt der Pfeil ein Stueck nach rechts. */
.sb-hero-arrow { transition: transform 0.3s ease; }

.sb-hero-arrow__reveal { animation: sbArrowDraw 6s linear infinite; }

@keyframes sbArrowDraw {
    0%   { stroke-dashoffset: 1; }
    8%   { stroke-dashoffset: 1; }
    60%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}

.sb-hero-arrow__head { animation: sbArrowHead 6s ease-out infinite; }

@keyframes sbArrowHead {
    0%   { opacity: 0; }
    57%  { opacity: 0; }
    66%  { opacity: 1; }
    100% { opacity: 1; }
}

.sb-hero:has(.sb-btn-red:hover) .sb-hero-arrow { transform: translateX(9px); }

.sb-btn-red i { transition: transform 0.2s ease; }
.sb-btn-red:hover i { transform: translateX(4px); }

@media (max-width: 767px) {
    .sb-hero-arrow { width: 160px; height: auto; top: -10px; }
}

@media (prefers-reduced-motion: reduce) {
    .sb-hero-arrow__reveal, .sb-hero-arrow__head { animation: none; }
    .sb-hero-arrow, .sb-btn-red i { transition: none; }
}

/* Sub-Banner der Unterseiten: Texte schwarz statt weiss */
.sub-banner-section h1,
.sub-banner-section .breadcrum a,
.sub-banner-section .breadcrum span { color: var(--sb-schrift); }

/* Referenzen-Slider: Abstand zum Banner (Vorlage hat nur padding-bottom) */
.testimonials-section { padding-top: 90px; }

/* Anfrage-Formular als eigene Seite: dieselbe Karte, zentriert und etwas breiter */
.sb-anfrage {
    position: relative;
    padding: 70px 0 90px;
    overflow: hidden;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='70' viewBox='0 0 320 70'><path d='M0 40 Q 30 18 60 40 T 120 40 T 180 40 T 240 40 T 300 40' fill='none' stroke='%23b9002b' stroke-opacity='0.16' stroke-width='2'/><path d='M0 55 Q 30 33 60 55 T 120 55 T 180 55 T 240 55 T 300 55' fill='none' stroke='%23b9002b' stroke-opacity='0.10' stroke-width='2'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='70' viewBox='0 0 320 70'><path d='M0 40 Q 30 18 60 40 T 120 40 T 180 40 T 240 40 T 300 40' fill='none' stroke='%23b9002b' stroke-opacity='0.14' stroke-width='2'/></svg>");
    background-repeat: no-repeat, no-repeat;
    background-position: left -40px bottom 110px, right -30px top 130px;
}

/* Punkteraster links oben / rechts unten — wie .sb-qs und .sb-lost */
.sb-anfrage::before,
.sb-anfrage::after {
    content: "";
    position: absolute;
    background-image: radial-gradient(rgba(37, 56, 128, 0.22) 1.8px, transparent 2.2px);
    background-size: 16px 16px;
    pointer-events: none;
}

.sb-anfrage::before {
    top: 80px;
    left: 30px;
    width: 150px;
    height: 190px;
}

.sb-anfrage::after {
    bottom: 100px;
    right: 26px;
    width: 128px;
    height: 200px;
}

.sb-anfrage__card { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; }

@media (max-width: 991px) {
    .sb-anfrage { background-image: none; }
    .sb-anfrage::before, .sb-anfrage::after { display: none; }
}

.sb-anfrage .sb-vf-form h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--sb-schrift);
    margin-bottom: 8px;
}

/* =========================================================================
   Einheitliche Flucht: EINE Inhaltsbreite fuer alle Sections.
   Die Design-Pakete brachten verschiedene Container mit (1180/1200/1220/
   1240px), die Bootstrap-Sections lagen bei 1140px — dadurch sprangen die
   linken/rechten Kanten von Section zu Section. Alles auf 1200px Inhalt.
   ========================================================================= */

@media (min-width: 1200px) {
    /* Bootstrap-Container (Header, Hero, Video-Formular, Kundenstimmen,
       Zahlen-Band, Verpasste Anrufe, Vergleichs- und CTA-Banner, Anfrage) */
    .container { max-width: 1230px; } /* 1200px Inhalt + 2x15px Innenabstand */
}

/* Paket-Container auf dasselbe Mass */
.sb-process__container,
.sb-workflow__container,
.sb-location__container { max-width: 1200px; margin-inline: auto; }

/* team/faq setzen width statt max-width → beides ueberschreiben */
.sb-team__container,
.sb-faq__container { width: min(100%, 1200px); max-width: 1200px; margin-inline: auto; }

.sb-service { width: min(100%, 1200px); }

.sb-services__container,
.sb-footer__container { width: min(100%, 1200px); }

.sb-blog__container { width: min(100%, 1200px); }

.sb-related__container,
.sb-article-hero__container { width: min(100%, 1200px); }

/* Vergleichs-Banner steckt im .container — fuellen statt eigener Breite */
.sb-comparison { width: 100%; }


/* Workflow: Schritt-fuer-Schritt-Aufbau beim Scrollen (workflow-animation.js
   setzt .is-inview beim Viewport-Eintritt und entfernt sie beim Verlassen).
   Startzustaende gelten nur mit aktivem JS (.sb-workflow--anim), damit die
   Section ohne JS nicht unsichtbar bleibt. Delays nur im .is-inview-Zustand,
   der Reset beim Wegscrollen passiert dadurch ohne Verzoegerung. */
.sb-workflow--anim .sb-workflow__steps::before {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.sb-workflow--anim.is-inview .sb-workflow__steps::before {
  transform: scaleX(1);
  transition-delay: 0.1s;
}

.sb-workflow--anim .sb-workflow__step {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.sb-workflow--anim.is-inview .sb-workflow__step {
  opacity: 1;
  transform: none;
}
.sb-workflow--anim.is-inview .sb-workflow__step:nth-child(1) { transition-delay: 0.1s; }
.sb-workflow--anim.is-inview .sb-workflow__step:nth-child(2) { transition-delay: 0.5s; }
.sb-workflow--anim.is-inview .sb-workflow__step:nth-child(3) { transition-delay: 0.9s; }
.sb-workflow--anim.is-inview .sb-workflow__step:nth-child(4) { transition-delay: 1.3s; }

.sb-workflow--anim .sb-workflow__step:not(:last-child)::after {
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sb-workflow--anim.is-inview .sb-workflow__step:not(:last-child)::after {
  transform: scale(1);
}
.sb-workflow--anim.is-inview .sb-workflow__step:nth-child(1)::after { transition-delay: 0.55s; }
.sb-workflow--anim.is-inview .sb-workflow__step:nth-child(2)::after { transition-delay: 0.95s; }
.sb-workflow--anim.is-inview .sb-workflow__step:nth-child(3)::after { transition-delay: 1.35s; }

.sb-workflow--anim .sb-workflow__badge {
  transform: translateX(26px) scale(0);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sb-workflow--anim.is-inview .sb-workflow__badge {
  transform: translateX(26px) scale(1);
}
.sb-workflow--anim.is-inview .sb-workflow__step:nth-child(1) .sb-workflow__badge { transition-delay: 0.35s; }
.sb-workflow--anim.is-inview .sb-workflow__step:nth-child(2) .sb-workflow__badge { transition-delay: 0.75s; }
.sb-workflow--anim.is-inview .sb-workflow__step:nth-child(3) .sb-workflow__badge { transition-delay: 1.15s; }
.sb-workflow--anim.is-inview .sb-workflow__step:nth-child(4) .sb-workflow__badge { transition-delay: 1.55s; }


/* Akkordeon-Summaries: kein Standard-Fokusring beim Klicken, dezenter
   Ring nur bei Tastatur-Fokus */
.sb-service__summary:focus { outline: none; }
.sb-service__summary:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.25);
  outline-offset: -3px;
  border-radius: 0.7rem;
}


/* =========================================================================
   LIGHT THEME (08/2026): dunkle Flaechen raus, helles #eaeaea als Grund.
   Ehemals weisse Schriften auf dunklen Flaechen -> dunkel. Rote Akzente,
   Buttons und Badges bleiben unveraendert.
   ========================================================================= */

/* --- Seiten-/Hero-Wrapper + Header ------------------------------------- */
.banner-section-outer,
.sub-banner-section-outer {
    background-color: #eaeaea !important;
    background-image: none !important;
}

.main-header .navbar-nav .nav-link { color: var(--sb-schrift) !important; white-space: nowrap; }
.main-header .navbar-nav .nav-link:hover,
.main-header .navbar-nav .nav-item.active > .nav-link { color: var(--sb-rot) !important; }
.main-header .navbar-toggler-icon { background: #1c1c1c !important; }

.sb-logo-text { color: var(--sb-schrift); }
.sb-logo-text small { color: rgba(0, 0, 0, 0.6); }

/* --- Hero ---------------------------------------------------------------- */
.sb-hero h1.text-white { color: var(--sb-schrift) !important; }
.sb-hero-text { color: var(--sb-schrift-soft); }
.sb-hero-usps li { color: var(--sb-schrift); }
.sb-hero-usps li i { color: var(--sb-rot); }
.sb-hero-usps li strong { color: var(--sb-rot); }
.sb-hero-usps li span { color: var(--sb-schrift-soft); }
.sb-hero-usps li { border-color: rgba(0, 0, 0, 0.1); }
.sb-btn-play { color: var(--sb-schrift); }
.sb-hero-arrow__line, .sb-hero-arrow__head { stroke: #161616; }
.sb-hero-arrow__reveal { stroke: #ffffff; }
.sb-hero::before { background-image: radial-gradient(rgba(0, 0, 0, 0.16) 2px, transparent 2.6px); }

/* --- Video-/Formular-Section (Section 2) -------------------------------- */
.sb-vf-left h2, .sb-vf-video-label, .sb-vf-diagram-title { color: var(--sb-schrift) !important; }
.sb-vf-text, .sb-vf-caption { color: var(--sb-schrift-soft) !important; }
.sb-vf-usps li { color: var(--sb-schrift) !important; border-color: rgba(0, 0, 0, 0.1) !important; }
.sb-vf-channel-label { color: var(--sb-schrift-soft) !important; }
.sb-vf-video-link { color: #b3271f; }
.sb-vf-connector, .sb-vf-connector::after { border-color: rgba(0, 0, 0, 0.25) !important; background-color: transparent; }

/* --- Zahlen-Band --------------------------------------------------------- */
.sb-band-card {
    background-image: none !important;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 18px 40px rgba(31, 42, 85, 0.10);
}
.sb-band-big { color: var(--sb-rot); }
.sb-band-title { color: var(--sb-schrift); }
.sb-band-text { color: var(--sb-schrift-soft); }
.sb-band-col + .sb-band-col { border-color: rgba(0, 0, 0, 0.12) !important; }

/* --- Vergleichs-Band ----------------------------------------------------- */
.sb-comparison {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 14px 32px rgba(31, 42, 85, 0.10);
}
.sb-comparison::before, .sb-comparison::after { opacity: 0.5; }
.sb-comparison__title { color: var(--sb-schrift) !important; }
.sb-comparison__text { color: var(--sb-schrift-soft) !important; }

/* --- Service-Section (Akkordeon-Karte) ----------------------------------- */
.sb-service {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 0.7rem 2.4rem rgba(13, 30, 66, 0.10);
}
.sb-service__glow, .sb-service__grain { display: none; }
.sb-service__title { color: var(--sb-schrift) !important; }
.sb-service__intro { color: var(--sb-schrift-soft) !important; }
.sb-service__item {
    background: #f4f4f4 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
}
.sb-service__item[open] { border-color: rgba(0, 0, 0, 0.14) !important; background: #efefef !important; }
.sb-service__summary { color: var(--sb-schrift) !important; }
.sb-service__answer p { color: var(--sb-schrift-soft) !important; }
.sb-service__response { color: var(--sb-schrift-soft) !important; }
.sb-service__chevron::before, .sb-service__chevron::after { background: #16224a !important; border-color: var(--sb-schrift) !important; }
.sb-service__summary:focus-visible { outline-color: rgba(var(--sb-rot-rgb), 0.35); }

/* --- CTA-Banner ----------------------------------------------------------- */
.sb-cta-banner {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 14px 32px rgba(31, 42, 85, 0.10);
}
.sb-cta-banner__title { color: var(--sb-schrift) !important; }
.sb-cta-banner__note { color: var(--sb-schrift-soft) !important; }

/* --- Team: Erfahrungs-Kachel --------------------------------------------- */
.sb-team__experience {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--sb-schrift) !important;
}
.sb-team__experience-note { color: var(--sb-schrift-soft) !important; }
.sb-team__experience > span:nth-child(2), .sb-team__experience-divider { background: rgba(0, 0, 0, 0.12) !important; }

/* --- Standort: Info-Karte -------------------------------------------------- */
.sb-location__info {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--sb-schrift) !important;
}
.sb-location__info-text { color: var(--sb-schrift-soft) !important; }
.sb-location__benefits li { color: var(--sb-schrift) !important; }
.sb-location__note { color: var(--sb-schrift-soft) !important; }

/* --- FAQ: Kontakt-Box ------------------------------------------------------ */
.sb-faq__contact {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--sb-schrift) !important;
}
.sb-faq__contact-copy p { color: var(--sb-schrift-soft) !important; }

/* --- Footer ----------------------------------------------------------------- */
.sb-footer__panel {
    background: #eaeaea !important;
}
.sb-footer__map-decor path { stroke: rgba(0, 0, 0, 0.06); }
.sb-footer__heading { color: var(--sb-schrift) !important; }
.sb-footer__greeting, .sb-footer__tagline { color: var(--sb-schrift-soft) !important; }
.sb-footer__contact-row, .sb-footer__contact-row span { color: var(--sb-schrift) !important; }
.sb-footer__contact-row:hover, .sb-footer__contact-row:focus-visible { color: var(--sb-rot) !important; }
.sb-footer__contact-icon svg, .sb-footer__round-link svg { stroke: #16224a; }
.sb-footer__round-link { border-color: rgba(0, 0, 0, 0.25) !important; }
.sb-footer__round-link:hover { border-color: var(--sb-rot) !important; }
.sb-footer__round-link:hover svg { stroke: var(--sb-rot); }
.sb-footer__menu-list a { color: var(--sb-schrift) !important; }
.sb-footer__menu-list a:hover { color: var(--sb-rot) !important; }
.sb-footer__menu-list b { color: var(--sb-rot); }
.sb-footer__reach p { color: var(--sb-schrift-soft); }
.sb-footer__social-links a { color: var(--sb-schrift) !important; }
.sb-footer__social-icon { color: var(--sb-schrift) !important; }
.sb-footer__social-icon svg { stroke: #16224a; }
.sb-footer__bottom, .sb-footer__bottom p { color: var(--sb-schrift-soft) !important; border-color: rgba(0, 0, 0, 0.12) !important; }
.sb-footer__legal a { color: var(--sb-schrift-soft) !important; }
.sb-footer__legal a:hover { color: var(--sb-rot) !important; }


/* Light Theme: Nachzuegler */
.sb-location__info-eyebrow { color: var(--sb-rot) !important; }
.sb-location__info-title { color: var(--sb-schrift) !important; }
.sb-location__benefit-icon { border-color: rgba(22, 34, 74, 0.4) !important; }
.sb-location__benefit-icon svg { stroke: #16224a !important; }
.sb-footer__contact-row strong { color: var(--sb-schrift) !important; }
.sb-faq__contact-phone, .sb-faq__contact-hint { color: var(--sb-schrift-soft) !important; }
.sb-faq__contact-copy h3 { color: var(--sb-schrift) !important; }
.sb-team__experience-number { color: var(--sb-rot); }
.sb-team__experience-title { color: var(--sb-schrift); }
.sb-team__experience-rule { background: rgba(0, 0, 0, 0.12) !important; }


/* Light Theme: Verlaufs-Update — ehemals dunkle Farbverlaeufe bekommen
   einen vergleichbaren, dezenten Verlauf aus dem hellen Footer-Grau
   (#eaeaea), gleiche Geometrie wie die Originale, plus sehr zurueckhaltende
   warme Glow-Akzente. */
.banner-section-outer,
.sub-banner-section-outer {
    background-color: #eaeaea !important;
    background-image:
        radial-gradient(ellipse 60% 55% at 0% 100%, rgba(var(--sb-rot-rgb), 0.07), transparent 70%),
        radial-gradient(ellipse 55% 60% at 92% 8%, rgba(255, 255, 255, 0.55), transparent 70%),
        radial-gradient(ellipse 40% 40% at 100% 100%, rgba(var(--sb-rot-rgb), 0.05), transparent 70%) !important;
}

.sb-band-card {
    background-image:
        radial-gradient(circle at 88% 10%, rgba(var(--sb-rot-rgb), 0.06), transparent 40%),
        linear-gradient(102deg, #f6f6f6 0%, #ececec 45%, #e3e3e3 100%) !important;
    background-size: auto, auto;
}

.sb-comparison {
    background:
        radial-gradient(circle at 92% 20%, rgba(var(--sb-rot-rgb), 0.05), transparent 38%),
        linear-gradient(105deg, #f6f6f6 0%, #ebebeb 55%, #e2e2e2 100%) !important;
}

.sb-service {
    background:
        radial-gradient(circle at 75% 2%, rgba(var(--sb-rot-rgb), 0.08) 0, rgba(var(--sb-rot-rgb), 0.03) 22%, transparent 46%),
        linear-gradient(109deg, #f7f7f7 0%, #eeeeee 39%, #e8e8e8 70%, #e1e1e1 100%) !important;
}
.sb-service__item { background: rgba(255, 255, 255, 0.75) !important; }
.sb-service__item[open] { background: #ffffff !important; }

.sb-cta-banner {
    background:
        radial-gradient(circle at 94% 80%, rgba(var(--sb-rot-rgb), 0.06), transparent 42%),
        linear-gradient(90deg, #f6f6f6 0%, #ececec 45%, #e2e2e2 100%) !important;
}

.sb-team__experience {
    background:
        radial-gradient(circle at 94% 14%, rgba(var(--sb-rot-rgb), 0.10), transparent 36%),
        linear-gradient(105deg, #f7f7f7 0%, #ececec 45%, #e3e3e3 100%) !important;
}

.sb-location__info {
    background:
        radial-gradient(circle at 96% 92%, rgba(var(--sb-rot-rgb), 0.08), transparent 31%),
        linear-gradient(145deg, #f7f7f7 0%, #ededed 44%, #e3e3e3 100%) !important;
}

.sb-faq__contact {
    background:
        radial-gradient(circle at 100% 100%, rgba(var(--sb-rot-rgb), 0.10), transparent 42%),
        linear-gradient(135deg, #f7f7f7 0%, #ececec 52%, #e2e2e2 100%) !important;
}

.sb-footer__panel {
    background:
        radial-gradient(circle at 92% 14%, rgba(var(--sb-rot-rgb), 0.05), transparent 28%),
        linear-gradient(102deg, #f0f0f0 0%, #eaeaea 40%, #e2e2e2 100%) !important;
}


/* Call-Flow: Mitarbeiterinnen-Icon statt Fotos — Navy-Kreis mit weissem
   Headset-Glyph, gleiche Groesse/Animation wie zuvor die Foto-Avatare */
.sb-call-flow .avatar-node .avatar-icon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #1d2340;
    color: #fff;
    border: 3px solid #fff;
    box-shadow: 0 7px 20px rgba(29, 35, 64, 0.11);
    opacity: 0.72;
    transform: scale(0.94);
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.85, 0.25, 1.2), box-shadow 0.45s ease, background 0.45s ease;
}
.sb-call-flow .avatar-node .avatar-icon svg { width: 56%; height: 56%; }
.sb-call-flow .avatar-node.is-active .avatar-icon {
    opacity: 1;
    transform: scale(1);
    background: var(--sb-rot);
    box-shadow: 0 9px 24px rgba(29, 35, 64, 0.15);
}