/* Seitenleiste "Kontakt / Bewertungen" (10/2026)
   Vorlage: sidebar-widgets.zip (contentbaer-sidebar.html), Verhalten wie suchhelden.de:
   - erst unsichtbar rechts ausserhalb, faehrt beim 3. Abschnitt mit leichtem
     Nachfedern herein (Klasse is-in, gesetzt von assets/js/sidebar-widget.js)
   - "Bewertungen" ab 992px offen, Handy nur die Reiter; Reiter oder x klappen zu
   - zugeklappt bleibt nur die Reiterleiste am Rand stehen
   Eigene Datei, in WP Rocket "Excluded CSS" eingetragen (inc/include/sidebar-widget.php):
   die Zustaende (data-open, is-in) gibt es erst nach JS - Used CSS wuerde sie
   sonst wegwerfen. */

.cb-side {
    --cb-card: 280px;            /* Karte 264px + 16px Abstand zum Rand */
    --cb-x: calc(var(--cb-card) + 64px);
    --cb-bottom: 32px;
    position: fixed;
    right: 0;
    bottom: var(--cb-bottom);
    z-index: 990;                /* unter Header (999), Menue und Cookie-Banner */
    display: flex;
    align-items: center;
    /* nie hoeher als der Platz unter dem festen Header (--cb-top aus dem JS):
       die Karte scrollt dann */
    height: 320px;
    height: min(320px, calc(100vh - var(--cb-top, 0px) - var(--cb-bottom) - 12px));
    height: min(320px, calc(100dvh - var(--cb-top, 0px) - var(--cb-bottom) - 12px));
    pointer-events: none;
    font: 400 13px/1.3 Poppins, "Segoe UI", Arial, sans-serif;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(var(--cb-x), 0, 0);
    transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .35s ease, visibility 0s linear .55s;
}
/* zu wenig Platz fuer die beiden Reiter (Handy quer mit hohem Header) */
.cb-side.cb-tight { display: none; }
.cb-side.is-in {
    opacity: 1;
    visibility: visible;
    transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .35s ease, visibility 0s;
}
/* Erster Auftritt: weicher, mit leichtem Nachfedern */
.cb-side.is-in:not(.is-ready) {
    transition: transform .95s cubic-bezier(.2, 1.25, .35, 1), opacity .45s ease, visibility 0s;
}
.cb-side.is-in[data-open="0"] { --cb-x: var(--cb-card); }
.cb-side.is-in[data-open="1"] { --cb-x: 0px; }
.cb-side.is-in[data-open="auto"] { --cb-x: var(--cb-card); }
@media (min-width: 992px) and (min-height: 700px) { .cb-side.is-in[data-open="auto"] { --cb-x: 0px; } }

.cb-side * { box-sizing: border-box; }
.cb-side a, .cb-side a:hover { color: #fff; text-decoration: none; }
.cb-side i, .cb-side em { font-style: normal; }

/* Reiter */
.cb-tabs { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
.cb-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    width: 40px; height: 132px; margin: 0; padding: 0; border: 0; border-radius: 12px 0 0 12px;
    background: #faac01; color: #04033d;
    font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    box-shadow: -6px 8px 24px rgba(0, 0, 0, .18);
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.cb-tab span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.cb-tab:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
/* Bei offener Karte wird der jeweils andere Reiter dunkel */
.cb-side[data-open="1"][data-card="bewertungen"] [data-v="kontakt"],
.cb-side[data-open="1"][data-card="kontakt"] [data-v="bewertungen"] {
    background: #0c0b45; color: #e6e6f4; box-shadow: inset 0 0 0 1px rgba(250, 172, 1, .6), -6px 8px 24px rgba(0, 0, 0, .18);
}
@media (min-width: 992px) and (min-height: 700px) {
    .cb-side[data-open="auto"] [data-v="kontakt"] {
        background: #0c0b45; color: #e6e6f4; box-shadow: inset 0 0 0 1px rgba(250, 172, 1, .6), -6px 8px 24px rgba(0, 0, 0, .18);
    }
}
@media (hover: hover) {
    .cb-tab:hover { filter: brightness(1.06); }
}

.cb-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #2fe07a; box-shadow: 0 0 0 3px #04033d; animation: cb-blink 1.6s ease-in-out infinite; }
.cb-dot:after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2fe07a; animation: cb-ping 1.6s ease-out infinite; }
@keyframes cb-blink { 50% { background: #1c9a52; } }
@keyframes cb-ping { to { transform: scale(3.2); opacity: 0; } }

/* Karten: beide im selben Feld uebereinander, die aktive blendet ueber */
.cb-cards { display: grid; width: 264px; height: 100%; margin-right: 16px; pointer-events: auto; }
.cb-card {
    grid-area: 1 / 1; position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: 100%; height: 100%; padding: 20px 14px 14px;
    overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(183, 182, 212, .4) transparent;
    border: 1px solid rgba(250, 172, 1, .5); border-radius: 18px; background: #0c0b45;
    box-shadow: 0 20px 50px rgba(4, 3, 61, .35);
    opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98);
    transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .4s;
}
.cb-side[data-card="bewertungen"] .cb-rev,
.cb-side[data-card="kontakt"] .cb-con {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .35s ease .05s, transform .45s cubic-bezier(.22, 1, .36, 1) .05s, visibility 0s;
}

.cb-side.cb-instant .cb-card { transition: none; }

/* Schliessen */
.cb-x {
    position: absolute; top: 10px; right: 10px;
    display: grid; place-items: center; width: 28px; height: 28px; margin: 0; padding: 0;
    border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #b7b6d4;
    cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
.cb-x:focus-visible { outline: 2px solid #faac01; outline-offset: 2px; }
@media (hover: hover) {
    .cb-x:hover { background: rgba(255, 255, 255, .16); color: #fff; }
}

.cb-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #b7b6d4; }
.cb-score { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: #b7b6d4; }
.cb-score b { font-size: 40px; line-height: 1; font-weight: 700; color: #fff; }
.cb-stars { font-size: 17px; line-height: 1; letter-spacing: 2px; color: #faac01; }
.cb-sub { font-size: 12px; color: #b7b6d4; }
.cb-foot { margin-top: auto; font-size: 10px; color: #b7b6d4; }
.cb-list { align-self: stretch; margin-top: 6px; border-radius: 12px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.cb-list a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-top: 1px solid rgba(255, 255, 255, .09); transition: background-color .2s ease; }
.cb-list a:first-child { border-top: 0; }
.cb-list i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #04033d; font-size: 13px; font-weight: 700; }
.cb-list .cb-omr { border-radius: 8px; font-size: 9px; }
.cb-list .cb-pe { background: #faac01; font-size: 11px; }
.cb-list span { flex: 1; font-size: 11px; color: #b7b6d4; }
.cb-list span b { display: block; font-size: 13px; font-weight: 600; color: #fff; }
.cb-list strong { font-size: 14px; font-weight: 700; }
.cb-box { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px 12px; border-radius: 12px; background: rgba(255, 255, 255, .07); text-align: center; transition: background-color .2s ease; }
@media (hover: hover) {
    .cb-list a:hover, .cb-box:hover { background: rgba(255, 255, 255, .12); }
}
.cb-tel { flex: 1; margin-top: 6px; }
.cb-tel i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #faac01; color: #04033d; }
.cb-tel b { padding-bottom: 3px; border-bottom: 2px solid #faac01; font-size: 20px; font-weight: 700; white-space: nowrap; }
.cb-box span { font-size: 15px; font-weight: 600; }
.cb-box em { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #faac01; color: #04033d; font-size: 13px; font-weight: 700; white-space: nowrap; }

/* Beim Hereinfahren: Plattform-Zeilen nacheinander einblenden */
.cb-side.is-in:not(.is-ready) .cb-rev .cb-list a { animation: cb-row .5s cubic-bezier(.22, 1, .36, 1) both; }
.cb-side.is-in:not(.is-ready) .cb-rev .cb-list a:nth-child(1) { animation-delay: .45s; }
.cb-side.is-in:not(.is-ready) .cb-rev .cb-list a:nth-child(2) { animation-delay: .53s; }
.cb-side.is-in:not(.is-ready) .cb-rev .cb-list a:nth-child(3) { animation-delay: .61s; }
@keyframes cb-row { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 575px) {
    .cb-side { --cb-bottom: 16px; }
}
/* Niedrige Bildschirme (Handy quer): kuerzere Reiter, damit beide hineinpassen */
@media (max-height: 420px) {
    .cb-tab { height: 120px; gap: 8px; }
}
@media (max-width: 359px) {
    .cb-side { --cb-card: calc(100vw - 56px); }
    .cb-cards { width: calc(100vw - 72px); }
}
@media (prefers-reduced-motion: reduce) {
    .cb-side, .cb-side.is-in, .cb-side.is-in:not(.is-ready), .cb-card, .cb-side .cb-rev, .cb-side .cb-con { transition: opacity .2s ease, visibility 0s; }
    .cb-side.is-in:not(.is-ready) .cb-rev .cb-list a { animation: none; }
    .cb-dot, .cb-dot:after { animation: none; }
}
@media print { .cb-side { display: none; } }

/* contentbaer: ueber der Leiste "Lassen Sie Ihre Website pruefen" bleiben.
   --cb-bar = echte Hoehe der Leiste (assets/js/sidebar-widget.js), 64px Desktop,
   bis 104px auf dem Handy (zweizeilig) */
body:has(.seo-check-bottom[style*="flex"]) .cb-side { --cb-bottom: calc(var(--cb-bar, 64px) + 32px); }
@media (max-width: 575px), (max-height: 420px) {
    body:has(.seo-check-bottom[style*="flex"]) .cb-side { --cb-bottom: calc(var(--cb-bar, 64px) + 12px); }
}

/* Das alte Trustpilot/Google-Abzeichen rechts unten zeigt dasselbe wie die
   Bewertungskarte und laege darunter - solange die Leiste da ist, ausblenden */
body:has(#cb-side) #badge-area { display: none !important; }