/* === Bodega Schwan - Page Custom CSS (embedded via HTML-Widget) ===
Selektoren nutzen #element-id statt CSS-Klassen auf Containern,
weil Container-_css_classes beim Elementor-Template-Import verworfen werden.
*/
/* Candle-Light Schaefte (Hero) */
@keyframes candleFlicker {
0%, 100% { opacity: .15; transform: scaleY(1); }
25% { opacity: .35; transform: scaleY(1.05); }
50% { opacity: .22; transform: scaleY(.98); }
75% { opacity: .4; transform: scaleY(1.03); }
}
.hero-candles {
position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1;
}
.hero-candles span {
position: absolute; bottom: 0; width: 2px;
background: linear-gradient(to top, transparent, rgba(255,200,120,.35));
animation: candleFlicker var(--dur, 10s) ease-in-out infinite;
animation-delay: var(--delay, 0s);
}
#hero { position: relative; }
/* Hero-Scroll-Indicator */
.hero-scroll {
position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
color: #9a8e82; display: flex; flex-direction: column; align-items: center; gap: 1rem;
z-index: 2;
}
.scroll-line {
width: 1px; height: 60px;
background: linear-gradient(to bottom, transparent, #A07840, transparent);
animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
0%, 100% { opacity: .3; transform: scaleY(.7); }
50% { opacity: 1; transform: scaleY(1); }
}
/* Section-Label (kleiner Kapitellaufzeile mit gold-Strich rechts, wie Original) */
.section-label {
display: flex !important;
align-items: center !important;
gap: .8rem !important;
}
.section-label .elementor-heading-title {
font-family: 'DM Sans', sans-serif !important;
font-size: .65rem !important;
letter-spacing: .3em !important;
text-transform: uppercase !important;
color: #A07840 !important;
flex-shrink: 0;
}
.section-label::after {
content: '' !important;
display: block !important;
flex: 1 !important;
max-width: 60px !important;
height: 1px !important;
background: #A07840 !important;
opacity: .4 !important;
}
/* Section-Labels mit text-align center: Strich beidseitig */
.section-label[style*="text-align: center"]::before,
.section-label.align-center::before {
content: '';
display: block;
flex: 1;
max-width: 60px;
height: 1px;
background: #A07840;
opacity: .4;
}
/* H2 - weight 400 (statt 600), em gold + italic (Original-Look) */
.h-fluid-h2 .elementor-heading-title,
.h-fluid-h2 {
font-weight: 400 !important;
}
.h-fluid-h2 .elementor-heading-title em,
.h-fluid-hero .elementor-heading-title em {
font-style: italic !important;
color: #A07840 !important;
font-weight: 400 !important;
}
/* Hero-Eyebrow als Widget-Wrapper-Style: flankiert von gold-Strichen */
#hero-eyebrow {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 1rem !important;
margin-bottom: 2.5rem !important;
}
#hero-eyebrow::before,
#hero-eyebrow::after {
content: '' !important;
display: block !important;
width: 40px !important;
height: 1px !important;
background: #A07840 !important;
opacity: .5 !important;
flex-shrink: 0;
}
#hero-eyebrow .elementor-heading-title {
font-size: .7rem !important;
letter-spacing: .3em !important;
text-transform: uppercase !important;
color: #c49a58 !important;
}
/* Cat-Number (klein, rot, Kapitelnummer-Style wie im Original) */
.cat-number,
.cat-number .elementor-heading-title {
font-family: 'DM Sans', sans-serif !important;
font-size: .6rem !important;
letter-spacing: .3em !important;
text-transform: uppercase !important;
color: #8C1A2E !important;
font-weight: 500 !important;
line-height: 1 !important;
}
/* Cat-Name (1.3rem fix, Playfair, cream) */
.h-fluid-cat,
.h-fluid-cat .elementor-heading-title {
font-family: 'Playfair Display', serif !important;
font-size: 1.3rem !important;
color: #F0E8DA !important;
}
/* Cat-Sub (gold uppercase letterspaced wie im Original) */
.cat-sub,
.cat-sub .elementor-heading-title {
font-family: 'DM Sans', sans-serif !important;
font-size: .7rem !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
font-style: normal !important;
color: #A07840 !important;
}
/* Cat-Divider (32px feine Linie statt Standard-Divider) */
[id^="tapas-card-"] .elementor-widget-divider .elementor-divider-separator {
width: 32px !important;
margin: 0 !important;
}
[id^="tapas-card-"] .elementor-widget-divider {
}
/* Anfahrt: Adress-Block mit BG3 + gold Border (Original-Frame) */
#address-block {
padding: 2rem !important;
background: #221818 !important;
border: 1px solid rgba(160,120,64,.18) !important;
}
#address-block .elementor-icon-list-items {
margin: 0 !important;
}
#address-block .elementor-icon-list-item {
padding: .7rem 0 !important;
border-bottom: 1px solid rgba(160,120,64,.07) !important;
align-items: flex-start !important;
}
#address-block .elementor-icon-list-item:last-child {
border-bottom: none !important;
}
/* Tapas-Note als Quote-Block mit linkem rotem Border (Pull-Quote-Style)
Elementor's text-editor-Widget rendert
direkt im Widget-Wrapper ohne .elementor-widget-container,
daher Styling direkt auf .tapas-note + .tapas-note p */
.tapas-note {
margin-top: 2.5rem !important;
padding: 1.5rem 2rem !important;
border-left: 2px solid #8C1A2E !important;
background: rgba(140,26,46,.04) !important;
}
.tapas-note p {
margin: 0 !important;
color: #9a8e82 !important;
font-size: .85rem !important;
font-style: italic !important;
line-height: 1.6 !important;
text-align: left !important;
}
/* Konzept-Image-Wrapper: Hochformat 3:4 mit Filter + Overlay */
#konzept-image-col {
position: relative;
aspect-ratio: 3/4;
border-radius: 12px;
overflow: hidden;
}
#konzept-image-col > .e-con-inner,
#konzept-image-col .elementor-widget-image,
#konzept-image-col .elementor-widget-container,
#konzept-image-col .elementor-image {
height: 100% !important;
width: 100% !important;
margin: 0 !important;
}
#konzept-image-col img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 12px;
filter: saturate(.7) sepia(.15) brightness(.82) contrast(1.05);
}
#konzept-image-col::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
border-radius: 12px;
background:
linear-gradient(to top, rgba(10,4,4,.7) 0%, transparent 45%),
radial-gradient(ellipse 90% 90% at 50% 50%, transparent 35%, rgba(4,2,2,.5) 100%);
}
/* Weine-Image-Wrapper: quadratisch 1:1 mit gleichem Filter+Overlay */
#weine-image-col {
position: relative;
aspect-ratio: 1/1;
border-radius: 12px;
overflow: hidden;
}
#weine-image-col > .e-con-inner,
#weine-image-col .elementor-widget-image,
#weine-image-col .elementor-widget-container,
#weine-image-col .elementor-image {
height: 100% !important;
width: 100% !important;
margin: 0 !important;
}
#weine-image-col img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 12px;
filter: saturate(.7) sepia(.15) brightness(.82) contrast(1.05);
}
#weine-image-col::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
border-radius: 12px;
background:
linear-gradient(to top, rgba(10,4,4,.7) 0%, transparent 45%),
radial-gradient(ellipse 90% 90% at 50% 50%, transparent 35%, rgba(4,2,2,.5) 100%);
}
/* Tapas-Karte Hover - via _element_id-Praefix (Container-_css_classes kommen nicht durch) */
[id^="tapas-card-"] {
transition: transform .4s ease, border-color .4s ease;
}
[id^="tapas-card-"]:hover {
transform: translateY(-4px);
}
.dish {
transition: transform .3s ease;
padding: .65rem 0;
border-top: 1px solid rgba(160,120,64,.08);
}
.dish:hover { transform: translateX(4px); }
/* Style-Inject-Container aus Layout-Flow nehmen - -Tag wirkt trotzdem global */
#bs-style-inject {
display: none !important;
}
/* Glassmorphism-Nav: position:fixed wie im Original, immer zentriert, ueberlagert Hero */
#mainNav {
position: fixed !important;
top: 64px;
left: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translateX(-50%) !important;
max-width: 1100px !important;
width: calc(100% - 5rem) !important;
margin: 0 !important;
z-index: 900 !important;
backdrop-filter: blur(28px) saturate(1.8) brightness(.85);
-webkit-backdrop-filter: blur(28px) saturate(1.8) brightness(.85);
background: rgba(18,12,12,.28) !important;
border: 1px solid rgba(255,255,255,.10);
border-radius: 12px !important;
transition: background .4s, box-shadow .4s, backdrop-filter .4s, top .4s;
box-shadow: 0 8px 32px rgba(0,0,0,.35),
0 1px 0 rgba(255,255,255,.10) inset,
0 -1px 0 rgba(0,0,0,.2) inset;
}
/* === Mobile: Nav-Pille weiter nach oben === */
@media (max-width: 767px) {
#mainNav {
top: 30px !important;
}
/* Sticky-State noch ein Stück höher, damit's beim Scrollen kompakt wirkt */
#mainNav.elementor-sticky--effects {
top: 16px !important;
}
}
/* Sticky-State (durch Elementor-JS via class hinzugefuegt) - nur visuelle Aenderung, position bleibt fixed */
#mainNav.elementor-sticky--effects {
top: 24px !important;
background: rgba(14,9,9,.42) !important;
backdrop-filter: blur(32px) saturate(1.8) brightness(.82);
-webkit-backdrop-filter: blur(32px) saturate(1.8) brightness(.82);
box-shadow: 0 12px 40px rgba(0,0,0,.45),
0 1px 0 rgba(255,255,255,.08) inset,
0 -1px 0 rgba(0,0,0,.25) inset;
}
/* Hero - Linseneffekt-Overlay (4-Layer-Vignette wie in Static Site) */
#hero {
position: relative !important;
overflow: hidden !important;
}
#hero::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background:
/* Fade-Blend zum BG am unteren Rand - sorgt fuer smoothen Uebergang in den Konzept-Container */
linear-gradient(to top, #100c0c 0%, transparent 5%),
/* bottom red glow (etwas zurueckgenommen, Fade uebernimmt die letzten %) */
linear-gradient(to top, rgba(110,8,22,.85) 2%, rgba(90,6,18,.5) 22%, transparent 55%),
/* stronger centre darkening behind text */
radial-gradient(ellipse 80% 50% at 50% 52%, rgba(4,2,2,.72) 0%, transparent 80%),
/* top dark hood */
linear-gradient(to bottom, rgba(8,3,3,.65) 0%, transparent 30%),
/* side vignette (Linseneffekt) */
radial-gradient(ellipse 90% 90% at 50% 50%, transparent 25%, rgba(4,2,2,.65) 100%);
}
/* Hero-Children ueber das Overlay heben */
#hero > .e-con-inner > .elementor-element,
#hero > .elementor-element {
position: relative;
z-index: 2;
}
/* Hero-Tagline mit Max-Width fuer saubere Umbrueche */
#hero-tagline,
#hero-tagline .elementor-heading-title {
max-width: min(820px, 90vw) !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Hero-Scroll-Indicator absolut positionieren (raus aus Flex-Flow) */
#hero-scroll-widget {
position: absolute !important;
bottom: 2rem !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: auto !important;
z-index: 3 !important;
margin: 0 !important;
}
/* Buttons - Original-Stil UPPERCASE letterspaced (Elementor's button_typography_*-Keys greifen nicht) */
.elementor-button {
text-transform: uppercase !important;
letter-spacing: .12em !important;
font-family: 'DM Sans', sans-serif !important;
font-size: .78rem !important;
font-weight: 500 !important;
}
/* Nav-CTA hat eigene Padding-Werte aus Original */
/*#mainNav .elementor-button {*/
/* padding: .55rem 1.5rem !important;*/
/* letter-spacing: .1em !important;*/
/*}*/
/* Hero Buttons */
#hero .elementor-button {
padding: .85rem 2rem !important;
}
/* Form-Inputs (Pro Form-Widget) */
.elementor-form .elementor-field-group input[type=text],
.elementor-form .elementor-field-group input[type=tel],
.elementor-form .elementor-field-group input[type=date],
.elementor-form .elementor-field-group select,
.elementor-form .elementor-field-group textarea {
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.18) !important;
color: #fff !important;
padding: .9rem 1rem !important;
border-radius: 2px !important;
font-family: 'DM Sans', sans-serif !important;
}
.elementor-form .elementor-field-group input::placeholder,
.elementor-form .elementor-field-group textarea::placeholder {
color: rgba(255,255,255,.4) !important;
}
.elementor-form .elementor-field-group label {
color: rgba(255,255,255,.85) !important;
font-size: .8rem !important;
letter-spacing: .05em;
text-transform: uppercase;
}
/* Fluid-Typography Klassen - Werte aus Static Site (weight 400 fuer Hero+H2 wie Original) */
.h-fluid-hero,
.h-fluid-hero .elementor-heading-title {
font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
line-height: 1.35 !important;
font-weight: 400 !important;
font-style: italic !important;
}
.h-fluid-h2,
.h-fluid-h2 .elementor-heading-title {
font-size: clamp(2rem, 4vw, 3rem) !important;
line-height: 1.2 !important;
font-weight: 400 !important;
}
.t-fluid-body,
.t-fluid-body .elementor-widget-container,
.t-fluid-body .elementor-widget-container p {
font-size: .95rem !important;
line-height: 1.9 !important;
}
/* Default-Color fuer Body-Paragraphen ist muted - inline style="color:..." kann das ueberschreiben (fuer Reservierung white) */
.t-fluid-body p { color: #9a8e82; }
.t-fluid-body .elementor-widget-container > p { color: #9a8e82; }
/* Hours-Table */
.hours-row {
display: flex; justify-content: space-between;
padding: .75rem 0; border-bottom: 1px solid rgba(160,120,64,.12);
font-family: 'DM Sans', sans-serif;
}
.hours-row.closed { color: #9a8e82; opacity: .55; }
/* Dish-Row (Sizes wie im Original: 0.88/0.75/0.85rem, dish-price gold) */
.dish-row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.dish-row > div:first-child { flex: 1; min-width: 0; }
.dish-name { font-family: 'DM Sans', sans-serif; font-size: .88rem; color: #F0E8DA; font-weight: 400; }
.dish-desc { font-family: 'DM Sans', sans-serif; font-size: .75rem; color: #9a8e82; line-height: 1.5; margin-top: .15rem; }
.dish-price { font-family: 'DM Sans', sans-serif; font-size: .85rem; color: #A07840; white-space: nowrap; flex-shrink: 0; }
.dish { border-bottom: 1px solid rgba(160,120,64,.07); padding: .5rem 0 !important; border-top: none !important; }
.dish:last-child { border-bottom: none !important; }