Kevin Adametz
7953a8c9a1
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>
1083 lines
24 KiB
CSS
1083 lines
24 KiB
CSS
/* Shared styles for all web themes - no @apply directives */
|
||
@import "./fonts.css";
|
||
|
||
*,
|
||
::before,
|
||
::after {
|
||
box-sizing: border-box;
|
||
border-width: 0;
|
||
border-style: solid;
|
||
border-color: hsl(var(--border));
|
||
}
|
||
|
||
body {
|
||
background-color: hsl(var(--background));
|
||
color: hsl(var(--foreground));
|
||
font-family: var(--font-primary, 'Inter'), system-ui, -apple-system, sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
/* Cursor pointer für alle klickbaren Elemente (global) */
|
||
button,
|
||
a,
|
||
[role="button"],
|
||
input[type="submit"],
|
||
input[type="button"],
|
||
input[type="reset"],
|
||
summary {
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Klasse für klickbare Custom-Elemente (z. B. div mit @click) */
|
||
.clickable {
|
||
cursor: pointer;
|
||
}
|
||
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-weight: 500;
|
||
letter-spacing: -0.025em;
|
||
font-family: var(--font-secondary, 'Inter'), var(--font-primary, 'Inter'), system-ui, -apple-system, sans-serif;
|
||
}
|
||
|
||
|
||
/* Typography scales */
|
||
.text-hero {
|
||
font-size: clamp(2.6rem, 3.5vw, 3.6rem);
|
||
line-height: 1.1;
|
||
font-weight: 300;
|
||
letter-spacing: -0.025em;
|
||
}
|
||
|
||
.text-hero-alt {
|
||
font-size: clamp(2rem, 3vw, 3rem);
|
||
line-height: 1.1;
|
||
font-weight: 300;
|
||
letter-spacing: -0.025em;
|
||
}
|
||
.text-section-title {
|
||
font-size: clamp(1.6rem, 3vw, 3rem);
|
||
line-height: 1.3em;
|
||
font-weight: 300;
|
||
letter-spacing: -0.025em;
|
||
}
|
||
|
||
.text-large {
|
||
font-size: clamp(1.1rem, 2vw, 1.2rem);
|
||
line-height: 1.625;
|
||
}
|
||
|
||
/* Border utilities to override the global border-width: 0 */
|
||
.border-t {
|
||
border-top-width: 1px !important;
|
||
}
|
||
.border-b {
|
||
border-bottom-width: 1px !important;
|
||
}
|
||
.border-l {
|
||
border-left-width: 1px !important;
|
||
}
|
||
.border-r {
|
||
border-right-width: 1px !important;
|
||
}
|
||
.border {
|
||
border-width: 1px !important;
|
||
}
|
||
|
||
/* Button styles */
|
||
.btn-primary {
|
||
background-color: hsl(var(--primary));
|
||
background: linear-gradient(
|
||
145deg,
|
||
hsl(var(--primary)) 0%,
|
||
hsl(var(--primary-light)) 100%
|
||
) !important;
|
||
color: hsl(var(--primary-foreground));
|
||
padding: 0.75rem 2rem;
|
||
border-radius: 0.5rem;
|
||
font-weight: 500;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||
display: inline-block;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background-color: hsl(var(--primary-dark));
|
||
background: linear-gradient(
|
||
145deg,
|
||
hsl(var(--primary-light)) 0%,
|
||
hsl(var(--primary)) 100%
|
||
) !important;
|
||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||
}
|
||
|
||
.btn-primary-accent {
|
||
background-color: hsl(var(--primary));
|
||
background: linear-gradient(
|
||
145deg,
|
||
hsl(var(--primary)) 0%,
|
||
hsl(var(--primary-light)) 100%
|
||
) !important;
|
||
color: hsl(var(--primary-foreground));
|
||
border: 1px solid hsl(var(--border));
|
||
padding: 0.75rem 2rem;
|
||
border-radius: 0.5rem;
|
||
font-weight: 500;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||
display: inline-block;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-primary-accent:hover {
|
||
background-color: hsl(var(--accent));
|
||
background: linear-gradient(
|
||
145deg,
|
||
hsl(var(--primary-light)) 0%,
|
||
hsl(var(--primary)) 100%
|
||
) !important;
|
||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background-color: hsl(var(--secondary));
|
||
background: linear-gradient(
|
||
145deg,
|
||
hsl(var(--secondary)) 0%,
|
||
hsl(var(--secondary-dark)) 100%
|
||
) !important;
|
||
color: hsl(var(--secondary-foreground));
|
||
border: 1px solid hsl(var(--border));
|
||
padding: 0.75rem 2rem;
|
||
border-radius: 0.5rem;
|
||
font-weight: 500;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||
display: inline-block;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background-color: hsl(var(--secondary-dark));
|
||
background: linear-gradient(
|
||
145deg,
|
||
hsl(var(--secondary-dark)) 0%,
|
||
hsl(var(--secondary)) 100%
|
||
) !important;
|
||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||
}
|
||
|
||
.btn-secondary-accent {
|
||
background-color: hsl(var(--secondary));
|
||
background: linear-gradient(
|
||
145deg,
|
||
hsl(var(--secondary)) 0%,
|
||
hsl(var(--secondary-dark)) 100%
|
||
) !important;
|
||
color: hsl(var(--secondary-foreground));
|
||
border: 1px solid hsl(var(--border));
|
||
padding: 0.75rem 2rem;
|
||
border-radius: 0.5rem;
|
||
font-weight: 500;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
display: inline-block;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-secondary-accent:hover {
|
||
background-color: hsl(var(--accent));
|
||
background: linear-gradient(
|
||
145deg,
|
||
hsl(var(--secondary-dark)) 0%,
|
||
hsl(var(--secondary)) 100%
|
||
) !important;
|
||
}
|
||
|
||
.btn-secondary-accent.small {
|
||
padding: 0.75rem 1.25rem;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
|
||
.btn-accent {
|
||
background-color: hsl(var(--accent));
|
||
background: linear-gradient(
|
||
145deg,
|
||
hsl(var(--accent)) 0%,
|
||
hsl(var(--accent-dark)) 100%
|
||
) !important;
|
||
color: hsl(var(--accent-foreground));
|
||
padding: 0.75rem 2rem;
|
||
border-radius: 0.5rem;
|
||
font-weight: 500;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||
display: inline-block;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-accent:hover {
|
||
background: linear-gradient(
|
||
145deg,
|
||
hsl(var(--accent-dark)) 0%,
|
||
hsl(var(--accent)) 100%
|
||
) !important;
|
||
color: hsl(var(--accent-foreground));
|
||
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));
|
||
border-radius: 1rem;
|
||
box-shadow: var(--shadow-card);
|
||
border: 1px solid hsl(var(--border) / 0.5);
|
||
}
|
||
|
||
/* Section styles */
|
||
.section-padding {
|
||
padding-top: 4rem;
|
||
padding-bottom: 4rem;
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.section-padding {
|
||
padding-top: 6rem;
|
||
padding-bottom: 6rem;
|
||
}
|
||
}
|
||
|
||
.section-dark {
|
||
background-color: hsl(var(--dark-bg));
|
||
color: hsl(var(--dark-text));
|
||
}
|
||
|
||
/* 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(--cta-band-end, var(--secondary-dark))) 100%
|
||
);
|
||
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: var(--cta-band-gradient);
|
||
}
|
||
|
||
/* Lichtkante oben, die zu beiden Seiten auslaeuft (Interior: in Ocker, sonst weiss). */
|
||
.cta-band::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 1px;
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent 0%,
|
||
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: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
background: linear-gradient(
|
||
165deg,
|
||
hsl(0 0% 100% / 0.07) 0%,
|
||
transparent 48%
|
||
);
|
||
}
|
||
|
||
.text-dark-muted {
|
||
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;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
padding-left: 1rem;
|
||
padding-right: 1rem;
|
||
}
|
||
|
||
@media (min-width: 640px) {
|
||
.container-padding {
|
||
padding-left: 1.5rem;
|
||
padding-right: 1.5rem;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.container-padding {
|
||
padding-left: 2rem;
|
||
padding-right: 2rem;
|
||
}
|
||
}
|
||
|
||
.container-narrow {
|
||
max-width: 56rem;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
padding-left: 1rem;
|
||
padding-right: 1rem;
|
||
}
|
||
|
||
@media (min-width: 640px) {
|
||
.container-narrow {
|
||
padding-left: 1.5rem;
|
||
padding-right: 1.5rem;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.container-narrow {
|
||
padding-left: 2rem;
|
||
padding-right: 2rem;
|
||
}
|
||
}
|
||
|
||
/* Spacing utilities */
|
||
.spacing-section > * + * {
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.spacing-content > * + * {
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
.spacing-small > * + * {
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
/* Additional utility classes for better consistency */
|
||
.text-muted-foreground {
|
||
color: hsl(var(--muted-foreground));
|
||
}
|
||
|
||
.bg-background {
|
||
background-color: hsl(var(--background));
|
||
}
|
||
|
||
.text-foreground {
|
||
color: hsl(var(--foreground));
|
||
}
|
||
|
||
.bg-card {
|
||
background-color: hsl(var(--card));
|
||
}
|
||
|
||
.text-card-foreground {
|
||
color: hsl(var(--card-foreground));
|
||
}
|
||
|
||
.border-border {
|
||
border-color: hsl(var(--border));
|
||
}
|
||
|
||
.text-secondary {
|
||
color: hsl(var(--secondary));
|
||
}
|
||
|
||
.bg-secondary {
|
||
background: linear-gradient(
|
||
180deg,
|
||
hsl(var(--secondary)) 0%,
|
||
hsl(var(--secondary), 0.4) 100%
|
||
);
|
||
position: relative;
|
||
}
|
||
|
||
.text-secondary-foreground {
|
||
color: hsl(var(--secondary-foreground));
|
||
}
|
||
|
||
.bg-primary {
|
||
background-color: hsl(var(--primary));
|
||
}
|
||
|
||
.text-primary-foreground {
|
||
color: hsl(var(--primary-foreground));
|
||
}
|
||
|
||
.bg-accent {
|
||
background-color: hsl(var(--accent));
|
||
}
|
||
|
||
.text-accent-foreground {
|
||
color: hsl(var(--accent-foreground));
|
||
}
|
||
|
||
.bg-muted {
|
||
background-color: hsl(var(--muted));
|
||
}
|
||
|
||
.bg-muted\/20 {
|
||
background-color: hsl(var(--muted) / 0.2);
|
||
}
|
||
|
||
.bg-secondary\/10 {
|
||
background-color: hsl(var(--secondary) / 0.1);
|
||
}
|
||
|
||
.bg-secondary\/15 {
|
||
background-color: hsl(var(--secondary) / 0.15);
|
||
}
|
||
|
||
.bg-secondary\/20 {
|
||
background-color: hsl(var(--secondary) / 0.2);
|
||
}
|
||
.bg-card\/95 {
|
||
background-color: hsl(var(--card) / 0.95);
|
||
}
|
||
|
||
.border-border\/50 {
|
||
border-color: hsl(var(--border) / 0.5);
|
||
}
|
||
|
||
.border-border\/30 {
|
||
border-color: hsl(var(--border) / 0.3);
|
||
}
|
||
|
||
.text-dark-muted {
|
||
color: hsl(var(--dark-muted));
|
||
}
|
||
|
||
.border-dark-muted\/30 {
|
||
border-color: hsl(var(--dark-muted) / 0.3);
|
||
}
|
||
|
||
.text-dark-text {
|
||
color: hsl(var(--dark-text));
|
||
}
|
||
|
||
.bg-dark-bg {
|
||
background-color: hsl(var(--dark-bg));
|
||
}
|
||
|
||
.bg-hero-container {
|
||
background-color: hsl(var(--hero-container));
|
||
}
|
||
|
||
.shadow-elevated {
|
||
box-shadow: var(--shadow-elevated);
|
||
}
|
||
|
||
.shadow-card {
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
|
||
.shadow-accent-glow {
|
||
box-shadow: var(--shadow-accent-glow);
|
||
}
|
||
|
||
/* Theme-spezifische Farben für Tailwind-Kompatibilität */
|
||
.text-primary {
|
||
color: hsl(var(--primary));
|
||
}
|
||
|
||
.text-secondary {
|
||
color: hsl(var(--secondary));
|
||
}
|
||
|
||
.text-muted-foreground {
|
||
color: hsl(var(--muted-foreground));
|
||
}
|
||
|
||
.bg-primary {
|
||
background-color: hsl(var(--primary));
|
||
}
|
||
|
||
.bg-secondary {
|
||
background-color: hsl(var(--secondary));
|
||
}
|
||
|
||
.border-primary {
|
||
border-color: hsl(var(--primary));
|
||
}
|
||
|
||
.border-secondary {
|
||
border-color: hsl(var(--secondary));
|
||
}
|
||
|
||
/* Hover-Effekte für Navigation */
|
||
.hover-text-secondary:hover {
|
||
color: hsl(var(--secondary));
|
||
}
|
||
|
||
.hover-text-primary:hover {
|
||
color: hsl(var(--primary));
|
||
}
|
||
|
||
.hover-bg-primary:hover {
|
||
background-color: hsl(var(--primary));
|
||
}
|
||
|
||
.hover-bg-secondary:hover {
|
||
background-color: hsl(var(--secondary));
|
||
}
|
||
|
||
.hover-border-secondary:hover {
|
||
border-color: hsl(var(--secondary));
|
||
}
|
||
|
||
.hover-shadow-accent-glow:hover {
|
||
box-shadow: var(--shadow-accent-glow);
|
||
}
|
||
|
||
/* TopBar specific styles */
|
||
.topbar-normal {
|
||
background-color: hsl(var(--muted));
|
||
}
|
||
|
||
/* Sticky Header Verhalten */
|
||
.header-sticky {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 50;
|
||
background-color: hsl(var(--background) / 0.8);
|
||
backdrop-filter: blur(8px);
|
||
border-bottom: 1px solid hsl(var(--border));
|
||
transition: all 0.3s ease-in-out;
|
||
}
|
||
|
||
.header-normal {
|
||
position: relative;
|
||
transition: all 0.3s ease-in-out;
|
||
border-bottom: 1px solid hsl(var(--border)/0.3);
|
||
|
||
}
|
||
|
||
.bg-muted\/20 {
|
||
background-color: hsl(var(--muted) / 0.2);
|
||
}
|
||
|
||
.border-border\/30 {
|
||
border-color: hsl(var(--border) / 0.3);
|
||
}
|
||
.font-secondary {
|
||
font-family: var(--font-secondary, 'Inter'), var(--font-primary, 'Inter'), system-ui, -apple-system, sans-serif;
|
||
}
|
||
|
||
|
||
/* Premium Scroll Animations - Optimiert und subtil */
|
||
.scroll-animate {
|
||
opacity: 0;
|
||
will-change: opacity, transform;
|
||
transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
||
transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
}
|
||
|
||
.scroll-animate.is-visible {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Fade In - Sanftes Einblenden */
|
||
.fade-in {
|
||
opacity: 0;
|
||
will-change: opacity;
|
||
transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
}
|
||
|
||
.fade-in.is-visible {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Slide from Bottom - Subtiler */
|
||
.slide-up {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
will-change: opacity, transform;
|
||
transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
||
transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
}
|
||
|
||
.slide-up.is-visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.slide-down {
|
||
opacity: 0;
|
||
transform: translateY(-30px);
|
||
will-change: opacity, transform;
|
||
transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
||
transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
}
|
||
|
||
.slide-down.is-visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* Slide from Left - Subtiler */
|
||
.slide-right {
|
||
opacity: 0;
|
||
transform: translateX(-30px);
|
||
will-change: opacity, transform;
|
||
transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
||
transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
}
|
||
|
||
.slide-right.is-visible {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
/* Slide from Right - Subtiler */
|
||
.slide-left {
|
||
opacity: 0;
|
||
transform: translateX(30px);
|
||
will-change: opacity, transform;
|
||
transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
||
transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
}
|
||
|
||
.slide-left.is-visible {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
/* Scale In - Sehr subtil */
|
||
.scale-in {
|
||
opacity: 0;
|
||
transform: scale(0.97);
|
||
will-change: opacity, transform;
|
||
transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
||
transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
}
|
||
|
||
.scale-in.is-visible {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
|
||
/* Staggered delays - Für gestaffelte Animationen */
|
||
.delay-100 {
|
||
transition-delay: 0.1s;
|
||
}
|
||
|
||
.delay-200 {
|
||
transition-delay: 0.2s;
|
||
}
|
||
|
||
.delay-300 {
|
||
transition-delay: 0.3s;
|
||
}
|
||
|
||
.delay-400 {
|
||
transition-delay: 0.4s;
|
||
}
|
||
|
||
.delay-500 {
|
||
transition-delay: 0.5s;
|
||
}
|
||
|
||
.delay-600 {
|
||
transition-delay: 0.6s;
|
||
}
|
||
|
||
.delay-700 {
|
||
transition-delay: 0.7s;
|
||
}
|
||
|
||
.delay-800 {
|
||
transition-delay: 0.8s;
|
||
}
|
||
|
||
.delay-900 {
|
||
transition-delay: 0.9s;
|
||
}
|
||
|
||
.delay-1000 {
|
||
transition-delay: 1s;
|
||
}
|
||
|
||
/* Reduziere Motion für Nutzer mit Präferenz */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.scroll-animate,
|
||
.fade-in,
|
||
.slide-up,
|
||
.slide-right,
|
||
.slide-left,
|
||
.scale-in {
|
||
transition: none !important;
|
||
opacity: 1 !important;
|
||
transform: none !important;
|
||
}
|
||
}
|
||
|
||
/* Schatten und Glow leiten sich aus dem Akzent der jeweiligen Welt ab. */
|
||
.shadow-elegant {
|
||
box-shadow: 0 10px 30px -10px hsl(var(--secondary) / 0.2);
|
||
}
|
||
|
||
.shadow-elegant-white {
|
||
box-shadow: 0 10px 30px -10px rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.shadow-white {
|
||
box-shadow: 0 10px 30px -10px rgba(255, 255, 255, 0.4);
|
||
}
|
||
|
||
.elegant-shadow-card {
|
||
box-shadow:
|
||
0 2px 8px -2px rgba(0, 0, 0, 0.08),
|
||
0 4px 10px 0px hsl(var(--secondary));
|
||
}
|
||
|
||
.shadow-premium {
|
||
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 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 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 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);
|
||
background: linear-gradient(
|
||
135deg,
|
||
hsl(var(--secondary)) 0%,
|
||
hsl(var(--secondary-dark)) 100%
|
||
);
|
||
color: hsl(var(--secondary-foreground)) !important;
|
||
position: relative;
|
||
}
|
||
|
||
.variante-glass-flow {
|
||
|
||
& * {
|
||
will-change: auto;
|
||
} section,
|
||
& .section-container {
|
||
background: linear-gradient(
|
||
135deg,
|
||
hsl(var(--background)) 0%,
|
||
hsl(var(--background)/90%) 100%
|
||
);
|
||
position: relative;
|
||
}
|
||
& section.cta-band {
|
||
background: var(--cta-band-gradient);
|
||
position: relative;
|
||
}
|
||
& section.bg-accent {
|
||
background: linear-gradient(
|
||
135deg,
|
||
hsl(var(--accent) /0.5) 0%,
|
||
hsl(var(--accent-dark) / 0.5) 100%
|
||
);
|
||
position: relative;
|
||
}
|
||
& section.bg-secondary {
|
||
background: linear-gradient(
|
||
135deg,
|
||
hsl(var(--secondary)) 0%,
|
||
hsl(var(--secondary-dark)) 100%
|
||
);
|
||
position: relative;
|
||
}
|
||
& div.bg-hero-container {
|
||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||
|
||
background: linear-gradient(
|
||
135deg,
|
||
hsl(var(--hero-container)) 0%,
|
||
hsl(var(--hero-container-dark)) 100%
|
||
);
|
||
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
|
||
|
||
position: relative;
|
||
}
|
||
|
||
|
||
/* Cards - Multi-Layer-Schatten für Tiefe (Optimiert) */
|
||
& .card,
|
||
& [class*="card"],
|
||
& .bg-card {
|
||
background:
|
||
linear-gradient(
|
||
145deg,
|
||
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),
|
||
0 1px 1px rgba(0, 0, 0, 0.02),
|
||
0 2px 3px rgba(0, 0, 0, 0.025),
|
||
0 4px 6px rgba(0, 0, 0, 0.03),
|
||
0 8px 12px rgba(0, 0, 0, 0.04),
|
||
0 12px 20px rgba(0, 0, 0, 0.045),
|
||
inset 0 1px 2px rgba(255, 255, 255, 0.8),
|
||
inset 0 -1px 1px rgba(0, 0, 0, 0.02);
|
||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||
transition:
|
||
transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
|
||
box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
|
||
filter 0.3s ease;
|
||
position: relative;
|
||
}
|
||
|
||
|
||
|
||
& .card:hover,
|
||
& [class*="card"]:hover {
|
||
box-shadow:
|
||
0 0 0 1px rgba(0, 0, 0, 0.04),
|
||
0 2px 4px rgba(0, 0, 0, 0.03),
|
||
0 4px 8px rgba(0, 0, 0, 0.04),
|
||
0 8px 16px rgba(0, 0, 0, 0.05),
|
||
0 16px 24px rgba(0, 0, 0, 0.07),
|
||
0 24px 40px rgba(0, 0, 0, 0.08),
|
||
0 32px 64px rgba(0, 0, 0, 0.06),
|
||
inset 0 1px 3px rgba(255, 255, 255, 0.9),
|
||
inset 0 -1px 2px rgba(0, 0, 0, 0.03);
|
||
transform: translateY(-2px) scale(1.005);
|
||
filter: brightness(1.01);
|
||
}
|
||
|
||
& button,
|
||
& .btn,
|
||
& .btn-secondary,
|
||
& a[class*="btn"],
|
||
& [role="button"] {
|
||
position: relative;
|
||
overflow: hidden;
|
||
isolation: isolate;
|
||
box-shadow:
|
||
0 1px 2px rgba(0, 0, 0, 0.05),
|
||
0 2px 4px rgba(0, 0, 0, 0.06),
|
||
0 4px 8px rgba(0, 0, 0, 0.07),
|
||
0 8px 16px rgba(0, 0, 0, 0.05);
|
||
transition:
|
||
transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
||
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
||
filter 0.2s ease;
|
||
}
|
||
|
||
& button:hover,
|
||
& .btn:hover,
|
||
& .btn-secondary:hover,
|
||
& a[class*="btn"]:hover,
|
||
& [role="button"]:hover {
|
||
box-shadow:
|
||
0 2px 4px rgba(0, 0, 0, 0.06),
|
||
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 hsl(var(--secondary) / 0.3);
|
||
transform: translateY(-2px);
|
||
filter: brightness(1.08);
|
||
}
|
||
|
||
/* Scroll-Optimierung für sanftere Animationen */
|
||
& {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
/* Reset für Section-Navigations-Buttons innerhalb der Variant — keine Glass-Flow-Schatten/Transforms */
|
||
& .sidebar-nav button,
|
||
& .sidebar-nav button:hover {
|
||
box-shadow: none;
|
||
transform: none;
|
||
filter: none;
|
||
overflow: visible;
|
||
isolation: auto;
|
||
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;
|
||
}
|