/* ==========================================================================
Juwelier Grützmacher – Stylesheet
Design-System: siehe dokumentation/design-styleguide.md (Agent Dennis)
========================================================================== */
:root{
/* Primary (Grützmacher-Grün) */
--color-primary: #086b5c; /* Primary (Runde 24: abgedunkelt für AA-Kontrast als Textfarbe, vorher #097d6d = 4.3:1 auf --color-bg) */
--color-primary-hover: #0FA892; /* Primary Light – Hover/aktive Elemente */
--color-primary-soft: #D9F3EF; /* Primary Ultra Light – Karten-Tint, Disabled-Hintergrund */
--color-primary-dark: #0A5F54; /* Primary Dark – feste dunkle Flächen (Footer, Historie, Hero-Verlauf) */
--color-on-primary: #FFFFFF; /* Textfarbe auf Primary-Flächen (Buttons etc.) */
--color-on-primary-hover: #1A1A1A; /* Text auf Primary-Hover-Flächen (Kontrast, da Hover-Ton heller ist) */
/* Neutrals */
--color-bg: #F4ECDF; /* Warmes Creme – Seitenhintergrund (Runde 20, vorher Hellgrau #F5F5F5) */
--color-white: #FFFFFF; /* White – Karten/Flächen */
--color-border: #E6E6E6; /* Gray */
--color-text-muted: #4A4A4A; /* Dark Gray */
--color-text: #1A1A1A; /* Text Black */
/* Accent (Gold) */
--color-accent: #C9A86A; /* Gold Accent */
--color-accent-light: #E8D7B9; /* Soft Gold – für kleine Flächen (Chips, Icon-Badges) */
--color-accent-muted: #E8D7B9; /* reserviert für kräftigere Gold-Flächen (Badges mit dunklem Text) */
/* Großflächiger Sektions-Tint (z. B. Quick-Nav-Bereich, Icon-Platzhalter):
im Hell-Modus ein warmer Gold-Ton, im Dunkel-Modus bewusst neutral
(= Kartenfarbe), damit große Flächen nicht "schmutzig" wirken. */
--color-surface-tint: #E8D7B9;
--color-sheen: rgba(255,255,255,.55); /* dekorativer Lichtschein auf Icon-Platzhaltern */
/* Statusfarben (für Formulare, Hinweise, Badges) */
--color-warning: #E67E22;
--color-success: #2ECC71;
--color-error: #D64545;
--font-headline: "Playfair Display", Georgia, serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-5: 48px;
--space-6: 64px;
--space-7: 96px;
--radius: 2px;
--max-width: 1280px;
/* Tatsächliche Header-Höhe (durch das 90px-Logo bestimmt, siehe .brand
img) – zentral gepflegt, damit Scroll-Offset, Mindesthöhe und die
Mobile-Nav-Einblendung immer zusammenpassen. */
--header-h: 108px;
--shadow-card: 0 8px 30px rgba(35, 38, 32, 0.08);
/* Für Überschriften/Akzent-Text auf hellen, theme-abhängigen Flächen
(Header, Karten, Chips) – bleibt in Hell "Grützmacher-Grün-Dunkel",
wechselt in Dunkel auf ein helles Mintgrün für ausreichenden Kontrast. */
--color-heading-accent: var(--color-primary-dark);
color-scheme: light;
}
/* ---------- Dark Mode ----------
Automatisch nach Systemeinstellung (prefers-color-scheme), zusätzlich
manuell umschaltbar über den Hell/Dunkel-Button im Header (js/main.js
setzt data-theme="dark"|"light" auf ).
Farbwerte nach Vorgabe Dennis (Feedback-Runde 3, Design-Ready-Palette). */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-primary: #0FA892; /* Primary Button (Dark Mode) */
--color-primary-hover: #11C3A7; /* Primary Glow */
--color-primary-soft: #2E2E2E; /* Disabled-Hintergrund (Dark Mode) */
--color-on-primary: #FFFFFF; /* Text auf Primary-Buttons im Dark Mode (Wunsch Runde 14; Kontrast zu #0FA892 ~3:1, unter AA 4.5:1) */
--color-on-primary-hover: #0F0F0F;
--color-bg: #0F0F0F; /* Dark Background */
--color-white: #1C1C1C; /* Dark Gray – Karten/Sektionen */
--color-border: #2E2E2E; /* Medium Gray */
--color-text-muted: #BFBFBF; /* Light Gray */
--color-text: #F7F7F7; /* White Text */
--color-accent: #D4B47A; /* Gold Accent Dark */
/* Hinweis: "Soft Gold Dark" (#BFA06A) aus der Vorgabe ist als kräftige
Akzentfläche zu hell/gesättigt für große Flächen mit hellem Text
(Kontrast <1.3:1 im Test) – hier daher als abgedunkelter Gold-Tint
verwendet, damit Sektionen/Badges lesbar bleiben. Der Original-Ton
steht als --color-accent-muted weiterhin zur Verfügung. */
--color-accent-light: #33291A;
--color-accent-muted: #BFA06A; /* Soft Gold Dark (Original-Ton lt. Vorgabe) */
--color-surface-tint: #1C1C1C; /* neutral statt Gold-Braun auf großen Flächen */
--color-sheen: rgba(255,255,255,.06);
--color-warning: #E8974D;
--color-success: #4CD787;
--color-error: #FF6B6B;
--shadow-card: 0 8px 30px rgba(0, 0, 0, 0.45);
--color-heading-accent: #11C3A7;
color-scheme: dark;
}
}
:root[data-theme="dark"]{
--color-primary: #0FA892;
--color-primary-hover: #11C3A7;
--color-primary-soft: #2E2E2E;
--color-on-primary: #FFFFFF;
--color-on-primary-hover: #0F0F0F;
--color-bg: #0F0F0F;
--color-white: #1C1C1C;
--color-border: #2E2E2E;
--color-text-muted: #BFBFBF;
--color-text: #F7F7F7;
--color-accent: #D4B47A;
--color-accent-light: #33291A;
--color-accent-muted: #BFA06A;
--color-surface-tint: #1C1C1C;
--color-sheen: rgba(255,255,255,.06);
--color-warning: #E8974D;
--color-success: #4CD787;
--color-error: #FF6B6B;
--shadow-card: 0 8px 30px rgba(0, 0, 0, 0.45);
--color-heading-accent: #11C3A7;
color-scheme: dark;
}
/* ---------- Reset & Base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }
body{
margin: 0;
font-family: var(--font-body);
color: var(--color-text);
background: var(--color-bg);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: var(--color-primary); text-decoration: none; }
a:hover{ text-decoration: underline; }
h1, h2, h3{ font-family: var(--font-headline); line-height: 1.2; margin: 0 0 var(--space-2); color: var(--color-text); }
h1{ font-size: clamp(2.1rem, 4.5vw, 3.25rem); font-weight: 700; }
h2{ font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 600; }
h3{ font-family: var(--font-body); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.01em; margin-bottom: var(--space-1); }
p{ margin: 0 0 var(--space-2); }
ul{ margin: 0; padding: 0; list-style: none; }
.container{ max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-3); }
section{ padding: var(--space-7) 0; }
@media (max-width: 720px){ section{ padding: var(--space-5) 0; } }
/* ---------- Icons (flächiges SVG-Icon-Set, images/icons.svg) ---------- */
.icon{
width: 1em; height: 1em; fill: currentColor; flex: none;
display: inline-block; vertical-align: middle;
}
.visually-hidden{
position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link{
position: absolute; left: -999px; top: 0; background: var(--color-primary); color: var(--color-on-primary);
padding: 10px 16px; z-index: 1000; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left: 0; }
/* ---------- Kicker / Eyebrow ---------- */
.kicker{
display: inline-block;
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
/* Gold (--color-accent) hat auf hellen/adaptiven Flächen zu wenig
Kontrast für kleinen Fließtext (getestet: ~2.3:1) – daher hier der
bereits vorhandene, kontraststarke Akzent-Ton (Grün/Mint je Theme). */
color: var(--color-heading-accent);
margin-bottom: var(--space-1);
}
/* ---------- Buttons ---------- */
.btn{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
border-radius: 8px;
font-weight: 600;
font-size: 0.98rem;
border: 2px solid transparent;
cursor: pointer;
transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
max-width: 100%;
}
.btn:hover{ transform: translateY(-1px); text-decoration: none; }
.btn-primary{ background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover{ background: var(--color-primary-hover); color: var(--color-on-primary-hover); }
.btn-outline{ background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline:hover{ background: var(--color-primary); color: var(--color-on-primary); }
.btn-on-dark{ background: #fff; color: var(--color-primary-dark); }
.btn-on-dark:hover{ background: var(--color-accent); color: var(--color-primary-dark); }
.btn .ext-icon{ font-size: 0.85em; }
.btn:disabled, .btn[aria-disabled="true"]{
background: var(--color-primary-soft); color: var(--color-text-muted);
border-color: transparent; cursor: not-allowed; transform: none; box-shadow: none;
}
/* ---------- Header ---------- */
.site-header{
position: sticky; top: 0; z-index: 100;
/* Im Hell-Modus fest auf Dirks Vorgabe (#E8D7B9, entspricht dem
Gold-Tint), im Dunkel-Modus bleibt es bei --color-bg (unverändert). */
background: #E8D7B9;
border-bottom: 1px solid var(--color-border);
}
:root[data-theme="dark"] .site-header{ background: var(--color-bg); }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .site-header{ background: var(--color-bg); }
}
/* Hinweis: bewusst KEIN backdrop-filter/transform/filter auf .site-header –
das würde einen neuen Containing Block für die fixed-positionierte
Mobile-Nav (.main-nav) erzeugen und das Off-Canvas-Menü auf die
Header-Höhe zusammenstauchen (getestet, siehe README/QA). */
.site-header .container{
display: flex; align-items: center; justify-content: space-between;
padding-top: var(--space-1); padding-bottom: var(--space-1);
min-height: var(--header-h);
}
.brand{ display: flex; align-items: center; gap: 10px; }
.brand img{ height: 90px; padding: 10px 0; width: auto; }
/* Logo-Umschaltung Hell/Dunkel: beide Logos liegen im Markup, CSS blendet je
nach Theme das passende ein – kein JS/Flash beim Umschalten nötig. */
.brand-logo-dark{ display: none; }
:root[data-theme="dark"] .brand-logo-light{ display: none; }
:root[data-theme="dark"] .brand-logo-dark{ display: block; }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .brand-logo-light{ display: none; }
:root:not([data-theme="light"]) .brand-logo-dark{ display: block; }
}
.brand-text{ font-family: var(--font-headline); font-weight: 700; font-size: 1.1rem; color: var(--color-heading-accent); }
/* Generisches Hell/Dunkel-Bild-Swapping für Icon-Grafiken (gleiches Muster
wie beim Logo oben): jeweils zwei ![]()
im Markup, CSS blendet je nach
Theme das passende ein – kein JS/Flash beim Umschalten nötig. */
.theme-swap-dark{ display: none; }
:root[data-theme="dark"] .theme-swap-light{ display: none; }
:root[data-theme="dark"] .theme-swap-dark{ display: block; }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .theme-swap-light{ display: none; }
:root:not([data-theme="light"]) .theme-swap-dark{ display: block; }
}
.main-nav ul{ display: flex; gap: var(--space-4); align-items: center; }
.main-nav a{
color: var(--color-text); font-weight: 500; font-size: 0.95rem;
}
.main-nav a:hover{ color: var(--color-primary); text-decoration: none; }
.header-cta{ display: flex; align-items: center; gap: var(--space-3); }
.header-phone{ display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--color-heading-accent); }
.header-phone .icon{ font-size: 1.1rem; }
.header-phone img.theme-swap-light, .header-phone img.theme-swap-dark{ width: 18px; height: 18px; object-fit: contain; flex: none; }
.theme-toggle{
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border);
background: var(--color-white); cursor: pointer; font-size: 1.15rem; flex: none;
/* Fest (nicht über --color-heading-accent), wie von Dennis vorgegeben:
Hell #097d6d, Dunkel #11c3a7 – unabhängig von künftigen Änderungen an
der übrigen Akzentfarbe für Überschriften. */
color: #097D6D;
transition: background .2s ease, border-color .2s ease, transform .15s ease, color .2s ease;
}
:root[data-theme="dark"] .theme-toggle{ color: #11C3A7; }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .theme-toggle{ color: #11C3A7; }
}
.theme-toggle:hover{ transform: translateY(-1px); border-color: var(--color-accent); }
.theme-toggle .theme-icon-sun{ display: none; }
.theme-toggle .theme-icon-moon{ display: block; }
:root[data-theme="dark"] .theme-toggle .theme-icon-sun{ display: block; }
:root[data-theme="dark"] .theme-toggle .theme-icon-moon{ display: none; }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .theme-toggle .theme-icon-sun{ display: block; }
:root:not([data-theme="light"]) .theme-toggle .theme-icon-moon{ display: none; }
}
.nav-toggle{
display: none; background: none; border: none; cursor: pointer; padding: 8px;
}
.nav-toggle span{ display: block; width: 24px; height: 2px; background: var(--color-text); margin: 5px 0; transition: .2s; transform-origin: center; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
/* Breakpoint für Header/Navigation bewusst höher als die übrigen 900px-
Breakpoints der Seite: die Vollnavigation (6 Punkte) + ausgeschriebene
Telefonnummer + größeres Logo (seit Runde 4, 90px) passen erst ab ca.
1100px nebeneinander in eine Zeile – darunter brach die Telefonnummer
zweizeilig um und das Logo wurde gestaucht (siehe Feedback). */
@media (max-width: 1180px){
.main-nav{
position: fixed; inset: var(--header-h) 0 0 0;
/* Im Hell-Modus an die Header-Farbe angeglichen (siehe .site-header
oben), damit beim Öffnen kein Farbbruch zwischen Header und Menü
entsteht. Dunkel-Modus bleibt bei --color-bg (Header ist dort
ohnehin --color-bg, kein Bruch). */
background: #E8D7B9;
/* Wichtig: -110% bezieht sich nur auf die EIGENE Höhe des Panels, die
aber schon um --header-h nach unten versetzt ist (inset). Bei -110%
blieb dadurch ein ca. 20–35px hoher Streifen des Panels am oberen
Bildschirmrand sichtbar (Feedback: "weißer Streifen im Header").
Fix: zusätzlich um --header-h nach oben verschieben, plus etwas
Sicherheitsabstand, damit das Panel garantiert vollständig aus dem
sichtbaren Bereich verschwindet. */
transform: translateY(calc(-100% - var(--header-h) - 24px));
transition: transform .25s ease; overflow-y: auto;
padding: var(--space-4) var(--space-3); z-index: 99;
}
:root[data-theme="dark"] .main-nav{ background: var(--color-bg); }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .main-nav{ background: var(--color-bg); }
}
.main-nav.open{ transform: translateY(0); }
.main-nav ul{ flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.main-nav a{ font-size: 1.2rem; }
.header-phone span.phone-label{ display: none; }
.nav-toggle{ display: block; }
}
/* ---------- Hero / Slider ---------- */
.hero{
position: relative; height: min(88vh, 780px); min-height: 480px; overflow: hidden;
color: #fff; display: flex; align-items: flex-end;
}
.hero-slide{
position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease-in-out;
overflow: hidden; will-change: opacity;
display: flex; align-items: flex-end;
}
.hero-slide.is-active{ opacity: 1; z-index: 1; }
/* Bild-Ebene getrennt vom Slide-Container, damit nur das Foto zoomt und
Text/Overlay unangetastet bleiben. Bildquelle bleibt wie gehabt per
Inline-Style als background-image auf .hero-slide selbst (HTML unver-
ändert) – ::before übernimmt sie per "inherit". Wichtig: NICHT über eine
eigene CSS-Custom-Property mit url() lösen, die per var() erst im
Stylesheet ausgewertet wird – relative Bildpfade würden dann fälsch-
licherweise relativ zu css/style.css statt zur HTML-Datei aufgelöst
(getestet: images/… wurde zu css/images/…, 404). "inherit" übernimmt
dagegen den bereits fertig aufgelösten Wert vom Elternelement.
Sanfter "Ken Burns"-Zoom, ursprünglich (Runde 16) nur während der aktiven
Anzeigedauer per animation auf .is-active::before gestartet/gestoppt.
Runde 17: Das verursachte einen sichtbaren Ruckler – sobald ein Slide die
is-active-Klasse verliert, greift eine dort gebundene animation-Regel
nicht mehr, wodurch der aktuelle Zoom-Stand (z. B. 1.04x) OHNE Übergang
sofort auf scale(1) zurückspringt, exakt im selben Moment, in dem das
Überblenden beginnt (per Playwright reproduziert: getComputedStyle zeigte
den Sprung im selben Frame). Ein Versuch, das über eine zusätzliche
transition auf transform abzufedern, griff nicht zuverlässig – Chrome
transitioniert beim Wegfall einer Animation nicht immer vom zuletzt
animierten Wert aus. Robuste Lösung: Der Zoom läuft jetzt für ALLE Slides
durchgehend und synchron (kein Start/Stopp mehr über is-active), pendelt
unendlich zwischen 1 und 1.08 (infinite alternate). Dadurch haben aktiver
und gerade abtretender Slide beim Überblenden immer denselben Zoom-Stand
– kein Sprung mehr möglich, unabhängig vom Timing der Slide-Wechsel. */
@keyframes hero-zoom{ from{ transform: scale(1); } to{ transform: scale(1.08); } }
.hero-slide::before{
content: ""; position: absolute; inset: 0;
background-image: inherit; background-size: cover; background-position: center;
transform: scale(1); transform-origin: center;
animation: hero-zoom 12s ease-in-out infinite alternate;
}
.hero-slide::after{
content: ""; position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(6,32,27,.88) 0%, rgba(6,32,27,.55) 45%, rgba(6,32,27,.25) 100%);
}
.hero-slide--brand{
/* Zwei feste dunkle Töne (nicht theme-abhängig) – so bleibt der Text in
jedem Bereich des Verlaufs und in beiden Themes ausreichend lesbar;
der theme-abhängige, im Dark Mode helle --color-primary wäre am
Verlaufsende zu hell für Weiß/Gold-Text. */
background: linear-gradient(135deg, #063D35, var(--color-primary-dark));
}
.hero-slide--brand::after{ content: none; }
.hero-slide-content{ position: relative; z-index: 2; padding: 0 0 var(--space-6); max-width: 720px; }
.hero .container{ position: relative; width: 100%; height: 100%; display: flex; align-items: flex-end; padding-bottom: var(--space-6); }
.hero-eyebrow{ color: #E8D7B9; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; } /* fest, siehe Hinweis .historie-section .kicker */
.hero h1{ color: #fff; margin: var(--space-1) 0 var(--space-2); }
.hero-sub{ font-size: 1.15rem; color: #f1efe8; max-width: 560px; margin-bottom: var(--space-3); }
.hero-controls{
position: absolute; z-index: 3; bottom: var(--space-3); right: var(--space-3);
display: flex; align-items: center; gap: var(--space-2);
}
.hero-dots{ display: flex; align-items: center; gap: 4px; }
.hero-dots button{
width: 24px; height: 24px; border-radius: 50%; border: none;
background: transparent; cursor: pointer; padding: 0;
display: flex; align-items: center; justify-content: center;
}
.hero-dots button::after{
content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff;
background: transparent; transition: background .2s ease, border-color .2s ease;
}
.hero-dots button.is-active::after{ background: var(--color-accent); border-color: var(--color-accent); }
.hero-arrow{
width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6);
background: rgba(0,0,0,.15); color: #fff; cursor: pointer; font-size: 1rem;
display: flex; align-items: center; justify-content: center;
}
.hero-arrow:hover{ background: rgba(255,255,255,.2); }
.hero-scroll-hint{
position: absolute; z-index: 3; left: 50%; bottom: var(--space-2); transform: translateX(-50%);
color: #fff; opacity: .8; font-size: .8rem; text-align: center;
}
/* ---------- Geschäftsfelder-Intro (Quick Nav) ---------- */
.field-nav{ background: var(--color-surface-tint); }
.field-nav .container{ text-align: center; }
.field-nav p{ max-width: 680px; margin: 0 auto var(--space-4); color: var(--color-text); }
.field-nav-grid{
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);
}
.field-nav-grid > *{ min-width: 0; }
@media (max-width: 900px){ .field-nav-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .field-nav-grid{ grid-template-columns: 1fr; } }
.field-nav-card{
position: relative; overflow: hidden;
background: var(--color-white); border-radius: var(--radius); padding: var(--space-3);
box-shadow: var(--shadow-card); text-decoration: none; color: var(--color-text);
display: flex; flex-direction: column; align-items: center; gap: 10px;
border: 1px solid var(--color-border);
}
/* Hover-Stil "Button N° 045" (webdeasy.de/css-buttons/, Runde 23): Hintergrund
füllt sich mit der Primary-Farbe, gleichzeitig "zeichnet" sich ein heller
Rahmen per animiertem SVG-Stroke einmal komplett um die Karte. Hintergrund-/
Textfarbe nutzen dieselbe WCAG-geprüfte Token-Kombination wie .btn-outline:hover
(var(--color-primary)/var(--color-on-primary)) – dadurch automatisch konsistent
in Hell- und Dunkelmodus, ohne eigene neue Farbwerte. Die frühere Hover-Wirkung
(Anheben + Schatten) wurde zugunsten dieses Effekts entfernt. */
.field-nav-card:hover{
background: var(--color-primary); color: var(--color-on-primary); text-decoration: none;
}
.field-nav-card-border{
position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
fill: none; stroke: var(--color-on-primary); stroke-width: 2px;
vector-effect: non-scaling-stroke;
/* 392 = exakter Umfang des rect-Pfads im festen 100×100-viewBox-Koordinatensystem
(2×(98+98), da rx/ry im HTML inzwischen auf 0 – scharfe Ecken – stehen; bei
abgerundeten Ecken müsste hier stattdessen 2×(98-2·rx) je Seite + die Viertelkreis-
Umfänge gerechnet werden) – bewusst als volle Umfangslänge für dash UND gap gewählt
(nicht wie im Original-Demo ein kürzeres "wanderndes" Segment), damit der Rahmen in
Ruhe zuverlässig komplett unsichtbar ist und beim Hover als komplette Kontur
"aufgezeichnet" wird – unabhängig von der tatsächlichen Kartengröße, da der viewBox
immer 100×100 bleibt (preserveAspectRatio="none" + vector-effect s.o. skaliert nur
die Darstellung, nicht die Pfadlänge in viewBox-Einheiten). WICHTIG: Dieser Wert muss
exakt zum rx/ry-Wert im SVG- in index.html passen (siehe .field-nav-card-border-
Elemente) – bei einer künftigen Änderung der Eckenform hier neu berechnen, sonst
entsteht wieder eine sichtbare Lücke/ein Rest-Punkt an einer Ecke. */
stroke-dasharray: 392; stroke-dashoffset: 392;
transition: stroke-dashoffset .8s ease-in-out;
}
.field-nav-card:hover .field-nav-card-border{ stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce){
.field-nav-card-border{ transition: none; }
}
.field-nav-card .icon{
font-size: 2.1rem; color: var(--color-primary);
width: 2.4em; height: 2.4em; padding: .45em; border-radius: 50%;
background: var(--color-accent-light);
}
/* Icon-Grafiken von Dennis (images/icons/), ersetzen die vorherigen SVG-Icons */
.field-nav-card .icon-badge{
width: 100px; height: 100px; padding: 10px; border-radius: 50%;
background: var(--color-accent-light); object-fit: contain;
}
.field-nav-card strong{ font-family: var(--font-headline); font-size: 1.05rem; }
/* ---------- Business-Field Sections ---------- */
.field-section{ background: var(--color-white); }
.field-section.alt{ background: var(--color-bg); }
/* ---------- Blocksatz + Silbentrennung für größere Fließtext-Blöcke ----------
Betrifft die langen Beschreibungstexte (Geschäftsfelder, Historie-Teaser,
Fließtext auf historie.html/impressum.html/datenschutz.html), NICHT kurze
Elemente wie .kicker, .lead, Subpoints oder Adress-/Kontakt-Absätze mit
manuellen
-Umbrüchen – Blocksatz auf kurzen, per
erzwungenen
Zeilen sieht hässlich gestreckt aus (z. B. "Telefon Berlin: 030 ..." würde
auf volle Breite auseinandergezogen). Die Absätze mit
werden daher
automatisch per :has(br) ausgeschlossen, statt sie einzeln mit einer
Klasse markieren zu müssen. hyphens:auto nutzt die Wörterbuch-Trennung des
Browsers für lang="de" (bereits auf gesetzt); overflow-wrap als
Fallback, falls ein einzelnes Wort trotz Trennung nicht passt. */
.field-content > p:not(.kicker),
.historie-section p:not(.kicker):not(.historie-timeline),
.story-content p:not(:has(br)){
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
overflow-wrap: break-word;
}
.field-grid{
display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-6); align-items: center;
}
/* Grid-Items schrumpfen ohne min-width:0 nicht unter ihre Inhaltsbreite
(z. B. großes Bild in .field-media) – das sprengt sonst die Spalte
und erzeugt horizontales Scrollen auf Mobile. */
.field-grid > *{ min-width: 0; }
.field-grid.reverse{ direction: rtl; }
.field-grid.reverse > *{ direction: ltr; }
@media (max-width: 900px){
.field-grid{ grid-template-columns: 1fr; gap: var(--space-4); }
.field-grid.reverse{ direction: ltr; }
}
.field-media img{
border-radius: var(--radius);
border: 6px solid rgba(198,162,92,.4);
box-shadow: var(--shadow-card);
width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9;
}
.field-media.icon-block{
background:
radial-gradient(circle at 30% 25%, var(--color-sheen), transparent 55%),
repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 34px, rgba(9,125,109,.07) 35px),
var(--color-surface-tint);
border-radius: var(--radius);
aspect-ratio: 4/3;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
border: 1px solid rgba(198,162,92,.4);
}
.icon-block-icon{
font-size: clamp(2.6rem, 7vw, 3.6rem); color: var(--color-primary); fill: currentColor;
width: 2em; height: 2em; padding: .5em; border-radius: 50%;
background: var(--color-white); box-shadow: var(--shadow-card);
}
.icon-block-label{
font-family: var(--font-headline); font-weight: 600; font-size: 1.15rem;
color: var(--color-heading-accent); text-align: center; line-height: 1.3;
}
@media (max-width: 900px){
.field-media.icon-block{ aspect-ratio: 16/9; }
}
.field-subpoints{
display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
margin: var(--space-3) 0;
}
@media (max-width: 560px){ .field-subpoints{ grid-template-columns: 1fr; } }
.field-subpoints h3{ display: flex; align-items: center; gap: 8px; }
.field-subpoints h3::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex: none; }
.field-subpoints p{ color: var(--color-text-muted); font-size: .95rem; margin-bottom: 0; }
/* Standort-Karten (Juweliergeschäft) */
.location-cards{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-3) 0 var(--space-4); }
.location-cards > *{ min-width: 0; }
@media (max-width: 700px){ .location-cards{ grid-template-columns: 1fr; } }
.location-card{
background: var(--color-bg); border: 2px solid rgba(198,162,92,.4); border-radius: var(--radius);
padding: var(--space-3);
}
.location-card h3{
font-family: var(--font-headline); font-size: 1.15rem; color: var(--color-heading-accent);
display: flex; align-items: center; gap: 8px;
}
.location-card h3 .icon, .contact-card h3 .icon{ color: var(--color-accent); font-size: 1.1rem; }
.location-card ul{ display: flex; flex-direction: column; gap: 6px; font-size: .95rem; color: var(--color-text-muted); }
.location-card ul li strong{ color: var(--color-text); }
.maps-link{
display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-2);
font-weight: 600; font-size: .9rem; color: var(--color-primary);
}
.maps-link img{ width: 34px; height: 22px; object-fit: contain; flex: none; }
/* Material-Chips (Onlineshop) */
.material-chips{ display: flex; flex-wrap: wrap; gap: 10px; margin: var(--space-2) 0 var(--space-3); }
.material-chip{
color: var(--color-heading-accent);
background: var(--color-accent-light); padding: 8px 16px; border-radius: 999px;
font-size: .85rem; font-weight: 600;
}
/* ---------- Historie Section (Dark) ---------- */
.historie-section{ background: var(--color-primary-dark); color: #f2efe6; }
.historie-section h2, .historie-section .kicker{ color: #fff; }
/* Feste (nicht theme-abhängige) helle Gold-Nuance – die Section bleibt
immer dunkel, unabhängig vom Hell/Dunkel-Toggle; --color-accent-light
wäre im Dark Mode selbst dunkel und hier unlesbar. */
.historie-section .kicker{ color: #E8D7B9; }
.historie-section p{ color: #d9e3df; }
.historie-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; }
@media (max-width: 900px){ .historie-grid{ grid-template-columns: 1fr; } }
/* Gleiches min-width:0-Problem wie bei .field-grid (siehe Kommentar dort) –
.historie-images ist verschachteltes Grid und braucht die Regel doppelt. */
.historie-grid > *{ min-width: 0; }
.historie-images{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); min-width: 0; }
.historie-images > figure{ min-width: 0; }
.historie-images img{
border-radius: var(--radius); border: 3px solid rgba(198,162,92,.5);
aspect-ratio: 3/4; object-fit: cover; filter: sepia(.15) contrast(1.02);
}
.historie-images figure{ margin: 0; }
.historie-images figcaption{ font-size: .75rem; color: #c9d2ce; margin-top: 6px; }
.historie-timeline{ font-size: .95rem; color: #cfe0da; margin: var(--space-2) 0 var(--space-3); }
/* ---------- Kontakt ---------- */
.contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-4); }
.contact-grid > *{ min-width: 0; }
@media (max-width: 700px){ .contact-grid{ grid-template-columns: 1fr; } }
.contact-card{ background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); box-shadow: var(--shadow-card); }
.contact-card h3{ color: var(--color-heading-accent); font-family: var(--font-headline); font-size: 1.2rem; }
.contact-card a{ font-weight: 600; }
.contact-phone{
display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: var(--space-2);
font-size: .95rem; color: var(--color-text);
}
.contact-phone img{ width: 18px; height: 18px; object-fit: contain; flex: none; }
.contact-card .maps-link{ display: flex; justify-content: center; }
/* ---------- Footer ---------- */
.site-footer{ background: var(--color-primary-dark); color: #d9e3df; padding: var(--space-6) 0 var(--space-3); }
.footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.footer-grid > *{ min-width: 0; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-brand img{ height: 120px; width: auto; max-width: 100%; margin-bottom: var(--space-2); }
@media (max-width: 760px){ .footer-brand img{ height: 96px; } }
.footer-brand p{ color: #c9d2ce; font-size: .9rem; max-width: 320px; }
.site-footer h4{ color: #fff; font-family: var(--font-body); font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--space-2); }
.site-footer ul{ display: flex; flex-direction: column; gap: 10px; }
.site-footer a{ color: #d9e3df; }
.site-footer a:hover{ color: #fff; }
.footer-bottom{
border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--space-3);
display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2);
font-size: .85rem; color: #cfd9d5;
}
/* ---------- Historie-Seite (historie.html) ---------- */
.breadcrumb{ font-size: .85rem; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.breadcrumb a{ color: var(--color-text-muted); }
.page-hero{
padding: var(--space-6) 0 var(--space-4);
background: linear-gradient(180deg, var(--color-surface-tint), var(--color-bg));
}
.page-hero p.lead{ font-size: 1.15rem; color: var(--color-text-muted); max-width: 680px; }
.story-content{ max-width: 760px; margin: 0 auto; padding-top: var(--space-3); padding-bottom: var(--space-3); }
.story-content h2{ margin-top: var(--space-6); color: var(--color-heading-accent); }
.story-content h2:first-of-type{ margin-top: 0; }
.story-content p{ font-size: 1.05rem; }
.story-image{ margin: var(--space-4) 0; }
.story-image img{
border-radius: var(--radius); border: 3px solid rgba(198,162,92,.4);
width: 100%; height: auto; max-height: 70vh; object-fit: cover;
}
.story-image figcaption{ font-size: .85rem; color: var(--color-text-muted); margin-top: 8px; }
.story-cta{
background: var(--color-primary); color: var(--color-on-primary); border-radius: var(--radius);
padding: var(--space-5); text-align: center; margin: var(--space-6) 0 0;
}
.story-cta h2{ color: var(--color-on-primary); }
.story-cta .btn-outline{ border-color: var(--color-on-primary); color: var(--color-on-primary); }
.story-cta .btn-outline:hover{ background: var(--color-on-primary); color: var(--color-primary); }
/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.legal-content h2{ font-size: 1.35rem; margin-top: var(--space-5); }
.legal-content h2:first-of-type{ margin-top: 0; }
.legal-content h3{ margin-top: var(--space-3); }
.legal-content address{ font-style: normal; }
.legal-content > ul{ list-style: disc; padding-left: 1.2em; margin: var(--space-2) 0; display: flex; flex-direction: column; gap: 6px; }
.legal-note{
background: color-mix(in srgb, var(--color-warning) 12%, var(--color-white));
border: 1px solid var(--color-warning);
border-radius: var(--radius);
padding: var(--space-3);
margin-bottom: var(--space-5);
font-size: .95rem;
}
.legal-note strong{ color: var(--color-warning); }
.legal-note ul{ list-style: disc; padding-left: 1.2em; margin-top: var(--space-1); display: flex; flex-direction: column; gap: 4px; }
/* ---------- Footer: rechtliche Links ---------- */
.footer-legal{ display: flex; gap: var(--space-3); flex-wrap: wrap; }
/* ---------- Sanfter Übergang beim Theme-Wechsel ---------- */
body, .site-header, .field-section, .field-nav, .contact-card, .location-card,
.field-nav-card, .theme-toggle, .field-media.icon-block{
transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
/* ---------- Cookie-Hinweis ---------- */
.cookie-banner{
position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
background: var(--color-primary-dark); color: #f2efe6;
padding: var(--space-3);
box-shadow: 0 -8px 30px rgba(0,0,0,.25);
}
.cookie-banner[hidden]{ display: none; }
.cookie-banner-inner{
max-width: var(--max-width); margin: 0 auto;
display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
}
.cookie-banner-inner p{ margin: 0; font-size: .9rem; color: #d9e3df; max-width: 640px; flex: 1 1 320px; }
.cookie-banner-inner a{ color: #E8D7B9; } /* fest, siehe Hinweis bei .historie-section .kicker */
.cookie-banner-actions{ display: flex; gap: var(--space-2); flex: none; }
.cookie-banner .btn-outline{ border-color: rgba(255,255,255,.5); color: #fff; }
.cookie-banner .btn-outline:hover{ background: rgba(255,255,255,.12); color: #fff; }
@media (max-width: 560px){
.cookie-banner-actions{ width: 100%; }
.cookie-banner-actions .btn{ flex: 1; justify-content: center; }
}
/* ---------- Utility ---------- */
.text-center{ text-align: center; }
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior: auto; }
.hero-slide{ transition: none; }
.hero-slide::before{ animation: none; transform: scale(1) !important; }
body, .site-header, .field-section, .field-nav, .contact-card, .location-card,
.field-nav-card, .theme-toggle, .field-media.icon-block{ transition: none; }
}