/*
Theme Name: Goldene Flame
Theme URI: https://goldene-flame.de
Author: Mamo
Description: Eigenstaendiges Theme fuer Goldene Flame – Tuerkischer Imbiss in Bad Honnef. Luxus-Ottoman-Stil in Dunkel und Gold.
Version: 1.1
Requires at least: 5.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: goldene-flame
Tags: restaurant, one-page, dark, gold, custom-colors
*/
/* ============================================================
GOLDENE FLAME — Türkisches Imbiss CSS Framework
Luxus-Ottoman-Stil | Dunkel & Gold
Version 1.0
============================================================
INHALTSVERZEICHNIS:
1. Google Fonts & CSS-Variablen
2. Reset & Basis
3. Typografie (h1–h6, p, span, blockquote)
4. Layout (container, grid, flex)
5. Header & Navigation
6. Hero-Bereich
7. Sections & Trennlinien
8. Menükarten (Cards)
9. Menüliste (Speisekarte-Stil)
10. Badges & Tags
11. Buttons & Links
12. Formulare & Inputs
13. Galerie
14. Testimonials
15. Öffnungszeiten & Info-Box
16. Kontakt & Karte
17. Footer
18. Dekorative Elemente & Ornamente
19. Animationen
20. Utilities & Hilfeklassen
21. Responsive (Tablet & Mobil)
SCHNELLSTART:
Füge diese Zeilen in dein ein:
============================================================ */
/* ============================================================
1. CSS-VARIABLEN & DESIGN-TOKENS
============================================================ */
:root {
/* Farben */
--gold-hell: #f7e07a;
--gold: #d4af37;
--gold-dunkel: #a07828;
--gold-gluehen: #e8c84a;
--gold-matt: #b8962e;
--amber: #ff8c00;
--amber-dunkel: #cc6600;
--schwarz: #080808;
--schwarz-tief: #030303;
--dunkel-1: #111111;
--dunkel-2: #161616;
--dunkel-3: #1e1e1e;
--dunkel-4: #252525;
--dunkel-5: #2e2e2e;
--grau: #555555;
--grau-hell: #888888;
--weiss: #f5f0e8;
--weiss-warm: #ede8dc;
--rot-akzent: #8b1a1a;
/* Typografie */
--font-zier: 'Cinzel Decorative', serif;
--font-haupt: 'Cinzel', serif;
--font-text: 'Raleway', sans-serif;
--font-arabisch: 'Amiri', serif;
/* Schriftgrößen */
--fs-xs: clamp(0.70rem, 0.65rem + 0.20vw, 0.80rem);
--fs-sm: clamp(0.80rem, 0.75rem + 0.25vw, 0.95rem);
--fs-base: clamp(0.95rem, 0.85rem + 0.50vw, 1.10rem);
--fs-md: clamp(1.05rem, 0.95rem + 0.50vw, 1.25rem);
--fs-lg: clamp(1.15rem, 1.00rem + 0.75vw, 1.45rem);
--fs-xl: clamp(1.30rem, 1.10rem + 1.00vw, 1.75rem);
--fs-2xl: clamp(1.60rem, 1.20rem + 2.00vw, 2.40rem);
--fs-3xl: clamp(2.00rem, 1.40rem + 3.00vw, 3.20rem);
--fs-4xl: clamp(2.40rem, 1.60rem + 4.00vw, 4.00rem);
--fs-5xl: clamp(2.80rem, 1.80rem + 5.00vw, 5.00rem);
--fs-hero: clamp(2.8rem, 8vw, 6rem);
/* Abstände */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 5rem;
--space-4xl: 8rem;
/* Border-Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-xl: 32px;
--radius-pill: 999px;
/* Schatten */
--shadow-gold: 0 0 20px rgba(212, 175, 55, 0.35);
--shadow-glow: 0 0 40px rgba(212, 175, 55, 0.5), 0 0 80px rgba(212, 175, 55, 0.2);
--shadow-karte: 0 8px 32px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.5);
--shadow-text: 2px 2px 12px rgba(0, 0, 0, 0.8);
/* Übergänge */
--transition: all 0.3s ease;
--transition-lang: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
/* Gradient-Definitionen */
--grad-gold: linear-gradient(135deg, #f7e07a 0%, #d4af37 40%, #a07828 100%);
--grad-gold-h: linear-gradient(90deg, #a07828, #d4af37, #f7e07a, #d4af37, #a07828);
--grad-dunkel: linear-gradient(180deg, #111111 0%, #080808 100%);
--grad-overlay: linear-gradient(to bottom, rgba(8,8,8,0.3) 0%, rgba(8,8,8,0.85) 100%);
--grad-karte: linear-gradient(145deg, #1e1e1e, #111111);
/* Muster */
--ornament-linie: 1px solid rgba(212, 175, 55, 0.3);
}
/* ============================================================
2. RESET & BASIS
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
scroll-padding-top: 80px;
}
body {
background-color: var(--schwarz);
color: var(--weiss);
font-family: var(--font-text);
font-weight: 400;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
min-height: 100vh;
/* Subtiles Hintergrundrauschen */
background-image:
radial-gradient(ellipse at 20% 50%, rgba(212,175,55,0.03) 0%, transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(212,175,55,0.04) 0%, transparent 40%);
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--gold);
text-decoration: none;
transition: var(--transition);
}
a:hover {
color: var(--gold-hell);
}
ul, ol {
list-style: none;
}
::selection {
background: rgba(212, 175, 55, 0.35);
color: var(--weiss);
}
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 4px;
border-radius: var(--radius-sm);
}
/* ============================================================
3. TYPOGRAFIE
============================================================ */
/* --- Überschriften --- */
h1, .h1 {
font-family: var(--font-zier);
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 900;
line-height: 1.15;
letter-spacing: 0.05em;
background: var(--grad-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: none;
filter: drop-shadow(0 0 18px rgba(212,175,55,0.45));
}
h2, .h2 {
font-family: var(--font-haupt);
font-size: clamp(1.5rem, 3.5vw, 2.5rem);
font-weight: 700;
letter-spacing: 0.08em;
color: var(--gold);
text-transform: uppercase;
line-height: 1.25;
}
h3, .h3 {
font-family: var(--font-haupt);
font-size: clamp(1.1rem, 2vw, 1.5rem);
font-weight: 600;
letter-spacing: 0.06em;
color: var(--gold-hell);
line-height: 1.3;
}
h4, .h4 {
font-family: var(--font-haupt);
font-size: var(--fs-lg);
font-weight: 600;
color: var(--gold-matt);
letter-spacing: 0.04em;
}
h5, .h5 {
font-family: var(--font-text);
font-size: var(--fs-md);
font-weight: 600;
color: var(--weiss-warm);
letter-spacing: 0.03em;
text-transform: uppercase;
}
h6, .h6 {
font-family: var(--font-text);
font-size: var(--fs-base);
font-weight: 500;
color: var(--grau-hell);
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* --- Fließtext --- */
p {
font-family: var(--font-text);
font-size: var(--fs-base);
font-weight: 400;
color: var(--weiss-warm);
line-height: 1.8;
max-width: 70ch;
}
p.gross {
font-size: var(--fs-lg);
line-height: 1.7;
color: var(--weiss);
}
p.klein {
font-size: var(--fs-sm);
color: var(--grau-hell);
}
p.zentriert {
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* --- Arabische / Osmanische Schrift --- */
.arabisch {
font-family: var(--font-arabisch);
font-size: 1.4em;
color: var(--gold-dunkel);
letter-spacing: 0.02em;
line-height: 1.9;
}
.osmanisch {
font-family: var(--font-arabisch);
font-size: clamp(1.5rem, 4vw, 3rem);
color: var(--gold);
text-align: center;
letter-spacing: 0.05em;
}
/* --- Spezielle Textstile --- */
.gold-text {
background: var(--grad-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 8px rgba(212,175,55,0.3));
}
.glow-text {
color: var(--gold);
text-shadow:
0 0 10px rgba(212,175,55,0.8),
0 0 30px rgba(212,175,55,0.5),
0 0 60px rgba(212,175,55,0.3);
}
.untertitel {
font-family: var(--font-text);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--gold-matt);
letter-spacing: 0.25em;
text-transform: uppercase;
display: block;
margin-bottom: var(--space-md);
}
.preis {
font-family: var(--font-haupt);
font-size: var(--fs-xl);
font-weight: 700;
color: var(--gold);
letter-spacing: 0.02em;
}
.preis-klein {
font-family: var(--font-haupt);
font-size: var(--fs-lg);
font-weight: 600;
color: var(--gold-matt);
}
/* --- Blockquote --- */
blockquote {
position: relative;
border-left: 3px solid var(--gold);
padding: var(--space-lg) var(--space-xl);
margin: var(--space-xl) 0;
background: linear-gradient(90deg, rgba(212,175,55,0.08), transparent);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
blockquote p {
font-family: var(--font-arabisch);
font-style: italic;
font-size: var(--fs-lg);
color: var(--weiss);
max-width: none;
}
blockquote cite {
display: block;
margin-top: var(--space-md);
font-size: var(--fs-sm);
color: var(--gold-matt);
letter-spacing: 0.1em;
text-transform: uppercase;
}
blockquote::before {
content: '\201E';
position: absolute;
top: -0.3em;
left: 0.4em;
font-size: 5rem;
color: rgba(212,175,55,0.2);
font-family: var(--font-arabisch);
line-height: 1;
}
/* ============================================================
4. LAYOUT
============================================================ */
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--space-xl);
}
.container-sm {
width: 100%;
max-width: 860px;
margin: 0 auto;
padding: 0 var(--space-xl);
}
.container-xl {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 var(--space-xl);
}
/* --- Flex-Layouts --- */
.flex {
display: flex;
}
.flex-mitte {
display: flex;
align-items: center;
justify-content: center;
}
.flex-zwischen {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-start {
display: flex;
align-items: flex-start;
}
.flex-spalte {
display: flex;
flex-direction: column;
}
.flex-wrap {
display: flex;
flex-wrap: wrap;
gap: var(--space-lg);
}
.luecke-sm { gap: var(--space-sm); }
.luecke-md { gap: var(--space-md); }
.luecke-lg { gap: var(--space-lg); }
.luecke-xl { gap: var(--space-xl); }
.luecke-2xl { gap: var(--space-2xl); }
/* --- Grid-Layouts --- */
.grid {
display: grid;
gap: var(--space-xl);
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-xl);
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
}
.grid-auto {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-xl);
}
.grid-auto-klein {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-lg);
}
/* --- Sections --- */
section {
padding: var(--space-4xl) 0;
position: relative;
}
.section-dunkel {
background-color: var(--dunkel-1);
}
.section-mittel {
background-color: var(--dunkel-2);
}
.section-hell {
background-color: var(--dunkel-3);
}
.section-gold {
background: linear-gradient(135deg, rgba(212,175,55,0.08) 0%, rgba(160,120,40,0.05) 100%);
border-top: var(--ornament-linie);
border-bottom: var(--ornament-linie);
}
.section-kopf {
text-align: center;
margin-bottom: var(--space-3xl);
}
.section-kopf h2 {
margin-bottom: var(--space-md);
}
.section-kopf p {
margin: 0 auto;
}
/* ============================================================
5. HEADER & NAVIGATION
============================================================ */
header, .header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
height: 75px;
display: flex;
align-items: center;
background: rgba(8, 8, 8, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(212, 175, 55, 0.18);
transition: var(--transition-lang);
}
header.gescrollt, .header.gescrollt {
background: rgba(5, 5, 5, 0.98);
border-bottom-color: rgba(212, 175, 55, 0.4);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(212,175,55,0.2);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--space-xl);
}
/* --- Logo --- */
.logo {
display: flex;
flex-direction: column;
line-height: 1;
text-decoration: none;
}
.logo-name {
font-family: var(--font-zier);
font-size: 1.35rem;
font-weight: 900;
background: var(--grad-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 6px rgba(212,175,55,0.4));
letter-spacing: 0.06em;
white-space: nowrap;
}
.logo-tagline {
font-family: var(--font-text);
font-size: 0.6rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold-dunkel);
margin-top: 2px;
}
.logo-flamme {
font-size: 1.8rem;
margin-right: var(--space-sm);
display: inline-block;
color: #ffb347; /* goldene Grundfarbe */
text-shadow: 0 0 10px #ffb347, 0 0 20px #ff9800; /* sanfter Halo */
animation: flamme-gluehen 2.5s ease-in-out infinite alternate,
flamme-flackern 3s ease-in-out infinite alternate;
transform-origin: center bottom; /* Rotiert wie echte Flamme */
filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.9)) sepia(1) saturate(3) hue-rotate(5deg) brightness(1.1);
}
@keyframes flamme-gluehen {
0% {
transform: scale(1) translateY(0px) rotate(0deg);
text-shadow: 0 0 8px #ffb347, 0 0 16px #ff9800;
}
50% {
transform: scale(1.05) translateY(-2px) rotate(1deg);
text-shadow: 0 0 12px #ffc107, 0 0 24px #ff8c00;
}
100% {
transform: scale(1) translateY(0px) rotate(-1deg);
text-shadow: 0 0 8px #ffb347, 0 0 16px #ff9800;
}
}
@keyframes flamme-flackern {
0% { transform: rotate(0deg); }
25% { transform: rotate(0.5deg); }
50% { transform: rotate(-0.5deg); }
75% { transform: rotate(0.3deg); }
100% { transform: rotate(-0.3deg); }
}
/* --- Navigation --- */
nav, .nav {
display: flex;
align-items: center;
}
.nav-liste {
display: flex;
align-items: center;
gap: var(--space-xl);
}
.nav-link {
font-family: var(--font-haupt);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--weiss-warm);
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
position: relative;
padding-bottom: 4px;
transition: var(--transition);
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: var(--grad-gold);
transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover,
.nav-link.aktiv {
color: var(--gold);
}
.nav-link:hover::after,
.nav-link.aktiv::after {
width: 100%;
}
/* --- Hamburger (mobil) --- */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: var(--space-sm);
background: none;
border: none;
}
.hamburger span {
display: block;
width: 26px;
height: 2px;
background: var(--gold);
border-radius: 2px;
transition: var(--transition);
}
.hamburger.aktiv span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.aktiv span:nth-child(2) { opacity: 0; }
.hamburger.aktiv span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ============================================================
6. HERO-BEREICH
============================================================ */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
background-color: var(--schwarz-tief);
}
.hero-bild {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: scale(1.05);
transition: transform 8s ease;
}
.hero:hover .hero-bild {
transform: scale(1);
}
.hero-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center bottom, rgba(212,175,55,0.06) 0%, transparent 60%),
linear-gradient(to bottom, rgba(8,8,8,0.5) 0%, rgba(8,8,8,0.75) 60%, rgba(8,8,8,0.95) 100%);
z-index: 1;
}
.hero-inhalt {
position: relative;
z-index: 2;
max-width: 900px;
padding: var(--space-2xl);
animation: einblenden-oben 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-flamme {
font-size: 5rem;
display: block;
margin-bottom: var(--space-lg);
filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.9)) sepia(1) saturate(3) hue-rotate(5deg) brightness(1.1);
animation: flamme-zuengle 1.8s ease-in-out infinite;
}
.hero h1, .hero .h1 {
font-size: var(--fs-hero);
margin-bottom: var(--space-lg);
line-height: 1.1;
filter: drop-shadow(0 0 30px rgba(212,175,55,0.5));
}
.hero p {
font-size: var(--fs-lg);
color: rgba(245,240,232,0.85);
max-width: 60ch;
margin: 0 auto var(--space-2xl);
}
.hero-aktionen {
display: flex;
gap: var(--space-lg);
justify-content: center;
flex-wrap: wrap;
margin-top: var(--space-xl);
}
.hero-linie {
width: 120px;
height: 1px;
background: var(--grad-gold);
margin: var(--space-xl) auto;
position: relative;
}
.hero-linie::before,
.hero-linie::after {
content: '✦';
position: absolute;
top: 50%;
transform: translateY(-50%);
color: var(--gold);
font-size: 0.65rem;
}
.hero-linie::before { left: -16px; }
.hero-linie::after { right: -16px; }
.scroll-pfeil {
position: absolute;
bottom: var(--space-2xl);
left: 50%;
transform: translateX(-50%);
z-index: 3;
color: var(--gold);
font-size: 1.5rem;
animation: scrollen-pfeil 2s ease-in-out infinite;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.3s;
}
.scroll-pfeil:hover { opacity: 1; }
/* ============================================================
7. SECTIONS & TRENNLINIEN
============================================================ */
/* --- Ornament-Trennlinie --- */
.trennlinie {
display: flex;
align-items: center;
gap: var(--space-md);
margin: var(--space-2xl) 0;
}
.trennlinie::before,
.trennlinie::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.trennlinie-ornament {
color: var(--gold);
font-size: 1rem;
letter-spacing: 0.3em;
white-space: nowrap;
font-family: var(--font-haupt);
}
/* Nur eine Linie ohne Text */
.linie-gold {
border: none;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212,175,55,0.5), transparent);
margin: var(--space-2xl) 0;
}
.linie-gold-stark {
border: none;
height: 1px;
background: var(--grad-gold);
margin: var(--space-xl) 0;
opacity: 0.5;
}
/* --- Statistik-Reihe --- */
.stats-reihe {
display: flex;
gap: var(--space-2xl);
justify-content: center;
flex-wrap: wrap;
padding: var(--space-2xl) 0;
}
.stat-element {
text-align: center;
min-width: 150px;
}
.stat-zahl {
display: block;
font-family: var(--font-zier);
font-size: clamp(2rem, 5vw, 3rem);
background: var(--grad-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: var(--space-xs);
filter: drop-shadow(0 0 10px rgba(212,175,55,0.3));
}
.stat-label {
font-family: var(--font-text);
font-size: var(--fs-xs);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--grau-hell);
}
/* ============================================================
8. MENÜKARTEN (CARDS)
============================================================ */
.karte {
background: var(--grad-karte);
border: 1px solid rgba(212, 175, 55, 0.15);
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition-lang);
box-shadow: var(--shadow-karte);
display: flex;
flex-direction: column;
}
.karte:hover {
border-color: rgba(212, 175, 55, 0.5);
transform: translateY(-6px);
box-shadow: var(--shadow-karte), var(--shadow-gold);
}
.karte-bild {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.karte-bild img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.karte:hover .karte-bild img {
transform: scale(1.08);
}
.karte-bild-overlay {
position: absolute;
inset: 0;
background: var(--grad-overlay);
opacity: 0;
transition: opacity 0.4s;
}
.karte:hover .karte-bild-overlay {
opacity: 1;
}
.karte-inhalt {
padding: var(--space-lg) var(--space-xl);
flex: 1;
display: flex;
flex-direction: column;
}
.karte-inhalt h3 {
margin-bottom: var(--space-sm);
}
.karte-inhalt p {
color: var(--grau-hell);
font-size: var(--fs-sm);
flex: 1;
max-width: none;
margin-bottom: var(--space-lg);
}
.karte-fuss {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md) var(--space-xl) var(--space-lg);
border-top: var(--ornament-linie);
}
/* Variante: kleine Karte */
.karte-klein {
background: var(--dunkel-3);
border: 1px solid rgba(212, 175, 55, 0.1);
border-radius: var(--radius-md);
padding: var(--space-lg);
transition: var(--transition);
box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.karte-klein:hover {
border-color: rgba(212, 175, 55, 0.4);
background: var(--dunkel-4);
transform: translateY(-3px);
}
/* Variante: horizontale Karte */
.karte-quer {
display: flex;
flex-direction: row;
gap: var(--space-lg);
background: var(--grad-karte);
border: 1px solid rgba(212, 175, 55, 0.15);
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition-lang);
box-shadow: var(--shadow-karte);
}
.karte-quer:hover {
border-color: rgba(212, 175, 55, 0.4);
box-shadow: var(--shadow-karte), var(--shadow-gold);
}
.karte-quer .karte-bild {
flex-shrink: 0;
width: 180px;
aspect-ratio: auto;
}
.karte-quer .karte-inhalt {
padding: var(--space-lg);
}
/* Variante: Feature-Karte mit Icon */
.karte-feature {
background: var(--dunkel-3);
border: 1px solid rgba(212, 175, 55, 0.12);
border-radius: var(--radius-lg);
padding: var(--space-2xl) var(--space-xl);
text-align: center;
transition: var(--transition-lang);
position: relative;
overflow: hidden;
}
.karte-feature::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--grad-gold);
opacity: 0;
transition: opacity 0.4s;
}
.karte-feature:hover {
border-color: rgba(212, 175, 55, 0.4);
transform: translateY(-6px);
box-shadow: var(--shadow-gold);
}
.karte-feature:hover::before {
opacity: 1;
}
.karte-icon {
font-size: 3rem;
display: block;
margin-bottom: var(--space-lg);
filter: drop-shadow(0 0 10px rgba(212,175,55,0.5));
}
/* ============================================================
9. MENÜLISTE (SPEISEKARTE-STIL)
============================================================ */
.speisekarte {
width: 100%;
}
.speisekarte-kategorie {
margin-bottom: var(--space-3xl);
}
.speisekarte-kategorie-titel {
font-family: var(--font-zier);
font-size: clamp(1.4rem, 0.9rem + 3vw, 2.4rem);
word-break: break-word;
overflow-wrap: anywhere;
hyphens: auto;
-webkit-hyphens: auto;
max-width: 100%;
background: var(--grad-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-align: center;
margin-bottom: var(--space-xl);
padding-bottom: var(--space-lg);
position: relative;
}
.speisekarte-kategorie-titel::after {
content: '';
display: block;
width: 80px;
height: 2px;
background: var(--grad-gold);
margin: var(--space-md) auto 0;
opacity: 0.6;
}
.gericht {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-lg) 0;
border-bottom: 1px dotted rgba(212, 175, 55, 0.18);
transition: background 0.3s;
}
.gericht:last-child {
border-bottom: none;
}
.gericht:hover {
padding-left: var(--space-sm);
}
.gericht-info {
flex: 1;
}
.gericht-name {
font-family: var(--font-haupt);
font-size: var(--fs-md);
font-weight: 600;
color: var(--weiss);
margin-bottom: var(--space-xs);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.gericht-beschreibung {
font-size: var(--fs-sm);
color: var(--grau-hell);
line-height: 1.5;
max-width: none;
}
.gericht-preis {
font-family: var(--font-haupt);
font-size: var(--fs-lg);
font-weight: 700;
color: var(--gold);
white-space: nowrap;
flex-shrink: 0;
align-self: flex-start;
padding-top: 2px;
}
.gericht-linie {
flex: 1;
height: 1px;
background: repeating-linear-gradient(90deg, rgba(212,175,55,0.25) 0, rgba(212,175,55,0.25) 3px, transparent 3px, transparent 8px);
margin: 0 var(--space-md);
align-self: center;
min-width: 20px;
}
/* ============================================================
10. BADGES & TAGS
============================================================ */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: 4px 12px;
border-radius: var(--radius-pill);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
font-family: var(--font-text);
}
.badge-gold {
background: rgba(212, 175, 55, 0.15);
color: var(--gold);
border: 1px solid rgba(212, 175, 55, 0.4);
}
.badge-rot {
background: rgba(139, 26, 26, 0.25);
color: #f87171;
border: 1px solid rgba(139,26,26,0.5);
}
.badge-gruen {
background: rgba(34, 100, 50, 0.25);
color: #4ade80;
border: 1px solid rgba(34,100,50,0.5);
}
.badge-neu {
background: var(--grad-gold);
color: var(--schwarz);
font-weight: 800;
}
.badge-scharf {
background: rgba(200,50,0,0.2);
color: #f97316;
border: 1px solid rgba(200,50,0,0.4);
}
.tag {
display: inline-block;
padding: 3px 10px;
background: var(--dunkel-4);
border: 1px solid rgba(212, 175, 55, 0.2);
border-radius: var(--radius-sm);
font-size: var(--fs-xs);
color: var(--grau-hell);
font-family: var(--font-text);
letter-spacing: 0.05em;
}
/* ============================================================
11. BUTTONS & LINKS
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: 0.75em 2em;
border-radius: var(--radius-pill);
font-family: var(--font-haupt);
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
border: none;
transition: var(--transition-lang);
position: relative;
overflow: hidden;
white-space: nowrap;
}
.btn::before {
content: '';
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.3s;
background: rgba(255,255,255,0.08);
border-radius: inherit;
}
.btn:hover::before { opacity: 1; }
/* Primär: Gold-Verlauf */
.btn-gold {
background: var(--grad-gold);
color: var(--schwarz);
box-shadow: 0 4px 20px rgba(212,175,55,0.35);
}
.btn-gold:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(212,175,55,0.55);
color: var(--schwarz);
}
.btn-gold:active {
transform: translateY(0);
}
/* Sekundär: Umriss */
.btn-umriss {
background: transparent;
color: var(--gold);
border: 1px solid rgba(212, 175, 55, 0.55);
}
.btn-umriss:hover {
background: rgba(212, 175, 55, 0.1);
border-color: var(--gold);
transform: translateY(-2px);
color: var(--gold-hell);
}
/* Geist: unsichtbarer Hintergrund */
.btn-geist {
background: transparent;
color: var(--weiss-warm);
border: 1px solid rgba(255,255,255,0.2);
}
.btn-geist:hover {
border-color: rgba(212, 175, 55, 0.4);
color: var(--gold);
}
/* Dunkel */
.btn-dunkel {
background: var(--dunkel-4);
color: var(--weiss);
border: 1px solid rgba(212, 175, 55, 0.15);
}
.btn-dunkel:hover {
background: var(--dunkel-5);
border-color: rgba(212, 175, 55, 0.4);
transform: translateY(-2px);
}
/* Größen */
.btn-sm {
padding: 0.5em 1.4em;
font-size: var(--fs-xs);
}
.btn-lg {
padding: 1em 2.5em;
font-size: var(--fs-base);
border-radius: var(--radius-xl);
}
.btn-xl {
padding: 1.1em 3em;
font-size: var(--fs-md);
border-radius: var(--radius-xl);
}
/* Volle Breite */
.btn-block {
width: 100%;
}
/* Link-Stil */
.link-gold {
color: var(--gold);
text-decoration: none;
font-weight: 600;
letter-spacing: 0.05em;
display: inline-flex;
align-items: center;
gap: var(--space-xs);
transition: var(--transition);
position: relative;
}
.link-gold::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: var(--gold);
transition: width 0.3s;
}
.link-gold:hover::after { width: 100%; }
.link-gold:hover { color: var(--gold-hell); gap: var(--space-md); }
/* ============================================================
12. FORMULARE & INPUTS
============================================================ */
.formular {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.formular-gruppe {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.formular-reihe {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
label, .label {
font-family: var(--font-text);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--gold-matt);
letter-spacing: 0.08em;
text-transform: uppercase;
}
input, textarea, select {
width: 100%;
background: var(--dunkel-3);
border: 1px solid rgba(212, 175, 55, 0.22);
border-radius: var(--radius-md);
padding: 0.85em 1.2em;
font-family: var(--font-text);
font-size: var(--fs-base);
color: var(--weiss);
transition: var(--transition);
outline: none;
appearance: none;
}
input::placeholder,
textarea::placeholder {
color: var(--grau);
font-style: italic;
}
input:focus, textarea:focus, select:focus {
border-color: var(--gold-dunkel);
background: var(--dunkel-4);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12), inset 0 0 0 1px rgba(212,175,55,0.1);
}
textarea {
resize: vertical;
min-height: 140px;
}
select {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4af37' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1em center;
background-size: 12px;
padding-right: 2.5em;
}
select option {
background: var(--dunkel-3);
color: var(--weiss);
}
.formular-fehler {
font-size: var(--fs-xs);
color: #f87171;
letter-spacing: 0.03em;
}
.formular-hilfe {
font-size: var(--fs-xs);
color: var(--grau);
}
/* Checkbox & Radio */
.checkbox-gruppe, .radio-gruppe {
display: flex;
align-items: center;
gap: var(--space-sm);
cursor: pointer;
}
.checkbox-gruppe input[type="checkbox"],
.radio-gruppe input[type="radio"] {
width: 18px;
height: 18px;
flex-shrink: 0;
border-radius: 3px;
cursor: pointer;
accent-color: var(--gold);
}
/* ============================================================
13. GALERIE
============================================================ */
.galerie {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-md);
}
.galerie-bild {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--radius-md);
border: 1px solid rgba(212, 175, 55, 0.1);
cursor: pointer;
}
.galerie-bild img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.galerie-bild:hover img {
transform: scale(1.1);
}
.galerie-bild-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(8,8,8,0.85) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.4s;
display: flex;
align-items: flex-end;
padding: var(--space-md);
}
.galerie-bild:hover .galerie-bild-overlay {
opacity: 1;
}
.galerie-bild-overlay span {
font-family: var(--font-haupt);
font-size: var(--fs-sm);
color: var(--gold);
letter-spacing: 0.08em;
}
/* Masonry-Galerie */
.galerie-masonry {
column-count: 3;
column-gap: var(--space-md);
}
.galerie-masonry .galerie-bild {
aspect-ratio: auto;
break-inside: avoid;
margin-bottom: var(--space-md);
}
/* ============================================================
14. TESTIMONIALS
============================================================ */
.bewertungen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-xl);
}
.bewertung {
background: var(--dunkel-3);
border: 1px solid rgba(212, 175, 55, 0.12);
border-radius: var(--radius-lg);
padding: var(--space-xl);
position: relative;
transition: var(--transition);
}
.bewertung:hover {
border-color: rgba(212, 175, 55, 0.35);
transform: translateY(-4px);
}
.bewertung::before {
content: '"';
position: absolute;
top: var(--space-md);
right: var(--space-lg);
font-family: var(--font-arabisch);
font-size: 5rem;
color: rgba(212, 175, 55, 0.15);
line-height: 1;
}
.sterne {
display: flex;
gap: 3px;
margin-bottom: var(--space-md);
}
.stern {
color: var(--gold);
font-size: 0.9rem;
filter: drop-shadow(0 0 3px rgba(212,175,55,0.5));
}
.bewertung-text {
font-family: var(--font-arabisch);
font-style: italic;
font-size: var(--fs-md);
color: var(--weiss-warm);
line-height: 1.7;
margin-bottom: var(--space-lg);
max-width: none;
}
.bewertung-autor {
display: flex;
align-items: center;
gap: var(--space-md);
}
.bewertung-avatar {
width: 46px;
height: 46px;
border-radius: 50%;
border: 2px solid rgba(212, 175, 55, 0.4);
object-fit: cover;
flex-shrink: 0;
}
.bewertung-autor-name {
font-family: var(--font-haupt);
font-size: var(--fs-sm);
color: var(--gold);
font-weight: 600;
display: block;
}
.bewertung-autor-ort {
font-size: var(--fs-xs);
color: var(--grau);
}
/* ============================================================
15. ÖFFNUNGSZEITEN & INFO-BOX
============================================================ */
.oeffnungszeiten {
background: var(--dunkel-3);
border: 1px solid rgba(212, 175, 55, 0.2);
border-radius: var(--radius-lg);
padding: var(--space-2xl);
max-width: 480px;
}
.oeffnungszeiten-titel {
font-family: var(--font-zier);
font-size: var(--fs-xl);
background: var(--grad-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--space-lg);
text-align: center;
}
.oeffnungszeiten-liste {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.oeffnungszeit-eintrag {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-sm) 0;
border-bottom: 1px dotted rgba(212, 175, 55, 0.15);
}
.oeffnungszeit-eintrag:last-child {
border-bottom: none;
}
.oeffnungszeit-tag {
font-family: var(--font-text);
font-size: var(--fs-sm);
color: var(--weiss-warm);
font-weight: 500;
}
.oeffnungszeit-uhr {
font-family: var(--font-haupt);
font-size: var(--fs-sm);
color: var(--gold);
font-weight: 600;
}
.oeffnungszeit-eintrag.heute .oeffnungszeit-tag {
color: var(--gold-hell);
}
.oeffnungszeit-eintrag.heute {
background: rgba(212, 175, 55, 0.06);
padding: var(--space-sm) var(--space-md);
margin: 0 calc(-1 * var(--space-md));
border-radius: var(--radius-sm);
}
.oeffnungszeit-geschlossen {
color: var(--grau) !important;
font-style: italic;
}
/* Info-Box */
.info-box {
background: linear-gradient(135deg, rgba(212,175,55,0.08) 0%, rgba(160,120,40,0.05) 100%);
border: 1px solid rgba(212, 175, 55, 0.25);
border-radius: var(--radius-lg);
padding: var(--space-xl);
display: flex;
gap: var(--space-lg);
align-items: flex-start;
}
.info-box-icon {
font-size: 1.8rem;
flex-shrink: 0;
filter: drop-shadow(0 0 6px rgba(212,175,55,0.5));
}
.info-box-inhalt h4 {
margin-bottom: var(--space-xs);
}
.info-box-inhalt p {
font-size: var(--fs-sm);
color: var(--grau-hell);
max-width: none;
}
/* ============================================================
16. KONTAKT & KARTE
============================================================ */
.kontakt-karte {
background: var(--dunkel-3);
border: 1px solid rgba(212, 175, 55, 0.15);
border-radius: var(--radius-lg);
overflow: hidden;
}
.kontakt-info {
padding: var(--space-2xl);
display: flex;
flex-direction: column;
gap: var(--space-xl);
}
.kontakt-eintrag {
display: flex;
align-items: flex-start;
gap: var(--space-md);
}
.kontakt-eintrag-icon {
font-size: 1.3rem;
flex-shrink: 0;
margin-top: 3px;
filter: drop-shadow(0 0 5px rgba(212,175,55,0.5));
}
.kontakt-eintrag-text {
font-family: var(--font-text);
font-size: var(--fs-base);
color: var(--weiss-warm);
line-height: 1.5;
}
.kontakt-eintrag-label {
font-size: var(--fs-xs);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--gold-dunkel);
font-weight: 600;
display: block;
margin-bottom: 2px;
}
.karte-embed {
width: 100%;
height: 320px;
border: none;
display: block;
filter: grayscale(1) invert(0.9) sepia(0.3);
}
/* ============================================================
17. FOOTER
============================================================ */
footer, .footer {
background: var(--schwarz-tief);
border-top: 1px solid rgba(212, 175, 55, 0.2);
padding: var(--space-3xl) 0 var(--space-xl);
position: relative;
overflow: hidden;
}
footer::before, .footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--grad-gold);
opacity: 0.4;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-3xl);
margin-bottom: var(--space-3xl);
}
.footer-marke p {
margin-top: var(--space-md);
font-size: var(--fs-sm);
color: var(--grau);
max-width: 36ch;
line-height: 1.7;
}
.footer-titel {
font-family: var(--font-haupt);
font-size: var(--fs-sm);
font-weight: 700;
color: var(--gold);
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: var(--space-lg);
}
.footer-links {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.footer-links a {
font-size: var(--fs-sm);
color: var(--grau-hell);
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: var(--space-xs);
}
.footer-links a:hover {
color: var(--gold);
padding-left: var(--space-xs);
}
.footer-links a::before {
content: '›';
color: var(--gold-dunkel);
transition: var(--transition);
}
.footer-unten {
border-top: var(--ornament-linie);
padding-top: var(--space-xl);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-md);
}
.footer-copyright {
font-size: var(--fs-xs);
color: var(--grau);
letter-spacing: 0.05em;
}
/* Soziale Medien */
.social-links {
display: flex;
gap: var(--space-md);
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(212, 175, 55, 0.25);
color: var(--gold-matt);
font-size: 1rem;
text-decoration: none;
transition: var(--transition);
}
.social-link:hover {
border-color: var(--gold);
color: var(--gold);
background: rgba(212, 175, 55, 0.1);
box-shadow: var(--shadow-gold);
transform: translateY(-2px);
}
/* ============================================================
18. DEKORATIVE ELEMENTE & ORNAMENTE
============================================================ */
/* Osmanisches Ornament-Muster als Hintergrund */
.muster-hintergrund {
background-image:
radial-gradient(circle at 1px 1px, rgba(212,175,55,0.06) 1px, transparent 0);
background-size: 32px 32px;
}
/* Geometrisches Gitter */
.gitter-hintergrund {
background-image:
linear-gradient(rgba(212,175,55,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(212,175,55,0.04) 1px, transparent 1px);
background-size: 40px 40px;
}
/* Goldene Eckverzierungen */
.ecke-ornament {
position: relative;
}
.ecke-ornament::before,
.ecke-ornament::after {
content: '';
position: absolute;
width: 30px;
height: 30px;
border-color: rgba(212, 175, 55, 0.45);
border-style: solid;
}
.ecke-ornament::before {
top: 12px;
left: 12px;
border-width: 1px 0 0 1px;
}
.ecke-ornament::after {
bottom: 12px;
right: 12px;
border-width: 0 1px 1px 0;
}
/* Goldener Glüheffekt-Hintergrund */
.gluehen-hintergrund {
background:
radial-gradient(ellipse at 50% 120%, rgba(212,175,55,0.12) 0%, transparent 55%),
var(--dunkel-1);
}
/* Foto-Rahmen mit Gold-Umrandung */
.gold-rahmen {
border: 2px solid rgba(212, 175, 55, 0.4);
border-radius: var(--radius-md);
padding: var(--space-sm);
position: relative;
}
.gold-rahmen::before {
content: '';
position: absolute;
inset: 4px;
border: 1px solid rgba(212, 175, 55, 0.2);
border-radius: calc(var(--radius-md) - 2px);
pointer-events: none;
}
/* Trennband / Ribbon */
.band {
background: var(--grad-gold);
color: var(--schwarz);
font-family: var(--font-haupt);
font-weight: 700;
font-size: var(--fs-sm);
letter-spacing: 0.2em;
text-transform: uppercase;
text-align: center;
padding: var(--space-sm) var(--space-xl);
}
/* Goldene Highlight-Box */
.highlight {
background: linear-gradient(135deg, rgba(212,175,55,0.12), rgba(160,120,40,0.08));
border-left: 3px solid var(--gold);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: var(--space-lg) var(--space-xl);
}
/* Countdown / Nummeriertes Icon */
.nummer-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--grad-gold);
color: var(--schwarz);
font-family: var(--font-haupt);
font-weight: 700;
font-size: var(--fs-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Sticky Bestell-CTA */
.sticky-cta {
position: fixed;
bottom: var(--space-xl);
right: var(--space-xl);
z-index: 500;
animation: einblenden-unten 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.btn-whatsapp {
background-color: #25D366;
color: white;
border-radius: 50%;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
transition: transform 0.2s ease;
}
.btn-whatsapp:hover {
transform: scale(1.1);
}
/* optional dein Pulsieren */
.pulsierend {
animation: pulse 1.8s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
/* ============================================================
19. ANIMATIONEN
============================================================ */
@keyframes flamme-zuengle {
0%, 100% { transform: rotate(-3deg) scale(1); }
25% { transform: rotate(3deg) scale(1.08); }
75% { transform: rotate(-2deg) scale(0.96); }
}
@keyframes einblenden-oben {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes einblenden-unten {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes einblenden {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scrollen-pfeil {
0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
50% { transform: translateX(-50%) translateY(10px); opacity: 1; }
}
@keyframes gold-shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
@keyframes pulsieren {
0%, 100% { transform: scale(1); box-shadow: var(--shadow-gold); }
50% { transform: scale(1.03); box-shadow: var(--shadow-glow); }
}
@keyframes drehen {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Animationsklassen */
.animiert-oben {
animation: einblenden-oben 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animiert-oben.verzoegert-1 { animation-delay: 0.1s; }
.animiert-oben.verzoegert-2 { animation-delay: 0.2s; }
.animiert-oben.verzoegert-3 { animation-delay: 0.3s; }
.animiert-oben.verzoegert-4 { animation-delay: 0.4s; }
.animiert-oben.verzoegert-5 { animation-delay: 0.5s; }
.gold-shimmer-text {
background: var(--grad-gold-h);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gold-shimmer 4s linear infinite;
}
.pulsierend {
animation: pulsieren 3s ease-in-out infinite;
}
/* Kombiniert: hero-flamme + badge-scharf — goldene Flamme */
.flamme-gold {
/* Von .hero-flamme */
font-size: 5rem;
display: block;
filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.9));
animation: flamme-zuengle 1.8s ease-in-out infinite;
/* Von .badge.badge-scharf — aber gold statt orange */
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: 4px 12px;
border-radius: var(--radius-pill);
font-size: 5rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
font-family: var(--font-text);
background: rgba(212, 175, 55, 0.15);
color: var(--gold);
border: 1px solid rgba(212, 175, 55, 0.55);
margin-bottom: var(--space-sm);
filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.9));
animation: flamme-zuengle 1.8s ease-in-out infinite;
}
/* ============================================================
20. UTILITIES & HILFEKLASSEN
============================================================ */
/* Ausrichtung */
.text-links { text-align: left; }
.text-mitte { text-align: center; }
.text-rechts { text-align: right; }
/* Sichtbarkeit */
.versteckt { display: none; }
.unsichtbar { visibility: hidden; }
.sichtbar { display: block; }
/* Abstände — Oben */
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }
/* Abstände — Unten */
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }
/* Innenabstand */
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }
/* Farb-Utilities */
.farbe-gold { color: var(--gold) !important; }
.farbe-weiss { color: var(--weiss) !important; }
.farbe-grau { color: var(--grau-hell) !important; }
.farbe-amber { color: var(--amber) !important; }
/* Hintergrund-Utilities */
.bg-dunkel-1 { background-color: var(--dunkel-1); }
.bg-dunkel-2 { background-color: var(--dunkel-2); }
.bg-dunkel-3 { background-color: var(--dunkel-3); }
.bg-gold { background: var(--grad-gold); }
/* Breite */
.volle-breite { width: 100%; }
.halbe-breite { width: 50%; }
/* Radius */
.rund { border-radius: 50%; }
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.radius-pill { border-radius: var(--radius-pill); }
/* Overflow */
.kein-overflow { overflow: hidden; }
/* Bild-Stile */
.bild-cover {
width: 100%;
height: 100%;
object-fit: cover;
}
.bild-rund {
border-radius: 50%;
border: 3px solid rgba(212, 175, 55, 0.4);
}
/* Trenner */
.platz-oben { padding-top: var(--space-4xl); }
.platz-unten { padding-bottom: var(--space-4xl); }
/* Gold-Unterstreichung */
.gold-unterstrich {
text-decoration: underline;
text-decoration-color: var(--gold);
text-underline-offset: 4px;
text-decoration-thickness: 2px;
}
/* Schatten */
.schatten-gold { box-shadow: var(--shadow-gold); }
.schatten-tief { box-shadow: var(--shadow-karte); }
/* Flex-Helfer */
.flex-1 { flex: 1; }
.self-mitte { align-self: center; }
.items-mitte { align-items: center; }
.justify-mitte { justify-content: center; }
/* Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--dunkel-1);
}
::-webkit-scrollbar-thumb {
background: rgba(212, 175, 55, 0.35);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(212, 175, 55, 0.6);
}
/* ============================================================
21. RESPONSIVE — TABLET & MOBIL
============================================================ */
/* === Tablet (max 1024px) === */
@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
}
.grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.galerie-masonry {
column-count: 2;
}
}
/* === Mobil (max 768px) === */
@media (max-width: 768px) {
:root {
--space-4xl: 4rem;
--space-3xl: 3rem;
}
.container,
.container-sm,
.container-xl {
padding: 0 var(--space-lg);
}
/* Navigation */
.nav-liste {
display: none;
position: fixed;
top: 75px;
left: 0;
right: 0;
bottom: 0;
background: rgba(8, 8, 8, 0.98);
flex-direction: column;
justify-content: center;
gap: var(--space-2xl);
padding: var(--space-2xl);
backdrop-filter: blur(20px);
border-top: var(--ornament-linie);
}
.nav-liste.offen {
display: flex;
animation: einblenden 0.3s ease;
}
.nav-link {
font-size: var(--fs-lg);
text-align: center;
}
.hamburger {
display: flex;
}
/* Grid-Layouts */
.grid-2,
.grid-3,
.grid-4 {
grid-template-columns: 1fr;
}
.karte-quer {
flex-direction: column;
}
.karte-quer .karte-bild {
width: 100%;
aspect-ratio: 16 / 9;
}
/* Formular */
.formular-reihe {
grid-template-columns: 1fr;
}
/* Footer */
.footer-grid {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.footer-unten {
flex-direction: column;
text-align: center;
}
/* Hero */
.hero-aktionen {
flex-direction: column;
align-items: center;
}
/* Galerie */
.galerie-masonry {
column-count: 1;
}
/* Stats */
.stats-reihe {
gap: var(--space-xl);
}
/* Sticky CTA */
.sticky-cta {
bottom: var(--space-lg);
right: var(--space-lg);
}
/* Speisekarte */
.gericht {
flex-wrap: wrap;
}
.gericht-linie {
display: none;
}
.gericht-preis {
width: 100%;
margin-top: var(--space-xs);
}
}
/* === Klein-Mobil (max 480px) === */
@media (max-width: 480px) {
.logo-name {
font-size: 1.1rem;
}
.btn-lg, .btn-xl {
padding: 0.85em 2em;
font-size: var(--fs-base);
}
.hero-flamme {
font-size: 3.5rem;
color: #f9c74f; /* gold */
position: relative;
display: inline-block;
}
.hero-flamme::after {
content: '';
position: absolute;
width: 6px;
height: 6px;
background: gold;
border-radius: 50%;
top: 0;
left: 50%;
animation: flamme-funken 1s infinite ease-out;
}
@keyframes flamme-funken {
0% { transform: translateX(0) translateY(0) scale(0.5); opacity: 1; }
50% { transform: translateX(-5px) translateY(-20px) scale(1); opacity: 0.7; }
100% { transform: translateX(5px) translateY(-40px) scale(0); opacity: 0; }
}
/* Keyframes für Funkenbewegung */
@keyframes spark {
0% {
transform: translate(-50%, 0) scale(1);
opacity: 0.8;
}
30% {
transform: translate(-50%, -10px) scale(1.2);
opacity: 1;
}
60% {
transform: translate(-50%, -20px) scale(1);
opacity: 0.6;
}
100% {
transform: translate(-50%, -30px) scale(0.5);
opacity: 0;
}
}
.oeffnungszeiten {
padding: var(--space-lg);
}
.karte-inhalt {
padding: var(--space-md) var(--space-lg);
}
.karte-fuss {
padding: var(--space-sm) var(--space-lg) var(--space-md);
}
}
/* ============================================================
MOBILE BUGFIXES (angefuegt am 02.05.2026)
============================================================ */
/* Globale Schutzmassnahmen gegen horizontalen Overflow */
html, body {
overflow-x: hidden;
}
img, iframe, video, embed, object {
max-width: 100%;
height: auto;
}
@media (max-width: 768px) {
/* --- Fix 1: "Vollstaendige Speisekarte"-Trennlinie ---
Text in einer Zeile halten, aber kompakt. */
.trennlinie-ornament {
letter-spacing: 0.08em;
font-size: 0.7rem;
white-space: nowrap;
flex-shrink: 0;
padding: 0 var(--space-sm);
}
.trennlinie {
gap: var(--space-xs);
}
.trennlinie::before,
.trennlinie::after {
min-width: 10px;
flex-shrink: 1;
}
/* --- Fix 2: Lange Buttons baendigen --- */
.btn,
.btn-lg,
.btn-xl {
max-width: 100%;
white-space: normal;
word-break: break-word;
text-align: center;
}
/* --- Fix 3: Mobile-Menue-Hintergrund ---
Der backdrop-filter am erzeugt einen Containing-Block,
wodurch die Fixed-Positionierung der Nav-Liste im 75px-Header
gefangen ist. Loesung: backdrop-filter auf Mobil entfernen. */
header,
.header,
header.gescrollt,
.header.gescrollt {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: rgba(8, 8, 8, 0.98);
}
/* Nav-Liste mobil: solider Hintergrund + hoeheres z-index
(kein 100vw -> Safari rechnet Scrollbar-Breite anders) */
.nav-liste {
z-index: 1100;
background: #080808;
width: 100%;
max-width: 100%;
left: 0;
right: 0;
height: calc(100vh - 75px);
height: calc(100dvh - 75px);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
}
/* Extra-klein: Trennlinien-Text noch kleiner */
@media (max-width: 480px) {
.trennlinie-ornament {
font-size: 0.62rem;
letter-spacing: 0.05em;
}
}
/* ============================================================
FLUIDE TYPOGRAFIE & ANTI-CLIP-SCHUTZ (02.05.2026)
============================================================ */
/* Body fuellt mindestens den Display, Inhalt darf scrollen */
html, body {
min-height: 100vh;
min-height: 100dvh; /* dynamic viewport height fuer mobile Browser-Leisten */
}
body {
width: 100%;
margin: 0;
}
/* Headings duerfen umbrechen, nicht abgeschnitten werden */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
max-width: 100%;
}
/* Paragraphen, Listen, Spans: Wortumbruch erlauben */
p, li, span, a, blockquote, cite, dd, dt {
overflow-wrap: break-word;
word-wrap: break-word;
}
/* Container nie kleiner als Inhalt */
.container, .container-sm, .container-xl,
.karte, .karte-inhalt, .gericht-info, .speisekarte-kategorie {
min-width: 0;
word-wrap: break-word;
}
/* Lange Links / Mail-Adressen / URLs */
a, .kontakt-eintrag-text, .gericht-name, .gericht-beschreibung {
overflow-wrap: anywhere;
}
/* Buttons skalieren mit Schriftgroesse, brechen wenn zu lang */
.btn {
font-size: var(--fs-sm);
white-space: normal;
max-width: 100%;
}
/* Inputs/Textarea fluide */
input, textarea, select, button {
font-size: var(--fs-base);
max-width: 100%;
}
/* Hero-Headline: clamp robuster */
.hero h1 {
font-size: clamp(2.2rem, 1.4rem + 5vw, 5.5rem);
line-height: 1.1;
}
/* Section-Kopf: passt sich an */
.section-kopf h2 {
font-size: clamp(1.6rem, 1.2rem + 2.5vw, 2.8rem);
}
/* ============================================================
SAFARI-BUGFIXES (iOS/macOS, 02.05.2026)
Behebt rechten schwarzen Balken & Text-Overflow in Safari.
Greift auf alle Browser, ohne Chrome zu zerstoeren.
============================================================ */
/* 1. Safari skaliert Schrift bei Orientierungswechsel selbst -> verhindern */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
overflow-x: hidden; /* Safari braucht es auf html-Ebene */
width: 100%;
max-width: 100%;
}
body {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
overflow-x: hidden; /* zusaetzlich auf body, doppelt haelt besser */
width: 100%;
max-width: 100%;
position: relative;
}
/* 2. box-sizing auf wirklich ALLES (auch Pseudo-Elements) */
*, *::before, *::after {
box-sizing: border-box;
}
/* 3. 100vw vermeiden -> Safari zaehlt Scrollbar-Breite anders als Chrome
und verursacht so den schwarzen Balken rechts. Wir haben es im
nav-liste-Block bereits ersetzt; defensiv ueberschreiben falls anderer
Code 100vw setzt: */
[style*="width: 100vw"],
[style*="width:100vw"] {
width: 100% !important;
max-width: 100% !important;
}
/* 4. Trennlinie/Ornament: Safari respektiert "flex: 1" auf Pseudo-Elements
anders, der Text-Container muss schrumpfen duerfen. */
.trennlinie {
display: flex;
flex-wrap: nowrap;
align-items: center;
width: 100%;
max-width: 100%;
min-width: 0;
}
.trennlinie::before,
.trennlinie::after {
flex: 1 1 0;
min-width: 0;
}
.trennlinie-ornament {
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 5. Allgemeiner Wortumbruch fuer Inhalts-Container (Safari-sicher) */
p, h1, h2, h3, h4, h5, h6,
li, span, a, blockquote, cite,
.gericht-name, .gericht-beschreibung,
.kontakt-eintrag-text, .footer-titel {
word-break: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
}
/* 6. Flexbox-Defensive: alle direkten Flex-Kinder duerfen schrumpfen */
.header-inner > *,
.hero-inhalt > *,
.section-kopf > *,
.kontakt-karte > *,
.footer-grid > * {
min-width: 0;
flex-shrink: 1;
}
/* 7. Bilder & Iframes nie ueber Container-Breite (Safari-fest) */
img, picture, video, iframe, embed, object, svg {
max-width: 100%;
height: auto;
display: block;
}
/* 8. Mobile: Container-Breite nie ueber Viewport */
@media (max-width: 768px) {
/* Container max-width sichern, ABER NICHT header/nav -
sonst clippt Safari die fixed nav-liste */
.container,
.container-sm,
.container-xl,
section,
main,
footer {
max-width: 100%;
overflow-x: clip;
}
/* Trennlinie-Ornament im Mobile-Mode: Safari-sicheres Schrumpfen */
.trennlinie-ornament {
flex-shrink: 1;
word-break: keep-all;
}
}
/* ============================================================
SAFARI STICKY/FIXED FIX - Mobile Menue & Sticky-CTA
(02.05.2026)
============================================================ */
/* Header darf NIEMALS overflow:hidden haben - sonst clippt Safari
die fixed-positionierte .nav-liste innen drin. */
header,
.header {
overflow: visible !important;
contain: none !important;
/* will-change/transform vermeiden -> sonst neuer Containing-Block */
}
/* Body darf overflow-x clip statt hidden -> Safari erlaubt
sticky/fixed Kindern besseres Verhalten als bei hidden. */
@supports (overflow: clip) {
html, body {
overflow-x: clip;
}
}
/* Mobile-Menue: aus dem Header-Stacking-Context "ausbrechen"
via absoluter Top-Level-Positionierung mit translateZ(0)
(wirkt nur auf der nav-liste, nicht auf dem Header) */
@media (max-width: 768px) {
.nav-liste {
/* Position relativ zum Viewport, NICHT zum Header */
position: fixed !important;
top: 75px;
left: 0 !important;
right: 0 !important;
bottom: 0;
/* Volle Mass mit dvh fuer Safari iOS Address-Bar */
width: 100% !important;
max-width: 100% !important;
height: calc(100vh - 75px);
height: calc(100dvh - 75px);
/* Solider, garantiert sichtbarer Hintergrund */
background-color: #080808 !important;
background-image: none !important;
/* z-index unter dem Header (1000), aber ueber allem anderen */
z-index: 999;
/* Eigener Stacking-Context erzwingen */
will-change: transform;
transform: translateZ(0);
-webkit-transform: translateZ(0);
/* Scroll im Menue erlauben falls viele Eintraege */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* Kein backdrop-filter mehr (Safari rendert das auf Mobil
inkonsistent ueber position:fixed) */
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Wenn Menue offen ist, body scroll sperren */
body:has(.nav-liste.offen) {
overflow: hidden;
position: fixed;
width: 100%;
}
}
/* Sticky-CTA: Safari-iOS rechnet bottom mit Toolbar-Inset.
env(safe-area-inset-bottom) fuer Notch/Homebar respektieren. */
.sticky-cta {
bottom: calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
right: calc(var(--space-xl) + env(safe-area-inset-right, 0px));
/* Eigener Stacking-Context, damit kein Parent-Filter clippt */
will-change: transform;
transform: translateZ(0);
}
@media (max-width: 768px) {
.sticky-cta {
bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
right: calc(var(--space-lg) + env(safe-area-inset-right, 0px));
}
}
/* ============================================================
OVERLAY-SYSTEM (Mendarina-Pattern) + BLACK-BAR-KILLER
(02.05.2026 - finale Iteration)
============================================================ */
/* === BLACK-BAR-KILLER ===
Greift VOR allem anderen, kompromisslos. Setzt html/body
auf width:100% (NICHT 100vw, das schliesst Scrollbar mit ein
und ist der Hauptverursacher des Balkens in Safari). */
html {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
background-color: #080808 !important;
margin: 0 !important;
padding: 0 !important;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
margin: 0 !important;
position: relative !important;
background-color: #080808;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
/* iOS env-padding NICHT auf body, sondern nur auf .sticky-cta */
padding-bottom: 0 !important;
padding-right: 0 !important;
}
/* Niemals 100vw verwenden - alles auf 100% zwingen */
[style*="100vw"] {
width: 100% !important;
max-width: 100% !important;
}
/* Kein einziges Element darf den Viewport sprengen */
section, header, footer, main, article, aside, div {
max-width: 100%;
}
/* === OVERLAY (Mendarina-Pattern, Fullscreen) === */
.overlay {
position: fixed;
inset: 0;
z-index: 2000;
background: rgba(0, 0, 0, 0.85);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
/* eigener Stacking-Context */
will-change: opacity;
transform: translateZ(0);
}
.overlay.is-open {
opacity: 1;
pointer-events: all;
}
.overlay-fullscreen {
background: #080808;
background-image:
radial-gradient(ellipse at top, rgba(212,175,55,0.08) 0%, transparent 60%),
radial-gradient(ellipse at bottom, rgba(212,175,55,0.05) 0%, transparent 60%);
}
.overlay-panel {
position: relative;
width: 100%;
max-width: 100%;
height: 100%;
padding: var(--space-2xl);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--space-2xl);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border-top: var(--ornament-linie);
}
.overlay-close {
position: absolute;
top: var(--space-lg);
right: var(--space-lg);
background: none;
border: 2px solid rgba(212, 175, 55, 0.3);
color: var(--gold);
width: 48px;
height: 48px;
border-radius: 50%;
font-size: 2rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.overlay-close:hover {
background: var(--gold);
color: var(--schwarz);
transform: rotate(90deg);
}
.overlay-nav-liste {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-xl);
text-align: center;
}
.overlay-nav-link {
display: block;
font-family: var(--font-haupt);
font-size: var(--fs-2xl);
font-weight: 600;
color: var(--weiss);
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
padding: var(--space-sm) var(--space-md);
transition: var(--transition);
position: relative;
}
.overlay-nav-link:hover,
.overlay-nav-link:focus {
color: var(--gold);
letter-spacing: 0.18em;
}
.overlay-cta {
margin-top: var(--space-xl);
}
/* === HEADER bereinigen ===
Backdrop-Filter komplett raus (Safari Stacking-Context-Bug) */
header,
.header,
header.gescrollt,
.header.gescrollt {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: rgba(8, 8, 8, 0.96);
overflow: visible !important;
}
header.gescrollt,
.header.gescrollt {
background: rgba(5, 5, 5, 0.99);
}
/* === Desktop-Nav ===
Nav-Desktop: nur ueber 768px sichtbar */
.nav-desktop {
display: flex;
align-items: center;
}
@media (max-width: 768px) {
.nav-desktop {
display: none;
}
.hamburger {
display: flex;
}
}
@media (min-width: 769px) {
.hamburger {
display: none;
}
/* Overlay nie auf Desktop oeffnen */
.overlay {
display: none;
}
}
/* === Body-Scroll-Lock wenn Overlay offen === */
body.nav-open {
overflow: hidden;
position: fixed;
width: 100%;
}
/* ============================================================
FINAL-FIXES (02.05.2026)
- Hamburger auch auf Tablets sichtbar (bis 1024px)
- Nav-Links nutzen primaere Theme-Fonts (Cinzel)
- Section-Headings duerfen umbrechen / hyphenieren
- WhatsApp-Button-Style
============================================================ */
/* === Hamburger jetzt auf allen Geraeten <=1024 (Mobile + Tablet) === */
@media (max-width: 1024px) {
.hamburger {
display: flex !important;
}
.nav-desktop {
display: none !important;
}
}
@media (min-width: 1025px) {
.hamburger {
display: none !important;
}
.nav-desktop {
display: flex !important;
}
#mobile-nav {
display: none !important;
}
}
/* Critical-CSS Override aus header.php aushebeln (war 768/769) */
@media (max-width: 1024px) {
#mobile-nav {
display: flex !important;
}
}
/* === Theme-Fonts auf Nav-Links === */
.nav-link,
.overlay-nav-link {
font-family: var(--font-haupt) !important; /* Cinzel */
}
/* Overlay: Schrift etwas grosszuegiger, damits edel wirkt */
.overlay-nav-link {
font-family: var(--font-zier) !important; /* Cinzel Decorative */
font-weight: 700;
letter-spacing: 0.18em;
}
/* === Headings duerfen umbrechen ohne Overflow === */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.speisekarte-kategorie-titel,
.section-kopf h2 {
word-break: break-word;
overflow-wrap: anywhere;
hyphens: auto;
-webkit-hyphens: auto;
max-width: 100%;
}
/* Section-Kopf h2 + Speisekarte-Titel kompakter ab Tablet */
@media (max-width: 1024px) {
.section-kopf h2 {
font-size: clamp(1.3rem, 0.8rem + 2.5vw, 2.2rem);
}
.speisekarte-kategorie-titel {
font-size: clamp(1.2rem, 0.8rem + 2.5vw, 2rem);
}
}
/* === WhatsApp-Sticky-Button === */
.sticky-cta .btn-whatsapp {
background: #25D366 !important;
color: #ffffff !important;
border: none !important;
width: 60px;
height: 60px;
border-radius: 50% !important;
display: flex;
align-items: center;
justify-content: center;
padding: 0 !important;
box-shadow: 0 4px 16px rgba(37,211,102,0.4);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sticky-cta .btn-whatsapp:hover {
background: #1DA851 !important;
transform: scale(1.08);
box-shadow: 0 6px 22px rgba(37,211,102,0.55);
}
.sticky-cta .btn-whatsapp svg {
width: 32px;
height: 32px;
fill: #ffffff;
display: block;
}
/* ============================================================
FINAL-FIXES (Badge + Section-Headings) 02.05.2026
============================================================ */
/* === BADGES auf den Karten kleiner / responsive ===
Damit der Text z.B. "🥩 SCHNITZEL" nicht ueber die Karte
ragt und Mobile-Display sprengt. */
.badge {
font-size: clamp(0.55rem, 0.45rem + 0.4vw, 0.75rem) !important;
padding: 3px 8px !important;
letter-spacing: 0.04em !important;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 768px) {
.badge {
font-size: clamp(0.5rem, 0.4rem + 0.3vw, 0.65rem) !important;
padding: 2px 7px !important;
letter-spacing: 0.03em !important;
}
/* Badge in der karte-inhalt: nur so breit wie noetig */
.karte-inhalt .badge,
.karte .badge {
display: inline-flex;
width: auto;
max-width: calc(100% - 1rem);
}
}
/* === SECTION-HEADINGS aggressiv responsive ===
"GRILLSPEZIALITAETEN" und aehnliche lange Worte:
Schrift schrumpft bis es passt, plus letter-spacing reduziert. */
.section-kopf h2,
.hero h1,
section h1,
section h2 {
font-size: clamp(1.2rem, 0.6rem + 4.5vw, 3rem) !important;
letter-spacing: clamp(0.02em, 0.5vw, 0.12em) !important;
word-break: break-word;
overflow-wrap: anywhere;
hyphens: auto;
-webkit-hyphens: auto;
max-width: 100%;
line-height: 1.15;
}
@media (max-width: 480px) {
.section-kopf h2,
.hero h1,
section h1,
section h2 {
font-size: clamp(1.1rem, 0.5rem + 5vw, 2rem) !important;
letter-spacing: 0.02em !important;
}
}
/* Karte h3 (z.B. "Grillspezialitaeten" als Karten-Titel) */
.karte-inhalt h3,
.karte h3 {
font-size: clamp(1rem, 0.7rem + 1.5vw, 1.5rem);
word-break: break-word;
hyphens: auto;
max-width: 100%;
line-height: 1.2;
}
/* ============================================================
BADGE ZENTRIEREN + KOMPAKT (03.05.2026)
Badges sollen nur so breit sein wie ihr Inhalt und in der
Mutter-Div zentriert sitzen, statt sich auf voller Breite
zu strecken.
============================================================ */
.badge {
/* Greift das Stretch-Verhalten in flex/grid Containern ab */
display: inline-flex !important;
width: -webkit-fit-content !important;
width: -moz-fit-content !important;
width: fit-content !important;
max-width: max-content !important;
/* In flex-column Containern (z.B. .karte-inhalt) zentrieren */
align-self: center !important;
/* In Block/Standard-Containern zentrieren */
margin-left: auto !important;
margin-right: auto !important;
/* Kompakte Innenabstaende */
padding: 4px 12px !important;
gap: 6px !important;
/* Schriftgroesse moderat klein */
font-size: clamp(0.55rem, 0.45rem + 0.3vw, 0.7rem) !important;
letter-spacing: 0.05em !important;
line-height: 1.4 !important;
/* Kein Stretchen durch Hoehe */
height: auto !important;
min-height: 0 !important;
}
/* Wenn Badge direkt in einer Karte sitzt, klar darstellen */
.karte-inhalt .badge,
.karte .badge,
.karte-fuss .badge {
display: inline-flex !important;
width: fit-content !important;
margin-bottom: var(--space-sm) !important;
}
/* Karte-inhalt soll seine Inhalte zentrieren falls Badges da sind */
.karte-inhalt {
text-align: center;
}
/* Mobil noch etwas knackiger */
@media (max-width: 768px) {
.badge {
padding: 3px 10px !important;
font-size: clamp(0.5rem, 0.4rem + 0.3vw, 0.65rem) !important;
}
}
/* ============================================================
KARTEN-TEXTE GROSSZUEGIGER + SAUBER UMBRECHEN (03.05.2026)
Mobile Texte waren zu klein, jetzt mit kraeftigerem clamp,
sauberer Wortumbruch ohne Overflow.
============================================================ */
/* === Karten-Titel (z.B. "Pizzen", "Nudeln & Auflaeufe") === */
.karte-inhalt h3,
.karte h3 {
font-size: clamp(1.25rem, 0.9rem + 1.5vw, 1.75rem) !important;
line-height: 1.25 !important;
letter-spacing: 0.04em !important;
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
-webkit-hyphens: auto;
max-width: 100%;
margin-bottom: 0.75rem !important;
}
/* === Karten-Beschreibung (z.B. "Margherita, Salami, ...") === */
.karte-inhalt p,
.karte p {
font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.1rem) !important;
line-height: 1.55 !important;
color: var(--grau-hell);
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
-webkit-hyphens: auto;
max-width: 100%;
}
/* === Mobile: Karten-Innenraum knackiger, Text gut lesbar === */
@media (max-width: 768px) {
.karte-inhalt {
padding: 1.25rem 1.25rem 1.5rem !important;
text-align: center;
}
.karte-inhalt h3,
.karte h3 {
font-size: clamp(1.2rem, 0.85rem + 2vw, 1.6rem) !important;
}
.karte-inhalt p,
.karte p {
font-size: clamp(0.95rem, 0.8rem + 0.7vw, 1.1rem) !important;
line-height: 1.5 !important;
}
}
/* === Sehr klein: noch kompakter, aber Lesbarkeit halten === */
@media (max-width: 380px) {
.karte-inhalt h3,
.karte h3 {
font-size: 1.15rem !important;
letter-spacing: 0.03em !important;
}
.karte-inhalt p,
.karte p {
font-size: 0.92rem !important;
line-height: 1.45 !important;
}
}
/* === Allgemein: Hyphens-Sprache fuer sauberen Umbruch === */
html { -webkit-hyphens: auto; hyphens: auto; }
/* ============================================================
BADGES GROESSER (Kategorien) - 03.05.2026
War zu klein auf Mobil. Jetzt groesser, weiterhin zentriert
und nur so breit wie noetig.
============================================================ */
.badge {
font-size: clamp(0.75rem, 0.6rem + 0.6vw, 0.95rem) !important;
padding: 6px 16px !important;
letter-spacing: 0.06em !important;
gap: 8px !important;
/* Zentrierung + fit-content bleibt aus den vorigen Regeln */
}
/* Mobil: extra Lesbarkeit */
@media (max-width: 768px) {
.badge {
font-size: clamp(0.8rem, 0.65rem + 0.7vw, 1rem) !important;
padding: 7px 18px !important;
letter-spacing: 0.05em !important;
}
}
/* Sehr klein: leicht runter, aber noch deutlich lesbar */
@media (max-width: 380px) {
.badge {
font-size: 0.78rem !important;
padding: 6px 14px !important;
}
}
/* ============================================================
HOVER NUR AUF GERAETEN MIT ECHTEM ZEIGER (Maus/Trackpad)
Auf Touch-Geraeten (Smartphone/Tablet) keine Hover-Effekte,
weil sie sonst beim Tippen kurzzeitig anspringen und stoeren.
============================================================ */
@media (hover: none) {
/* Buttons: keine Skalierung / Verschiebung */
.btn,
.btn-gold,
.btn-lg,
.btn-xl,
.btn-whatsapp,
.karte,
.karte-feature,
.karte-klein,
.karte-quer,
.galerie-bild,
.social-link,
.stat-element,
.info-box,
.gericht,
.speisekarte-kategorie,
.footer-marke,
.scroll-pfeil,
.logo {
transform: none !important;
transition: none !important;
}
/* Hover-Pseudo komplett zuruecksetzen */
*:hover {
transform: none !important;
}
.btn:hover,
.btn-gold:hover,
.btn-lg:hover,
.btn-xl:hover,
.btn-whatsapp:hover,
.karte:hover,
.karte-feature:hover,
.karte-klein:hover,
.nav-link:hover,
.overlay-nav-link:hover,
.footer-links a:hover,
.social-link:hover,
.galerie-bild:hover,
.info-box:hover,
.scroll-pfeil:hover,
.logo:hover,
.gericht:hover,
.speisekarte-kategorie:hover {
transform: none !important;
box-shadow: none !important;
background-color: inherit !important;
background-image: inherit !important;
color: inherit !important;
letter-spacing: inherit !important;
filter: none !important;
}
/* Aktive Zustaende muessen ABER sichtbar bleiben */
.nav-link.aktiv,
.overlay-nav-link.aktiv {
color: var(--gold) !important;
}
/* Sticky-CTA: kein hover-scale */
.sticky-cta .btn-whatsapp:hover {
transform: none !important;
background: #25D366 !important;
}
/* Karten-Bild-Overlay nicht verstaerken */
.karte:hover .karte-bild img,
.karte:hover .karte-bild-overlay,
.galerie-bild:hover img {
transform: none !important;
opacity: inherit !important;
}
}
/* ============================================================
PRIMAERE FONT = CINZEL fuer Headings + Menue-Links
Body-Text bleibt Raleway (Lesbarkeit auf laengeren Texten)
============================================================ */
/* Alle Ueberschriften H1-H6 auf Cinzel */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.section-kopf h2,
.karte h3,
.karte-inhalt h3,
.karte-feature h3,
.karte-klein h4,
.speisekarte-kategorie-titel,
.oeffnungszeiten-titel,
.footer-titel {
font-family: 'Cinzel', serif !important;
font-weight: 600;
letter-spacing: 0.06em;
}
/* H1 und Hero-Headline: Cinzel Decorative fuer extra Charakter */
h1, .h1, .hero h1, .logo-name {
font-family: 'Cinzel Decorative', serif !important;
font-weight: 700;
}
/* Menue-Links und Navigation auf Cinzel */
.nav-link,
.overlay-nav-link,
.footer-links a,
.footer-links li,
.btn,
.btn-gold,
.btn-lg,
.btn-xl,
.btn-sm {
font-family: 'Cinzel', serif !important;
font-weight: 600;
letter-spacing: 0.08em;
}
/* WhatsApp-Button-Text bleibt Cinzel */
.btn-whatsapp,
a[href*="wa.me"] {
font-family: 'Cinzel', serif !important;
}
/* Body, Paragraphen, Beschreibungen bleiben Raleway */
body,
p,
.gericht-beschreibung,
.kontakt-eintrag-text,
blockquote,
cite,
.untertitel,
.klein,
input,
textarea {
font-family: 'Raleway', sans-serif !important;
}