/* ---------- FONTY (self-host, zero CDN) ----------
   Reforma: pliki .woff pobrane 07.09.2026 z serwera producenta motywu i położone lokalnie
   (stara strona ciągnęła je z themes.themegoods.com — RODO + ryzyko awarii).
   Wagi deklarujemy tak jak żywa strona: Blanca 400, Negra 600 — cięższe stopnie
   przeglądarka dopala sama, dzięki czemu nagłówki wyglądają identycznie jak na produkcji.
   Lato: pliki woff2 skopiowane z portofinocuisine.de (latin + latin-ext). */
@font-face{
  font-family:'Reforma2018Blanca';
  src:url('../fonts/reforma2018-blanca.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Reforma2018Negra';
  src:url('../fonts/reforma2018-negra.woff') format('woff');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Lato';
  src:url('../fonts/lato-400-ext.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Lato';
  src:url('../fonts/lato-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Lato';
  src:url('../fonts/lato-700-ext.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Lato';
  src:url('../fonts/lato-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* ---------- KOLORY ---------- */
  --pf-bg:            #0B1517;   /* tło strony i stopki */
  --pf-bg-black:      #000000;   /* sekcje ze zdjęciem */
  --pf-overlay:       rgba(0,0,0,.40);
  --pf-overlay-strong:rgba(0,0,0,.90);
  --pf-text:          #FFFFFF;
  --pf-text-muted:    #999999;
  --pf-gold:          #CA9C5E;   /* JEDYNY akcent */
  --pf-gold-alt:      #C9A96E;
  --pf-line:          #0B1517;   /* oryginał ze strony — patrz uwaga niżej */
  --pf-danger:        #FF6B6B;   /* "Geschlossen" */

  /* UWAGA (do decyzji Gregora): --pf-line = #0B1517 to dokładnie kolor tła,
     więc kropkowana linia w karcie menu byłaby niewidoczna na ciemnym motywie.
     Na starej stronie ten fragment leżał na jasnym tle. Tymczasowo rysujemy ją
     przygaszonym złotem — jeśli wolisz inaczej, zmienia się tylko --pf-line-visible. */
  --pf-line-visible:  rgba(202,156,94,.35);

  /* ---------- RODZINY ---------- */
  --pf-font-display:  'Reforma2018Negra', Georgia, serif;
  --pf-font-heading:  'Reforma2018Blanca', Georgia, serif;
  --pf-font-body:     'Lato', system-ui, -apple-system, sans-serif;

  /* ---------- SKALA (oryginał ze strony) ---------- */
  --pf-fs-hero:       90px;  --pf-lh-hero:    90px;
  --pf-fs-h2:         65px;  --pf-lh-h2:      65px;
  --pf-fs-h2-mid:     45px;  --pf-lh-h2-mid:  58.5px;
  --pf-fs-h3:         36px;  --pf-lh-h3:      36px;
  --pf-fs-lead:       18px;  --pf-lh-lead:    32.4px;
  --pf-fs-eyebrow:    16px;  --pf-lh-eyebrow: 16px;
  --pf-fs-item:       24px;  --pf-lh-item:    43.2px;
  --pf-fs-price:      22px;  --pf-lh-price:   39.6px;
  --pf-fs-body:       17px;  --pf-lh-body:    1.7;   /* PODBITE z 14px — dla starszych gości */
  --pf-fs-small:      13px;  --pf-lh-small:   22px;
  --pf-fs-micro:      12px;

  --pf-ls-wide:       2px;   /* eyebrow, przyciski */

  /* ---------- LAYOUT ---------- */
  --pf-container:     1140px;
  --pf-gutter:        15px;
  --pf-section-gap:   40px;
  --pf-radius:        3px;
  --pf-bp-mobile:     767px;
  --pf-bp-tablet:     1024px;

  --pf-header-h:      92px;
}

/* ---------- BAZA ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  /* słowa nagłówków startują poza prawą krawędzią (animacja wjazdu), a dekoracje
     celowo wychodzą poza kontener — clip przycina to bez robienia poziomego paska
     przewijania i bez zamieniania <html> w kontener przewijania (jak overflow:hidden). */
  overflow-x:clip;
}
body{
  margin:0;
  /* Oryginał ma to włączone — bez tego litery renderują się odrobinę grubiej. */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:var(--pf-bg);
  color:var(--pf-text);
  font-family:var(--pf-font-body);
  font-size:var(--pf-fs-body);
  line-height:var(--pf-lh-body);
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--pf-gold); }
:focus-visible{ outline:2px solid var(--pf-gold); outline-offset:3px; }

.pf-container{ max-width:var(--pf-container); margin:0 auto; padding:0 var(--pf-gutter); }
.pf-section{ padding:120px 0; }
.pf-center{ text-align:center; }
.pf-narrow{ max-width:760px; margin:0 auto; }
.pf-muted{ color:var(--pf-text-muted); }
.pf-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- TYPOGRAFIA ---------- */
.pf-eyebrow{
  font-family:var(--pf-font-heading); font-size:var(--pf-fs-eyebrow); font-weight:400;
  line-height:var(--pf-lh-eyebrow); letter-spacing:var(--pf-ls-wide);
  text-transform:uppercase; color:var(--pf-text); margin:0 0 18px;
}
.pf-eyebrow--gold{ color:var(--pf-gold); }
.pf-hero-title{
  font-family:var(--pf-font-display); font-size:var(--pf-fs-hero); font-weight:900;
  line-height:var(--pf-lh-hero); margin:0 0 20px;
}
.pf-h2{
  font-family:var(--pf-font-display); font-size:var(--pf-fs-h2); font-weight:900;
  line-height:var(--pf-lh-h2); margin:0 0 20px;
}
.pf-h2--light{
  font-family:var(--pf-font-heading); font-size:var(--pf-fs-h2-mid); font-weight:600;
  line-height:var(--pf-lh-h2-mid);
}
.pf-lead{
  font-family:var(--pf-font-heading); font-size:var(--pf-fs-lead); font-weight:400;
  line-height:var(--pf-lh-lead); margin:0 0 24px;
}
.pf-quote{
  font-family:var(--pf-font-heading); font-size:var(--pf-fs-lead); font-style:italic;
  line-height:var(--pf-lh-lead); color:var(--pf-gold); margin:0;
}

/* dekoracyjny divider — złota kreska */
.pf-rule{
  width:60px; height:1px; background:var(--pf-gold-alt);
  border:0; margin:26px auto 30px;
}

/* ---------- PRZYCISK ---------- */
.pf-btn{
  display:inline-block;
  font-family:var(--pf-font-heading); font-size:var(--pf-fs-lead); font-weight:400;
  line-height:1; letter-spacing:var(--pf-ls-wide); text-transform:uppercase;
  color:var(--pf-text); text-decoration:none;
  background:transparent; border:1px solid var(--pf-gold); border-radius:var(--pf-radius);
  padding:20px 30px; cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.pf-btn:hover{ background:var(--pf-gold); color:var(--pf-bg); }
.pf-btn--solid{ background:var(--pf-gold); color:var(--pf-bg); }
/* wariant ze starej strony: bez ramki, tylko cienka złota kreska nad i pod tekstem */
.pf-btn--rules{
  border:0; border-top:1px solid var(--pf-gold); border-bottom:1px solid var(--pf-gold);
  border-radius:0; padding:16px 34px; background:transparent;
}
.pf-btn--rules:hover{ background:transparent; color:var(--pf-gold); border-color:var(--pf-gold-alt); }
.pf-btn--solid:hover{ background:transparent; color:var(--pf-text); }
.pf-btn + .pf-btn{ margin-left:14px; }

/* ---------- HEADER ---------- */
/* UWAGA: żadnego backdrop-filter na <header> — tworzy containing block
   dla position:fixed i przycina fullscreen menu mobilne (sprawdzone na kantofino.de). */
/* Nagłówek jedzie z treścią i po prostu odjeżdża przy przewijaniu — tak jak na
   portofinocuisine.de (sprawdzone: position:static, tło przezroczyste, brak paska).
   Żadnego przyklejania i żadnego czarnego paska nad stroną. */
.pf-header{
  position:relative; z-index:2;
  /* Zmierzone na oryginale (1440 px): logo startuje w 143, ikony kończą się w 1265 —
     czyli nagłówek siedzi w tym samym kontenerze 1140 px co reszta treści,
     a nie rozpycha się do krawędzi ekranu. */
  width:100%; max-width:calc(var(--pf-container) + 2 * var(--pf-gutter));
  margin:0 auto;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:30px;
  padding:20px var(--pf-gutter);
  background:transparent;
}

.pf-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--pf-text); }
.pf-brand img{ height:140px; width:auto; }   /* zmierzone na oryginale */
.pf-brand-name{
  display:block;
  font-family:var(--pf-font-display); font-size:22px; font-weight:900; line-height:1;
  letter-spacing:1px; text-transform:uppercase;
}
.pf-brand-sub{
  display:block;
  font-family:var(--pf-font-heading); font-size:var(--pf-fs-micro);
  letter-spacing:var(--pf-ls-wide); text-transform:uppercase; color:var(--pf-gold);
  margin-top:5px;
}

.pf-nav{ display:flex; align-items:center; gap:28px; }
.pf-nav{ justify-self:center; }
.pf-nav a{
  /* Zmierzone na oryginale: Reforma Negra 16 px, waga 600, bez rozstrzelenia.
     Waga 600 jest zadeklarowana w @font-face, więc przeglądarka nic nie dopala
     — stąd ten czysty, lekko pogrubiony rysunek liter. */
  font-family:var(--pf-font-display); font-size:var(--pf-fs-eyebrow); font-weight:600;
  letter-spacing:normal; text-transform:none;
  color:var(--pf-text); text-decoration:none;
  transition:color .2s ease;
}
.pf-nav a:hover,
.pf-nav a[aria-current="page"]{ color:var(--pf-gold); }

/* Podkreślenie wjeżdżające od lewej do prawej — jak na oryginale.
   Kreska rysuje się pod całym wyrazem, tekst w tym czasie idzie na złoto. */
.pf-nav a{ position:relative; }
.pf-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  background:var(--pf-gold);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .35s cubic-bezier(.23,1,.32,1);
}
.pf-nav a:hover::after,
.pf-nav a:focus-visible::after{ transform:scaleX(1); }
/* aktywna pozycja jest złota, ale bez kreski — kreska należy do najechania */
.pf-nav a[aria-current="page"]::after{ transform:scaleX(0); }
.pf-nav a[aria-current="page"]:hover::after{ transform:scaleX(1); }

@media (prefers-reduced-motion:reduce){
  .pf-nav a::after{ transition:none; }
}

.pf-nav-toggle{
  display:none; width:44px; height:44px; padding:10px;
  background:transparent; border:0; cursor:pointer;
}
.pf-nav-toggle span{ display:block; height:2px; background:var(--pf-text); margin:5px 0; transition:transform .25s ease, opacity .25s ease; }
.pf-nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.pf-nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.pf-nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- IKONY SOCIAL ---------- */
.pf-social{ display:flex; align-items:center; gap:18px; }
.pf-social a{
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--pf-text); line-height:0;
  transition:color .2s ease;
}
.pf-social a:hover{ color:var(--pf-gold); }
.pf-social svg{ width:20px; height:20px; fill:currentColor; }

/* ---------- HERO ---------- */
/* Złota ramka dookoła hero — 10 px #CA9C5E z każdej strony.
   Na oryginale to border sekcji, nie osobna kreska pod spodem. */
.pf-hero{
  border:10px solid var(--pf-gold);
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; text-align:center;
  background:var(--pf-bg-black) url('../img/hero.jpg?v=1788787867') center/cover no-repeat;
}
/* treść hero wypełnia to, co zostaje pod nagłówkiem, i siedzi na środku */
.pf-hero-inner{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px var(--pf-gutter) 90px;
}
.pf-hero-inner > *{ max-width:100%; }
/* akapit w hero podstron: wąska, wyśrodkowana kolumna — jak w oryginale,
   a nie tekst rozciągnięty od lewej do prawej krawędzi */
.pf-hero-inner .pf-lead{ max-width:600px; margin-left:auto; margin-right:auto; }
/* Delikatne przyciemnienie hero: mocniejsze u góry, żeby menu i logo były czytelne
   na jasnym talerzu, i lekkie na reszcie zdjęcia (ok. 12%). Zdjęcie zostaje jasne. */
.pf-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.34) 0, rgba(0,0,0,.14) 240px, rgba(0,0,0,.12) 100%);
}
.pf-hero > *{ position:relative; z-index:1; }

/* Podstrony ze zdjęciem: odrobinę mocniej u góry niż na stronie głównej, bo tam
   pod menu wypada środek jasnego talerza i złota pozycja aktywna ginie. Reszta
   zdjęcia zostaje praktycznie nietknięta. */
.pf-hero--speisekarte::after,
.pf-hero--reservierung::after,
.pf-hero--kontakt::after{
  background:linear-gradient(180deg, rgba(0,0,0,.42) 0, rgba(0,0,0,.18) 260px, rgba(0,0,0,.14) 100%);
}

/* stary, mocny overlay — zostaje dla nagłówków bez zdjęcia (Impressum, Datenschutz) */
.pf-hero--page::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--pf-overlay) 0%, rgba(0,0,0,.55) 60%, var(--pf-bg) 100%);
}
.pf-hero .pf-hero-title,
.pf-hero .pf-eyebrow,
.pf-hero .pf-lead{ text-shadow:0 2px 18px rgba(0,0,0,.45); }
.pf-hero--page .pf-hero-title,
.pf-hero--page .pf-eyebrow,
.pf-hero--page .pf-lead{ text-shadow:none; }
.pf-hero > *{ position:relative; z-index:1; }
.pf-hero .pf-lead{ margin-bottom:40px; }

/* wariant dla podstron — niższy nagłówek, bez pełnego ekranu */
.pf-hero--page{
  min-height:62svh;
  background-image:url('../img/speisekarte.jpg?v=1788787868');
}
.pf-hero--reservierung{ background-image:url('../img/reservierung.jpg?v=1789541707'); }
.pf-hero--kontakt{ background-image:url('../img/kontakt.jpg?v=1788792041'); }
.pf-hero--speisekarte{ background-image:url('../img/speisekarte.jpg?v=1788787868'); }
/* strony prawne bez zdjęcia — sam ciemny nagłówek */
.pf-hero--plain{ background-image:none; min-height:auto; }
.pf-hero--plain .pf-hero-inner{ padding:70px var(--pf-gutter) 80px; }
.pf-hero--page .pf-hero-title{ font-size:var(--pf-fs-h2); line-height:var(--pf-lh-h2); }

/* ---------- SEKCJA: ZDJĘCIE + TEKST (dwie kolumny) ----------
   Układ z oryginału: po lewej zdjęcie, po prawej nadtytuł, złoty nagłówek
   i ozdobnik pod spodem. */
.pf-cols.pf-cols--media{ grid-template-columns:0.66fr 1.34fr; gap:48px; align-items:center; }
/* na szerokim ekranie nadtytuł zostaje w jednej linii — na oryginale się nie łamie */
@media (min-width:1200px){ .pf-eyebrow--jedna-linia{ white-space:nowrap; } }
.pf-cols.pf-cols--half{ grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.pf-media{
  min-width:0;
  background:var(--pf-bg-black) var(--pf-media-img, none) center/cover no-repeat;
  aspect-ratio:1/1; border-radius:var(--pf-radius);
}
.pf-media--1{ --pf-media-img:url('../img/section-1.jpg?v=1788792981'); }
.pf-media--res{ --pf-media-img:url('../img/reservierung-cta.jpg?v=1788790880'); aspect-ratio:3/4; }
.pf-h2--gold{ color:var(--pf-gold); }
.pf-h2--gold em{ font-style:italic; }
.pf-orn-divider{ margin-top:46px; color:var(--pf-gold); }
.pf-orn-divider .pf-orn{ width:300px; height:auto; }

/* hero: napis odjeżdża w górę i gaśnie przy przewijaniu (jak na oryginale) */
.pf-hero-inner{ will-change:opacity, transform; }

/* (Dawny .pf-goldline usunięty — jego rolę pełni dolna krawędź ramki hero.) */

/* ---------- SEKCJA ZE ZDJĘCIEM (strip) ---------- */
.pf-strip{
  min-height:420px;
  background:var(--pf-bg-black) center/cover no-repeat;
  position:relative;
}
.pf-strip::after{ content:""; position:absolute; inset:0; background:var(--pf-overlay); }

/* ---------- DEKORACJE: LEWITUJĄCY TALERZ I LIŚCIE ----------
   (Blok odtworzony 16.09 — wcześniej wyciąłem go przypadkiem razem z nieużywanym
   paskiem skrótów na speisekarte.) Talerz dryfuje przy przewijaniu, liście stoją.
   Pliki wchodzą przez tło, więc brak zdjęcia nie robi połamanej ikonki. */
.pf-float{
  position:absolute; pointer-events:none; z-index:0;
  background:var(--pf-float-img, none) center/contain no-repeat;
  transform:translate3d(0, var(--pf-float-y, 0px), 0);
  will-change:transform;
}
.pf-section{ position:relative; overflow:hidden; }
/* wyjątek: sekcje, w których dekoracja celowo wychodzi poza granice */
.pf-section--float,
.pf-section--lisc,
.pf-section:has(> .pf-float){ overflow:visible; }
.pf-section--float{ padding:220px 0 140px; }   /* więcej oddechu nad talerzem i tekstem */
.pf-section > .pf-container{ position:relative; z-index:1; }
.pf-hero + .pf-section{ padding-top:70px; }   /* jak w oryginale — sekcja podjeżdża pod ramkę hero */
/* na rezerwacji więcej powietrza pod ramką zdjęcia — decyzja Gregora 16.09 */
.pf-hero--reservierung + .pf-section{ padding-top:140px; }

/* liść, na którym leży talerz — stoi nieruchomo */
.pf-float--leaf{
  --pf-float-img:url('../img/plate-leaf.png?v=1788791629');
  right:12%; top:calc(-23% + 154px); width:min(34vw, 470px); aspect-ratio:825/1076;
  z-index:0;
}
/* talerz — jedyny element w tej sekcji, który się porusza */
.pf-float--plate{
  --pf-float-img:url('../img/float-plate.png?v=1788790848');
  right:16%; top:154px; width:min(31vw, 420px); aspect-ratio:837/900;   /* środek talerza równo ze środkiem tekstu */
  z-index:1;
}

/* dryf przy przewijaniu ("scrollme" z oryginału) */
[data-drift]{
  transform:translate3d(0, var(--pf-drift-y, 0px), 0);
  transition:transform .5s cubic-bezier(.23,1,.32,1);
  will-change:transform;
}

/* ---------- LIŚCIE PRZY KRAWĘDZIACH ----------
   W oryginale wchodzą od góry sekcji i nachodzą na zdjęcie hero. */
.pf-leaf{ position:absolute; pointer-events:none; z-index:0; width:auto; }
/* Oba pliki mają jedną prostą krawędź (sprawdzone w alfie: leaf-right.png po lewej,
   leaf-left.png po prawej). Przykładamy ją dokładnie do brzegu ekranu — wtedy cięcie
   znika za krawędzią i nie widać prostego boku. Żadnych obrotów ani odbić. */
.pf-leaf--l{ top:-150px; left:0;  width:min(19vw, 270px); }
.pf-leaf--r{ top:-130px; right:0; width:min(17vw, 250px); }
.pf-leaf--bl{ bottom:0; left:0; width:min(20vw, 280px); }
@media (max-width:1024px){ .pf-leaf, .pf-float{ display:none; } }

/* ---------- KARTA MENU ---------- */
.pf-menu-section{ margin-bottom:calc(var(--pf-section-gap) * 2.4); scroll-margin-top:110px; }
.pf-section-title{
  font-family:var(--pf-font-display); font-size:var(--pf-fs-h3); font-weight:900;
  line-height:var(--pf-lh-h3); text-align:center; margin:0 0 20px;
}
.pf-menu-item{ padding:10px 20px; }
.pf-item-top{ display:table; width:100%; table-layout:auto; }
.pf-item-name{
  display:table-cell; vertical-align:bottom; white-space:nowrap; padding-right:5px;
  font-family:var(--pf-font-display); font-size:var(--pf-fs-item); font-weight:400;
  line-height:var(--pf-lh-item); color:var(--pf-gold);
}
.pf-item-line{
  display:table-cell; width:100%; vertical-align:bottom; padding-bottom:8px;
  border-bottom:0;   /* bez kropek prowadzących do ceny — decyzja Gregora 07.09 */
}
.pf-item-price{
  display:table-cell; vertical-align:bottom; text-align:right; white-space:nowrap; padding-left:10px;
  font-family:var(--pf-font-display); font-size:var(--pf-fs-price); font-weight:600;
  line-height:var(--pf-lh-price); color:var(--pf-gold);
}
.pf-item-desc{
  font-family:var(--pf-font-body); font-size:var(--pf-fs-body); font-weight:400;
  line-height:var(--pf-lh-body); color:var(--pf-text); margin:0;
}
.pf-item-extra{
  font-family:var(--pf-font-body); font-size:var(--pf-fs-small); font-style:italic;
  line-height:var(--pf-lh-small); color:var(--pf-gold); margin:2px 0 0;
}

/* ---------- KONTAKT: siatka 2×2 jak na oryginale ---------- */
.pf-kontakt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px 60px; }
/* nagłówki zmierzone na oryginale: Reforma Negra 32 px, białe */
.pf-h-kontakt{
  font-family:var(--pf-font-display); font-size:32px; font-weight:900;
  line-height:1.25; color:var(--pf-text); margin:0 0 22px;
}
.pf-h-kontakt--600{ font-weight:600; margin:0 0 14px; }
.pf-h-kontakt a{ color:inherit; text-decoration:none; transition:color .2s ease; }
.pf-h-kontakt a:hover{ color:var(--pf-gold); }
.pf-h-sub{
  font-family:var(--pf-font-display); font-size:20px; font-weight:900;
  line-height:1.3; color:var(--pf-text); margin:0 0 12px;
}
.pf-kontakt-linki{ margin:0; }
.pf-kontakt-linki a{ text-decoration:none; }
.pf-kontakt-linki a:hover{ text-decoration:underline; }
.pf-godziny-lista{ margin:0; line-height:1.7; }

/* paproć i liść — wychodzą poza ekran i nachodzą na ramkę zdjęcia */
.pf-deko{ position:absolute; pointer-events:none; z-index:2; height:auto; }
.pf-deko--paproc{ top:-289px; left:-406px; width:713px; }
.pf-deko--lisc{   top:-253px; right:-150px; width:400px; }
.pf-section--kontakt{ padding-top:110px; }

@media (max-width:1024px){ .pf-deko{ display:none; } }
@media (max-width:767px){
  .pf-kontakt-grid{ grid-template-columns:1fr; gap:40px; }
  .pf-h-kontakt{ font-size:26px; }
  .pf-section--kontakt{ padding-top:64px; }
}

/* ---------- MAPA (ładowana za zgodą, jak Bookero) ----------
   Pełna szerokość i 600 px wysokości, jak na oryginale. Karta zgody siedzi
   na środku tego samego pola, więc po kliknięciu nic nie skacze. */
.pf-mapa-pelna{
  position:relative; height:600px;
  display:flex; align-items:center; justify-content:center;
  background:#0f1c1f; padding:0 var(--pf-gutter);
}
.pf-mapa{ position:absolute; inset:0; }
.pf-mapa:empty{ display:none; }
.pf-mapa iframe{ display:block; width:100%; height:100%; border:0; }
.pf-consent--mapa{ position:relative; z-index:1; }

/* formularz: teksty po lewej, pola po prawej */
.pf-cols.pf-cols--formularz{ grid-template-columns:0.8fr 1.2fr; gap:80px; align-items:start; }
.pf-formularz-tekst p{ margin:0 0 16px; }
.pf-formularz-tekst ul{ margin:0 0 16px; padding-left:22px; }
.pf-formularz-tekst li{ margin-bottom:8px; }
.pf-formularz-tekst a{ color:var(--pf-gold); }
@media (max-width:767px){
  .pf-mapa-pelna{ height:420px; }
}

/* ---------- REZERWACJA BOOKERO: popup ----------
   Wymiary i kolory jak na starej stronie: przyciemnione tło 75%, biała karta
   max 620 px, złota ramka. Bookero ma style pisane pod jasne tło, więc na
   białej karcie wygląda poprawnie bez żadnych nadpisań. */
.pf-bookero-popup{
  position:fixed; inset:0; z-index:10000;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.75);
}
.pf-bookero-popup.open{ display:flex; }
.pf-bookero-karta{
  position:relative; width:90%; max-width:620px; max-height:90vh; overflow-y:auto;
  padding:30px; border-radius:8px;
  background:#fff; color:#1a1a1a; border:1px solid var(--pf-gold-alt);
  font-family:var(--pf-font-body);
}
.pf-bookero-zamknij{
  position:absolute; top:10px; right:14px;
  background:transparent; border:0; cursor:pointer;
  font-size:32px; line-height:1; color:#333;
}
.pf-bookero-zamknij:hover{ color:var(--pf-gold); }
#bookero{ min-height:120px; }

/* Warstwa ładowania: zasłania kartę, dopóki arkusz Bookero się nie wczyta
   i formularz się nie wyrenderuje — żeby nie mignął goły formularz.
   Widget pod spodem normalnie się układa, tylko go nie widać. */
.pf-bookero-karta{ min-height:360px; }
.pf-bookero-ladowanie{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:14px;
  background:#fff; border-radius:8px;
  font-family:var(--pf-font-heading); font-size:var(--pf-fs-lead); letter-spacing:.5px;
  transition:opacity .25s ease, visibility .25s ease;
}
.pf-bookero-karta.gotowe .pf-bookero-ladowanie{ opacity:0; visibility:hidden; }
.pf-bookero-zamknij{ z-index:3; }
.pf-spinner{
  width:22px; height:22px; border-radius:50%;
  border:2px solid rgba(201,169,110,.3); border-top-color:var(--pf-gold-alt);
  animation:pf-kreci .8s linear infinite;
}
@keyframes pf-kreci{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .pf-spinner{ animation-duration:2.4s; } }

/* Nadpisania 1:1 ze starej strony (tam: #pf-bookero-inner, u nas: .pf-bookero-karta).
   Wszystko w środku ciemnym kolorem, nagłówek Bookero zostaje niebieski z białym
   tekstem, pola białe. !important jak w oryginale — Bookero ma bardzo mocne selektory. */
.pf-bookero-karta,
.pf-bookero-karta *{ color:#333 !important; }
/* pasek „Buchen Sie einen Termin" — na starej stronie jest ukryty */
.pf-bookero-karta .bookero-plugin-header{ display:none !important; }
.pf-bookero-karta [class*="bookero-plugin-btn"],
.pf-bookero-karta [class*="bookero-plugin-button"],
.pf-bookero-karta [class*="bookero-plugin-submit"],
.pf-bookero-karta .bookero-plugin-form-cart-go-btn{
  background-color:#C9A96E !important; color:#fff !important;
}
.pf-bookero-karta a{ color:#228ee3 !important; }
.pf-bookero-karta input,
.pf-bookero-karta select,
.pf-bookero-karta textarea{
  color:#333 !important; background-color:#fff !important;
  /* zmierzone na starej stronie: 2 px złota ramka, zaokrąglenie 5 px */
  border:2px solid var(--pf-gold-alt) !important; border-radius:5px !important;
}
/* przycisk „Zur Zusammenfassung übergehen" — niebieski Bookero z białym napisem */
.pf-bookero-karta .submit-button,
.pf-bookero-karta .submit-button *{ color:#fff !important; }
/* nasza notka pod formularzem i krzyżyk — poza regułą „wszystko na #333" */
.pf-bookero-karta .pf-bookero-info{ color:#666 !important; }
.pf-bookero-karta .pf-bookero-info a{ color:#8a6a3c !important; }
.pf-bookero-karta .pf-bookero-zamknij:hover{ color:var(--pf-gold) !important; }

.pf-bookero-info{ margin:18px 0 0; font-size:var(--pf-fs-small); line-height:var(--pf-lh-small); color:#666; }
.pf-bookero-info a{ color:#8a6a3c; }

/* zostaje dla karty zgody przy mapie Google */
.pf-consent{
  max-width:640px; margin:0 auto; padding:36px 30px; text-align:center;
  border:1px solid var(--pf-gold); border-radius:var(--pf-radius);
  background:rgba(255,255,255,.02);
}
.pf-consent p{ margin:0 0 24px; color:var(--pf-text-muted); font-size:var(--pf-fs-small); line-height:var(--pf-lh-small); }
.pf-consent p a{ color:var(--pf-gold); }

/* ---------- BLOKI INFORMACYJNE (3 kolumny) ---------- */
.pf-cols.pf-cols--3{ grid-template-columns:repeat(3,1fr); gap:44px; }
.pf-info h3{
  font-family:var(--pf-font-heading); font-size:var(--pf-fs-lead); font-weight:600;
  line-height:1.4; letter-spacing:var(--pf-ls-wide); text-transform:uppercase;
  color:var(--pf-gold); margin:0 0 14px;
}
.pf-info p{ margin:0; }
/* numer telefonu zawsze w jednej linii — nie może się łamać między cyframi */
.pf-tel{ white-space:nowrap; }
.pf-info a{ text-decoration:none; }
.pf-info a:hover{ text-decoration:underline; }

/* ---------- GALERIA ----------
   Układ jeden do jednego ze starej strony: górny rząd trzy zdjęcia
   (wąskie / szerokie / wąskie), dolny dwa równe.
   Zdjęcia wchodzą przez tło, nie przez <img> — dopóki plików nie ma,
   nie ma połamanych ikonek, a kafle i tak trzymają układ. */
.pf-gallery{ display:grid; gap:20px; }
/* min-width:0 jest tu obowiązkowe: bez tego domyślne min-width:auto razem z
   aspect-ratio rozdmuchuje kafle poza kontener (kolumny robiły się po 720 px). */
.pf-gallery-row{ display:grid; gap:20px; min-width:0; }
.pf-gallery-row--3{ grid-template-columns:3fr 4.5fr 2fr; }
.pf-gallery-row--2{ grid-template-columns:1fr 1fr; }
.pf-gallery-item{
  position:relative; min-width:0; align-self:start; overflow:hidden;
  background:var(--pf-bg-black);
  border-radius:var(--pf-radius);
}
/* zdjęcie siedzi w osobnej warstwie — przy najechaniu delikatnie się przybliża */
.pf-gallery-item::before{
  content:""; position:absolute; inset:0;
  background:var(--pf-gal-img, none) center/cover no-repeat;
  transition:transform .7s cubic-bezier(.23,1,.32,1);
}
.pf-gallery-item.pf-klik:hover::before,
.pf-gallery-item.pf-klik:focus-visible::before{ transform:scale(1.07); }
@media (prefers-reduced-motion:reduce){
  .pf-gallery-item::before{ transition:none; }
  .pf-gallery-item.pf-klik:hover::before{ transform:none; }
}
.pf-gallery-row--3 .pf-gallery-item{ aspect-ratio:4/3.6; }
.pf-gallery-row--2 .pf-gallery-item{ aspect-ratio:3/2; }
.pf-gal-1{ --pf-gal-img:url('../img/gallery-1.jpg?v=1788792923'); }
.pf-gal-2{ --pf-gal-img:url('../img/gallery-2.jpg?v=1788792923'); }
.pf-gal-3{ --pf-gal-img:url('../img/gallery-3.jpg?v=1788792923'); }
.pf-gal-4{ --pf-gal-img:url('../img/gallery-4.jpg?v=1788792923'); }
.pf-gal-5{ --pf-gal-img:url('../img/gallery-5.jpg?v=1788792923'); }

/* kafle galerii są klikalne — otwierają duże zdjęcie */
.pf-gallery-item.pf-klik{ cursor:zoom-in; overflow:hidden; }
.pf-gallery-item.pf-klik:focus-visible{ outline:2px solid var(--pf-gold); outline-offset:3px; }

/* ---------- POWIĘKSZENIE ZDJĘCIA (lightbox) ---------- */
.pf-lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.94);
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.pf-lightbox.open{ opacity:1; visibility:visible; }
.pf-lightbox img{
  max-width:92vw; max-height:86vh; border-radius:var(--pf-radius);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.pf-lightbox button{
  position:absolute; background:transparent; border:0; cursor:pointer;
  color:var(--pf-text); font-family:var(--pf-font-heading); line-height:1;
  transition:color .2s ease;
}
.pf-lightbox button:hover{ color:var(--pf-gold); }
.pf-lb-zamknij{ top:24px; right:28px; font-size:38px; padding:8px 12px; }
.pf-lb-poprz,
.pf-lb-nast{ top:50%; transform:translateY(-50%); font-size:48px; padding:14px 18px; }
.pf-lb-poprz{ left:16px; }
.pf-lb-nast{ right:16px; }
.pf-lb-licznik{
  position:absolute; bottom:24px; left:0; right:0; text-align:center;
  font-family:var(--pf-font-heading); font-size:var(--pf-fs-small);
  letter-spacing:var(--pf-ls-wide); color:var(--pf-text-muted);
}
@media (max-width:767px){
  .pf-lb-poprz, .pf-lb-nast{ font-size:34px; padding:10px 12px; }
  .pf-lightbox img{ max-width:94vw; }
}

/* nagłówek z ozdobnikami po bokach (jak "Portofino" na starej stronie) */
.pf-title-orn{ display:flex; align-items:center; justify-content:center; gap:26px; }
.pf-title-orn .pf-orn{ width:130px; height:auto; flex:none; }
.pf-title-orn .pf-orn--right{ transform:scaleX(-1); }
.pf-title-orn .pf-h2{ margin:0; }

/* ---------- STOPKA: TRZY KOLUMNY ---------- */
.pf-footer-cols{
  display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center;
  text-align:left;
}
/* Kreski rysujemy jako osobne warstwy o stałej wysokości, a nie jako obramowanie
   kolumn — dzięki temu obie są równej długości niezależnie od tego, ile treści
   siedzi w kolumnie. W oryginale lewa jest złota, prawa biaława. */
.pf-footer-col{ position:relative; padding:20px 40px; }
.pf-footer-cols > * + *::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:2px; height:250px;
}
.pf-footer-cols > *:nth-child(2)::before{ background:var(--pf-gold); }
.pf-footer-cols > *:nth-child(3)::before{ background:rgba(255,255,255,.55); }
.pf-footer-logo{ display:block; width:min(240px, 80%); margin:0 auto; opacity:.92; }

/* ---------- RAMKA-KARTA (godziny, Standort na stronie rezerwacji) ---------- */
.pf-box{
  border:1px solid rgba(202,156,94,.55); border-radius:var(--pf-radius);
  padding:26px 30px;
}
.pf-box + .pf-box{ margin-top:20px; }
/* tabela godzin w osobnej ramce wewnątrz większego pudełka (jak w oryginale) */
.pf-box--tabela{ padding:10px 20px; margin-bottom:26px; }
.pf-box .pf-box--tabela{ margin-top:0; }
.pf-box h3{
  font-family:var(--pf-font-display); font-size:22px; font-weight:900;
  line-height:1.3; margin:0 0 14px; color:var(--pf-text);
}

/* duży cytat-nagłówek (strona rezerwacji) */
.pf-quote-big{
  font-family:var(--pf-font-display); font-size:32px; font-weight:900;
  line-height:1.3; margin:0 0 44px;
}

.pf-cols.pf-cols--info{ grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start; }
.pf-subcols{ display:grid; grid-template-columns:1fr 1fr; gap:36px; }

/* ---------- GODZINY ---------- */
.pf-hours{ width:100%; border-collapse:collapse; }
.pf-hours td{ padding:10px 0; border-bottom:1px solid rgba(255,255,255,.12); }
/* wariant z oryginału: złote linie, padding 20 px, tekst 16 px */
.pf-hours--zlota td{
  padding:20px 0; font-size:16px;
  border-bottom:1px solid var(--pf-gold);
}
.pf-hours--zlota tr:last-child td{ border-bottom:0; }
.pf-hours td:last-child{ text-align:right; }
.pf-hours .pf-closed{ color:var(--pf-danger); }

/* ---------- FORMULARZ ---------- */
.pf-form{ display:grid; gap:22px; }
.pf-field label{
  display:block; margin-bottom:8px;
  font-family:var(--pf-font-heading); font-size:var(--pf-fs-eyebrow);
  letter-spacing:var(--pf-ls-wide); text-transform:uppercase; color:var(--pf-text);
}
.pf-field input,
.pf-field textarea{
  width:100%; padding:14px 16px;
  font-family:var(--pf-font-body); font-size:var(--pf-fs-body); line-height:var(--pf-lh-body);
  color:var(--pf-text); background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.25); border-radius:var(--pf-radius);
}
.pf-field textarea{ min-height:180px; resize:vertical; }
.pf-field input:focus,
.pf-field textarea:focus{ outline:none; border-color:var(--pf-gold); }
.pf-field input::placeholder,
.pf-field textarea::placeholder{ color:var(--pf-text-muted); }
.pf-form-note{ font-size:var(--pf-fs-small); line-height:var(--pf-lh-small); color:var(--pf-text-muted); margin:0; }
.pf-form-note a{ color:var(--pf-gold); }

/* ---------- STRONY PRAWNE (Impressum / Datenschutz) ---------- */
.pf-legal-text{ max-width:860px; margin:0 auto; }
.pf-legal-text h2{
  font-family:var(--pf-font-heading); font-size:var(--pf-fs-h3); font-weight:600;
  line-height:1.25; color:var(--pf-gold); margin:52px 0 16px;
}
.pf-legal-text h2:first-child{ margin-top:0; }
.pf-legal-text h3{
  font-family:var(--pf-font-heading); font-size:var(--pf-fs-lead); font-weight:600;
  line-height:1.4; color:var(--pf-text); margin:32px 0 10px;
}
.pf-legal-text p{ margin:0 0 16px; }
.pf-legal-text ul{ margin:0 0 16px; padding-left:22px; }
.pf-legal-text li{ margin-bottom:8px; }
.pf-legal-text a{ color:var(--pf-gold); }

/* ---------- SIATKA DWUKOLUMNOWA ---------- */
.pf-cols{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }

/* ---------- ADRES ---------- */
.pf-address{ font-style:normal; line-height:1.9; }
.pf-address a{ text-decoration:none; }
.pf-address a:hover{ text-decoration:underline; }

/* ---------- STOPKA ---------- */
.pf-footer{ background:var(--pf-bg); padding:70px 0 50px; }
.pf-footer .pf-h2{ margin-bottom:26px; }
.pf-footer-nav{ display:flex; flex-direction:column; align-items:center; gap:14px; margin:0; }
.pf-footer-nav a{
  font-family:var(--pf-font-display); font-size:var(--pf-fs-eyebrow); font-weight:400;
  letter-spacing:1.8px; text-transform:uppercase;
  color:var(--pf-text); text-decoration:none;
}
.pf-footer-nav a:hover{ color:var(--pf-gold); }
/* Stopka: ikony złote i bez kółek — jak na oryginale. Ten sam kolor co menu karty,
   więc całość trzyma się kupy (decyzja Gregora 07.09). Kółka zostają w nagłówku. */
.pf-footer .pf-social{ justify-content:flex-start; margin:0 0 26px; gap:26px; }
.pf-footer .pf-social a{
  width:auto; height:auto; border:0; border-radius:0;
  background:transparent; color:var(--pf-gold);
}
.pf-footer .pf-social a:hover{ background:transparent; color:var(--pf-text); }
.pf-footer .pf-social svg{ width:26px; height:26px; }
.pf-copyright{
  font-family:var(--pf-font-heading); font-size:var(--pf-fs-micro); font-weight:500;
  line-height:1.6; color:var(--pf-text-muted); margin:0;
}
.pf-legal{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.pf-legal a{ font-size:var(--pf-fs-small); color:var(--pf-text-muted); text-decoration:none; }
.pf-legal a:hover{ color:var(--pf-gold); }

/* ---------- FLOATING CTA ---------- */
.pf-fab{
  position:fixed; right:24px; bottom:24px; z-index:90;
  padding:16px 24px; font-size:var(--pf-fs-eyebrow);
  background:var(--pf-gold); color:var(--pf-bg);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.pf-fab:hover{ background:var(--pf-text); color:var(--pf-bg); }

/* ============================================================
   ANIMACJE WEJŚCIA (wariant C)
   Odtworzone z portofinocuisine.de bez jQuery, Blast.js i Elementora:
   nagłówek rozbijany na słowa, każde wjeżdża z prawej (translateX 101%)
   w 0,8 s, kaskadą co 60 ms. Zdjęcia dochodzą od nas — wjeżdżają
   z lekkim zoomem, czego stara strona nie miała.
   Klasa .pf-anim-ready siada na <html> dopiero z JS, więc bez JS
   albo przy wyłączonych animacjach wszystko jest normalnie widoczne.
   ============================================================ */
.pf-word{ display:inline-block; }
.pf-anim-ready .pf-anim .pf-word{
  opacity:0; transform:translateX(101%);
  /* 800 ms — tyle samo co .themegoods-animated-text na oryginale */
  transition:opacity .8s ease, transform .8s cubic-bezier(.23,1,.32,1);
  transition-delay:var(--pf-d, 0ms);
}
.pf-anim-ready .pf-anim.is-visible .pf-word{ opacity:1; transform:none; }

/* zdjęcia pełnej szerokości — warstwa tła osobno, żeby zoom nie ruszał układu */
.pf-strip{ overflow:hidden; background-image:none; }
.pf-strip::before{
  content:""; position:absolute; inset:0;
  background:var(--pf-strip-img, none) center/cover no-repeat;
  transform-origin:center;
}
.pf-anim-ready .pf-strip::before{
  opacity:0; transform:scale(1.12);
  transition:opacity 1s ease, transform 1.6s cubic-bezier(.22,.61,.36,1);
}
.pf-anim-ready .pf-strip.is-visible::before{ opacity:1; transform:scale(1); }
.pf-strip--1{ --pf-strip-img:url('../img/strip-1.jpg?v=1788787867'); }

/* pozostałe elementy — "smoove" z oryginału: wjazd w poziomie o 40 px,
   1000 ms, easing cubic-bezier(.230,1,.320,1) (wartości z ustawień Elementora) */
.pf-anim-ready .pf-fade{
  opacity:0; transform:translateX(40px);
  transition:opacity 1s ease, transform 1s cubic-bezier(.23,1,.32,1);
  transition-delay:var(--pf-d, 0ms);
}
.pf-anim-ready .pf-fade--left{ transform:translateX(-40px); }
.pf-anim-ready .pf-fade.is-visible{ opacity:1; transform:none; }

/* dryf przy przewijaniu ("scrollme"): kolumny -120 px, talerz -80 px */
[data-drift]{
  transform:translate3d(0, var(--pf-drift-y, 0px), 0);
  transition:transform .5s cubic-bezier(.23,1,.32,1);
  will-change:transform;
}

/* ---------- MOBILE ---------- */
@media (max-width:767px){
  .pf-section{ padding:72px 0; }
  .pf-hero + .pf-section{ padding-top:80px; }
  .pf-section--float{ padding:72px 0; }
  .pf-hero-title{ font-size:44px; line-height:1.05; }
  .pf-hero--page .pf-hero-title{ font-size:34px; line-height:1.1; }
  .pf-h2{ font-size:34px; line-height:1.1; }
  .pf-h2--light{ font-size:28px; line-height:1.25; }
  .pf-section-title{ font-size:28px; line-height:32px; }
  .pf-item-name{ font-size:18px; line-height:32px; white-space:normal; }
  .pf-item-price{ font-size:18px; line-height:32px; }
  .pf-menu-item{ padding:8px 10px; }
  .pf-cols,
  .pf-cols.pf-cols--3,
  .pf-cols.pf-cols--media,
  .pf-cols.pf-cols--half,
  .pf-cols.pf-cols--info,
  .pf-cols.pf-cols--formularz{ grid-template-columns:1fr; gap:44px; }
  .pf-subcols{ grid-template-columns:1fr; gap:28px; }
  .pf-quote-big{ font-size:24px; }
  .pf-orn-divider .pf-orn{ width:180px; height:36px; }
  .pf-gallery-row--3,
  .pf-gallery-row--2{ grid-template-columns:1fr; }
  .pf-gallery-row--3 .pf-gallery-item,
  .pf-gallery-row--2 .pf-gallery-item{ aspect-ratio:3/2; }
  .pf-title-orn{ gap:12px; }
  .pf-title-orn .pf-orn{ width:60px; }
  .pf-footer-cols{ grid-template-columns:1fr; text-align:center; }
  .pf-footer-cols > * + *::before{
    top:0; left:50%; transform:translateX(-50%);
    width:200px; height:2px;
  }
  .pf-footer-col{ padding:32px 0; }
  .pf-footer .pf-social{ justify-content:center; }
  .pf-legal{ align-items:center; }
  .pf-btn{ padding:18px 24px; font-size:var(--pf-fs-eyebrow); }
  .pf-btn + .pf-btn{ margin-left:0; margin-top:14px; }
  .pf-fab{ right:14px; bottom:14px; padding:14px 20px; }
  .pf-header{ padding:12px 16px; }
  .pf-brand img{ height:84px; }
}

/* ---------- MENU MOBILNE: panel wysuwany z prawej (jak na oryginale) ----------
   Zmierzone na portofinocuisine.de: panel 280 px, pełna wysokość, tło #0B1517,
   padding 35/30, linki do lewej — Lato 24 px wersalikami co 48 px,
   wysuwanie 0,5 s cubic-bezier(.645,.045,.355,1).
   UWAGA: <header> nie może mieć transform, opacity ani backdrop-filter — każde z nich
   zamyka position:fixed w pudełku nagłówka i panel rysuje się jako czarny pasek. */
@media (max-width:1024px){
  .pf-nav-toggle{ display:block; grid-column:3; justify-self:end; position:relative; z-index:3; }
  .pf-nav{
    position:fixed; top:0; right:0; bottom:0; z-index:2;
    width:280px; max-width:86vw;
    display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:0;
    padding:110px 24px 35px 30px;
    background:var(--pf-bg); text-align:left;
    transform:translateX(100%); visibility:hidden;
    transition:transform .5s cubic-bezier(.645,.045,.355,1), visibility .5s, box-shadow .5s;
    overflow-y:auto;
  }
  .pf-nav.open{
    transform:none; visibility:visible;
    box-shadow:0 0 0 100vmax rgba(0,0,0,.55);   /* przyciemnienie reszty strony */
  }
  .pf-nav a{
    font-family:var(--pf-font-body); font-size:24px; font-weight:400;
    line-height:48px; letter-spacing:normal; text-transform:uppercase;
    white-space:nowrap;
  }
  .pf-nav a::after{ display:none; }            /* bez wjeżdżającej kreski w panelu */
  body.menu-open{ overflow:hidden; }
  /* otwarte menu musi przykryć wszystko, łącznie z pływającym przyciskiem */
  body.nav-open .pf-header{ z-index:1000; }
  .pf-header .pf-social{ display:none; }
}

/* tablet: trzy bloki nie mieszczą się w jednym rzędzie */
@media (min-width:768px) and (max-width:1024px){
  .pf-cols.pf-cols--3{ grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  /* nic się nie chowa — gość z wyłączonymi animacjami widzi pełną stronę od razu */
  .pf-anim-ready .pf-anim .pf-word,
  .pf-anim-ready .pf-fade,
  .pf-anim-ready .pf-strip::before{ opacity:1 !important; transform:none !important; }
}