Interior-Feinschliff: Hero-Slideshow, Lektorat, Rechtstexte, Aufräumen und Korrekturen 08.10.
Startseite und Heroes - Hero-Slideshow (11 Motive inkl. Febrü) mit Infokarte, Laufzeit-Linie, größeren Klickflächen, Goldrahmen und mobiler Karte unter dem Bild; Zeile über der Überschrift, neue Vertrauenspunkte - Hero-Stil auf Marken, Über uns und Kontakt übertragen, Breadcrumb entfernt - Gründer-Leiste, Vision-Box auf Ocker, Showroom-Display in Box mit „Größer ansehen“/Vollbild - Akzentfarbe #a8741f, größere Serif-Überschriften in der Interior-Welt - Marken: Bildpause mit Zitat; Vereine aktualisiert und verlinkt Inhalte - Lektorat aller angezeigten Texte, /about-Korrekturen, Rechtstexte (DDG, TDDDG, Hosting Hetzner) - Ablauf Maßanfertigung überall einheitlich, Magazin-Beitrag neu, alte Beiträge offline, deutsches Datum/Lesezeit, FAQ Projektausstattung, Otterpohl - Referenzen-Seite per CMS-Schalter ausblendbar CMS und Technik - Tote Sektionen, Felder, Seiten und Komponenten entfernt und archiviert (dev/2026-08-28/archiv-*) - Entwurf /entwurf, Farb-Schalter und /welcome entfernt; Test-Routen nur noch lokal - Seitenbaum-Beschreibungen geprüft, fehlende CMS-Felder ergänzt, Markenliste aus „Kernmarken“ - Admin-Bildvorschauen repariert, verwendete Bilder in die Mediathek übernommen - Seeder für das Deployment siehe dev/2026-08-28/entwicklungsplan.md Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
4b07bbdcae
commit
fcb10be120
406 changed files with 22549 additions and 3798 deletions
|
|
@ -915,7 +915,7 @@ section.bg-secondary .text-secondary {
|
|||
hsl(var(--hero-container)) 0%,
|
||||
hsl(var(--hero-container-dark)) 100%
|
||||
);
|
||||
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px 5px;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,12 +32,12 @@
|
|||
--primary-foreground: 38 33% 95%; /* Creme auf Tanne */
|
||||
|
||||
/* Akzent: Logo-Bogen, Hervorhebungen, Icons, aktive Navigation */
|
||||
--secondary: 37 62% 55%; /* #d39e46 Ocker */
|
||||
--secondary-light: 37 66% 63%;
|
||||
--secondary-lighter: 37 60% 80%;
|
||||
--secondary-dark: 37 55% 45%;
|
||||
--secondary-deep: 37 50% 36%; /* Ocker als Textfarbe auf hellem Grund */
|
||||
--cta-band-line: 37 62% 55%; /* Haarlinie am Abschlussband in Ocker */
|
||||
--secondary: 37 69% 39%; /* #a8741f Ocker, dunkler (07.10.2026; vorher #d39e46) */
|
||||
--secondary-light: 37 62% 48%;
|
||||
--secondary-lighter: 37 55% 78%;
|
||||
--secondary-dark: 37 70% 32%;
|
||||
--secondary-deep: 37 70% 30%; /* Ocker als Textfarbe auf hellem Grund */
|
||||
--cta-band-line: 37 69% 39%; /* Haarlinie am Abschlussband in Ocker */
|
||||
--secondary-foreground: 38 33% 95%;
|
||||
|
||||
/* Sekundärton für Produkte und ruhige Beschriftungen */
|
||||
|
|
@ -152,13 +152,12 @@
|
|||
--font-secondary: 'IBM Plex Sans', 'Inter', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
/* ── Interior, Variante „Modern“ (Nachtrag 18) ──────────────────────
|
||||
Marcels Rückmeldung vom 23.09.: die Creme-Flächen wirken altbacken. Diese
|
||||
Variante lässt Tanne und Ocker aus dem Logo unangetastet und hellt nur die
|
||||
Flächen auf: Grund fast weiß, Karten weiß, Sektionswechsel in hellem Grau-
|
||||
Beige, Footer in Tanne. Aktiv, sobald der Farb-Schalter (palette-switch)
|
||||
`palette-modern` an <html> setzt; die Wahl liegt im localStorage. */
|
||||
.palette-modern .world-interior {
|
||||
/* ── Interior: helle Flächen (Nachtrag 18, seit 25.09.2026 fest) ─────
|
||||
Marcels Rückmeldung vom 23.09.: die Creme-Flächen wirken altbacken. Tanne und
|
||||
Ocker aus dem Logo bleiben, nur die Flächen werden heller: Grund fast weiß,
|
||||
Karten weiß, Sektionswechsel in hellem Grau-Beige, Footer in Tanne. Die Werte
|
||||
in :root bleiben die Grundlage, die Immobilien-Welt erbt sie. */
|
||||
.world-interior {
|
||||
--background: 40 25% 98%; /* #fbfaf8 fast weiß, leicht warm */
|
||||
--card: 0 0% 100%; /* Karten reinweiß */
|
||||
--popover: 0 0% 100%;
|
||||
|
|
@ -187,71 +186,11 @@
|
|||
--shadow-elevated: 0 24px 48px -20px hsl(var(--foreground) / 0.2);
|
||||
}
|
||||
|
||||
/* ── Interior, Entwurf „Greige“ (Nachtrag 19, Briefing Marcel 24.09.) ─────
|
||||
Heller, leicht kühler Grundton (Greige statt Creme), deutlich präsenteres
|
||||
Tannengrün, Gold nur als feine Linie. Liegt als Klasse am <body> der
|
||||
Entwurfsseite /entwurf – nicht am <html> wie der Browser-Schalter, damit
|
||||
sich beide nicht überlagern. */
|
||||
.world-interior.palette-greige {
|
||||
--background: 45 14% 93%; /* #f0eeeb Greige, Off-White */
|
||||
--foreground: 166 25% 13%; /* Tannengrau für Text */
|
||||
|
||||
--card: 40 20% 97%; /* #f8f7f4 – hell, aber kein steriles Weiß */
|
||||
--card-foreground: 166 25% 13%;
|
||||
--popover: 40 20% 97%;
|
||||
--popover-foreground: 166 25% 13%;
|
||||
|
||||
--primary: 165 44% 14%; /* #14342c Tannengrün, klar und dunkel */
|
||||
--primary-light: 165 32% 22%;
|
||||
--primary-lighter: 165 12% 82%;
|
||||
--primary-dark: 165 50% 10%;
|
||||
--primary-foreground: 45 20% 95%;
|
||||
|
||||
--secondary: 38 45% 46%; /* #aa8341 gedecktes Gold */
|
||||
--secondary-light: 38 45% 56%;
|
||||
--secondary-lighter: 40 40% 80%;
|
||||
--secondary-dark: 38 48% 38%;
|
||||
--secondary-deep: 38 55% 34%; /* Gold als Textfarbe auf hellem Grund */
|
||||
--cta-band-line: 38 45% 46%;
|
||||
--secondary-foreground: 45 20% 95%;
|
||||
|
||||
--clay: 30 8% 50%;
|
||||
|
||||
--muted: 45 12% 90%;
|
||||
--muted-foreground: 160 8% 36%;
|
||||
|
||||
--accent: 45 12% 89%; /* #e8e6e0 Sektionswechsel */
|
||||
--accent-dark: 45 12% 84%;
|
||||
--accent-foreground: 166 25% 13%;
|
||||
|
||||
--dark-bg: 165 44% 14%;
|
||||
--dark-text: 45 20% 95%;
|
||||
--dark-muted: 45 15% 78%;
|
||||
|
||||
/* Footer in Tannengrün, Haarlinie in Gold */
|
||||
--footer-bg: 165 44% 14%;
|
||||
--footer-fg: 45 20% 95%;
|
||||
--footer-muted: 45 15% 78%;
|
||||
--footer-line: 38 45% 46%;
|
||||
|
||||
--cta-band-end: 165 30% 22%;
|
||||
|
||||
--border: 40 10% 84%;
|
||||
--input: 40 20% 98%;
|
||||
--ring: 165 44% 14%;
|
||||
|
||||
--hero-container: 40 20% 97%;
|
||||
--hero-container-dark: 45 12% 90%;
|
||||
--hero-container-light: 40 25% 98%;
|
||||
|
||||
--shadow-card: 0 6px 24px -10px hsl(var(--foreground) / 0.14);
|
||||
--shadow-elevated: 0 30px 60px -28px hsl(var(--primary) / 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
/* Interior: Ocker ist Akzent, kein Flächenton unter Text – Creme auf Ocker erreicht
|
||||
keinen ausreichenden Kontrast. Der zweite Hero-Button wird deshalb zur Kontur in
|
||||
Tanne, und Ocker-Text auf Sand (Footer) nutzt die tiefe Stufe. */
|
||||
Tanne. */
|
||||
.world-interior .btn-secondary-accent {
|
||||
background: transparent !important;
|
||||
color: hsl(var(--primary));
|
||||
|
|
@ -265,17 +204,13 @@
|
|||
border-color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
/* Auf dem dunklen Footer trägt Ocker in voller Stärke. */
|
||||
.world-interior .section-footer .text-secondary {
|
||||
color: hsl(var(--secondary-deep));
|
||||
}
|
||||
|
||||
/* Variante „Modern“: auf dem dunklen Footer trägt Ocker in voller Stärke. */
|
||||
.palette-modern .world-interior .section-footer .text-secondary {
|
||||
color: hsl(var(--secondary));
|
||||
}
|
||||
|
||||
/* Variante „Modern“: Abschlussband und Footer sind beide dunkel – eine helle Haarlinie trennt sie. */
|
||||
.palette-modern .world-interior .section-footer {
|
||||
/* Abschlussband und Footer sind beide dunkel – eine helle Haarlinie trennt sie. */
|
||||
.world-interior .section-footer {
|
||||
border-top: 1px solid hsl(var(--footer-muted) / 0.35);
|
||||
}
|
||||
|
||||
|
|
@ -312,159 +247,65 @@
|
|||
background: linear-gradient(145deg, hsl(var(--primary-light)) 0%, hsl(var(--primary)) 100%);
|
||||
}
|
||||
|
||||
/* Variante „Modern“: der Footer ist dunkel, also das negative Logo statt des positiven. */
|
||||
/* Der Interior-Footer ist dunkel, also das negative Logo statt des positiven. */
|
||||
.footer-logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.palette-modern .world-interior .footer-logo-light {
|
||||
.world-interior .footer-logo-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.palette-modern .world-interior .footer-logo-dark {
|
||||
.world-interior .footer-logo-dark {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@import "./shared-styles.css";
|
||||
|
||||
/* ── Entwurf „Greige“: Footer dunkel mit Goldlinie und negativem Logo ─────── */
|
||||
.world-interior.palette-greige .section-footer {
|
||||
border-top: 1px solid hsl(var(--secondary) / 0.6);
|
||||
/* Interior: EB Garamond wirkt bei gleicher Größe deutlich kleiner als IBM Plex Sans der
|
||||
Immobilien-Welt. Die kleinen Überschriften (h2/h3 mit text-xl, h4) bekommen deshalb hier eine
|
||||
Stufe mehr (07.10.2026); die Immobilien-Welt bleibt unverändert. */
|
||||
.world-interior :is(h2, h3).text-xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.world-interior.palette-greige .section-footer .text-secondary {
|
||||
.world-interior h4 {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Slideshow-Punkte im Hero: die Glass-Flow-Regel für Buttons (Schatten, Anheben, Aufhellen) gilt
|
||||
hier nicht – der Button ist nur eine unsichtbare Klickfläche um den dünnen Balken. */
|
||||
.variante-glass-flow button[data-hero-dot],
|
||||
.variante-glass-flow button[data-hero-dot]:hover {
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
filter: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Auf Ockerflächen wird `text-secondary` sonst zu Tanne (shared-styles.css) – in der weißen Box der
|
||||
Vision-Section (Startseite) trägt die Hervorhebung wieder Ocker. */
|
||||
section.bg-secondary [data-vision-box] .text-secondary {
|
||||
color: hsl(var(--secondary));
|
||||
}
|
||||
|
||||
.world-interior.palette-greige .footer-logo-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.world-interior.palette-greige .footer-logo-dark {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ── Hero des Entwurfs: Rahmen mit Goldkante, grüne Flanken, Slider ────────
|
||||
Goldkanten als Verlaufs-Border: transparenter Rand, Fläche auf padding-box,
|
||||
Goldverlauf auf border-box. Kein Pseudo-Rand mit Maske mehr – der ließ an
|
||||
der gerundeten Kante eine helle Linie durchscheinen. Die grünen Flanken sind
|
||||
Inline-SVGs (components/web/hero-flank-*), skaliert über die Rahmenhöhe. */
|
||||
.hero-draft .hero-frame {
|
||||
/* Heroes der Interior-Welt (Startseite, Marken, Über uns, Kontakt): Rahmen als Goldverlauf
|
||||
(07.10.2026, Vorbild „Farbwelt und Stil“). Die Immobilien-Welt behält ihren Rahmen.
|
||||
Transparenter Rand, Fläche auf padding-box, Verlauf auf border-box – so folgt die Linie
|
||||
der Rundung ohne Pseudo-Element. Selektor schlägt die Glass-Flow-Regel für den Rahmen. */
|
||||
.world-interior .variante-glass-flow div.hero-frame,
|
||||
.world-interior div.hero-frame {
|
||||
border: 1.5px solid transparent;
|
||||
background:
|
||||
linear-gradient(hsl(var(--hero-container)), hsl(var(--hero-container))) padding-box,
|
||||
linear-gradient(to bottom right, hsl(40, 5.65%, 95.65%), hsl(40, 15.95%, 93.9%)) padding-box,
|
||||
linear-gradient(
|
||||
125deg,
|
||||
hsl(var(--secondary-light)) 0%,
|
||||
hsl(var(--secondary)) 28%,
|
||||
hsl(var(--secondary) / 0.35) 62%,
|
||||
hsl(var(--secondary-light)) 100%
|
||||
hsl(var(--secondary-lighter) / 0.9) 0%,
|
||||
hsl(var(--secondary-light) / 0.75) 22%,
|
||||
hsl(var(--secondary-lighter) / 0.45) 55%,
|
||||
hsl(var(--secondary-light) / 0.75) 82%,
|
||||
hsl(var(--secondary-lighter) / 0.9) 100%
|
||||
) border-box;
|
||||
box-shadow: var(--shadow-elevated);
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.hero-draft .hero-flank {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.hero-draft .hero-flank-right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hero-draft .hero-flank-left {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 46%;
|
||||
}
|
||||
|
||||
.hero-draft .hero-image {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Goldkante um das Bild, gleiche Technik wie am Rahmen */
|
||||
.hero-draft .hero-image-frame {
|
||||
border: 1.5px solid transparent;
|
||||
border-radius: 1.25rem;
|
||||
background:
|
||||
linear-gradient(hsl(var(--card)), hsl(var(--card))) padding-box,
|
||||
linear-gradient(
|
||||
135deg,
|
||||
hsl(var(--secondary-light)) 0%,
|
||||
hsl(var(--secondary)) 40%,
|
||||
hsl(var(--secondary) / 0.4) 100%
|
||||
) border-box;
|
||||
box-shadow: var(--shadow-elevated);
|
||||
}
|
||||
|
||||
.hero-draft .hero-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.28em;
|
||||
text-transform: uppercase;
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
.hero-draft .hero-eyebrow::after {
|
||||
content: "";
|
||||
width: 3.5rem;
|
||||
height: 1px;
|
||||
background: hsl(var(--secondary));
|
||||
}
|
||||
|
||||
.hero-draft .hero-title {
|
||||
font-family: var(--font-secondary);
|
||||
font-size: clamp(2rem, 3.1vw, 3.3rem);
|
||||
line-height: 1.12;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.01em;
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
.hero-draft .hero-title em {
|
||||
font-style: normal;
|
||||
color: hsl(var(--secondary-deep));
|
||||
}
|
||||
|
||||
/* Button: Goldrand rundum, unten kräftiger, Pfeil in Gold */
|
||||
.hero-draft .btn-hero {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem 1.75rem;
|
||||
border-radius: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--primary-foreground));
|
||||
background: linear-gradient(145deg, hsl(var(--primary)) 0%, hsl(var(--primary-light)) 100%);
|
||||
border: 1px solid hsl(var(--secondary));
|
||||
border-bottom-width: 3px;
|
||||
box-shadow: 0 14px 30px -14px hsl(var(--primary) / 0.6);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.hero-draft .btn-hero svg {
|
||||
color: hsl(var(--secondary-light));
|
||||
}
|
||||
|
||||
.hero-draft .btn-hero:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 18px 34px -14px hsl(var(--primary) / 0.7);
|
||||
}
|
||||
|
||||
.hero-draft .hero-slide {
|
||||
transition: opacity 1.4s ease-in-out;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hero-draft .hero-slide {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue