…
========================================================================== */
/* Full-width Band: Hintergrund randlos, Inhalt im Container */
.partner-banner {
position: relative; overflow: hidden;
padding-block: clamp(1.1rem, 1.8vw, 1.6rem);
background: linear-gradient(155deg, var(--blue-950) 0%, var(--color-primary) 125%);
color: #fff;
}
.partner-banner__row {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
gap: clamp(1rem, 2.5vw, 2.25rem);
}
.partner-banner__brand { display: flex; flex-direction: column; gap: 0.55rem; }
.partner-banner__eyebrow { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--sec-300); }
.partner-banner__eyebrow svg { width: 1.15em; height: 1.15em; }
.partner-banner__lockup { display: inline-flex; align-items: center; gap: 0.7rem; }
.partner-banner__logo { height: 24px; width: auto; display: block; }
.partner-banner__x { color: rgba(255,255,255,0.4); font-size: 1.05rem; line-height: 1; }
.partner-banner__opts { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); flex-wrap: wrap; }
.partner-banner__sep { align-self: stretch; width: 1px; background: rgba(255,255,255,0.16); }
.pbopt { display: flex; align-items: center; gap: 0.8rem; }
.pbopt__tag { flex: none; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; border-radius: var(--r-pill); padding: 0.32em 0.7em; background: rgba(255,255,255,0.12); color: var(--sec-300); }
.pbopt__tag--pro { background: var(--cta); color: var(--cta-ink); }
.pbopt__label { display: flex; flex-direction: column; line-height: 1.15; }
.pbopt__label b { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-base); color: #fff; }
.pbopt__label small { font-size: var(--fs-xs); color: rgba(255,255,255,0.7); }
.pbopt__btn { flex: none; min-height: 42px; padding: 0.7em 1.25em; font-size: var(--fs-sm); }
@media (max-width: 900px) {
.partner-banner__row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
.partner-banner__opts { flex-direction: column; align-items: stretch; width: 100%; }
.partner-banner__sep { width: 100%; height: 1px; }
.pbopt { justify-content: flex-start; }
.pbopt__btn { margin-left: auto; }
}
/* ==========================================================================
FLOATING BERATER-ANGEBOT — schwebt unten rechts, erscheint nach 7s
Shared, damit das Widget auf jeder Seite gleich aussieht (Markup: expert-float.js)
========================================================================== */
.expert-float {
position: fixed; right: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem);
z-index: 90; width: min(352px, calc(100vw - 2rem));
background: linear-gradient(135deg, #fff 0%, var(--hunter-100) 100%);
border: 1px solid var(--color-primary); border-radius: var(--r-2xl);
box-shadow: 0 26px 60px -24px rgba(6, 35, 50, 0.48);
padding: clamp(1.1rem, 2vw, 1.35rem) clamp(1.2rem, 2.5vw, 1.5rem);
opacity: 0; visibility: hidden; transform: translateY(24px);
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.expert-float.is-visible { opacity: 1; visibility: visible; transform: translateY(0); animation: expertBob 5s ease-in-out 0.6s infinite; }
.expert-float.is-dismissed { display: none; }
@keyframes expertBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .expert-float.is-visible { animation: none; } }
.expert-float__body { position: relative; z-index: 2; max-width: 70%; }
.expert-float__hl { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.12; white-space: nowrap; }
.expert-float__copy { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; margin: 0.35rem 0 0.8rem; }
.expert-float__cta { font-size: var(--fs-sm); padding: 0.68em 1.05em; min-height: 42px; white-space: nowrap; }
.expert-float__cta .arrow { width: 1em; height: 1em; }
/* Bild ragt 1.5rem rechts über die Box (5% kleiner als zuvor, damit es den Text nicht verdeckt) */
.expert-float__img { position: absolute; right: -1rem; bottom: 0; width: 48%; max-width: 170px; z-index: 1; pointer-events: none; filter: drop-shadow(0 14px 22px rgba(6, 35, 50, 0.3)); }
.expert-float__close { position: absolute; top: 0.4rem; right: 0.4rem; z-index: 3; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.8); color: var(--text-soft); box-shadow: 0 2px 8px -4px rgba(6,35,50,0.3); }
.expert-float__close svg { width: 9px; height: 9px; }
.expert-float__close:hover { background: #fff; color: var(--text-strong); }
@media (max-width: 520px) { .expert-float { width: calc(100vw - 1.5rem); right: 0.75rem; left: auto; bottom: 0.75rem; } .expert-float__img { max-width: 120px; right: -0.5rem; } .expert-float__img--bust { max-width: 132px; right: -0.4rem; } }
/* Kopf-Schulter-Bueste (Motiv auf Rahmen zugeschnitten): so gross wie Joshua, Kopf ragt oben leicht raus.
Etwas weiter nach rechts gerückt (clip-sicher am Viewport-Rand), damit die Büste den Text nicht überdeckt. */
.expert-float__img--bust { width: 56%; max-width: 192px; right: -1rem; }
/* --- Niggelhöver — globales, wiederverwendbares Logo-Band (Marquee) -----------
Einsetzen:
(Markup füllt
assets/js/niggelhoever.js). Nimmt die volle Breite des Containers, transparent,
mit weichem Rand-Fade. Styling + Logos werden zentral gepflegt (global). */
.niggelhoever { width: 100%; display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); }
.niggelhoever__label {
flex: none; font-family: var(--font-display); font-weight: 800;
font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-soft); opacity: 0.75; white-space: nowrap;
}
.niggelhoever__viewport {
flex: 1 1 auto; min-width: 0; overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.niggelhoever__track { display: flex; align-items: center; width: max-content; animation: niggelhoeverMarquee 32s linear infinite; }
/* Graustufen-Logo-Band: monochrom, entsättigt, dezent. */
.niggelhoever__logo {
display: inline-flex; align-items: center; gap: 0.5em;
margin-right: clamp(1.5rem, 3.5vw, 3rem);
color: var(--text-soft); font-family: var(--font-display); font-weight: 700;
font-size: 0.9rem; letter-spacing: 0.03em; white-space: nowrap;
opacity: 0.55;
}
/* Platzhalter-Kachel: Referenz-Slot für ein späteres lizenziertes Graustufen-Logo. */
.niggelhoever__logo--tile {
height: 2.4rem; padding: 0 1.1rem; margin-right: clamp(0.75rem, 2vw, 1.5rem);
border: 1px dashed var(--line); border-radius: 8px; opacity: 0.5;
}
.niggelhoever__logo--accent { opacity: 0.75; }
/* Feste Bounding-Box je Logo (object-fit: contain) — macht schmale Wortmarken
(z. B. testbericht.de, sehr breites Seitenverhältnis) und quadratische Siegel
(z. B. Good Design Award) gleich groß, statt sie nur per Höhe zu skalieren. */
.niggelhoever__imgbox {
height: 1.8rem; width: 3.5rem; flex: none;
display: flex; align-items: center; justify-content: center;
}
.niggelhoever__img {
max-height: 100%; max-width: 100%; width: auto; height: auto;
object-fit: contain; display: block;
filter: grayscale(1); opacity: 0.8;
}
/* Negatives/weißes Logo für das helle Band einfärben (dunkel). */
.niggelhoever__img--invert { filter: invert(1) grayscale(1) brightness(0.35); opacity: 0.8; }
/* Generisches Platzhalter-Emblem (Monogramm) — Graustufen-Logo-Optik. */
.niggelhoever__mark { flex: none; display: inline-flex; }
.niggelhoever__mark svg { width: 1.8rem; height: 1.8rem; display: block; }
.niggelhoever__mark rect { fill: none; stroke: currentColor; stroke-width: 2; }
.niggelhoever__mark text {
fill: currentColor; font-family: var(--font-display); font-weight: 800;
font-size: 15px; letter-spacing: 0.03em;
}
.niggelhoever__txt { line-height: 1; }
.niggelhoever__logo svg { width: 1.25rem; height: 1.25rem; flex: none; }
@keyframes niggelhoeverMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .niggelhoever__track { animation: none; } }