/* ==========================================================================
Bootspraxis Preview – buchen.css
v2.0.0 – LatePoint-harmonisches Visual-Design
Alle Selektoren leben unter #bxp-root oder body.bxp-preview.
========================================================================== */
/* Inter Variable Font – lokal gehostet, DSGVO-konform.
Quelle: rsms.me/inter v4.0 — deckt alle Gewichte 100-900 in normal + italic.
format('woff2') reicht — der weight-range aktiviert Variable-Font-Support. */
@font-face {
font-family: 'InterVariable';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/InterVariable.woff2') format('woff2');
}
@font-face {
font-family: 'InterVariable';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/InterVariable-Italic.woff2') format('woff2');
}
/* Body-Reset (außerhalb #bxp-root, weil der Parent ist) */
body.bxp-preview {
margin: 0;
padding: 0;
background: #ffffff;
color: #14161d;
font-family: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-feature-settings: "cv11";
overscroll-behavior-y: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ------- Design-Tokens ------- */
#bxp-root {
/* Brand */
--bxp-brand: #01bbfe; /* LP-Cyan – nur Akzent (Icons, Hover-Outlines, kleine Highlights) */
--bxp-brand-filled: #0a2a3f; /* Navy – Buttons/Tabs.active/Badges (Prototyp, 14.5:1 AAA) */
--bxp-brand-hover: #163d59; /* helleres Navy – Button-Hover */
--bxp-brand-soft: #e3f7ff; /* Hellblau – Chips active BG, Notice BG */
--bxp-brand-text: #0a2a3f; /* Navy – Text auf brand-soft */
--bxp-sea: #11a8b8; /* Sea-Teal aus Prototyp – Train-CTA optional */
--bxp-accent: #FF8440;
/* Text & Surface */
--bxp-text: #0a1c26; /* Sehr dunkles Ink – Body-Text (Prototyp --ink) */
--bxp-text-muted: #4a5b66; /* Mittel-Dunkel – Sub-Text (7.5:1 auf weiß, AAA) */
--bxp-text-soft: #6b7c87; /* hell-grau – nur unkritische Labels */
--bxp-bg: #ffffff;
--bxp-surface: #f5f7fa;
--bxp-surface-2: #ebeef2;
--bxp-border: #d8dee4;
--bxp-border-hover: #b8c1c9;
/* Shadow */
--bxp-shadow: 0 10px 30px 0 rgba(115,125,146,.11), 0 1px 2px 0 rgba(160,170,185,.6);
--bxp-shadow-hover: 0 20px 40px 0 rgba(115,125,146,.18), 0 2px 4px 0 rgba(160,170,185,.7);
--bxp-shadow-modal: 0 25px 50px rgba(0,0,0,.25);
/* Radius */
--bxp-r-card: 20px;
--bxp-r-input: 6px;
--bxp-r-pill: 9999px;
/* Font */
--bxp-font: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: var(--bxp-text);
font-family: var(--bxp-font);
font-size: 16px;
line-height: 1.5;
}
#bxp-root *,
#bxp-root *::before,
#bxp-root *::after {
box-sizing: border-box;
}
#bxp-root img {
max-width: 100%;
display: block;
}
#bxp-root a:not(.bxp-btn) {
color: inherit;
text-decoration: none;
}
#bxp-root a.bxp-btn {
text-decoration: none;
}
#bxp-root button {
font-family: inherit;
}
/* Touch-Polish: konsistenter Cyan-Tap-Highlight auf allen interaktiven
Elementen statt des Default-Hellgrau. Subtile Brand-Wiedererkennung. */
#bxp-root .bxp-btn,
#bxp-root .bxp-chip,
#bxp-root .bxp-tab,
#bxp-root .bxp-card,
#bxp-root .bxp-header-btn,
#bxp-root .bxp-notice-more,
#bxp-root [data-bxp-detail],
#bxp-root [data-bxp-account],
#bxp-root [data-bxp-scroll] {
-webkit-tap-highlight-color: rgba(1, 187, 254, .18);
}
/* ==========================================================================
Layout
========================================================================== */
.bxp-wrap {
max-width: 1180px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* ==========================================================================
Header
========================================================================== */
.bxp-header {
border-bottom: 1px solid var(--bxp-border);
background: var(--bxp-bg);
position: sticky;
top: 0;
z-index: 20;
}
.bxp-header .bxp-wrap {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 64px;
padding-top: .5rem;
padding-bottom: .5rem;
gap: 1rem;
}
.bxp-brand {
display: inline-flex;
align-items: center;
gap: .75rem;
color: inherit;
text-decoration: none;
}
.bxp-logo {
display: inline-flex;
align-items: center;
line-height: 0;
flex-shrink: 0;
}
.bxp-logo a,
.bxp-logo .custom-logo-link {
display: inline-flex;
align-items: center;
padding: 0;
line-height: 0;
text-decoration: none;
}
.bxp-logo img,
.bxp-logo .custom-logo {
height: 40px !important;
max-height: 40px !important;
width: auto !important;
max-width: 200px !important;
display: block;
object-fit: contain;
}
.bxp-brand-text {
display: flex;
flex-direction: column;
line-height: 1.05;
}
.bxp-brand-text strong {
font-size: 1.1rem;
font-weight: 700;
color: var(--bxp-brand-text);
letter-spacing: -0.01em;
}
.bxp-brand-text span {
font-size: .72rem;
color: var(--bxp-text-muted);
font-weight: 500;
letter-spacing: .02em;
margin-top: .12rem;
}
.bxp-header-actions {
display: inline-flex;
align-items: center;
gap: .5rem;
}
.bxp-header-btn {
display: inline-flex;
align-items: center;
gap: .45rem;
font-family: inherit;
font-size: .88rem;
font-weight: 600;
padding: .55rem 1rem;
border-radius: var(--bxp-r-pill);
border: 1px solid transparent;
cursor: pointer;
transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
line-height: 1;
white-space: nowrap;
}
.bxp-header-btn i {
font-size: .9rem;
}
.bxp-header-btn-primary {
background: var(--bxp-brand-filled);
color: #fff;
border-color: var(--bxp-brand-filled);
box-shadow: 0 1px 2px rgba(10,42,63,.12);
}
.bxp-header-btn-primary:hover,
.bxp-header-btn-primary:focus-visible {
background: var(--bxp-brand-hover);
border-color: var(--bxp-brand-hover);
box-shadow: 0 4px 12px rgba(10,42,63,.25);
transform: translateY(-1px);
color: #fff;
}
.bxp-header-btn-outline {
background: var(--bxp-bg);
color: var(--bxp-text);
border-color: var(--bxp-border);
}
.bxp-header-btn-outline i {
color: var(--bxp-brand-filled);
}
.bxp-header-btn-outline:hover,
.bxp-header-btn-outline:focus-visible {
color: var(--bxp-brand-text);
border-color: var(--bxp-brand-filled);
background: var(--bxp-brand-soft);
}
/* ==========================================================================
Hero – Cinematic, modern UI
Layers: bg-image (.bxp-hero-bg) → overlay (.bxp-hero-overlay) →
grain (.bxp-hero-grain) → content (.bxp-hero-inner)
Bottom-Fade in Page-Hintergrund via .bxp-hero::after.
========================================================================== */
.bxp-hero.bxp-hero-img {
position: relative;
min-height: clamp(640px, 88vh, 880px);
padding: 0;
overflow: hidden;
isolation: isolate;
display: flex;
align-items: center;
margin-bottom: 0;
color: #fff;
}
/* Sanfter Übergang vom Hero in die Page-Hintergrundfarbe — verhindert
den harten Schnitt zur nächsten Section. */
.bxp-hero.bxp-hero-img::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 140px;
background: linear-gradient(180deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0) 30%,
rgba(255,255,255,.18) 60%,
rgba(255,255,255,.65) 85%,
#ffffff 100%);
pointer-events: none;
z-index: 0;
}
.bxp-hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 55%;
z-index: -3;
transform: scale(1.04);
animation: bxp-hero-zoom 22s ease-out forwards;
}
@keyframes bxp-hero-zoom {
from { transform: scale(1.04); }
to { transform: scale(1.10); }
}
.bxp-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(102deg,
rgba(5,18,28,.82) 0%,
rgba(5,18,28,.55) 28%,
rgba(5,18,28,.25) 55%,
rgba(5,18,28,.06) 80%,
rgba(5,18,28,.00) 100%);
z-index: -2;
}
/* Subtile Film-Grain-Textur für hochwertigeren Look */
.bxp-hero-grain {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: .12;
pointer-events: none;
z-index: -1;
}
/* Hero-Inner: nutzt die globale 1180px-Wrap-Breite mit auto-margin und
linksbündiger Content-Spalte (max 640px) — entkoppelt von .bxp-wrap,
damit es nicht durch Flex-Auto-Margin im Parent zentriert wird. */
.bxp-hero-inner {
max-width: 1180px;
margin: 0 auto;
padding: 4rem 1.5rem 5rem;
width: 100%;
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: clamp(2rem, 5vw, 4.5rem);
}
/* Text-Spalte: behält die linksbündige, auf 640px begrenzte Lesespalte */
.bxp-hero-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 640px;
}
/* ===== 9:16-Video-Card mit Play-Button-Overlay ===================== */
.bxp-hero-media {
display: flex;
justify-content: center;
min-width: 0;
}
.bxp-hero-video {
position: relative;
width: clamp(280px, 26vw, 340px);
aspect-ratio: 9 / 16;
border-radius: var(--bxp-r-card);
overflow: hidden;
isolation: isolate;
background: var(--bxp-brand-filled);
box-shadow: 0 30px 70px rgba(5, 18, 28, .45), 0 0 0 1px rgba(255, 255, 255, .12) inset;
cursor: pointer;
}
.bxp-hero-video-el {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Scrim: dezenter Top-Verlauf für die Badge + sanfte Rand-Vignette für Tiefe */
.bxp-hero-video::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(180deg, rgba(5, 18, 28, .38) 0%, rgba(5, 18, 28, 0) 24%),
radial-gradient(125% 80% at 50% 44%, rgba(5, 18, 28, 0) 56%, rgba(5, 18, 28, .30) 100%);
transition: opacity .35s ease;
}
/* Dauer-Badge oben links — kollidiert nicht mit der Video-eigenen Unterzeile */
.bxp-hero-video-badge {
position: absolute;
top: .8rem;
left: .8rem;
z-index: 2;
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .35rem .7rem;
font-size: .72rem;
font-weight: 700;
letter-spacing: .02em;
color: #fff;
background: rgba(5, 18, 28, .45);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: var(--bxp-r-pill);
backdrop-filter: blur(8px) saturate(140%);
transition: opacity .3s ease, visibility .3s ease;
}
.bxp-hero-video-badge i { font-size: .6rem; opacity: .9; }
/* Play-Button: gläsernes Rund mit Cyan-Glow, an die CTA-Sprache angelehnt */
.bxp-hero-play {
position: absolute;
inset: 0;
margin: auto;
z-index: 2;
width: 78px;
height: 78px;
padding: 0 0 0 5px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
cursor: pointer;
color: #fff;
font-size: 1.55rem;
background: rgba(255, 255, 255, .16);
backdrop-filter: blur(10px) saturate(150%);
box-shadow:
0 12px 38px rgba(1, 187, 254, .5),
0 4px 12px rgba(0, 0, 0, .3),
0 0 0 1px rgba(255, 255, 255, .35) inset;
transition: transform .25s cubic-bezier(.2, .7, .3, 1), background .2s ease, box-shadow .25s ease;
}
.bxp-hero-play::before {
content: "";
position: absolute;
inset: -14px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .5);
animation: bxpHeroPlayPulse 2.6s ease-out infinite;
}
.bxp-hero-play:hover,
.bxp-hero-play:focus-visible {
transform: scale(1.08);
background: rgba(255, 255, 255, .24);
box-shadow:
0 16px 46px rgba(1, 187, 254, .65),
0 6px 16px rgba(0, 0, 0, .35),
0 0 0 1px rgba(255, 255, 255, .45) inset;
}
.bxp-hero-play:focus-visible {
outline: 3px solid var(--bxp-brand);
outline-offset: 4px;
}
@keyframes bxpHeroPlayPulse {
0% { transform: scale(.82); opacity: .6; }
70% { transform: scale(1.18); opacity: 0; }
100% { transform: scale(1.18); opacity: 0; }
}
/* Aktiver Zustand: Overlay weg, native Controls übernehmen */
.bxp-hero-video.is-playing { cursor: default; }
.bxp-hero-video.is-playing .bxp-hero-play,
.bxp-hero-video.is-playing .bxp-hero-video-badge {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.bxp-hero-video.is-playing::after { opacity: 0; }
/* Smooth Page-Load Staffel-Animation */
@media (prefers-reduced-motion: no-preference) {
.bxp-hero-eyebrow,
.bxp-hero-h1,
.bxp-hero-sub,
.bxp-hero-actions,
.bxp-hero-bubble,
.bxp-hero-media {
opacity: 0;
transform: translateY(20px);
animation: bxp-hero-rise 1s cubic-bezier(.2,.7,.3,1) forwards;
}
.bxp-hero-eyebrow { animation-delay: .10s; }
.bxp-hero-h1 { animation-delay: .22s; }
.bxp-hero-sub { animation-delay: .40s; }
.bxp-hero-actions { animation-delay: .56s; }
.bxp-hero-bubble { animation-delay: .72s; }
.bxp-hero-media { animation-delay: .34s; }
}
@keyframes bxp-hero-rise {
to { opacity: 1; transform: translateY(0); }
}
/* ---- Eyebrow: dezente Standort-Pille ------------------------------ */
.bxp-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: .55rem;
color: rgba(255,255,255,.92);
font-size: .78rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 1.5rem;
padding: .5rem 1rem;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.18);
border-radius: var(--bxp-r-pill);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.bxp-hero-eyebrow i {
color: var(--bxp-brand);
font-size: .9rem;
}
/* ---- Display-Headline --------------------------------------------- */
.bxp-hero-h1 {
font-family: 'InterVariable', 'Inter', -apple-system, system-ui, sans-serif;
/* opsz 32 = Display-Optical-Size (sharper counters, tighter spacing für große Größen).
wght via font-weight darunter pro Span gesetzt. */
font-variation-settings: "opsz" 32;
font-feature-settings: "ss03", "cv11";
font-size: clamp(2.4rem, 5.2vw, 4.15rem);
font-weight: 900;
letter-spacing: -0.045em;
line-height: 1;
color: #fff;
margin: 0;
text-shadow: 0 2px 32px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.4);
display: flex;
flex-direction: column;
gap: .6rem;
max-width: 16ch;
}
.bxp-hero-h1-line {
display: block;
}
.bxp-hero-h1-accent {
/* Same Inter Variable family wie Zeile 1, aber Italic + Black 900 für
modern bold forward Effekt — visuell kohärent, dynamisch nach vorne.
Solid Hell-Cyan statt background-clip:text — wirkt deckend statt transparent. */
font-style: italic;
font-weight: 900;
font-variation-settings: "opsz" 32;
letter-spacing: -0.045em;
line-height: 1;
color: #45d5fc;
text-shadow:
0 2px 6px rgba(0,0,0,.55),
0 0 18px rgba(0,180,240,.45),
0 0 36px rgba(0,180,240,.30);
}
/* ---- Lead-Sub ----------------------------------------------------- */
.bxp-hero-sub {
color: rgba(255,255,255,.94);
font-size: clamp(1.02rem, 1.35vw, 1.18rem);
font-weight: 400;
margin: 1.25rem 0 0;
max-width: 560px;
line-height: 1.55;
text-shadow: 0 1px 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
}
.bxp-hero-sub strong {
color: #fff;
font-weight: 700;
}
/* ---- CTA-Row mit Hint --------------------------------------------- */
.bxp-hero-actions {
margin-top: 1.85rem;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1rem 1.4rem;
}
.bxp-hero-cta {
display: inline-flex;
align-items: center;
gap: .8rem;
background: linear-gradient(105deg, #01bbfe 0%, #2bd3ff 60%, #5fd9ff 100%);
color: var(--bxp-brand-text);
border-radius: var(--bxp-r-pill);
padding: 1.4rem 2.85rem;
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.005em;
border: 0;
box-shadow:
0 24px 64px rgba(1,187,254,.55),
0 10px 22px rgba(0,0,0,.32),
0 0 0 1px rgba(255,255,255,.22) inset;
transition: transform .25s cubic-bezier(.2,.7,.3,1),
box-shadow .25s cubic-bezier(.2,.7,.3,1),
filter .2s ease;
cursor: pointer;
position: relative;
overflow: hidden;
isolation: isolate;
animation: bxpHeroCtaPulse 2.4s ease-in-out infinite;
}
@keyframes bxpHeroCtaPulse {
0%, 100% {
box-shadow:
0 24px 64px rgba(1,187,254,.55),
0 10px 22px rgba(0,0,0,.32),
0 0 0 1px rgba(255,255,255,.22) inset,
0 0 0 0 rgba(1,187,254,.55);
}
60% {
box-shadow:
0 24px 64px rgba(1,187,254,.55),
0 10px 22px rgba(0,0,0,.32),
0 0 0 1px rgba(255,255,255,.22) inset,
0 0 0 18px rgba(1,187,254,0);
}
}
@media (prefers-reduced-motion: reduce) {
.bxp-hero-cta { animation: none; }
}
.bxp-hero-cta::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.32) 50%, transparent 100%);
transform: translateX(-130%) skewX(-18deg);
transition: transform .55s cubic-bezier(.2,.7,.3,1);
pointer-events: none;
}
.bxp-hero-cta:hover::before,
.bxp-hero-cta:focus-visible::before {
transform: translateX(130%) skewX(-18deg);
}
.bxp-hero-cta i {
font-size: 1.15rem;
transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.bxp-hero-cta:hover,
.bxp-hero-cta:focus-visible {
transform: translateY(-3px) scale(1.02);
color: var(--bxp-brand-text);
box-shadow:
0 30px 72px rgba(1,187,254,.65),
0 12px 24px rgba(0,0,0,.38),
0 0 0 1px rgba(255,255,255,.28) inset;
filter: saturate(1.12);
outline: none;
animation: none;
}
.bxp-hero-cta:hover i,
.bxp-hero-cta:focus-visible i {
transform: translateX(5px);
}
.bxp-hero-cta-hint {
display: inline-flex;
align-items: center;
gap: .55rem;
color: rgba(255,255,255,.85);
font-size: .9rem;
font-weight: 500;
}
.bxp-hero-cta-hint i {
color: var(--bxp-brand);
font-size: 1rem;
}
/* ---- Trust-Bubble (Umbuchung) ------------------------------------- */
.bxp-hero-bubble {
display: inline-flex;
align-items: flex-start;
gap: .75rem;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.18);
color: rgba(255,255,255,.95);
font-size: .9rem;
font-weight: 500;
padding: .85rem 1.2rem;
border-radius: 14px;
margin: 1.5rem 0 0;
line-height: 1.45;
max-width: 540px;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
box-shadow:
0 12px 32px rgba(0,0,0,.28),
0 1px 0 rgba(255,255,255,.14) inset;
}
.bxp-hero-bubble strong {
color: #fff;
font-weight: 700;
}
.bxp-hero-bubble i {
color: var(--bxp-brand);
font-size: 1.25rem;
flex-shrink: 0;
margin-top: .1rem;
}
/* ==========================================================================
Controls-Head – „Dein Abenteuer beginnt hier"
========================================================================== */
.bxp-controls-head {
margin-bottom: 1.5rem;
}
.bxp-controls-head h2 {
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--bxp-brand-text);
margin: 0;
line-height: 1.15;
}
.bxp-controls-sub {
color: var(--bxp-text-muted);
font-size: 1.02rem;
margin: .45rem 0 0;
max-width: 640px;
line-height: 1.5;
}
/* ==========================================================================
Controls (Tabs + Chips + Notice)
========================================================================== */
.bxp-controls {
padding: 5rem 0 1.75rem;
position: relative;
}
/* Section-Eyebrow: kleines, Brand-coloriges Label über jeder Section-H2 */
.bxp-section-eyebrow {
display: inline-block;
color: var(--bxp-brand-filled);
font-size: .78rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
margin-bottom: .75rem;
position: relative;
padding-left: 1.5rem;
}
.bxp-section-eyebrow::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1rem;
height: 2px;
background: var(--bxp-brand);
border-radius: 2px;
}
.bxp-tabs {
display: inline-flex;
background: var(--bxp-surface);
border: 1px solid var(--bxp-border);
border-radius: var(--bxp-r-pill);
padding: 4px;
gap: 4px;
max-width: 100%;
}
.bxp-tab {
padding: .65rem 1.2rem;
border-radius: var(--bxp-r-pill);
border: 0;
background: transparent;
font-family: inherit;
font-weight: 500;
font-size: .92rem;
color: var(--bxp-text-muted);
cursor: pointer;
transition: color .15s ease, background .15s ease, box-shadow .15s ease;
display: inline-flex;
align-items: center;
gap: .5rem;
white-space: nowrap;
}
.bxp-tab i {
font-size: .92rem;
}
.bxp-tab-label-short {
display: none;
}
.bxp-tab.active {
background: var(--bxp-brand-filled);
color: #ffffff;
font-weight: 600;
box-shadow: 0 1px 3px rgba(10,42,63,.25);
}
.bxp-tab:not(.active):hover {
color: var(--bxp-text);
background: var(--bxp-bg);
}
.bxp-chips-row {
display: flex;
align-items: center;
gap: .75rem;
margin-top: 1rem;
flex-wrap: wrap;
}
.bxp-chips-lbl {
font-size: .82rem;
color: var(--bxp-text-muted);
font-weight: 500;
}
.bxp-chips {
display: flex;
gap: .5rem;
flex-wrap: wrap;
}
.bxp-chip {
padding: .45rem 1rem;
border: 1px solid var(--bxp-border);
border-radius: var(--bxp-r-pill);
background: var(--bxp-bg);
color: var(--bxp-text-muted);
font-size: .85rem;
font-family: inherit;
cursor: pointer;
transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.bxp-chip:hover {
color: var(--bxp-text);
border-color: var(--bxp-border-hover);
}
.bxp-chip.active {
background: var(--bxp-brand-soft);
color: var(--bxp-brand-text);
border-color: var(--bxp-brand-filled);
font-weight: 600;
}
/* Notice */
.bxp-notice-wrap {
margin-top: 1.25rem;
}
.bxp-notice {
display: none;
background: var(--bxp-brand-soft);
border: 1px solid #b9e1f3;
border-radius: var(--bxp-r-input);
padding: 1.1rem 1.3rem;
color: var(--bxp-text);
}
.bxp-notice.show {
display: block;
}
.bxp-notice > strong {
display: flex;
align-items: center;
gap: .5rem;
font-weight: 700;
font-size: 1rem;
margin-bottom: .65rem;
color: var(--bxp-brand-text);
}
.bxp-notice > strong > i {
color: var(--bxp-brand-filled);
font-size: 1.05rem;
}
.bxp-notice-tag {
margin-left: auto;
background: var(--bxp-brand-filled);
color: #fff;
font-size: .68rem;
font-weight: 700;
padding: .2rem .6rem;
border-radius: var(--bxp-r-pill);
letter-spacing: .05em;
text-transform: uppercase;
}
.bxp-notice ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: .4rem .9rem;
font-size: .9rem;
color: var(--bxp-text);
font-weight: 500;
}
.bxp-notice ul > li {
position: relative;
padding-left: 1.15rem;
}
.bxp-notice ul > li::before {
content: "";
position: absolute;
left: 0;
top: .55em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--bxp-brand-filled);
}
/* Toggle-Pill — auf Mobile prominenter Solid-Cyan-Button.
Auf Desktop ≥ 768px ausgeblendet (alle Items immer sichtbar, kein Toggle nötig). */
.bxp-notice-more {
display: flex;
width: 100%;
margin-top: 1.1rem;
padding: .85rem 1.25rem;
background: var(--bxp-brand);
border: 0;
border-radius: 999px;
color: #fff;
font-size: .95rem;
font-weight: 700;
cursor: pointer;
align-items: center;
justify-content: center;
gap: .55rem;
min-height: 44px;
box-shadow: 0 4px 14px rgba(1, 187, 254, .22);
transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
font-family: inherit;
letter-spacing: -0.005em;
-webkit-tap-highlight-color: transparent;
}
.bxp-notice-more:hover,
.bxp-notice-more:focus-visible {
background: var(--bxp-brand-filled);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(1, 187, 254, .3);
outline: none;
}
.bxp-notice-more:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(1, 187, 254, .2);
}
.bxp-notice-more i {
font-size: .85rem;
transition: transform .25s ease;
}
.bxp-notice.open .bxp-notice-more i {
transform: rotate(180deg);
}
/* Fade-Gradient als visueller Hint, dass Items abgeschnitten sind */
.bxp-notice { position: relative; }
.bxp-notice:not(.open) ul { position: relative; }
.bxp-notice:not(.open) ul::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -.5rem;
height: 1.25rem;
background: linear-gradient(to bottom, rgba(227, 247, 255, 0) 0%, var(--bxp-brand-soft) 90%);
pointer-events: none;
}
/* Standardmäßig (Mobile) nur die ersten 2 Stichpunkte sichtbar – Rest hinter Akkordeon */
.bxp-notice ul > li:nth-child(n+3) {
display: none;
}
.bxp-notice.open ul > li:nth-child(n+3) {
display: list-item;
}
/* Desktop ≥ 768px: 4-Spalten-Grid hat genug Platz für alle 10 Items.
Toggle-Pill und Fade-Gradient werden ausgeblendet, alle Items immer sichtbar. */
@media (min-width: 768px) {
.bxp-notice ul > li:nth-child(n+3) {
display: list-item;
}
.bxp-notice-more {
display: none;
}
.bxp-notice:not(.open) ul::after {
display: none;
}
}
/* Inline-Text-Links in den Notice-Bullets.
Höhere Specificity (#bxp-root + Tag + Class), damit die generic
`#bxp-root a:not(.bxp-btn) { color: inherit; text-decoration: none }`
Regel nicht durchgreift und Brand-Color/Underline plattmacht.
Style: Navy-Text + Cyan-Underline = optimal lesbar auf brand-soft BG. */
#bxp-root a.bxp-notice-link,
#bxp-root button.bxp-notice-link {
color: var(--bxp-brand-filled);
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--bxp-brand);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
text-decoration-skip-ink: none;
background: transparent;
border: 0;
padding: 0;
margin: 0;
font: inherit;
cursor: pointer;
transition: color .15s ease, text-decoration-color .15s ease, text-decoration-thickness .15s ease;
-webkit-tap-highlight-color: rgba(1, 187, 254, .18);
}
#bxp-root a.bxp-notice-link:hover,
#bxp-root a.bxp-notice-link:focus-visible,
#bxp-root button.bxp-notice-link:hover,
#bxp-root button.bxp-notice-link:focus-visible {
color: var(--bxp-brand);
text-decoration-color: var(--bxp-brand-filled);
text-decoration-thickness: 3px;
outline: none;
}
/* Subtile External-Link-Indikator: ↗ nach externen -Tags (NICHT bei
Button-Modal-Triggern). Animiert beim Hover für Polish. */
#bxp-root a.bxp-notice-link[target="_blank"]::after {
content: " ↗";
display: inline-block;
margin-left: 1px;
font-size: .82em;
font-weight: 700;
color: var(--bxp-brand);
text-decoration: none;
transition: transform .15s ease, color .15s ease;
}
#bxp-root a.bxp-notice-link[target="_blank"]:hover::after,
#bxp-root a.bxp-notice-link[target="_blank"]:focus-visible::after {
transform: translate(2px, -2px);
color: var(--bxp-brand-filled);
}
/* Mux-Video-Button: kleines Play-Glyph statt ↗-Pfeil */
#bxp-root button.bxp-notice-link[data-bxp-mux]::before {
content: "▶ ";
display: inline-block;
margin-right: 2px;
font-size: .72em;
color: var(--bxp-brand);
text-decoration: none;
vertical-align: 1px;
transition: color .15s ease;
}
#bxp-root button.bxp-notice-link[data-bxp-mux]:hover::before,
#bxp-root button.bxp-notice-link[data-bxp-mux]:focus-visible::before {
color: var(--bxp-brand-filled);
}
/* Video-Modal (Mux HLS) */
.bxp-modal.bxp-modal-video {
background: #000;
padding: 0;
max-width: 880px;
width: 92vw;
position: relative;
border-radius: var(--bxp-r-input);
overflow: hidden;
box-shadow: var(--bxp-shadow-modal);
}
.bxp-modal-video .bxp-video-el {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
background: #000;
}
.bxp-modal-video > .bxp-close {
position: absolute;
top: .5rem;
right: .5rem;
z-index: 2;
width: 2.25rem;
height: 2.25rem;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, .55);
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s ease;
}
.bxp-modal-video > .bxp-close:hover,
.bxp-modal-video > .bxp-close:focus-visible {
background: rgba(0, 0, 0, .8);
outline: none;
}
/* Video-Modal (Mux HLS) */
.bxp-modal.bxp-modal-video {
background: #000;
padding: 0;
max-width: 880px;
width: 92vw;
position: relative;
border-radius: var(--bxp-r-input);
overflow: hidden;
}
.bxp-modal-video .bxp-video-el {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
background: #000;
}
.bxp-modal-video > .bxp-close {
position: absolute;
top: .5rem;
right: .5rem;
z-index: 2;
width: 2.25rem;
height: 2.25rem;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, .55);
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.bxp-modal-video > .bxp-close:hover,
.bxp-modal-video > .bxp-close:focus-visible {
background: rgba(0, 0, 0, .8);
outline: none;
}
/* ==========================================================================
Grid Section
========================================================================== */
.bxp-grid-section {
padding: .25rem 0 3rem;
}
.bxp-sec-head {
display: flex;
align-items: baseline;
gap: .75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.bxp-sec-head h2 {
font-size: 1.55rem;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0;
color: var(--bxp-brand-text);
}
.bxp-count {
background: var(--bxp-brand-soft);
color: var(--bxp-brand-text);
font-size: .78rem;
font-weight: 600;
padding: .25rem .7rem;
border-radius: var(--bxp-r-pill);
}
.bxp-grid {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
/* ==========================================================================
Card
========================================================================== */
.bxp-card {
background: var(--bxp-bg);
border: 1px solid var(--bxp-border);
border-radius: var(--bxp-r-card);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
animation: bxpFadeUp .35s ease both;
}
.bxp-card:hover {
transform: translateY(-2px);
box-shadow: var(--bxp-shadow-hover);
border-color: var(--bxp-border-hover);
}
.bxp-card-thumb {
position: relative;
aspect-ratio: 16/11;
overflow: hidden;
background: var(--bxp-surface-2);
}
.bxp-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease;
}
.bxp-card:hover .bxp-card-thumb img {
transform: scale(1.04);
}
.bxp-card-thumb-ph {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--bxp-brand);
font-size: 3rem;
background: linear-gradient(135deg, var(--bxp-surface-2) 0%, #e4e9ef 100%);
}
.bxp-card-badge {
position: absolute;
top: .75rem;
left: .75rem;
background: var(--bxp-brand-filled);
color: #fff;
padding: .25rem .65rem;
border-radius: var(--bxp-r-pill);
font-size: .68rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
box-shadow: 0 2px 6px rgba(10,42,63,.25);
}
.bxp-card-pill {
position: absolute;
top: .75rem;
right: .75rem;
background: rgba(255,255,255,.95);
color: var(--bxp-text);
padding: .25rem .55rem;
border-radius: var(--bxp-r-pill);
font-size: .72rem;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: .3rem;
box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.bxp-card-pill i {
color: var(--bxp-brand);
font-size: .75rem;
}
.bxp-card-body {
padding: 1.1rem 1.2rem 1.25rem;
display: flex;
flex-direction: column;
gap: .6rem;
flex: 1;
}
.bxp-card-title {
display: flex;
align-items: flex-start;
gap: .55rem;
}
.bxp-card-title i {
color: var(--bxp-brand-filled);
font-size: 1.1rem;
flex-shrink: 0;
margin-top: .25rem;
}
.bxp-card-title h3 {
font-size: 1.15rem;
font-weight: 700;
line-height: 1.3;
margin: 0;
color: var(--bxp-brand-text);
letter-spacing: -0.01em;
}
.bxp-card-dur {
color: var(--bxp-text-muted);
font-size: .85rem;
margin: 0;
display: inline-flex;
align-items: center;
gap: .4rem;
}
.bxp-card-dur i {
font-size: .85rem;
}
.bxp-card-desc {
color: var(--bxp-text-muted);
font-size: .92rem;
line-height: 1.55;
margin: 0;
font-weight: 400;
}
.bxp-card-locs {
display: flex;
gap: .35rem;
flex-wrap: wrap;
margin-top: .15rem;
}
.bxp-card-loc {
background: var(--bxp-surface);
color: var(--bxp-text);
padding: .25rem .6rem;
border-radius: var(--bxp-r-pill);
font-size: .74rem;
font-weight: 500;
border: 1px solid var(--bxp-border);
}
.bxp-card-loc-online {
background: var(--bxp-brand-soft);
color: var(--bxp-brand-text);
border-color: #b9e1f3;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: .35rem;
}
.bxp-card-price {
display: flex;
align-items: baseline;
gap: .35rem;
margin-top: auto;
padding-top: .35rem;
}
.bxp-card-price-ab {
color: var(--bxp-text-muted);
font-size: .85rem;
font-weight: 400;
}
.bxp-card-price-val {
font-size: 1.65rem;
font-weight: 800;
color: var(--bxp-brand-text);
letter-spacing: -0.02em;
}
.bxp-card-price-unit {
color: var(--bxp-text-muted);
font-size: .8rem;
}
.bxp-card-alloc {
color: var(--bxp-text-muted);
font-size: .78rem;
display: inline-flex;
align-items: center;
gap: .35rem;
margin-top: -.25rem;
}
.bxp-card-alloc i {
color: var(--bxp-brand);
font-size: .8rem;
}
.bxp-card-actions {
display: flex;
gap: .5rem;
padding-top: .35rem;
}
.bxp-card-actions > * {
flex: 1;
}
/* ==========================================================================
Buttons
========================================================================== */
.bxp-btn {
padding: .75rem 1.1rem;
border-radius: var(--bxp-r-card);
border: 0;
font-family: inherit;
font-weight: 600;
font-size: .92rem;
cursor: pointer;
transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .45rem;
text-decoration: none;
white-space: nowrap;
}
.bxp-btn-primary {
background: var(--bxp-brand-filled);
color: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.bxp-btn-primary:hover,
.bxp-btn-primary:focus-visible {
background: var(--bxp-brand-hover);
box-shadow: 0 6px 18px rgba(10,42,63,.25);
transform: translateY(-1px);
color: #fff;
}
.bxp-btn-outline {
background: transparent;
color: var(--bxp-text);
border: 1px solid var(--bxp-border);
}
.bxp-btn-outline:hover,
.bxp-btn-outline:focus-visible {
background: var(--bxp-surface);
border-color: var(--bxp-border-hover);
color: var(--bxp-text);
}
.bxp-btn-block {
width: 100%;
}
/* WhatsApp-Kontakt-Button in den Service-Karten.
Desktop: kompaktes Icon-Quadrat neben den Haupt-CTAs (keine Konkurrenz zum
Buchen-CTA). Hover/Focus färbt sich WhatsApp-Grün, damit der Brand-Bezug
eindeutig wird, ohne den Default-State zu dominieren. Mobile (<= 400px):
wird zu einem voll-breiten Button mit sichtbarem "Fragen?"-Label. */
#bxp-root .bxp-card-actions > .bxp-wa-btn {
flex: 0 0 auto;
width: 2.85rem;
padding: 0;
aspect-ratio: 1 / 1;
border-radius: var(--bxp-r-card);
background: var(--bxp-bg);
color: var(--bxp-brand-filled);
border: 1px solid var(--bxp-border);
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
#bxp-root .bxp-card-actions > .bxp-wa-btn i {
font-size: 1.15rem;
line-height: 1;
}
#bxp-root .bxp-card-actions > .bxp-wa-btn:hover,
#bxp-root .bxp-card-actions > .bxp-wa-btn:focus-visible {
background: #25D366;
color: #fff;
border-color: #25D366;
box-shadow: 0 6px 18px rgba(37, 211, 102, .35);
transform: translateY(-1px);
}
#bxp-root .bxp-card-actions > .bxp-wa-btn:active {
background: #1da851;
border-color: #1da851;
transform: translateY(0);
box-shadow: 0 1px 4px rgba(37, 211, 102, .25);
}
/* Label nur on Mobile sichtbar — Desktop bleibt Icon-only. SR-only-Pattern,
damit Screenreader das Label trotzdem ansagen. aria-label hat Vorrang. */
.bxp-wa-btn-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
Trust Strip
========================================================================== */
.bxp-trust {
border-top: 1px solid var(--bxp-border);
border-bottom: 1px solid var(--bxp-border);
background: var(--bxp-surface);
padding: 1.75rem 0;
}
.bxp-trust .bxp-wrap {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
}
.bxp-trust-item {
display: flex;
flex-direction: column;
align-items: center;
gap: .35rem;
text-align: center;
padding: .25rem .25rem;
}
.bxp-trust-item i {
color: var(--bxp-brand-filled);
font-size: 1.5rem;
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--bxp-bg);
border: 1px solid var(--bxp-border);
margin-bottom: .35rem;
box-shadow: 0 2px 6px rgba(10,42,63,.08);
}
.bxp-trust-item b {
font-weight: 700;
font-size: .95rem;
color: var(--bxp-brand-text);
}
.bxp-trust-item span {
color: var(--bxp-text-muted);
font-size: .82rem;
font-weight: 500;
}
/* ==========================================================================
Footer
========================================================================== */
.bxp-footer {
background: var(--bxp-brand-filled);
color: #d8e1e8;
padding: 3rem 0 1.5rem;
}
.bxp-footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
gap: 2.5rem;
padding-bottom: 2.25rem;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.bxp-footer-col h4 {
color: #fff;
font-size: .82rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
margin: 0 0 1rem;
}
.bxp-footer-col ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: .55rem;
}
.bxp-footer-col ul a {
color: #b8c5cf;
font-size: .9rem;
font-weight: 500;
transition: color .15s ease;
}
.bxp-footer-col ul a:hover {
color: #fff;
}
.bxp-footer-brand .bxp-brand-text strong {
color: #fff;
font-size: 1.2rem;
}
.bxp-footer-brand .bxp-brand-text span {
color: var(--bxp-brand);
font-weight: 600;
}
.bxp-footer-tag {
color: #a8b5bf;
font-size: .88rem;
line-height: 1.55;
margin: 1rem 0 0;
max-width: 300px;
}
.bxp-footer-action {
display: inline-flex;
align-items: center;
gap: .55rem;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
color: #d8e1e8;
font-family: inherit;
font-size: .88rem;
font-weight: 500;
padding: .6rem .9rem;
border-radius: var(--bxp-r-pill);
cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease;
width: 100%;
margin-bottom: .55rem;
text-align: left;
}
.bxp-footer-action i {
color: var(--bxp-brand);
font-size: .95rem;
width: 16px;
text-align: center;
}
.bxp-footer-action:hover,
.bxp-footer-action:focus-visible {
background: rgba(255,255,255,.1);
border-color: var(--bxp-brand);
color: #fff;
}
.bxp-footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
padding-top: 1.5rem;
}
.bxp-footer-copy {
color: #a8b5bf;
font-size: .85rem;
}
.bxp-footer-links {
display: flex;
gap: 1.2rem;
}
.bxp-footer-links a {
color: #a8b5bf;
font-size: .85rem;
text-decoration: none;
transition: color .15s ease;
}
.bxp-footer-links a:hover {
color: #fff;
}
/* ==========================================================================
Overlay + Modal (Detail-Panel)
========================================================================== */
.bxp-overlay {
position: fixed;
inset: 0;
background: rgba(20,22,29,.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 100;
display: none;
align-items: flex-start;
justify-content: center;
overflow-y: auto;
padding: 2rem 1rem;
}
.bxp-overlay.open {
display: flex;
}
.bxp-modal {
background: var(--bxp-bg);
border-radius: var(--bxp-r-card);
box-shadow: var(--bxp-shadow-modal);
width: 100%;
max-width: 760px;
overflow: hidden;
animation: bxpModalIn .25s ease both;
}
/* Account-Modal: Inline-Embed des LP-Customer-Cabinet (Lazy AJAX) */
.bxp-modal-frame {
background: var(--bxp-bg);
border-radius: var(--bxp-r-card);
box-shadow: var(--bxp-shadow-modal);
width: 100%;
max-width: 880px;
max-height: 88vh;
display: flex;
flex-direction: column;
overflow: hidden;
animation: bxpModalIn .25s ease both;
}
.bxp-modal-frame-head {
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--bxp-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
background: var(--bxp-surface);
flex-shrink: 0;
}
.bxp-modal-frame-head h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
color: var(--bxp-brand-text);
letter-spacing: -0.01em;
display: inline-flex;
align-items: center;
gap: .55rem;
}
.bxp-modal-frame-head h3 i {
color: var(--bxp-brand-filled);
}
.bxp-modal-frame-close {
width: 36px;
height: 36px;
border: 0;
border-radius: 50%;
background: var(--bxp-bg);
color: var(--bxp-text);
font-size: 1rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s ease, color .15s ease;
flex-shrink: 0;
}
.bxp-modal-frame-close:hover {
background: var(--bxp-brand-soft);
color: var(--bxp-brand-text);
}
.bxp-modal-body {
flex: 1;
min-height: 280px;
overflow-y: auto;
overflow-x: hidden;
padding: 1.25rem 1.5rem 1.5rem;
background: var(--bxp-bg);
}
/* LP-Customer-Cabinet rendert eigenen Wrapper – nur defensiv Innenabstand neutralisieren */
.bxp-modal-body .latepoint-w {
padding: 0;
margin: 0;
}
/* Loading / Error – Placeholder-States im Modal-Body */
.bxp-loading,
.bxp-error {
display: flex;
align-items: center;
justify-content: center;
gap: .55rem;
padding: 3rem 1rem;
text-align: center;
color: var(--bxp-text-muted);
font-size: .95rem;
font-weight: 500;
}
.bxp-loading i {
font-size: 1.4rem;
color: var(--bxp-brand-filled);
}
.bxp-error {
color: #b34a3c;
}
.bxp-dhero {
position: relative;
min-height: 200px;
background: linear-gradient(135deg, #e3f7ff 0%, #cdeaf7 100%);
color: var(--bxp-text);
overflow: hidden;
}
.bxp-dhero.rent {
background: linear-gradient(135deg, #14161d 0%, #2a3142 100%);
color: #fff;
}
.bxp-dhero.has-img {
min-height: 280px;
}
.bxp-dhero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.bxp-dhero.has-img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%);
pointer-events: none;
}
.bxp-dhero-icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: var(--bxp-brand);
}
.bxp-dhero.rent .bxp-dhero-icon {
color: var(--bxp-brand-soft);
}
.bxp-dhero-close {
position: absolute;
top: .8rem;
right: .8rem;
width: 36px;
height: 36px;
border-radius: 50%;
border: 0;
background: rgba(255,255,255,.95);
color: var(--bxp-text);
font-size: 1rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: background .15s ease;
}
.bxp-dhero-close:hover {
background: #fff;
}
.bxp-dhero-label {
position: absolute;
left: 1.5rem;
bottom: 1.25rem;
right: 4rem;
z-index: 1;
color: #fff;
}
.bxp-dhero:not(.has-img) .bxp-dhero-label {
color: var(--bxp-text);
}
.bxp-dhero.rent:not(.has-img) .bxp-dhero-label {
color: #fff;
}
.bxp-dhero-ey {
font-size: .78rem;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .85;
margin-bottom: .25rem;
font-weight: 500;
}
.bxp-dhero-label h2 {
margin: 0;
font-size: clamp(1.35rem, 2.5vw, 1.75rem);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.2;
}
.bxp-dbody {
padding: 1.5rem 1.75rem 1.75rem;
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.bxp-video {
background: var(--bxp-surface-2);
border-radius: var(--bxp-r-input);
height: 160px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: .5rem;
color: var(--bxp-text-muted);
}
.bxp-video i {
font-size: 2.5rem;
color: var(--bxp-brand);
opacity: .55;
}
.bxp-video-label {
font-size: .85rem;
}
.bxp-dh {
font-size: 1.02rem;
font-weight: 700;
color: var(--bxp-brand-text);
margin: 0;
display: flex;
align-items: center;
gap: .55rem;
padding-bottom: .45rem;
border-bottom: 1px solid var(--bxp-border);
letter-spacing: -0.01em;
}
.bxp-dh i {
color: var(--bxp-brand-filled);
font-size: .95rem;
}
.bxp-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: .6rem;
}
.bxp-gtile {
display: block;
aspect-ratio: 1 / 1;
border-radius: var(--bxp-r-input);
overflow: hidden;
background: var(--bxp-surface-2);
border: 1px solid var(--bxp-border);
color: var(--bxp-text-muted);
position: relative;
padding: 0;
cursor: zoom-in;
font-family: inherit;
}
button.bxp-gtile {
/* Reset Default-Button-Look — wir nutzen