/* ==========================================================================
CHEF PIZZA – Design System
Rebuild of the Adobe XD design on Salient/dilly.
Exact values extracted from the XD spec mode.
========================================================================== */
/* Web fonts live in fonts.css (loaded separately, also in wp-admin so the
Theme Options / builder font dropdowns preview correctly).
"Riffic Free" = self-hosted display font, registered with Salient's
typography via the redux custom_fonts filter in functions.php.
roboto-mono (body/labels) comes from Typekit kit wgl3onl. */
/* ---------- Design tokens -------------------------------------------------- */
:root {
/* Colours (exact hex from XD) */
--cp-red: #D80010; /* brand primary */
--cp-red-dark: #A5030F; /* active tab / pressed / hover */
--cp-green: #2A5041; /* bottle green – menu section background */
--cp-black: #000000;
--cp-white: #FFFFFF;
--cp-grey: #6f6f6f;
--cp-grey-line: #cccccc;
/* Fonts */
--cp-font-display: 'Riffic Free', 'Lovelo Black', 'Arial Black', sans-serif;
--cp-font-body: 'roboto-mono', 'Roboto Mono', ui-monospace, monospace;
/* Fluid display type scale (calibrated against XD, refined per section).
XD canvas = 2560px wide. */
--cp-h-hero: clamp(2.75rem, 7.4vw, 8.8rem); /* ~141px @2560 "NULL DRAMA" */
--cp-h-xl: clamp(2.5rem, 5.5vw, 7.9rem); /* ~127px "KONTAKT/JOBS" */
--cp-h-lg: clamp(2rem, 4.6vw, 5.5rem); /* ~88px "EINFACH GUTE PIZZA" */
--cp-h-md: clamp(1.5rem, 2.5vw, 2.6rem); /* ~41px tab labels / MENÜ small */
}
/* NOTE: typography (font family / size / colour for body + h1–h6) is owned by
Salient Theme Options → Typography, NOT by this file. Nothing here may set
font-family on body or headings, or it would override the panel. */
.cp-red { color: var(--cp-red); }
.cp-green { color: var(--cp-green); }
.cp-white { color: var(--cp-white); }
/* ---------- Red/white diagonal stripe divider ----------------------------- */
/* Uses the exact divider SVG from the XD design (red #e10a17 on white). */
/* Höhe = 59.9/2560 des XD-Dividers. Das Kacheln muss CSS machen: die Row
hat zwar ein Hintergrundbild-Feld, aber keinen "repeat"-Parameter. */
.cp-stripes {
width: 100%;
height: 2.34vw;
min-height: 18px;
background: var(--cp-white) url('../img/section-divider.svg') repeat-x left center;
background-size: auto 100%;
}
.cp-stripes > .row_col_wrap_12,
.cp-stripes .vc_column_container,
.cp-stripes .vc_column-inner { min-height: 0; padding: 0 !important; }
/* ---------- Buttons -------------------------------------------------------- */
.cp-btn,
a.cp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
font-family: var(--cp-font-body);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1;
padding: 1.1em 2.2em;
border-radius: 999px;
border: 2px solid var(--cp-red);
background: var(--cp-red);
color: var(--cp-white);
text-decoration: none;
transition: transform .25s cubic-bezier(.2,.8,.2,1),
background-color .25s ease, color .25s ease, box-shadow .25s ease;
cursor: pointer;
}
.cp-btn:hover,
a.cp-btn:hover {
background: var(--cp-red-dark);
border-color: var(--cp-red-dark);
color: var(--cp-white);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(168, 3, 15, .28);
}
.cp-btn--outline,
a.cp-btn--outline {
background: transparent;
color: var(--cp-red);
}
.cp-btn--outline:hover,
a.cp-btn--outline:hover {
background: var(--cp-red);
color: var(--cp-white);
}
/* ---------- Reveal-on-scroll animation utility ---------------------------- */
.cp-reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
will-change: opacity, transform;
}
.cp-reveal.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.cp-reveal { opacity: 1; transform: none; transition: none; }
}
/* ==========================================================================
HEADER / NAV
========================================================================== */
#header-outer { box-shadow: 0 2px 12px rgba(0,0,0,.06); }
/* Logo via CSS background (reliable regardless of Salient img variants).
Der Kochkopf soll unten aus dem Header herausragen (wie im XD). Damit die
Headerhoehe dabei NICHT waechst, behaelt #logo seinen normalen Layoutplatz
und das vergroesserte Motiv kommt aus einem absolut gesetzten ::after.
SVG-Verhaeltnis 546.17 : 196.734. */
#header-outer #logo,
#header-outer #logo:hover {
display: inline-block !important;
position: relative;
background: none !important;
width: clamp(155px, 15vw, 235px);
height: clamp(46px, 4.4vw, 72px);
font-size: 0 !important;
line-height: 0 !important;
}
#header-outer #logo::after {
content: "";
position: absolute;
left: 0;
/* Die rote Wortmarke sitzt im SVG bei 40,6% der Gesamthoehe (Pixel 53-107
von 197), nicht mittig. Je groesser das Logo, desto tiefer rutscht sie.
Groesse + Versatz sind so gewaehlt, dass die Wortmarke optisch auf der
Header-Mitte liegt, oben etwas Luft bleibt und der Kochkopf trotzdem
unten herausragt. */
top: clamp(2px, .19vw, 4px);
width: clamp(154px, 14.9vw, 233px);
aspect-ratio: 546.17 / 196.734; /* ergibt ca. 55 / 84px Hoehe */
background: url('../img/header-logo.svg') left top / contain no-repeat;
pointer-events: none;
}
/* Der Ueberhang darf nicht abgeschnitten werden und liegt ueber dem Inhalt. */
#header-outer,
#header-outer #top,
#header-outer #top .container,
#header-outer #top .row,
#header-outer #top .col.span_3 { overflow: visible !important; }
#header-outer #top .col.span_3 { position: relative; z-index: 10000; }
#header-outer #logo img,
#header-outer #logo .stnd,
#header-outer #logo .dark-version,
#header-outer #logo .starting-logo,
#header-outer #logo .mobile-logo,
/* Salient legt in der Navi-Spalte ein Abstandshalter-Logo ab. Da wir das Logo
per CSS-Background loesen, ist dessen src leer -> Browser zeigt ein kaputtes
Bild (auf Mobil deutlich sichtbar). Nur das ![]()
ausblenden, nicht den
Container, damit der reservierte Platz erhalten bleibt. */
#header-outer .logo-spacing img,
#header-outer img.hidden-logo { display: none !important; }
/* Nav links */
#header-outer #top nav > ul > li > a {
font-family: var(--cp-font-body) !important;
text-transform: uppercase;
letter-spacing: .04em;
font-weight: 500;
font-size: 14px;
color: #171717 !important;
}
#header-outer #top nav > ul > li > a:hover { color: var(--cp-red) !important; }
/* BESTELLEN button */
#header-outer #top nav > ul > li.cp-bestellen { margin-left: 8px; }
#header-outer #top nav > ul > li.cp-bestellen > a {
border: 2px solid var(--cp-red);
border-radius: 999px;
padding: 9px 22px 9px 46px !important;
color: var(--cp-red) !important;
position: relative;
line-height: 1 !important;
transition: background-color .25s ease, color .25s ease;
}
#header-outer #top nav > ul > li.cp-bestellen > a::before {
content: "";
position: absolute; left: 16px; top: 50%;
transform: translateY(-50%);
width: 22px; height: 22px;
background: url('../img/header-pizza-icon.svg') center / contain no-repeat;
}
#header-outer #top nav > ul > li.cp-bestellen > a:hover {
background: var(--cp-red);
color: #fff !important;
}
#header-outer #top nav > ul > li.cp-bestellen > a:hover::before { filter: brightness(0) invert(1); }
/* ---------- FOOTER (Global Section "Footer 1", id 36) ---------------------- */
/* Native Salient-Row: Spalte 1 = rundes Logo, Spalte 2 = Marke + 4 Info-Spalten
+ Copyright. Kein cp_raw – alles im Page Builder editierbar.
Vertikale Zentrierung macht die Row selbst (equal_height + content_placement). */
.cp-footer { background: var(--cp-red); color: var(--cp-white); }
.cp-footer > .row_col_wrap_12 {
max-width: 1500px;
margin: 0 auto;
padding: clamp(2.5rem, 4.6vw, 4.5rem) clamp(1.25rem, 4vw, 4.5rem) clamp(1.5rem, 2.6vw, 2.6rem);
}
.cp-footer .vc_column-inner { padding: 0 !important; }
/* Rundes Logo */
.cp-footer__logo img { width: clamp(150px, 14vw, 230px); height: auto; display: block; }
/* Wortmarke */
.cp-footer__brand {
font-family: var(--cp-font-display);
text-transform: uppercase;
letter-spacing: .02em;
margin-bottom: clamp(1rem, 1.8vw, 2rem);
}
/* Info-Spalten */
.cp-footer__col h4 {
font-family: var(--cp-font-body);
font-weight: 700;
font-size: clamp(.78rem, .86vw, .95rem);
letter-spacing: .02em;
margin: 0 0 .9em;
color: var(--cp-white);
}
.cp-footer__col p {
font-family: var(--cp-font-body);
font-size: clamp(.7rem, .78vw, .85rem);
line-height: 1.9;
margin: 0;
color: rgba(255,255,255,.92);
}
.cp-footer__col a { color: rgba(255,255,255,.92); text-decoration: none; transition: opacity .2s ease; }
.cp-footer__col a:hover { opacity: .65; text-decoration: none; }
/* Copyright */
.cp-footer__copy p {
font-family: var(--cp-font-body);
font-size: clamp(.62rem, .68vw, .74rem);
color: rgba(255,255,255,.8);
margin: clamp(1.5rem, 3vw, 3rem) 0 0;
}
@media (max-width: 860px) {
.cp-footer__logo img { margin: 0 auto clamp(1.5rem, 4vw, 2.5rem); }
.cp-footer__brand { text-align: center; }
}
/* ==========================================================================
HERO (Startseite)
Row, Spalte, Texte, Schriftgrößen, Farben und Ausrichtung kommen komplett
aus dem WPBakery-Builder. Hier steht NUR, was der Builder nachweislich
nicht kann (kein Element hat Felder dafür):
– letter-spacing (in keinem der Salient-Elemente vorhanden)
– text-transform (dito)
– Höhe über Bildseitenverhältnis (Row hat keinen min-height-Parameter)
========================================================================== */
/* Bild ist 2560×1170 → 1170/2560 = 45.7% der Viewportbreite */
.cp-hero { min-height: 45.7vw; }
/* Menue-Seite: Hero-Foto ist dort 2560×1016 → 39.69vw */
.cp-hero--menu { min-height: 39.69vw; }
/* NUR die Menue-Seite: dort setzt das XD die rechte Textkante auf 2329
(= 231px Rand), der Theme-Container liefert 205px.
Die STARTSEITE nutzt dagegen die Container-Kante selbst – belegt durch die
Instagram-Ueberschrift (rechte Kante 2355 = exakt Container). Deshalb hier
bewusst nicht global. */
.cp-hero--menu .vc_column-inner { padding-right: min(1.02vw, 26px); }
.cp-hero__eyebrow,
.cp-hero__headline,
.cp-hero__sub { text-transform: uppercase; }
.cp-hero__eyebrow { letter-spacing: .02em; } /* XD: 1.76px / 88px */
.cp-hero__headline { letter-spacing: .02em; } /* XD: 2.80px / 140px */
.cp-hero__sub { letter-spacing: 0; } /* XD: 0px */
@media (max-width: 690px) {
.cp-hero,
.cp-hero--menu { min-height: 78vh; }
}
/* ---- Telefon-Button im Menue-Hero ---------------------------------------
XD "Rechteck 7266": 421×98, #D80010, border-radius 55px.
Label 32px/25px Roboto Mono Bold, weiss, zentriert. */
/* nectar_btn setzt el_class direkt auf das , nicht auf einen Wrapper.
NICHT auf .cp-hero scopen – derselbe Button steht auch auf der Jobs-Seite
(XD dort: 421x111 mit 4px Rahmen, sonst identisch). */
#ajax-content-wrap a.cp-tel-btn {
display: inline-flex; align-items: center; justify-content: center;
min-width: clamp(220px, 16.45vw, 421px); /* 421/2560 */
height: clamp(52px, 3.83vw, 98px); /* 98/2560 */
margin-top: clamp(14px, 1.2vw, 31px);
padding: 0 clamp(24px, 2vw, 52px);
border-radius: 55px !important; /* schlaegt Salients Button-Radius */
font-family: var(--cp-font-body); font-weight: 700;
font-size: clamp(.85rem, 1.25vw, 32px); /* 32/2560 */
letter-spacing: 0; line-height: 1;
}
#ajax-content-wrap a.cp-tel-btn span {
font-size: inherit; font-weight: inherit; letter-spacing: 0; line-height: 1;
}
/* Row hat ohne "full_height" keinen Parameter für vertikale Zentrierung,
die Mindesthöhe kommt aber aus dem Bildseitenverhältnis → hier zentrieren. */
.cp-hero > .row_col_wrap_12 {
display: flex;
flex-direction: column;
justify-content: center;
min-height: inherit;
/* Bezugsrahmen für das absolut positionierte Siegel (Salients Row-Wrapper
ist nicht garantiert position:relative). */
position: relative;
}
/* HALAL-Siegel – liegt als Bild-Element in der Divider-Row (dort im Builder
tausch- und animierbar). Nur Größe und Überlappung sind CSS: das Siegel
ragt im XD über die Streifen hinaus, dafür gibt es keinen Element-Parameter.
Maße aus dem XD: Breite 262/2560, Unterkante 142px unter dem Divider. */
.cp-stripes .cp-halal-img {
position: absolute;
/* Startseite: buendig mit der Container-Kante (dort liegt auch die
Instagram-Ueberschrift, rechte Kante 2355). */
right: calc(max(0px, (100vw - 1780px) / 2) + 90px);
/* Der Versatz muss an die SIEGELBREITE gekoppelt sein, nicht an vw:
auf Mobil greifen min-width (84px) beim Siegel und min-height beim
Streifenband, ein festes -5.55vw skaliert dann nicht mit und das
Siegel rutscht zu weit nach oben. Verhaeltnis wie im XD: 5.55/10.23. */
bottom: calc(max(10.23vw, 84px) * -0.5425);
/* !important, weil Salients Bild-Element die native SVG-Breite (262px)
als explizite Breite setzt. */
width: 10.23vw !important;
max-width: 10.23vw !important;
min-width: 84px;
margin: 0;
z-index: 10;
}
.cp-stripes .cp-halal-img img {
display: block; width: 100%; height: auto;
filter: drop-shadow(0 8px 18px rgba(0,0,0,.22));
}
/* ==========================================================================
SECTION "EINFACH GUTE PIZZA"
Row/Spalten/Texte/Größen/Farben kommen aus dem Builder. Hier nur:
– letter-spacing + text-transform (kein Element-Feld)
– font-weight des Leads (kein Element-Feld)
– Abstände zwischen den drei Textebenen
– der bewusste Bild-Überstand nach rechts (im XD läuft das Bild
über den Canvas-Rand hinaus: left 1366 + 1304 = 2670 > 2560)
========================================================================== */
/* kein overflow:hidden – das Bild und sein Divider laufen bewusst bis an
den Viewport-Rand; sie enden exakt dort, es entsteht kein Scrollbalken. */
.cp-split__title {
text-transform: uppercase;
letter-spacing: .02em; /* XD: 2.54px / 127px */
margin-bottom: .35em;
}
.cp-split__lead {
font-weight: 700; /* XD: Roboto Mono Bold */
margin-bottom: 1.6em;
}
.cp-split__text p { margin: 0 0 1.4em; }
.cp-split__text p:last-child { margin-bottom: 0; }
/* Bild bis an den Viewport-Rand ziehen (Container-Kante aufheben).
Breite statt negativem Margin – so endet es exakt am Rand, ohne Scrollbalken. */
/* Der Überstand sitzt auf Salients Bild-Wrapper, nicht auf dem ![]()
–
ein ![]()
ist ein ersetztes Element und erzeugt kein ::after. */
.cp-split .img-with-aniamtion-wrap,
.cp-split .img-with-animation-wrap {
position: relative;
width: calc(100% + max(0px, (100vw - 1780px) / 2) + 90px);
max-width: none;
}
.cp-split__img { width: 100% !important; max-width: none !important; height: auto; display: block; }
/* Überlappender Streifen an der Bildunterkante ("image-divider-overlapped").
XD: beginnt 254/1304 = 19.5% in das Bild hinein, ragt 37px darunter,
Höhe 59.9px = 2.34vw, läuft rechts mit dem Bild aus dem Layout. */
.cp-split .img-with-aniamtion-wrap::after,
.cp-split .img-with-animation-wrap::after {
content: "";
position: absolute;
left: 19.5%;
right: 0;
bottom: -1.45vw;
height: 2.34vw;
min-height: 18px;
background: url('../img/section-divider.svg') repeat-x left center;
background-size: auto 100%;
pointer-events: none;
z-index: 2;
}
@media (max-width: 860px) {
.cp-split .img-with-aniamtion-wrap,
.cp-split .img-with-animation-wrap { width: 100%; }
.cp-split .img-with-aniamtion-wrap::after,
.cp-split .img-with-animation-wrap::after { left: 0; bottom: -12px; }
}
/* ==========================================================================
SPEISEKARTE
Struktur (Tabs, Spalten, Speisen) kommt aus dem Builder; das Speise-Element
des Kunden bleibt unverändert. Alles hier ist auf .cp-menu gescoped, damit
das Element ausserhalb dieser Section seine Listen-Optik behält.
style-vb_fooditem.css laedt NACH dieser Datei – der .cp-menu-Prefix (0,3,0)
gewinnt aber ueber Spezifitaet gegen dessen (0,2,0)-Regeln.
========================================================================== */
/* ---- Max-Width-Container im Vollbreiten-Hintergrund ----------------------- */
/* XD: gruener Grund 0…2560, Raster aber nur 240…2320 (2080px = 81,25 %).
Das Raster ist damit breiter als der Textcontainer der uebrigen Sections
(1894px im XD) – dieselbe Relation auf den Theme-Container (1780) skaliert
ergibt die Kappung unten. Die Tab-Leiste bleibt bewusst randlos. */
/* Ueber padding statt margin/width – Salient ueberschreibt die Randmargen
der inneren Zeile, die Polsterung bleibt dagegen stehen. */
.cp-menu .wpb_tab > .inner_row {
width: auto;
padding-inline: max(9.375%, calc((100% - 2080px) / 2)); /* Raster = 81,25 % */
}
/* Salient polstert die innere Spalte – hier stoert das die Rasterbreite. */
.cp-menu .wpb_tab > .inner_row > .row_col_wrap_12_inner > .vc_column_container > .vc_column-inner {
padding-inline: 0;
}
@media (max-width: 999px) {
.cp-menu .wpb_tab > .inner_row { padding-inline: 30px; }
}
/* ---- 4er-Raster ---------------------------------------------------------- */
/* Salient reicht el_class an vc_row_inner NICHT durch – deshalb wird die innere
Reihe ueber .inner_row adressiert statt ueber eine eigene Klasse.
XD: Bildkachel 511px, Spaltenraster 523px → 12px Spalten-, 86px Zeilenabstand. */
.cp-menu .wpb_tab .inner_row .vc_column-inner > .wpb_wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(28px, 3.36vw, 86px) clamp(6px, .47vw, 12px);
align-items: start;
}
@media (max-width: 999px) { .cp-menu .wpb_tab .inner_row .vc_column-inner > .wpb_wrapper { grid-template-columns: repeat(2,1fr); } }
/* Mobil zweispaltig: die Karten sind quadratisch, zwei nebeneinander lesen sich
deutlich besser als eine endlose Einerspalte. Getraenke sind davon nicht
betroffen - deren Wrapper ist per :has(> .cp-drink) auf display:block. */
@media (max-width: 599px) {
.cp-menu .wpb_tab .inner_row .vc_column-inner > .wpb_wrapper {
grid-template-columns: repeat(2, 1fr);
gap: clamp(20px, 6vw, 34px) clamp(8px, 2.6vw, 14px);
}
}
/* ---- Ueberschrift "MENÜ" mit vorgelagertem Streifen ----------------------- */
/* XD-Element "title-pre-divider": Streifen laeuft vom Viewport-Rand bis x=536,
die Ueberschrift beginnt bei x=555 – beide vertikal aufeinander zentriert. */
/* Abstand Titel -> Tableiste an der ZEILE, nicht am Textelement: eine
Polsterung am Titel wuerde den Streifen (top:50%) nach unten schieben.
Salients bottom_padding in % skaliert hier nicht nachvollziehbar, daher
exakt in vw: XD 100px von 2560 = 3,9vw. */
.cp-menu-head .vc_column-inner { padding-bottom: clamp(30px, 3.9vw, 100px); }
/* ---- Menue-Seite: andere Ueberschrift ------------------------------------
Dieselbe Global Section, aber das XD gestaltet den Titel dort anders:
Artboard "Menü" hat ihn ZENTRIERT und OHNE Streifen (Box 1097..1463,
Mitte 1280 = Canvas-Mitte), Abstand zur Tableiste nur 67px statt 100px.
Deshalb hier ueber die Body-Klasse der Seite gescoped. */
.page-id-83 .cp-menu-head .cp-menu__title {
text-align: center;
padding-left: 0;
}
.page-id-83 .cp-menu-head .cp-menu__title::before { content: none; }
.page-id-83 .cp-menu-head .vc_column-inner { padding-bottom: clamp(22px, 2.62vw, 67px); }
/* Menue-Seite: dort sitzt auch das Siegel weiter innen (XD: rechte Kante 2328,
buendig mit dem Hero-Text dieser Seite). */
.page-id-83 .cp-stripes .cp-halal-img { right: min(9.06vw, 232px); }
/* Die Zeile ist full_width_content, deckt also den ganzen Viewport ab –
die Masse sind daher direkt aus der 2560er-Zeichenflaeche skaliert. */
.cp-menu-head .cp-menu__title {
--cp-stripe-h: clamp(18px, 2.34vw, 60px); /* 60px @2560 */
position: relative;
text-align: left;
text-transform: uppercase;
letter-spacing: .02em;
/* Textbeginn XD-x 555. Auf schmalen Viewports wird der Streifen (Breite =
8.06 x Streifenhoehe, Hoehe hat ein Minimum von 18px) breiter als dieses
Padding -> er lief in die Schrift. max() garantiert immer genug Platz. */
padding-left: max(min(21.68vw, 555px), calc(var(--cp-stripe-h) * 8.06 + clamp(10px, 1.2vw, 30px)));
/* KEIN padding-bottom hier! Der Streifen unten wird per top:50% auf diese
Box zentriert – jede Polsterung wuerde ihn nach unten verschieben.
Der Abstand zu den Tabs sitzt deshalb als bottom_padding an der Zeile. */
}
/* Streifenband, rechts sauber beendet.
Aus der SVG ausgemessen (Hoehe 60 => 1px = 1 SVG-Einheit):
Oberkante Streifen bei 41-76, 98-132, ... Periode 56,7
Unterkante Streifen bei 1-35, 58- 92, ... also 40 nach links versetzt
Durch diesen Versatz ist KEINE senkrechte Spalte frei – ein gerader
Schnitt erwischt immer einen Streifen und laesst den spitzen Zipfel stehen.
Deshalb wird schraeg geschnitten, exakt parallel zu den Streifen
(40 von 60 = 0,667 der Hoehe). Die Breite ist so gewaehlt, dass diese
Schraege in eine Luecke faellt: 8,06 × Hoehe = 483,6 Einheiten,
Rest 30 – genau mittig zwischen zwei Streifen (Fenster 20,3 bis 40,3). */
.cp-menu-head .cp-menu__title::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: calc(var(--cp-stripe-h) * 8.06);
height: var(--cp-stripe-h);
background: url('../img/section-divider.svg') repeat-x left center;
background-size: auto 100%;
clip-path: polygon(
0 0,
100% 0,
calc(100% - 0.667 * var(--cp-stripe-h)) 100%,
0 100%
);
}
/* ---- Karte statt Listenzeile -------------------------------------------- */
.cp-menu .vclayouter_menu_item {
padding: 0; margin-bottom: 0; border-bottom: 0;
text-align: center; color: var(--cp-white);
}
.cp-menu .vclayouter_menu_item_inner { display: block; }
/* Foto oben, quadratisch (XD: 511×511 PNG, Schatten steckt im Bild) */
.cp-menu .menu_image_top { width: 100%; margin: 0 0 clamp(3px, .31vw, 8px); }
.cp-menu .menu_image_top a { display: block; }
.cp-menu .menu_image_top img {
display: block; width: 100%; height: auto;
aspect-ratio: 1 / 1; object-fit: contain;
border-radius: 0; margin-top: 0;
}
/* Speisen ohne Foto (noch kein Bild vom Kunden): Bildflaeche reservieren, damit
Titel/Preis im Raster auf einer Linie mit den Nachbarkarten bleiben. Die Klasse
setzt der Generator nur in Tabs, die auch Karten MIT Bild enthalten – in reinen
Text-Tabs (GETRAENKE) waere die Leerflaeche sinnlos. */
.cp-menu .vclayouter_menu_item.cp-no-img::before {
content: "";
display: block;
width: 100%;
aspect-ratio: 1 / 1;
margin: 0 0 clamp(3px, .31vw, 8px);
}
/* "Foto folgt"-Platzhalter (Attachment 198) zurueckhaltend zeigen: das Motiv
fuellt wie die echten Pizzen ~70% der Bildflaeche, zusaetzlich halbtransparent,
damit es die Karten mit echtem Foto nicht ueberstrahlt. */
.cp-menu .menu_image_top img[src*="cp-platzhalter"] { opacity: .5; }
/* ---- GETRAENKE als klassische Speisekarten-Liste ------------------------- */
/* Flag ist das native extra_class="cp-drink" am Speise-Element - das Element
selbst bleibt unangetastet. Statt Bildraster: volle Breite, eine Zeile je
Getraenk, Name links, Punktlinie, Preis rechts (wie im gedruckten Flyer). */
.cp-menu .wpb_tab .inner_row .vc_column-inner > .wpb_wrapper:has(> .cp-drink) {
display: block;
max-width: min(61.52vw, 1575px);
margin: 0 auto;
}
.cp-menu .vclayouter_menu_item.cp-drink {
text-align: left;
padding: clamp(9px, .86vw, 22px) 0;
border-bottom: 1px solid rgba(255,255,255,.18);
}
.cp-menu .vclayouter_menu_item.cp-drink:last-child { border-bottom: 0; }
/* Zeile: Name | Punktlinie | Preis. Die Punktlinie ist ::after am Wrapper und
wird per order zwischen Titel und Preis einsortiert. */
.cp-menu .vclayouter_menu_item.cp-drink .menu_title_wrap {
display: flex;
flex-wrap: nowrap;
align-items: baseline;
justify-content: flex-start;
gap: 0 .6em;
text-align: left;
}
.cp-menu .vclayouter_menu_item.cp-drink .menu_title { order: 1; flex: 0 1 auto; }
.cp-menu .vclayouter_menu_item.cp-drink .menu_title_wrap::after {
content: "";
order: 2;
flex: 1 1 auto;
min-width: 2em;
border-bottom: 1px dotted rgba(255,255,255,.4);
transform: translateY(-.3em);
}
.cp-menu .vclayouter_menu_item.cp-drink .vclayouter_menu_price {
order: 3;
flex: 0 0 auto;
display: block;
margin-top: 0 !important;
white-space: nowrap;
font-size: clamp(.75rem, .95vw, 24px);
}
/* Zusatzzeile (z.B. Softdrink-Sorten) links unter dem Namen, leere ausblenden */
.cp-menu .vclayouter_menu_item.cp-drink .menu_feature_list_wrap { text-align: left; }
.cp-menu .vclayouter_menu_item.cp-drink .menu_feature_list li:empty { display: none; }
@media (max-width: 599px) {
.cp-menu .wpb_tab .inner_row .vc_column-inner > .wpb_wrapper:has(> .cp-drink) { max-width: none; }
.cp-menu .vclayouter_menu_item.cp-drink .menu_title_wrap { flex-wrap: wrap; }
.cp-menu .vclayouter_menu_item.cp-drink .menu_title_wrap::after { display: none; }
.cp-menu .vclayouter_menu_item.cp-drink .vclayouter_menu_price { margin-top: .2em !important; }
}
/* eine zentrierte Titelzeile: "01. Pizzabrot 5,9 €" */
.cp-menu .vclayouter_menu_item .menu_title_wrap {
display: flex; flex-wrap: wrap; justify-content: center;
align-items: baseline; gap: 0 .5em; padding: 0;
}
.cp-menu .vclayouter_menu_item .menu_title {
width: auto; overflow: visible;
font-family: var(--cp-font-body); font-weight: 700;
font-size: clamp(.85rem, 1.17vw, 30px); /* XD 35px, bewusst kleiner:
im XD gibt es die Allergen-Ziffern nicht, dadurch werden lange Titel
wie "16. Frutti di Mare 13,9 €" sonst zu eng in der Spalte. */
line-height: 1.3; color: var(--cp-white);
}
/* Preis exakt wie der Titel formatiert (XD: eine durchgehende Textzeile) */
.cp-menu .vclayouter_menu_item .vclayouter_menu_price {
float: none; margin-left: 0;
margin-top: 0 !important; /* schlaegt das Inline-style="margin-top:4px" aus dem PHP */
font-family: var(--cp-font-body); font-weight: 700;
font-size: clamp(.95rem, 1.37vw, 35px);
line-height: 1.3; color: var(--cp-white); white-space: nowrap;
}
.cp-menu .vclayouter_menu_item .menu_title:after { display: none; }
/* XD schreibt "01. Pizzabrot" – Punkt aus dem :after, Abstand aus dem padding */
.cp-menu .vclayouter_menu_item .menu_numbering { padding-right: .35em; }
.cp-menu .vclayouter_menu_item .menu_numbering:after { content: "."; }
/* Allergen-Ziffern stehen NICHT am Produktnamen, sondern als eigene Zeile
unter der Beschreibung – menu.js verschiebt das aus dem Titel dorthin.
(Das Speise-Element des Kunden bleibt dabei unangetastet.) */
.cp-menu .vclayouter_menu_item .menu_title sup { display: none; }
.cp-menu .cp-menu-item__codes {
margin-top: clamp(4px, .35vw, 9px);
font-family: var(--cp-font-body); font-weight: 400;
font-size: clamp(.66rem, .7vw, 18px);
line-height: 1.5; color: rgba(255,255,255,.6);
}
/* Zutatenzeile */
.cp-menu .vclayouter_menu_item .menu_feature_list li {
margin-top: 0;
font-family: var(--cp-font-body);
font-size: clamp(.78rem, .9vw, 23px); /* 23px @2560 */
line-height: 1.63; /* Zeilenabstand 38px @2560 */
color: var(--cp-white);
}
/* ---- Tab-Leiste ---------------------------------------------------------- */
.cp-menu .cp-menu-tabs .tabbed .wpb_tabs_nav {
display: flex; justify-content: center; align-items: stretch;
width: 100%; margin: 0 0 clamp(40px, 8.67vw, 222px); /* XD: Leiste 3151 → 1. Bild 3373 */
border-bottom: 0; line-height: normal;
background: var(--cp-red);
min-height: clamp(56px, 3.98vw, 102px); /* 102px @2560 */
}
/* weisse Trennlinie rechts an jedem Tab ausser dem letzten */
.cp-menu .cp-menu-tabs .tabbed .wpb_tabs_nav > li.tab-item {
float: none; flex: 1 1 0; margin: 0;
border-right: 2px solid var(--cp-white);
}
.cp-menu .cp-menu-tabs .tabbed .wpb_tabs_nav > li.tab-item:last-child { border-right: 0; }
.cp-menu .cp-menu-tabs .tabbed .wpb_tabs_nav > li:not(.cta-button) > a {
display: flex; align-items: center; justify-content: center;
height: 100%; padding: 0 clamp(10px, 1.2vw, 30px);
background: transparent; border: 0; color: var(--cp-white);
transition: opacity .25s ease;
}
.cp-menu .cp-menu-tabs .tabbed .wpb_tabs_nav > li > a > span {
font-family: var(--cp-font-display);
font-size: clamp(.95rem, 1.6vw, 41px); /* 41px @2560 */
letter-spacing: .02em; text-transform: uppercase;
}
.cp-menu .cp-menu-tabs .tabbed .wpb_tabs_nav > li > a:after { display: none; }
/* Hover: Schrift bleibt weiss, nur leicht transparent – kein Farbwechsel */
#ajax-content-wrap .cp-menu .cp-menu-tabs .tabbed .wpb_tabs_nav > li > a:hover {
background-color: transparent;
color: var(--cp-white);
opacity: .65;
}
/* aktiver Tab – #ajax-content-wrap schlaegt salient-dynamic-styles.css
XD ("Rechteck 350"): #A5030F, 102px hoch, ohne Abrundung */
#ajax-content-wrap .cp-menu .cp-menu-tabs .tabbed .wpb_tabs_nav > li > a.active-tab,
#ajax-content-wrap .cp-menu .cp-menu-tabs .tabbed .wpb_tabs_nav > li > a.active-tab:hover {
background-color: var(--cp-red-dark);
color: var(--cp-white);
border-color: transparent;
border-radius: 0;
opacity: 1;
}
.cp-menu .cp-menu-empty p { color: rgba(255,255,255,.85); text-align: center; }
/* ---- Hover: Foto dreht und zoomt leicht ---------------------------------- */
/* Der Spaltenabstand betraegt nur 12px – ohne z-index wuerde das vergroesserte
Bild die Nachbarkarte ueberlagern, deshalb wird die Karte beim Hover gehoben. */
.cp-menu .vclayouter_menu_item:hover { position: relative; z-index: 5; }
.cp-menu .menu_image_top img {
transition: transform .45s cubic-bezier(.22,.61,.36,1);
will-change: transform;
}
.cp-menu .vclayouter_menu_item:hover .menu_image_top img {
transform: rotate(-4deg) scale(1.06);
}
/* ---- Gestaffeltes Einblenden von unten ----------------------------------- */
/* Die Verzoegerung liefert menu.js ueber --cp-i (Position im aktuellen Schub).
Reveal-Transform sitzt auf .menu_image_top (dem DIV), Hover-Transform auf dem
![]()
darin – so kollidieren die beiden transform-Ebenen nicht. */
.cp-menu .vclayouter_menu_item {
opacity: 0;
transform: translateY(38px);
transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
transition-delay: calc(var(--cp-i, 0) * 80ms);
}
.cp-menu .menu_image_top {
transform: rotate(-7deg);
transition: transform .9s cubic-bezier(.22,.61,.36,1);
transition-delay: calc(var(--cp-i, 0) * 80ms);
}
.cp-menu .vclayouter_menu_item.is-visible { opacity: 1; transform: none; }
.cp-menu .vclayouter_menu_item.is-visible .menu_image_top { transform: none; }
/* Noch nicht nachgeladene Speisen */
.cp-menu .vclayouter_menu_item.cp-pending { display: none; }
@media (prefers-reduced-motion: reduce) {
.cp-menu .vclayouter_menu_item,
.cp-menu .menu_image_top,
.cp-menu .menu_image_top img { transition: none; transform: none; }
.cp-menu .vclayouter_menu_item { opacity: 1; }
.cp-menu .vclayouter_menu_item:hover .menu_image_top img { transform: none; }
}
/* ---- Nachlade-Spinner ("foodmenu-loader" aus dem XD) ---------------------- */
.cp-menu-more {
display: flex; justify-content: center; align-items: center;
padding: clamp(24px, 3.2vw, 82px) 0 0;
}
.cp-menu-more[hidden] { display: none; }
.cp-menu-more__spinner {
width: clamp(48px, 5.31vw, 136px); /* 136px @2560 */
aspect-ratio: 1 / 1;
background: url('../img/foodmenu-loader.svg') center / contain no-repeat;
animation: cp-spin 1s steps(12, end) infinite;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.cp-menu-more__spinner { animation-duration: 3s; }
}
/* ---- Legende (Zusatzstoffe & Allergene) ---------------------------------- */
/* Fliesstext, klein und dezent, unter den Produkten – im selben Container
wie das Raster, damit sie nicht am Bildschirmrand klebt. */
.cp-menu .cp-menu-legend {
padding-block: clamp(28px, 3.5vw, 90px) 0;
padding-inline: max(9.375%, calc((100% - 2080px) / 2));
}
.cp-menu-legend p {
margin: 0;
font-family: var(--cp-font-body);
font-size: clamp(.66rem, .62vw, 16px);
line-height: 1.75;
color: rgba(255,255,255,.62);
}
.cp-menu-legend b, .cp-menu-legend strong { font-weight: 700; color: rgba(255,255,255,.78); }
/* ---- Modal --------------------------------------------------------------- */
.cp-modal {
position: fixed; inset: 0; z-index: 10000;
display: flex; align-items: center; justify-content: center;
padding: 24px;
opacity: 0; visibility: hidden;
transition: opacity .3s ease, visibility .3s;
}
.cp-modal.is-open { opacity: 1; visibility: visible; }
.cp-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.62); cursor: pointer; }
.cp-modal__box {
position: relative;
display: flex; flex-wrap: wrap;
width: min(980px, 100%); max-height: 88vh; overflow-y: auto;
background: var(--cp-green); color: var(--cp-white);
border-radius: clamp(14px, 1.4vw, 34px);
box-shadow: 0 30px 80px rgba(0,0,0,.45);
transform: translateY(26px) scale(.97);
transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.cp-modal.is-open .cp-modal__box { transform: none; }
/* Salients Theme-Option schreibt global
body[data-button-style*="slightly_rounded"] button { border-radius:4px !important }
– dagegen kommt man nur mit !important an, daher hier bewusst gesetzt. */
#ajax-content-wrap .cp-modal .cp-modal__close,
.cp-modal .cp-modal__close {
position: absolute; top: 14px; right: 14px; z-index: 2;
width: 44px; height: 44px; min-width: 0; padding: 0;
display: flex; align-items: center; justify-content: center;
background: var(--cp-red); color: var(--cp-white);
border: 0; border-radius: 50% !important; cursor: pointer;
font-size: 22px; line-height: 1;
transition: background .25s ease, transform .25s ease;
}
#ajax-content-wrap .cp-modal .cp-modal__close:hover,
.cp-modal .cp-modal__close:hover { background: var(--cp-red-dark); transform: rotate(90deg); }
.cp-modal__media { flex: 1 1 340px; padding: 34px; display: flex; align-items: center; }
.cp-modal__media img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: contain; }
.cp-modal__media[hidden] { display: none; }
/* Flex-Spalte, damit der Preis per order/margin-top:auto nach ganz unten rutscht */
.cp-modal__body {
flex: 1 1 380px; padding: 44px 40px 40px;
font-family: var(--cp-font-body);
display: flex; flex-direction: column;
}
.cp-modal__title {
margin: 0 0 18px; /* der Preis sitzt jetzt unten, hier darf Luft rein */
font-family: var(--cp-font-body); font-weight: 700;
font-size: clamp(1.1rem, 1.6vw, 34px); line-height: 1.25; color: var(--cp-white);
}
/* Preis steht ganz unten rechts – order schiebt ihn ans Ende der Spalte,
margin-top:auto an den unteren Rand. */
.cp-modal__price {
order: 99;
margin-top: auto;
margin-bottom: 0;
padding-top: 26px;
text-align: right;
font-family: var(--cp-font-display);
font-size: clamp(1.3rem, 2vw, 40px); color: var(--cp-white);
}
.cp-modal__desc { font-size: clamp(.85rem, .95vw, 22px); line-height: 1.6; color: rgba(255,255,255,.92); }
.cp-modal__addons { margin-top: 18px; font-size: clamp(.8rem, .9vw, 20px); line-height: 1.6; color: rgba(255,255,255,.88); }
.cp-modal__addons[hidden] { display: none; }
.cp-modal__addons-title { font-weight: 700; margin-bottom: 4px; }
.cp-modal__allergene {
margin-top: 22px; padding-top: 18px;
border-top: 1px solid rgba(255,255,255,.22);
font-size: clamp(.7rem, .74vw, 18px); line-height: 1.65; color: rgba(255,255,255,.7);
}
.cp-modal__allergene[hidden] { display: none; }
.cp-modal__allergene-title { font-weight: 700; color: rgba(255,255,255,.85); }
@media (max-width: 690px) {
.cp-modal { padding: 12px; }
.cp-modal__media { padding: 24px 24px 0; }
.cp-modal__body { padding: 24px; }
}
/* ==========================================================================
INSTAGRAM (Startseite)
XD Artboard 1: Ueberschrift top 6961, rechtsbuendig, rechte Kante 2355
(= Container-Kante), 127px/117px. Streifen links davon, endet bei ~1245.
Fotoreihe ab x=323, Hoehe 674, Bilder ~511x674, laeuft rechts aus dem Rand.
========================================================================== */
/* Die Zeile ist full_width_content (damit der Streifen links den Rand
erreicht) – die rechte Textkante muss trotzdem auf der Container-Kante
sitzen (XD: 2355). */
.cp-insta-head .vc_column-inner {
padding-right: calc(max(0px, (100vw - 1780px) / 2) + 90px);
}
.cp-insta__title {
--cp-stripe-h: clamp(18px, 2.34vw, 60px);
position: relative;
text-transform: uppercase;
letter-spacing: .02em;
}
/* Streifenband links neben der Ueberschrift – gleiche Technik wie beim
MENUE-Titel: schraeg parallel zu den Streifen geschnitten, Breite so
gewaehlt, dass die Schraege in eine Luecke faellt (Rest 30 von 56,7).
20,35 x Hoehe = 1221 Einheiten, endet also kurz vor dem Text (1319). */
.cp-insta__title::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: calc(var(--cp-stripe-h) * 20.35);
height: var(--cp-stripe-h);
background: url('../img/section-divider.svg') repeat-x left center;
background-size: auto 100%;
clip-path: polygon(
0 0,
100% 0,
calc(100% - 0.667 * var(--cp-stripe-h)) 100%,
0 100%
);
}
@media (max-width: 999px) {
.cp-insta__title::before { display: none; }
}
/* Fotoreihe: beginnt im XD bei x=323 (12.6vw) – also etwas weiter innen als
die Container-Kante – und laeuft rechts aus dem Bild. */
.cp-insta-strip .vc_column-inner {
padding-left: min(12.6vw, 323px);
padding-right: 0;
margin-top: clamp(20px, 2.6vw, 66px); /* XD: 7234 -> 7320 */
}
/* Hashtag-Zeile endet auf der Container-Kante */
.cp-insta-foot .vc_column-inner {
padding-right: calc(max(0px, (100vw - 1780px) / 2) + 90px);
}
.cp-insta-strip .cp-insta__gallery .flickity-slider .cell,
.cp-insta-strip .cp-insta__gallery img {
aspect-ratio: 511 / 674; /* XD-Kachelformat */
object-fit: cover;
}
/* Hashtag + Icon.
WICHTIG: Inline-SVG im Beitragsinhalt wird von WordPress beim Speichern
entfernt (wp_kses). Das Icon kommt deshalb als CSS-Hintergrund, nicht als