Interior-Farbwelt, Welten-Trennung, Tischlerei und Herkunfts-Sektion
Arbeitsplan 14.09.2026, Punkte 1.1 bis 1.4 (Nachträge 6 bis 10 im Entwicklungsplan): - Farbwelt Interior (Tanne, Creme, Sand, Ocker, Clay) als Standard, Immobilien-Welt behält das bisherige Blau über body.world-immobilien; Logo je Welt, Favicons neu, Welten-Wechsler in Kopf- und Fußzeile. - Saubere Trennung der Welten: eigene Navigation, Ankündigungsleiste, Magazinliste, Über-uns-Seite, FAQ, Kontaktseite und Abschluss-CTA für Immobilien; Beiträge tragen eine Welt (Migration + Admin-Feld). Abschluss-CTA Ton in Ton statt Grün-zu-Ocker. - Kontakt: Betreffe in Gruppen Interior / Immobilien / B2in, Marken darin. Terminanfrage-Buttons öffnen das Widget mit vorgewähltem Anliegen; Select-Felder einheitlich gestaltet. - Tischlerei als vierte Kernmarke (Platzhalter), Kachelraster 2×2. - Herkunfts-Sektion „Aus der Region gefertigt“ mit schematischer Standortkarte und Ablauf CABINET (Beratung Bielefeld, Fertigung Köln, Aufbau mit Tischlerei). Deployment: migrate, WorldSplitCmsSeeder, CmsBrandSeeder, OriginSectionCmsSeeder (Abschnitt 8 im Entwicklungsplan). Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
parent
1242d4bce8
commit
7953a8c9a1
137 changed files with 3840 additions and 589 deletions
|
|
@ -232,6 +232,61 @@ h1, h2, h3, h4, h5, h6 {
|
|||
box-shadow: var(--shadow-accent-glow);
|
||||
}
|
||||
|
||||
/* Formularfelder (Terminanfrage-Widget, Kontaktseite). Tokenbasiert, damit sie in jeder
|
||||
Welt zum Grund passen; Fokus im Akzent der Welt. `.form-select` ergaenzt einen eigenen
|
||||
Chevron, weil der Browser-Pfeil neben den uebrigen Feldern fremd wirkt. */
|
||||
.form-field {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.65rem 0.9rem;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
color: hsl(var(--foreground));
|
||||
background-color: hsl(var(--card));
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 0.6rem;
|
||||
box-shadow: inset 0 1px 2px hsl(var(--foreground) / 0.04);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.form-field::placeholder {
|
||||
color: hsl(var(--muted-foreground) / 0.7);
|
||||
}
|
||||
|
||||
.form-field:hover {
|
||||
border-color: hsl(var(--primary) / 0.45);
|
||||
}
|
||||
|
||||
.form-field:focus,
|
||||
.form-field:focus-visible {
|
||||
outline: none;
|
||||
border-color: hsl(var(--secondary));
|
||||
box-shadow: 0 0 0 3px hsl(var(--secondary) / 0.22);
|
||||
background-color: hsl(var(--background));
|
||||
}
|
||||
|
||||
.form-select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
padding-right: 2.6rem;
|
||||
cursor: pointer;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237a6c62' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8l4 4 4-4'/></svg>");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.9rem center;
|
||||
background-size: 1.1rem 1.1rem;
|
||||
}
|
||||
|
||||
.form-select optgroup {
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
.form-select option {
|
||||
font-weight: 400;
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
/* Card styles */
|
||||
.card-elevated {
|
||||
background-color: hsl(var(--card));
|
||||
|
|
@ -258,17 +313,18 @@ h1, h2, h3, h4, h5, h6 {
|
|||
color: hsl(var(--dark-text));
|
||||
}
|
||||
|
||||
/* Abschlussband der Markenseiten.
|
||||
Ein durchgehender Verlauf ueber die volle Breite: von Anthrazit in das
|
||||
Dynamic Blue. Bewusst ohne weiche Kreise – die setzten sichtbare Flecken in
|
||||
die Ecken. Die Tiefe kommt aus dem Verlauf selbst, die Kontur aus zwei
|
||||
Haarlinien. */
|
||||
/* Abschlussband der Marken- und Startseite.
|
||||
Ein durchgehender Verlauf ueber die volle Breite: vom dunklen Hauptton in den
|
||||
Akzent. Bewusst ohne weiche Kreise – die setzten sichtbare Flecken in die
|
||||
Ecken. Die Tiefe kommt aus dem Verlauf selbst, die Kontur aus zwei Haarlinien.
|
||||
Wo das Band ausläuft, sagt `--cta-band-end` (Interior: tiefes Ocker,
|
||||
Immobilien: Dynamic Blue); Themes ohne den Token nutzen `--secondary-dark`. */
|
||||
.cta-band {
|
||||
--cta-band-gradient: linear-gradient(
|
||||
100deg,
|
||||
hsl(var(--primary-dark)) 0%,
|
||||
hsl(var(--primary)) 42%,
|
||||
hsl(var(--secondary-dark)) 100%
|
||||
hsl(var(--cta-band-end, var(--secondary-dark))) 100%
|
||||
);
|
||||
|
||||
position: relative;
|
||||
|
|
@ -276,7 +332,7 @@ h1, h2, h3, h4, h5, h6 {
|
|||
background: var(--cta-band-gradient);
|
||||
}
|
||||
|
||||
/* Lichtkante oben, die zu beiden Seiten auslaeuft. */
|
||||
/* Lichtkante oben, die zu beiden Seiten auslaeuft (Interior: in Ocker, sonst weiss). */
|
||||
.cta-band::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
|
@ -287,11 +343,23 @@ h1, h2, h3, h4, h5, h6 {
|
|||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
hsl(0 0% 100% / 0.35) 50%,
|
||||
hsl(var(--cta-band-line, 0 0% 100%) / 0.6) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* Hervorgehobene Woerter im Titel des Bands. Die Inhalte tragen `text-primary`
|
||||
(dunkler Hauptton) – auf dem dunklen Band unlesbar, deshalb hier der Akzent. */
|
||||
.cta-band .text-primary {
|
||||
color: hsl(var(--secondary));
|
||||
}
|
||||
|
||||
/* Umgekehrt auf Flaechen im Akzentton (z. B. „Lernen Sie unsere Marken kennen" auf /marken):
|
||||
ein `text-secondary`-Wort waere Ocker auf Ocker. Dort traegt es den Hauptton. */
|
||||
section.bg-secondary .text-secondary {
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
/* Sehr flacher Schimmer von oben links, damit die Flaeche nicht flach wirkt. */
|
||||
.cta-band::after {
|
||||
content: '';
|
||||
|
|
@ -309,6 +377,30 @@ h1, h2, h3, h4, h5, h6 {
|
|||
color: hsl(var(--dark-muted));
|
||||
}
|
||||
|
||||
/* Footer. Eigene Tokens, weil der Footer nicht in jeder Welt dunkel ist:
|
||||
Interior legt ihn auf Sand mit Tanne, Immobilien auf Anthrazit mit Weiss.
|
||||
Themes ohne Footer-Tokens fallen auf die dunkle Sektion zurueck. */
|
||||
.section-footer {
|
||||
background-color: hsl(var(--footer-bg, var(--dark-bg)));
|
||||
color: hsl(var(--footer-fg, var(--dark-text)));
|
||||
}
|
||||
|
||||
.text-footer-muted {
|
||||
color: hsl(var(--footer-muted, var(--dark-muted)));
|
||||
}
|
||||
|
||||
.border-footer-line\/30 {
|
||||
border-color: hsl(var(--footer-line, var(--dark-muted)) / 0.3);
|
||||
}
|
||||
|
||||
.text-clay {
|
||||
color: hsl(var(--clay, var(--muted-foreground)));
|
||||
}
|
||||
|
||||
.hover-bg-primary-light:hover {
|
||||
background-color: hsl(var(--primary-light));
|
||||
}
|
||||
|
||||
/* Container styles */
|
||||
.container-padding {
|
||||
max-width: 80rem;
|
||||
|
|
@ -726,9 +818,9 @@ h1, h2, h3, h4, h5, h6 {
|
|||
}
|
||||
}
|
||||
|
||||
/* Shadow Effects - Updated for new primary color */
|
||||
/* Schatten und Glow leiten sich aus dem Akzent der jeweiligen Welt ab. */
|
||||
.shadow-elegant {
|
||||
box-shadow: 0 10px 30px -10px rgba(0, 136, 204, 0.2);
|
||||
box-shadow: 0 10px 30px -10px hsl(var(--secondary) / 0.2);
|
||||
}
|
||||
|
||||
.shadow-elegant-white {
|
||||
|
|
@ -742,34 +834,34 @@ h1, h2, h3, h4, h5, h6 {
|
|||
.elegant-shadow-card {
|
||||
box-shadow:
|
||||
0 2px 8px -2px rgba(0, 0, 0, 0.08),
|
||||
0 4px 10px 0px rgba(0, 136, 204,1);
|
||||
0 4px 10px 0px hsl(var(--secondary));
|
||||
}
|
||||
|
||||
.shadow-premium {
|
||||
box-shadow: 0 20px 60px -15px rgba(0, 136, 204, 0.3);
|
||||
box-shadow: 0 20px 60px -15px hsl(var(--secondary) / 0.3);
|
||||
}
|
||||
|
||||
/* Glow Effects - Inspired by Möbius band's luminous edge */
|
||||
.glow-soft {
|
||||
box-shadow:
|
||||
0 0 10px rgba(0, 155, 221, 0.15),
|
||||
0 0 20px rgba(0, 155, 221, 0.1),
|
||||
0 4px 10px -4px rgba(0, 136, 204, 0.2);
|
||||
0 0 10px hsl(var(--secondary) / 0.15),
|
||||
0 0 20px hsl(var(--secondary) / 0.1),
|
||||
0 4px 10px -4px hsl(var(--secondary) / 0.2);
|
||||
}
|
||||
|
||||
.glow-medium {
|
||||
box-shadow:
|
||||
0 0 15px rgba(0, 155, 221, 0.25),
|
||||
0 0 30px rgba(0, 155, 221, 0.15),
|
||||
0 5px 10px -5px rgba(0, 136, 204, 0.3);
|
||||
0 0 15px hsl(var(--secondary) / 0.25),
|
||||
0 0 30px hsl(var(--secondary) / 0.15),
|
||||
0 5px 10px -5px hsl(var(--secondary) / 0.3);
|
||||
}
|
||||
|
||||
.glow-strong {
|
||||
box-shadow:
|
||||
0 0 30px rgba(0, 155, 221, 0.35),
|
||||
0 0 60px rgba(0, 155, 221, 0.2),
|
||||
0 0 90px rgba(0, 113, 168, 0.1),
|
||||
0 10px 10px -10px rgba(0, 136, 204, 0.4);
|
||||
0 0 30px hsl(var(--secondary) / 0.35),
|
||||
0 0 60px hsl(var(--secondary) / 0.2),
|
||||
0 0 90px hsl(var(--secondary-dark) / 0.1),
|
||||
0 10px 10px -10px hsl(var(--secondary) / 0.4);
|
||||
}
|
||||
.icon-secondary-linear {
|
||||
background-color: hsl(var(--secondary) / 0.1);
|
||||
|
|
@ -836,9 +928,9 @@ h1, h2, h3, h4, h5, h6 {
|
|||
background:
|
||||
linear-gradient(
|
||||
145deg,
|
||||
hsl(0 0% 100%) 0%,
|
||||
hsl(0 0% 99.5%) 40%,
|
||||
hsl(0 0% 99%) 100%
|
||||
hsl(var(--card)) 0%,
|
||||
hsl(var(--card)) 40%,
|
||||
hsl(var(--card) / 0.92) 100%
|
||||
);
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(0, 0, 0, 0.03),
|
||||
|
|
@ -904,7 +996,7 @@ h1, h2, h3, h4, h5, h6 {
|
|||
0 4px 8px rgba(0, 0, 0, 0.08),
|
||||
0 8px 16px rgba(0, 0, 0, 0.1),
|
||||
0 16px 32px rgba(0, 0, 0, 0.08),
|
||||
0 0 40px hsla(199, 74%, 49%, 0.3);
|
||||
0 0 40px hsl(var(--secondary) / 0.3);
|
||||
transform: translateY(-2px);
|
||||
filter: brightness(1.08);
|
||||
}
|
||||
|
|
@ -925,3 +1017,67 @@ h1, h2, h3, h4, h5, h6 {
|
|||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Herkunfts-Sektion: schematische Standortkarte (Bielefeld als Drehscheibe) */
|
||||
.origin-map {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
font-family: inherit;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.origin-map-region {
|
||||
fill: hsl(var(--secondary) / 0.06);
|
||||
stroke: hsl(var(--secondary) / 0.45);
|
||||
stroke-width: 1.5;
|
||||
stroke-dasharray: 4 6;
|
||||
}
|
||||
|
||||
.origin-map-region-label {
|
||||
fill: hsl(var(--secondary-deep, var(--secondary)));
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.origin-map-spoke {
|
||||
stroke: hsl(var(--secondary));
|
||||
stroke-width: 2;
|
||||
stroke-dasharray: 6 6;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.origin-map-hub {
|
||||
fill: hsl(var(--secondary));
|
||||
}
|
||||
|
||||
.origin-map-hub-ring {
|
||||
fill: hsl(var(--secondary) / 0.18);
|
||||
}
|
||||
|
||||
.origin-map-dot {
|
||||
fill: hsl(var(--primary));
|
||||
stroke: hsl(var(--card));
|
||||
stroke-width: 3;
|
||||
}
|
||||
|
||||
.origin-map-label {
|
||||
fill: hsl(var(--foreground));
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.origin-map-sublabel {
|
||||
fill: hsl(var(--muted-foreground));
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.origin-map-distance {
|
||||
fill: hsl(var(--muted-foreground));
|
||||
font-size: 11px;
|
||||
text-anchor: middle;
|
||||
stroke: hsl(var(--card));
|
||||
stroke-width: 5px;
|
||||
paint-order: stroke;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue