*{box-sizing:border-box}
:root{--ink:#332822;--wine:#782f3b;--cream:#faf7ee;--line:#d6cec0}
body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.55 "Segoe UI",Arial,sans-serif}
.wrap{width:min(1160px,90%);margin:auto}
header,nav,footer,.tabs{display:flex;align-items:center}
header,footer{justify-content:space-between}
header{padding:22px 0;border-bottom:1px solid var(--line)}
a{color:inherit;text-underline-offset:5px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;letter-spacing:-.035em}
.brand i{background:var(--wine);color:white;padding:0 9px 4px;border-radius:6px;font:italic bold 27px Georgia}
nav{gap:24px}nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:15px}nav a:hover{text-decoration:underline}
.hero,.services,.about{display:grid;grid-template-columns:1.13fr 1fr;gap:8%;align-items:center}
.hero{padding:clamp(40px,6vw,90px) 0}
h1,h2,h3,p{margin:0}h1,h2{font-family:Georgia,serif;font-weight:400;letter-spacing:-.055em;line-height:1.04}
h1{font-size:clamp(42px,4.5vw,65px);text-wrap:balance}h2{font-size:clamp(38px,4.4vw,65px)}em{color:var(--wine)}
.label,.paper small{font:600 11px/1.5 "Courier New",monospace;letter-spacing:.14em;text-transform:uppercase}
.label{margin-bottom:16px}.lead{max-width:435px;margin:22px 0 30px}
.action,.save{background:var(--wine);color:white;border:0;border-radius:5px;padding:13px 18px;text-decoration:none;font:600 15px "Segoe UI",sans-serif;display:inline-flex;gap:20px;align-items:center}
.sample{border:1px solid #c6bdaf;border-radius:12px;overflow:hidden;background:#fffdf7}
.board{padding:32px 25px;background-color:#d0ab91;background-image:repeating-linear-gradient(0deg,transparent 0 19px,#f7e2c960 19px 38px),repeating-linear-gradient(90deg,transparent 0 19px,#f7e2c960 19px 38px)}
.paper{container-type:inline-size;max-width:318px;margin:auto;background:#fffdf1;box-shadow:2px 6px 13px #51312133;padding:23px 25px 10px;color:#3f3c2d;text-align:center;border-block:3px double #8b8d66}
.paper h3{font-family:Georgia,serif;font-weight:400;letter-spacing:-.055em;line-height:1.04;font-size:clamp(24px,16cqw,42px);font-style:italic;color:#44513b;margin:3px 0 15px}
.tabs{justify-content:center;gap:6px;border-block:1px solid #abae95;padding:6px}
button,summary{cursor:pointer}.tabs button{background:transparent;color:#334334;border:0;min-height:44px;padding:8px 14px;border-radius:22px}.tabs [aria-pressed=true]{background:#344b3e;color:white}
.dish{text-align:left;padding:12px 0;border-bottom:1px dotted #b6b498}.dish strong{display:flex;justify-content:space-between;gap:9px;font:600 17px Georgia}.dish span{white-space:nowrap;font:14px "Courier New",monospace}.dish p{font:14px/1.45 Georgia;color:#565748;margin-top:4px}.ornament{font-size:22px;color:#667356}
summary{display:flex;justify-content:space-between;padding:13px 20px;font-size:15px;font-weight:600}details[open] summary span{transform:rotate(45deg)}
form{padding:2px 20px 10px;display:grid;gap:10px}label{display:grid;gap:3px;font-size:14px}select,input{width:100%;font:inherit;font-size:16px;min-height:44px;background:white;border:1px solid #a79f93;padding:8px;border-radius:4px}.save{justify-self:start}#feedback:not(:empty){padding:0 20px 12px;font-size:14px}
.services,.about{align-items:start;border-top:1px solid var(--line);padding:50px 0}.list article+article{border-top:1px solid var(--line);margin-top:17px;padding-top:17px}h3{font:normal 24px Georgia;margin-bottom:6px}.about p+p{margin-top:13px}
#kontakt{padding:55px 0;background:#4d2830;color:#fff7ed}#kontakt em{color:#f2c5a5}#kontakt h2+p{margin:18px 0}#kontakt a{font-size:clamp(18px,3vw,28px);overflow-wrap:anywhere}footer{padding:20px 0;font-size:13px}
#kontakt :focus-visible{outline-color:#ffe0b3}
:focus-visible{outline:3px solid #ac681b;outline-offset:3px}
@media(max-width:720px){.hero,.services,.about{grid-template-columns:1fr;gap:25px}.hero{padding:36px 0}.services,.about{padding:32px 0}nav{gap:12px}nav a{font-size:13px}.brand{font-size:15px}.brand i{display:none}.board{padding:22px}.lead{margin:16px 0 20px}#kontakt{padding:36px 0}}
@media(max-width:480px){header{flex-direction:column;align-items:flex-start;gap:2px;padding:12px 0 5px}.brand{min-height:44px;font-size:17px}nav{width:100%;flex-wrap:wrap;justify-content:space-between;gap:0 8px}nav a{font-size:14px}}
@media(max-width:360px){.board{padding:16px}.paper{padding:19px 15px 8px}}

.sample {
  align-self: start;
  min-width: 0;
}
.comparison-title {
  margin: 20px 20px 12px;
  font: 400 clamp(24px, 3vw, 32px)/1.12 Georgia, serif;
  letter-spacing: -.035em;
}
.comparison-controls {
  display: flex;
  gap: 4px;
  margin: 0 18px;
  padding: 4px;
  border: 1px solid #c4b9a8;
  border-radius: 9px;
  background: #f2ede3;
}
.comparison-tab {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  font: 600 15px/1.25 "Segoe UI", sans-serif;
}
.comparison-tab:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.comparison-tab[aria-pressed="true"] {
  background: var(--wine);
  color: white;
}
.comparison-tab:focus-visible {
  outline: 3px solid #36528b;
  outline-offset: 1px;
}
.comparison-caption {
  margin: 10px 20px 14px;
  color: #56483f;
  font-size: 15px;
  line-height: 1.4;
}
.before-board {
  display: grid;
  place-items: center;
  padding: 26px 18px;
  background: #ddd7cc;
}
.before-sheet {
  width: min(100%, 304px);
  min-height: 275px;
  padding: 20px 12px;
  background: #fffef8;
  border: 1px solid #cbc7b9;
  box-shadow: 2px 5px 12px #453e3025;
  color: #39392f;
  text-align: center;
}
.before-sheet > small {
  font: 600 9px/1.4 "Courier New", monospace;
  letter-spacing: .12em;
}
.before-sheet h3 {
  margin: 4px 0 17px;
  color: #44513b;
  font: italic 26px/1 Georgia, serif;
}
#print-dishes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  text-align: left;
}
#print-dishes h4 {
  margin: 0;
  border-bottom: 1px solid #8b8d71;
  padding: 4px 0;
  font: 600 12px/1.3 Georgia, serif;
}
.before-sheet .dish {
  padding: 7px 0;
}
.before-sheet .dish strong {
  display: block;
  font: 600 11px/1.25 Georgia, serif;
}
.before-sheet .dish span {
  display: inline-block;
  margin-left: 3px;
  font-size: 10px;
}
.before-sheet .dish p {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.3;
}

.dish .price-updated {
  align-self: flex-start;
  color: #45351d;
  background-color: #f3ddb4;
  box-shadow: 0 0 0 3px #f3ddb4;
  border-radius: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .dish .price-updated {
    animation: updated-price 1.35s ease-out both;
  }
  @keyframes updated-price {
    0%, 45% {
      background-color: #f3ddb4;
      box-shadow: 0 0 0 3px #f3ddb4;
    }
    to {
      color: inherit;
      background-color: transparent;
      box-shadow: 0 0 0 3px transparent;
    }
  }
}

@container (max-width: 215px) {
  .tabs {
    gap: 3px;
    padding-inline: 0;
  }
  .tabs button {
    min-width: 44px;
    padding-inline: 7px;
  }
}