/* ============================================================ LODOS – 3 DESIGN-VARIANTEN Umschaltbar über data-variant am . Jede Variante setzt Tokens neu + ein paar strukturelle Feinheiten. 1 = Craft (enge Anlehnung an hanskebab.de: off-white, breite schwarze Versal-Typo, schwarze Buttons, viel Weißraum) 2 = Editorial/Bold (LODOS-Rot/Creme, harte Kanten, Offset-Schatten) 3 = Dark Premium (foodfokussiert, appetitlich) ============================================================ */ /* ── Sichtbarkeit: V1 nutzt eigene Sektionen, versteckt die Standard- Sektionen (.gen-sec); umgekehrt sind .v1-only-Blöcke nur in V1 da. */ [data-variant="1"] .gen-sec { display: none !important; } html:not([data-variant="1"]) .v1-only { display: none !important; } /* ══════════════════════════════════════════ VARIANTE 1 — CRAFT (Vorbild hanskebab.de) off-white #fafafa · Schwarz #101111 · breite Versal-Headlines · schwarze CTA-Buttons · scharfe Kanten · LODOS-Rot nur als Akzent ══════════════════════════════════════════ */ [data-variant="1"] { --bg: #fafafa; --bg-alt: #f1efe9; --surface: #ffffff; --text: #101111; --muted: #758696; --brand: #e4032e; --brand-2: #b30021; --brand-soft: rgba(228,3,46,.08); --on-brand: #ffffff; --border: #e7e5df; --menu-rule: #101111; --radius: 2px; --btn-radius: 2px; --font-display: 'Helvetica Neue', Arial, sans-serif; --font-body: 'Helvetica Neue', Arial, system-ui, sans-serif; --title-transform: uppercase; --title-spacing: 0.045em; --title-weight: 800; --hero-bg: #fafafa; --hero-fg: #101111; --hero-muted: #758696; --hero-img-radius: 2px; --header-bg: rgba(250,250,250,.96); --nav-fg: #101111; --footer-bg: #101111; --badge-bg: #101111; --badge-fg: #ffffff; --shadow: 0 6px 24px rgba(16,17,17,.06); --shadow-lg: 0 20px 60px rgba(16,17,17,.10); } /* Breite, „expanded" anmutende Versal-Headlines */ [data-variant="1"] .hero-title { letter-spacing: .02em; transform: scaleX(1.05); transform-origin: left; } [data-variant="1"] .section-title { letter-spacing: .045em; } /* Zentrierte Sektionstitel: kurze Akzentlinie (Divider-Anmutung wie hanskebab) */ [data-variant="1"] .section-title.center::after { content: ''; display: block; width: 54px; height: 3px; background: var(--brand); margin: 18px auto 0; } /* Schwarze CTA-Buttons, roter Hover als LODOS-Akzent */ [data-variant="1"] .btn-primary { background: #101111; color: #fff; } [data-variant="1"] .btn-primary:hover { background: var(--brand); color: #fff; transform: translateY(-2px); } [data-variant="1"] .btn-outline { border-color: #101111; color: #101111; } [data-variant="1"] .btn-outline:hover { background: #101111; color: #fff; } [data-variant="1"] .nav-cta { background: #101111 !important; color: #fff !important; } [data-variant="1"] .nav-cta:hover { background: var(--brand) !important; } /* Heller Header, dünne Trennlinie beim Scrollen; Nav durchgehend dunkel */ [data-variant="1"] .site-header.scrolled { box-shadow: 0 1px 0 var(--border); } [data-variant="1"] .hero-eyebrow, [data-variant="1"] .section-label { color: var(--brand); letter-spacing: .22em; } /* Cleane, scharfkantige Komponenten mit viel Weißraum */ [data-variant="1"] .hero-img { border: none; } [data-variant="1"] .hero-price-tag { background: #101111; } [data-variant="1"] .hl-card { border: 1px solid var(--border); box-shadow: none; } [data-variant="1"] .hl-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } [data-variant="1"] .hl-icon { background: #101111; border-radius: 0; } [data-variant="1"] .menu-cat-title { color: #101111; border-bottom: 2px solid #101111; letter-spacing: .04em; } [data-variant="1"] .mi-price { color: #101111; } [data-variant="1"] .mi-tag { border-radius: 2px; } [data-variant="1"] .hero-badge { border-radius: 2px; } [data-variant="1"] .gallery-item { border-radius: 2px; } [data-variant="1"] .contact-form { border: 1px solid var(--border); box-shadow: var(--shadow); } /* Deal-Banner in Schwarz statt Vollrot (hanskebab-Anmutung), Button invertiert */ [data-variant="1"] .banner { --banner-bg: #101111; } [data-variant="1"] .banner .btn-primary { background: #fff; color: #101111; } [data-variant="1"] .banner .btn-primary:hover { background: var(--brand); color: #fff; } /* ── V1-STRUKTUR: Hero (zentriertes Riesen-Logo + ein CTA) ── */ .v1-hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--bg); padding: 110px 24px 70px; position: relative; } .v1-hero-logo { font-family: var(--font-display); font-weight: 900; font-size: clamp(4rem, 15vw, 12rem); line-height: .9; letter-spacing: .04em; color: #101111; transform: scaleX(1.22); display: inline-block; } .v1-hero-city { font-family: var(--font-display); font-weight: 800; font-size: clamp(.9rem, 2vw, 1.3rem); letter-spacing: .85em; text-indent: .85em; text-transform: uppercase; color: var(--brand); margin-top: 14px; } .v1-tiles { display: flex; margin: 36px 0 26px; } .v1-tiles span { width: 22px; height: 22px; } .v1-tiles span:nth-child(odd) { background: #101111; } .v1-tiles span:nth-child(even) { background: var(--brand); } .v1-hero-tag { color: #101111; font-size: 1.05rem; font-weight: 600; margin-bottom: 34px; } .v1-order-btn { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; background: #101111; color: #fff; padding: 20px 52px; transition: background .2s ease, transform .2s ease; } .v1-order-btn:hover { background: var(--brand); transform: translateY(-2px); } .v1-scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color: #101111; opacity: .55; animation: bounce 2s ease-in-out infinite; } /* ── V1: Marquee-Laufbänder ── */ .v1-marquee { overflow: hidden; background: var(--bg); border-top: 3px solid #101111; border-bottom: 3px solid #101111; padding: 14px 0; } .v1-marquee--red { background: var(--brand); border-color: var(--brand); } .v1-marquee-track { display: flex; width: max-content; animation: v1scroll 26s linear infinite; } .v1-marquee-track span { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 4.6vw, 3.4rem); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; color: #101111; } .v1-marquee--red .v1-marquee-track span { color: #fff; } @keyframes v1scroll { to { transform: translateX(-50%); } } /* ── V1: Origin/Story (zentriert, Farb-Randstreifen) ── */ .v1-origin { background: var(--bg); padding: 120px 24px; position: relative; } .v1-origin::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 14px; background: var(--brand); } .v1-origin::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 14px; background: #101111; } .v1-origin-inner { max-width: 700px; margin: 0 auto; text-align: center; } .v1-label { font-size: .8rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--brand); margin-bottom: 16px; } .v1-headline { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.06; letter-spacing: .04em; text-transform: uppercase; color: #101111; margin-bottom: 26px; } .v1-headline.center { text-align: center; } .v1-origin-inner p { color: #4a5560; font-size: 1.05rem; margin-bottom: 16px; } .v1-origin-inner p strong { color: #101111; } .v1-deal-line { border: 2px solid #101111; display: inline-block; padding: 12px 22px; margin-top: 10px; } /* ── V1: Menü mit Tabs + Schachbrett-Kacheln ── */ .v1-menu { background: var(--bg); padding: 110px 24px 90px; } .v1-menu .v1-headline { text-align: center; } .v1-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 36px auto 46px; } .v1-tab { font-family: var(--font-display); font-weight: 800; font-size: .92rem; text-transform: uppercase; letter-spacing: .05em; padding: 13px 22px; background: transparent; border: 2px solid #101111; color: #101111; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; } .v1-tab:hover { background: #101111; color: #fff; } .v1-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; } .v1-panel { display: none; max-width: 1100px; margin: 0 auto; } .v1-panel.active { display: block; } .v1-squares { display: grid; grid-template-columns: repeat(3, 1fr); } .v1-square { aspect-ratio: 1 / 1; padding: 28px; display: flex; flex-direction: column; position: relative; overflow: hidden; } .v1-square.red { background: var(--brand); color: #fff; } .v1-square.black { background: #101111; color: #fff; } .v1-square h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1rem, 1.6vw, 1.3rem); text-transform: uppercase; letter-spacing: .03em; line-height: 1.15; margin-bottom: 12px; } .v1-square h3 em { font-style: normal; font-size: .68em; opacity: .75; letter-spacing: .06em; } .v1-square p { color: rgba(255,255,255,.78); font-size: .85rem; line-height: 1.5; flex: 1; } .v1-price { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.3rem, 2vw, 1.7rem); margin-top: 14px; } .v1-flag { position: absolute; top: 0; right: 0; background: #fff; color: #101111; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 6px 12px; } .v1-square.foto { padding: 0; margin: 0; background: #e9e6e0; } .v1-square.foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .v1-square.foto:hover img { transform: scale(1.05); } .v1-menu-note { text-align: center; font-size: .78rem; color: var(--muted); margin-top: 28px; } /* V1 responsive */ @media (max-width: 1024px) { .v1-squares { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .v1-squares { grid-template-columns: 1fr; } .v1-square { aspect-ratio: auto; min-height: 210px; } .v1-square.foto { aspect-ratio: 16 / 10; } .v1-origin::before, .v1-origin::after { width: 8px; } .v1-hero-logo { transform: scaleX(1.12); } .v1-tab { flex: 1 1 calc(50% - 5px); } } /* ══════════════════════════════════════════ VARIANTE 2 — EDITORIAL / BOLD (Creme) ══════════════════════════════════════════ */ [data-variant="2"] { --bg: #f4efe4; --bg-alt: #ebe3d3; --surface: #fffdf8; --text: #17140f; --muted: #6d6557; --brand: #e4032e; --brand-2: #b30021; --brand-soft: rgba(228,3,46,.10); --on-brand: #fffdf8; --border: #ddd2bd; --menu-rule: #17140f; --radius: 6px; --btn-radius: 4px; --font-display: 'Arial Black', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Helvetica Neue', Arial, system-ui, sans-serif; --title-transform: uppercase; --title-spacing: -0.02em; --title-weight: 900; --hero-bg: #f4efe4; --hero-fg: #17140f; --hero-muted: #6d6557; --hero-img-radius: 4px; --header-bg: rgba(23,20,15,.95); --nav-fg: #fffdf8; --footer-bg: #17140f; --badge-bg: #17140f; --badge-fg: #fffdf8; --shadow: 0 6px 22px rgba(23,20,15,.09); --shadow-lg: 0 18px 50px rgba(23,20,15,.16); } /* Editorial: harte Kanten, dicke Regel-Linien, sehr fette Headlines */ [data-variant="2"] .hero-title { letter-spacing: -0.03em; } [data-variant="2"] .hero-img { border: 4px solid #17140f; } [data-variant="2"] .hl-card { border: 2px solid #17140f; box-shadow: 6px 6px 0 #17140f; } [data-variant="2"] .hl-card:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--brand); } [data-variant="2"] .hl-icon { border-radius: 0; background: #17140f; } [data-variant="2"] .menu-cat-title { border-bottom-width: 4px; color: #17140f; } [data-variant="2"] .mi-price { color: var(--brand); } [data-variant="2"] .gallery-item { border-radius: 0; border: 2px solid #17140f; } [data-variant="2"] .contact-form { border: 2px solid #17140f; box-shadow: 8px 8px 0 #17140f; } [data-variant="2"] .btn-primary:hover { box-shadow: 5px 5px 0 #17140f; transform: translate(-1px,-1px); } /* Heller Hero -> dunkle Nav, solange nicht gescrollt */ [data-variant="2"] .site-header:not(.scrolled) .main-nav a, [data-variant="2"] .site-header:not(.scrolled) .logo-word { color: #17140f; } [data-variant="2"] .site-header:not(.scrolled) .burger span { background: #17140f; } [data-variant="2"] .site-header.scrolled .main-nav a, [data-variant="2"] .site-header.scrolled .logo-word { color: #fffdf8; } /* ══════════════════════════════════════════ VARIANTE 3 — DARK PREMIUM ══════════════════════════════════════════ */ [data-variant="3"] { --bg: #121013; --bg-alt: #1b181d; --surface: #201d22; --text: #f4f1ee; --muted: #a49fa8; --brand: #ff2d4b; --brand-2: #e01235; --brand-soft: rgba(255,45,75,.14); --on-brand: #ffffff; --border: #322e37; --menu-rule: #322e37; --radius: 16px; --btn-radius: 999px; --font-display: 'Helvetica Neue', 'Arial Black', Arial, sans-serif; --font-body: 'Helvetica Neue', Arial, system-ui, sans-serif; --title-transform: none; --title-spacing: -0.02em; --title-weight: 800; --hero-bg: radial-gradient(120% 90% at 80% 10%, #2a1116 0%, #121013 60%); --hero-fg: #ffffff; --hero-muted: #b7b1ba; --hero-img-radius: 22px; --header-bg: rgba(18,16,19,.92); --nav-fg: rgba(255,255,255,.86); --footer-bg: #0c0a0d; --badge-bg: rgba(255,255,255,.08); --badge-fg: #fff; --badge-border: rgba(255,255,255,.16); --input-bg: #1a171c; --nav-panel-bg: #0c0a0d; --map-filter: invert(0.92) hue-rotate(180deg) contrast(0.9); --shadow: 0 8px 30px rgba(0,0,0,.4); --shadow-lg: 0 24px 60px rgba(0,0,0,.55); } [data-variant="3"] .hero-title { text-shadow: 0 2px 30px rgba(255,45,75,.25); } [data-variant="3"] .hero-img { border: 1px solid rgba(255,255,255,.1); } [data-variant="3"] .hl-card { background: linear-gradient(180deg, #201d22, #1a171c); } [data-variant="3"] .hl-card:hover { border-color: var(--brand); } [data-variant="3"] .btn-outline { border-color: rgba(255,255,255,.4); color: #fff; } [data-variant="3"] .btn-outline:hover { background: #fff; color: #121013; } [data-variant="3"] .story-photo figcaption, [data-variant="3"] .contact-form { background: var(--surface); } [data-variant="3"] .menu-cat-title { color: var(--brand); } [data-variant="3"] .mi-name { color: #f4f1ee; } [data-variant="3"] .mi-price { color: #fff; } [data-variant="3"] .banner { --banner-bg: linear-gradient(120deg, #ff2d4b, #b30021); } [data-variant="3"] .gallery-item figcaption { background: linear-gradient(to top, rgba(0,0,0,.9), transparent); }