/* ==========================================================================
Schottland auf Pfoten – Mockup
==========================================================================
DESIGN-THESE (Runde 2 – Warm & Familiär):
Hunde sind Familie. Vertrauen entsteht über Blicke, warme Flächen und
handmade-Details – nicht über Feature-Kacheln. Der neue Hero ist deshalb
ein zweispaltiges Split-Layout: links ein warmes Cream-Panel mit ruhigem
Text-Satz, rechts das freistehende Portrait des Hundes im Regenmantel –
Blick zum Text, ohne Overlay. Header bekommt einen Kontakt-Chip mit
Erreichbarkeit (persönlich, greifbar). Footer wird warm-erdig statt
dunkel-generisch: Standort-Chip „Sitz in den Highlands" und ein Zitat
der Betreiberfamilie. Pfoten-SVG als wiederkehrender Marker in Eyebrows,
Dividern und Footer. Leichte Rotationen bei Fotorahmen, hand-lettered-
artige Eyebrows in Fraunces-Italic – handmade statt corporate.
DESIGN-THESE ROUND 2 (Nav + Blöcke der Startseite):
Der Header wird jetzt zur wärmsten, sichtbarsten Marken-Fläche der Site:
ein Streifen englisches Moosgrün (#4a5d3a) trägt Logo, Pillen-Navigation
und Kontakt-Chip. Jede Nav-Position ist eine Pille — dezent bei Ruhe,
deutlich bei Hover, Cream-solid bei aktiver Seite. Der CTA „Reise
anfragen" bekommt Accent-Kupfer, damit er auf dem Grün leuchtet. Auf
dem Rest der Seite ersetzen wir generische SVG-Kreis-Kacheln durch
handgezeichnete Squircles in Cream/Moos/Kupfer und ein einheitliches,
hand-lettered-artiges Icon-Set (Kompass, Berg, Welle, Steinkreis,
Kompaß-Route, Herz). Blöcke werden fotogetrieben, mit warmen
Sektions-Übergängen, Postkarten-Rotationen, Zitat-Bändern und Pfoten-
Markern statt Rahmen und Gitter. Weniger Struktur, mehr Erzählung.
Moosgrün-Header trägt Cream-Nav-Text mit >7:1 Kontrast (WCAG AAA).
========================================================================== */
:root {
/* Type scale */
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
--text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
--text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
--text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
--text-hero: clamp(2.75rem, 0.75rem + 6vw, 6.5rem);
--text-4xl: var(--text-3xl);
/* Spacing 4-px system */
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
--space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
--space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
--space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;
/* Highland Warm — Cream & Moss (Light) */
--color-bg: #f6f1e8;
--color-surface: #fbf7ef;
--color-surface-2: #ffffff;
--color-surface-offset: #eee6d4;
--color-surface-offset-2:#e4dcc7;
--color-divider: #d9cfb8;
--color-border: #c5b998;
--color-text: #201a12;
--color-text-muted: #6a5f4c;
--color-text-faint: #a89c81;
--color-text-inverse: #fbf7ef;
/* Primary Accent — deep Moss/Highland Green */
--color-primary: #385c3a;
--color-primary-hover: #2a4a2c;
--color-primary-active: #1e3820;
--color-primary-highlight:#d3ded1;
--color-cream: #f6f1e8;
--color-surface-alt: var(--color-surface-offset);
/* Secondary accent — warm Highland Rust (dog-fur colour) */
--color-accent: #a34a1e;
--color-accent-hover: #83381a;
/* English moss — warm, muted forest green for the header/nav band.
Chosen from the reference palette (#4a5d3a) because it holds strong
contrast against cream (#fbf7ef, ratio ≈ 7.9:1 = AAA) and harmonises
with the copper accent without clashing. */
--color-moss: #4a5d3a;
--color-moss-deep: #3c4d2f;
--color-moss-highlight: #5c7048;
--color-cream-hi: #fbf7ef;
--color-cream-nav: #f0e9d6;
/* Semantic */
--color-warning: #964219;
--color-error: #9b2f36;
--color-success: #437a22;
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-full: 9999px;
--transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
--shadow-sm: 0 1px 2px rgba(30,20,10,.08);
--shadow-md: 0 6px 18px rgba(30,20,10,.10);
--shadow-lg: 0 20px 40px rgba(30,20,10,.16);
--content-narrow: 744px; /* 680 px Textbreite + 2 × 32 px Innenabstand (wie schottland-hochzeit.com) */
--content-default: 960px;
--content-wide: 1200px;
--font-display: "Fraunces", Georgia, "Times New Roman", serif;
--font-body: "Raleway", "Helvetica Neue", Arial, sans-serif;
}
/* ------------- Base ------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { color-scheme: light; }
html {
-webkit-text-size-adjust: none;
text-size-adjust: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
scroll-padding-top: 6rem;
/* Reserviert immer den Platz einer klassischen Scrollbar.
Verhindert, dass Content beim Auftauchen der Scrollbar horizontal
springt (Klick auf Anker → Seite scrollt → Scrollbar erscheint,
oder mobiles Menü öffnet sich und wollte body-overflow togglen). */
scrollbar-gutter: stable;
}
/* Wenn das mobile Menü offen ist: Scrollen sperren, aber KEIN overflow-Toggle
auf body — das würde die Scrollbar entfernen und Content horizontal shiften.
Wir sperren stattdessen am html-Element; das Gutter bleibt reserviert. */
html[data-nav-lock] { overflow: hidden; }
body {
min-height: 100dvh;
line-height: 1.6;
font-family: var(--font-body, sans-serif);
font-size: var(--text-base);
color: var(--color-text);
background-color: var(--color-bg);
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
ul[role="list"], ol[role="list"] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.15; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }
p, li, figcaption { text-wrap: pretty; max-width: 68ch; }
a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover, a:focus-visible { color: var(--color-primary-hover); }
::selection { background: color-mix(in oklab, var(--color-primary) 30%, transparent); color: var(--color-text); }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }
button { cursor: pointer; background: none; border: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
a, button, [role="button"], input, textarea, select {
transition: color var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}
/* Skip link */
.skip-link {
position: absolute; top: 0; left: 0; padding: var(--space-3) var(--space-4);
background: var(--color-primary); color: var(--color-text-inverse); font-weight: 600;
transform: translateY(-120%); z-index: 200; border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { transform: translateY(0); color: var(--color-text-inverse); }
/* ------------- Layout ------------- */
.container { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
/* Header-Container bekommt exakt dasselbe Innenpadding wie die darunter liegenden Sektionen,
damit Logo links und CTA rechts bündig mit dem Content-Container beginnen bzw. enden. */
.site-header .container.header-inner { padding-inline: clamp(1rem, 4vw, 2rem); }
.container-narrow { max-width: var(--content-default); }
section { padding-block: clamp(var(--space-16), 8vw, var(--space-24)); }
section > .container > header { margin-bottom: var(--space-10); max-width: 60ch; }
.eyebrow {
display: inline-flex; align-items: center; gap: var(--space-2);
font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--color-primary); font-weight: 700; margin-bottom: var(--space-3);
}
.eyebrow::before {
content: "";
width: 24px; height: 1px;
background: currentColor;
opacity: .8;
}
h2.section-title { font-size: var(--text-2xl); }
h3.card-title { font-size: var(--text-lg); font-weight: 600; }
.lead { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 62ch; }
/* Buttons */
.btn {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-3) var(--space-6);
min-height: 44px;
border-radius: var(--radius-full);
font-size: var(--text-sm); font-weight: 600; text-decoration: none;
border: 2px solid transparent;
}
.btn { color-scheme: light; }
.btn-primary { background: var(--color-primary); color: #fbf7ef !important; -webkit-text-fill-color: #fbf7ef; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--color-primary-hover); color: #fbf7ef !important; -webkit-text-fill-color: #fbf7ef; }
.btn-accent { background: var(--color-accent); color: #fff; }
.btn-accent:hover, .btn-accent:focus-visible { background: var(--color-accent-hover); color:#fff; }
.btn-outline { border-color: var(--color-primary); color: var(--color-primary); background: transparent; }
.btn-outline:hover, .btn-outline:focus-visible { background: var(--color-primary); color: #fbf7ef; }
.btn-ghost { color: var(--color-text); }
.btn-ghost:hover { background: var(--color-surface-offset); color: var(--color-text); }
/* ------------- Header / Nav (Round 2 — Moosgrün + Pillen) ------------- */
.site-header {
position: sticky; top: 0; z-index: 100;
background:
linear-gradient(180deg, var(--color-moss) 0%, var(--color-moss-deep) 100%);
border-bottom: 1px solid rgba(0,0,0,.15);
box-shadow:
0 1px 0 0 rgba(255,255,255,.06) inset,
0 10px 30px -22px rgba(0,0,0,.45);
isolation: isolate;
color: var(--color-cream-hi);
}
.site-header::after {
/* warme kupferne Akzent-Kante unten — verbindet den Nav-Streifen zur Cream-Seite */
content: "";
position: absolute; left: 0; right: 0; bottom: -6px; height: 6px;
background: linear-gradient(180deg,
color-mix(in oklab, var(--color-accent) 30%, transparent) 0%,
transparent 100%);
pointer-events: none;
}
/* Deko-Pfote im Header entfernt — sass optisch auf dem Kupfer-CTA und wirkte als Fleck. */
.site-header .header-inner::after { display: none; }
.header-inner { position: relative; }
.header-inner {
display: flex; align-items: center; justify-content: space-between;
/* Grosszuegiger vertikaler Rand: 18px oben/unten fuer ein 64px-Logo. */
padding-block: 18px; gap: var(--space-4);
}
@media (max-width: 720px) {
/* Gleicher vertikaler Header-Abstand oben/unten fuer Logo und Toggle. */
.header-inner { padding-block: 14px; }
}
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-cream-hi); text-decoration: none; }
.brand:hover { color: var(--color-cream-hi); }
/* PNG-Logo mit Alpha — direkt auf dem Moss-Header, kein Rechteck drum.
Ein leichter heller Schein (drop-shadow) liegt am Motiv selbst, hebt es
zart vom grünen BG ab, ohne kastenartig zu wirken. */
.brand {
background: transparent;
padding: 0;
border-radius: 0;
box-shadow: none;
transition: filter .3s ease;
}
/* Kein Translate/Zoom auf Hover: das Logo muss stabil sitzen. */
.brand-logo {
/* Header-Logo kompakter (kleiner + mehr Rand um den Header).
Feste Breite + Hoehe verhindern jeden Reflow beim Reload —
kein Warten auf naturalWidth, kein Font-abhaengiger Nachlauf. */
height: 64px; width: 121px; display: block;
aspect-ratio: 800 / 423;
object-fit: contain; object-position: left center;
transition: filter .3s ease;
/* Braunes Motiv → Cream, plus warmer Glow. Gleiche Behandlung wie im Footer. */
filter:
brightness(0) invert(0.94) sepia(0.35) saturate(2.2) hue-rotate(-8deg)
drop-shadow(0 0 8px rgba(255,244,214,.25))
drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.brand:hover .brand-logo {
filter:
brightness(0) invert(0.94) sepia(0.35) saturate(2.2) hue-rotate(-8deg)
drop-shadow(0 0 12px rgba(255,244,214,.4))
drop-shadow(0 3px 6px rgba(0,0,0,.28));
}
@media (max-width: 1024px) {
.brand-logo { height: 56px; width: 106px; }
}
@media (max-width: 720px) {
/* Mobil: gleiches Logo wie Desktop, kleinere Hoehe fuer Balance zum Toggle. */
.brand-logo { height: 44px; width: 83px; }
}
/* Footer-Logo: eigene Regeln stehen weiter unten unter .footer-brand — hier nur Basis */
.brand-logo--footer { display: block; width: auto; }
/* ==== Primary Nav — Pillen ==== */
/* Nav-Container fuellt auf Desktop den Platz zwischen Brand und Header-Ende,
damit .nav-cta mit margin-left:auto rechts am Container-Rand landet.
Mobile-Nav ist ein Off-Canvas-Panel und wird davon nicht angefasst. */
@media (min-width: 901px) {
.primary-nav { flex: 1; min-width: 0; }
.primary-nav > ul { width: 100%; }
}
.primary-nav ul {
/* Deutlich mehr Abstand zwischen den Nav-Pillen, damit sie ruhiger und weniger gedrängt wirken. */
display: flex; gap: 22px; list-style: none; align-items: center;
}
.primary-nav a {
font-family: var(--font-body);
font-weight: 600;
letter-spacing: 0.005em;
color: var(--color-cream-hi);
text-decoration: none;
display: inline-flex; align-items: center; gap: var(--space-2);
padding: 8px 18px;
min-height: 40px;
border-radius: var(--radius-full);
font-size: var(--text-sm);
/* Sichtbarer Default: dezente Cream-Pille (wie Fokus-State bisher).
Gibt jedem Menuepunkt eine klare Trefferzone auf dem gruenen Header. */
background: rgba(255,244,214,.06);
border: 1px solid rgba(255,244,214,.22);
position: relative;
white-space: nowrap;
transition:
background-color .18s ease,
border-color .18s ease,
color .18s ease,
box-shadow .18s ease,
transform .18s ease;
}
.primary-nav ul > li { flex-shrink: 0; }
/* Menue-Reiter zwischen Logo und CTA zentrieren:
- erster Reiter bekommt margin-left:auto (schiebt Gruppe vom Logo weg)
- Reiter direkt vor .nav-cta bekommt margin-right:auto (schiebt CTA an rechten Rand)
Ergebnis: gleicher Abstand vom Logo zur Reitergruppe und von der Reitergruppe zum CTA. */
.primary-nav > ul > li:first-child { margin-left: auto; }
.primary-nav > ul > li.nav-cta { margin-left: auto; }
/* Hover / Keyboard-Fokus: etwas kraeftigere Pille als Default. */
.primary-nav a:hover,
.primary-nav a:focus-visible {
color: #fff;
background: rgba(255,244,214,.14);
border-color: rgba(255,244,214,.45);
box-shadow: 0 2px 8px -4px rgba(0,0,0,.35);
}
/* Aktuelle Sektion: kraeftige, aber warme Cream-Pille —
klar erkennbar, ohne wie ein Solid-Button zu wirken. */
.primary-nav a[aria-current="page"] {
color: #fff;
background: rgba(255,244,214,.22);
border-color: rgba(255,244,214,.65);
box-shadow:
0 2px 10px -4px rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15);
}
.primary-nav a[aria-current="page"]:hover {
background: rgba(255,244,214,.28);
border-color: rgba(255,244,214,.8);
}
/* Kontakt-Button in der Nav — Kupfer-Button (btn-primary), zweizeilig mit Icon.
Ersetzt den alten Chip UND den separaten „Reise anfragen“-Button. */
.header-contact-btn {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: 8px 16px !important;
line-height: 1.15;
white-space: nowrap;
min-height: 44px;
text-decoration: none;
}
.header-contact-btn svg { color: #ffd898; flex: none; }
.header-contact-btn .chip-inner { display: flex; flex-direction: column; gap: 0; align-items: flex-start; text-align: left; }
.header-contact-btn .chip-label { font-weight: 700; letter-spacing: 0.02em; color: #fff; font-size: var(--text-xs); }
.header-contact-btn .chip-detail { color: rgba(255,255,255,.85); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.header-contact-btn::after { display: none !important; }
.primary-nav > ul > li.nav-cta > a::after { display: none; }
@media (max-width: 1200px) {
/* Sehr enger Desktop-Bereich: Detailzeile weglassen, Label bleibt. */
.header-contact-btn .chip-detail { display: none; }
}
/* Reise-anfragen CTA — Kupfer, leuchtet auf Moosgrün */
.primary-nav .btn-primary {
background: var(--color-accent);
color: #fff !important;
-webkit-text-fill-color: #fff;
border: 2px solid transparent;
padding: 8px 18px;
min-height: 40px;
border-radius: var(--radius-full);
font-weight: 700;
white-space: nowrap;
box-shadow: 0 4px 14px -4px rgba(163,74,30,.55);
}
.primary-nav .btn-primary:hover,
.primary-nav .btn-primary:focus-visible {
background: var(--color-accent-hover);
color: #fff !important;
box-shadow: 0 6px 18px -4px rgba(163,74,30,.65);
}
.primary-nav .btn-primary::after { display: none; }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.icon-btn {
width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
color: var(--color-cream-hi); border-radius: var(--radius-full);
}
.icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-toggle { display: none; }
/* Backdrop nur im Mobile-Modus überhaupt im DOM sichtbar.
JS setzt bd.hidden=false beim ersten Nav-Klick permanent —
auf Desktop würde das Flex-Layout dann 16px für das Element reservieren
und die Nav-Reiter horizontal verschieben. */
.nav-backdrop { display: none; }
/* ==== Mobile Nav ==== */
@media (max-width: 900px) {
/* Toggle rechtsbündig — nav-backdrop und header-actions haben keine Breite, ohne margin schiebt space-between den Toggle sonst mittig */
.nav-toggle { margin-left: auto; }
.primary-nav {
position: fixed; inset: 0 0 0 auto; width: min(360px, 92vw);
background: linear-gradient(180deg, var(--color-moss) 0%, var(--color-moss-deep) 100%);
border-left: 1px solid rgba(0,0,0,.2);
padding: calc(var(--space-16) + var(--space-4)) var(--space-6) var(--space-8);
transform: translateX(100%);
transition: transform 240ms ease;
box-shadow: var(--shadow-lg);
z-index: 110;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.primary-nav[data-open="true"] { transform: translateX(0); }
.primary-nav ul {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}
/* Desktop-Regel „nav-cta ans Ende schieben“ mobil neutralisieren */
.primary-nav > ul > li { width: 100%; margin: 0; }
.primary-nav > ul > li.nav-cta { margin-left: 0; margin-top: var(--space-4); }
/* Menü-Einträge: linksbündige Liste mit Trennlinien, keine Pillen */
.primary-nav > ul > li > a {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
padding: var(--space-4) var(--space-2);
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--color-cream-hi);
background: transparent;
border: 0;
border-bottom: 1px solid rgba(255,255,255,.14);
border-radius: 0;
box-shadow: none;
min-height: 56px;
}
.primary-nav > ul > li:first-child > a { border-top: 1px solid rgba(255,255,255,.14); }
.primary-nav > ul > li > a:hover,
.primary-nav > ul > li > a:focus-visible {
color: #fff;
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.14);
box-shadow: none;
}
.primary-nav a[aria-current="page"] {
color: #fff;
background: transparent;
border-color: rgba(255,255,255,.14);
box-shadow: none;
}
.primary-nav a[aria-current="page"]::before {
content: "";
display: inline-block;
width: 6px; height: 6px;
margin-right: var(--space-3);
border-radius: 50%;
background: var(--color-accent);
}
/* Kontakt-CTA bleibt Kupfer-Pille, volle Breite unter der Liste */
.primary-nav .header-contact-btn {
justify-content: center;
padding: var(--space-3) var(--space-4) !important;
width: 100%;
border-radius: var(--radius-full);
border: 0;
background: var(--color-accent);
color: #fff;
min-height: 52px;
}
.primary-nav .header-contact-btn:hover,
.primary-nav .header-contact-btn:focus-visible {
background: var(--color-accent-hover);
color: #fff;
border: 0;
}
.primary-nav .header-contact-btn .chip-inner { display: flex; }
.primary-nav .header-contact-btn .chip-detail { display: inline; }
.primary-nav .btn-primary { justify-content: center; }
/* Toggle als kupferne Pille — klar sichtbar, gleiche Sprache wie CTAs.
Kreis auf gleiche Hoehe wie Logo (44px), Icon groesser (28px) fuer weniger Innenluft.
z-index MUSS über .primary-nav (110) liegen, sonst verschwindet der Toggle unter dem offenen Menü. */
.nav-toggle {
position: relative;
z-index: 120;
display: inline-flex;
width: 44px; height: 44px;
background: var(--color-accent);
color: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.22);
}
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle .nav-toggle-icon--close { display: none; }
.nav-toggle:hover,
.nav-toggle:focus-visible {
background: color-mix(in oklab, var(--color-accent) 88%, black);
color: #fff;
}
.nav-toggle[aria-expanded="true"] {
background: var(--color-cream-hi);
color: var(--color-moss-deep);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon--open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon--close { display: block; }
.nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 105; opacity: 0; pointer-events: none; transition: opacity 240ms ease; }
.nav-backdrop[data-visible="true"] { opacity: 1; pointer-events: auto; }
}
/* ------------- Hero (Split-Layout: Text links auf Cream, Foto rechts) ------------- */
.hero {
position: relative;
background:
radial-gradient(1200px 500px at 8% 15%, color-mix(in oklab, var(--color-accent) 10%, transparent) 0%, transparent 60%),
radial-gradient(900px 400px at 92% 85%, color-mix(in oklab, var(--color-primary) 10%, transparent) 0%, transparent 65%),
linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
overflow: hidden;
isolation: isolate;
padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
}
.hero::before {
/* Pfoten-Wasserzeichen: eine grosse 480x480 Kachel mit 6 Pfoten in
verschiedenen Groessen (Scale 0.6-1.4), Rotationen (-35 bis +42 Grad)
und ohne Grid-Raster. Zweite gedrehte Kachel dargelegt, damit sich
die Wiederholung visuell weiter aufloest. */
content: "";
position: absolute; inset: 0;
background-image:
url("data:image/svg+xml;utf8,");
/* Zwei Layer der GLEICHEN Kachel mit unterschiedlicher Groesse und Offset,
damit sich die Wiederholung visuell aufhebt — die Muster ueberlagern sich
nirgendwo identisch, das Auge findet kein Raster mehr. */
background-size: 520px 520px, 380px 380px;
background-position: -60px -40px, 210px 150px;
background-repeat: repeat, repeat;
pointer-events: none;
z-index: 0;
opacity: .9;
}
.hero::before {
/* zweiter Layer nutzt dasselbe SVG — CSS erlaubt nur eine URL im
background-image, deshalb doppeln wir sie: */
background-image:
var(--paw-tile-url), var(--paw-tile-url);
}
.hero { --paw-tile-url: url("data:image/svg+xml;utf8,"); }
.hero > .container {
position: relative; z-index: 2;
}
.hero-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.hero-text {
padding-block: clamp(1rem, 3vw, 2.5rem);
max-width: 34rem;
}
.hero-badge {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
background: color-mix(in oklab, var(--color-accent) 14%, var(--color-surface-2));
border: 1px solid color-mix(in oklab, var(--color-accent) 30%, transparent);
color: var(--color-accent-hover);
font-family: var(--font-body);
font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
margin-bottom: var(--space-5);
}
.hero-badge::before {
content: "";
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-accent);
box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-accent) 25%, transparent);
}
.hero h1 {
font-size: clamp(2.5rem, 1.4rem + 4vw, 4.75rem);
color: var(--color-text);
margin-bottom: var(--space-5);
font-weight: 400;
line-height: 1.02;
letter-spacing: -0.02em;
}
.hero h1 em {
font-style: italic;
color: var(--color-primary);
font-weight: 400;
display: block;
font-size: 0.62em;
margin-top: var(--space-2);
line-height: 1.15;
letter-spacing: -0.01em;
}
/* Länder-Liste unter H1 — 4 Wörter mit CSS-Trennern.
Trenner via ::before nur auf 2.–4. Element, damit KEIN Trenner
je am Zeilenanfang steht. Jedes Länder-Wort ist white-space:nowrap,
das Ensemble wrappt sauber als Ganzes. */
.hero h1 .hero-countries {
display: block;
margin-top: var(--space-3);
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
color: var(--color-primary);
font-size: 0.62em;
line-height: 1.2;
letter-spacing: -0.01em;
}
.hero h1 .hero-country {
display: inline-block;
margin-right: 0.65em; /* + Wortabstand zwischen den Spans (fuer Screenreader) */
}
.hero h1 .hero-country:last-child { margin-right: 0; }
/* Kein Trenner-Zeichen: Länder-Ensemble mit generösem Wortabstand,
im Italic-Serif liest sich das wie eine Reisezeile im Journal.
Beliebiger Zeilenumbruch möglich, ohne dass ein Trenner-Punkt
je an Zeilenanfang oder -ende zu hängen kommt. */
.hero p.hero-lead {
color: var(--color-text-muted);
font-size: var(--text-lg);
max-width: 42ch;
margin-bottom: var(--space-8);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hero-signature {
display: flex; align-items: center; gap: var(--space-4);
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px dashed color-mix(in oklab, var(--color-primary) 30%, transparent);
font-family: var(--font-display);
font-style: italic;
color: var(--color-text-muted);
font-size: var(--text-sm);
line-height: 1.4;
}
.hero-signature svg { flex: none; color: var(--color-accent); transform: rotate(-10deg); }
.hero-signature strong { display: block; font-style: normal; font-family: var(--font-body); color: var(--color-text); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--text-xs); }
/* Foto-Panel rechts – freistehend, leichter Rahmen, sanfte Rotation */
.hero-media {
position: relative;
aspect-ratio: 4/5;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow:
0 30px 60px -20px rgba(30,20,10,.35),
0 2px 0 0 color-mix(in oklab, var(--color-primary) 10%, transparent);
transform: rotate(1.2deg);
border: 8px solid var(--color-surface-2);
outline: 1px solid color-mix(in oklab, var(--color-primary) 15%, transparent);
isolation: isolate;
}
.hero-media img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 44% 62%;
transition: transform 900ms cubic-bezier(.16,1,.3,1);
}
.hero:hover .hero-media img { transform: scale(1.03); }
/* Kleiner Postkarten-Sticker mit Standort */
.hero-sticker {
position: absolute;
bottom: -18px; left: -22px;
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-3) var(--space-4);
box-shadow: var(--shadow-md);
transform: rotate(-4deg);
display: flex; align-items: center; gap: var(--space-3);
font-size: var(--text-xs);
color: var(--color-text);
max-width: 240px;
z-index: 3;
}
.hero-sticker svg { color: var(--color-accent); flex: none; }
.hero-sticker strong { display: block; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--text-sm); color: var(--color-text); letter-spacing: -0.005em; }
.hero-sticker span { color: var(--color-text-muted); }
@media (max-width: 900px) {
.hero-layout { grid-template-columns: 1fr; gap: var(--space-8); }
.hero-text { order: 2; max-width: none; padding-block: 0; }
.hero-media { order: 1; aspect-ratio: 4/3; max-width: 560px; margin: 0 auto; transform: rotate(0); }
.hero { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); }
}
@media (max-width: 560px) {
.hero h1 { font-size: clamp(2rem, 8vw, 2.75rem); }
.hero-media { aspect-ratio: 4/3.4; border-width: 6px; }
.hero-sticker { left: 12px; bottom: 12px; max-width: 200px; padding: var(--space-2) var(--space-3); }
}
@media (max-width: 900px) {
/* Auf Mobile den Sticker auf das Foto — mit halb-transparentem Fallback */
.hero-sticker { left: 12px; bottom: 12px; background: color-mix(in oklab, var(--color-surface-2) 92%, transparent); backdrop-filter: blur(6px); }
}
/* ------------- Country cards (4 destinations + NC500-Featured) -------------
Immer 2 Kacheln nebeneinander, damit die Landschaften gross und wirkungsvoll
erlebbar sind. Aspect 3/2 quer (Landschaftsformat) statt 4/5 hoch.
Die NC500-Featured-Kachel belegt die volle Breite (span 2), davor ein
dezenter Trenner. */
.destinations-grid {
display: grid; gap: var(--space-6);
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 560px) {
/* Nur auf ganz schmalen Screens einspaltig, damit der Text lesbar bleibt. */
.destinations-grid { grid-template-columns: 1fr; }
}
/* Trenner: schmale Linie in Cream-Halbtransparent, mit Symbol als Anker.
Belegt beide Spalten und schafft optische Trennung zur Featured-Kachel. */
.destinations-grid .dest-divider {
grid-column: 1 / -1;
display: flex; align-items: center; gap: var(--space-4);
margin: var(--space-2) 0;
}
.destinations-grid .dest-divider::before,
.destinations-grid .dest-divider::after {
content: ""; flex: 1; height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--color-divider) 20%, var(--color-divider) 80%, transparent 100%);
}
.destinations-grid .dest-divider::before { background: linear-gradient(90deg, transparent 0%, var(--color-divider) 80%); }
.destinations-grid .dest-divider::after { background: linear-gradient(90deg, var(--color-divider) 20%, transparent 100%); }
/* Featured-Kachel: NC500 als breite, atmosphärische Kachel unter dem Trenner.
Format 21/9 (Panorama) auf Desktop; auf schmalen Screens 4/5 wie die anderen. */
.destinations-grid .dest-card-featured {
grid-column: 1 / -1;
aspect-ratio: 21 / 9;
}
@media (max-width: 900px) {
.destinations-grid .dest-card-featured { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
.destinations-grid .dest-card-featured { aspect-ratio: 4 / 5; }
}
.destinations-grid .dest-card-body--featured {
max-width: 640px;
/* Explizites Padding — gründlich, weil die Kachel viel breiter ist als die 4er-Grid-Zellen. */
padding: var(--space-6) var(--space-6) var(--space-6) var(--space-6);
}
.destinations-grid .dest-card-body--featured p { max-width: 56ch; }
@media (min-width: 900px) {
.destinations-grid .dest-card-body--featured {
padding: var(--space-8) var(--space-8) var(--space-8) var(--space-8);
max-width: 720px;
}
}
.dest-card {
position: relative; overflow: hidden; border-radius: var(--radius-lg);
background: var(--color-surface); border: 1px solid var(--color-divider);
aspect-ratio: 3 / 2;
display: block; text-decoration: none; color: #fff;
transition: transform var(--transition-interactive), box-shadow var(--transition-interactive);
}
@media (max-width: 560px) {
/* Einspaltig wird 3/2 zu breit-flach fuer kleine Screens — zurueck zu 4/5. */
.dest-card { aspect-ratio: 4 / 5; }
}
.dest-card:hover, .dest-card:focus-visible {
transform: translateY(-4px); box-shadow: var(--shadow-lg); color: #fff;
}
.dest-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 500ms ease; }
.dest-card:hover img { transform: scale(1.05); }
.dest-card::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(15,10,5,.9) 0%, rgba(15,10,5,.35) 55%, rgba(15,10,5,.05) 100%);
z-index: 1;
}
.dest-card-body {
position: absolute; inset: auto 0 0 0; padding: var(--space-5); z-index: 2;
display: flex; flex-direction: column; gap: var(--space-1);
}
.dest-card-body h3 { color: #fff; font-size: var(--text-xl); }
.dest-card-body p { color: rgba(255,255,255,.85); font-size: var(--text-sm); max-width: 40ch; }
.dest-card-tag {
align-self: flex-start; padding: 2px var(--space-2); background: rgba(255,255,255,.14);
border-radius: var(--radius-sm); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase;
border: 1px solid rgba(255,255,255,.28); margin-bottom: var(--space-3);
}
/* ------------- Feature: Welcome / About ------------- */
.welcome {
background: var(--color-surface);
}
.welcome-grid {
display: grid; gap: clamp(var(--space-8), 5vw, var(--space-16));
grid-template-columns: 1.15fr 1fr; align-items: center;
}
@media (max-width: 900px) { .welcome-grid { grid-template-columns: 1fr; } }
.welcome-text h2 { margin-bottom: var(--space-4); font-size: var(--text-2xl); }
.welcome-text p + p { margin-top: var(--space-4); }
/* Two-photo split (portrait + landscape) */
.welcome-media {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: var(--space-4);
position: relative;
}
.welcome-figure {
margin: 0;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.welcome-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.welcome-figure--portrait {
grid-column: 1 / 2; grid-row: 1 / 3;
aspect-ratio: 3 / 4;
transform: translateY(-14px) rotate(-1.2deg);
}
.welcome-figure--landscape {
grid-column: 2 / 3; grid-row: 2 / 3;
aspect-ratio: 4 / 3;
transform: translateY(28px) rotate(1.4deg);
}
@media (max-width: 900px) {
.welcome-media { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.welcome-figure--portrait { grid-column: 1 / 2; grid-row: 1; transform: none; aspect-ratio: 3/4; }
.welcome-figure--landscape { grid-column: 2 / 3; grid-row: 1; transform: translateY(24px); aspect-ratio: 3/4; }
}
/* USP row — clean, borderless, paw-bulleted */
.usp-list {
list-style: none; display: grid; gap: var(--space-5) var(--space-6);
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
margin-top: var(--space-8);
}
.usp-list li {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-3);
align-items: start;
padding: 0;
background: transparent;
border: 0;
border-top: 2px solid color-mix(in oklab, var(--color-primary) 22%, transparent);
padding-top: var(--space-4);
}
.usp-list .paw-bullet {
flex: none; color: var(--color-primary);
transform: rotate(-8deg);
margin-top: 2px;
}
.usp-list b { display: block; margin-bottom: 4px; font-family: var(--font-body); font-weight: 700; letter-spacing: -.005em; }
/* ------------- NC500 Feature (R4 v2) -------------
Full-bleed Grid: Foto links vom Viewport-Rand bis Mitte, Text rechts.
Text-Spalte respektiert Container-Max-Breite. Unter 900px gestapelt. */
.nc500-r4 {
position: relative;
background: var(--color-surface-offset);
padding-block: 0;
overflow: hidden;
}
.nc500-r4::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(900px 500px at 85% 30%, color-mix(in oklab, var(--color-moss) 10%, transparent) 0%, transparent 60%);
pointer-events: none;
}
.nc500-r4-grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
min-height: clamp(480px, 60vh, 640px);
}
.nc500-r4-media {
position: relative;
margin: 0;
overflow: hidden;
}
.nc500-r4-media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.nc500-r4-credit {
position: absolute; left: 0; right: 0; bottom: 0;
padding: var(--space-2) var(--space-4);
background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
color: #fff;
font-size: var(--text-xs);
text-align: right;
}
.nc500-r4-copy {
padding-block: clamp(var(--space-14), 8vw, var(--space-24));
padding-inline: clamp(var(--space-6), 5vw, var(--space-16));
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-4);
/* Volle Spaltenbreite nutzen; Text darin wird ueber max-inline-size begrenzt. */
}
.nc500-r4-copy > * {
max-inline-size: 56ch;
}
.nc500-r4-copy .nc500-r4-cta {
max-inline-size: none;
}
.nc500-r4-copy .eyebrow { display: inline-block; margin-bottom: var(--space-2); }
.nc500-r4-copy h2 {
font-family: var(--font-display);
font-size: clamp(var(--text-2xl), 3.2vw, var(--text-3xl));
line-height: 1.15;
margin: 0 0 var(--space-2);
}
.nc500-r4-copy > p {
color: var(--color-text-muted);
line-height: 1.6;
margin: 0;
}
.nc500-r4-copy .checks {
list-style: none; margin: var(--space-3) 0 0; padding: 0;
display: grid; gap: var(--space-2);
}
.nc500-r4-copy .checks li {
display: grid; grid-template-columns: 40px 1fr; align-items: start; gap: var(--space-3);
}
.nc500-r4-cta {
display: flex; gap: var(--space-3); flex-wrap: wrap;
margin-top: var(--space-4);
}
@media (max-width: 900px) {
.nc500-r4-grid { grid-template-columns: 1fr; min-height: 0; }
.nc500-r4-media { aspect-ratio: 16/10; }
.nc500-r4-copy {
padding: clamp(var(--space-10), 8vw, var(--space-16)) var(--space-6);
padding-right: var(--space-6);
max-width: none;
margin-inline: auto;
width: 100%;
}
}
/* Alt-Klassen aus vorheriger Runde — falls noch irgendwo referenziert, unschaedlich zuruecksetzen */
.nc500-grid, .nc500-media, .nc500-copy { all: unset; display: block; }
.nc500 > .container { display: block; }
/* ------------- Travel styles ------------- */
.styles-grid {
display: grid; gap: var(--space-5);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.style-card {
background: var(--color-surface); border: 1px solid var(--color-divider);
border-radius: var(--radius-lg); padding: var(--space-6);
display: flex; flex-direction: column; gap: var(--space-3);
position: relative;
transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), border-color var(--transition-interactive);
}
.style-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px -14px rgba(30,20,10,.24);
border-color: color-mix(in oklab, var(--color-moss) 35%, var(--color-divider));
}
.style-card .style-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px;
border-radius: 30% 70% 65% 35% / 40% 40% 60% 60%;
background: var(--color-cream-hi);
color: var(--color-moss);
border: 1.5px solid color-mix(in oklab, var(--color-moss) 22%, transparent);
box-shadow: 0 4px 12px -6px rgba(30,20,10,.14);
transform: rotate(-3deg);
margin-bottom: var(--space-3);
padding: 0;
transition: transform .3s ease;
}
.style-card .style-icon svg { width: 28px; height: 28px; }
.style-card:nth-child(3n+2) .style-icon {
background: color-mix(in oklab, var(--color-accent) 14%, var(--color-surface-2));
color: var(--color-accent);
border-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
transform: rotate(3deg);
}
.style-card:nth-child(3n+3) .style-icon {
background: color-mix(in oklab, var(--color-moss) 14%, var(--color-surface-2));
color: var(--color-moss-deep);
border-color: color-mix(in oklab, var(--color-moss) 30%, transparent);
transform: rotate(-2deg);
}
.style-card:hover .style-icon { transform: rotate(0) scale(1.06); }
.style-card h3 { font-size: var(--text-lg); font-weight: 600; }
.style-card p { font-size: var(--text-sm); color: var(--color-text-muted); }
/* ------------- Sample trips ------------- */
.trips {
background: var(--color-surface);
}
.trips-grid {
display: grid; gap: var(--space-6);
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.trip-card {
background: var(--color-surface-2); border-radius: var(--radius-lg);
overflow: hidden; border: 1px solid var(--color-divider);
display: flex; flex-direction: column;
box-shadow: var(--shadow-sm);
transition: transform var(--transition-interactive), box-shadow var(--transition-interactive);
}
.trip-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.trip-media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.trip-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.trip-card:hover .trip-media img { transform: scale(1.04); }
.trip-tag {
position: absolute; top: var(--space-3); left: var(--space-3);
padding: 2px var(--space-3); background: rgba(255,255,255,.9); color: var(--color-text);
border-radius: var(--radius-full); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
}
.trip-body { padding: var(--space-5) var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.trip-body h3 { font-size: var(--text-lg); font-weight: 600; }
.trip-body > p { flex: 1; }
.trip-body > .btn { margin-top: auto; align-self: flex-start; }
.trip-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.trip-meta span { display: inline-flex; gap: var(--space-1); align-items: center; }
.trip-cta { margin-top: auto; font-weight: 600; color: var(--color-primary); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.trip-cta:hover { color: var(--color-primary-hover); }
/* ------------- Journey / Info stripe -------------
Fixed dark green background in BOTH light and dark theme,
so text/icon contrast against the surface stays AA. */
.info-stripe {
--stripe-bg-1: #22412a;
--stripe-bg-2: #16311d;
--stripe-fg: #ffffff;
--stripe-fg-muted: rgba(255,255,255,.92);
--stripe-accent: #ffd898;
background: linear-gradient(135deg, var(--stripe-bg-1) 0%, var(--stripe-bg-2) 100%);
color: var(--stripe-fg);
}
.info-stripe .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
@media (max-width: 780px) { .info-stripe .container { grid-template-columns: 1fr; } }
.info-stripe h2 { color: var(--stripe-fg); font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.info-stripe p { color: var(--stripe-fg-muted); }
.info-stripe .info-list { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.info-stripe .info-list li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--stripe-fg); }
.info-stripe .info-list svg { color: var(--stripe-accent); flex: none; margin-top: 3px; }
.info-stripe .btn-outline { border-color: #fff; color: #fff; background: transparent; }
.info-stripe .btn-outline:hover,
.info-stripe .btn-outline:focus-visible { background: #fff; color: var(--stripe-bg-2); }
/* Pet passport quick facts */
.pet-info-card {
background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.28);
border-radius: var(--radius-lg); padding: var(--space-6);
color: var(--stripe-fg);
}
.pet-info-card h3 { color: var(--stripe-fg); }
.pet-info-card dl { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-3) var(--space-5); font-size: var(--text-sm); }
.pet-info-card dt { color: var(--stripe-accent); font-weight: 700; }
.pet-info-card dd { color: #ffffff; }
/* ------------- Sister brands ------------- */
.sister-brands { background: var(--color-surface); }
.sister-grid {
display: grid; gap: var(--space-4);
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.sister-card {
position: relative; display: block; overflow: hidden;
border-radius: var(--radius-lg); border: 1px solid var(--color-divider);
aspect-ratio: 16/8; text-decoration: none; color: inherit;
box-shadow: var(--shadow-sm);
transition: transform var(--transition-interactive), box-shadow var(--transition-interactive);
}
.sister-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sister-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sister-card::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(15,10,5,.75), rgba(15,10,5,0) 60%);
}
.sister-card-body {
position: absolute; inset: auto 0 0 0; padding: var(--space-3) var(--space-4); z-index: 2;
color: #fff; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
}
.sister-card-body .name { font-family: var(--font-display); font-size: var(--text-base); }
.sister-card-body .arrow { font-size: var(--text-lg); }
/* ------------- Testimonials / Trust ------------- */
.trust { background: var(--color-bg); }
.trust-grid {
display: grid; gap: var(--space-8);
grid-template-columns: 1.4fr 1fr;
align-items: center;
}
@media (max-width: 780px) { .trust-grid { grid-template-columns: 1fr; } }
.testimonial {
background: var(--color-surface); padding: var(--space-8); border-radius: var(--radius-lg);
border-left: 4px solid var(--color-accent); box-shadow: var(--shadow-sm);
}
.testimonial blockquote {
font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.4; margin-bottom: var(--space-4);
font-style: italic; color: var(--color-text);
}
.testimonial cite { font-style: normal; font-size: var(--text-sm); color: var(--color-text-muted); }
.badges { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.badges img { max-width: 200px; height: auto; }
.badges .rating { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.stars { color: #d59a1a; letter-spacing: 2px; }
/* ------------- Contact / CTA ------------- */
.contact { background: var(--color-surface-offset); }
.contact-grid {
display: grid; gap: var(--space-10); grid-template-columns: 1fr 1fr; align-items: stretch;
}
@media (max-width: 780px) { .contact-grid { grid-template-columns: 1fr; align-items: start; } }
/* Info-Spalte als Flex, damit die Kontakt-Liste sich nach unten dehnt
und die Info-Spalte die gleiche Hoehe wie das Formular hat. */
.contact-info { display: flex; flex-direction: column; gap: var(--space-6); }
.contact-info h2 { font-size: var(--text-2xl); }
/* Kontakt-Listen im Stil von schottland-hochzeit: Kupfer-Label, Serif-Wert,
Kupfer-Trennstrich unter dem Wert, kleiner Meta-Text darunter,
duenne Sektions-Trenner zwischen den Bloecken. */
.contact-lines {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
/* Kompakte Blöcke wie schottland-hochzeit.com — keine
Flex-Füllung, keine Space-Between-Verteilung. */
gap: var(--space-5);
}
.contact-line {
display: grid;
gap: var(--space-1);
padding-top: var(--space-5);
border-top: 1px solid color-mix(in oklab, var(--color-moss) 12%, transparent);
}
.contact-line-label {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-accent);
}
.contact-line-value {
font-family: var(--font-display, "Fraunces", serif);
font-size: clamp(var(--text-lg), 1.8vw, var(--text-xl));
font-weight: 500;
line-height: 1.25;
}
/* E-Mail ist laenger als die Telefonnummern: eine Nummer tiefer, damit sie
in der halben Grid-Spalte auf einer Zeile passt. */
.contact-line-value--email {
font-size: clamp(1rem, 1.3vw, 1.35rem);
}
.contact-line-value {
color: var(--color-moss-deep);
text-decoration: none;
padding-bottom: var(--space-3);
/* Kupfer-Trennlinie nur unter dem Wert, nicht ueber die volle Breite */
background-image: linear-gradient(to right,
color-mix(in oklab, var(--color-accent) 55%, transparent) 0%,
color-mix(in oklab, var(--color-accent) 55%, transparent) 100%);
background-repeat: no-repeat;
background-size: min(320px, 80%) 1px;
background-position: 0 100%;
transition: color .2s ease, background-size .2s ease;
/* E-Mails/Nummern nur bei Bedarf umbrechen, ohne haesslichen Bindestrich */
overflow-wrap: anywhere;
word-break: normal;
hyphens: none;
}
.contact-line-value:hover,
.contact-line-value:focus-visible {
color: var(--color-accent);
background-size: min(360px, 90%) 1.5px;
}
.contact-line-meta {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.contact-form {
background: var(--color-surface); padding: var(--space-8); border-radius: var(--radius-lg);
border: 1px solid var(--color-divider); box-shadow: var(--shadow-md);
}
.form-row { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.field .required { color: var(--color-accent); margin-left: 2px; }
.field input, .field select, .field textarea {
padding: var(--space-3) var(--space-4); border: 1.5px solid var(--color-border);
background: var(--color-surface-2); color: var(--color-text);
border-radius: var(--radius-md); font-size: var(--text-base);
min-height: 44px;
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
outline: 3px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-primary);
}
.field .hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.field-check { flex-direction: row; align-items: flex-start; gap: var(--space-3); }
.field-check input { min-height: 22px; width: 22px; height: 22px; margin-top: 2px; }
.field-check label { font-weight: 400; font-size: var(--text-sm); }
.contact-form > .field, .contact-form > .form-row, .contact-form > button { margin-top: var(--space-4); }
.contact-form h3 { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-2); }
.contact-form .form-intro { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.contact-form button[type="submit"] { width: 100%; justify-content: center; min-height: 48px; }
.contact-form .hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form { position: relative; }
.form-status { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; border: 1.5px solid currentColor; background: var(--color-surface-2); }
.form-status.is-ok { color: var(--color-success); }
.form-status.is-error { color: var(--color-error); }
.form-status:focus { outline: none; }
.form-status:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.contact-form button[aria-busy="true"] { opacity: .7; cursor: progress; }
/* ------------- Footer (warm-erdig, mit Zitat + Standort-Chip) ------------- */
.site-footer {
position: relative;
background:
linear-gradient(180deg,
#2a2318 0%,
#1e1a12 65%,
#14110c 100%);
color: #e8dfc9;
padding-block: 0 var(--space-8);
overflow: hidden;
}
.site-footer::before {
/* Pfoten-Watermark oben rechts — signifikanter Markenmarker */
content: "";
position: absolute; right: -60px; top: -20px;
width: 320px; height: 320px;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
transform: rotate(-20deg);
pointer-events: none;
z-index: 0;
}
.site-footer > * { position: relative; z-index: 1; }
/* Zitat-Band oben — warmer Cream-Streifen, wirkt wie eine Postkarten-Rückseite */
.footer-quote {
background:
linear-gradient(180deg,
color-mix(in oklab, var(--color-surface-offset) 92%, var(--color-accent) 8%) 0%,
var(--color-surface-offset-2) 100%);
color: var(--color-text);
padding-block: clamp(2.5rem, 5vw, 4rem);
border-bottom: 1px solid color-mix(in oklab, var(--color-primary) 15%, transparent);
position: relative;
}
.footer-quote::after {
/* untere Kante als warmer Farbverlauf, damit der Übergang in den dunklen Footer sitzt */
content: "";
position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 20%, transparent) 0%, transparent 100%);
pointer-events: none;
}
.footer-quote-inner {
max-width: 720px; margin: 0 auto; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.footer-quote .paw-mark {
color: var(--color-accent);
transform: rotate(-8deg);
margin-bottom: var(--space-2);
}
.footer-quote blockquote {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.15rem, 1rem + 0.75vw, 1.6rem);
line-height: 1.4;
color: var(--color-text);
max-width: 42rem;
text-wrap: balance;
}
.footer-quote cite {
font-style: normal;
font-family: var(--font-body);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-muted);
font-weight: 600;
}
/* Standort-Chip zwischen Zitat und Grid */
.footer-location {
display: flex; justify-content: center;
margin-top: calc(var(--space-8) * -1);
margin-bottom: var(--space-10);
padding-top: var(--space-10);
position: relative;
}
.footer-location-chip {
display: inline-flex; align-items: center; gap: var(--space-2);
background: var(--color-surface-2);
color: var(--color-text);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-full);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-md);
font-size: var(--text-sm);
font-weight: 500;
/* Chip gerade, nicht mehr schraeg (frueher rotate(-1.5deg)). */
transform: none;
max-width: min(100%, 420px);
text-align: center;
line-height: 1.35;
}
@media (max-width: 720px) {
.footer-location { margin-top: 0; padding-top: var(--space-6); padding-inline: var(--space-4); margin-bottom: var(--space-8); }
.footer-location-chip {
transform: none;
padding: var(--space-2) var(--space-4);
font-size: var(--text-xs);
max-width: 100%;
}
}
.footer-location-chip svg { color: var(--color-accent); flex: none; }
.footer-location-chip strong { color: var(--color-primary); font-weight: 700; }
.footer-grid {
display: grid; gap: var(--space-8);
grid-template-columns: 1.4fr 1fr 1fr 1fr;
/* Grosszuegige Luft nach oben, seit der Standort-Chip entfernt wurde. */
padding-top: var(--space-12);
/* Nav-Spalten sollen mit ihren H4-Ueberschriften auf Hoehe des Wortes
"SCHOTTLAND" im Logo sitzen, nicht am oberen Logo-Rand. Wir richten
die Zellen oben aus und schieben die Nav-Spalten per margin-top nach
unten. Der Wert entspricht der vertikalen Mitte von "SCHOTTLAND" im
864x555-Logo (~33% Hoehe) bei 96px Logo-Rendergroesse, minus der
halben H4-Zeilenhoehe. */
align-items: start;
}
.footer-grid .footer-col { margin-top: 24px; }
@media (max-width: 720px) {
/* Logo ist auf mobile 76px hoch -> anteilig weniger Offset. */
.footer-grid .footer-col { margin-top: 18px; }
}
@media (max-width: 780px) {
/* Ab Zwei-Spalten-Layout bricht das Logo in eigene Zeile — Offset wieder auf 0. */
.footer-grid .footer-col { margin-top: 0; }
}
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand p { color: #b8ac91; font-size: var(--text-sm); margin-top: var(--space-3); max-width: 40ch; }
.footer-brand .footer-contact-lines { color: #d6cdb8; margin-top: var(--space-4); font-size: var(--text-sm); }
.footer-brand .footer-contact-lines strong { color: #f0d8b4; font-weight: 700; }
/* Telefonnummer-Links im Footer: Cream statt Moss (das globale a{color:moss}
erzeugt grünen Text auf dunkelbraunem Grund, Kontrast < 4.5:1). */
.footer-brand .footer-contact-lines a {
color: #f6edda;
text-decoration: underline;
text-decoration-color: rgba(240, 216, 180, 0.4);
text-underline-offset: 2px;
transition: color .2s ease, text-decoration-color .2s ease;
}
.footer-brand .footer-contact-lines a:hover,
.footer-brand .footer-contact-lines a:focus-visible {
color: #fff;
text-decoration-color: #fff;
}
.footer-col .footer-col-title { line-height: 1.4; margin-top: 0; font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: #f0d8b4; margin-bottom: var(--space-3); font-weight: 700; }
.footer-col ul { list-style: none; display: grid; gap: var(--space-2); }
/* Padding + Pfoten-Bullet sitzen auf dem , nicht auf dem — so
fluchten mehrzeilige Link-Texte (z. B. "Einreise UK mit Hund" in schmaler
Ratgeber-Spalte auf iPad Portrait) bei Umbruch konsistent linksbündig. */
.footer-col li {
position: relative;
padding-left: var(--space-4);
}
.footer-col a {
color: #e8dfc9;
text-decoration: none;
font-size: var(--text-sm);
}
.footer-col li::before {
/* mini Pfoten-Bullet vor jedem Link */
content: "";
position: absolute; left: 0; top: 0.5lh;
width: 12px; height: 12px; transform: translateY(-50%) rotate(-10deg);
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
/* dauerhaft sichtbar (fluchtet die Einrückung), beim Hover/Fokus kräftiger */
opacity: .6; transition: opacity .2s ease, transform .2s ease;
}
.footer-col a:hover, .footer-col a:focus-visible { color: #fff; }
.footer-col li:has(a:hover)::before,
.footer-col li:has(a:focus-visible)::before { opacity: 1; transform: translateY(-50%) rotate(-10deg) scale(1.25); }
@media (prefers-reduced-motion: reduce) {
.footer-col li::before { transition: none; }
}
/* H4 als Link (Ratgeber-Spalte): identisches Erscheinungsbild wie ein H4, aber klickbar */
.footer-col .footer-col-title .footer-col-title-link {
color: inherit;
text-decoration: none;
padding-left: 0;
font-size: inherit;
letter-spacing: inherit;
text-transform: inherit;
transition: color .2s ease;
}
.footer-col .footer-col-title .footer-col-title-link::before { display: none; }
.footer-col .footer-col-title .footer-col-title-link:hover,
.footer-col .footer-col-title .footer-col-title-link:focus-visible { color: #fff; }
/* Prominenter Ratgeber-CTA im Footer */
.footer-ratgeber-cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-4);
padding: 0 !important;
color: #f0d8b4 !important;
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: 0.02em;
text-decoration: none;
border-bottom: 1px solid rgba(240, 216, 180, 0.4);
padding-bottom: 4px !important;
transition: color .2s ease, border-color .2s ease, gap .2s ease;
}
.footer-ratgeber-cta::before { display: none !important; }
.footer-ratgeber-cta svg { flex-shrink: 0; transition: transform .2s ease; }
.footer-ratgeber-cta:hover,
.footer-ratgeber-cta:focus-visible {
color: #fff !important;
border-color: #fff;
gap: var(--space-3);
}
.footer-ratgeber-cta:hover svg,
.footer-ratgeber-cta:focus-visible svg { transform: translateX(2px); }
.footer-bottom { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid rgba(240,216,180,.15); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-xs); color: #a89c81; }
/* "Aus unserer Familie"-Links: das globale a{color:moss} erzeugt gruenen Text
auf dunkelbraunem Footer-Grund (Kontrast <3:1). Auf Cream-Ton mit dezentem
Underline umstellen, Hover heller. */
.footer-sisters .sister-links a {
color: #e8dfc9;
text-decoration: underline;
text-decoration-color: rgba(232, 223, 201, 0.35);
text-underline-offset: 3px;
}
.footer-sisters .sister-links a:hover,
.footer-sisters .sister-links a:focus-visible {
color: #fff;
text-decoration-color: rgba(255, 255, 255, 0.7);
}
.footer-sisters .sister-links a > span { color: #a89c81; }
.footer-brand .brand-mark { color: #f0d8b4; }
.footer-brand .brand-name { color: #f6edda; }
.footer-brand .brand-name span { color: #a89c81; }
/* Footer always dark. PNG-Logo mit Alpha direkt auf dark BG.
Braunes Motiv wird per Filter zu Cream, dazu leichter Schein. */
.footer-brand .brand {
padding: 0;
background: transparent;
border-radius: 0;
box-shadow: none;
}
.footer-brand .brand:hover { transform: none; }
.footer-brand .brand-logo--footer {
height: 96px; width: auto; display: block;
filter:
brightness(0) invert(0.94) sepia(0.35) saturate(2.2) hue-rotate(-8deg)
drop-shadow(0 0 10px rgba(255,244,214,.15));
mix-blend-mode: normal;
}
@media (max-width: 720px) {
.footer-brand .brand-logo--footer { height: 76px; }
}
/* ------------- Utility ------------- */
.divider-icon {
display: flex; align-items: center; justify-content: center; gap: var(--space-3);
color: var(--color-text-faint); margin-block: var(--space-8);
}
.divider-icon::before, .divider-icon::after {
content: ""; height: 1px; background: var(--color-divider); flex: 1; max-width: 120px;
}
/* ==========================================================================
Sub-pages: hero, breadcrumb, highlights, itineraries, facts, faqs
========================================================================== */
/* Page hero — warmer, foto-dominanter Sub-Hero mit Cream-Panel */
.page-hero {
position: relative;
padding: 0;
/* Dunkle Ersatzfläche: weiße Schrift bleibt lesbar, auch wenn das Foto nicht lädt */
background: var(--color-text);
overflow: hidden;
min-height: clamp(320px, 46vw, 460px);
display: grid;
align-items: end;
isolation: isolate;
}
.page-hero-media {
position: absolute; inset: 0; z-index: 0;
opacity: 1;
}
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1) contrast(1.02); }
.page-hero-media::after {
/* Warmer Farbverlauf für Textlesbarkeit — dunkel genug für WCAG AA auf allen Bildern */
content: "";
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(20,15,8,.45) 0%, rgba(20,15,8,.55) 40%, rgba(20,15,8,.75) 80%, rgba(20,15,8,.85) 100%),
linear-gradient(90deg, rgba(20,15,8,.7) 0%, rgba(20,15,8,.35) 55%, rgba(20,15,8,0) 100%);
}
.page-hero > .container {
position: relative; z-index: 1;
padding-block: clamp(2.5rem, 6vw, 5rem);
color: #fff;
}
.page-hero .breadcrumb ol { color: rgba(255,255,255,.85); }
.page-hero .breadcrumb a { color: rgba(255,255,255,.9); }
.page-hero .breadcrumb [aria-current="page"] { color: #fff; }
.page-hero h1 { color: #fff; font-size: var(--text-4xl); margin: .5rem 0 1rem; max-width: 22ch; text-shadow: 0 2px 24px rgba(0,0,0,.7), 0 1px 4px rgba(0,0,0,.5); }
.page-hero-lead { color: #fff; font-size: var(--text-lg); max-width: 60ch; margin: 0; text-shadow: 0 2px 16px rgba(0,0,0,.8), 0 1px 4px rgba(0,0,0,.6); font-weight: 500; }
.page-hero .page-hero-badge {
background: var(--color-accent);
color: #fff;
box-shadow: 0 4px 20px -8px rgba(163,74,30,.6);
}
/* Optional: kleiner Eyebrow im Sub-Hero */
.page-hero .eyebrow {
color: #ffd898;
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: var(--text-sm);
letter-spacing: 0.06em;
text-transform: none;
}
.page-hero .eyebrow::before { background: #ffd898; opacity: .9; }
.page-hero-badge {
display: inline-block;
padding: .25rem .75rem;
border-radius: 999px;
background: var(--color-accent);
color: #fff;
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
}
/* Breadcrumb */
.breadcrumb ol {
display: flex; flex-wrap: wrap; gap: .5rem;
padding: 0; margin: 0 0 1rem;
list-style: none;
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.breadcrumb li + li::before { content: "›"; margin-right: .5rem; opacity: .5; }
.breadcrumb a { color: inherit; text-decoration: underline; text-decoration-color: transparent; }
.breadcrumb a:hover { text-decoration-color: currentColor; }
.breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: 500; }
/* Container widths */
.container.narrow { max-width: var(--content-narrow); }
.container.default { max-width: var(--content-default); }
/* Highlights grid (regions) — mit warmer Foto-Kachel oben, sanfter Rotation im Hover */
.highlights-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-6);
margin: var(--space-8) 0;
list-style: none; padding: 0;
}
.highlight {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 0;
overflow: hidden;
display: flex; flex-direction: column;
transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), border-color var(--transition-interactive);
}
.highlight:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: color-mix(in oklab, var(--color-primary) 30%, var(--color-border));
}
.highlight img {
width: 100%; height: 200px; object-fit: cover;
border-bottom: 1px solid var(--color-border);
margin: 0;
}
.highlight h3, .highlight p {
padding-inline: var(--space-5);
margin: 0;
}
.highlight h3 {
font-size: var(--text-xl);
padding-top: var(--space-5);
padding-bottom: var(--space-2);
}
.highlight p {
color: var(--color-text-muted);
padding-bottom: var(--space-5);
}
.highlight :last-child { padding-bottom: var(--space-5); }
/* Trip cards */
.trips-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-6);
list-style: none; padding: 0; margin: var(--space-8) 0;
}
.trip-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
overflow: hidden;
display: flex; flex-direction: column;
}
.trip-card img { width: 100%; height: 200px; object-fit: cover; }
.trip-card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.trip-card h3 { margin: 0; font-size: var(--text-xl); }
.trip-card p { margin: 0; color: var(--color-text-muted); }
.trip-card .card-more { margin-top: auto; font-weight: 600; color: var(--color-primary); }
/* Fact band */
.fact-band {
background: var(--color-surface-alt, var(--color-surface-offset));
padding: var(--space-8) 0;
margin: var(--space-8) 0;
}
.fact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-6);
list-style: none; padding: 0; margin: 0;
}
.fact-grid strong { display: block; font-size: var(--text-2xl); color: var(--color-primary); }
/* Itinerary (NC500) */
.itinerary { list-style: none; padding: 0; margin: var(--space-8) 0; display: grid; gap: var(--space-4); }
.itinerary li {
padding: var(--space-4) var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg, .75rem);
display: grid;
grid-template-columns: 6rem 1fr;
gap: var(--space-4);
align-items: start;
}
.itinerary strong { color: var(--color-primary); font-weight: 700; }
@media (max-width: 600px) {
.itinerary li { grid-template-columns: 1fr; }
}
/* CTA band */
.cta-band {
background: var(--color-primary);
color: var(--color-text-inverse);
padding: var(--space-10, 3rem) 0;
margin: var(--space-10, 3rem) 0 0;
text-align: center;
}
.cta-band > .container { text-align: center; }
.cta-band h2 { color: inherit; margin: 0 0 1rem; text-align: center; text-wrap: balance; }
.cta-band p { color: inherit; opacity: .9; margin: 0 0 1.5rem; text-align: center; max-width: 60ch; margin-left: auto; margin-right: auto; }
.cta-band .btn-accent { background: var(--color-cream, #f6f1e8); color: var(--color-text); }
/* Ratgeber grid (index) */
.ratgeber-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-6);
list-style: none; padding: 0; margin: var(--space-8) 0;
align-items: stretch;
}
.ratgeber-grid > li { display: flex; }
.ratgeber-tile {
display: flex; flex-direction: column; gap: .75rem;
padding: var(--space-6);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
color: inherit; text-decoration: none;
transition: transform .15s ease, box-shadow .15s ease;
width: 100%;
min-height: 100%;
}
.ratgeber-tile:hover, .ratgeber-tile:focus-visible {
transform: translateY(-2px);
box-shadow: 0 6px 20px -8px rgba(0,0,0,.15);
}
.ratgeber-tile-tag {
display: inline-block;
font-size: var(--text-xs, .75rem);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--color-accent);
}
.ratgeber-tile h3 { margin: 0; font-size: var(--text-lg); line-height: 1.25; }
.ratgeber-tile p { margin: 0; color: var(--color-text-muted); }
.ratgeber-tile .card-more {
margin-top: auto;
padding-top: var(--space-4);
font-weight: 600;
color: var(--color-primary);
}
/* Ratgeber article */
.ratgeber-body { margin: var(--space-8) auto var(--space-10); }
/* Table of Contents */
.ratgeber-toc {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-5) var(--space-6);
margin: 0 auto var(--space-10);
max-width: 68ch;
box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.ratgeber-toc-title {
font-family: var(--font-display);
font-size: var(--text-sm);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--color-accent);
margin: 0 0 var(--space-3);
font-weight: 600;
}
.ratgeber-toc ol {
list-style: none;
padding: 0; margin: 0;
display: grid;
gap: var(--space-2);
}
.ratgeber-toc a {
display: flex;
align-items: baseline;
gap: var(--space-3);
padding: .35rem .25rem;
color: var(--color-text);
text-decoration: none;
border-radius: .35rem;
transition: background .15s ease, color .15s ease;
}
.ratgeber-toc a:hover,
.ratgeber-toc a:focus-visible {
background: var(--color-surface-offset);
color: var(--color-primary);
}
.ratgeber-toc .toc-num {
font-family: var(--font-display);
font-variant-numeric: tabular-nums;
font-size: var(--text-sm);
color: var(--color-accent);
font-weight: 600;
flex: 0 0 auto;
min-width: 1.8em;
}
.ratgeber-toc .toc-label { flex: 1; line-height: 1.4; }
/* Section rhythm and separators */
.ratgeber-sections { max-width: 68ch; margin: 0 auto; }
.ratgeber-sec {
padding: var(--space-10) 0;
position: relative;
}
.ratgeber-sec + .ratgeber-sec {
border-top: 1px solid var(--color-border);
}
.ratgeber-sec:first-child { padding-top: 0; }
.ratgeber-sec-head {
display: flex;
align-items: flex-start;
gap: var(--space-4);
margin-bottom: var(--space-5);
}
.ratgeber-sec-num {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: var(--color-accent);
color: #fff;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.05rem;
font-variant-numeric: tabular-nums;
line-height: 1;
box-shadow: 0 2px 6px rgba(163, 74, 30, .2);
margin-top: .2rem;
}
.ratgeber-sec h2 {
font-size: var(--text-2xl);
margin: 0;
line-height: 1.2;
flex: 1;
}
.ratgeber-sec-body p {
max-width: 100%;
line-height: 1.75;
}
.ratgeber-sec-body p::first-line {
/* neutral, doesn’t alter meaning */
}
.ratgeber-sec-body a {
color: var(--color-primary);
text-underline-offset: 3px;
}
.fact-box {
background: var(--color-surface-offset);
border: 1px solid var(--color-border);
border-left: 4px solid var(--color-accent);
border-radius: var(--radius-xl);
padding: var(--space-6);
margin: var(--space-10) auto;
max-width: 68ch;
overflow-x: auto;
}
.fact-box-head {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.fact-box-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem; height: 2rem;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
font-weight: 700;
font-size: 1rem;
line-height: 1;
}
.fact-box h2 { margin: 0; font-size: var(--text-xl); }
.fact-box .fact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.fact-box .fact-list li {
position: relative;
padding-left: var(--space-6);
line-height: 1.55;
color: var(--color-text);
}
.fact-box .fact-list li::before {
content: "";
position: absolute;
left: 0; top: .55rem;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--color-accent);
}
.fact-box .fact-list li strong { font-weight: 700; color: var(--color-text); }
.fact-box .fact-list li a {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.fact-box table { width: 100%; border-collapse: collapse; }
.fact-box th, .fact-box td {
padding: .6rem .75rem;
border-bottom: 1px solid var(--color-border);
text-align: left; vertical-align: top;
}
.fact-box tbody tr:last-child th,
.fact-box tbody tr:last-child td { border-bottom: 0; }
.fact-box thead th { background: transparent; font-size: var(--text-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .08em; }
/* FAQ */
.faqs { margin: var(--space-10) auto; max-width: 68ch; }
.faqs-head, .link-list-head {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.faqs-icon, .link-list-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem; height: 2rem;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
font-weight: 700;
font-size: 1rem;
line-height: 1;
}
.faqs-head h2, .link-list-head h2 { margin: 0; font-size: var(--text-xl); }
.faqs details {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg, .75rem);
padding: .5rem 1.25rem;
margin: .5rem 0;
background: var(--color-surface);
transition: border-color .15s ease, box-shadow .15s ease;
}
.faqs details[open] {
border-color: var(--color-accent);
box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.faqs summary {
cursor: pointer;
font-weight: 600;
padding: .5rem 0;
list-style: none;
display: flex; justify-content: space-between; align-items: center;
gap: var(--space-4);
}
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--color-accent); flex: 0 0 auto; }
.faqs details[open] summary::after { content: "−"; }
.faqs .faq-body { padding: 0 0 .75rem; color: var(--color-text-muted); }
/* Weiterführende Links */
.link-list { margin: var(--space-10) auto; max-width: 68ch; }
.link-list ul { padding-left: 0; list-style: none; }
.link-list li {
margin: 0;
padding: .75rem 0 .75rem 1.25rem;
border-bottom: 1px solid var(--color-border);
position: relative;
}
.link-list li:last-child { border-bottom: 0; }
.link-list li::before {
content: "→";
color: var(--color-accent);
position: absolute;
left: 0;
top: .75rem;
font-weight: 700;
}
.link-list a { text-decoration: none; color: var(--color-primary); }
.link-list a strong { text-decoration: underline; text-underline-offset: 3px; }
.link-list a:hover strong { text-decoration-thickness: 2px; }
/* Ratgeber mobile tweaks */
@media (max-width: 640px) {
.ratgeber-sec { padding: var(--space-8) 0; }
.ratgeber-sec-head { gap: var(--space-3); }
.ratgeber-sec-num { width: 2.25rem; height: 2.25rem; font-size: .95rem; }
.ratgeber-toc { padding: var(--space-4) var(--space-5); }
.fact-box { padding: var(--space-5); }
}
/* Ratgeber-Übersicht: Gruppen-Header */
.ratgeber-index-body { margin: var(--space-8) auto var(--space-10); }
.ratgeber-group { margin: 0 0 var(--space-12); }
.ratgeber-group + .ratgeber-group {
padding-top: var(--space-10);
border-top: 1px solid var(--color-border);
}
.ratgeber-group-head {
display: flex;
align-items: flex-start;
gap: var(--space-4);
margin-bottom: var(--space-6);
max-width: var(--content-wide);
}
.ratgeber-group-num {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: var(--color-accent);
color: #fff;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.05rem;
font-variant-numeric: tabular-nums;
line-height: 1;
box-shadow: 0 2px 6px rgba(163, 74, 30, .2);
margin-top: .2rem;
}
.ratgeber-group-head h2 {
margin: 0 0 .35rem;
font-size: var(--text-2xl);
line-height: 1.2;
}
.ratgeber-group-lead {
margin: 0;
color: var(--color-text-muted);
font-size: var(--text-base);
}
@media (max-width: 640px) {
.ratgeber-group-num { width: 2.25rem; height: 2.25rem; font-size: .95rem; }
.ratgeber-group-head { gap: var(--space-3); }
}
/* Anker-Sprung: Offset für sticky/fixed header */
.ratgeber-sec[id] { scroll-margin-top: var(--space-16, 5rem); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* Source note */
.source-note {
font-size: var(--text-sm);
color: var(--color-text-muted);
padding: .75rem 1rem;
background: var(--color-surface-offset);
border-left: 3px solid var(--color-accent);
border-radius: .25rem;
margin: var(--space-6) 0;
}
/* Ratgeber CTA */
.ratgeber-cta {
text-align: center;
padding: var(--space-8);
background: var(--color-surface-offset);
border-radius: var(--radius-xl);
margin: var(--space-8) 0;
}
/* Bildnachweis — jede Bildquelle bildet einen eigenen Block mit deutlichem Abstand */
.credits {
padding-top: var(--space-12);
padding-bottom: var(--space-12);
border-bottom: 1px solid var(--color-border);
}
.credits:last-of-type { border-bottom: 0; }
.credits > h2 {
margin-top: 0;
margin-bottom: var(--space-3);
}
.credits > .lead {
margin-bottom: var(--space-6);
max-width: 65ch;
}
.credit-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-6);
margin: 0;
}
.credit-item {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-4);
display: flex;
flex-direction: column;
}
.credit-item figure {
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.credit-item img {
width: 100%;
aspect-ratio: 4 / 3;
height: auto;
object-fit: cover;
border-radius: var(--radius-lg, .75rem);
display: block;
}
.credit-item figcaption {
font-size: var(--text-sm);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.credit-caption {
margin: 0;
font-weight: 600;
color: var(--color-text);
line-height: 1.4;
}
.credit-item figcaption ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--space-1);
color: var(--color-text-muted, var(--color-text));
}
.credit-item figcaption ul strong { color: var(--color-text); }
.credit-item figcaption a { word-break: break-word; }
/* Notice / Alert */
.notice {
padding: var(--space-4);
background: color-mix(in oklab, var(--color-accent) 10%, var(--color-surface));
border-left: 4px solid var(--color-accent);
border-radius: var(--radius-lg, .75rem);
margin: var(--space-6) 0;
}
/* Themes / travel style grid on landing */
.themes-grid, .styles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-5);
list-style: none; padding: 0;
}
.theme-card, .style-card {
padding: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
display: flex; flex-direction: column; gap: .5rem;
}
.theme-card h3, .style-card h3 { margin: 0; font-size: var(--text-lg); }
/* Utility — override so alle eyebrows (auch aus Sub-Pages) einheitlich mit Strich davor erscheinen */
.eyebrow {
display: inline-flex; align-items: center; gap: var(--space-2);
font-family: var(--font-body);
font-size: var(--text-xs, .75rem);
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: var(--space-3);
}
.eyebrow::before {
content: ""; width: 24px; height: 1px; background: currentColor; opacity: .8;
}
/* Accent-Variante */
.eyebrow--accent { color: var(--color-accent); }
.lead { font-size: var(--text-lg); max-width: 60ch; }
/* Nav submenus removed in Round 3 — flache Ebene, Sekundärnav unter Hero */
/* ==========================================================================
Base heading sizes (missing before — Chrome UA fell through)
========================================================================== */
h1 { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem); margin: 0 0 var(--space-4); }
h2 { font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem); margin: 0 0 var(--space-3); }
h3 { font-size: clamp(1.15rem, .9rem + .8vw, 1.35rem); margin: 0 0 var(--space-3); }
h4 { font-size: 1.05rem; margin: 0 0 var(--space-2); }
p { margin: 0 0 var(--space-3); }
/* Sub-page hero: nicht so groß wie der Startseiten-Hero */
.page-hero h1 { font-size: clamp(2.25rem, 1.5rem + 2vw, 3.25rem); line-height: 1.1; }
.page-hero .page-hero-lead { font-size: var(--text-lg); max-width: 60ch; }
.ratgeber-sec h2 { font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem); }
/* Section titles etwas zähmen */
h2.section-title { font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem); }
/* ==========================================================================
USP-Strip direkt nach Hero
========================================================================== */
.usp-strip {
background: var(--color-surface-offset);
padding-block: clamp(3rem, 6vw, 5rem);
border-block: 1px solid var(--color-divider);
}
.usp-strip-grid {
display: grid; gap: var(--space-6);
grid-template-columns: repeat(4, 1fr);
}
.usp-item {
display: flex; flex-direction: column; gap: var(--space-3);
}
.usp-item h2 {
font-size: var(--text-lg);
margin: 0;
font-family: var(--font-body);
font-weight: 700;
color: var(--color-text);
letter-spacing: -0.01em;
}
.usp-item p {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin: 0;
line-height: 1.55;
}
/* Icon-Squircle — organische, hand-lettered-artige Form. Wechselt Cream/Moss/Kupfer.
Verwendet CSS-radius statt SVG-Maßke: an den Ecken 40%/60% smoother als rein rund. */
.icon-tile {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px;
border-radius: 30% 70% 65% 35% / 40% 40% 60% 60%;
background: var(--color-cream-hi);
color: var(--color-moss);
flex-shrink: 0;
border: 1.5px solid color-mix(in oklab, var(--color-moss) 22%, transparent);
box-shadow: 0 4px 12px -6px rgba(30,20,10,.14);
transform: rotate(-3deg);
transition: transform .3s ease, background .3s ease;
}
.icon-tile svg { width: 28px; height: 28px; }
.icon-tile--accent {
background: color-mix(in oklab, var(--color-accent) 14%, var(--color-surface-2));
color: var(--color-accent);
border-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
transform: rotate(3deg);
}
.icon-tile--moss {
background: color-mix(in oklab, var(--color-moss) 12%, var(--color-surface-2));
color: var(--color-moss-deep);
border-color: color-mix(in oklab, var(--color-moss) 32%, transparent);
}
.usp-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 52px; height: 52px;
border-radius: 30% 70% 65% 35% / 40% 40% 60% 60%;
background: var(--color-cream-hi);
color: var(--color-moss);
border: 1.5px solid color-mix(in oklab, var(--color-moss) 22%, transparent);
box-shadow: 0 4px 12px -6px rgba(30,20,10,.14);
transform: rotate(-3deg);
flex-shrink: 0;
transition: transform .3s ease;
}
.usp-item:nth-child(2n) .usp-icon {
background: color-mix(in oklab, var(--color-accent) 14%, var(--color-surface-2));
color: var(--color-accent);
border-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
transform: rotate(3deg);
}
.usp-item:hover .usp-icon { transform: rotate(0deg) scale(1.05); }
/* Hand-drawn Check-mark in NC500-Listen */
.check-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
border-radius: 30% 70% 65% 35% / 40% 40% 60% 60%;
background: color-mix(in oklab, var(--color-moss) 12%, var(--color-surface-2));
color: var(--color-moss-deep);
border: 1.2px solid color-mix(in oklab, var(--color-moss) 30%, transparent);
flex-shrink: 0;
transform: rotate(-2deg);
}
.check-mark svg { width: 18px; height: 18px; }
/* Hero-Signatur Icon */
.hero-sig-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
border-radius: 30% 70% 65% 35% / 40% 40% 60% 60%;
background: color-mix(in oklab, var(--color-accent) 14%, var(--color-surface));
color: var(--color-accent);
border: 1.5px solid color-mix(in oklab, var(--color-accent) 30%, transparent);
transform: rotate(-4deg);
flex-shrink: 0;
}
.hero-sig-icon svg { width: 26px; height: 26px; }
/* Hero-Sticker Icon (Map-Pin) */
.hero-sticker-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
border-radius: 30% 70% 65% 35% / 40% 40% 60% 60%;
background: color-mix(in oklab, var(--color-accent) 18%, var(--color-cream-hi));
color: var(--color-accent);
border: 1.2px solid color-mix(in oklab, var(--color-accent) 30%, transparent);
flex-shrink: 0;
}
.hero-sticker-icon svg { width: 20px; height: 20px; }
/* Btn-Icon (Pfeil im CTA) */
.btn-icon { display: inline-flex; align-items: center; margin-left: 0.3em; }
.btn-icon svg { width: 18px; height: 18px; }
/* Trip-Meta Icons */
.trip-meta svg { width: 16px; height: 16px; opacity: 0.85; }
@media (max-width: 900px) {
.usp-strip-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (max-width: 560px) {
.usp-strip-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}
/* Themes-Grid: 2 statt 3 Karten */
.themes-grid.themes-grid-2 {
grid-template-columns: repeat(2, 1fr);
max-width: 900px; margin-inline: auto;
}
@media (max-width: 780px) {
.themes-grid.themes-grid-2 { grid-template-columns: 1fr; }
}
/* ==========================================================================
ROUND 3 — Sekundär-Nav "Springe zu" (unter Hero)
========================================================================== */
.jump-nav {
background: var(--color-cream-hi);
border-block: 1px solid color-mix(in oklab, var(--color-moss) 18%, transparent);
padding-block: var(--space-3);
}
.jump-nav-inner {
display: flex; align-items: center; gap: var(--space-4);
flex-wrap: wrap;
}
.jump-nav-label {
font-family: var(--font-body);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-moss-deep);
font-weight: 700;
padding-right: var(--space-3);
border-right: 1px solid color-mix(in oklab, var(--color-moss) 22%, transparent);
}
.jump-nav ul {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-2);
flex: 1;
}
.jump-nav a {
display: inline-flex; align-items: center;
padding: 6px 14px;
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-family: var(--font-body);
font-weight: 600;
color: var(--color-moss-deep);
background: color-mix(in oklab, var(--color-moss) 6%, transparent);
border: 1px solid color-mix(in oklab, var(--color-moss) 18%, transparent);
text-decoration: none;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.jump-nav a:hover, .jump-nav a:focus-visible {
background: color-mix(in oklab, var(--color-moss) 16%, transparent);
border-color: color-mix(in oklab, var(--color-moss) 40%, transparent);
transform: translateY(-1px);
}
.jump-nav a:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* Einträge mit .mobile-only sind nur bis 640px sichtbar. */
.jump-nav li.mobile-only { display: none; }
@media (max-width: 640px) {
.jump-nav-inner { gap: var(--space-2); }
.jump-nav-label { display: none; }
.jump-nav ul { gap: 6px; }
.jump-nav a { padding: 5px 10px; font-size: 12px; }
.jump-nav li.mobile-only { display: list-item; }
/* Auf Mobile die NC500-Pille verbergen — die Jump-Nav soll einzeilig
bleiben; NC500 ist über die Reisearten/Reiseziel-Kacheln erreichbar. */
.jump-nav li.jump-nav-nc500 { display: none; }
}
/* ==========================================================================
ROUND 3 — Paw-Icon-System (Container = Hundepfote)
========================================================================== */
.paw-ic {
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: transform .28s ease;
/* Größen-Raster */
--paw-size: 72px;
width: var(--paw-size);
height: calc(var(--paw-size) * 1.15); /* Ballen unten, Zehen oben → höher als breit */
/* Default: Moss-Ballen mit Cream-Icon */
--paw-fill: #4a5d3a;
--paw-ink: #fbf7ef;
color: var(--paw-fill);
filter: drop-shadow(0 6px 12px rgba(30, 20, 10, 0.14));
}
.paw-ic svg.paw-icon-svg {
width: 100%; height: 100%; display: block;
overflow: visible;
}
/* Sanfte Handschriften-Rotation der ganzen Pfote — pro Instanz variieren wir dezent */
.paw-ic { transform: rotate(-2deg); }
.paw-ic:nth-of-type(2n) { transform: rotate(3deg); }
.paw-ic:nth-of-type(3n) { transform: rotate(-4deg); }
.paw-ic:hover { transform: rotate(0deg) scale(1.06); }
/* Varianten */
.paw-ic--moss {
--paw-fill: var(--color-moss);
--paw-ink: var(--color-cream-hi);
}
.paw-ic--copper {
--paw-fill: var(--color-accent);
--paw-ink: var(--color-cream-hi);
}
.paw-ic--cream {
--paw-fill: var(--color-cream-hi);
--paw-ink: var(--color-moss-deep);
filter: drop-shadow(0 6px 12px rgba(30,20,10,0.10));
}
/* Größen */
.paw-ic--sm { --paw-size: 56px; }
.paw-ic--md { --paw-size: 76px; }
.paw-ic--lg { --paw-size: 92px; }
.paw-ic--xl { --paw-size: 108px; }
/* ---- Kontext-Overrides für alte Squircle-Wrapper deaktivieren ---- */
/* Wenn die alte .usp-icon-Klasse noch existiert, brauchen wir sie nicht mehr — aber:
die neuen paw-ic sitzen direkt in .usp-item ohne Wrapper. Kein Konflikt. */
.usp-item .paw-ic { align-self: flex-start; margin-bottom: var(--space-1); }
/* Style-cards: das paw-ic ersetzt style-icon */
.style-card .paw-ic { align-self: flex-start; margin-bottom: var(--space-2); }
.style-card:hover .paw-ic { transform: rotate(0) scale(1.05); }
/* ==========================================================================
ROUND 3 — NC500 Checks in Paw-Form
========================================================================== */
.checks-paw {
list-style: none; margin: 0; padding: 0;
display: grid; gap: var(--space-3);
margin-top: var(--space-5);
}
.checks-paw li {
display: grid;
grid-template-columns: 60px 1fr;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) 0;
border-top: 1px solid color-mix(in oklab, var(--color-moss) 15%, transparent);
}
.checks-paw li:first-child { border-top: 0; }
.checks-paw .paw-ic { --paw-size: 52px; }
.checks-paw span { font-size: var(--text-base); color: var(--color-text); }
/* Hero-Signature + Sticker mit paw-ic */
.hero-signature .paw-ic { --paw-size: 48px; margin-right: var(--space-2); }
.hero-sticker .paw-ic { --paw-size: 44px; }
/* ==========================================================================
RATGEBER-BLOCK — Editorial-Wissensfenster (Variante A)
Cream-Fläche, asymmetrisches Raster, Kupfer-Marker + Linie, ruhige Typo.
========================================================================== */
.knowledge-window {
background: var(--color-surface);
padding-block: clamp(4rem, 7vw, 6rem);
}
.knowledge-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(1.5rem, 4vw, var(--space-12));
align-items: start;
max-width: 900px;
margin-inline: auto;
}
/* Linke Spalte: Kupfer-Kreis + vertikale Linie + Pfoten-Signatur unten */
.knowledge-marker {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding-top: var(--space-2);
}
.knowledge-glyph {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-accent);
color: var(--color-cream, #fbf7ef);
flex-shrink: 0;
}
.knowledge-glyph svg {
width: 30px;
height: 30px;
stroke: var(--color-cream, #fbf7ef);
stroke-width: 2;
}
.knowledge-glyph svg [fill="currentColor"] {
fill: var(--color-cream, #fbf7ef);
}
.knowledge-line {
width: 1px;
min-height: 80px;
flex: 1 1 auto;
background: linear-gradient(to bottom,
var(--color-accent) 0%,
color-mix(in oklab, var(--color-accent) 30%, transparent) 100%);
align-self: stretch;
}
.knowledge-paw {
margin-top: var(--space-1);
opacity: 0.85;
}
/* Rechte Spalte: Text */
.knowledge-body {
max-width: 60ch;
}
.knowledge-eyebrow {
color: var(--color-accent);
display: block;
margin-bottom: var(--space-4);
}
.knowledge-headline {
font-family: var(--font-display);
font-size: clamp(2rem, 4.2vw, 3rem);
line-height: 1.1;
color: var(--color-ink);
margin: 0 0 var(--space-5) 0;
font-weight: 400;
letter-spacing: -0.01em;
}
.knowledge-text {
font-size: 1.0625rem;
line-height: 1.65;
color: var(--color-ink);
margin: 0 0 var(--space-6) 0;
}
.knowledge-cta {
margin-bottom: var(--space-4);
}
.knowledge-note {
font-size: 0.875rem;
color: color-mix(in oklab, var(--color-ink) 65%, transparent);
margin: 0;
letter-spacing: 0.01em;
}
/* Tablet & Mobile: Marker über dem Text, horizontal ausgerichtet */
@media (max-width: 720px) {
.knowledge-grid {
grid-template-columns: 1fr;
gap: var(--space-5);
}
.knowledge-marker {
flex-direction: row;
align-items: center;
gap: var(--space-3);
padding-top: 0;
}
.knowledge-line {
width: auto;
height: 1px;
min-height: 0;
flex: 1 1 auto;
background: linear-gradient(to right,
var(--color-accent) 0%,
color-mix(in oklab, var(--color-accent) 20%, transparent) 100%);
align-self: center;
}
.knowledge-paw { margin-top: 0; }
}
/* ==========================================================================
ROUND 3 — Welcome-Block (komplett neu: Postkarten-Timeline)
========================================================================== */
.welcome-r3 {
position: relative;
background:
radial-gradient(1000px 500px at 15% 5%, color-mix(in oklab, var(--color-accent) 8%, transparent) 0%, transparent 60%),
radial-gradient(900px 500px at 90% 95%, color-mix(in oklab, var(--color-moss) 10%, transparent) 0%, transparent 65%),
var(--color-surface);
padding-block: clamp(4rem, 8vw, 7rem);
overflow: hidden;
isolation: isolate;
}
/* dezenter Papier-Punkt-Grund */
.welcome-r3::before {
content: "";
position: absolute; inset: 0;
background-image: radial-gradient(color-mix(in oklab, var(--color-moss) 22%, transparent) 1px, transparent 1px);
background-size: 24px 24px;
opacity: 0.08;
pointer-events: none;
z-index: 0;
}
.welcome-r3-inner { position: relative; z-index: 1; }
.welcome-r3-header {
text-align: center;
max-width: 780px;
margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.welcome-r3-header .eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: var(--text-xs);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-moss-deep);
font-weight: 700;
padding: 4px 14px;
border-radius: var(--radius-full);
background: color-mix(in oklab, var(--color-moss) 8%, var(--color-cream-hi));
border: 1px solid color-mix(in oklab, var(--color-moss) 20%, transparent);
margin-bottom: var(--space-5);
}
.welcome-r3-quote {
font-family: var(--font-display, "Fraunces", serif);
font-style: italic;
font-weight: 500;
font-size: clamp(2rem, 1rem + 4vw, 3.75rem);
line-height: 1.1;
color: var(--color-moss-deep);
margin: 0 0 var(--space-5);
letter-spacing: -0.01em;
}
.welcome-r3-quote em {
font-style: italic;
color: var(--color-accent);
position: relative;
padding: 0 0.05em;
}
.welcome-r3-quote em::after {
content: "";
position: absolute;
left: 4%;
right: 4%;
bottom: 4%;
height: 0.24em;
background: color-mix(in oklab, var(--color-accent) 24%, transparent);
border-radius: 40% 60% 45% 55% / 50% 40% 60% 50%;
z-index: -1;
}
.welcome-r3-subtitle {
font-size: var(--text-lg);
color: var(--color-text-muted);
max-width: 60ch;
margin: 0 auto;
line-height: 1.55;
}
/* Body Grid: photos left, story right */
.welcome-r3-body {
display: grid;
grid-template-columns: 0.95fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
}
@media (max-width: 900px) {
.welcome-r3-body { grid-template-columns: 1fr; }
}
/* --- Postkarten-Photos --- */
.welcome-r3-photos {
position: relative;
min-height: 520px;
}
/* iPad-Portrait / Tablet: 1-col aktiv, Polaroids brauchen mehr Platz
damit sie nicht in die Timeline drunter ragen */
@media (max-width: 900px) {
.welcome-r3-photos { min-height: clamp(520px, 80vw, 720px); }
}
@media (max-width: 640px) {
.welcome-r3-photos { min-height: clamp(420px, 90vw, 560px); }
}
.wr3-photo {
position: absolute;
margin: 0;
padding: 12px 12px 44px;
background: #fdfaf3;
border: 1px solid color-mix(in oklab, var(--color-moss) 12%, transparent);
box-shadow:
0 18px 40px -12px rgba(30, 20, 10, 0.22),
0 4px 10px -4px rgba(30, 20, 10, 0.12);
border-radius: 4px;
}
.wr3-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 2px;
}
.wr3-photo--big {
top: 0;
left: 4%;
width: 62%;
aspect-ratio: 3/4;
transform: rotate(-3deg);
z-index: 2;
}
.wr3-photo--big img { aspect-ratio: 3/4; }
.wr3-photo--small {
bottom: 0;
right: 0;
width: 55%;
aspect-ratio: 4/3;
transform: rotate(4deg);
padding-bottom: 12px;
z-index: 1;
}
.wr3-photo--small img { aspect-ratio: 4/3; }
.wr3-caption {
position: absolute;
bottom: 8px; left: 12px; right: 12px;
font-family: var(--font-display, "Fraunces", serif);
font-style: italic;
font-size: 13px;
color: var(--color-moss-deep);
text-align: center;
line-height: 1.25;
}
/* Klebeband */
.wr3-tape {
position: absolute;
width: 68px;
height: 22px;
background: color-mix(in oklab, var(--color-accent) 30%, #fff8e1);
opacity: 0.72;
pointer-events: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
.wr3-tape--tl { top: -8px; left: 20%; transform: rotate(-8deg); }
.wr3-tape--br { bottom: -8px; right: 15%; transform: rotate(-6deg); }
/* Stempel */
.wr3-stamp {
position: absolute;
top: 8%;
right: 4%;
width: 108px;
height: 108px;
border-radius: 50%;
border: 2px dashed color-mix(in oklab, var(--color-accent) 70%, transparent);
color: var(--color-accent);
display: flex; align-items: center; justify-content: center;
transform: rotate(-14deg);
opacity: 0.85;
z-index: 3;
background: rgba(253, 250, 243, 0.6);
backdrop-filter: blur(2px);
}
.wr3-stamp-inner {
font-family: var(--font-body);
font-weight: 800;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
text-align: center;
line-height: 1.25;
padding: 0 8px;
}
@media (max-width: 640px) {
.wr3-stamp { width: 84px; height: 84px; }
.wr3-stamp-inner { font-size: 9px; }
}
/* --- Story-Column: Timeline --- */
.welcome-r3-story {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.wr3-timeline {
list-style: none;
margin: 0; padding: 0;
position: relative;
display: grid;
gap: var(--space-6);
}
.wr3-timeline::before {
content: "";
position: absolute;
left: 27px;
top: 10px;
bottom: 20px;
width: 2px;
background: repeating-linear-gradient(
to bottom,
color-mix(in oklab, var(--color-moss) 30%, transparent) 0 4px,
transparent 4px 10px
);
z-index: 0;
}
.wr3-step {
display: grid;
grid-template-columns: 60px 1fr;
gap: var(--space-4);
align-items: start;
position: relative;
z-index: 1;
}
.wr3-step-marker {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-surface);
border-radius: 50%;
padding: 2px;
}
.wr3-step-marker .paw-ic {
--paw-size: 54px;
}
.wr3-step-body {
padding-top: 6px;
}
.wr3-step-year {
display: inline-block;
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
color: var(--color-accent);
margin-bottom: 4px;
}
.wr3-step h3 {
font-family: var(--font-display, "Fraunces", serif);
font-size: clamp(1.05rem, 0.85rem + 0.7vw, 1.25rem);
line-height: 1.35;
font-weight: 500;
color: var(--color-text);
margin: 0;
}
.wr3-signature {
display: flex;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
margin: 0;
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-lg);
background: color-mix(in oklab, var(--color-moss) 6%, var(--color-cream-hi));
border-left: 3px solid var(--color-accent);
}
.wr3-sig-line {
font-family: var(--font-display, "Fraunces", serif);
font-style: italic;
font-size: var(--text-base);
color: var(--color-moss-deep);
flex: 1;
min-width: 200px;
}
.wr3-inline-link,
.cta-outline-pill {
font-family: var(--font-body);
font-weight: 700;
color: var(--color-accent);
text-decoration: none;
font-size: var(--text-sm);
padding: 10px 20px;
border-radius: var(--radius-full);
border: 1.5px solid color-mix(in oklab, var(--color-accent) 40%, transparent);
transition: background .2s ease, color .2s ease, border-color .2s ease;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.wr3-inline-link:hover, .wr3-inline-link:focus-visible,
.cta-outline-pill:hover, .cta-outline-pill:focus-visible {
background: var(--color-accent);
color: #fff;
border-color: var(--color-accent);
}
/* Der Pill in der Welcome-Signatur bleibt kompakter (kleinere Padding) */
.wr3-inline-link { padding: 6px 14px; }
/* Wrapper fuer freistehende Outline-CTAs unter Sektionen */
.section-cta {
display: flex;
justify-content: center;
margin-top: var(--space-6);
}
/* USP in Welcome-Block als Karten mit Paws —
über volle Container-Breite unter Foto+Timeline, 4 Spalten auf Desktop */
.wr3-usp {
list-style: none;
margin: var(--space-10) 0 0; padding: 0;
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
.wr3-usp { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
.wr3-usp { grid-template-columns: 1fr; }
}
.wr3-usp li {
display: grid;
grid-template-columns: 56px 1fr;
gap: var(--space-3);
align-items: start;
padding: var(--space-3) var(--space-3);
background: var(--color-surface);
border: 1px solid color-mix(in oklab, var(--color-moss) 12%, transparent);
border-radius: 14px;
border-top-left-radius: 22px;
border-bottom-right-radius: 22px;
box-shadow: 0 6px 16px -10px rgba(30,20,10,0.14);
}
.wr3-usp .paw-ic {
--paw-size: 44px;
margin-top: 2px;
}
.wr3-usp b {
display: block;
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-sm);
color: var(--color-text);
margin-bottom: 2px;
}
.wr3-usp span span, .wr3-usp li > span {
font-size: 13.5px;
color: var(--color-text-muted);
line-height: 1.45;
display: block;
}
/* Alte Welcome-Regeln (nicht mehr referenziert, aber sicherheitshalber neutralisieren falls Cache) */
.welcome { display: none; }
/* ==========================================================================
ROUND 3 / Auftrag 4 — Themenseiten (Pre-Footer)
========================================================================== */
.themenseiten {
background: var(--color-surface);
padding-block: clamp(4rem, 7vw, 6rem);
border-top: 1px solid color-mix(in oklab, var(--color-moss) 12%, transparent);
}
.themenseiten-header {
max-width: 780px;
margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.themenseiten-eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-3);
}
.themenseiten-title {
font-family: var(--font-display, "Fraunces", serif);
color: var(--color-moss-deep);
font-size: clamp(1.6rem, 1rem + 1.6vw, 2.25rem);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0 0 var(--space-4);
}
.themenseiten-lead {
font-family: var(--font-body);
color: var(--color-text-muted);
font-size: var(--text-base);
max-width: 55ch;
line-height: 1.55;
margin: 0;
}
.themenseiten-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
@media (max-width: 900px) {
.themenseiten-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}
.themenseiten-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
background: var(--color-cream-hi);
border: 1px solid color-mix(in oklab, var(--color-moss) 20%, transparent);
border-radius: 5px;
padding: clamp(1.5rem, 2vw, 2rem);
padding-bottom: clamp(2.5rem, 3.5vw, 3rem);
text-decoration: none;
color: inherit;
transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
min-height: 220px;
}
.themenseiten-card:hover,
.themenseiten-card:focus-visible {
transform: translateY(-3px);
border-color: color-mix(in oklab, var(--color-moss) 55%, transparent);
box-shadow: 0 18px 36px -18px rgba(30,20,10,0.24);
}
.themenseiten-card:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
}
.themenseiten-domain {
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--color-text-muted);
text-transform: lowercase;
font-weight: 500;
}
.themenseiten-card-title {
font-family: var(--font-display, "Fraunces", serif);
font-weight: 500;
font-size: clamp(1.15rem, 0.9rem + 0.6vw, 1.35rem);
line-height: 1.25;
color: var(--color-moss-deep);
margin: 0;
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 4px;
text-decoration-color: color-mix(in oklab, var(--color-moss) 45%, transparent);
transition: text-decoration-color .22s ease;
}
.themenseiten-card:hover .themenseiten-card-title,
.themenseiten-card:focus-visible .themenseiten-card-title {
text-decoration-color: var(--color-moss);
}
.themenseiten-desc {
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.5;
margin: 0;
flex: 1;
}
.themenseiten-arrow {
position: absolute;
left: clamp(1.5rem, 2vw, 2rem);
bottom: clamp(1.25rem, 2vw, 1.5rem);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-accent);
transition: transform .22s ease;
}
.themenseiten-card:hover .themenseiten-arrow,
.themenseiten-card:focus-visible .themenseiten-arrow {
transform: translate(3px, -3px);
}
/* =============================================================
R4 — Einreise-Stripe + Reiseberichte
Full-bleed section, verwendet Tokens ausschließlich aus :root.
Kein Dark-Mode, kein prefers-color-scheme.
Copper-Aliases: Task-Palette nennt --color-copper / --color-copper-warm.
Die tatsächlich definierten Kupfer-Tokens sind --color-accent /
--color-accent-hover — wir aliasen sie hier, damit spätere Nutzung
der offiziellen Namen automatisch mitläuft.
============================================================= */
:root {
--color-copper: var(--color-accent);
--color-copper-warm: var(--color-accent-hover);
}
/* --- Einreise-Stripe (Full-bleed, dark moss) --- */
.einreise-stripe.r4 {
padding-block: clamp(var(--space-16), 8vw, var(--space-24));
background:
/* dezenter Verlauf über tiefes Moosgrün */
radial-gradient(120% 90% at 85% 15%,
color-mix(in oklab, var(--color-copper) 14%, transparent) 0%,
transparent 55%),
linear-gradient(155deg,
var(--color-moss) 0%,
var(--color-moss-deep) 55%,
color-mix(in oklab, var(--color-moss-deep) 92%, #000 8%) 100%),
/* Paw-Pattern in Cream als Overlay */
url("data:image/svg+xml;utf8,");
background-repeat: no-repeat, no-repeat, repeat;
color: var(--color-cream);
position: relative;
isolation: isolate;
}
.einreise-stripe.r4::before {
/* sanfter oberer Highlight-Streifen */
content: "";
position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg,
transparent 0%,
color-mix(in oklab, var(--color-cream) 40%, transparent) 50%,
transparent 100%);
pointer-events: none;
}
.einreise-stripe.r4 .einreise-inner {
max-width: 62ch;
margin-inline: auto;
text-align: center;
display: grid;
gap: var(--space-5);
justify-items: center;
}
.einreise-stripe.r4 .einreise-eyebrow {
display: inline-flex; align-items: center; gap: var(--space-2);
font-family: var(--font-body);
font-size: var(--text-xs);
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
/* Kupfer auf moss-deep BG hat unlesbaren Kontrast (~2.3:1).
Cream-Ton mit dezent warmem Stich (#f0d8b4) statt Kupfer
— gleiche Optik wie andere Eyebrows auf dunklen Blocks. */
color: #f0d8b4;
margin: 0;
}
.einreise-stripe.r4 .einreise-title {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 500;
color: var(--color-cream);
margin: 0;
line-height: 1.15;
letter-spacing: -0.01em;
text-wrap: balance;
}
.einreise-stripe.r4 .einreise-lead {
font-family: var(--font-body);
font-size: var(--text-base);
color: color-mix(in oklab, var(--color-cream) 88%, transparent);
margin: 0;
max-width: 58ch;
line-height: 1.6;
}
.einreise-stripe.r4 .einreise-cta {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
justify-content: center;
margin-top: var(--space-3);
}
/* Echte Pillen-Buttons für den dunklen Streifen */
.btn-einreise {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-full);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
border: 1.5px solid transparent;
transition:
transform .18s ease,
background-color .2s ease,
border-color .2s ease,
color .2s ease,
box-shadow .2s ease;
will-change: transform;
line-height: 1;
}
.btn-einreise .paw-ic {
flex: none;
/* Pfoten-Icon im Button klein halten — die paw-ic-Komponente
rendert per Default 44px+; hier nur 20px. */
--paw-size: 20px;
}
.btn-einreise .paw-ic svg.paw-icon-svg { width: 20px; height: 20px; }
.btn-einreise-primary {
background: var(--color-copper);
color: var(--color-cream);
box-shadow: 0 6px 18px -8px color-mix(in oklab, var(--color-copper) 60%, transparent);
}
.btn-einreise-primary:hover,
.btn-einreise-primary:focus-visible {
background: var(--color-copper-warm, var(--color-accent-hover));
color: var(--color-cream);
transform: translateY(-2px);
box-shadow: 0 10px 24px -10px color-mix(in oklab, var(--color-copper) 70%, transparent);
}
.btn-einreise-outline {
background: transparent;
color: var(--color-cream);
border-color: color-mix(in oklab, var(--color-cream) 55%, transparent);
}
.btn-einreise-outline:hover,
.btn-einreise-outline:focus-visible {
background: color-mix(in oklab, var(--color-cream) 10%, transparent);
border-color: var(--color-cream);
color: var(--color-cream);
transform: translateY(-2px);
}
@media (max-width: 560px) {
/* Mobile: Buttons untereinander, aber NICHT full-width — sie sollen
die natuerliche Textbreite behalten, sonst wirken sie riesig. */
.einreise-stripe.r4 .einreise-cta {
flex-direction: column;
align-items: center;
width: auto;
gap: var(--space-3);
}
.btn-einreise {
justify-content: center;
width: auto;
padding: var(--space-3) var(--space-5);
font-size: var(--text-sm);
}
}
/* --- Reiseberichte-Grid (R4) --- */
.reports.r4 .reports-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-6);
margin-top: var(--space-8);
list-style: none;
padding: 0;
}
/* Einzelner Bericht — zentrierte Karte mit begrenzter Breite */
.reports.r4 .reports-grid--single {
grid-template-columns: minmax(0, 720px);
justify-content: center;
}
.reports.r4 .report-card {
background: var(--color-surface);
border: 1px solid var(--color-divider);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-sm);
transition: transform var(--transition-interactive, .22s ease),
box-shadow var(--transition-interactive, .22s ease);
padding: 0;
height: 100%;
}
.reports.r4 .report-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.reports.r4 .report-media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: 0; /* gerahmt durch Card-Radius */
}
.reports.r4 .report-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 500ms ease;
}
.reports.r4 .report-card:hover .report-media img { transform: scale(1.04); }
/* Reisebericht-Badge (rechts oben) für Platzhalter */
.reports.r4 .report-badge {
position: absolute;
top: var(--space-3);
right: var(--space-3);
padding: 2px var(--space-3);
background: color-mix(in oklab, var(--color-moss-deep) 88%, transparent);
color: var(--color-cream);
border-radius: var(--radius-full);
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.3;
backdrop-filter: blur(2px);
}
.reports.r4 .report-body {
padding: var(--space-5) var(--space-6) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
flex: 1;
}
.reports.r4 .report-body h3 {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
color: var(--color-text);
margin: 0;
line-height: 1.25;
}
.reports.r4 .report-body > p {
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.6;
margin: 0;
flex: 1;
}
.reports.r4 .report-cta {
margin-top: auto;
align-self: flex-start;
}
.reports.r4 .report-cta-muted {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-text-muted);
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding-block: var(--space-2);
}
.reports.r4 .report-cta-muted::before {
content: "";
display: inline-block;
width: 8px; height: 8px;
border-radius: var(--radius-full);
background: var(--color-copper);
opacity: .8;
}
.reports.r4 .report-placeholder .report-body h3 {
color: color-mix(in oklab, var(--color-text) 78%, transparent);
}
/* Footer-CTA */
.reports.r4 .reports-footer {
display: flex;
justify-content: center;
margin-top: var(--space-10);
}
/* ============================================================
Reisebericht — Reisejournal-Layout (Magazin-Aufschlagseite)
H2-Block oben, breite Bildbuehne 12/12, cremefarbenes Textblatt
haengt am unteren linken Bildrand ins Bild und darueber hinaus.
Ab <=760px loesen wir die Ueberlappung komplett auf.
============================================================ */
.reports--magazine { padding-block: clamp(4rem, 8vw, 6rem); }
/* Intro: H2-Block auf 6/12 Spalten, Lead knapp darunter */
.reports--magazine .report-magazine-intro {
max-width: min(58ch, 62%);
margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem);
}
.reports--magazine .report-magazine-intro .lead {
margin-top: var(--space-3);
max-width: 42ch;
}
/* Article ist positioning-context fuer das schwebende Textblatt */
.report-magazine {
position: relative;
/* Reserviert unten Platz fuer den Ueberhang des Textblatts */
padding-bottom: clamp(6rem, 12vw, 10rem);
}
/* Bildbuehne: volle Containerbreite, ruhige 3:2 Bildhoehe */
.report-magazine .report-stage {
position: relative;
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
background: color-mix(in oklab, var(--color-moss-deep) 8%, var(--color-surface-offset));
}
.report-magazine .report-stage-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 60%;
display: block;
transition: transform 700ms ease;
}
.report-magazine:hover .report-stage-img {
transform: scale(1.02);
}
/* Chip oben links (nutzt bestehende .trip-tag Basis) */
.report-magazine .report-stage-chip {
position: absolute;
top: var(--space-4);
left: var(--space-4);
z-index: 2;
}
/* Textblatt: haengt am unteren linken Bildrand,
ueberlappt das Bild und ragt nach unten heraus. */
.report-magazine .report-plate {
position: absolute;
left: clamp(1.25rem, 3vw, 2.5rem);
bottom: 0;
width: min(clamp(20rem, 38%, 32rem), 100%);
background: var(--color-surface);
border-radius: var(--radius-lg);
padding: clamp(1.5rem, 2.6vw, 2.25rem);
box-shadow: 0 24px 48px -20px color-mix(in oklab, var(--color-moss-deep) 45%, transparent),
0 4px 12px -6px color-mix(in oklab, var(--color-moss-deep) 25%, transparent);
display: flex;
flex-direction: column;
gap: var(--space-3);
/* Kupfer-Haarstrich als feiner oberer Rand */
border-top: 2px solid color-mix(in oklab, var(--color-accent) 70%, transparent);
}
.report-magazine .report-plate-kicker {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-accent);
}
.report-magazine .report-plate-title {
font-family: var(--font-display);
font-size: clamp(1.375rem, 1.9vw, 1.75rem);
font-weight: 600;
line-height: 1.15;
color: var(--color-moss-deep);
margin: 0;
}
.report-magazine .report-plate-text {
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.6;
margin: 0;
}
.report-magazine .report-plate-cta {
align-self: flex-start;
margin-top: var(--space-2);
display: inline-flex;
align-items: center;
gap: 8px;
}
.report-magazine .report-plate-cta svg {
transition: transform .25s ease;
}
.report-magazine .report-plate-cta:hover svg,
.report-magazine .report-plate-cta:focus-visible svg {
transform: translateX(3px);
}
/* Bis einschliesslich iPad Landscape / kleiner Laptop: Ueberlappung komplett
aufloesen, Textblatt landet unter dem Bild. Sonst verdeckt die Textkarte
den Hund im Bild (Karte belegt ~38% Breite links unten, Hund sitzt bei
~43% X / 77% Y — der Karten-Bereich überschneidet den Hund bis ca. 1080 px). */
@media (max-width: 1080px) {
.reports--magazine .report-magazine-intro {
max-width: 100%;
}
.report-magazine {
padding-bottom: 0;
}
.report-magazine .report-stage {
aspect-ratio: 3 / 2;
border-radius: var(--radius-md);
margin-bottom: var(--space-5);
}
.report-magazine .report-plate {
position: static;
width: 100%;
box-shadow: none;
padding: 0;
background: transparent;
border-top: none;
/* Haarstrich als schmaler dekorativer Kupferstrich oben links */
border-left: 2px solid color-mix(in oklab, var(--color-accent) 70%, transparent);
padding-left: var(--space-4);
}
.report-magazine .report-stage-chip {
top: var(--space-3);
left: var(--space-3);
}
}
/* Sehr kleine Screens: Chip und Innenabstaende feiner */
@media (max-width: 420px) {
.report-magazine .report-plate-title {
font-size: 1.25rem;
}
}
/* ==========================================================================
REPORT DETAIL PAGE — Editorial Magazine Layout
Grosses Cover, Kapitel-Split mit Nummerierung, Voll-Bild-Breaks,
Diptychen, Pull-Quotes, Outro. Bewusst NICHT "Fliesstext + Bilder".
========================================================================== */
.page-report { background: var(--color-bg); }
/* --- Cover ------------------------------------------------------------- */
.report-cover {
position: relative;
isolation: isolate;
min-height: 82vh;
min-height: 82dvh;
display: flex;
align-items: flex-end;
color: #fff;
overflow: hidden;
}
.report-cover-media {
position: absolute; inset: 0; z-index: -2;
}
.report-cover-media img {
width: 100%; height: 100%; object-fit: cover;
filter: saturate(1.02) contrast(1.02);
}
.report-cover::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(180deg,
rgba(20,15,10,.55) 0%,
rgba(20,15,10,.15) 30%,
rgba(20,15,10,.15) 55%,
rgba(20,15,10,.85) 100%);
}
.report-cover-inner {
width: 100%;
padding: var(--space-12) 0 var(--space-16);
}
.breadcrumb--onmedia ol { color: rgba(255,255,255,.9); }
.breadcrumb--onmedia a { color: rgba(255,255,255,.95); }
.breadcrumb--onmedia [aria-current="page"] { color: #fff; }
.report-cover-kicker {
display: inline-block;
margin-top: var(--space-4);
padding: .35rem .8rem;
border: 1px solid rgba(255,255,255,.55);
border-radius: 999px;
font-family: var(--font-body);
font-size: .78rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: #fff;
background: rgba(255,255,255,.08);
backdrop-filter: blur(4px);
}
.report-cover-title {
font-family: var(--font-display);
font-weight: 500;
font-style: normal;
font-size: clamp(2.75rem, 1rem + 6.5vw, 6rem);
line-height: .98;
letter-spacing: -0.02em;
margin: var(--space-4) 0 var(--space-4);
max-width: 16ch;
text-wrap: balance;
text-shadow: 0 4px 32px rgba(0,0,0,.55);
}
.report-cover-dek {
font-family: var(--font-body);
font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
line-height: 1.55;
max-width: 58ch;
color: rgba(255,255,255,.94);
text-shadow: 0 2px 18px rgba(0,0,0,.55);
margin: 0 0 var(--space-8);
}
.report-cover-meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid rgba(255,255,255,.25);
margin: 0;
}
.report-cover-meta > div { display: flex; flex-direction: column; gap: .15rem; }
.report-cover-meta dt {
font-family: var(--font-body);
font-size: .72rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.7);
}
.report-cover-meta dd {
font-family: var(--font-display);
font-style: italic;
font-size: 1.05rem;
color: #fff;
margin: 0;
}
/* --- Standfirst -------------------------------------------------------- */
.report-standfirst {
padding: var(--space-16) 0 var(--space-10);
background: var(--color-bg);
}
.report-standfirst-text {
font-family: var(--font-display);
font-weight: 400;
font-style: italic;
font-size: clamp(1.6rem, 1rem + 2vw, 2.5rem);
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--color-text);
text-align: left;
text-wrap: balance;
border-left: 3px solid var(--color-accent);
padding-left: var(--space-6);
}
/* --- Kapitel im Ratgeber-Stil ---------------------------------------- */
/* Themenseiten (Editorial) verwenden jetzt Ratgeber-Sec-Layout mit
inline Kupfer-Nummer und Trennlinien. Kein Grid-Split mehr. */
.report-chapter {
padding: var(--space-8) 0;
}
.report-chapter + .report-chapter {
padding-top: var(--space-8);
/* Keine durchgehende Linie: Kapitel sind vollbreit, jedes Kapitel hat
bereits eine eigene kurze Linie an Nummer bzw. Ueberschrift. */
border-top: 0;
}
.report-chapter .chapter-label {
display: block;
font-family: var(--font-body);
font-size: .72rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-2);
}
.report-chapter .ratgeber-sec-head h2 {
margin: 0;
}
.report-toc-wrap {
padding: var(--space-8) 0 0;
}
.report-toc-wrap + .report-chapter { padding-top: var(--space-8); }
.report-chapter[id] { scroll-margin-top: var(--space-16, 5rem); }
.chapter-split {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
max-width: var(--content-wide);
margin: 0 auto;
}
@media (min-width: 900px) {
.chapter-split {
grid-template-columns: 220px minmax(0, 1fr);
gap: var(--space-12);
align-items: start;
}
}
.chapter-marker {
position: relative;
padding-top: .35rem;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
@media (min-width: 900px) {
.chapter-marker { position: sticky; top: 6.5rem; }
}
.chapter-num {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(3rem, 2rem + 3vw, 5rem);
line-height: 1;
color: var(--color-accent);
letter-spacing: -0.03em;
font-variant-numeric: lining-nums;
}
.chapter-label {
font-family: var(--font-body);
font-size: .72rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--color-text-muted);
padding-top: var(--space-2);
border-top: 1px solid var(--color-divider);
}
.chapter-body { max-width: 62ch; }
.chapter-body > * + * { margin-top: var(--space-5); }
.chapter-title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--color-text);
margin: 0 0 var(--space-4);
text-wrap: balance;
}
.chapter-body p {
font-family: var(--font-body);
font-size: 1.075rem;
line-height: 1.75;
color: var(--color-text);
}
/* Erster Absatz eines Kapitels: dezenter Drop-Cap-Fake per Kapitalisierung */
.chapter-body > p:first-of-type::first-letter {
font-family: var(--font-display);
font-weight: 500;
font-size: 3.4em;
float: left;
line-height: .9;
padding: .18em .12em 0 0;
color: var(--color-primary);
}
/* --- Voll-Bild-Breaks ------------------------------------------------- */
.report-fullbleed {
position: relative;
margin: var(--space-16) 0;
padding: 0;
}
.report-fullbleed img {
width: 100%;
height: clamp(340px, 60vh, 640px);
object-fit: cover;
display: block;
}
.report-fullbleed--tall img { height: clamp(420px, 78vh, 780px); }
.report-fullbleed figcaption {
display: block;
width: 100%;
padding: var(--space-4) clamp(1rem, 4vw, 2rem) 0;
margin: 0 auto;
max-width: var(--content-wide);
font-family: var(--font-body);
font-size: .95rem;
color: var(--color-text-muted);
font-style: italic;
box-sizing: border-box;
}
.report-fullbleed figcaption .container {
padding: 0;
max-width: none;
margin: 0;
}
/* --- Diptychon (2 Fotos nebeneinander) -------------------------------- */
.report-diptych {
display: grid;
grid-template-columns: 1fr;
gap: 4px;
margin: var(--space-16) 0;
}
@media (min-width: 720px) {
.report-diptych { grid-template-columns: 1fr 1fr; }
}
.report-diptych figure { margin: 0; }
.report-diptych img {
width: 100%;
height: clamp(320px, 55vh, 560px);
object-fit: cover;
display: block;
}
/* --- Pull-Quote-Band -------------------------------------------------- */
.report-pullquote {
background: var(--color-primary);
color: var(--color-text-inverse);
padding: var(--space-20) 0;
margin: var(--space-16) 0;
position: relative;
}
/* Folgt direkt ein eigener Farbbereich (Beispielreisen, Fakten), dockt das
Zitatband ohne hellen Zwischenstreifen an. */
.report-pullquote:has(+ .report-trips),
.report-pullquote:has(+ .report-facts) { margin-bottom: 0; }
.report-pullquote::before {
content: "\201C";
position: absolute;
top: .5rem;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-display);
font-size: 8rem;
line-height: 1;
color: rgba(255,255,255,.12);
pointer-events: none;
}
.report-pullquote blockquote { margin: 0; padding: 0; text-align: center; }
.report-pullquote blockquote p {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
line-height: 1.3;
color: #fff;
text-wrap: balance;
max-width: 24ch;
margin: 0 auto;
}
.report-pullquote blockquote p em {
font-style: italic;
color: #ffd898;
font-weight: 500;
}
/* --- Outro ------------------------------------------------------------ */
.report-outro {
padding: var(--space-16) 0 var(--space-24);
background: var(--color-bg);
}
.report-outro-text {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem);
line-height: 1.7;
color: var(--color-text);
max-width: 60ch;
text-align: center;
margin: 0 auto;
}
.report-signoff {
font-family: var(--font-display);
font-style: italic;
font-size: 1.5rem;
color: var(--color-accent);
text-align: center;
margin-top: var(--space-6);
}
/* --- Responsive Anpassungen ------------------------------------------- */
@media (max-width: 720px) {
.report-cover { min-height: 68vh; min-height: 68dvh; }
.report-cover-meta { gap: var(--space-4); }
.chapter-marker { flex-direction: row; align-items: baseline; gap: var(--space-4); }
.chapter-label { border-top: 0; padding-top: 0; }
.report-fullbleed { margin: var(--space-10) 0; }
.report-diptych { margin: var(--space-10) 0; }
.report-pullquote { padding: var(--space-16) 0; }
.chapter-body > p:first-of-type::first-letter {
font-size: 2.8em;
}
}
/* ==========================================================================
HOME: Reisebericht-Bildstrecke (rein dekorative Bilder, kein Link)
========================================================================== */
.report-preview-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
margin-top: var(--space-8);
}
.report-preview-strip figure {
margin: 0;
overflow: hidden;
border-radius: var(--radius-md);
aspect-ratio: 4 / 3;
background: var(--color-surface-offset);
}
.report-preview-strip img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 640px) {
.report-preview-strip { grid-template-columns: 1fr 1fr; }
.report-preview-strip figure:nth-child(3) { grid-column: span 2; aspect-ratio: 16/9; }
}
/* ============================================================
EDITORIAL — Themenseiten-Bausteine
(Reiseziele, Beispielreisen — nach dem Reisebericht-Muster)
============================================================ */
.report-intro {
padding: var(--space-10) 0 0;
}
.report-intro .lead {
font-size: var(--text-lg);
color: var(--color-text);
line-height: 1.65;
}
.report-section-head {
text-align: center;
max-width: 60ch;
margin: 0 auto var(--space-8);
}
.report-section-head .eyebrow {
display: inline-block;
color: var(--color-accent);
font-size: .8125rem;
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: var(--space-3);
}
.report-section-head .section-title {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
line-height: 1.2;
margin: 0 0 var(--space-3);
text-wrap: balance;
}
.report-section-head .lead {
font-size: var(--text-lg);
color: var(--color-text-muted);
margin: 0;
line-height: 1.55;
}
.report-trips {
padding: var(--space-16) 0;
background: rgba(56, 92, 58, .04);
}
.report-trips-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.report-trip-card {
background: #fff;
border: 1px solid rgba(56, 92, 58, .10);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.report-trip-card:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px -20px rgba(56, 92, 58, .35);
border-color: rgba(56, 92, 58, .25);
}
.report-trip-media {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
}
.report-trip-media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .8s ease;
}
.report-trip-card:hover .report-trip-media img { transform: scale(1.04); }
.report-trip-tag {
position: absolute;
top: var(--space-3);
left: var(--space-3);
background: rgba(255,255,255,.92);
color: var(--color-primary);
font-size: .75rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
padding: .35rem .75rem;
border-radius: 999px;
backdrop-filter: blur(6px);
}
.report-trip-body {
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
flex: 1;
}
.report-trip-body h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.4rem;
line-height: 1.25;
margin: 0;
color: var(--color-primary);
text-wrap: balance;
}
.report-trip-body p {
margin: 0;
color: var(--color-text-muted);
font-size: .95rem;
line-height: 1.55;
flex: 1;
}
.report-trip-body .btn {
align-self: flex-start;
margin-top: var(--space-2);
}
.report-facts {
padding: var(--space-16) 0;
}
.report-facts .section-title {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.2rem);
line-height: 1.2;
margin: 0 auto var(--space-8);
max-width: 40ch;
text-align: center;
text-wrap: balance;
}
.report-facts-grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-5) var(--space-8);
max-width: var(--content-default);
margin: 0 auto;
}
.report-facts-grid li {
padding: var(--space-4) 0 var(--space-4) var(--space-5);
border-left: 2px solid rgba(163, 74, 30, .35);
font-size: 1rem;
line-height: 1.6;
color: var(--color-text);
}
.report-facts-grid li strong {
color: var(--color-primary);
font-weight: 600;
}
.report-facts-grid li a {
color: var(--color-accent);
text-underline-offset: 3px;
}
.report-facts-grid li a:hover { text-decoration-thickness: 2px; }
/* ---- Mobile ---- */
@media (max-width: 900px) {
.report-trips-grid { grid-template-columns: 1fr; gap: var(--space-5); }
.report-facts-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}
/* ============================================================
Back-to-Top-Button
– schwebt fixiert unten-rechts, erscheint ab 400 px Scroll
– Cream auf Kupfer, Kontrast 5,08:1 (WCAG AA)
– wenn Footer im Viewport ist, bekommt der Footer zusätzliches
Bottom-Padding (via body.has-btt-visible), damit der Button
die Legal-Zeile nicht überdeckt
============================================================ */
.back-to-top {
position: fixed;
right: var(--space-5);
bottom: var(--space-5);
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: var(--color-accent);
color: #f6edda;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 6px 16px rgba(0,0,0,.28), 0 2px 4px rgba(0,0,0,.18);
opacity: 0;
transform: translateY(8px);
/* visibility: hidden nimmt den Button aus dem Tab-Fluss, solange er
unsichtbar ist — sonst könnten Tastatur-Nutzer einen opacity-0-Button
fokussieren (WCAG 2.4.7). Die Transition-Verzögerung hält die
Ausblende-Animation fließend. */
visibility: hidden;
transition: opacity .25s ease, transform .25s ease, background-color .2s ease, visibility 0s linear .25s;
z-index: 90;
}
.back-to-top:hover,
.back-to-top:focus-visible {
background: #8b3d16;
}
.back-to-top:focus-visible {
/* Doppelter Fokusring: innen dunkelbraun (Kontrast zum Kupfer-Button 2,9:1
bleibt — zusammen mit dem äußeren hellen Ring ist der Indikator gegen
jeden Hintergrund erkennbar), außen Cream mit dunkler Abgrenzung.
Erfüllt WCAG 1.4.11: hell-auf-dunkel garantiert ≥ 3:1 auf jedem Grund. */
outline: none;
box-shadow:
0 0 0 2px #2a1810,
0 0 0 5px #f6edda,
0 0 0 7px #2a1810,
0 6px 16px rgba(0,0,0,.28),
0 2px 4px rgba(0,0,0,.18);
}
.back-to-top.is-visible {
opacity: 1;
transform: translateY(0);
visibility: visible;
transition: opacity .25s ease, transform .25s ease, background-color .2s ease, visibility 0s linear 0s;
}
.back-to-top svg { display: block; }
/* Programmatischer Fokus (z. B. nach Back-to-Top) darf keinen sichtbaren
Ring zeigen — der Nutzer hat nichts mit der Tastatur bedient.
Der Fokus liegt trotzdem auf dem H1: Screenreader lesen die Überschrift
vor und die nächste Tab-Bewegung geht wieder durch die Nav. */
.is-programmatic-focus:focus,
.is-programmatic-focus:focus-visible {
outline: none;
box-shadow: none;
}
/* Sobald der Button sichtbar UND der Footer im Viewport ist,
Footer-Bottom-Padding erhöhen und der Legal-Zeile rechts eine
Sperrzone reservieren, damit umbrechender Text nicht unter den
Button läuft. */
body.has-btt-in-footer .site-footer {
padding-bottom: calc(var(--space-8) + 72px);
}
body.has-btt-in-footer .footer-bottom {
padding-right: 64px;
}
@media (max-width: 480px) {
.back-to-top {
right: var(--space-4);
bottom: var(--space-4);
width: 44px;
height: 44px;
}
/* Auf mobil wickelt die Legal-Zeile mehrfach — mehr Luft schaffen,
damit die Copyright-Zeile garantiert oberhalb des Buttons endet. */
body.has-btt-in-footer .site-footer {
padding-bottom: calc(var(--space-8) + 120px);
}
}
@media (prefers-reduced-motion: reduce) {
.back-to-top { transition: opacity .01s; transform: none; }
}
/* Programmatischer Fokus auf (nach Back-to-Top-Klick) soll unsichtbar
bleiben — Tastatur-Navigation zeigt weiterhin einen Fokusring. */
h1:focus:not(:focus-visible) { outline: none; }
/* ================================================================
Legal-Layout (Impressum, Datenschutz, Bildnachweis Sub-Blöcke)
Ein gemeinsames Layout für alle rechtlichen Textseiten:
- Breitere Textspalte (≈ 720–820 px) statt der 640-px-„narrow“
- Zweispalter ab 960 px: sticky „Abschnitte“-TOC links, Content rechts
- Sektionen visuell getrennt mit großzügigem Blockabstand + dünner Regel
- Klarere Hierarchie H2 (Fraunces italic) → H3 (Raleway, uppercase small)
================================================================ */
.legal-layout {
padding-block: clamp(var(--space-16), 6vw, var(--space-24));
background: var(--color-cream);
}
.legal-layout .container {
max-width: 1028px; /* 220 px TOC + 64 px Abstand + 680 px Text + 2 × 32 px Innenabstand */
}
.legal-layout-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-10);
align-items: start;
}
@media (min-width: 960px) {
.legal-layout-grid {
grid-template-columns: 220px minmax(0, 1fr);
gap: var(--space-16);
}
}
/* Sticky-TOC linke Spalte */
.legal-toc {
font-family: var(--font-body);
font-size: var(--text-sm);
}
.legal-toc-title {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-primary);
margin: 0 0 var(--space-4);
}
.legal-toc ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
border-left: 2px solid var(--color-line, rgba(0,0,0,.12));
}
.legal-toc li { margin: 0; }
.legal-toc a {
display: block;
padding: var(--space-2) var(--space-4);
margin-left: -2px;
border-left: 2px solid transparent;
color: var(--color-text-muted);
text-decoration: none;
line-height: 1.4;
transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.legal-toc a:hover,
.legal-toc a:focus-visible {
color: var(--color-text);
border-left-color: var(--color-primary);
background: rgba(0,0,0,.02);
}
@media (min-width: 960px) {
.legal-toc {
position: sticky;
/* Header (~100 px) + großzügige Luft, damit der TOC nicht direkt
an der Nav-Leiste klebt. */
top: calc(var(--space-24) + var(--space-16));
/* Wenn die TOC höher wird als der Restviewport, in sich scrollen. */
max-height: calc(100vh - var(--space-24) - var(--space-20));
overflow-y: auto;
padding-right: var(--space-2);
}
/* dezente Scrollbar im TOC */
.legal-toc::-webkit-scrollbar { width: 6px; }
.legal-toc::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 3px; }
}
/* Content-Spalte: Sektionen mit klarer Trennung */
.legal-content { min-width: 0; }
.legal-content > .legal-lead {
font-size: var(--text-lg);
color: var(--color-text);
max-width: 62ch;
margin: 0 0 var(--space-12);
line-height: 1.55;
}
.legal-block {
padding-block: var(--space-10);
border-top: 1px solid var(--color-line, rgba(0,0,0,.12));
/* Header (~100 px) + Luft, damit ein per TOC angesprungenes Ziel
nicht unter der Nav-Leiste klebt. */
scroll-margin-top: calc(var(--space-24) + var(--space-8));
}
.legal-block:first-child { border-top: 0; padding-top: 0; }
.legal-block:last-child { padding-bottom: 0; }
.legal-block > h2 {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(1.5rem, 1.1rem + 1vw, 1.9rem);
line-height: 1.2;
margin: 0 0 var(--space-6);
color: var(--color-text);
letter-spacing: -0.01em;
}
.legal-block > h3,
.legal-block h3 {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-sm);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary);
margin: var(--space-8) 0 var(--space-3);
line-height: 1.3;
}
.legal-block > h3:first-child { margin-top: 0; }
.legal-block p,
.legal-block li {
max-width: 68ch;
line-height: 1.65;
}
.legal-block p + p { margin-top: var(--space-4); }
.legal-block ul,
.legal-block ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.legal-block ul li,
.legal-block ol li { margin-bottom: var(--space-2); }
/* Adress-/Kontaktblöcke als typografisch klar getrennte Info-Karten
ohne aufdringliche Umrandung — nur dezenter linker Balken. */
.legal-address {
border-left: 3px solid var(--color-primary);
padding: var(--space-3) 0 var(--space-3) var(--space-5);
margin: 0 0 var(--space-4);
font-style: normal;
line-height: 1.6;
}
.legal-address strong { display: block; font-weight: 700; margin-bottom: var(--space-1); }
/* Kontakt-Definitionsliste (Telefon / Öffnungszeiten / E-Mail) */
.legal-dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: var(--space-2) var(--space-6);
margin: 0 0 var(--space-4);
max-width: 68ch;
}
.legal-dl dt {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-sm);
letter-spacing: 0.02em;
color: var(--color-text-muted);
padding-top: 2px;
}
.legal-dl dd { margin: 0; }
@media (max-width: 560px) {
.legal-dl {
grid-template-columns: 1fr;
gap: var(--space-1) 0;
}
.legal-dl dt { padding-top: var(--space-2); }
.legal-dl dt:first-of-type { padding-top: 0; }
}
/* Telefonnummern nie mitten in der Nummer umbrechen */
a.tel-obf { white-space: nowrap; }