/* ==========================================================================
   ESQUINA BAKERY — Avinguda Mèxic 13, Palma de Mallorca
   Gestaltung & Umsetzung: PixelUno · https://pixeluno.es

   Unverbindliche Vorschau. Alle Farben sind aus dem echten Bildmaterial des
   Betriebs gemessen (Bildmarke, Ladenfotos), nicht gewaehlt — siehe DESIGN.md.
   Keine Abhaengigkeiten, keine Buildkette fuer dieses Stylesheet.
   ========================================================================== */

/* ── Schriften ────────────────────────────────────────────────────────────
   Erode traegt die Ueberschriften: eine Serife mit leicht erodierten,
   organischen Konturen — die typografische Entsprechung von „hecho a mano".
   Switzer bleibt im Fliesstext ruhig und nimmt die geometrische
   Fassadenschrift des Ladens auf, ohne sie zu imitieren.                    */
@font-face{font-family:"Erode";src:url("assets/fonts/erode-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Erode";src:url("assets/fonts/erode-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("assets/fonts/switzer-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("assets/fonts/switzer-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url("assets/fonts/switzer-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ── Marken-Token ────────────────────────────────────────────────────────── */
:root{
  /* Farben — gemessen, siehe DESIGN.md */
  --bone:#F6F3EA;          /* Grund der Bildmarke */
  --paper:#EBE3D6;         /* zweite Flaeche, Karten */
  --stone:#C9C0B2;         /* Raender */
  --line:#DCD4C6;          /* Haarlinien */
  --ink:#1C1E17;           /* Fliesstext — olivschwarz, aus dem Ladenfoto */
  --ink-soft:#4B4E42;
  --muted:#5F6256;
  --cocoa:#8A5E55;         /* die Tusche der Bildmarke */
  --cocoa-deep:#6E453D;
  --cocoa-lt:#C79A8D;
  --sage:#5D5F4C;          /* Terrassengruen */
  --sage-lt:#9DA087;
  --char:#191B15;          /* dunkle Abschnitte */
  --char-2:#23261E;
  --bone-dk:#E8E1D5;       /* Text auf Dunkel */
  --muted-dk:#A8A99B;
  --preview:#6D28D9;       /* Agenturvorgabe PixelUno */

  /* Raster */
  --wrap:74rem;
  --measure:36rem;
  --gutter:clamp(1.15rem,4vw,2.5rem);
  --section:clamp(4.25rem,8.5vw,7.5rem);
  --chamfer:clamp(1.5rem,3.4vw,2.75rem);

  /* Groessen — jede Schriftgroesse der Seite kommt aus dieser Skala.
     Ausnahme ist allein das Druck-Stylesheet, das in Punkt rechnet. */
  --fs-2xs:.625rem;
  --fs-xs:.75rem;
  --fs-sm:.8125rem;
  /* Zwischenstufe fuer erklaerenden Fliesstext in breiten Spalten. 13 px sind
     dort zu klein, 17 px zu laut. */
  --fs-body-2:.9375rem;
  --fs-base:1.0625rem;
  --fs-lead:clamp(1.125rem,.98rem + .62vw,1.375rem);
  /* Fester Display-Schritt zwischen h3 und h2. Bewusst nicht fluid: die
     Ziffernspalte im Handwerks-Abschnitt und die Gruppentitel der Karte
     sollen in jeder Breite dasselbe Mass haben. */
  --fs-display-sm:1.5rem;
  --fs-h3:clamp(1.1875rem,1.08rem + .45vw,1.4375rem);
  --fs-h2:clamp(1.75rem,1.34rem + 1.75vw,2.875rem);
  --fs-h1:clamp(2.375rem,1.55rem + 3.5vw,4.5rem);

  /* Tiefe und Bewegung */
  --lift:0 1px 2px color-mix(in srgb,var(--ink) 5%,transparent), 0 10px 24px color-mix(in srgb,var(--ink) 8%,transparent);
  --lift-lg:0 4px 10px color-mix(in srgb,var(--ink) 7%,transparent), 0 26px 56px color-mix(in srgb,var(--ink) 13%,transparent);
  --ease:cubic-bezier(.22,.61,.36,1);
  --out:cubic-bezier(.16,1,.3,1);

  /* Von main.js exakt gemessen und als Inline-Stil gesetzt. Die Werte hier
     sind der Rueckfall ohne JavaScript: der Vorschaustreifen laeuft je nach
     Breite ueber eine, zwei oder drei Zeilen, und der Kopf haengt daran. */
  --strip-h:34px;
  --header-h:69px;

  color-scheme:light;
}
@media (max-width:820px){:root{--strip-h:50px}}
@media (max-width:400px){:root{--strip-h:66px}}

/* ── Grundlagen ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font:400 var(--fs-base)/1.65 "Switzer","Segoe UI",system-ui,-apple-system,sans-serif;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
html.is-locked,html.is-locked body{overflow:hidden}

h1,h2,h3{
  font-family:"Erode",Georgia,"Times New Roman",serif;
  font-weight:600;
  color:var(--ink);
  margin:0;
  line-height:1.08;
  letter-spacing:-.012em;
  text-wrap:balance;
}
h1{font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.022em}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.2}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}

:focus-visible{outline:3px solid var(--sage);outline-offset:3px;border-radius:4px}
.no-js :focus{outline:3px solid var(--sage);outline-offset:3px}

.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;
}

.wrap{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto}
.measure{max-width:var(--measure)}

/* Die Anschraegung — das eine Formmotiv der Seite. Der Laden sitzt auf einer
   abgeschraegten Strassenecke; jeder Bildrahmen wiederholt diesen Schnitt an
   genau einer Ecke, immer oben rechts. */
.cut{clip-path:polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%)}

/* ── Vorschaustreifen ───────────────────────────────────────────────────── */
.preview-strip{
  position:fixed;inset:0 0 auto 0;z-index:60;margin:0;
  background:var(--preview);color:#fff;
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.005em;line-height:1.35;
  text-align:center;padding:.5rem var(--gutter);
}

/* ── Kopf ───────────────────────────────────────────────────────────────── */
.site-header{
  position:fixed;inset:var(--strip-h) 0 auto 0;z-index:50;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
/* Das Milchglas liegt auf einem Pseudoelement, nicht auf dem Kopf selbst.
   Ein `backdrop-filter` direkt auf `.site-header` spannt fuer jedes fixierte
   Kindelement einen neuen Bezugsrahmen auf — das mobile Menue waere dann nur
   so hoch wie der Kopf, statt bis zum unteren Bildschirmrand zu reichen. */
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--bone);                                  /* Rueckfall ohne color-mix */
  background:color-mix(in srgb,var(--bone) 88%,transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.site-header[data-scrolled]{border-bottom-color:var(--line)}
@supports not (backdrop-filter:blur(1px)){.site-header::before{background:var(--bone)}}

.header__inner{
  width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto;
  display:flex;align-items:center;gap:1rem;min-height:68px;
}

.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.brand__mark{
  width:38px;height:38px;flex:none;color:var(--cocoa);
  background:currentColor;
  -webkit-mask:url("assets/esquina-mark.svg") center/contain no-repeat;
  mask:url("assets/esquina-mark.svg") center/contain no-repeat;
}
@supports not ((-webkit-mask-image:url("#a")) or (mask-image:url("#a"))){
  .brand__mark{background:url("assets/logo-300.png") center/contain no-repeat}
}
.brand__name{display:grid;gap:.08em;line-height:1}
.brand__name b{
  font-weight:600;font-size:var(--fs-base);letter-spacing:.15em;text-transform:uppercase;
}
.brand__name span{
  font-size:var(--fs-2xs);letter-spacing:.34em;text-transform:uppercase;color:var(--muted);
  font-weight:500;
}

.nav{display:flex;align-items:center;gap:.35rem}
.nav__list{display:flex;align-items:center;gap:.15rem}
.nav__list a{
  display:inline-block;padding:.55rem .7rem;border-radius:999px;
  font-size:var(--fs-sm);font-weight:500;color:var(--ink-soft);text-decoration:none;
  position:relative;transition:color .25s var(--ease);
}
.nav__list a::after{
  content:"";position:absolute;left:.7rem;right:.7rem;bottom:.34rem;height:1px;
  background:var(--cocoa);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--out);
}
.nav__list a:hover{color:var(--ink)}
.nav__list a:hover::after{transform:scaleX(1)}

.langs{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;margin-left:.4rem}
.langs a{
  padding:.3rem .52rem;border-radius:999px;font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);text-decoration:none;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.langs a:hover{color:var(--ink);background:var(--paper)}
.langs a[aria-current="true"]{background:var(--ink);color:var(--bone)}

/* ── Schaltflaechen ─────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:46px;padding:.72rem 1.3rem;border-radius:999px;border:1px solid transparent;
  font-size:var(--fs-sm);font-weight:600;letter-spacing:.012em;text-decoration:none;
  cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease),transform .12s var(--ease);
}
.btn svg{width:17px;height:17px;flex:none}
.btn--solid{background:var(--cocoa-deep);color:var(--bone)}
.btn--solid:hover{background:var(--ink)}
.btn--line{border-color:var(--stone);color:var(--ink)}
.btn--line:hover{border-color:var(--ink);background:var(--paper)}
.btn--ghost{border-color:var(--char-2);border-color:color-mix(in srgb,var(--bone-dk) 34%,transparent);color:var(--bone-dk)}
.btn--ghost:hover{border-color:var(--bone-dk);background:var(--char-2);background:color-mix(in srgb,var(--bone-dk) 9%,transparent)}
.btn--sm{min-height:40px;padding:.55rem 1rem}
.btn:active{transform:scale(.975)}

/* ── Mobile Navigation ──────────────────────────────────────────────────── */
.burger{
  display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:999px;
  background:transparent;cursor:pointer;align-items:center;justify-content:center;
}
.burger span{display:block;width:17px;height:1.5px;background:var(--ink);position:relative;transition:background .2s}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--ink);
  transition:transform .32s var(--out),top .2s var(--ease);
}
.burger span::before{top:-5.5px}
.burger span::after{top:5.5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:900px){
  .burger{display:inline-flex}
  .nav{
    position:fixed;inset:calc(var(--strip-h) + var(--header-h)) 0 0 0;
    display:block;overflow-y:auto;padding:1.6rem var(--gutter) 2.5rem;
    background:var(--bone);border-top:1px solid var(--line);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .28s var(--ease),transform .28s var(--out),visibility .28s;
  }
  .nav[data-open]{opacity:1;visibility:visible;transform:none}
  .nav__list{display:grid;gap:.1rem}
  .nav__list a{
    display:block;                 /* sonst laeuft die Haarlinie nur unter dem Wort */
    padding:.95rem .2rem;font-size:var(--fs-h3);font-family:"Erode",Georgia,serif;
    font-weight:500;border-bottom:1px solid var(--line);border-radius:0;
  }
  .nav__list a::after{display:none}
  .nav .btn{width:100%;margin-top:1.4rem}
  .langs{margin:1.4rem 0 0;width:max-content}
  /* Im Auszug sind die Sprachschalter Fingerziele, keine Randnotiz. */
  .langs a{padding:.6rem 1rem;font-size:var(--fs-sm)}
}

/* ── Sprungmarke ────────────────────────────────────────────────────────── */
.skip{
  position:fixed;left:50%;top:0;transform:translate(-50%,-250%);
  z-index:70;background:var(--ink);color:var(--bone);padding:.6rem 1.1rem;border-radius:999px;
  font-size:var(--fs-sm);font-weight:600;text-decoration:none;transition:transform .2s var(--ease);
}
.skip:focus{transform:translate(-50%,calc(var(--strip-h) + .4rem))}

/* ── Abschnittsrhythmus ─────────────────────────────────────────────────── */
main{padding-top:calc(var(--strip-h) + var(--header-h))}
section{padding-block:var(--section)}
.lede{
  color:var(--ink-soft);font-size:var(--fs-lead);line-height:1.55;
  max-width:var(--measure);text-wrap:pretty;
}
h2 + .lede,h2 + p.lede{margin-top:1.1rem}
.eyebrow{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cocoa);margin-bottom:1.1rem;
}
.head{display:grid;gap:1.1rem;margin-bottom:clamp(2rem,4vw,3.25rem)}
.head--split{grid-template-columns:minmax(0,1fr) minmax(0,22rem);align-items:end;gap:2rem}
@media (max-width:820px){.head--split{grid-template-columns:1fr;align-items:start}}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(3rem,6vw,5.5rem);position:relative}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(58rem 30rem at 12% -8%, color-mix(in srgb,var(--cocoa) 9%,transparent), transparent 62%),
    radial-gradient(46rem 28rem at 96% 8%, color-mix(in srgb,var(--sage) 7%,transparent), transparent 60%);
}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.hero__text{max-width:34rem}
.hero h1{margin-bottom:1.25rem}
.hero h1 em{font-style:normal;color:var(--cocoa)}
.hero__lede{margin-bottom:1.9rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:2.1rem}

.status{
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.5rem;
  padding:.42rem .9rem .42rem .72rem;border:1px solid var(--line);border-radius:999px;
  background:color-mix(in srgb,var(--bone) 70%,#fff);
  font-size:var(--fs-sm);font-weight:500;color:var(--ink-soft);
}
.status__dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.status[data-open="true"] .status__dot{background:var(--sage)}
.status[data-open="false"] .status__dot{background:var(--cocoa)}
.status b{font-weight:600;color:var(--ink)}

.facts{display:grid;gap:.85rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.facts div{display:flex;gap:.7rem;align-items:baseline}
.facts dt{
  flex:none;width:5.5rem;font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.facts dd{margin:0;font-size:var(--fs-sm);color:var(--ink-soft)}
.facts a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--stone);text-underline-offset:3px}
.facts a:hover{text-decoration-color:var(--cocoa)}
/* Auf schmalen Displays stapeln: die deutsche Beschriftung
   „Öffnungszeiten" passt in keine 5.5-rem-Spalte und wuerde mitten im Wort
   umbrechen. */
@media (max-width:560px){
  .facts div{display:grid;gap:.15rem}
  .facts dt{width:auto}
}

.hero__shot{position:relative}
.hero__shot img{
  width:100%;border-radius:2px;box-shadow:var(--lift-lg);
  clip-path:polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
}
.hero__caption{
  margin-top:.85rem;font-size:var(--fs-xs);color:var(--muted);
  display:flex;gap:.5rem;align-items:baseline;
}
.hero__caption::before{content:"";width:1.5rem;height:1px;background:var(--stone);flex:none;translate:0 -.3em}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:2.5rem}
  .hero__shot{max-width:26rem}
}
@media (max-width:480px){
  /* Zwei unterschiedlich breite Schaltflaechen untereinander sehen zufaellig
     aus. Auf dem Telefon stehen beide als volle Zeile — und werden dabei zu
     bequemen Fingerzielen. */
  .hero__actions .btn{width:100%}
}

/* ── Mostrador ──────────────────────────────────────────────────────────── */
.counter{background:var(--paper)}
.counter__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
.tile{display:flex;flex-direction:column}
.tile__shot{overflow:hidden;border-radius:2px;background:var(--stone)}
.tile__shot img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform .7s var(--out);
}
.tile:hover .tile__shot img{transform:scale(1.035)}
.tile h3{margin:1.05rem 0 .4rem}
.tile p{font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.6}
.tile__tag{
  margin-top:.7rem;font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cocoa);
}
@media (max-width:900px){.counter__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.counter__grid{grid-template-columns:1fr;gap:2rem}}

/* ── Masa madre ─────────────────────────────────────────────────────────── */
.craft__band{margin-bottom:clamp(2.5rem,5vw,4rem)}
.craft__band img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px}
.craft__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20rem);gap:clamp(2rem,5vw,4rem);align-items:start}
.craft__list{display:grid;gap:1.4rem;margin-top:2rem}
.craft__list li{display:grid;grid-template-columns:2.4rem 1fr;gap:1rem;align-items:baseline}
.craft__list b{
  font-family:"Erode",Georgia,serif;font-size:var(--fs-display-sm);font-weight:500;color:var(--cocoa);
  line-height:1;font-variant-numeric:tabular-nums;
}
.craft__list p{font-size:var(--fs-body-2);color:var(--ink-soft);margin-top:.35rem}
.craft__list h3{font-size:var(--fs-base);font-family:"Switzer",system-ui,sans-serif;font-weight:600;letter-spacing:0}
.craft__side img{width:100%;border-radius:2px;box-shadow:var(--lift)}
.craft__side figcaption{margin-top:.8rem;font-size:var(--fs-xs);color:var(--muted);line-height:1.5}
@media (max-width:820px){.craft__grid{grid-template-columns:1fr}.craft__side{max-width:22rem}}

/* ── Brunch ─────────────────────────────────────────────────────────────── */
.brunch{background:var(--paper)}
.brunch__grid{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.brunch__shot img{width:100%;border-radius:2px;box-shadow:var(--lift)}
.brunch__shot figcaption{margin-top:.8rem;font-size:var(--fs-xs);color:var(--muted);line-height:1.5}
.dishes{display:grid;gap:0;border-top:1px solid var(--stone);margin-top:1.9rem}
.dishes li{
  display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;
  padding:1.05rem 0;border-bottom:1px solid var(--stone);
}
.dishes h3{font-family:"Erode",Georgia,serif;font-weight:500;font-size:var(--fs-h3);letter-spacing:0}
.dishes p{font-size:var(--fs-sm);color:var(--muted);margin-top:.28rem}
.dishes span{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cocoa);white-space:nowrap;
}
.brunch__after{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.brunch__note{font-size:var(--fs-sm);color:var(--muted)}
@media (max-width:820px){.brunch__grid{grid-template-columns:1fr}.brunch__shot{max-width:20rem}}

/* ── Tardeo ─────────────────────────────────────────────────────────────── */
.tardeo{background:var(--char);color:var(--bone-dk)}
.tardeo h2,.tardeo h3{color:var(--bone-dk)}
.tardeo h2 + .lede,h2 + p.lede{margin-top:1.1rem}
.eyebrow{color:var(--sage-lt)}
.tardeo .lede{color:var(--muted-dk)}
.tardeo__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20rem);gap:clamp(2rem,5vw,4rem);align-items:center}
.tardeo__shot img{
  width:100%;border-radius:2px;
  clip-path:polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
}
.clock{
  display:inline-flex;align-items:baseline;gap:.6rem;margin:1.8rem 0 1.5rem;
  font-family:"Erode",Georgia,serif;font-size:clamp(2rem,5vw,3rem);font-weight:500;
  color:var(--bone-dk);line-height:1;
}
.clock small{font-family:"Switzer",system-ui,sans-serif;font-size:var(--fs-sm);font-weight:500;color:var(--muted-dk);letter-spacing:.14em;text-transform:uppercase}
.tardeo__list{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.tardeo__list li{
  padding:.42rem .95rem;border:1px solid var(--char-2);border-radius:999px;
  border-color:color-mix(in srgb,var(--bone-dk) 24%,transparent);
  font-size:var(--fs-sm);color:var(--bone-dk);
}
@media (max-width:820px){.tardeo__grid{grid-template-columns:1fr}.tardeo__shot{max-width:20rem}}

/* ── La esquina ─────────────────────────────────────────────────────────── */
.place__grid{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.place__shot img{
  width:100%;border-radius:2px;box-shadow:var(--lift);
  clip-path:polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
}
.place__shot figcaption{margin-top:.8rem;font-size:var(--fs-xs);color:var(--muted)}
.hours{width:100%;border-collapse:collapse;margin-top:1.9rem}
.hours caption{
  text-align:left;font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding-bottom:.8rem;
}
.hours th,.hours td{
  text-align:left;padding:.72rem .5rem;border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);font-weight:400;
}
.hours th{color:var(--ink-soft);font-weight:500;width:38%}
.hours td{font-variant-numeric:tabular-nums;color:var(--ink)}
.hours td.closed{color:var(--muted)}
.hours tr[data-today]{background:var(--paper)}
.hours tr[data-today] th,.hours tr[data-today] td{font-weight:600;color:var(--ink)}
.hours tr[data-today] th{
  position:relative;box-shadow:inset 2px 0 0 var(--cocoa);padding-left:.9rem;
}

@media (max-width:820px){
  .place__grid{grid-template-columns:1fr}
  .place__shot{max-width:22rem}
}

/* ── Pedir ──────────────────────────────────────────────────────────────── */
.order{background:var(--paper)}
.order__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:clamp(1rem,2vw,1.5rem)}
.card{
  background:var(--bone);border:1px solid var(--line);padding:clamp(1.4rem,2.5vw,1.9rem);
  display:flex;flex-direction:column;gap:.75rem;
  clip-path:polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.card:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.card h3{font-family:"Switzer",system-ui,sans-serif;font-size:var(--fs-base);font-weight:600;letter-spacing:0}
.card p{font-size:var(--fs-body-2);color:var(--ink-soft)}
.card .btn{margin-top:auto;align-self:flex-start}
.card__num{
  font-family:"Erode",Georgia,serif;font-size:var(--fs-h3);font-weight:500;color:var(--cocoa);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}

.prices{margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--stone);padding-top:2rem}
.prices h3{font-family:"Switzer",system-ui,sans-serif;font-size:var(--fs-base);font-weight:600;letter-spacing:0;margin-bottom:.5rem}
.prices__note{font-size:var(--fs-sm);color:var(--muted);max-width:var(--measure);margin-bottom:1.6rem}
.prices__cols{columns:2;column-gap:clamp(1.5rem,4vw,3.5rem)}
@media (max-width:640px){.prices__cols{columns:1}}
.prices__group{break-inside:avoid;margin-bottom:1.6rem}
.prices__group h4{
  margin:0 0 .55rem;font-size:var(--fs-xs);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cocoa);
}
.prices__group li{
  display:flex;align-items:baseline;gap:.6rem;padding:.34rem 0;font-size:var(--fs-sm);
}
.prices__group li span:first-child{color:var(--ink-soft)}
.prices__group li i{
  flex:1;border-bottom:1px dotted var(--stone);translate:0 -.28em;min-width:1rem;
}
.prices__group li b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}

/* ── Instagram ──────────────────────────────────────────────────────────── */
.social__grid{display:flex;flex-wrap:wrap;gap:clamp(1rem,3vw,2.2rem);align-items:flex-start}
.ring{display:grid;justify-items:center;gap:.7rem;width:96px;text-decoration:none}
.ring__img{
  width:76px;height:76px;border-radius:50%;object-fit:cover;
  outline:1px solid var(--stone);outline-offset:4px;
  transition:outline-color .3s var(--ease),transform .35s var(--out);
}
.ring:hover .ring__img{outline-color:var(--cocoa);transform:scale(1.04)}
.ring span{
  font-size:var(--fs-2xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-align:center;line-height:1.3;
}
.ring:hover span{color:var(--ink)}

/* ── Fuss ───────────────────────────────────────────────────────────────── */
.site-footer{background:var(--char);color:var(--muted-dk);padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.site-footer a{color:var(--bone-dk);text-decoration:none}
.site-footer a:hover{text-decoration:underline;text-underline-offset:3px}
.footer__grid{
  display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));
  gap:clamp(1.6rem,4vw,3rem);padding-bottom:2.5rem;border-bottom:1px solid var(--char-2);
  border-bottom-color:color-mix(in srgb,var(--bone-dk) 14%,transparent);
}
.footer__brand .brand__mark{color:var(--bone-dk)}
.footer__brand .brand__name b{color:var(--bone-dk)}
.footer__brand .brand__name span{color:var(--muted-dk)}
.footer__brand p{margin-top:1rem;font-size:var(--fs-sm);max-width:22rem;line-height:1.6}
.footer__col h2{
  font-family:"Switzer",system-ui,sans-serif;font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dk);margin-bottom:.9rem;
}
.footer__col li{padding:.24rem 0;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.footer__bottom{
  display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;justify-content:space-between;
  align-items:center;padding-top:1.6rem;font-size:var(--fs-xs);
}
.footer__legal{color:var(--muted-dk);max-width:44rem;line-height:1.6}
.signature{display:inline-flex;align-items:center;gap:.42rem;white-space:nowrap}
.signature svg{width:12px;height:12px;color:var(--cocoa-lt)}
.signature a{font-weight:600}
@media (max-width:820px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}

/* ── Kartenseite ────────────────────────────────────────────────────────── */
.page-head{padding-block:clamp(2.5rem,5vw,4rem) clamp(2rem,4vw,3rem);border-bottom:1px solid var(--line)}
.page-head h1{max-width:22ch}
.page-head .lede{margin-top:1.2rem}
.page-meta{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1.8rem;
  font-size:var(--fs-sm);color:var(--muted);
}
.page-meta b{font-weight:600;color:var(--ink)}

.menu__cols{columns:2;column-gap:clamp(2rem,5vw,4.5rem)}
@media (max-width:760px){.menu__cols{columns:1}}
.menu__group{break-inside:avoid;margin-bottom:clamp(2.25rem,4vw,3.25rem)}
.menu__group h2{
  font-size:var(--fs-display-sm);padding-bottom:.7rem;margin-bottom:.4rem;
  border-bottom:1px solid var(--stone);
}
.menu__group > p{font-size:var(--fs-sm);color:var(--muted);margin:.75rem 0 .25rem}
.menu__item{padding:.85rem 0;border-bottom:1px solid var(--line)}
.menu__item h3{
  font-family:"Switzer",system-ui,sans-serif;font-size:var(--fs-base);font-weight:600;letter-spacing:0;
}
.menu__item p{font-size:var(--fs-sm);color:var(--muted);margin-top:.22rem}
.menu__when{
  display:inline-block;margin-top:.55rem;font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cocoa);
}
.menu__closing{
  margin-top:clamp(2rem,4vw,3rem);padding-top:2rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;
}
.menu__closing p{font-size:var(--fs-sm);color:var(--muted);max-width:32rem}
/* Die Druckschaltflaeche taugt nur mit JavaScript etwas. */
.no-js [data-print]{display:none}



/* ── Bewegung ───────────────────────────────────────────────────────────── */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--out)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* Der eine gestaltete Moment: das Hero-Foto zieht entlang der Anschraegung auf. */
.js .hero__shot img{
  clip-path:polygon(0 100%, calc(100% - var(--chamfer)) 100%, 100% 100%, 100% 100%, 0 100%);
  transform:scale(1.05);
  transition:clip-path 1.1s var(--out),transform 1.4s var(--out);
}
.js .hero__shot.is-in img{
  clip-path:polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .hero__shot img{
    clip-path:polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
    transform:none;
  }
  .tile:hover .tile__shot img{transform:none}
}

/* ── Druck ──────────────────────────────────────────────────────────────
   Vor allem fuer die Kartenseite gedacht: die Karte soll sich ausdrucken und
   auf den Tresen legen lassen. Alles Bedienbare faellt weg, die dunklen
   Flaechen werden weiss, und saemtliche Texte darauf werden schwarz — sonst
   druckte die Fusszeile hell auf hell. */
@media print{
  .preview-strip,.site-header,.skip,.hero__actions,.btn,.social,.menu__closing{display:none !important}
  main{padding-top:0}
  body{background:#fff;color:#000;font-size:11pt}
  section{padding-block:1.1rem;break-inside:avoid}
  .counter,.brunch,.order,.tardeo,.site-footer{background:#fff}
  .tardeo *,.site-footer *{color:#000 !important}
  .brand__mark{background:#000}
  .page-head{border-bottom-color:#999}
  .menu__cols,.prices__cols{columns:2}
  .prices__group li i{border-bottom-color:#999}
  .footer__grid{border-bottom-color:#999}
  img,figure,.menu__group,.prices__group,.card{break-inside:avoid}
}