/* ================================================================= Weinerlebnis Stühler · Joomla 6.0 Template Design: Minimalist · Apple-inspired · Bento Grid · Cursor Spotlight ================================================================= */ /* ─── TOKENS & VARIABLES ─────────────────────────────────────────── */ /* Alle Farbvariablen werden von index.php (Joomla Template-Params) */ /* überschrieben. Diese Werte sind nur statische Fallbacks. */ /* WICHTIG: In @layer verpackt, damit diese Fallbacks IMMER von den */ /* dynamischen Werten aus index.php gewinnen – unabhängig von der */ /* Ladereihenfolge im . Ohne @layer hatte diese Datei (weil sie */ /* nach dem Inline-Style von Joomla geladen wird) Vorrang und hat */ /* jede Farb-/Schrift-/Abstands-Änderung aus den Template-Einstellungen */ /* stillschweigend wieder überschrieben ("Änderung hat keine Wirkung"). */ @layer template-fallback { :root { /* Raw RGB-Werte – benötigt für rgba() mit variabler Opacity */ --clr-gold-rgb: 200, 169, 110; --clr-text-rgb: 26, 20, 16; --clr-accent-rgb: 139, 58, 58; --clr-hero-rgb: 10, 8, 6; --clr-page-rgb: 248, 246, 241; /* Hauptfarben */ --clr-accent: #8b3a3a; --clr-accent-2: #c8a96e; --clr-gold: #c8a96e; --clr-hero-bg: #0a0806; --clr-page-bg: #f8f6f1; --clr-bg: #f8f6f1; --clr-bg-alt: #f0ede6; --clr-surface: #ffffff; --clr-text: #1a1410; /* Abgeleitete Farben */ --clr-text-muted: rgba(26, 20, 16, 0.55); --clr-text-light: rgba(26, 20, 16, 0.35); --clr-text-inv: rgba(255, 255, 255, 0.88); --clr-text-inv-muted: rgba(255, 255, 255, 0.55); --clr-accent-glow: rgba(200, 169, 110, 0.18); --clr-border: rgba(26, 20, 16, 0.08); --clr-border-dark: rgba(255, 255, 255, 0.08); --clr-hero-card: rgba(255, 255, 255, 0.04); --clr-hero-border: rgba(255, 255, 255, 0.08); /* Typography */ --font-serif: 'Cormorant Garamond', 'Georgia', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Spacing Scale */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 8rem; /* Layout */ --max-width: 1280px; --nav-height: 72px; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; /* Transitions */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 150ms; --dur-mid: 250ms; --dur-slow: 400ms; } } /* Ende @layer template-fallback */ /* ─── RESET & BASE ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Verhindert, dass Chrome den Scroll automatisch "korrigiert", wenn sich oberhalb der Ansicht noch etwas in der Größe ändert (z.B. spät ladende Bilder) – sonst kann eine per Klick gestartete Scroll-Bewegung von selbst wieder zur Ausgangsposition zurückspringen. */ overflow-anchor: none; } body { font-family: var(--font-body); font-size: var(--font-size-base, 1rem); line-height: var(--line-height-body, 1.6); color: var(--clr-text); text-shadow: var(--text-shadow-body, none); background-color: var(--clr-bg); overflow-x: hidden; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } address { font-style: normal; } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* Focus styles */ :focus-visible { outline: 2px solid var(--clr-accent-2); outline-offset: 3px; border-radius: 4px; } /* ─── TYPOGRAPHY SCALE ───────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); text-shadow: var(--text-shadow-heading, none); font-weight: 400; line-height: var(--line-height-heading, 1.1); letter-spacing: -0.01em; } em { font-style: italic; color: var(--clr-accent); } strong { font-weight: 600; } /* ─── LAYOUT UTILITIES ───────────────────────────────────────────── */ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: clamp(1.5rem, 5vw, 4rem); } .section-eyebrow { font-family: var(--font-label); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-accent); margin-bottom: var(--space-md); } .section-eyebrow-light { color: var(--clr-accent-2); } .section-title { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 300; line-height: var(--line-height-heading, 1.08); color: var(--clr-text); margin-bottom: var(--space-xl); } .section-title em { display: block; } .section-title-light { color: var(--clr-text-inv); } .section-title-light em { color: var(--clr-accent-2); } /* ─── BUTTONS ────────────────────────────────────────────────────── */ .btn-primary { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 0.875rem 1.75rem; background-color: var(--clr-accent-2); color: var(--clr-text); font-family: var(--font-nav); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em; border-radius: 100px; transition: background-color var(--dur-mid) var(--ease-in-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-mid) var(--ease-in-out); } .btn-primary:hover { background-color: var(--clr-accent-2); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(var(--clr-gold-rgb), 0.35); } .btn-primary:active { transform: translateY(0); } .btn-primary.btn-large { padding: 1.125rem 2.25rem; font-size: 1rem; } .btn-ghost { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 0.875rem 1.75rem; border: 1px solid var(--clr-hero-border); color: var(--clr-text-inv); font-size: 0.875rem; font-weight: 400; border-radius: 100px; transition: background-color var(--dur-mid) var(--ease-in-out), border-color var(--dur-mid) var(--ease-in-out); } .btn-ghost:hover { background-color: rgba(255, 255, 255, 0.08); border-color: var(--clr-text-on-dark-sm); } /* ─── TOPBAR ─────────────────────────────────────────────────────── */ .topbar { background-color: var(--clr-hero-bg); color: var(--clr-text-inv-muted); font-size: 0.75rem; padding: var(--space-sm) 0; border-bottom: 1px solid var(--clr-hero-border); } /* ─── NAVIGATION ─────────────────────────────────────────────────── */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-height); transition: background-color var(--dur-slow) var(--ease-in-out), backdrop-filter var(--dur-slow) var(--ease-in-out), border-color var(--dur-slow) var(--ease-in-out); border-bottom: 1px solid transparent; } .site-header.is-scrolled, .site-header.is-opaque { background-color: var(--bg-nav); backdrop-filter: saturate(180%) blur(var(--blur-nav, 20px)); -webkit-backdrop-filter: saturate(180%) blur(var(--blur-nav, 20px)); border-bottom-color: var(--clr-hero-border); } .site-header.is-content-page { background-color: var(--bg-nav); border-bottom-color: var(--clr-hero-border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-height); max-width: var(--max-width); margin-inline: auto; padding-inline: clamp(1.5rem, 5vw, 4rem); } .nav-logo { display: flex; align-items: center; flex-shrink: 0; } .logo-text { display: flex; flex-direction: column; line-height: 1; } .logo-main { font-family: var(--font-logo); font-size: 1.25rem; font-weight: 600; color: var(--clr-text-inv); letter-spacing: -0.01em; } .logo-sub { font-family: var(--font-logo-sub, var(--font-nav)); font-size: 0.65rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clr-accent-2); margin-top: 2px; } /* Logo-Bild (Tab "Bilder" → Logo). Hintergrundfarbe + Deckkraft sind über Template Options steuerbar (logoBadgeColor / logoBadgeOpacity). Standard ist deckkraft 0 (kein Hintergrund) für transparente Logo-PNGs; bei Bedarf (z. B. schwer sichtbares Logo auf dunklem Grund) im Adminbereich erhöhen. */ .logo-badge { display: flex; align-items: center; justify-content: center; background-color: var(--logo-badge-bg, transparent); border-radius: var(--radius-sm); padding: 0.3rem 0.6rem; } .logo-image { display: block; height: calc(var(--nav-height) * 0.78); max-height: 58px; width: auto; object-fit: contain; } .footer-logo .logo-image { height: 56px; max-height: 56px; } .nav-menu { display: flex; align-items: center; gap: var(--space-xl); } /* Joomla module nav items */ .nav-menu > ul { display: flex; align-items: center; gap: var(--space-xl); list-style: none; } .nav-menu a:not(.nav-cta):not(.btn-primary) { font-family: var(--font-nav); font-size: var(--font-size-nav, 0.875rem); font-weight: 400; color: var(--clr-text-on-dark-md); transition: color var(--dur-fast); position: relative; } .nav-menu a:not(.nav-cta):not(.btn-primary)::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background-color: var(--clr-accent-2); transition: width var(--dur-mid) var(--ease-out); } .nav-menu a:not(.nav-cta):not(.btn-primary):hover { color: var(--clr-text-inv); } .nav-menu a:not(.nav-cta):not(.btn-primary):hover::after { width: 100%; } .nav-cta { display: inline-flex; align-items: center; padding: 0.5rem 1.25rem; background-color: var(--clr-accent-2); color: var(--clr-text) !important; font-size: 0.8125rem; font-weight: 500; border-radius: 100px; transition: background-color var(--dur-fast), transform var(--dur-fast) var(--ease-out); } .nav-cta:hover { background-color: var(--clr-accent-2); transform: translateY(-1px); } .nav-cta::after { display: none !important; } /* Burger */ .nav-burger { display: none; flex-direction: column; gap: 5px; width: 32px; padding: 4px; background: transparent; } .nav-burger span { display: block; height: 1.5px; background-color: var(--clr-text-inv); border-radius: 2px; transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-mid); } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile Nav */ .mobile-nav { /* Immer display:flex – nur so funktioniert die CSS-Transition */ display: flex; flex-direction: column; position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0; width: 100%; height: calc(100dvh - var(--nav-height)); background-color: var(--bg-nav); backdrop-filter: blur(var(--blur-nav, 20px)); -webkit-backdrop-filter: blur(var(--blur-nav, 20px)); padding: 2rem 1.5rem; padding-bottom: max(2rem, env(safe-area-inset-bottom)); overflow-y: auto; z-index: 99; /* Geschlossen */ visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity 280ms var(--ease-in-out), transform 280ms var(--ease-out), visibility 0ms 280ms; } .mobile-nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); transition: opacity 280ms var(--ease-in-out), transform 280ms var(--ease-out), visibility 0ms 0ms; } /* Desktop: komplett raus */ @media (min-width: 769px) { .mobile-nav { display: none !important; } } /* Nav-Links */ .mobile-nav ul { display: flex; flex-direction: column; width: 100%; list-style: none; margin: 0; padding: 0; flex: 1; } .mobile-nav li { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .mobile-nav li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.08); } .mobile-nav a { display: flex; align-items: center; width: 100%; padding: 1rem 0; font-family: var(--font-display); font-size: var(--font-size-mobile-nav, 1.75rem); font-weight: 300; color: var(--clr-text-inv); min-height: 52px; transition: color 150ms; } .mobile-nav a:hover, .mobile-nav a:active { color: var(--clr-accent-2); } .mobile-nav-cta { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .mobile-nav-cta .btn-primary { width: 100%; justify-content: center; } /* ─── HERO SECTION ───────────────────────────────────────────────── */ .hero-section { position: relative; min-height: 100dvh; background-color: var(--bg-hero); /* background-image gesetzt per inline-CSS aus Template-Parametern */ background-size: cover; background-position: center 40%; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding-top: var(--nav-height); } /* Dark overlay on top of hero image */ .hero-section::after { content: ''; position: absolute; inset: 0; background-color: rgba(var(--clr-hero-rgb), 0.72); z-index: 0; pointer-events: none; } /* Cursor Spotlight */ .hero-spotlight { position: absolute; inset: 0; background: radial-gradient( var(--hero-spotlight-size, 600px) circle at 50% 40%, rgba(var(--clr-gold-rgb), var(--hero-spotlight-opacity, 0.12)), transparent 80% ); pointer-events: none; transition: background 0.05s linear; z-index: 1; } /* Grid Lines Background */ .hero-grid-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .grid-lines { position: absolute; inset: -50%; width: 200%; height: 200%; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 80px 80px; transform: perspective(800px) rotateX(25deg); transform-origin: center top; opacity: var(--hero-grid-opacity, 0.6); } /* Radial vignette on top of everything */ .hero-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 30%, rgba(var(--clr-hero-rgb), var(--hero-vignette-opacity, 0.5)) 100% ); z-index: 1; pointer-events: none; } .hero-content { position: relative; z-index: 2; text-align: center; padding-inline: clamp(1.5rem, 6vw, 4rem); max-width: 900px; animation: heroFadeUp 1s var(--ease-out) both; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .hero-eyebrow { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-accent-2); margin-bottom: var(--space-xl); animation: heroFadeUp 1s 0.15s var(--ease-out) both; } .eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--clr-accent-2); animation: pulse 2.5s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } .hero-title { display: flex; flex-direction: column; align-items: center; gap: 0; margin-bottom: var(--space-lg); animation: heroFadeUp 1s 0.25s var(--ease-out) both; } .hero-title-line { display: block; font-family: var(--font-display); text-shadow: var(--text-shadow-hero, none); font-size: clamp(3.5rem, 11vw, 9rem); font-weight: 300; line-height: var(--line-height-heading, 0.95); color: var(--clr-text-inv); letter-spacing: -0.025em; } .hero-title-accent { font-style: italic; color: var(--clr-accent-2); font-size: clamp(2.25rem, 7vw, 5.5rem); letter-spacing: 0.02em; margin-top: -0.05em; } .hero-title-logo { display: flex; justify-content: center; } .hero-logo-image { width: 100%; max-width: min(420px, 78vw); height: auto; border-radius: var(--radius-md); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); /* Gleicher Hintergrund wie Nav-/Footer-Logo (Tab "Bilder" → Logo – Hintergrundfarbe/-Deckkraft), da das große Hero-Logo sonst auf dem Hintergrundfoto kaum zu erkennen ist. */ background-color: var(--logo-badge-bg, transparent); padding: 1.25rem 1.75rem; box-sizing: border-box; } .hero-subtitle { font-family: var(--font-body); font-size: clamp(0.9rem, 2vw, 1.125rem); font-weight: 300; color: var(--clr-text-inv-muted); letter-spacing: 0.03em; margin-bottom: var(--space-2xl); animation: heroFadeUp 1s 0.35s var(--ease-out) both; } .hero-actions { display: flex; align-items: center; justify-content: center; gap: var(--space-md); flex-wrap: wrap; animation: heroFadeUp 1s 0.45s var(--ease-out) both; } /* Hero Scroll Indicator */ .hero-scroll-indicator { position: absolute; bottom: var(--space-xl); left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); color: var(--clr-text-inv-muted); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; animation: heroFadeUp 1s 0.7s var(--ease-out) both; } .scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, transparent, var(--clr-accent-2)); animation: scrollPulse 2s infinite; } @keyframes scrollPulse { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* Hero Meta Bar */ .hero-meta { position: absolute; bottom: var(--space-xl); right: clamp(1.5rem, 5vw, 4rem); z-index: 2; display: flex; align-items: center; gap: var(--space-lg); animation: heroFadeUp 1s 0.6s var(--ease-out) both; } .hero-meta-item { display: flex; flex-direction: column; align-items: flex-start; } .meta-value { font-family: var(--font-price); font-size: 1.25rem; font-weight: 400; color: var(--clr-text-inv); line-height: 1; } .meta-label { font-size: 0.6875rem; font-weight: 400; color: var(--clr-text-inv-muted); letter-spacing: 0.06em; margin-top: 3px; text-transform: uppercase; } .hero-meta-divider { width: 1px; height: 32px; background-color: var(--clr-hero-border); } /* ─── BENTO GRID SECTION ─────────────────────────────────────────── */ .bento-section { background-color: var(--bg-bento); padding: var(--space-4xl) clamp(1.5rem, 5vw, 4rem); max-width: var(--max-width); margin-inline: auto; } .section-header { margin-bottom: var(--space-2xl); } /* Bento Grid – Apple-style asymmetric layout */ .bento-grid { display: grid; grid-template-columns: 3fr 2fr 2fr; grid-template-rows: auto auto; gap: 1.25rem; } /* Tile Base */ .bento-tile { position: relative; background-color: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-xl); padding: clamp(1.5rem, 3vw, 2.5rem); overflow: hidden; transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-in-out), border-color var(--dur-mid); will-change: transform; } .bento-tile:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 24px 60px rgba(var(--clr-text-rgb), 0.14), 0 8px 24px rgba(var(--clr-accent-rgb), 0.18); border-color: rgba(var(--clr-accent-rgb), 0.35); } /* Tile: Featured (spans 1 col, 2 rows) */ .bento-featured { grid-column: 1; grid-row: 1 / 3; /* background-image gesetzt per inline-CSS aus Template-Parametern */ background-size: cover; background-position: center; color: var(--clr-text-inv); display: flex; flex-direction: column; min-height: var(--bento-featured-min-h, 480px); } /* Helligkeits-Overlay (gesteuert via Template-Einstellung "Helligkeit %") */ .bento-featured::after, .bento-wines::after, .bento-rooms::after, .bento-experience::after, .bento-award::after { content: ''; position: absolute; inset: 0; background-color: rgba(0, 0, 0, var(--dim-overlay, 0)); border-radius: inherit; /* Negativer z-index: das Modul-Wrapper-Element ("mod-custom") wird an anderer Stelle per "display:contents" gerendert und verliert dadurch seine eigene Box (inkl. der geerbten position/z-index-Regel weiter unten). Der Kachel-Inhalt ist dadurch statisch positioniert und liegt im normalen Stapel-Kontext UNTER positionierten Geschwister-Elementen mit z-index >= 0. Nur ein negativer z-index sorgt dafür, dass dieser Verdunklungs-Layer hinter (nicht über) dem Text liegt. */ z-index: -1; pointer-events: none; } .bento-featured::before { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(var(--clr-hero-rgb), var(--grad-featured-top, 0.30)) 0%, rgba(var(--clr-hero-rgb), var(--grad-featured-mid, 0.75)) 60%, rgba(var(--clr-hero-rgb), var(--grad-featured-bot, 0.90)) 100% ); border-radius: inherit; z-index: -1; pointer-events: none; } .bento-featured > * { position: relative; z-index: 1; } .bento-featured .tile-title { color: var(--bento-featured-text); } .bento-featured .tile-text { color: var(--bento-featured-text-md); } /* Text-Shadow auf Bildkacheln – Lesbarkeit auch auf hellen Fotos */ .bento-featured .tile-title, .bento-featured .tile-text, .bento-featured .tile-link, .bento-featured .tile-badge, .bento-wines .tile-title, .bento-wines .tile-text, .bento-wines .tile-link, .bento-rooms .tile-title, .bento-rooms .tile-text, .bento-rooms .tile-link, .bento-rooms .price-amount, .bento-rooms .price-from, .bento-rooms .price-unit { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65), 0 2px 12px rgba(0, 0, 0, 0.45); } /* Tile: Experience */ .bento-experience { grid-column: 2; grid-row: 1; /* background-image gesetzt per inline-CSS aus Template-Parametern */ background-size: cover; background-position: center; color: var(--clr-text-inv); } .bento-experience .tile-title { color: var(--bento-experience-text); } .bento-experience .tile-text { color: var(--bento-experience-text-md); } /* Tile: Wines */ .bento-wines { grid-column: 3; grid-row: 1; /* background-image gesetzt per inline-CSS aus Template-Parametern */ background-size: cover; background-position: center; overflow: hidden; color: var(--clr-text-inv); } .bento-wines::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(var(--clr-hero-rgb), var(--grad-wines-top, 0.65)) 0%, rgba(var(--clr-hero-rgb), var(--grad-wines-bot, 0.40)) 100% ); border-radius: inherit; z-index: -1; pointer-events: none; } .bento-wines > * { position: relative; z-index: 1; } .bento-wines .tile-title { color: var(--bento-wines-text); } .bento-wines .tile-text { color: var(--bento-wines-text-md); } /* Tile: Rooms */ .bento-rooms { grid-column: 2; grid-row: 2; /* background-image gesetzt per inline-CSS aus Template-Parametern */ background-size: cover; background-position: center; color: var(--clr-text-inv); } .bento-rooms::before { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(var(--clr-hero-rgb), var(--grad-rooms-top, 0.20)) 0%, rgba(var(--clr-hero-rgb), var(--grad-rooms-mid, 0.80)) 70%, rgba(var(--clr-hero-rgb), var(--grad-rooms-bot, 0.92)) 100% ); border-radius: inherit; z-index: -1; pointer-events: none; } .bento-rooms > * { position: relative; z-index: 1; } .bento-rooms .tile-title { color: var(--bento-rooms-text); } .bento-rooms .tile-text { color: var(--bento-rooms-text-md); } .bento-rooms .price-from, .bento-rooms .price-unit { color: var(--bento-rooms-text-md); } /* Tile: Award */ .bento-award { grid-column: 3; grid-row: 2; /* background-image gesetzt per inline-CSS aus Template-Parametern */ background-size: cover; background-position: center; color: var(--clr-text-inv); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; } /* Tile Content Elements */ .tile-badge { display: inline-flex; align-items: center; padding: 0.375rem 0.875rem; background-color: var(--clr-text-on-dark-sm); border-radius: 100px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; margin-bottom: var(--space-lg); color: var(--clr-text-inv); } .tile-badge.accent { background-color: var(--clr-accent-2); color: var(--clr-text); } /* Per-Kachel Textfarben (aus Template-Einstellungen steuerbar) */ .bento-featured * { color: inherit; } .bento-experience * { color: inherit; } .bento-wines * { color: inherit; } .bento-rooms * { color: inherit; } .bento-award * { color: inherit; } .bento-featured { color: var(--bento-featured-text); } .bento-experience { color: var(--bento-experience-text); } .bento-wines { color: var(--bento-wines-text); } .bento-rooms { color: var(--bento-rooms-text); } .bento-award { color: var(--bento-award-text); } /* Ausnahme: Accent-Badge behält immer dunkle Schrift */ .tile-badge.accent { color: var(--clr-text) !important; } /* Award-Icon bleibt Gold */ .award-icon { color: var(--clr-accent-2) !important; } .award-year { color: var(--clr-accent-2) !important; } .tile-title { font-family: var(--font-heading); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 400; line-height: 1.1; margin-bottom: var(--space-md); color: var(--clr-text); } .tile-text { font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.6; color: var(--clr-text-muted); flex-grow: 1; margin-bottom: var(--space-xl); } .tile-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 500; color: var(--clr-accent-2); margin-top: auto; transition: gap var(--dur-fast) var(--ease-out); } .tile-link:hover { gap: 10px; } .bento-featured .tile-link { color: var(--bento-featured-text); } .bento-experience .tile-link { color: var(--bento-experience-text); } /* Featured tile image frame */ .tile-image-frame { position: absolute; top: 0; right: 0; bottom: 0; width: 45%; opacity: 0.15; pointer-events: none; } .tile-image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .tile-image-placeholder svg { width: 80%; height: 80%; color: var(--clr-text-inv); } /* Tile Checklist */ .tile-checklist { list-style: none; margin-bottom: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); } .tile-checklist li { display: flex; align-items: flex-start; gap: var(--space-sm); font-size: 0.875rem; color: var(--clr-text-on-dark-md); } .check-icon { color: var(--clr-accent-2); font-size: 0.5rem; margin-top: 5px; flex-shrink: 0; } /* Wine Orbs (decorative) */ .tile-wines-visual { position: absolute; top: -30px; right: -30px; width: 160px; height: 160px; pointer-events: none; } .wine-orb { position: absolute; border-radius: 50%; } .wine-orb-1 { width: 100px; height: 100px; background: radial-gradient(circle, rgba(var(--clr-accent-rgb),0.3), rgba(var(--clr-accent-rgb),0.05)); top: 20px; right: 20px; } .wine-orb-2 { width: 70px; height: 70px; background: radial-gradient(circle, rgba(var(--clr-gold-rgb),0.25), transparent); top: 0; right: 50px; } .wine-orb-3 { width: 50px; height: 50px; background: radial-gradient(circle, rgba(var(--clr-accent-rgb),0.2), transparent); top: 60px; right: 0; } /* Price Tag */ .tile-price-tag { display: flex; align-items: baseline; gap: 0.25rem; margin-bottom: var(--space-lg); color: var(--clr-accent); } .price-from { font-size: 0.875rem; color: var(--clr-text-muted); } .price-amount { font-family: var(--font-price); font-size: var(--font-size-price, 2.5rem); font-weight: 300; line-height: 1; } .price-unit { font-size: 0.875rem; color: var(--clr-text-muted); } /* Award tile */ .award-icon { width: 56px; height: 56px; color: var(--clr-accent-2); margin-bottom: var(--space-lg); opacity: 0.9; } .award-icon svg { width: 100%; height: 100%; } .award-year { display: block; font-family: var(--font-price); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; color: var(--clr-accent-2); margin-bottom: var(--space-xs); } .award-title { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 300; color: var(--bento-award-text); line-height: 1.15; margin-bottom: var(--space-sm); } .award-desc { font-size: 0.8125rem; color: var(--bento-award-text-md); } /* ─── ABOUT SECTION ──────────────────────────────────────────────── */ .about-section { background-color: var(--bg-about); padding: var(--space-4xl) clamp(1.5rem, 5vw, 4rem); } .about-inner { max-width: var(--max-width); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; } .about-lead { font-size: 1.125rem; line-height: var(--line-height-relaxed, 1.7); color: var(--clr-text-muted); margin-bottom: var(--space-2xl); } .about-generations { display: flex; flex-direction: column; gap: var(--space-xl); } .generation-item { padding-left: var(--space-lg); border-left: 2px solid var(--clr-accent-2); } .generation-item h4 { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; color: var(--clr-text); margin-bottom: var(--space-sm); } .generation-item p { font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.65; } /* About Visual */ .about-visual-col { position: relative; } .about-image-frame { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-xl); overflow: hidden; background-color: var(--clr-surface); border: 1px solid var(--clr-border); } .about-photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .about-image-accent { position: absolute; bottom: -20px; right: -20px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--clr-gold-rgb),0.2), transparent); pointer-events: none; } /* ─── EXPERIENCE SECTION ─────────────────────────────────────────── */ .experience-section { background-color: var(--bg-experience); /* background-image gesetzt per inline-CSS aus Template-Parametern */ background-size: cover; background-position: center; background-attachment: fixed; padding: var(--space-4xl) clamp(1.5rem, 5vw, 4rem); position: relative; overflow: hidden; } .experience-section::before { content: ''; position: absolute; inset: 0; background: rgba(var(--clr-hero-rgb), 0.80); pointer-events: none; z-index: 0; } .experience-section::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(var(--clr-gold-rgb), 0.08) 0%, transparent 60% ); pointer-events: none; z-index: 0; } .experience-inner { max-width: var(--max-width); margin-inline: auto; position: relative; z-index: 1; } /* disable fixed attachment on mobile (performance) */ @media (max-width: 768px) { .experience-section { background-attachment: scroll; } } .experience-header { max-width: 600px; margin-bottom: var(--space-3xl); } .experience-subtitle { font-size: 1.0625rem; color: var(--clr-text-inv-muted); line-height: 1.65; margin-top: calc(-1 * var(--space-lg)); margin-bottom: 0; } .experience-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: var(--space-3xl); } .exp-step { padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid var(--clr-hero-border); border-radius: var(--radius-lg); background-color: rgba(255, 255, 255, 0.03); transition: background-color var(--dur-mid), border-color var(--dur-mid); position: relative; overflow: hidden; } .exp-step::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 0% 0%, rgba(var(--clr-gold-rgb), 0.08), transparent 60% ); opacity: 0; transition: opacity var(--dur-mid); } .exp-step:hover { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(var(--clr-gold-rgb), 0.2); } .exp-step:hover::before { opacity: 1; } .exp-step-number { font-family: var(--font-price); font-size: 4rem; font-weight: 300; color: rgba(var(--clr-gold-rgb), 0.12); line-height: 1; position: absolute; top: var(--space-lg); right: var(--space-lg); } .exp-step h4 { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 400; color: var(--clr-text-inv); margin-bottom: var(--space-sm); position: relative; } .exp-step p { font-size: 0.9rem; color: var(--clr-text-inv-muted); line-height: 1.6; position: relative; } /* Experience CTA */ .experience-cta { display: flex; align-items: center; justify-content: space-between; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--clr-hero-border); border-radius: var(--radius-xl); background-color: rgba(255, 255, 255, 0.03); flex-wrap: wrap; gap: var(--space-xl); } .exp-cta-info { display: flex; flex-direction: column; gap: var(--space-xs); } .exp-capacity { font-size: 0.9375rem; color: var(--clr-text-inv-muted); } .exp-price { font-family: var(--font-price); font-size: 2rem; font-weight: 300; color: var(--clr-accent-2); } /* ─── CONTENT WRAP (inner pages) ─────────────────────────────────── */ .page-header { background-color: var(--clr-hero-bg); padding: calc(var(--nav-height) + var(--space-2xl)) clamp(1.5rem, 5vw, 4rem) var(--space-2xl); margin-bottom: var(--space-2xl); } /* ─── FOOTER ─────────────────────────────────────────────────────── */ .site-footer { background-color: var(--bg-footer); color: var(--clr-text-inv); } .footer-inner { max-width: var(--max-width); margin-inline: auto; padding: var(--space-3xl) clamp(1.5rem, 5vw, 4rem) var(--space-2xl); display: grid; grid-template-columns: 1.5fr 2fr; gap: clamp(3rem, 6vw, 8rem); } .footer-tagline { font-size: 0.9rem; color: var(--clr-text-inv-muted); margin-top: var(--space-md); line-height: 1.5; } .footer-social { display: flex; gap: var(--space-md); margin-top: var(--space-xl); } .footer-social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--clr-hero-border); border-radius: 50%; color: var(--clr-text-inv-muted); transition: color var(--dur-fast), border-color var(--dur-fast); } .footer-social a:hover { color: var(--clr-text-inv); border-color: var(--clr-text-on-dark-sm); } .footer-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); } .footer-col h4 { font-family: var(--font-label); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-text-inv-muted); margin-bottom: var(--space-lg); } .footer-col ul li { margin-bottom: var(--space-sm); } .footer-col a { font-size: 0.9rem; color: var(--clr-text-on-dark-md); transition: color var(--dur-fast); } .footer-col a:hover { color: var(--clr-text-inv); } .footer-hours, .footer-col p, .footer-col address p { font-size: 0.9rem; color: var(--clr-text-inv-muted); line-height: 1.65; margin-bottom: var(--space-md); } .footer-contact-link { font-size: 0.875rem; color: var(--clr-accent-2) !important; margin-top: var(--space-sm); display: inline-block; } .footer-bottom { border-top: 1px solid var(--clr-hero-border); } .footer-bottom-inner { max-width: var(--max-width); margin-inline: auto; padding: var(--space-lg) clamp(1.5rem, 5vw, 4rem); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); } .footer-copy { font-size: 0.8125rem; color: var(--clr-text-on-dark-sm); } .footer-legal { display: flex; flex-wrap: wrap; row-gap: var(--space-sm); column-gap: var(--space-lg); } .footer-legal a { font-size: 0.8125rem; color: var(--clr-text-on-dark-sm); transition: color var(--dur-fast); } .footer-legal a:hover { color: var(--clr-text-on-dark-md); } /* ─── BACK TO TOP ────────────────────────────────────────────────── */ .back-to-top { position: fixed; bottom: var(--space-xl); right: var(--space-xl); z-index: 50; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background-color: rgba(var(--clr-text-rgb), 0.85); backdrop-filter: blur(8px); color: var(--clr-text-on-dark-md); border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; transition: opacity var(--dur-mid), transform var(--dur-mid) var(--ease-out); opacity: 0; pointer-events: none; transform: translateY(8px); } .back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .back-to-top:hover { color: var(--clr-text-inv); background-color: rgba(var(--clr-text-rgb), 0.96); } /* ─── JOOMLA SYSTEM MESSAGES ─────────────────────────────────────── */ .alert { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); margin-bottom: var(--space-md); font-size: 0.9375rem; } .alert-info { background-color: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); } .alert-success { background-color: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.2); } .alert-warning { background-color: rgba(234, 179, 8, 0.1); border: 1px solid rgba(234, 179, 8, 0.2); } .alert-error { background-color: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); } /* ─── SCROLL REVEAL ANIMATIONS ───────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ─── RESPONSIVE ─────────────────────────────────────────────────── */ /* Tablet */ @media (max-width: 1024px) { .bento-grid { grid-template-columns: 1fr 1fr; } .bento-featured { grid-column: 1 / 3; grid-row: 1; min-height: 320px; } .bento-experience { grid-column: 1; grid-row: 2; } .bento-wines { grid-column: 2; grid-row: 2; } .bento-rooms { grid-column: 1; grid-row: 3; } .bento-award { grid-column: 2; grid-row: 3; } .experience-grid { grid-template-columns: repeat(2, 1fr); } .about-inner { grid-template-columns: 1fr; gap: var(--space-2xl); } .about-visual-col { order: -1; } .about-image-frame { aspect-ratio: 16/9; max-height: 360px; } .footer-inner { grid-template-columns: 1fr; gap: var(--space-2xl); } .hero-meta { display: none; } } /* Mobile */ @media (max-width: 768px) { :root { --nav-height: 60px; } .nav-menu { display: none; } .nav-burger { display: flex; } .bento-grid { grid-template-columns: 1fr; } .bento-featured { grid-column: 1; grid-row: auto; min-height: 280px; } .bento-experience, .bento-wines, .bento-rooms, .bento-award { grid-column: 1; grid-row: auto; } .experience-grid { grid-template-columns: 1fr; } .experience-cta { flex-direction: column; align-items: flex-start; } .footer-columns { grid-template-columns: 1fr 1fr; } .footer-bottom-inner { flex-direction: column; align-items: flex-start; } .hero-scroll-indicator { display: none; } } @media (max-width: 480px) { .footer-columns { grid-template-columns: 1fr; } .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn-primary, .hero-actions .btn-ghost { justify-content: center; } } /* ─── PRINT ──────────────────────────────────────────────────────── */ @media print { .site-header, .hero-spotlight, .hero-scroll-indicator, .hero-meta, .back-to-top { display: none; } .hero-section { min-height: auto; padding: 2rem; background-color: var(--bg-hero); } .hero-title-line, .hero-title-accent { color: var(--clr-text-inv); } } /* ─── ROOMS SECTION ─────────────────────────────────────────────── */ .rooms-section { background-color: var(--bg-rooms); padding: var(--space-4xl) clamp(1.5rem, 5vw, 4rem); } .rooms-inner { max-width: var(--max-width); margin-inline: auto; } .rooms-header { max-width: 680px; margin-bottom: var(--space-3xl); } .rooms-intro { font-size: 1.0625rem; color: var(--clr-text-muted); line-height: 1.65; margin-top: calc(-1 * var(--space-md)); } .rooms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; } .room-card { border: 1px solid var(--clr-border); border-radius: var(--radius-xl); overflow: hidden; background-color: var(--clr-surface); transition: box-shadow var(--dur-mid) var(--ease-in-out), transform var(--dur-mid) var(--ease-out); } .room-card:hover { box-shadow: 0 20px 60px rgba(var(--clr-text-rgb), 0.1); transform: translateY(-2px); } .room-image { aspect-ratio: 16/10; overflow: hidden; } .room-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .room-card:hover .room-image img { transform: scale(1.04); } .room-info { padding: clamp(1.25rem, 2.5vw, 2rem); } .room-type { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-accent); margin-bottom: var(--space-sm); } .room-name { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 400; color: var(--clr-text); margin-bottom: var(--space-lg); } .room-features { list-style: none; display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-xl); } .room-features li { font-size: 0.9rem; color: var(--clr-text-muted); padding-left: 1.25rem; position: relative; } .room-features li::before { content: '–'; position: absolute; left: 0; color: var(--clr-accent-2); } .room-price { display: flex; align-items: baseline; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 1px solid var(--clr-border); } .room-price-amount { font-family: var(--font-price); font-size: 2rem; font-weight: 300; color: var(--clr-accent); line-height: 1; } .room-price-unit { font-size: 0.875rem; color: var(--clr-text-light); } .rooms-photo-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: var(--space-3xl); } .rooms-photo-strip img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-lg); } .rooms-cta { text-align: center; padding: clamp(2rem, 4vw, 3rem); border: 1px solid var(--clr-border); border-radius: var(--radius-xl); background-color: var(--clr-bg-alt); } .rooms-cta p { font-size: 1rem; color: var(--clr-text-muted); margin-bottom: var(--space-xl); } .content-slideshow { margin-top: var(--space-2xl); margin-bottom: var(--space-3xl); /* Nie breiter als die normale Inhaltsbreite der Seite, egal in welchem Abschnitt die Slideshow gerade angezeigt wird. */ max-width: min(var(--slideshow-width, 100%), var(--max-width, 1280px)); margin-inline: auto; } .slideshow-viewport { position: relative; overflow: hidden; border-radius: var(--radius-xl); /* Fließend skalierende Höhe: wächst/schrumpft mit der Bildschirmbreite (Handy, Tablet, Desktop), nie kleiner als 180px, nie größer als die im Template Options eingestellte Höhe. 55vw sorgt dafür, dass sich auch unterschiedlich breite Handys (iPhone/Android) spürbar voneinander unterscheiden, statt alle auf den Mindestwert zu fallen. */ height: clamp(180px, 55vw, var(--slideshow-height, 450px)); } .slideshow-track { display: flex; height: 100%; transition: transform 0.6s var(--ease-in-out, ease-in-out); } .slideshow-slide { flex: 0 0 100%; height: 100%; background-color: var(--clr-bg-alt); } .slideshow-slide img { width: 100%; height: 100%; /* "contain" statt "cover": jedes Bild wird komplett angezeigt, egal ob Hoch- oder Querformat oder unterschiedliche Seitenverhältnisse im Ordner liegen. Freiraum links/rechts bzw. oben/unten wird mit der Hintergrundfarbe der Slide gefüllt statt das Bild zuzuschneiden. */ object-fit: contain; display: block; } .slideshow-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; border: none; border-radius: 50%; background-color: rgba(255, 255, 255, 0.85); color: var(--clr-text); font-size: 1.125rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color var(--dur-mid, 0.2s) var(--ease-in-out, ease-in-out); } .slideshow-arrow:hover { background-color: #fff; } .slideshow-prev { left: 1rem; } .slideshow-next { right: 1rem; } .slideshow-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--space-md); } .slideshow-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; border: none; padding: 0; /* Fester, neutraler Grauton statt var(--clr-border): die Slideshow kann über "Anzeigeort" in helle (Weine, Gästezimmer, Familie) UND dunkle Bereiche (Das Weinerlebnis) verschoben werden. var(--clr-border) ist von der Textfarbe abgeleitet und auf dunklem Hintergrund praktisch unsichtbar. Dieser Grauton bleibt auf beiden Hintergründen sichtbar. */ background-color: rgba(128, 128, 128, 0.45); cursor: pointer; transition: background-color var(--dur-mid, 0.2s) var(--ease-in-out, ease-in-out); } .slideshow-dot.is-active, .slideshow-dot:hover { background-color: var(--clr-accent); } @media (max-width: 768px) { .slideshow-arrow { width: 2.25rem; height: 2.25rem; font-size: 1rem; } .slideshow-prev { left: 0.5rem; } .slideshow-next { right: 0.5rem; } } @media (max-width: 480px) { .slideshow-arrow { width: 2rem; height: 2rem; font-size: 0.875rem; } .slideshow-dots { gap: 0.375rem; } .slideshow-dot { width: 0.4375rem; height: 0.4375rem; } } .rooms-extras { margin-top: var(--space-2xl); margin-bottom: var(--space-3xl); padding-top: var(--space-2xl); border-top: 1px solid var(--clr-border); } .rooms-extras-module { font-size: 1rem; color: var(--clr-text); line-height: 1.65; } .rooms-extras-module img { max-width: 100%; height: auto; border-radius: var(--radius-lg); } .rooms-extras-module h1, .rooms-extras-module h2, .rooms-extras-module h3, .rooms-extras-module h4 { font-family: var(--font-heading); font-weight: 400; color: var(--clr-text); margin-bottom: var(--space-md); } .rooms-extras-module p { margin-bottom: var(--space-md); } .extras-header { max-width: 680px; margin-bottom: var(--space-xl); } .extras-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; color: var(--clr-text); } .extras-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; } .extra-card { display: flex; border: 1px solid var(--clr-border); border-radius: var(--radius-xl); overflow: hidden; background-color: var(--clr-surface); transition: box-shadow var(--dur-mid) var(--ease-in-out), transform var(--dur-mid) var(--ease-out); } .extra-card:hover { box-shadow: 0 20px 60px rgba(var(--clr-text-rgb), 0.1); transform: translateY(-2px); } .extra-image { flex: 0 0 40%; aspect-ratio: 4/3; overflow: hidden; } .extra-image img { width: 100%; height: 100%; object-fit: cover; } .extra-info { padding: clamp(1rem, 2vw, 1.5rem); display: flex; flex-direction: column; gap: var(--space-sm); } .extra-title { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 400; color: var(--clr-text); } .extra-desc { font-size: 0.875rem; color: var(--clr-text-muted); line-height: 1.55; } .extra-price { display: flex; align-items: baseline; gap: var(--space-sm); margin-top: auto; padding-top: var(--space-sm); } .extra-price-amount { font-family: var(--font-price); font-size: 1.375rem; font-weight: 300; color: var(--clr-accent); line-height: 1; } .extra-price-unit { font-size: 0.8125rem; color: var(--clr-text-light); } @media (max-width: 768px) { .extra-card { flex-direction: column; } .extra-image { flex-basis: auto; aspect-ratio: 16/9; } } @media (max-width: 768px) { .rooms-grid { grid-template-columns: 1fr; } .rooms-photo-strip { grid-template-columns: 1fr; } } /* ─── GALLERY SECTION ────────────────────────────────────────────── */ .gallery-section { background-color: var(--bg-gallery); padding: var(--space-4xl) clamp(1.5rem, 5vw, 4rem); } .gallery-header { max-width: var(--max-width); margin-inline: auto; margin-bottom: var(--space-2xl); } .gallery-grid { max-width: var(--max-width); margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: var(--gallery-row-height, 240px); gap: 0.75rem; } .gallery-item { display: block; border-radius: var(--radius-md); overflow: hidden; position: relative; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow); filter: saturate(0.9); } .gallery-item:hover img { transform: scale(1.04); filter: saturate(1.1); } .gallery-item-large { grid-column: span 2; grid-row: span 2; } .gallery-item-wide { grid-column: span 2; } @media (max-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } .gallery-item-large { grid-column: span 2; grid-row: span 1; } } @media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; } .gallery-item-large, .gallery-item-wide { grid-column: span 1; } } /* ─── WINES SECTION ──────────────────────────────────────────────── */ .wines-section { background-color: var(--bg-wines); padding: var(--space-4xl) clamp(1.5rem, 5vw, 4rem); } .wines-inner { max-width: var(--max-width); margin-inline: auto; } .wines-header { max-width: 680px; margin-bottom: var(--space-3xl); } .wines-intro { font-size: 1.0625rem; color: var(--clr-text-muted); line-height: 1.65; margin-top: calc(-1 * var(--space-md)); } .wines-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .wine-card { background-color: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-xl); padding: clamp(1.5rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: var(--space-md); transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid); } .wine-card:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(var(--clr-text-rgb), 0.08); } .wine-card-icon { width: 48px; height: 72px; color: var(--clr-accent); opacity: 0.6; } .wine-card-icon svg { width: 100%; height: 100%; } .wine-card-type { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-accent-2); } .wine-card-name { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 400; color: var(--clr-text); line-height: 1.2; } .wine-card-desc { font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.6; flex-grow: 1; } .wine-card-badge { display: inline-flex; align-items: center; padding: 0.3rem 0.75rem; background-color: rgba(var(--clr-gold-rgb), 0.12); border: 1px solid rgba(var(--clr-gold-rgb), 0.25); border-radius: 100px; font-size: 0.7rem; font-weight: 500; color: var(--clr-accent-2); letter-spacing: 0.04em; } .wine-card-download { background-color: var(--clr-text); border-color: transparent; color: var(--clr-text-inv); justify-content: space-between; } .wine-dl-icon { width: 48px; height: 48px; color: var(--clr-accent-2); opacity: 0.85; } .wine-dl-icon svg { width: 100%; height: 100%; } .wine-dl-title { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 400; color: var(--clr-text-inv); line-height: 1.2; } .wine-dl-desc { font-size: 0.875rem; color: var(--clr-text-inv-muted); line-height: 1.55; flex-grow: 1; } @media (max-width: 1024px) { .wines-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .wines-grid { grid-template-columns: 1fr; } } /* ─── NEWS / AKTUELLES SECTION ───────────────────────────────────── */ .news-section { background-color: var(--bg-news); padding: var(--space-4xl) clamp(1.5rem, 5vw, 4rem); } .news-inner { max-width: var(--max-width); margin-inline: auto; } .news-header { margin-bottom: var(--space-3xl); } .news-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1.25rem; align-items: start; } .news-card { background-color: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-xl); padding: clamp(1.5rem, 2.5vw, 2rem); } .news-card-featured { background-color: var(--clr-text); border-color: transparent; } .news-card-tag { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-accent-2); margin-bottom: var(--space-md); } .news-card-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; margin-bottom: var(--space-md); color: var(--clr-text); line-height: 1.2; } .news-card-featured .news-card-title { color: var(--clr-text-inv); } .news-card-text { font-size: 0.9375rem; color: var(--clr-text-muted); line-height: 1.65; margin-bottom: var(--space-md); } .news-card-featured .news-card-text { color: var(--clr-text-on-dark-md); } .news-card-featured .news-card-text strong { color: var(--clr-text-inv); } .news-closed-dates { margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); } .news-closed-dates strong { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-text-on-dark-sm); margin-bottom: var(--space-sm); } .news-closed-dates ul { display: flex; flex-direction: column; gap: 4px; } .news-closed-dates li { font-size: 0.875rem; color: var(--clr-text-on-dark-md); } .news-event-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-sm); } .news-event-list li { display: flex; align-items: baseline; gap: var(--space-sm); font-size: 0.9rem; color: var(--clr-text-muted); } .event-date { font-size: 0.75rem; font-weight: 500; color: var(--clr-accent); white-space: nowrap; min-width: 80px; } .news-card-link { display: inline-block; margin-top: var(--space-lg); font-size: 0.875rem; font-weight: 500; color: var(--clr-accent); transition: color var(--dur-fast); } .news-card-link:hover { color: var(--clr-text); } @media (max-width: 1024px) { .news-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } } /* ─── CONTACT SECTION ────────────────────────────────────────────── */ .contact-section { background-color: var(--bg-contact); padding: var(--space-4xl) clamp(1.5rem, 5vw, 4rem); position: relative; } .contact-inner { max-width: var(--max-width); margin-inline: auto; position: relative; z-index: 1; } .contact-header { max-width: 560px; margin-bottom: var(--space-3xl); } .contact-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 2rem; align-items: start; } .contact-col-title { font-family: var(--font-label); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-text-inv-muted); margin-bottom: var(--space-lg); } .contact-address p { margin-bottom: var(--space-md); } .contact-name { font-family: var(--font-heading); font-size: 1.125rem; color: var(--clr-text-inv); line-height: 1.4; } .contact-link { display: inline-flex; align-items: flex-start; gap: var(--space-sm); font-size: 0.9375rem; color: var(--clr-text-on-dark-md); line-height: 1.5; transition: color var(--dur-fast); } .contact-link:hover { color: var(--clr-text-inv); } .contact-link svg { flex-shrink: 0; margin-top: 3px; } .contact-link-map { color: var(--clr-text-on-dark-md); } .contact-facebook { display: inline-flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-sm); font-size: 0.875rem; font-weight: 500; color: var(--clr-accent-2); transition: opacity var(--dur-fast); } .contact-facebook:hover { opacity: 0.8; } .opening-hours { display: flex; flex-direction: column; gap: var(--space-xl); } .hours-block h5 { font-family: var(--font-label); font-size: 0.8125rem; font-weight: 500; color: var(--clr-text-inv-muted); margin-bottom: var(--space-md); letter-spacing: 0.04em; } .hours-list { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs) var(--space-lg); } .hours-list dt { font-size: 0.875rem; color: var(--clr-text-inv-muted); } .hours-list dd { font-size: 0.875rem; color: var(--clr-text-on-dark-md); font-weight: 500; } .hours-note { font-size: 0.8125rem; color: var(--clr-text-on-dark-sm); margin-top: var(--space-sm); line-height: 1.5; } .contact-map-frame { width: 100%; height: var(--contact-map-height, 260px); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--clr-hero-border); margin-bottom: var(--space-md); } .contact-directions-link { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: 0.875rem; font-weight: 500; color: var(--clr-accent-2); transition: opacity var(--dur-fast); } .contact-directions-link:hover { opacity: 0.8; } /* Footer hours list */ .footer-hours-list { display: grid; grid-template-columns: auto 1fr; gap: 3px var(--space-md); margin-bottom: var(--space-sm); } .footer-hours-list dt { font-size: 0.8125rem; color: var(--clr-text-on-dark-sm); } .footer-hours-list dd { font-size: 0.8125rem; color: var(--clr-text-on-dark-md); } .footer-hours-note { font-size: 0.75rem; color: var(--clr-text-on-dark-sm); line-height: 1.5; } @media (max-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; } .contact-map-col { grid-column: 1 / 3; } } @media (max-width: 600px) { .contact-grid { grid-template-columns: 1fr; } .contact-map-col { grid-column: 1; } } /* ================================================================= MOBILE RESPONSIVE – Comprehensive fixes iPhone SE (375px) · iPhone (390px) · Android · iPad ================================================================= */ /* ─── SAFE AREA (iPhone Notch / Dynamic Island) ──────────────────── */ :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); } .site-footer .footer-bottom-inner { padding-bottom: calc(var(--space-lg) + var(--safe-bottom)); } /* ─── TOUCH TARGETS ≥ 44×44px ────────────────────────────────────── */ /* Hinweis: KEIN "display" hier setzen – das würde den Burger-Button global (auch auf Desktop) sichtbar machen und die Desktop-Navigation zerstören. Sichtbarkeit wird ausschließlich über die Media Query "@media (max-width: 768px)" weiter oben gesteuert. */ .nav-burger { width: 44px; height: 44px; padding: 10px; flex-direction: column; justify-content: center; } .footer-social a { width: 44px; height: 44px; } .back-to-top { width: 48px; height: 48px; bottom: calc(var(--space-lg) + var(--safe-bottom)); right: calc(var(--space-lg) + var(--safe-right)); } /* Touch-Target: Tap-Fläche der Social-Links */ /* ─── PREVENT HORIZONTAL OVERFLOW ───────────────────────────────── */ html, body { overflow-x: hidden; } .tile-wines-visual { overflow: hidden; } .about-image-frame { overflow: hidden; } .bento-tile { overflow: hidden; } /* ─── HERO – iPhone SE & kleine Screens ─────────────────────────── */ @media (max-width: 390px) { .hero-title-line { font-size: clamp(2.75rem, 16vw, 3.5rem); } .hero-title-accent { font-size: clamp(1.75rem, 10vw, 2.25rem); } .hero-subtitle { font-size: 0.9375rem; } .hero-content { padding-inline: 1.25rem; } } /* ─── NAVIGATION MOBILE ──────────────────────────────────────────── */ @media (max-width: 768px) { /* Kein Scrolling hinter offenem Menü */ body.nav-open { overflow: hidden; } /* Logo kleiner auf Mobilgeräten */ .logo-main { font-size: 1.1rem; } .logo-sub { font-size: 0.6rem; } /* Mehr Innenabstand für den mobilen Header */ .nav-inner { padding-inline: max(1rem, var(--safe-left)); } } /* ─── BENTO GRID – Tablet (769–1024px) ──────────────────────────── */ @media (max-width: 1024px) { .bento-section { padding-inline: clamp(1rem, 4vw, 2rem); } .bento-grid { gap: 1rem; } .bento-tile { padding: 1.5rem; } } /* ─── BENTO GRID – Mobile ────────────────────────────────────────── */ @media (max-width: 768px) { .bento-grid { grid-template-columns: 1fr; gap: 0.875rem; } .bento-featured, .bento-experience, .bento-wines, .bento-rooms, .bento-award { grid-column: 1; grid-row: auto; } .bento-featured { min-height: 320px; } .bento-award { flex-direction: row; align-items: center; gap: var(--space-lg); } .award-icon { width: 44px; height: 44px; margin-bottom: 0; flex-shrink: 0; } .tile-title { font-size: 1.5rem; } .tile-text { font-size: 0.9375rem; } } /* ─── ABOUT SECTION – Tablet ─────────────────────────────────────── */ @media (max-width: 1024px) { .about-section { padding-inline: clamp(1rem, 4vw, 2rem); } } /* ─── ABOUT SECTION – Mobile ─────────────────────────────────────── */ @media (max-width: 768px) { .about-inner { gap: var(--space-2xl); } .about-image-frame { aspect-ratio: 3/2; max-height: 280px; } .about-lead { font-size: 1rem; } .generation-item { padding-left: var(--space-md); } } /* ─── EXPERIENCE SECTION – Mobile ───────────────────────────────── */ @media (max-width: 768px) { .experience-section { padding-inline: 1.25rem; } .experience-grid { gap: 0.875rem; } .exp-step { padding: 1.25rem; } .exp-step-number { font-size: 2.5rem; top: var(--space-md); right: var(--space-md); } .experience-cta { padding: 1.5rem; gap: var(--space-lg); } .exp-price { font-size: 1.5rem; } } /* ─── ROOMS – Mobile ─────────────────────────────────────────────── */ @media (max-width: 768px) { .rooms-section { padding-inline: 1.25rem; } .rooms-cta p { font-size: 0.9375rem; } } /* ─── WINES – Mobile ─────────────────────────────────────────────── */ @media (max-width: 768px) { .wines-section { padding-inline: 1.25rem; } .wine-card { padding: 1.25rem; } } /* ─── NEWS – Mobile ──────────────────────────────────────────────── */ @media (max-width: 768px) { .news-section { padding-inline: 1.25rem; } .news-card { padding: 1.25rem; } .news-closed-dates ul li { font-size: 0.9375rem; } } /* ─── CONTACT – Mobile ───────────────────────────────────────────── */ @media (max-width: 768px) { .contact-section { padding-inline: 1.25rem; } .contact-map-frame { height: 220px; } } /* ─── GALLERY – Mobile ───────────────────────────────────────────── */ @media (max-width: 768px) { .gallery-section { padding-inline: 1.25rem; } .gallery-grid { gap: 0.5rem; } } /* ─── FOOTER – Mobile ────────────────────────────────────────────── */ @media (max-width: 768px) { .footer-inner { padding-inline: 1.25rem; padding-top: var(--space-2xl); } .footer-bottom-inner { padding-inline: 1.25rem; flex-direction: column; align-items: flex-start; gap: var(--space-sm); } .footer-col a, .footer-col p, .footer-col address p { font-size: 1rem; /* mind. 16px auf Mobile */ } .footer-col li { margin-bottom: var(--space-md); } } /* ─── LEGAL SEITEN – Mobile ──────────────────────────────────────── */ @media (max-width: 768px) { .legal-page { padding-inline: 0; } .legal-inner { padding-inline: 1.25rem; } } /* ─── SCHRIFTGRÖSSEN: mind. 16px auf Mobile ───────────────────────── */ @media (max-width: 768px) { /* Verhindert automatisches Zoomen in Inputs (iOS) */ input, select, textarea { font-size: 16px !important; } /* Lesbarkkeit: kritische Textelemente nicht unter 15px */ .tile-text, .about-lead, .rooms-intro, .wines-intro, .experience-subtitle, .news-card-text, .contact-address p, .room-features li { font-size: 0.9375rem; /* 15px */ } .tile-checklist li { font-size: 0.9375rem; } .exp-step p { font-size: 0.9375rem; } } /* ─── SECTION PADDING – alle Sektionen auf Mobile ───────────────── */ @media (max-width: 768px) { .bento-section, .about-section, .experience-section, .rooms-section, .wines-section, .news-section, .contact-section, .gallery-section, .contact-section { padding-top: clamp(3rem, 10vw, 4rem); padding-bottom: clamp(3rem, 10vw, 4rem); } .section-title { margin-bottom: var(--space-xl); } } /* ─── CONTENT-SEITEN – Mobile ────────────────────────────────────── */ @media (max-width: 768px) { .content-wrap { padding-inline: 1.25rem; } .page-header { padding-inline: 1.25rem; } } /* ─── iPad (769–1024px) Feintuning ──────────────────────────────── */ @media (min-width: 769px) and (max-width: 1024px) { .bento-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } .bento-featured { grid-column: 1 / 3; grid-row: 1; min-height: 300px; } .news-grid { grid-template-columns: 1fr 1fr; } .wines-grid { grid-template-columns: 1fr 1fr; } .contact-grid { grid-template-columns: 1fr 1fr; } .contact-map-col { grid-column: 1 / 3; } .rooms-grid { grid-template-columns: 1fr 1fr; } } /* ─── LANDSCAPE PHONE ────────────────────────────────────────────── */ @media (max-width: 768px) and (orientation: landscape) { .hero-section { min-height: 100svh; } .hero-title-line { font-size: clamp(2.5rem, 8vw, 4rem); } .hero-title-accent { font-size: clamp(1.75rem, 5.5vw, 2.75rem); } .hero-content { padding-top: var(--space-lg); } } /* ─── HOVER nur auf Geräten die es unterstützen ─────────────────── */ @media (hover: none) { /* Kein Hover-Lift auf Touch-Geräten (verhindert "hängenbleibende" States) */ .bento-tile:hover, .room-card:hover, .wine-card:hover, .news-card:hover, .gallery-item:hover img { transform: none; box-shadow: none; } .bento-tile:hover { border-color: var(--clr-border); } } /* ─── REDUZIERTE ANIMATION (prefers-reduced-motion) ────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .scroll-line { animation: none; } .eyebrow-dot { animation: none; } .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } } /* ================================================================= COOKIE CONSENT BANNER ================================================================= */ #cc-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background-color: var(--bg-nav); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 0; /* Einblend-Animation */ transform: translateY(100%); transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1); padding-bottom: env(safe-area-inset-bottom, 0); } #cc-banner.cc-visible { transform: translateY(0); } #cc-banner.cc-hidden { transform: translateY(100%); pointer-events: none; } .cc-inner { max-width: 1280px; margin-inline: auto; padding: 1.25rem clamp(1.25rem, 5vw, 4rem); display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .cc-text { flex: 1; min-width: 0; } .cc-title { font-family: var(--font-sans, sans-serif); font-size: 0.8125rem; font-weight: 600; color: var(--clr-text-inv); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.375rem; } .cc-desc { font-family: var(--font-sans, sans-serif); font-size: 0.875rem; color: var(--clr-text-inv-muted); line-height: 1.55; margin: 0; } .cc-desc strong { color: var(--clr-text-on-dark-md); font-weight: 500; } .cc-link { color: var(--clr-accent-2, #c8a96e); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; margin-left: 0.25rem; } .cc-link:hover { opacity: 0.8; } .cc-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; flex-wrap: wrap; } .cc-btn { font-family: var(--font-sans, sans-serif); font-size: 0.875rem; font-weight: 500; padding: 0.625rem 1.25rem; border-radius: 100px; cursor: pointer; white-space: nowrap; transition: background-color 150ms, border-color 150ms, color 150ms, transform 150ms; min-height: 44px; border: none; } .cc-btn-outline { background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); color: var(--clr-text-on-dark-md); } .cc-btn-outline:hover { border-color: var(--clr-text-inv-muted); color: var(--clr-text-inv); } .cc-btn-primary { background-color: var(--clr-accent-2, #c8a96e); color: var(--clr-text); } .cc-btn-primary:hover { background-color: var(--clr-accent-2); transform: translateY(-1px); } /* ─── Karten-Placeholder ──────────────────────────────────────────── */ .cc-map-placeholder { width: 100%; height: 100%; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.875rem; background-color: rgba(255, 255, 255, 0.03); border: 1px solid var(--clr-hero-border, rgba(255,255,255,0.08)); border-radius: var(--radius-lg, 16px); padding: 2rem; text-align: center; } .cc-map-icon { color: var(--clr-text-on-dark-sm); width: 40px; height: 40px; } .cc-map-address { font-family: var(--font-serif, serif); font-size: 1rem; color: var(--clr-text-on-dark-md); line-height: 1.5; } .cc-map-note { font-size: 0.75rem; color: var(--clr-text-on-dark-sm); line-height: 1.5; max-width: 280px; } .cc-map-btn { font-family: var(--font-sans, sans-serif); font-size: 0.8125rem; font-weight: 500; padding: 0.5rem 1.125rem; border-radius: 100px; background-color: rgba(var(--clr-gold-rgb), 0.15); border: 1px solid rgba(var(--clr-gold-rgb), 0.3); color: var(--clr-accent-2, #c8a96e); cursor: pointer; transition: background-color 150ms, border-color 150ms; min-height: 44px; } .cc-map-btn:hover { background-color: rgba(var(--clr-gold-rgb), 0.25); border-color: rgba(var(--clr-gold-rgb), 0.5); } /* Widerruf-Link auf Datenschutzseite */ #cc-revoke { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--clr-accent, #8b3a3a); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; } #cc-revoke:hover { opacity: 0.75; } @media (max-width: 600px) { .cc-inner { flex-direction: column; align-items: flex-start; gap: 1rem; } .cc-actions { width: 100%; } .cc-btn { flex: 1; justify-content: center; text-align: center; } } /* ── Scroll-Offset für sticky Header (Fallback wenn JS nicht greift) */ section[id], div[id].bento-tile { scroll-margin-top: calc(var(--nav-height) + 1rem); } /* ── Joomla mod-custom wrapper: transparent to grid/flex parents ─── */ /* about-inner expects 2 grid children; mod-custom sits in between → display:contents */ .about-inner > .mod-custom.custom, .bento-tile > .mod-custom.custom, .hero-section > .mod-custom.custom, .footer-col > .mod-custom.custom { display: contents; } /* ─── LEGAL PAGES (Impressum, Datenschutz) ──────────────────────── */ .site-main { padding-top: calc(var(--nav-height) + var(--space-3xl)); padding-bottom: var(--space-4xl); background-color: var(--clr-bg); min-height: 60vh; } .legal-inner { max-width: 760px; margin-inline: auto; padding-inline: clamp(1.5rem, 5vw, 4rem); } .legal-title { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 300; margin-bottom: var(--space-3xl); color: var(--clr-text); } .legal-section { margin-bottom: var(--space-2xl); } .legal-section h2 { font-family: var(--font-label); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-accent); margin-bottom: var(--space-lg); } .legal-section h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 400; color: var(--clr-text); margin-bottom: var(--space-md); margin-top: var(--space-lg); } .legal-section p, .legal-section li { font-size: 0.9375rem; color: var(--clr-text-muted); line-height: 1.7; margin-bottom: var(--space-sm); } .legal-section ul { padding-left: 1.25rem; list-style: disc; } .legal-section a { color: var(--clr-accent); text-decoration: underline; text-underline-offset: 3px; } .legal-section a:hover { color: var(--clr-text); } .back-link { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: 0.875rem; color: var(--clr-text-muted); margin-bottom: var(--space-2xl); transition: color var(--dur-fast); } .back-link:hover { color: var(--clr-text); } hr.legal-divider { border: none; border-top: 1px solid var(--clr-border); margin: var(--space-2xl) 0; } .pdf-links { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); } .pdf-link { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 0.75rem 1.25rem; border: 1px solid var(--clr-border); border-radius: var(--radius-md); font-size: 0.875rem; color: var(--clr-text-muted); text-decoration: none; transition: border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast); } .pdf-link:hover { border-color: var(--clr-accent-2); color: var(--clr-text); background-color: var(--clr-bg-alt); } .pdf-link svg { flex-shrink: 0; color: var(--clr-accent-2); } .pdf-download-box { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.5rem; border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-bg-alt); margin-bottom: var(--space-2xl); } .pdf-download-box svg { color: var(--clr-accent-2); flex-shrink: 0; margin-top: 2px; } .pdf-download-box p { font-size: 0.875rem; color: var(--clr-text-muted); margin-bottom: 0.4rem; } .pdf-download-box a { color: var(--clr-accent) !important; } #cc-revoke { margin-top: var(--space-sm); padding: 0.5rem 1rem; background: var(--clr-bg-alt); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); font-size: 0.8125rem; color: var(--clr-text-muted); cursor: pointer; transition: border-color var(--dur-fast), color var(--dur-fast); } #cc-revoke:hover { border-color: var(--clr-accent); color: var(--clr-text); } @media (max-width: 600px) { .pdf-download-box { flex-direction: column; } .legal-title { font-size: 2rem; } } /* ─── LEGAL / ARTICLE SUB-PAGES ─────────────────────────────────── */ /* Joomla rendert auf Artikel-Seiten automatisch einen page-header mit dem Artikel-Titel. Das legal-inner HTML hat bereits einen h1, daher wird der Joomla-Titel ausgeblendet. */ .site-main .page-header, .site-main .com-content-article__header, .site-main .item-page > .page-header { display: none; } /* Breadcrumbs auf Unterseiten ausblenden (Navigation genügt) */ .site-main .mod-breadcrumbs__wrapper { display: none; } /* Joomla article wrapper im site-main */ .site-main .item-page, .site-main .com-content-article { max-width: 100%; } /* legal-inner zentriert den Inhalt (760px max) */ .site-main .legal-inner { max-width: 760px; margin-inline: auto; padding-inline: clamp(1.5rem, 5vw, 4rem); } /* ─── DOPPELTE NAVIGATION FIX ────────────────────────────────────── */ /* Falls mehrere Module an Position 'menu' aktiv sind, nur das erste zeigen */ .nav-menu > ul ~ ul, .nav-menu > .mod-menu ~ .mod-menu, .mobile-nav > ul ~ ul { display: none !important; } /* ─── JOOMLA ARTIKEL-SEITEN: UNERWÜNSCHTE ELEMENTE AUSBLENDEN ────── */ /* Metadaten-Box (Details, Kategorie, Veröffentlicht, Zugriffe) */ .site-main dl.article-info, .site-main .article-info, .site-main .com-content-article__details, .site-main .item-hits, .site-main .item-category, .site-main .item-date-created, .site-main .createdby, .site-main .modified, .site-main .content-tags { display: none !important; } /* Artikel-Navigation (Vorheriger/Nächster Beitrag) */ .site-main .pager, .site-main .pager-nav, .site-main nav.pager, .site-main .pagination, .site-main .article-navigation, .site-main ul.pager, .site-main .pager-prev, .site-main .pager-next { display: none !important; } /* Joomla "Drucken / E-Mail / PDF" Icons */ .site-main .icons, .site-main .item-page .icons { display: none !important; }