/* ========================================================================== Lehne Burger — American Eatery & Bar · Paguera, Mallorca Design & Code: PixelUno · https://pixeluno.es Unverbindliche Vorschau. Die Palette ist nicht erfunden: Orange, Limette, Creme und das dunkle Tafelblau wurden pixelgenau aus dem echten Lehne-Burger-Logo und der Daily-Specials-Tafel gemessen. Siehe DESIGN.md. ========================================================================== */ /* ── Schriften ────────────────────────────────────────────────────────── */ @font-face{font-family:"Bespoke Slab";src:url("assets/fonts/bespoke-slab-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Bespoke Slab";src:url("assets/fonts/bespoke-slab-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:"Supreme";src:url("assets/fonts/supreme-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Supreme";src:url("assets/fonts/supreme-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Supreme";src:url("assets/fonts/supreme-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} /* ── Token ────────────────────────────────────────────────────────────── */ :root{ /* Grundflächen — aus dem Tafelblau #3D4052 abgeleitet */ --night:#14161D; --panel:#1B1E27; --slate:#232733; --line:#2E3342; /* Schrift auf dunklem Grund — Creme gemessen (#EDEEE1) */ --cream:#EFEFE4; --cream-soft:#B4B8AE; --muted:#8E93A0; /* Marke — gemessen aus dem Logo */ --orange:#EE841A; --orange-lt:#F7A24A; --lime:#BCD44E; --gold:#E0BE55; /* Papier — der Bestellzettel */ --paper:#F1EEE2; --paper-2:#E3DFCE; --paper-line:#C6C0AC; --ink:#1A1C22; --ink-soft:#5A5C55; --preview:#6D28D9; /* Maße */ --wrap:76rem; --measure:38rem; --gutter:clamp(1.15rem,4vw,2.5rem); --section:clamp(4.25rem,9vw,8rem); --r:1rem; --r-sm:.6rem; --strip-h:40px; --header-h:4.6rem; /* wird von main.js gemessen ueberschrieben */ /* Bewegung */ --ease:cubic-bezier(.22,.61,.36,1); --out:cubic-bezier(.16,1,.3,1); /* Tiefe — Versatz plus weiche Streuung, nie ein Farbhalo */ --lift:0 2px 4px rgba(0,0,0,.28), 0 12px 28px rgba(0,0,0,.34); --lift-lg:0 6px 12px rgba(0,0,0,.30), 0 28px 60px rgba(0,0,0,.42); /* Fluide Skala */ --fs-xs:clamp(.72rem,.7rem + .12vw,.8rem); --fs-sm:clamp(.84rem,.8rem + .2vw,.94rem); --fs-base:clamp(1rem,.96rem + .22vw,1.1rem); --fs-lead:clamp(1.1rem,1.02rem + .42vw,1.3rem); --fs-h3:clamp(1.18rem,1.05rem + .6vw,1.5rem); --fs-h2:clamp(1.85rem,1.35rem + 2.2vw,3.1rem); --fs-h1:clamp(2.5rem,1.6rem + 4.3vw,5.1rem); } /* ── Grundlagen ───────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--strip-h) + 5.75rem); /* clip statt hidden: schneidet ueberstehende Dekoration ab, ohne einen Scroll-Container zu erzeugen — der klebende Kopf bleibt dadurch heil. */ overflow-x:clip; } html:focus-within{scroll-behavior:smooth} /* Scroll-Sperre bei offenem Menue. Bewusst auf , nicht auf : overflow:hidden am Body macht diesen zum Scrollport und schiebt den klebenden Kopf um die Streifenhoehe nach unten. */ html.is-locked{overflow:hidden} body{ margin:0; /* Der fixierte Vorschaustreifen nimmt keinen Platz im Fluss ein. Der Ausgleich steht in CSS, damit die Seite auch ohne JS sitzt. */ padding-top:var(--strip-h); background:var(--night); color:var(--cream); font-family:"Supreme","Segoe UI",system-ui,sans-serif; font-size:var(--fs-base); line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:clip; } img{max-width:100%;height:auto;display:block} a{color:inherit} h1,h2,h3{ font-family:"Bespoke Slab",Georgia,"Times New Roman",serif; font-weight:800; line-height:1.03; letter-spacing:-.022em; text-wrap:balance; margin:0; } h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3);font-weight:700;line-height:1.18} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} address{font-style:normal} :focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:4px} ::selection{background:var(--orange);color:var(--night)} .wrap{width:min(100% - var(--gutter)*2,var(--wrap));margin-inline:auto} .section{padding-block:var(--section)} .lead{font-size:var(--fs-lead);color:var(--cream-soft);max-width:var(--measure);line-height:1.55} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .fineprint{font-size:var(--fs-sm);color:var(--muted);max-width:52ch} .fineprint a{color:var(--gold);text-underline-offset:.18em} .i{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .star{width:1em;height:1em;flex:none;fill:currentColor} /* ── PixelUno-Vorschaustreifen ────────────────────────────────────────── */ .preview-strip{ position:fixed;inset:0 0 auto;z-index:110; display:flex;align-items:center;justify-content:center;gap:.6rem; background:var(--preview);color:#fff; padding:.58rem 1rem; font-size:.78rem;font-weight:500;letter-spacing:.015em;text-align:center; } .preview-strip__dot{width:.5rem;height:.5rem;border-radius:50%;background:#fff;opacity:.85;flex:none} @media (max-width:640px){ .preview-strip{font-size:.7rem;padding:.5rem .8rem;line-height:1.35} .preview-strip__dot{display:none} } /* ── Rautenband — das Motiv aus dem Logo ──────────────────────────────── */ .frieze{ height:13px; background: linear-gradient(135deg,var(--lime) 25%,transparent 25%) -13px 0, linear-gradient(225deg,var(--lime) 25%,transparent 25%) -13px 0, linear-gradient(315deg,var(--lime) 25%,transparent 25%) 0 0, linear-gradient( 45deg,var(--lime) 25%,transparent 25%) 0 0; background-size:26px 26px; background-repeat:repeat-x; } /* ── Kopfzeile ────────────────────────────────────────────────────────── */ .site-header{ position:sticky;top:var(--strip-h);z-index:100; background:rgba(20,22,29,.86); backdrop-filter:blur(14px) saturate(150%); border-bottom:1px solid transparent; transition:border-color .25s var(--ease),background .25s var(--ease); } .site-header[data-scrolled]{border-bottom-color:var(--line);background:rgba(20,22,29,.95)} .site-header__in{display:flex;align-items:center;gap:clamp(.8rem,2.5vw,2rem);min-height:4.6rem} .brand{display:flex;align-items:center;flex:none;text-decoration:none} .brand img{width:152px;height:auto} .nav{display:flex;align-items:center;gap:clamp(1rem,3vw,2.2rem);margin-left:auto} .nav__list{display:flex;gap:clamp(.9rem,2vw,1.7rem)} .nav__list a{ text-decoration:none;font-size:var(--fs-sm);font-weight:500;color:var(--cream-soft); padding:.4rem 0;position:relative;transition:color .2s var(--ease); } .nav__list a::after{ content:"";position:absolute;left:0;right:0;bottom:-.1rem;height:2px; background:var(--orange);transform:scaleX(0);transform-origin:left; transition:transform .28s var(--out); } .nav__list a:hover{color:var(--cream)} .nav__list a:hover::after{transform:scaleX(1)} .langs{display:flex;gap:.1rem;padding:.2rem;border:1px solid var(--line);border-radius:999px} .langs a{ display:block;padding:.25rem .6rem;border-radius:999px;text-decoration:none; font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--muted); transition:color .2s var(--ease),background .2s var(--ease); } .langs a:hover{color:var(--cream)} .langs a[aria-current]{background:var(--slate);color:var(--cream)} .header__cta{flex:none} .burger{display:none} /* ── Schaltflächen ────────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; min-height:2.95rem;padding:.7rem 1.35rem; border:1px solid transparent;border-radius:999px; font:inherit;font-size:var(--fs-sm);font-weight:700;letter-spacing:.005em; text-decoration:none;cursor:pointer; transition:transform .2s var(--out),background .2s var(--ease),box-shadow .25s var(--ease),color .2s var(--ease),border-color .2s var(--ease); } .btn--sm{min-height:2.5rem;padding:.5rem 1.05rem;font-size:var(--fs-xs)} .btn--lg{min-height:3.5rem;padding:.9rem 1.9rem;font-size:var(--fs-base)} .btn--primary{background:var(--orange);color:var(--night);box-shadow:var(--lift)} .btn--primary:hover{background:var(--orange-lt);transform:translateY(-2px);box-shadow:var(--lift-lg)} .btn--ghost{background:transparent;color:var(--cream);border-color:var(--line)} .btn--ghost:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)} .btn--quiet{background:transparent;color:var(--cream-soft);border-color:transparent;padding-inline:.6rem} .btn--quiet:hover{color:var(--lime)} .btn:active{transform:translateY(0)} /* ── Hero ─────────────────────────────────────────────────────────────── */ .hero{position:relative;padding-top:clamp(2.5rem,6vw,4.5rem);overflow:hidden} .hero__glow{ position:absolute;inset:8% -8% 0 -8%;pointer-events:none; background: radial-gradient(40% 46% at 26% 62%,rgba(238,132,26,.13),transparent 70%), radial-gradient(34% 40% at 76% 74%,rgba(188,212,78,.055),transparent 74%); } .hero__in{ position:relative; display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(2rem,5vw,4.5rem);align-items:center; padding-bottom:clamp(3rem,7vw,5.5rem); } .hero__text>*+*{margin-top:1.5rem} .hero h1{max-width:13ch} .hero__cta{display:flex;flex-wrap:wrap;gap:.8rem} .proof{ display:flex;flex-wrap:wrap;gap:clamp(1.1rem,3vw,2.6rem); padding-top:1.7rem;border-top:1px solid var(--line); } .proof li{display:flex;flex-direction:column;gap:.1rem} .proof strong{ font-family:"Bespoke Slab",Georgia,serif;font-size:1.55rem;font-weight:800; color:var(--lime);line-height:1;letter-spacing:-.02em; } .proof span{font-size:var(--fs-xs);color:var(--muted)} .hero__shot{position:relative;margin:0;justify-self:end;width:min(100%,26rem)} .hero__oval{ position:absolute;inset:auto -12% 8% -12%;height:66%; border-radius:50%;background:var(--orange);opacity:.16;filter:blur(2px); } .hero__shot picture{display:block;position:relative} .hero__shot img{ width:100%;border-radius:var(--r); box-shadow:0 8px 18px rgba(0,0,0,.34), 0 34px 70px rgba(0,0,0,.5); } /* ── Konfigurator ─────────────────────────────────────────────────────── */ .section--build{background:var(--panel)} .build{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4rem);align-items:start} .build__intro>*+*{margin-top:1.3rem} .build__intro p{color:var(--cream-soft);max-width:36ch} .steps{counter-reset:s;display:grid;gap:.8rem;margin-top:2rem} .steps li{ counter-increment:s;display:flex;gap:.9rem;align-items:baseline; font-size:var(--fs-sm);color:var(--cream-soft); } .steps li::before{ content:counter(s);flex:none; font-family:"Bespoke Slab",Georgia,serif;font-weight:800;font-size:1rem; color:var(--orange);width:1.5rem; } /* Der Bestellzettel */ .check{ background:var(--paper);color:var(--ink); border-radius:var(--r) var(--r) 0 0; box-shadow:var(--lift-lg); overflow:hidden; /* Abrisskante unten */ -webkit-mask: linear-gradient(#000,#000) top/100% calc(100% - 11px) no-repeat, repeating-conic-gradient(from -45deg at bottom,#000 0 25%,transparent 0 50%) bottom/22px 22px repeat-x; mask: linear-gradient(#000,#000) top/100% calc(100% - 11px) no-repeat, repeating-conic-gradient(from -45deg at bottom,#000 0 25%,transparent 0 50%) bottom/22px 22px repeat-x; } .check__head{ display:flex;align-items:center;gap:.6rem; background:var(--night);color:var(--paper); padding:.9rem clamp(1.1rem,3vw,1.8rem); } .check__head .star{color:var(--lime);width:1.1rem;height:1.1rem} .check__head p{ font-family:"Bespoke Slab",Georgia,serif;font-weight:800; font-size:.95rem;letter-spacing:.1em;text-transform:uppercase; } .check__body{padding:clamp(1.1rem,3vw,1.8rem);display:grid;gap:1.35rem;grid-template-columns:1fr 1fr} .grp{border:0;padding:0;margin:0;min-width:0} .grp--wide{grid-column:1/-1} .grp legend{ padding:0 0 .55rem;font-size:.7rem;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--ink-soft); } .grp__hint{font-weight:500;letter-spacing:.04em;text-transform:none;opacity:.75} .opts{display:flex;flex-wrap:wrap;gap:.4rem} .opt{position:relative;display:inline-flex} .opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer} .opt span{ display:inline-flex;align-items:center;min-height:2.75rem; padding:.42rem .85rem;border:1px solid var(--paper-line);border-radius:999px; font-size:var(--fs-sm);font-weight:500;line-height:1.2; transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--out); } .opt:hover span{border-color:var(--ink);transform:translateY(-1px)} .opt input:checked+span{background:var(--orange);border-color:var(--orange);color:var(--night);font-weight:700} .opt input:focus-visible+span{outline:3px solid var(--night);outline-offset:2px} .check__foot{ background:var(--paper-2);padding:clamp(1.1rem,3vw,1.8rem); padding-bottom:calc(clamp(1.1rem,3vw,1.8rem) + 14px); border-top:1px dashed var(--paper-line); display:grid;gap:1.3rem;grid-template-columns:minmax(0,1fr) auto;align-items:end; } .tally__label{ font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--ink-soft);margin-bottom:.5rem; } .tally__list{display:grid;gap:.22rem;font-size:var(--fs-sm)} .tally__list li{display:flex;align-items:baseline;gap:.5rem} .tally__list b{font-weight:700;flex:none} .tally__list li::after{ content:"";order:1;flex:1 1 auto; border-bottom:1px dotted var(--paper-line);transform:translateY(-.22em); } .tally__list span{order:2;flex:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em} .tally__deal{ margin-top:.8rem;padding:.5rem .8rem;border-radius:var(--r-sm); background:var(--night);color:var(--lime); font-size:var(--fs-xs);font-weight:700; } .check__act{display:flex;flex-direction:column;gap:.35rem;align-items:stretch;align-self:end} .check__act .btn--quiet{color:var(--ink-soft)} .check__act .btn--quiet:hover{color:var(--ink)} /* ── Karte — als gedruckte Karte, nicht als Kachelraster ──────────────── */ .menu__lede{max-width:var(--measure);margin-bottom:clamp(2rem,4vw,3rem)} .menu__lede p{color:var(--cream-soft);margin-top:1rem} .menu__grid{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:clamp(2rem,5vw,4rem);align-items:start} .bill{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.8rem,4vw,3rem) clamp(2rem,5vw,4rem)} .bill__grp h3{ display:flex;align-items:center;gap:.6rem; margin-bottom:1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line); font-size:var(--fs-h3); } .bill__grp h3::before{ content:"";width:.7rem;height:.7rem;flex:none;background:var(--lime); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); } .bill__grp ul{display:grid;gap:.7rem} .bill__grp li{display:flex;align-items:baseline;gap:.55rem;font-size:var(--fs-sm);line-height:1.4} .bill__grp li>span{flex:none;font-weight:500;color:var(--cream)} .bill__grp li>em{order:2;flex:none;font-style:normal;color:var(--muted);font-size:.92em} .bill__grp li::after{content:"";order:1;flex:1 1 1.5rem;border-bottom:1px dotted var(--line);transform:translateY(-.24em)} .bill__grp li:not(:has(em))::after{display:none} .menu__shot{margin:0;position:sticky;top:calc(var(--strip-h) + 7rem)} .menu__shot img{border-radius:var(--r);box-shadow:var(--lift)} .menu>.fineprint{margin-top:clamp(2rem,4vw,3rem)} /* ── Daily Specials ───────────────────────────────────────────────────── */ .section--specials{background:var(--panel)} .specials__lede{max-width:var(--measure);margin-bottom:clamp(2rem,4vw,3rem)} .specials__lede p{color:var(--cream-soft);margin-top:1rem} .specials__row{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:clamp(1.5rem,3vw,2.5rem);align-items:start} .week{display:grid;gap:.6rem} .day{ position:relative;display:grid;grid-template-columns:8.5rem minmax(0,1fr); gap:.4rem 1.2rem;align-items:baseline; background:var(--slate);border:1px solid var(--line);border-radius:var(--r-sm); padding:.95rem 1.2rem; transition:border-color .25s var(--ease),background .25s var(--ease); } .day__name{ font-family:"Bespoke Slab",Georgia,serif;font-weight:800;font-size:1.02rem; letter-spacing:-.01em;grid-row:span 2; } .day__deal{font-weight:700;color:var(--lime);font-size:var(--fs-sm)} .day__terms{font-size:var(--fs-xs);color:var(--muted);grid-column:2} .day--off .day__deal{color:var(--muted)} .day[data-today]{background:#282D3B;border-color:var(--orange)} .day[data-today] .day__name{color:var(--orange)} .day[data-today]::after{ content:"heute";position:absolute;top:-.6rem;right:1rem; background:var(--orange);color:var(--night); padding:.1rem .6rem;border-radius:999px; font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; } .board{margin:0;position:sticky;top:calc(var(--strip-h) + 6rem)} .board img{border-radius:var(--r);box-shadow:var(--lift)} .board figcaption{margin-top:.7rem;font-size:var(--fs-xs);color:var(--muted)} .everyday{ display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;align-items:center; margin-top:clamp(1.5rem,3vw,2.2rem); background:var(--night);border:1px solid var(--line);border-radius:var(--r); padding:clamp(1.1rem,2.5vw,1.5rem) clamp(1.2rem,3vw,1.8rem); } .everyday .star{color:var(--gold);width:1.5rem;height:1.5rem;grid-row:span 2} .everyday strong{font-family:"Bespoke Slab",Georgia,serif;font-weight:800;font-size:var(--fs-h3);letter-spacing:-.015em} .everyday span{font-size:var(--fs-sm);color:var(--cream-soft)} /* ── Handwerk ─────────────────────────────────────────────────────────── */ .craft{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);align-items:center} .craft__shot{margin:0} .craft__shot img{border-radius:var(--r);box-shadow:var(--lift-lg)} .craft__text>*+*{margin-top:1.3rem} .craft__text p{color:var(--cream-soft);max-width:52ch} .ticks{display:grid;gap:.65rem;margin-top:1.8rem} .ticks li{position:relative;padding-left:1.9rem;font-size:var(--fs-sm)} .ticks li::before{ content:"";position:absolute;left:0;top:.42em;width:.85rem;height:.85rem; background:var(--lime); clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%); } /* ── Stimmen ──────────────────────────────────────────────────────────── */ .section--voices{background:var(--panel)} .voices__lede{max-width:var(--measure);margin-bottom:clamp(2rem,4vw,3rem)} .voices__lede p{color:var(--muted);margin-top:1rem;font-size:var(--fs-sm)} .voices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)} .voice{ background:var(--slate);border:1px solid var(--line);border-radius:var(--r); padding:clamp(1.4rem,2.5vw,2rem);display:flex;flex-direction:column;gap:1.1rem; } .voice blockquote{margin:0;flex:1} .voice blockquote p{font-size:var(--fs-lead);line-height:1.45;letter-spacing:-.005em} .voice__who{font-size:var(--fs-xs);font-weight:700;display:flex;flex-wrap:wrap;gap:.5rem} .voice__who span{font-weight:400;color:var(--muted)} /* ── Finden ───────────────────────────────────────────────────────────── */ .find{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4rem);align-items:start} .find__text>*+*{margin-top:1.4rem} .find__text p{color:var(--cream-soft);max-width:48ch} .addr{display:flex;gap:.85rem;font-size:var(--fs-lead);line-height:1.45} .i--pin{width:1.5rem;height:1.5rem;color:var(--orange);margin-top:.15rem} .find__side{display:grid;gap:1.2rem} .panel{background:var(--slate);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.3rem,2.5vw,1.8rem)} .panel h3{margin-bottom:1rem;font-size:var(--fs-sm);letter-spacing:.1em;text-transform:uppercase;font-family:"Supreme",sans-serif;font-weight:700;color:var(--muted)} .dist{display:grid;gap:.55rem} .dist li{display:flex;align-items:baseline;gap:.6rem;font-size:var(--fs-sm)} .dist li::after{content:"";order:1;flex:1;border-bottom:1px dotted var(--line);transform:translateY(-.24em)} .dist b{order:2;flex:none;font-family:"Bespoke Slab",Georgia,serif;font-weight:700;color:var(--lime)} .facts{display:flex;flex-wrap:wrap;gap:.45rem} .facts li{ border:1px solid var(--line);border-radius:999px;padding:.35rem .85rem; font-size:var(--fs-xs);color:var(--cream-soft); } /* ── Tisch & Zeiten ───────────────────────────────────────────────────── */ .section--table{background:var(--panel)} .table{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4rem);align-items:start} .table__cta>*+*{margin-top:1.3rem} .table__cta p{color:var(--cream-soft);max-width:44ch} .hours{background:var(--slate);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.3rem,2.5vw,1.9rem)} .hours h3{margin-bottom:1.1rem;font-size:var(--fs-sm);letter-spacing:.1em;text-transform:uppercase;font-family:"Supreme",sans-serif;font-weight:700;color:var(--muted)} .hours table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)} .hours th{text-align:left;font-weight:500;padding:.5rem 0;color:var(--cream-soft)} .hours td{text-align:right;padding:.5rem 0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;color:var(--cream-soft)} .hours tr+tr th,.hours tr+tr td{border-top:1px solid var(--line)} .hours tr[data-today] th,.hours tr[data-today] td{color:var(--orange);font-weight:700} /* ── Instagram ────────────────────────────────────────────────────────── */ .ig__lede{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:clamp(1.5rem,3vw,2.2rem)} .ig__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.6rem} .ig__grid img{width:100%;border-radius:var(--r-sm);aspect-ratio:1;object-fit:cover;transition:transform .35s var(--out),filter .35s var(--ease)} .ig__grid li{overflow:hidden;border-radius:var(--r-sm)} .ig__grid img:hover{transform:scale(1.05)} /* ── Fußzeile ─────────────────────────────────────────────────────────── */ .site-footer{background:var(--panel);margin-top:clamp(2rem,5vw,4rem)} .foot{ display:grid;grid-template-columns:1.4fr repeat(3,1fr); gap:clamp(1.8rem,4vw,3rem); padding-block:clamp(2.5rem,6vw,4rem); } .foot__brand img{width:168px} .foot__brand p{margin-top:1.1rem;color:var(--muted);font-size:var(--fs-sm);max-width:30ch;font-style:italic} .foot__col h2{ font-family:"Supreme",sans-serif;font-size:var(--fs-xs);font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:.9rem; } .foot__col p,.foot__col address{font-size:var(--fs-sm);color:var(--cream-soft)} .foot__col p+p{margin-top:.7rem} .foot__col a{text-decoration:none;transition:color .2s var(--ease)} .foot__col a:hover{color:var(--lime)} .social{display:grid;gap:.15rem;margin-bottom:1.1rem} .social a{display:inline-flex;align-items:center;gap:.55rem;min-height:2.75rem;font-size:var(--fs-sm);color:var(--cream-soft)} .legal-note{font-size:var(--fs-xs);color:var(--muted);max-width:24ch} .foot__base{ display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;justify-content:space-between;align-items:center; border-top:1px solid var(--line);padding-block:1.4rem; font-size:var(--fs-xs);color:var(--muted); } .sig{display:inline-flex;align-items:center;gap:.4rem} .sig .heart{width:.95rem;height:.95rem;fill:var(--orange)} .sig a{color:var(--cream-soft);font-weight:700;text-decoration:none;border-bottom:1px solid var(--line);transition:color .2s var(--ease),border-color .2s var(--ease)} .sig a:hover{color:var(--lime);border-color:var(--lime)} /* ── Scroll-Reveal ────────────────────────────────────────────────────── */ [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s var(--out),transform .7s var(--out)} [data-reveal].is-in{opacity:1;transform:none} /* Der eine gestaltete Moment: das Hero-Foto zieht auf */ .js .hero__shot picture{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--out) .12s} .js .hero__shot.is-in picture{clip-path:inset(0 0 0 0)} .js .hero__shot img{transform:scale(1.07);transition:transform 1.3s var(--out) .12s} .js .hero__shot.is-in img{transform:none} /* ══ Tablet ═══════════════════════════════════════════════════════════ */ @media (max-width:1040px){ .specials__row{grid-template-columns:1fr} .board{position:static;max-width:22rem} .ig__grid{grid-template-columns:repeat(3,minmax(0,1fr))} .foot{grid-template-columns:1fr 1fr} } @media (max-width:900px){ .hero__in,.build,.craft,.find,.table,.menu__grid{grid-template-columns:1fr} .menu__shot{position:static;max-width:22rem} .hero__shot{justify-self:start;width:min(100%,22rem);order:-1} .hero h1{max-width:none} .craft__shot{max-width:24rem} .voices{grid-template-columns:1fr} .build__intro p{max-width:none} } /* ══ Mobil ════════════════════════════════════════════════════════════ */ @media (max-width:820px){ .header__cta span{display:none} .header__cta{padding:.5rem;width:2.75rem;min-height:2.75rem;border-radius:50%} .header__cta .i{width:1.15rem;height:1.15rem} .burger{ display:flex;flex-direction:column;justify-content:center;gap:5px; width:2.9rem;height:2.9rem;padding:0 .55rem;flex:none; background:transparent;border:1px solid var(--line);border-radius:.7rem;cursor:pointer; } .burger span{display:block;height:2px;background:var(--cream);border-radius:2px;transition:transform .3s var(--out),opacity .2s var(--ease)} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* Ohne das haengt der Drawer im Kopf fest: backdrop-filter erzeugt einen Bezugsrahmen fuer position:fixed. Auf Mobil ist der Kopf deshalb deckend. */ .site-header{backdrop-filter:none;background:var(--night)} .site-header[data-scrolled]{background:var(--night)} /* Das Drawer-Panel ist ein Geschwister von Logo und Schaltern. Ohne eigenen Stapelwert wuerden diese darunter verschwinden, sobald der Kopf waechst. */ .brand,.header__cta,.burger{position:relative;z-index:2} .nav{ position:fixed;inset:calc(var(--strip-h) + var(--header-h)) 0 0 0;z-index:99; flex-direction:column;align-items:stretch;justify-content:flex-start; gap:1.5rem;margin:0;padding:clamp(1.5rem,6vw,2.5rem) var(--gutter) 3rem; background:var(--night); overflow-y:auto; transform:translateY(-14px);opacity:0;visibility:hidden;pointer-events:none; transition:opacity .28s var(--ease),transform .28s var(--out),visibility 0s .28s; } .nav[data-open]{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s} .nav__list{flex-direction:column;gap:0} .nav__list a{ display:block;padding:1rem 0;font-size:1.35rem;font-weight:700;color:var(--cream); font-family:"Bespoke Slab",Georgia,serif;letter-spacing:-.015em; border-bottom:1px solid var(--line); } .nav__list a::after{display:none} .langs{align-self:flex-start} .langs a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.5rem 1.05rem;font-size:.85rem} .brand img{width:126px} .site-header__in{min-height:4.2rem;gap:.5rem} .header__cta{margin-left:auto} .check__body{grid-template-columns:1fr} .check__foot{grid-template-columns:1fr} .check__act{flex-direction:row;flex-wrap:wrap} .check__act .btn{flex:1 1 12rem} .day{grid-template-columns:1fr;gap:.25rem} .day__name{grid-row:auto} .day__terms{grid-column:1} .day[data-today]::after{right:1rem;top:-.55rem} .bill{grid-template-columns:1fr} .ig__grid{grid-template-columns:repeat(2,minmax(0,1fr))} .foot{grid-template-columns:1fr;gap:2rem} .everyday{grid-template-columns:1fr;gap:.5rem} .everyday .star{grid-row:auto} } @media (max-width:560px){ .bill__grp li{display:block} .bill__grp li>span,.bill__grp li>em{display:block} .bill__grp li>em{margin-top:.1rem} .bill__grp li::after{display:none} } @media (max-width:400px){ /* Nur die Fliesstext-Buttons auf volle Breite — nicht der runde Kopf-CTA */ .hero__cta .btn,.table__cta .btn,.check__act .btn{width:100%} .hero__cta{gap:.6rem} .proof{gap:1rem 1.6rem} } /* ══ Bewegung aus ═════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ html:focus-within{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} [data-reveal]{opacity:1;transform:none} .js .hero__shot picture{clip-path:none} .js .hero__shot img{transform:none} } /* ══ Druck ════════════════════════════════════════════════════════════ */ @media print{ .preview-strip,.site-header,.nav,.burger,.frieze,.hero__glow,.hero__oval,.ig__grid,.check__act{display:none !important} body{background:#fff;color:#000} .section,.site-footer,.section--build,.section--specials,.section--voices,.section--table{background:#fff !important} .voice,.panel,.hours,.day,.bill__grp h3,.everyday{border-color:#999 !important;background:#fff !important;box-shadow:none !important} h1,h2,h3,.proof strong,.dist b,.day__deal{color:#000 !important} p,.lead,li,td,th,address{color:#222 !important} a{text-decoration:underline} .sig a::after{content:" (pixeluno.es)"} }