/* ⛔⭐⭐ `hidden` JE ZAKON, ne prijedlog. MA 17.09: „pretraga tačno pogodi, ali
ne prebaci". Izmjereno: poslije „pljes" kartice ćevapa imaju `hidden`, a i
dalje se CRTAJU — `.vitrine__raster > .karte { display: grid }` (subgrid)
ima istu specifičnost kao `.karte[hidden]` i stoji KASNIJE, pa pobjeđuje.
Isti kvar je čekao svako `[hidden]` pravilo po komponenti. ⇒ jedno pravilo
za cijelu klasu; kapija (`suche-probe`) sad mjeri PIKSELE, ne atribut. */
[hidden] { display: none !important; }
/* ── Prelaz s vatre na ponudu ────────────────────────────────────────
⛔ Ovdje je prije stajao GOL WORDMARK i to je bio najgori šav na stranici:
gost stigne do žara, pročita „Martini" preko kadra — pa odmah ispod dobije
„Martini" opet u krupnom. Isto ime dva puta zaredom nije zaglavlje.
Sad je hijerarhija OBRNUTA: ime je tiha linija, krupno je ŠTA je ovo mjesto.
⛔ Ploha je PAPIR, ne nebo. Plan: „nebo se mijenja, papir ne" — u
srednjetonskoj zoni oko 16h nijedna tinta ne daje 4,5:1 preko neba
(mjereno 1,06:1), jer je problem pozadina a ne boja slova. */
.uebergang {
background: var(--papier);
color: var(--tinte);
padding: var(--raum-5) var(--raum-3) var(--raum-4);
border-bottom: var(--kante);
}
.uebergang__titel { display: grid; gap: 2px; margin: 0 0 var(--raum-3); }
.uebergang__marke {
font-family: var(--schrift-display);
font-size: var(--t-text);
font-variation-settings: 'wght' 700, 'wdth' 90;
letter-spacing: .02em;
}
.uebergang__sub {
font-size: var(--t-mini);
letter-spacing: .1em; text-transform: uppercase;
color: var(--tinte-leise);
}
/* Krupno je RECENICA, ne ime — to je jedina razlika izmedju prelaza i
ponovljenog zaglavlja. */
.uebergang__satz {
margin: 0;
font-family: var(--schrift-display);
font-size: clamp(2rem, 9vw, 4.2rem);
font-variation-settings: 'opsz' 72, 'wght' 620, 'wdth' 90;
letter-spacing: -0.03em;
line-height: .98;
}
.uebergang__lead {
margin: var(--raum-3) 0 0;
max-width: 34rem;
color: var(--tinte-leise);
}
.uebergang__weiter { margin: var(--raum-3) 0 0; }
.uebergang__weiter a {
display: inline-flex; align-items: center; gap: .5em;
color: var(--akzent-tinte); text-decoration: none;
font-size: var(--t-klein);
border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.uebergang__weiter a::after { content: '\2193'; }
/* ── ⭐⭐ DUBINA STRANICE — papir, a ne bijeli slajd ────────────────────
Adi 16.09: *„mislio sam OPĆENITO pozadinu stranice… ovaj dio treba da bude
mnogo bolje, ovako je nekako kao slop."* Zahtjev nije ukras nego TLO:
cjenovnik je deset ekrana ISTE ravne plohe, a nijedan dobar sajt ne pusti
oko dalje od dva ekrana bez promjene tla.
⛔ Bez ijednog zahtjeva na mrežu: zrno je inline SVG (feTurbulence, ~320 B),
ne slika. Sajt ostaje na 0 vanjskih zahtjeva.
⛔ Kontrast se NE DIRA: zrno 3,5 %, tonski prelaz do 22 % neba koje je i
dosad bilo u papiru. Tinta na papiru ostaje ~14:1 i a11y kapija to mjeri
na svih pet stanja dana.
⭐ Zrno je `fixed` a tint `scroll`: papir stoji dok sadržaj putuje preko
njega, pa se stranica čita kao ODŠTAMPANA, ne kao web-gradijent. */
/* ⛔⭐⭐ 17.09 — STRANICA SE NE SMIJE VUĆI USTRANU, NI KAD NEŠTO PROMAŠI.
MA je s iPhonea vidio ono što sprava ne vidi: slovo izlazi iz ekrana i
stranica se klati lijevo-desno. Uzrok je popravljen tamo gdje jeste
(`.orte`, `min-width: 0`), ali ovo je POJAS: jedan promašen element više ne
može pomjeriti cijelu stranicu.
⛔ `clip`, ne `hidden`: `hidden` na korijenu pravi klizni kontekst i ubija
`position: sticky` (traka čipova, sat). `clip` samo odsijeca.
⛔ Samo vodoravno — okomiti skrol mora ostati netaknut.
⛔ Kapija `kein-ueberlauf` zbog ovoga mjeri i POJEDINE elemente, ne samo
širinu dokumenta — inače bi pojas učinio kapiju zelenom u vakuumu. */
html { overflow-x: clip; }
body {
background-image:
radial-gradient(130% 55% at 50% 0%,
color-mix(in oklab, var(--himmel-oben) 22%, transparent),
transparent 72%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23z)' opacity='0.035'/%3E%3C/svg%3E");
background-repeat: no-repeat, repeat;
background-attachment: scroll, fixed;
background-size: 100% 46rem, 180px 180px;
}
/* ⭐ Šav trake i papira. Traka dana je nebo, vitrina je papir — bez prelaza
je to bio rez. Sad papir „primi" boju neba i pusti je u dva ekrana.
⛔ `::before` sjedi IZNAD papira a ISPOD sadržaja (z-index 0 vs čipovi 20),
pa ne otima nijedan klik. */
.vitrine { position: relative; isolation: isolate; }
/* ⭐ TINTA S PREGIBIMA. MA 16.09: prvo „izguzvan papir, ne bukvalno" na
svijetlom — cital se i dalje kao bijelo. Grill na tinti mu je bio „super"
⇒ „sve tamno kao Grill". Plocica je besavna i izracunata
(`scripts/papier-bauen.py`, 0 $): topli pregibi ±9 nivoa na tinti.
⛔ Skripta PADA ako najtamniji tekst na podlozi (`.gruppe__zahl`) na
najsvjetlijem 1 % plocice ode ispod 4,5:1. */
.vitrine {
background-color: var(--tinte);
background-image: url('/static/bilder/papier-nacht.webp');
background-size: 512px 512px;
}
/* Poglavlja su providna — tlo je JEDNO, pa se tekstura ne lomi na svakoj
granici kategorije, a razmak izmedju poglavlja nije svijetla pukotina. */
.vitrine .gruppe--nacht { background: transparent; margin-bottom: 0; }
.vitrine .vitrine__leer { color: color-mix(in oklab, var(--papier) 72%, var(--tinte)); }
.vitrine::before {
display: none; /* nebo preko tinte bi je izbijelilo — tlo je sad tinta */
content: '';
position: absolute; inset: 0 0 auto 0; height: 18rem;
z-index: -1;
background: linear-gradient(to bottom,
color-mix(in oklab, var(--himmel-unten) 42%, transparent),
transparent);
pointer-events: none;
}
/* ── Traka dana ─────────────────────────────────────────────────────── */
.tagesband {
--band-rand: var(--raum-3);
background: linear-gradient(170deg, var(--himmel-oben), var(--himmel-unten));
color: var(--himmel-tinte);
padding: var(--raum-4) var(--band-rand) var(--raum-4);
overflow: hidden;
min-height: 42vh; /* v1 52vh je gurao vitrinu predaleko dolje */
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: var(--raum-3);
}
/* ⛔ Bez mono. Bez letter-spacing .14em uppercase — to je AI-site tell. */
.tagesband__eyebrow {
font-size: var(--t-mini);
font-variation-settings: 'wght' 600;
margin: 0 0 var(--raum-1);
opacity: 0.75;
}
[data-modus="vorschau"] .tagesband__eyebrow { color: var(--akzent); opacity: 1; }
/* ⭐ Naslov odsjeka: wdth osa vezana za sat — jutro usko i hladno,
večer široko i toplo. Osa sa značenjem, ne dekor koji se vidi jednom. */
.tagesband__titel {
font-family: var(--schrift-display);
font-size: var(--t-display);
line-height: 1.02;
letter-spacing: -0.03em;
margin: 0;
font-variation-settings: 'wght' 500, 'wdth' calc(80 + 20 * var(--tag-fortschritt));
}
/* Duga imena odsjeka („Nachmittagsjause") ne smiju izaći iz ekrana.
⛔ --zeichen postavlja server (i JS pri prevlačenju) — bez toga bi ovo
pravilo uvijek računalo s fallbackom i ne bi radilo ništa. */
.tagesband__kopf { container-type: inline-size; }
@container (max-width: 420px) {
.tagesband__titel { font-size: clamp(2rem, calc(160cqi / var(--zeichen, 10)), 3.4rem); }
}
.tagesband__rest {
font-size: var(--t-klein);
margin: var(--raum-1) 0 0;
opacity: 0.9;
}
/* ⭐⭐ POZORNICA ODSJEKA — traka dobija subjekt.
Cetiri kadra u istom studiju; prevlacenje ih PRETAPA, pa gost vidi kako
dan prelazi iz jednog jela u drugo. To je razlika izmedju klizaca i
instrumenta.
⛔ Slika NIKAD ne stoji ispod teksta — vidi obrazlozenje u sablonu. */
.tagesband__buehne {
position: relative;
/* ⛔⭐ BILO JE `width: 100%` UNUTAR PADINGA sekcije + `border-radius` ⇒ kadar
je lebdio kao slicica u okviru, a ne nosio odsjek. Traka je POTPIS ovog
sajta; njen subjekt mora biti PLOHA. Negativna margina mora tacno pratiti
pading sekcije — zato je pading sad token `--band-rand`. */
width: auto;
margin-inline: calc(var(--band-rand) * -1);
/* ⛔ Kapa na telefonu: bez nje 3:2 preko pune sirine gurne traku i sat
ispod ruba ekrana, pa gost ne vidi ono cime upravlja.
⭐ 16.09: 32 → 30svh. Preporuka je dodala red ispod teksta, pa se visina
vraća kadru samo onoliko koliko sat i šina mogu podnijeti. Mjereno na
390×844: cijela traka staje bez skrola.
⛔⭐⭐ BEZ `aspect-ratio` + `max-height`. WebKit (Safari) kroz omjer iz
visinske kape računa i ŠIRINU: na 390 px kadar je bio 380 (Adi: „fali
komad sa desne strane"), na 768 px 405. Chromium je rastezao, pa je
svaka kapija na njemu bila zelena. ⇒ Visina ZADANA (3:2 od širine, kapa
30svh), širinu drži blok. Kapija: `scripts/rub-do-ruba.mjs`. */
height: min(calc(100vw * 2 / 3), 30svh);
overflow: hidden;
background: color-mix(in oklab, var(--himmel-unten) 72%, var(--himmel-oben));
}
/* ⛔⭐ MA 16.09: „video gore nije dobro centriran, ima praznina izmedju".
Pading sekcije je ostavljao 32 px neba iznad kadra ⇒ ploha je visila ispod
stranice iznad. Ispod 900 px kadar dira i GORNJI rub trake (`rub-do-ruba`). */
@media (max-width: 899px) {
.tagesband__buehne { margin-top: calc(var(--raum-4) * -1); }
}
.tagesband__kader {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 520ms var(--kurve);
}
.tagesband__kader.ist-jetzt { opacity: 1; }
/* ⛔⭐ Zatvoreno pokazuje kadar PRVOG odsjeka, ali pritamnjen: noć mora ostati
noć. Bez ovoga bi svijetla fotografija doručka na tamnom nebu izgledala kao
da je pekara otvorena. Obrazloženje stoji u šablonu i u `tagesband.js`. */
.tagesband[data-zu="ja"] .tagesband__kader.ist-jetzt {
opacity: .82;
filter: brightness(.58) saturate(.82);
}
@media (prefers-reduced-motion: reduce) {
.tagesband__kader { transition: none; }
}
/* ⭐⭐ PREPORUKA DOBA DANA — traka kaže ŠTA je dobro sad, ne samo koji je sat.
⛔ Tekst i cijena stoje POD fotografijom, nikad preko nje: tekst na slici
traži mjerenje kontrasta po kadru, a to je već jednom bila zelena kapija
nad pogrešnim artefaktom.
⛔⭐ Adi 16.09: „ovaj dio treba da bude mnogo bolje, ovako je nekako kao
slop." Tri stvari su to pravile: blok je visio bez ŠAVA prema tekstu,
slike su bile 4:3 pa je red bio nemiran, i naslov je imao istu težinu kao
rečenica iznad. ⇒ hairline kao šav, kvadratni kadrovi (isti oblik kao
kartice u vitrini), naslov u tišem registru. */
.empfehlung {
margin-top: var(--raum-4);
padding-top: var(--raum-3);
border-top: 1px solid color-mix(in oklab, currentColor 20%, transparent);
}
.empfehlung--leer { display: none; }
/* Tiši registar od rečenice iznad: ovo je LABELA, ne druga tvrdnja o satu. */
/* ⛔⭐ 16.09: VERZAL s razmakom (.06em uppercase) je isti AI-tell koji je
ova traka vec izbacila iz eyebrowa (vidi gore). Rečenica ostaje rečenica. */
.empfehlung__titel {
font-family: var(--schrift-display);
font-size: var(--t-klein);
font-variation-settings: 'opsz' 24, 'wght' 560;
letter-spacing: -0.01em;
margin: 0 0 var(--raum-2);
}
.empfehlung__liste {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--raum-2);
}
/* ⛔⭐ 16.09: ime je drzalo mjesto za DVA reda (`min-height`) da cijene stoje
u istom redu — pa je ispod jednorednog imena zjapila rupa do cijene.
⇒ Cijena ide ODMAH ispod slike (uvijek jedan red, pa su sve tri u istoj
liniji bez rezervisanog prostora), ime ispod nje se lomi slobodno.
⛔ DOM red ostaje ime → cijena (citac ekrana); mijenja se samo crtez. */
.empfehlung__link {
display: grid; grid-template-rows: auto auto auto; row-gap: .3rem;
color: inherit; text-decoration: none;
}
.empfehlung__link .empfehlung__bild { grid-row: 1; margin-bottom: .15rem; }
.empfehlung__link .empfehlung__preis { grid-row: 2; }
.empfehlung__link .empfehlung__name { grid-row: 3; }
/* ⛔ Kvadrat, ne 4:3 — isti oblik kao kartice u vitrini ispod. Dva različita
odnosa stranica na istom ekranu su ono što oko čita kao „slop". */
.empfehlung__bild {
width: 100%; height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
background: color-mix(in oklab, var(--himmel-unten) 60%, var(--himmel-oben));
}
/* ⛔ CIJENE STOJE U ISTOM REDU — sad zato sto su iznad imena (vidi `.empfehlung__link`). */
.empfehlung__name { font-size: var(--t-mini); line-height: 1.25; }
.empfehlung__preis { font-size: var(--t-mini); }
.empfehlung__link:hover .empfehlung__name { text-decoration: underline; }
.empfehlung__link:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
/* ⭐⭐ INSTRUMENT DANA — MA 16.09: bez klizaca, bez sata; traka se puni od 6
do 22. Cetiri DIONICE (sirina = trajanje odsjeka iz baze, `flex-grow`),
svaka se puni do stvarne minute. Ispod: sat pocetka + ime odsjeka.
⭐ Punjenje ide kao JEDAN potez kroz dan: kasnjenje i trajanje svake dionice
su proporcionalni njenom mjestu u danu (`--puni` ukupno).
⛔ Samo `transform: scaleX` — kompozitor, tece i na iOS-u. */
.tagesband__schiene {
--puni: 1.9s;
position: relative;
margin: 0;
}
.tagesband__abschnitte {
list-style: none; margin: 0; padding: 0;
display: flex; gap: 3px;
}
.tagesband__streifen {
--anteil: clamp(0, calc((var(--jetzt-min) - var(--von)) / (var(--bis) - var(--von))), 1);
flex: calc(var(--bis) - var(--von)) 1 0;
min-width: 0;
display: flex; flex-direction: column; gap: .45rem;
}
.tagesband__dionica {
position: relative; display: block;
height: 3px; border-radius: 2px;
background: color-mix(in oklab, currentColor 16%, transparent);
}
.tagesband__dionica i {
position: absolute; inset: 0; border-radius: inherit;
background: var(--akzent);
transform-origin: left center;
transform: scaleX(0);
transition: transform
calc((var(--bis) - var(--von)) / var(--band-spanne) * var(--puni) * var(--anteil)) linear
calc((var(--von) - var(--band-von)) / var(--band-spanne) * var(--puni));
}
.tagesband.ist-sichtbar .tagesband__dionica i { transform: scaleX(var(--anteil)); }
/* Poslije prvog punjenja minuta se pomjera mirno, bez talasa kroz dan. */
.tagesband.ist-gefuellt .tagesband__dionica i { transition: transform .8s var(--kurve); }
/* „Sada" — tacka na kraju ispune tekuce dionice; dise tek kad dan stigne do nje. */
.tagesband__streifen.ist-jetzt .tagesband__dionica::after {
content: ''; position: absolute; top: 50%;
left: calc(var(--anteil) * 100%);
width: 9px; height: 9px; border-radius: 50%;
translate: -50% -50%;
background: var(--akzent);
opacity: 0; scale: .4;
transition: opacity .35s var(--kurve), scale .35s var(--kurve), left .8s var(--kurve);
}
.tagesband.ist-sichtbar .tagesband__streifen.ist-jetzt .tagesband__dionica::after {
opacity: 1; scale: 1;
transition-delay: calc(var(--puni) * (var(--jetzt-min) - var(--band-von)) / var(--band-spanne));
animation: tagesband-atem 2.8s ease-out calc(var(--puni) + .4s) infinite;
}
@keyframes tagesband-atem {
0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--akzent) 55%, transparent); }
70% { box-shadow: 0 0 0 9px color-mix(in oklab, var(--akzent) 0%, transparent); }
100% { box-shadow: 0 0 0 9px transparent; }
}
.tagesband__stunde {
font-family: var(--schrift-mono); font-variant-numeric: tabular-nums;
font-size: .66rem; line-height: 1; opacity: .55;
}
.tagesband__name {
font-size: var(--t-mini); line-height: 1.1;
white-space: nowrap; overflow: hidden; text-overflow: clip;
opacity: .62;
transition: opacity var(--takt) var(--kurve);
}
.tagesband__streifen.ist-vorbei .tagesband__name { opacity: .42; }
.tagesband__streifen.ist-jetzt .tagesband__name { opacity: 1; font-variation-settings: 'wght' 650; }
.tagesband__streifen.ist-jetzt .tagesband__stunde { opacity: .9; }
.tagesband__ende {
position: absolute; right: 0;
top: calc(3px + .45rem);
font-family: var(--schrift-mono); font-variant-numeric: tabular-nums;
font-size: .66rem; line-height: 1; opacity: .55;
}
/* Zatvoreno: dan je prazan (prije 6) ili pun (poslije 22) — bez tacke „sada". */
.tagesband[data-zu="ja"] .tagesband__dionica::after { display: none; }
@media (prefers-reduced-motion: reduce) {
.tagesband__dionica i { transition: none; }
.tagesband__streifen.ist-jetzt .tagesband__dionica::after { animation: none; transition: none; }
}
/* ⭐ TELEFON: instrument stoji ODMAH ISPOD FILMA — sav na jednom mjestu:
kadar odsjeka, pa gdje je dan, pa sta je dobro sad. */
@media (max-width: 899px) {
.tagesband__buehne { order: 0; }
.tagesband__schiene { order: 1; }
.tagesband__kopf { order: 2; }
}
@media (min-width: 900px) {
.tagesband {
--band-rand: var(--raum-5);
padding: var(--raum-6) var(--band-rand) var(--raum-5);
min-height: 56vh;
/* ⭐ Dvije kolone: rijec lijevo, kadar desno, staza preko cijele sirine.
Staza mjeri CIJELI dan pa se ne smije stisnuti u pola table. */
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
grid-template-areas: "kopf buehne" "schiene schiene";
align-content: end;
align-items: end;
column-gap: var(--raum-5);
}
.tagesband__kopf { grid-area: kopf; }
/* ⛔⭐ Na desktopu je kadar bio VISINOM stegnut (`aspect-ratio` + `max-height`)
pa je ispao 459 px u koloni od 640 — slicica u praznom polju umjesto plohe.
⇒ Visina je zadana, sirina puna, slika pokriva (`object-fit: cover` je vec
na ``). Bleed ide SAMO desno: lijevo je tekst i mora zadrzati mjeru. */
.tagesband__buehne {
grid-area: buehne;
aspect-ratio: auto;
/* ⛔⭐ ADI 15.09: „bolje centrirati sliku". Kadar je imao VLASTITU visinu
(`clamp(12rem, 27svh, 17rem)`) pa je visio u gornjem desnom uglu dok je
tekst sjedao na dno reda — izmjereno 243 px slike naspram 420 px teksta,
s ~180 px praznog polja iznad naslova. Sad kadar PRATI visinu tekstualne
kolone (`stretch`), pa dvije kolone stoje kao dvije jednake plohe.
⛔ Ne vraćati fiksnu visinu: ona se razilazi sa svakim redom teksta koji
se doda (preporuka je upravo to i dodala). */
align-self: stretch;
height: auto;
min-height: 14rem;
max-height: none;
margin-inline: 0 calc(var(--band-rand) * -1);
}
.tagesband__schiene { grid-area: schiene; margin-top: var(--raum-4); }
/* ⛔ `min-height: 42vh` je na sirokom ekranu ostavljao prazno polje IZNAD
teksta (sadrzaj sjeda na dno). Visinu sad daje sadrzaj + pading. */
.tagesband { min-height: auto; }
.uebergang { padding: var(--raum-6) var(--raum-5) var(--raum-5); }
}
/* ── Čipovi: tekst-tabovi, ne pilule ────────────────────────────────
⛔ Bez backdrop-filter (repaint na 40 redova + tell) i bez 999px pilula. */
.vitrine__chips {
position: sticky; top: 0; z-index: 20;
/* ⛔⭐⭐ 16.09: DVA REDA NA TELEFONU. U jednom klizaču su sat i pretraga
bili „ljepljivi" preko čipova, pa je na 390 px od 18 kategorija bilo
vidljivo samo presječeno „Kondi". Gost nije vidio da traka uopšte
postoji. ⇒ gore sat + pretraga, ispod čipovi preko cijele širine. */
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "uhr suche" "reihe reihe";
align-items: center;
gap: var(--raum-1) var(--raum-3);
padding: var(--raum-2) var(--raum-3) 0;
background: color-mix(in oklab, var(--papier) 95%, var(--himmel-oben));
border-bottom: var(--kante);
}
.chips__uhr { grid-area: uhr; }
#vitrine-suche { grid-area: suche; justify-self: end; }
.chips__reihe {
grid-area: reihe;
position: relative; /* `chip.offsetLeft` se mjeri od klizača (vitrine.js) */
display: flex; align-items: center; gap: var(--raum-3);
overflow-x: auto;
scrollbar-width: none;
overscroll-behavior-x: contain;
/* Čip na rubu klizača ne smije sjesti u masku. */
scroll-padding-inline: 3rem;
padding-bottom: 2px;
}
.chips__reihe::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
.vitrine__chips {
grid-template-columns: auto auto minmax(0, 1fr);
grid-template-areas: "uhr suche reihe";
padding: var(--raum-2) var(--raum-3);
row-gap: 0;
}
#vitrine-suche { justify-self: start; }
}
/* ⛔⭐ RUB KOJI KAZE DA IMA JOS. Bez ovoga je zadnji cip bio presjecen rubom
ekrana i to se citalo kao KVAR, ne kao klizac. Maska se pali tek kad stvarno
ima prelijeva — `vitrine.js` postavlja `data-rand` na KLIZAČ čipova. */
.chips__reihe[data-rand="rechts"] {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}
.chips__reihe[data-rand="links"] {
-webkit-mask-image: linear-gradient(to right, transparent, #000 3rem);
mask-image: linear-gradient(to right, transparent, #000 3rem);
}
.chips__reihe[data-rand="oba"] {
-webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}
/* Vrijeme preživljava skrol. */
.chips__uhr {
flex: 0 0 auto;
font-family: var(--schrift-mono);
font-variant-numeric: tabular-nums;
font-size: var(--t-mini);
color: var(--akzent-tinte);
font-weight: 600;
}
/* ⛔⭐ ADI 15.09: „izgleda jeftino."
Ovdje je stajao SISTEMSKI `` — sivi okvir iz pregledaca
pored Bricolagea i tabularnih cijena. Jedan takav element obori utisak
cijele trake, jer je jedini piksel na stranici koji nismo mi nacrtali.
⇒ Podvucen red, ne kutija. Lupa je inline SVG u `data:` URI — ⛔ i dalje
NULA vanjskih zahtjeva, sto je prodajni argument ovog sajta. */
#vitrine-suche {
width: 7.5rem;
border: 0; border-bottom: 1px solid var(--linie);
border-radius: 0;
padding: var(--raum-1) var(--raum-1) var(--raum-1) 1.15rem;
font: inherit; font-size: var(--t-mini);
background: transparent no-repeat left center / .8rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235f584e' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cpath d='M10.4 10.4 14 14'/%3E%3C/svg%3E");
color: var(--tinte);
transition: width var(--takt) var(--kurve), border-color var(--takt) var(--kurve);
min-height: 34px;
}
#vitrine-suche::placeholder { color: var(--tinte-leise); }
#vitrine-suche:focus {
outline: none;
width: 11rem;
border-bottom-color: var(--akzent);
}
/* ⛔⭐⭐ iOS ZUMIRA svako polje sa slovima ispod 16 px (MA 17.09: „ekran se
zumira samo u search"). 12,5 px je bilo dovoljno da Safari uveća stranicu
pri fokusu i ostavi gosta u uvećanom polju bez hrane u kadru.
⛔ `pointer: coarse`, ne širina: iPad u pejzažu je širok, a zumira isto. */
@media (pointer: coarse) {
#vitrine-suche { font-size: 16px; width: 8.5rem; }
#vitrine-suche:focus { width: min(100%, 15rem); }
}
/* ── Pogoci pretrage ────────────────────────────────────────────────
Lista visi ispod ljepljive trake, preko cjenovnika — traka je `sticky`,
pa je lista uvijek odmah ispod polja u koje gost kuca. */
.suche__treffer {
position: absolute; left: 0; right: 0; top: 100%;
margin: 0; padding: var(--raum-1) 0;
list-style: none;
max-height: min(24rem, 52svh);
overflow-y: auto; overscroll-behavior: contain;
background: var(--papier);
border-bottom: var(--kante);
box-shadow: 0 18px 32px -18px color-mix(in oklab, var(--tinte) 45%, transparent);
}
.suche__treffer[hidden] { display: none; }
.suche__treffer a {
display: grid;
grid-template-columns: 2.75rem minmax(0, 1fr) auto;
align-items: center; gap: var(--raum-3);
min-height: 3.25rem;
padding: var(--raum-1) var(--raum-3);
color: var(--tinte); text-decoration: none;
}
.suche__treffer a:hover,
.suche__treffer [aria-selected="true"] a { background: color-mix(in oklab, var(--akzent) 12%, var(--papier)); }
.suche__bild {
width: 2.75rem; height: 2.75rem; border-radius: 3px;
object-fit: cover; display: block;
background: color-mix(in oklab, var(--tinte) 8%, var(--papier));
}
.suche__name { line-height: 1.25; }
.suche__preis { font-size: var(--t-klein); color: var(--tinte-leise); white-space: nowrap; }
@media (min-width: 900px) {
.suche__treffer { left: auto; right: auto; width: 26rem; margin-left: var(--raum-3); }
}
/* Jelo na koje je pretraga dovela — kratko, pa nestaje. */
.ist-gesucht { animation: gesucht 1.8s var(--kurve) 1; }
@keyframes gesucht {
0%, 35% { box-shadow: 0 0 0 3px var(--akzent); }
100% { box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) {
.ist-gesucht { animation: none; box-shadow: 0 0 0 3px var(--akzent); }
}
/* ⛔ Sistemski „x" u Chromeu je jedini preostali tudji piksel — sklanja se,
jer pretraga se prazni brisanjem i `Esc`-om kao svako polje. */
#vitrine-suche::-webkit-search-cancel-button { -webkit-appearance: none; }
.chip {
flex: 0 0 auto;
font-size: var(--t-mini);
text-decoration: none; color: var(--tinte-leise);
padding: var(--raum-1) 0;
border-bottom: 2px solid transparent;
white-space: nowrap;
transition: color var(--takt) var(--kurve), border-color var(--takt) var(--kurve);
}
/* ⛔ META ZA PRST. „Eis" je bio 17 px širok — ispod WCAG 2.2 minimuma (24 px).
Nevidljivi pading proširi metu, a negativna margina vrati izgled: razmak
među čipovima (--raum-3) je veći od dva padinga, pa se mete ne preklapaju.
Kapija: `scripts/pregled.mjs`. */
.chip {
padding-inline: .55rem; margin-inline: -.55rem; /* 2 × .55 < razmak 1,15rem */
min-height: 2.25rem; display: inline-flex; align-items: center;
}
.chip:hover, .chip:focus-visible { color: var(--tinte); }
/* Podvlaka je širine RIJEČI, ne mete: crta se u `content-box`, pa nevidljivi
pading ispod ne produžava liniju. */
.chip[aria-current="true"] {
color: var(--tinte);
background: linear-gradient(var(--akzent), var(--akzent)) no-repeat left bottom / 100% 2px;
background-origin: content-box; background-clip: content-box;
}
.hinweis {
margin: 0;
padding: var(--raum-2) var(--raum-3);
font-size: var(--t-mini);
color: var(--tinte-leise);
border-bottom: var(--kante);
}
/* ── ⭐⭐ OSA VARIJABILNOG FONTA VEZANA ZA SKROL ────────────────────────
Prva tehnika ove vrste na bilo kom nasem sajtu. Bricolage je varijabilan
(`wght` 200–800, `wdth` 75–100) i do sada su te ose stajale ZAKUCANE —
platili smo varijabilni fajl a vozili ga kao obican font.
Naslov odsjeka se OTVARA dok ulazi u ekran: uzak i lagan dok je na rubu,
pun i sirok kad sjedne. Oko to cita kao da se stranica sklapa pod prstom.
⛔ NULA JavaScripta i nula biblioteka: `animation-timeline: view()` vozi
brauzer, pa nema ni scroll-slusaca ni `requestAnimationFrame` petlje uz
40 naslova. Gdje `view()` ne postoji (starije verzije), naslov jednostavno
stoji na svojoj zavrsnoj vrijednosti — nista se ne kvari.
⛔ `prefers-reduced-motion` gasi cijelu stvar.
⛔ Interpolacija `font-variation-settings` radi SAMO ako obje strane nabroje
ISTE ose ISTIM redom. Inace brauzer skoci umjesto da klizi.
Kapija: `scripts/achse-probe.mjs` — mjeri STVARNU SIRINU iscrtanog naslova
prije i poslije ulaska. ⛔ Ne `getComputedStyle`: on vrati deklaraciju,
a ne ono sto je font zaista uradio. [[reference_font_face_tech_variations_kills_src]] */
@keyframes titel-oeffnen {
from { font-variation-settings: 'wght' 540, 'wdth' 86; }
to { font-variation-settings: 'wght' 690, 'wdth' 100; }
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.gruppe__titel, .handwerk__titel {
animation: titel-oeffnen linear both;
animation-timeline: view();
animation-range: entry 8% cover 30%;
}
}
}
/* ── Vitrina ────────────────────────────────────────────────────────── */
/* ⛔ Rub vitrine je TOKEN jer ga noćno poglavlje poništava negativnom
marginom. Dvije odvojene brojke bi tiho otišle u drift i poglavlje bi
virilo iz stranice ili ne bi doseglo rub. */
.vitrine { --vitrine-rand: var(--raum-3); padding: var(--raum-4) var(--vitrine-rand) 0; }
/* ── Grupa (kategorija) ─────────────────────────────────────────────────
Broj + ime + brojac. Broj nije ukras: daje ritam koji obicna mreza nema,
pa oko zna gdje je u dokumentu duzem od cetiri ekrana. */
/* ⛔ Sidro mora sjesti ISPOD ljepljive trake čipova — na telefonu je ona sad
u dva reda. Vrijedi i za skok iz preporuke na karticu jela. */
:root { --chips-hoehe: 6.5rem; }
@media (min-width: 900px) { :root { --chips-hoehe: 4rem; } }
.gruppe { margin-bottom: var(--raum-5); scroll-margin-top: var(--chips-hoehe); }
.karte, .zeile { scroll-margin-top: calc(var(--chips-hoehe) + var(--raum-2)); }
.gruppe[hidden] { display: none; }
.gruppe__kopf {
display: flex; align-items: baseline; gap: var(--raum-2);
padding-bottom: var(--raum-2);
border-bottom: 2px solid var(--tinte);
margin-bottom: var(--raum-3);
}
.gruppe__nr {
font-family: var(--schrift-mono); font-variant-numeric: tabular-nums;
font-size: var(--t-mini); font-weight: 600;
color: var(--akzent-tinte); flex: 0 0 auto;
}
.gruppe__titel { /* ⛔ nikad centrirano */
flex: 1 1 auto; text-align: left;
font-size: var(--t-gross);
font-variation-settings: 'wght' 680, 'wdth' 88;
}
.gruppe__zahl {
font-family: var(--schrift-mono); font-size: var(--t-mini);
color: var(--tinte-leise); flex: 0 0 auto;
}
/* ── ⭐ IZLOG — mreza fotografija, ne odstampan cjenovnik ───────────────
Kvadrat je nosilac. Cijena sjeda ISPOD slike u mono koloni.
⛔ Bez sjenke i bez jakog radiusa: registar je „precizno", ne „app store".
⭐ Prva kartica u grupi drzi DVA polja — bez toga je mreza ravna traka
od 40 identicnih kvadrata, sto je tabela s fotkama, ne izlog. */
.vitrine__raster {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(2, 1fr);
gap: var(--raum-3) var(--raum-2);
}
/* ⛔⭐ ADI 15.09: „izgleda jeftino."
Kartica je bila GOLA FOTOGRAFIJA na istom papiru kao pozadina, s imenom i
cijenom ispod. To je default raster svakog buildera — nema plohe, nema ruba,
nema nicega sto bi reklo da je ovo PREDMET a ne slika u dokumentu.
⇒ Kartica dobija svoju plohu i svoj rub, a cijena svoj red ispod linije —
tacno kao stavka na dobro odstampanom cjenovniku.
⛔ I dalje bez sjenke i bez jakog radiusa: registar je „precizno", ne
„app store". Ploha se razlikuje od papira za 3 %, ne za sjenku. */
/* ⛔⭐ MALE KATEGORIJE NE SMIJU OSTAVLJATI PRAZAN RED.
Mjereno na /api/vitrine: Menü, Kapsalon, Pommes i Salat imaju po JEDAN
artikal, Teller dva. U mrezi od cetiri kolone takav red je tri cetvrtine
prazan papir — pet takvih redova kroz cjenovnik i stranica „izgleda prazno"
iako je puna. ⇒ Kad ima malo artikala, kartica postaje SIRA, a fotografija
dobija filmski odnos stranica umjesto kvadrata. Red je pun, bez ijednog
izmisljenog artikla. ⛔ Veliko polje (`--hervor`) server vise i ne dodjeljuje
grupama manjim od cetiri — vidi `store_routes.py`. */
.gruppe[data-anzahl="1"] .vitrine__raster { grid-template-columns: 1fr; }
/* ⛔ Na telefonu 16:9, na desktopu 32:9 — bez ovoga je jedan artikal dobijao
banner visok ~570 px za jelo od 6 €, sto je druga krajnost iste greske. */
.gruppe[data-anzahl="1"] .karte__rahmen { aspect-ratio: 16 / 9; }
@media (min-width: 900px) {
.gruppe[data-anzahl="1"] .karte__rahmen { aspect-ratio: 32 / 9; }
}
.gruppe[data-anzahl="2"] .karte__rahmen { aspect-ratio: 16 / 10; }
@media (max-width: 619px) {
.gruppe[data-anzahl="2"] .vitrine__raster { grid-template-columns: 1fr; }
/* Neparan broj u dvije kolone ostavlja zadnju karticu samu uz pola praznog
reda. Neka zauzme cijeli red — ista logika kao za male kategorije. */
/* ⛔⭐⭐ 16.09: NE širi je u 16:9. WebKit (Safari) u `subgrid` redu
pogrešno dijeli visinu slike koja se proteže preko dvije kolone:
izmjereno na Pizzi — gornje kartice dobiju 31 px rupe iznad imena, a
široka kartica ime i cijenu ISPOD slike (nevidljivo). Chromium tačno.
⇒ Zadnja neparna kartica ostaje ISTE veličine kao ostale i stoji u
SREDINI svog reda — isto pravilo kao u najavi. Kapija: `ime-uz-sliku`. */
/* ⛔⭐⭐ 17.09 FINALNI PREGLED: centrirana kartica sama u redu (Nussplunder,
Pizza 50 cm, Spaghetti ai Funghi, Vegetarische Suppe, Paprika scharf,
zadnji sladoled — 6 mjesta) čitala se kao ZABORAVLJENA, s dvije prazne
tinte pored sebe. ⇒ VODORAVNA PLOČA: slika lijevo tačno širine kartica
iznad (padding 0 + razmak = razmak mreže), tekst desno, centriran po visini.
⛔ BEZ subgrida i bez raspona redova — to je bio WebKit kvar od 16.09
(široka 16:9 kartica sakrila ime ispod slike). Ploča ima SVOJE redove
i stoji u svom redu mreže. Kapija `ime-uz-sliku` je sudi kao ploču. */
.vitrine__raster > .karte:last-child:nth-child(odd) {
grid-column: 1 / -1; justify-self: stretch;
grid-row: auto;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr auto auto auto 1fr;
column-gap: var(--raum-2); row-gap: 0;
padding: 0;
}
.vitrine__raster > .karte:last-child:nth-child(odd) .karte__rahmen {
grid-column: 1; grid-row: 1 / -1;
margin: 0; aspect-ratio: 1 / 1;
border-radius: 2px 0 0 2px;
}
.vitrine__raster > .karte:last-child:nth-child(odd) > :not(.karte__rahmen) {
grid-column: 2; margin-inline-end: var(--raum-2);
}
.vitrine__raster > .karte:last-child:nth-child(odd) .karte__name { grid-row: 2; }
.vitrine__raster > .karte:last-child:nth-child(odd) .karte__kasse { grid-row: 3; }
.vitrine__raster > .karte:last-child:nth-child(odd) .karte__fuss { grid-row: 4; }
}
/* ⛔⭐ 17.09: od „sve tamno kao Grill" (16.09) poglavlja stoje jedno uz drugo na
istoj tinti, a svako i dalje nosi pading SAMOSTALNOG tamnog pojasa (52 gore +
52 dole). Na telefonu je to 104 px mrtve tinte prije svakog naslova — u
šetnji stranicom čitalo se kao rupa. Razmak poglavlja nosi linija naslova. */
@media (max-width: 899px) {
.vitrine .gruppe--nacht { padding-block: var(--raum-4); }
}
@media (min-width: 620px) {
.gruppe[data-anzahl="2"] .vitrine__raster { grid-template-columns: repeat(2, 1fr); }
}
/* ⛔⭐⭐ 17.09: fotografija ide preko ivice kartice negativnim marginama
(`.karte__rahmen`). Pri uvećanom tekstu (Safari „Page Zoom", 320 px) taj
ispust naraste ŠIRE od same kartice i vuče stranicu ustranu — mjereno:
320 px/20 px = kadar 155 px u koloni od 130 px, dokument 326. Kartica
od sada drži svoju sliku u sebi; u normalnom stanju se ništa ne mijenja
(piksel-diff 0), a ispust više ne može pobjeći iz kartice.
⛔⭐⭐ NE `hidden`: on od kartice pravi klizni kontekst, a takav element po
specifikaciji GUBI `subgrid` — WebKit je odmah spustio ime 36 px ispod
slike na svim širinama ≥768 (uhvatila kapija `ime-uz-sliku`). `clip`
odsijeca bez kliznog konteksta, pa poravnanje redova ostaje. */
.karte {
display: flex; flex-direction: column; min-width: 0; overflow: clip;
background: color-mix(in oklab, var(--papier) 97%, var(--tinte));
border: var(--kante);
border-radius: 3px;
padding: var(--raum-2);
transition: background var(--takt) var(--kurve), border-color var(--takt) var(--kurve);
}
.karte[hidden] { display: none; } /* ⛔ hidden gubi od display:flex */
/* ⛔⭐⭐ HORIZONTALNI PRELIJEV NA UŽEM TELEFONU — Adijev „desno je ostavljen
prostor" (16.09, snimak s telefona). Izmjereno na produkciji: na 320 px
dokument je 346 px, na 360 px 366 px, na 375+ čisto. Izolacijom (gašenje
elemenata jedan po jedan) uzrok je `ul.vitrine__raster`: scrollWidth 327
pri clientWidth 283. Grid-dijete ima `min-width: auto` pa se NE MOŽE
stisnuti ispod min-content, a njemačke složenice („Putenleberkäsesemmel")
su duže od trake. Posljedica: cijela stranica se vuče ustranu — i onda
slika u traci dana ne dođe do desnog ruba. Nije bila kriva slika.
⛔ Ne `overflow-wrap: anywhere` (već nam je jednom kolabirao kolone) i ne
`overflow-x: hidden` na body — to skriva kvar, ne rješava ga.
⇒ Traka diktira širinu (`min-width: 0`), a duga riječ se lomi s crticom;
`lang="de"` je postavljen pa `hyphens: auto` zna njemačka pravila. */
.vitrine__raster > .karte, .zeile { min-width: 0; }
.karte__name, .zeile__name { overflow-wrap: break-word; hyphens: auto; }
@media (hover: hover) {
.karte:hover {
background: var(--papier);
border-color: color-mix(in oklab, var(--tinte) 34%, var(--linie));
}
}
.karte__rahmen {
/* Fotografija ide do ruba plohe — kartica je okvir, slika je sadrzaj. */
margin: calc(var(--raum-2) * -1) calc(var(--raum-2) * -1) var(--raum-2);
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 2px 2px 0 0;
background: color-mix(in oklab, var(--papier) 88%, var(--tinte) 12%);
position: relative;
}
.karte__bild {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 520ms var(--kurve);
}
@media (hover: hover) {
.karte:hover .karte__bild { transform: scale(1.04); }
}
/* ⭐ LUPA — dodir na fotografiju je otvara, ne nudi „Save".
⛔ POSTENO: ovo ne sprecava snimanje slike. Mijenja ZADANU GESTU na
telefonu (dugi pritisak vise nije jedina stvar koju slika radi), a
`touch-callout`/`user-select` samo sklanjaju sistemski meni.
⛔ Dugme je providno i puni okvir — kartica izgleda isto kao prije. */
.karte__lupe {
display: block; position: absolute; inset: 0;
padding: 0; border: 0; background: none;
cursor: zoom-in;
-webkit-touch-callout: none;
-webkit-user-select: none; user-select: none;
}
.karte__lupe:focus-visible {
outline: 2px solid var(--akzent-tinte);
outline-offset: -3px;
}
/* ⛔ Mjesto za „+" iz Plana 2 mora ostati IZNAD lupe — dvije mete se ne svadjaju. */
.karte__aktion { z-index: 2; }
.lupe {
position: fixed; inset: 0; z-index: 90;
display: grid; place-items: center;
padding: var(--raum-3);
background: color-mix(in oklab, #0b0906 88%, transparent);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 0;
opacity: 0; transition: opacity 180ms var(--kurve);
-webkit-touch-callout: none;
-webkit-user-select: none; user-select: none;
cursor: zoom-out;
}
.lupe[open] { opacity: 1; }
/* ⛔⭐⭐ ZATVORENA LUPA MORA NESTATI, ne samo biti providna. `display: grid`
gore gazi pravilo preglednika `dialog:not([open]) { display: none }` ⇒
zatvoren