:root {
--bc-primary: #007bff;
--bc-primary-hover: #0056b3;
--bc-bg: #f8f9fa;
--bc-surface: #ffffff;
--bc-text: #212529;
--bc-text-muted: #6c757d;
--bc-border: #e9ecef;
/*
The open dropdown list is drawn by the browser, not by this stylesheet,
and it takes the text colour from the control while keeping its own
white background. In a dark scheme that means white on white — the list
of models was there but unreadable.
It needs its own pair, because --bc-surface is not always usable here:
the glass theme sets it to rgba(255,255,255,0.03), which over the
browser's white popup renders as plain white.
*/
--bc-option-bg: #ffffff;
--bc-option-text: #212529;
--bc-radius: 12px;
--bc-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
--bc-shadow-hover: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
--bc-transition: all 0.3s ease;
}
/* Dark mode support - could be toggled via class on body */
@media (prefers-color-scheme: dark) {
:root {
--bc-bg: #0f172a;
--bc-surface: #1e293b;
--bc-text: #f8fafc;
--bc-text-muted: #94a3b8;
--bc-border: #334155;
--bc-shadow: 0 4px 6px -1px rgba(0,0,0,0.5);
--bc-option-bg: #1e293b;
--bc-option-text: #f8fafc;
}
}
/* Every dropdown the plugin renders — the grid, the standalone search form
and the detail page all sit inside one of these two wrappers. */
.basiscars-wrapper select option,
.basiscars-wrapper select optgroup,
.basiscars-single-wrapper select option,
.basiscars-single-wrapper select optgroup {
background-color: var(--bc-option-bg, #ffffff);
color: var(--bc-option-text, #212529);
}
/* An entry with nothing left behind it is shown, but greyed and unselectable.
Removing it would be worse: an option that disappears cannot be deselected,
and a filter list that changes length under the cursor is unusable. */
.basiscars-wrapper select option:disabled {
color: var(--bc-text-muted, #6c757d);
font-style: italic;
}
/* The same state on a filter tile, in every design variant. */
.bc-visual-item.bc-visual-empty {
opacity: 0.35;
cursor: not-allowed;
filter: grayscale(100%);
}
.bc-visual-item.bc-visual-empty:hover {
transform: none;
box-shadow: none;
}
.basiscars-wrapper {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--bc-text);
background: var(--bc-bg);
padding: 2rem 0;
box-sizing: border-box;
}
.basiscars-wrapper * {
box-sizing: inherit;
}
/*
* Dasselbe Kastenmodell fuer die Detailseite.
*
* Sie steht nicht in .basiscars-wrapper, sondern in einem eigenen Kasten —
* und hat die zwei Zeilen darueber deshalb noch nie abbekommen. Alles auf der
* Fahrzeugseite rechnete also nach der Voreinstellung des Browsers: bei
* "width: 100%" kommt der Innenabstand oben drauf, statt hineinzuzaehlen.
*
* Elf Regeln im Stylesheet kombinieren genau das. Der Textkasten des
* Titelbereichs in vier Anordnungen, jedes Feld des Kontaktformulars, der
* Absendeknopf — alle waren um ihren Innenabstand breiter als der Platz, den
* sie hatten. Auf dem Schreibtisch bleibt das unter der Wahrnehmungsschwelle,
* auf einem Telefon sind sechzig Pixel ein Sechstel des Bildschirms.
*
* An einer Stelle war das schon einmal aufgefallen und dort einzeln
* ausgebessert worden.
*/
.basiscars-single-wrapper * {
box-sizing: inherit;
}
.bc-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/*
* Every gap on the detail page comes from here, and from nothing else.
*
* Before this the spacing was a patchwork: the hero carried margin-bottom:40px,
* the vehicle data box an inline margin-bottom:20px, the enquiry form nothing
* at all, and only five of the eight blocks had the class this rule used to
* name. So the form had a usable gap in exactly one position — last, where the
* wrapper's own padding stood in for it — and every other arrangement looked
* broken. Reordering the blocks is a documented feature; the spacing has to
* survive any order it produces.
*
* The rule is adjacency, on each level that holds blocks: a gap exists between
* two neighbours and nowhere else, so nothing dangles at the top or bottom of a
* column no matter which block ends up there.
*/
/*
* The exposé is excluded because it is not a block of the page. It is
* display:none on screen, and in print it is lifted out of the flow with
* position:absolute and top:0 — where a top margin does not collapse away but
* pushes the sheet down, putting 40 mm of nothing above the letterhead of
* every printed page.
*/
.basiscars-single-wrapper > * + *:not(.bc-print-sheet),
.bc-main-content > * + *,
.bc-sidebar > * + * {
margin-top: var(--bc-block-gap, 40px);
}
/* Base Styles */
.basiscars-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 2rem;
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
}
/*
* Dieselbe Null wie bei den Spalten der Detailseite.
*
* Ein Grid-Kind laesst sich von Haus aus nicht schmaler machen, als sein
* Inhalt mindestens braucht. In der Filterspalte stehen Auswahlfelder, und
* die Mindestbreite eines Auswahlfeldes ist seine breiteste Option — ein
* langer Modellname genuegt, damit die Spalte ihre 280 Pixel sprengt und die
* Seite einen Balken zum Schieben bekommt.
*/
.basiscars-sidebar,
.basiscars-layout > main {
min-width: 0;
}
.basiscars-layout.bc-no-sidebar {
grid-template-columns: 1fr;
}
@media (max-width: 992px) {
.basiscars-layout {
grid-template-columns: 1fr;
}
}
/* Sidebar / Filters */
.basiscars-sidebar {
background: var(--bc-surface);
border-radius: var(--bc-radius);
padding: 1.5rem;
box-shadow: var(--bc-shadow);
height: fit-content;
position: sticky;
top: 2rem;
}
.basiscars-sidebar-title {
color: var(--bc-text);
}
[data-theme="glass"] .basiscars-sidebar-title,
[data-theme="dark"] .basiscars-sidebar-title {
color: #f8fafc;
}
.basiscars-filter-group {
margin-bottom: 1.5rem;
}
.basiscars-filter-group label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--bc-text-muted);
}
.basiscars-filter-group select,
.basiscars-filter-group input {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--bc-border);
border-radius: 8px;
background: var(--bc-surface);
color: var(--bc-text);
font-size: 1rem;
line-height: 1.5 !important;
height: auto !important;
transition: var(--bc-transition);
}
.basiscars-filter-group select:focus,
.basiscars-filter-group input:focus {
outline: none;
border-color: var(--bc-primary);
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
/*
* Der Filter auf dem Handy.
*
* Die Schaltflaeche ist ein reines Handy-Bedienelement — auf einem breiten
* Schirm steht die Filterspalte einfach da und braucht nichts zum Aufklappen.
*/
.bc-filter-toggle {
display: none;
}
@media (max-width: 992px) {
/*
* Aus der Spalte wird eine Zeile ueber den Ergebnissen. Acht Filtergruppen
* sind dort rund siebenhundert Pixel, die vor dem ersten Auto stehen — also
* wird daraus eine Zeile, die sich auf Wunsch oeffnet.
*/
.basiscars-sidebar {
/*
* sticky heftete einen vollbreiten Kasten an den oberen Rand. Kleben
* konnte er an nichts; im Weg stehen konnte er den Ergebnissen sehr
* wohl.
*/
position: static;
padding: 0.75rem;
}
/* Die Ueberschrift sagt dasselbe wie die Schaltflaeche darunter. */
.basiscars-sidebar .basiscars-sidebar-title {
display: none;
}
.bc-filter-toggle {
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
padding: 0.85rem 1rem;
background: transparent;
border: 1px solid var(--bc-border);
border-radius: 8px;
color: var(--bc-text);
font: inherit;
font-weight: 600;
cursor: pointer;
}
.bc-filter-toggle-label {
flex: 1;
text-align: left;
}
/*
* Eingeklappt sieht man nicht mehr, wonach gefiltert wird — die Zahl ist
* das Einzige, was noch davon erzaehlt.
*/
.bc-filter-active-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
height: 1.5rem;
padding: 0 0.4rem;
border-radius: 999px;
background: var(--bc-primary);
color: var(--bc-btn-color, #ffffff);
font-size: 0.8rem;
line-height: 1;
}
.basiscars-sidebar.bc-filters-collapsed .bc-filter-toggle-chevron {
transform: rotate(-90deg);
}
.basiscars-sidebar.bc-filters-collapsed .bc-filter-form {
display: none;
}
.basiscars-sidebar .bc-filter-form {
margin-top: 1rem;
}
}
/*
* Ein Klassen-Selektor schlaegt die eingebaute Regel fuer [hidden], sonst waere
* die Null-Zahl oben ein leerer Kreis, der immer zu sehen ist.
*/
.bc-filter-active-count[hidden] {
display: none;
}
.bc-filter-toggle-chevron {
transition: transform 0.2s ease;
}
/* Grid */
.basiscars-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.basiscars-wrapper .bc-grid-classic a.bc-card-style-overlay {
flex-direction: column !important;
}
.basiscars-wrapper .bc-grid-classic a.bc-card-style-overlay .basiscars-card-image {
width: 100% !important;
max-width: none !important;
flex: none !important;
border-right: none !important;
border-bottom: 1px solid var(--bc-border) !important;
}
/* Card */
.basiscars-card,
.basiscars-wrapper a.basiscars-card {
position: relative;
background: var(--bc-surface);
border-radius: var(--bc-radius);
overflow: hidden;
box-shadow: var(--bc-shadow);
transition: var(--bc-transition);
display: flex;
flex-direction: column;
text-decoration: none !important;
color: var(--bc-text) !important;
border: 1px solid var(--bc-border);
}
/* This selector is declared more than once in this file. The later block wins
per property, so editing this copy may change nothing — search for the
selector before you edit it. No line numbers here: they went stale. */
.basiscars-card-image {
width: 100%;
height: 220px;
object-fit: cover;
border-bottom: 1px solid var(--bc-border);
}
.basiscars-card-content {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.basiscars-card-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
line-height: 1.2;
color: var(--bc-text) !important;
}
.basiscars-card-price {
font-size: 1.5rem;
font-weight: 800;
/* Same fallback as the detail page, so one setting covers both. */
color: var(--bc-price, var(--bc-primary));
margin: 0 0 1rem 0;
}
.basiscars-card-specs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
margin-top: auto;
font-size: 0.875rem;
color: var(--bc-text-muted);
}
.basiscars-spec-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.basiscars-spec-item svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Loading State */
.basiscars-loading {
display: flex;
justify-content: center;
align-items: center;
min-height: 200px;
grid-column: 1 / -1;
}
.basiscars-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--bc-border);
border-top-color: var(--bc-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Buttons */
/* This selector is declared more than once in this file. The later block wins
per property, so editing this copy may change nothing — search for the
selector before you edit it. No line numbers here: they went stale. */
.bc-btn {
display: inline-block;
padding: 12px 30px;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
text-align: center;
transition: all 0.2s ease;
cursor: pointer;
border: none;
font-family: inherit;
}
#basiscars-load-more {
min-width: 200px;
}
/* Gallery & Lightbox */
/* This selector is declared more than once in this file. The later block wins
per property, so editing this copy may change nothing — search for the
selector before you edit it. No line numbers here: they went stale. */
.bc-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
margin-top: 20px;
}
/* This selector is declared more than once in this file. The later block wins
per property, so editing this copy may change nothing — search for the
selector before you edit it. No line numbers here: they went stale. */
.bc-gallery-img {
width: 100%;
height: 120px;
object-fit: cover;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s;
}
/* This selector is declared more than once in this file. The later block wins
per property, so editing this copy may change nothing — search for the
selector before you edit it. No line numbers here: they went stale. */
.bc-lightbox {
display: none;
position: fixed;
z-index: 99999;
padding-top: 60px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0,0,0,0.9);
}
/* This selector is declared more than once in this file. The later block wins
per property, so editing this copy may change nothing — search for the
selector before you edit it. No line numbers here: they went stale. */
.bc-lightbox-content {
margin: auto;
display: block;
max-width: 90%;
max-height: 80vh;
object-fit: contain;
}
.bc-lightbox-close:hover {
color: #bbb;
}
/* This selector is declared more than once in this file. The later block wins
per property, so editing this copy may change nothing — search for the
selector before you edit it. No line numbers here: they went stale. */
.bc-lightbox-prev, .bc-lightbox-next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 30px;
transition: 0.3s;
user-select: none;
background-color: rgba(0,0,0,0.5);
border-radius: 4px;
text-decoration: none !important;
}
/* This selector is declared more than once in this file. The later block wins
per property, so editing this copy may change nothing — search for the
selector before you edit it. No line numbers here: they went stale. */
.bc-lightbox-prev:hover, .bc-lightbox-next:hover {
background-color: rgba(0,0,0,0.8);
color: white;
text-decoration: none !important;
}
/* From shortcode-search.php */
.basiscars-standalone-search .basiscars-search-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
align-items: end;
}
.basiscars-standalone-search .basiscars-filter-group {
margin-bottom: 0;
}
/* From shortcode-single.php */
/* Modern Glassmorphism & Layout Styles */
.basiscars-single-wrapper {
font-family: system-ui, -apple-system, sans-serif;
/*
* This was a fixed #1f2937, and it is why the "Text" colour setting never
* reached the detail page: the title, the section headings, the print
* button and everything else inheriting from here kept a dark grey no
* matter what was configured — including in the dark scheme, where it sat
* on a dark background.
*/
color: var(--bc-text);
max-width: 1200px;
margin: 0 auto;
/* Siehe oben: der Innenabstand zaehlt in die Breite hinein, nicht oben
drauf. Ohne das war jedes Feld dieser Seite zu breit fuer seinen Platz. */
box-sizing: border-box;
}
.bc-hero {
position: relative;
border-radius: var(--bc-single-radius, 24px);
overflow: hidden;
/* No margin of its own: the hero can be moved below every other block,
and a bottom margin then hung off the end of the page. */
display: flex;
min-height: 500px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.bc-hero-split .bc-hero-image {
width: 60%;
height: auto;
align-self: stretch;
object-fit: cover;
object-position: center;
}
.bc-hero-split .bc-hero-content {
width: 40%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 40px;
background: var(--bc-hero-panel, rgba(255, 255, 255, 0.8));
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
/*
* Flush against the photo. The panel carries .bc-glass, which rounds all
* four corners and draws a hairline — on the edge facing the image that
* left a visible seam and a sliver of background between the two. The
* outer corners are clipped by the hero's own overflow:hidden anyway, so
* only the inner edge needs flattening.
*/
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: none;
}
.bc-hero-full .bc-hero-image {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
object-fit: cover;
object-position: center;
}
.bc-hero-full .bc-hero-content {
position: relative;
z-index: 2;
margin: auto 40px 40px 40px;
padding: 40px;
background: var(--bc-hero-panel, rgba(255, 255, 255, 0.85));
backdrop-filter: blur(20px);
border-radius: 20px;
width: calc(100% - 80px);
box-sizing: border-box;
}
/*
* The image column: photo on top, strip of thumbnails under it. It only
* appears when the strip does — with the strip switched off the markup is the
* bare .bc-hero-image it always was, so nothing about the other layouts moves.
*/
.bc-hero-media {
display: flex;
flex-direction: column;
/*
* Ohne diese Null bestimmt der Vorschaustreifen die Breite der Spalte.
*
* Ein Flex-Kind bekommt von Haus aus min-width: auto — "so schmal, wie
* dein Inhalt es zulaesst". Der Inhalt hier ist ein Streifen aus 27
* Kacheln zu je 96 Pixeln. Dass er scrollt, hilft nichts: das aendert
* nicht, wie breit er mindestens sein will. Die Spalte wuchs auf 2600
* Pixel, der Textkasten wurde daneben aus dem Titelbereich geschoben und
* von dessen overflow: hidden abgeschnitten.
*/
min-width: 0;
}
.bc-hero-split .bc-hero-media,
.bc-hero-split-right .bc-hero-media,
.bc-hero-gallery .bc-hero-media {
width: 60%;
}
/* These two give their photo a fixed height and rounded corners. Inside the
column that has to sit on the column, or the strip would be pushed out of
the rounding. */
.bc-hero-stacked .bc-hero-media,
.bc-hero-minimal .bc-hero-media {
width: 100%;
height: 460px;
border-radius: var(--bc-single-radius, 24px);
overflow: hidden;
}
/*
* The photo takes whatever the strip leaves.
*
* One class more specific than it needs to be, on purpose. Every layout also
* sizes its own .bc-hero-image at (0,2,0), the same weight as a plain
* .bc-hero-media .bc-hero-image — so which of the two wins came down to where
* they happen to sit in this file. It already went wrong once: the mirrored
* split rule stands after this block and therefore gave the photo 60 % of the
* column, a third of the hero instead of its full width, while the identical
* unmirrored rule stands before it and behaved.
*/
.bc-hero .bc-hero-media .bc-hero-image,
.bc-hero .bc-hero-media .bc-hero-main-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/*
* The main photo is an now, not a background. Cover and centre do
* what background-size and background-position did; display: block drops
* the descender gap an inline image leaves below itself, and max-width
* guards against themes that shrink every image to its natural size.
* Themes that force img { height: auto } on their own selectors lose to
* the layout rules below, which are more specific.
*/
img.bc-hero-image,
img.bc-hero-main-img {
display: block;
max-width: none;
object-fit: cover;
object-position: center;
}
.bc-hero-stacked .bc-hero-media .bc-hero-photo,
.bc-hero-minimal .bc-hero-media .bc-hero-photo {
border-radius: 0;
}
.bc-hero-minimal .bc-hero-media {
height: 420px;
}
/*
* Das Foto, mit den Pfeilen darauf.
*
* Eigener Kasten, weil die Pfeile ueber dem Bild liegen und nicht ueber dem
* Streifen darunter — position: relative braucht etwas, das genau so hoch ist
* wie das Foto.
*/
.bc-hero-photo {
position: relative;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.bc-hero-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border: none;
border-radius: 999px;
background: rgba(0, 0, 0, 0.45);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 0.2s;
}
.bc-hero-arrow:hover {
background: rgba(0, 0, 0, 0.7);
}
.bc-hero-arrow-prev { left: 12px; }
.bc-hero-arrow-next { right: 12px; }
/*
* Der Vorschaustreifen.
*
* Feste Kachelgroesse statt flex: 1. Gedehnt wurden aus drei Bildern drei
* Tafeln von je 240 Pixeln Breite — das sind keine Vorschaubilder mehr,
* sondern eine zweite Bilderreihe. Was nicht hineinpasst, wird gescrollt.
*/
.bc-hero-thumbs {
display: flex;
gap: 2px;
flex: 0 0 auto;
height: 72px;
/*
* Kein eigener Grund. Frueher stand hier #111; wer drei Bilder hatte, sah
* rechts daneben einen leeren schwarzen Balken ueber die halbe Breite.
* Den Streifen dafuer zu kuerzen war auch nichts: dann sass er als
* schmaler Block unter einem breiten Bild. Ohne Grund faellt beides weg,
* die Kacheln stehen einfach auf der Kartenflaeche.
*/
background: transparent;
/*
* Wenige Kacheln stehen mittig unter dem Bild statt linksbuendig: sonst
* sieht der Streifen abgeschnitten aus. "safe" schaltet auf linksbuendig
* zurueck, sobald mehr Kacheln da sind als hineinpassen -- sonst waere
* die erste beim Scrollen nicht mehr erreichbar.
*/
justify-content: safe center;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: thin;
}
/*
* Streifen ohne Balken.
*
* Er scrollt weiter — mit dem Rad, mit dem Finger, und die Pfeile schieben
* das gerade gezeigte Vorschaubild ohnehin selbst ins Bild. Nur zu sehen ist
* davon nichts mehr. Beide Schreibweisen sind noetig: die eine versteht
* Firefox, die andere alles auf WebKit und Blink.
*/
.bc-hero-thumbs.bc-thumbs-ohne-balken {
scrollbar-width: none;
-ms-overflow-style: none;
}
.bc-hero-thumbs.bc-thumbs-ohne-balken::-webkit-scrollbar {
display: none;
}
.bc-hero-thumb {
/*
* Ohne Einstellung eine feste Kachelbreite. Ist eine Anzahl gewaehlt,
* setzt die Seite --bc-thumb-basis auf den Anteil, der bei genau so
* vielen Kacheln nebeneinander herauskommt — Abstaende abgezogen.
*/
flex: 0 0 var(--bc-thumb-basis, 96px);
background-size: cover;
background-position: center;
border: none;
cursor: pointer;
opacity: 0.55;
transition: opacity 0.2s;
}
.bc-hero-thumb:hover {
opacity: 1;
}
/* Welches Bild gerade gross zu sehen ist. */
.bc-hero-thumb.bc-thumb-aktiv {
opacity: 1;
outline: 2px solid var(--bc-primary);
outline-offset: -2px;
}
.bc-hero-gallery .bc-hero-content {
width: 40%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 40px;
background: var(--bc-hero-panel, rgba(255, 255, 255, 0.8));
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
/* Same seam as the split layout: the image is on the left here too. */
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: none;
}
/*
* The gallery layout without its strip. Its photo used to be the top half of
* the column and got its width from there — with the strip switched off it is
* a plain .bc-hero-image, and nothing sized it: a flex item with a background
* and no content collapses to zero, leaving the text panel at 40 % beside an
* empty gap.
*/
.bc-hero-gallery .bc-hero-image {
width: 60%;
height: auto;
align-self: stretch;
object-fit: cover;
object-position: center;
}
/* Split, mirrored: image on the right. Same proportions, other side — which
is the whole difference, so it borrows the split rules and flips the row. */
.bc-hero-split-right {
flex-direction: row-reverse;
}
.bc-hero-split-right .bc-hero-image {
width: 60%;
height: auto;
align-self: stretch;
object-fit: cover;
object-position: center;
}
.bc-hero-split-right .bc-hero-content {
width: 40%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 40px;
background: var(--bc-hero-panel, rgba(255, 255, 255, 0.8));
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
/* Mirrored layout, mirrored seam: here the photo is on the right. */
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: none;
}
/* Stacked: wide image, the text on a card that overlaps its lower edge.
For inventories whose photos are the argument. */
.bc-hero-stacked {
flex-direction: column;
min-height: 0;
overflow: visible;
box-shadow: none;
margin-bottom: 40px;
}
.bc-hero-stacked .bc-hero-image {
width: 100%;
height: 460px;
object-fit: cover;
object-position: center;
border-radius: var(--bc-single-radius, 24px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.bc-hero-stacked .bc-hero-content {
width: calc(100% - 80px);
margin: -70px auto 0 auto;
padding: 32px 40px;
position: relative;
z-index: 2;
background: var(--bc-surface);
border: 1px solid var(--bc-border);
border-radius: var(--bc-single-radius, 24px);
box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
/*
* Stacked mit Streifen: die Karte zieht sich 70 Pixel ueber das Foto, und mit
* einem Streifen darunter deckte sie stattdessen den halben Streifen zu. Die
* Ueberlappung ergibt nur gegen ein Bild Sinn, also faellt sie weg, sobald der
* Streifen da ist.
*
* An der Klasse fuer den Streifen, nicht an der Bildspalte: die Spalte gibt es
* auch mit blossen Pfeilen und ohne Streifen, und dann stand die Karte ohne
* Grund unter einem Foto, ueber das sie sich haette legen sollen.
*/
.bc-hero-stacked .bc-hero-media.bc-has-thumbs + .bc-hero-content {
margin-top: 16px;
}
/* The shadow belonged to the photo, which now sits inside a clipping column —
where an inner shadow is cut away. On the column it survives. */
.bc-hero-stacked .bc-hero-media {
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
/* Minimal: no overlay, no glass, no shadow. The text sits under the image in
the theme's own rhythm — for sites whose design does the talking. */
.bc-hero-minimal {
flex-direction: column;
min-height: 0;
box-shadow: none;
border-radius: 0;
overflow: visible;
}
.bc-hero-minimal .bc-hero-image {
width: 100%;
height: 420px;
object-fit: cover;
object-position: center;
border-radius: var(--bc-single-radius, 24px);
}
.bc-hero-minimal .bc-hero-content {
width: 100%;
padding: 28px 0 0 0;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/*
* Der Rahmen des Titelbereichs, getrennt vom Rest.
*
* Nur Variablen, keine Deklaration: der Glaskasten weiter unten setzt daraus
* seinen Rahmen zusammen. So bleibt der Selektor bei (0,1,0) und die
* Layoutregeln, die eine Kante buendig ans Foto legen, gewinnen weiterhin —
* eine eigene border-Deklaration hier haette sie ueberschrieben und den Spalt
* zurueckgebracht.
*/
.bc-hero-content {
/*
* Derselbe Grund wie bei der Bildspalte: ein Flex-Kind bekommt von Haus
* aus min-width: auto und weigert sich, schmaler zu werden, als sein
* breitester Inhalt es verlangt. Eine einzige nicht umbrechende Reihe
* darin genuegt, damit der ganze Kasten ueber den Bildschirmrand laeuft.
*/
min-width: 0;
--bc-glass-border-width: var(--bc-hero-border-width, 1px);
--bc-glass-border-style: var(--bc-hero-border-style, solid);
--bc-glass-border-color: var(--bc-hero-border-color, var(--bc-border));
}
/* ── Bausteine des Titelbereichs ───────────────────────────────────────── */
/*
* Der Weg zurueck zur Liste, ueber dem Titel.
*
* Er steht im ersten HTML, nicht per JavaScript nachgeschoben: nachtraeglich
* eingefuegt haette der Browser das Layout ohne ihn festgelegt und danach
* verschoben -- ein Layout Shift, den Google misst und der den Leser genau
* beim Zielen auf den Titel trifft.
*/
.bc-breadcrumb {
min-width: 0;
}
.bc-breadcrumb-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 0 0 8px;
padding: 0;
list-style: none;
font-size: 0.85rem;
line-height: 1.4;
color: var(--bc-text-muted, #6c757d);
}
.bc-breadcrumb-item {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
/* Das Trennzeichen gehoert der Darstellung, nicht dem Text: aus dem Markup
herausgehalten, damit Vorleseprogramme es nicht mitsprechen. */
.bc-breadcrumb-item + .bc-breadcrumb-item::before {
content: "\203A";
opacity: 0.6;
}
/*
* Zwei Klassen statt einer: Themes setzen ihre Linkfarbe und -unterstreichung
* ueber Regeln wie ".entry-content a", und die schlaegt eine einzelne Klasse
* in der Kaskade. Genau das war im Browser zu sehen -- der Pfad kam
* unterstrichen heraus, obwohl hier "none" steht.
*/
.bc-breadcrumb .bc-breadcrumb-item a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
}
.bc-breadcrumb .bc-breadcrumb-item a:hover,
.bc-breadcrumb .bc-breadcrumb-item a:focus-visible {
color: var(--bc-primary, #007bff);
border-bottom-color: currentColor;
}
/* Der lange Fahrzeugname darf die Zeile nicht auf dem Handy sprengen. */
.bc-breadcrumb-item [aria-current="page"] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.bc-hero-title-row {
display: flex;
align-items: center;
gap: 12px;
}
/*
* "PEUGEOT E-2008 ELECTRIC GT-LINE" bricht an den Leerzeichen. Ein Kennzeichen
* oder eine Typbezeichnung ohne Leerzeichen tut das nicht — und ein Wort, das
* nicht umbrechen darf, ist die Mindestbreite des Kastens. "anywhere" statt
* "break-word", weil nur das auch in diese Mindestbreite eingeht.
*/
.bc-hero-title-row .bc-title {
margin: 0;
min-width: 0;
overflow-wrap: anywhere;
}
.bc-price-net {
margin-top: 4px;
font-size: 0.9rem;
opacity: 0.75;
}
.bc-hero-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 4px 0;
}
.bc-hero-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.4;
/* Falls back to the accent colour, which is what they always were. */
background: color-mix(in srgb, var(--bc-badge, var(--bc-primary)) 12%, transparent);
color: var(--bc-badge, var(--bc-primary));
border: 1px solid color-mix(in srgb, var(--bc-badge, var(--bc-primary)) 35%, transparent);
}
/* color-mix is recent; without it the badge would be invisible on itself. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
.bc-hero-badge {
background: rgba(0, 0, 0, 0.06);
color: inherit;
border-color: currentColor;
}
}
.bc-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 4px;
}
.bc-hero-actions .bc-btn {
flex: 1 1 180px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.bc-hero-actions .bc-print-btn {
background: transparent;
/* currentColor as before, unless a colour for outlined buttons is set. */
color: var(--bc-btn-outline, inherit);
border: 1px solid currentColor;
}
.bc-hero-actions .bc-print-btn svg {
width: 18px;
height: 18px;
margin-right: 8px;
}
.bc-quick-facts svg {
margin-right: 5px;
vertical-align: middle;
}
.bc-title {
/* Falls back to the inherited text colour until a heading colour is set. */
color: var(--bc-heading, inherit);
margin: 0 0 10px 0;
font-size: 2.5rem;
font-weight: 800;
line-height: 1.2;
}
.bc-price {
font-size: 2rem;
/* Falls back to the accent colour until a price colour is switched on. */
color: var(--bc-price, var(--bc-primary));
font-weight: 700;
margin-bottom: 20px;
}
.bc-quick-facts {
display: flex;
/*
* Ohne Umbruch war diese Reihe der breiteste Punkt der ganzen Seite: vier
* Angaben nebeneinander, zusammen gut vierhundert Pixel, und ein Telefon
* hat dreihundertfuenfzig. Weil sie nicht schmaler werden konnte, machte
* sie den Textkasten auf — und mit ihm die Knoepfe darunter, die dann
* rechts aus dem Bild liefen.
*/
flex-wrap: wrap;
gap: 20px;
margin-bottom: 30px;
font-weight: 500;
/* Was a fixed grey — the one line of the hero that stayed unreadable when
the panel behind it was anything but white. */
color: var(--bc-text-muted);
}
/* This selector is declared more than once in this file. The later block wins
per property, so editing this copy may change nothing — search for the
selector before you edit it. No line numbers here: they went stale. */
.bc-btn {
display: inline-block;
padding: 15px 30px;
border-radius: 12px;
font-weight: 600;
text-decoration: none !important;
text-align: center;
transition: all 0.2s ease;
cursor: pointer;
border: none;
}
.bc-btn-primary {
background-color: var(--bc-btn-color, var(--bc-primary));
color: #ffffff !important;
}
.bc-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
color: white;
text-decoration: none !important;
}
.bc-content-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
}
/*
* Dasselbe eine Ebene hoeher: ein Grid-Kind laesst sich von Haus aus nicht
* schmaler machen, als sein Inhalt mindestens braucht. Ein breiter Kasten
* darin — der Vorschaustreifen, eine lange Tabelle, ein Wort ohne Trennstelle
* — sprengt sonst nicht nur seine Spalte, sondern die ganze Seite, und das
* Fenster bekommt einen Balken zum Schieben.
*/
.bc-main-content,
.bc-sidebar {
min-width: 0;
}
.bc-layout-focus {
grid-template-columns: 1fr;
}
/*
* .bc-layout-focus .bc-sidebar stood here, in two rules. It could not match:
* the focus layout puts every block into .bc-main-content and renders no
* sidebar at all, and the other branch only calls itself bc-layout-focus when
* the sidebar is empty — in which case it is not rendered either. The two
* conditions exclude each other, so the selector had no element to style on
* any page. The check in tests/public-pages.php holds that.
*/
.bc-layout-focus .bc-contact-box {
grid-column: 1 / -1;
}
.bc-features-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
/* Lightbox Styles */
/* This selector is declared more than once in this file. The later block wins
per property, so editing this copy may change nothing — search for the
selector before you edit it. No line numbers here: they went stale. */
.bc-lightbox {
display: none;
position: fixed;
z-index: 99999;
padding-top: 60px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}
/* This selector is declared more than once in this file. The later block wins
per property, so editing this copy may change nothing — search for the
selector before you edit it. No line numbers here: they went stale. */
.bc-lightbox-content {
margin: auto;
display: block;
max-width: 90%;
max-height: 80vh;
object-fit: contain;
border-radius: 8px;
animation-name: bc-zoom;
animation-duration: 0.3s;
}
.bc-section-title {
color: var(--bc-heading, inherit);
font-size: 1.8rem;
margin-bottom: 20px;
font-weight: 700;
border-bottom: 2px solid var(--bc-border);
padding-bottom: 10px;
}
/* This selector is declared more than once in this file. The later block wins
per property, so editing this copy may change nothing — search for the
selector before you edit it. No line numbers here: they went stale. */
.bc-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
/* This selector is declared more than once in this file. The later block wins
per property, so editing this copy may change nothing — search for the
selector before you edit it. No line numbers here: they went stale. */
.bc-gallery-img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: var(--bc-single-radius, 16px);
cursor: pointer;
transition: transform 0.3s;
}
.bc-gallery-img:hover {
transform: scale(1.05);
}
/*
* Der Glaskasten: Fahrzeugdaten, Umweltbox, Titelbereich.
*
* Der Hintergrund war ein fester weisser Schleier. Auf hellem Grund ist das
* genau richtig; auf dunklem wird daraus ein hellgrauer Kasten, waehrend der
* Text darauf der Textfarbe folgt und fast weiss wird — weiss auf hellgrau,
* unlesbar. Er kommt jetzt aus der Karten-Flaeche, und bei weisser Flaeche
* ergibt das denselben Wert wie vorher.
*
* Der Rahmen laeuft ueber Variablen, damit der Titelbereich seinen eigenen
* einstellen kann, ohne dass die uebrigen Kaesten davon etwas mitbekommen.
*/
.bc-glass {
background: var(--bc-glass-bg, rgba(255, 255, 255, 0.7));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: var(--bc-glass-border-width, 1px) var(--bc-glass-border-style, solid) var(--bc-glass-border-color, rgba(255, 255, 255, 0.5));
border-radius: var(--bc-single-radius, 24px);
padding: 30px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}
.bc-contact-form {
display: flex;
flex-direction: column;
gap: 15px;
}
/*
* Die Felder folgen dem Farbschema, statt weiss zu sein.
*
* Hier standen #d1d5db und rgba(255,255,255,0.9) fest. Im dunklen Modus war
* das Ergebnis ein blendend weisses Feld auf fast schwarzem Grund — und die
* Schrift darin unlesbar: Formularfelder erben color nicht, sie nehmen ohne
* eigene Angabe das Schwarz des Browsers. Auf weissem Grund faellt das nie
* auf, im Dunkeln schreibt man blind.
*/
.bc-contact-form input, .bc-contact-form textarea {
padding: 12px 15px;
border: 1px solid var(--bc-border);
border-radius: 8px;
font-family: inherit;
font-size: 1rem;
background: var(--bc-surface);
color: var(--bc-text);
}
/* Sonst bleibt der Platzhalter das Grau des Browsers, gedacht fuer Weiss. */
.bc-contact-form input::placeholder,
.bc-contact-form textarea::placeholder {
color: var(--bc-text-muted);
}
.bc-contact-form textarea {
min-height: 120px;
resize: vertical;
}
/*
* The enquiry form, moved out of the markup.
*
* Every declaration below stood in a style attribute on the element. That is
* why the two rules above could never reach these fields — and why no colour
* setting could either.
*
* The scoping is not decoration. An inline style beats any selector, so it was
* winning against .bc-contact-form input (0,1,1) above; a bare .bc-form-input
* (0,1,0) would lose, handing padding and background back to that rule and
* moving every field on the page. Scoped to the form it keeps winning, and the
* declarations it does not carry — border-radius, font — keep coming from
* above, exactly as before.
*/
.bc-contact-form .bc-form-input {
width: 100%;
padding: 12px;
border: 1px solid var(--bc-border);
background: var(--bc-surface);
}
.bc-contact-form .bc-form-textarea {
min-height: 180px;
resize: vertical;
}
/* Beats .bc-btn and .bc-btn-primary the way the style attribute did. */
.bc-contact-form .bc-form-submit {
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-size: 1rem;
padding: 16px;
}
.bc-form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.bc-form-field {
margin-bottom: 20px;
}
.bc-form-label {
display: block;
font-size: 0.9rem;
font-weight: 700;
/* War ein festes Dunkelgrau — auf dunklem Grund kaum zu lesen. */
color: var(--bc-text);
margin-bottom: 8px;
}
/* The script switches this to block and paints it on an answer. */
.bc-form-response {
margin-top: 15px;
font-size: 0.95rem;
font-weight: 600;
padding: 15px;
border-radius: 4px;
display: none;
}
/* Off screen rather than hidden: a bot has to be able to find it and fill it,
which is the whole point of the field. */
.bc-honeypot {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
/*
* Die Haken aus dem mobile.de-Formular. Sie stehen zwischen Nachricht und
* Zustimmung und sind freiwillig -- deshalb ohne Rahmen und ohne Sternchen,
* damit sie nicht wie Pflichtfelder aussehen.
*/
.bc-form-interests {
margin: 0 0 20px;
padding: 0;
border: 0;
}
.bc-form-interests legend {
padding: 0;
margin-bottom: 8px;
}
.bc-interest {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 6px;
}
.bc-interest-box {
margin-top: 3px;
flex: 0 0 auto;
}
.bc-interest-text {
cursor: pointer;
line-height: 1.4;
}
.bc-consent {
margin-bottom: 25px;
display: flex;
align-items: flex-start;
gap: 12px;
}
.bc-consent-box {
margin-top: 4px;
transform: scale(1.1);
}
/*
* Der Zustimmungstext folgt dem Farbmodus.
*
* Hier stand ein festes #374151. Auf einem dunklen Grund ist das dunkelgrau
* auf dunkel -- genau der Fehler, der beim Umwelt-Hinweis zwei Regeln weiter
* unten schon einmal behoben wurde, und dieser Text ist ebenso
* vorgeschrieben. Ueber --bc-consent laesst er sich zusaetzlich eigens
* einfaerben; ohne diese Einstellung bleibt er der Nebentext-Farbe treu.
*/
.bc-consent-text {
font-size: 0.85rem;
color: var(--bc-consent, var(--bc-text-muted, #6b7280));
line-height: 1.6;
margin: 0;
}
/* Theme-aware colour: the fixed grey sat at ~3.6:1 on a dark background,
below the contrast minimum — and this notice is legally required. */
.bc-env-disclaimer {
margin-top: 20px;
font-size: 0.85rem;
color: var(--bc-text-muted, #6b7280);
line-height: 1.5;
}
/* Similar vehicles, under the detail page. Deliberately quieter than the
search grid: it is a suggestion, not the catalogue. */
/*
* auto-fit, not auto-fill. auto-fill keeps the empty tracks it could fit into
* the row, so four cards in a wide container were squeezed into the width of
* five and left a gap on the right — the layout looked permanently built for
* five vehicles. auto-fit drops the empty tracks and the cards take the room.
*/
.bc-similar-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
/* A fixed number of columns, when the automatic one is not what is wanted.
min() keeps a single card from overflowing a container narrower than the
track it asks for. */
.bc-similar-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bc-similar-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bc-similar-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Fixed counts still have to give way on a phone. */
@media (max-width: 900px) {
.bc-similar-cols-3,
.bc-similar-cols-4,
.bc-similar-cols-5 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.bc-similar-cols-3,
.bc-similar-cols-4,
.bc-similar-cols-5 {
grid-template-columns: minmax(0, 1fr);
}
}
.bc-similar-card {
display: flex;
flex-direction: column;
background: var(--bc-surface);
color: var(--bc-text) !important;
border: 1px solid var(--bc-border);
border-radius: var(--bc-single-radius, var(--bc-radius));
overflow: hidden;
text-decoration: none !important;
transition: var(--bc-transition);
}
.bc-similar-card:hover {
box-shadow: var(--bc-shadow-hover);
}
.bc-similar-img {
width: 100%;
height: 150px;
object-fit: cover;
display: block;
}
/* Stands in for a vehicle whose advert carried no photo, so the cards in a
row keep the same height. */
.bc-similar-noimg {
background: var(--bc-bg);
border-bottom: 1px solid var(--bc-border);
}
.bc-similar-body {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px;
}
.bc-similar-title {
font-weight: 700;
font-size: 1rem;
line-height: 1.3;
}
.bc-similar-price {
font-weight: 800;
font-size: 1.15rem;
color: var(--bc-price, var(--bc-primary));
}
.bc-similar-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.bc-similar-chip {
font-size: 0.75rem;
padding: 3px 9px;
border-radius: 999px;
background: var(--bc-bg);
border: 1px solid var(--bc-border);
color: var(--bc-text-muted);
}
/* Long lists that fold. The entries beyond the configured count stay in the
document — the lightbox addresses gallery images by index — and are only
taken out of the flow. */
.bc-folded .bc-fold-extra {
display: none;
}
.bc-fold-toggle {
display: inline-block;
margin-top: 15px;
padding: 0;
background: none;
border: none;
color: var(--bc-primary);
font-size: 0.95rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
.bc-fold-toggle:hover {
text-decoration-thickness: 2px;
}
/* Heading of the enquiry form. The declarations were inline on the element;
the values are unchanged so no form moves. */
/*
* Dieselbe Farbe wie jede andere Ueberschrift, und ueber dieselbe Option
* einstellbar.
*
* Hier stand ein festes Dunkelblau. Von den acht Ueberschriften der
* Fahrzeugseite folgten sechs --bc-heading und genau diese eine nicht — sie
* stach also auf jeder Seite heraus, und die Farbeinstellung im Backend
* erreichte sie nicht.
*/
.bc-contact-title {
font-size: 1.4rem;
color: var(--bc-heading, inherit);
font-weight: 700;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 20px;
}
/* Says which vehicle the enquiry is about. Sits directly under the heading,
so the heading loses its own bottom margin when it is there. */
.bc-contact-title:has(+ .bc-contact-subline) {
margin-bottom: 6px;
}
.bc-contact-subline {
margin: 0 0 20px 0;
font-size: 0.9rem;
color: var(--bc-text-muted);
}
/* Form Styles */
/*
* --bc-surface, nicht --bc-bg.
*
* Die beiden bedeuten nicht dasselbe: --bc-bg ist der Seitenhintergrund,
* --bc-surface die abgesetzte Flaeche darauf. Jede andere Karte hier —
* .basiscars-card, .basiscars-sidebar, .bc-similar-card — nimmt --bc-surface;
* der Formularkasten war der einzige Ausreisser. Im hellen Modus faellt der
* Unterschied kaum auf (#f8f9fa gegen #ffffff), im dunklen schon: der Kasten
* bekam denselben Ton wie die Seite dahinter und war als Kasten nicht mehr zu
* erkennen.
*/
.bc-form-solid {
background: var(--bc-surface);
padding: 35px;
border-radius: var(--bc-single-radius, 12px);
border: 1px solid var(--bc-border);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
/*
* Dieselbe Glasflaeche wie .bc-glass, ueber dieselbe Variable. Fest
* eingetragen war hier eine weisse Scheibe mit weissem Rand — im dunklen
* Modus eine helle Platte samt hellem Strich drumherum. --bc-glass-bg rechnet
* das Plugin aus der eingestellten Flaechenfarbe aus, fuer beide Modi.
*/
.bc-form-glass {
background: var(--bc-glass-bg, rgba(255, 255, 255, 0.6));
padding: 35px;
border-radius: var(--bc-single-radius, 24px);
border: 1px solid var(--bc-glass-border-color, rgba(255, 255, 255, 0.7));
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
/*
* Das Anfrageformular als Popup.
*
* Der Dialog traegt zusaetzlich .bc-form-solid oder .bc-form-glass -- Flaeche,
* Rand und Radius kommen also von dort und sehen aus wie der Kasten, den er
* ersetzt. Hier steht nur, was ein Popup davon unterscheidet: wo es liegt,
* wie breit es wird und wie es sich verhaelt, wenn der Inhalt hoeher ist als
* der Bildschirm.
*
* margin: auto zentriert waagerecht wie senkrecht -- ein Dialog ohne das
* klebt am oberen Rand, und auf einem Telefon steht das Formular dann unter
* der Adressleiste statt im Bild.
*
* Kein position hier. Ein modaler Dialog liegt im Top-Layer und bekommt sein
* position vom Browser; schreibt man ihm eines vor, faellt die Verdunklung
* dahinter aus -- gemessen: der Backdrop war gesetzt, sichtbar war er nicht.
* Fuers Kreuz braucht es das ohnehin nicht, der Dialog ist so oder so ein
* Bezugspunkt fuer alles, was in ihm absolut sitzt.
*/
.bc-form-dialog {
width: min(560px, calc(100vw - 32px));
max-width: none;
max-height: calc(100vh - 48px);
margin: auto;
overflow-y: auto;
color: var(--bc-text);
}
.bc-form-dialog::backdrop {
background: rgba(0, 0, 0, 0.55);
}
/*
* Der Weg heraus, und zwar am selben Fleck wie in jeder anderen Lightbox:
* oben rechts. Er steht als erstes im Markup, damit showModal() den Fokus
* dorthin setzt -- wer per Tastatur kommt, ist mit einem Anschlag wieder
* draussen.
*/
.bc-form-dialog .bc-form-close {
position: absolute;
top: 10px;
right: 14px;
width: 34px;
height: 34px;
padding: 0;
font-size: 26px;
line-height: 1;
cursor: pointer;
border: none;
border-radius: 50%;
background-color: transparent;
color: var(--bc-text-muted, #6b7280);
transition: var(--bc-transition, all 0.2s ease);
}
.bc-form-dialog .bc-form-close:hover,
.bc-form-dialog .bc-form-close:focus-visible {
color: var(--bc-text);
background-color: var(--bc-border);
}
/*
* Ohne