/* Kaiseki Restaurant, Entwurf 1. Statisch, ohne Build, ohne JavaScript. */

@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* Die Seite ist bewusst nur dunkel: das Logo ist weiss auf Schwarz. */
  color-scheme: dark;
  --grund: #0b0b0c;
  --flaeche: #141415;
  --linie: #2a2a2c;
  --text: #edecea;
  --leise: #a9a8a4;
  --akzent: #d9573c; /* Zinnober, einzige Akzentfarbe */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rand: clamp(20px, 5vw, 72px);
  --breit: 1320px;
  --weich: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.huelle { max-width: var(--breit); margin-inline: auto; padding-inline: var(--rand); }
.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: 16px; top: 16px; z-index: 30; background: var(--text); color: var(--grund); padding: 10px 16px; }

h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; line-height: 1.05; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 6.2vw, 5.4rem); }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); }
h3 { font-family: var(--serif); font-weight: 600; font-size: 1.55rem; line-height: 1.2; }
.fliess { color: var(--leise); max-width: 58ch; }
.marke { font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--leise); }

/* Knoepfe: durchgehend eckig, wie die Schrift im Logo */
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; font: 500 0.98rem/1 var(--sans); letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; border: 1px solid var(--text); transition: background-color .25s var(--weich), color .25s var(--weich), transform .15s var(--weich); }
.knopf:active { transform: translateY(1px); }
.knopf.voll { background: var(--text); color: var(--grund); }
.knopf.voll:hover { background: transparent; color: var(--text); }
.knopf.leer { background: rgb(11 11 12 / .55); color: var(--text); }
.knopf.leer:hover { background: var(--text); color: var(--grund); }
.textlink { text-underline-offset: 6px; text-decoration-thickness: 1px; text-decoration-color: var(--akzent); }
.textlink:hover { text-decoration-color: var(--text); }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 20; background: rgb(11 11 12 / .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--linie); }
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.kopf .wortmarke img { width: 232px; height: auto; }
.kopf nav { display: flex; gap: 34px; }
.kopf nav a { font-size: 0.95rem; text-decoration: none; color: var(--leise); transition: color .2s; }
.kopf nav a:hover { color: var(--text); }
.kopf .knopf { min-height: 44px; padding: 0 20px; font-size: 0.92rem; }

/* Start */
.start { position: relative; min-height: calc(100dvh - 72px); display: grid; align-items: end; isolation: isolate; overflow: hidden; }
.start .bild { position: absolute; inset: 0; z-index: -2; }
.start .bild img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 62%; }
.start::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(11 11 12 / .92) 0%, rgb(11 11 12 / .62) 42%, rgb(11 11 12 / .08) 78%), linear-gradient(0deg, rgb(11 11 12 / .85) 0%, rgb(11 11 12 / 0) 38%); }
.start > .huelle { width: 100%; }
.start .inhalt { padding-block: clamp(48px, 9vh, 96px); display: grid; gap: 26px; max-width: 760px; }
.start .zeichen { width: clamp(120px, 15vw, 200px); }
.start p { font-size: 1.14rem; max-width: 44ch; color: var(--text); }
.reihe { display: flex; flex-wrap: wrap; gap: 14px; }

section { padding-block: clamp(84px, 13vw, 168px); }

/* Der Name */
.name { text-align: center; border-bottom: 1px solid var(--linie); }
.name .zeichen { width: clamp(180px, 26vw, 340px); margin: 0 auto clamp(36px, 5vw, 64px); opacity: .96; }
.name p.gross { font-family: var(--serif); font-size: clamp(1.7rem, 3.3vw, 2.75rem); line-height: 1.25; max-width: 24ch; margin-inline: auto; text-wrap: balance; }
.name p.gross em { font-style: italic; }
.name .fliess { margin: 30px auto 0; }

/* Kueche: fuenf Kacheln, ungleich gross */
.kueche header { display: grid; gap: 20px; margin-bottom: clamp(40px, 6vw, 72px); }
.kacheln { display: grid; gap: 18px; grid-template-columns: repeat(12, 1fr); }
.kacheln figure { display: grid; gap: 14px; align-content: start; }
.kacheln .rahmen { overflow: hidden; background: var(--flaeche); }
.kacheln img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--weich); }
.kacheln figure:hover img { transform: scale(1.035); }
.kacheln figcaption { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.kacheln figcaption span { color: var(--leise); font-size: 0.93rem; text-align: right; }
.k1 { grid-column: span 8; } .k1 .rahmen { aspect-ratio: 16 / 10; }
.k2 { grid-column: span 4; } .k2 .rahmen { aspect-ratio: 4 / 5.06; }
.k3, .k4, .k5 { grid-column: span 4; }
.k3 .rahmen, .k4 .rahmen, .k5 .rahmen { aspect-ratio: 4 / 5; }
.k4 { margin-top: clamp(0px, 5vw, 64px); }
.kueche .weiter { margin-top: clamp(44px, 6vw, 72px); }

/* Mittag */
.mittag { background: var(--flaeche); border-block: 1px solid var(--linie); }
.mittag .huelle { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.mittag .bild { overflow: hidden; }
.mittag .bild img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; object-position: 30% 50%; }
.mittag .text { display: grid; gap: 22px; }
.preise { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 14px; border-top: 1px solid var(--linie); }
.preise > div { padding: 26px 26px 6px 0; }
.preise > div + div { padding-left: 26px; border-left: 1px solid var(--linie); }
.preise dt { font-family: var(--serif); font-size: clamp(2.3rem, 3.6vw, 3.2rem); line-height: 1; }
.preise dt small { font-family: var(--sans); font-size: 1rem; color: var(--akzent); margin-left: 4px; }
.preise dd { color: var(--leise); margin-top: 12px; font-size: 0.98rem; }

/* Stimmen */
.stimmen .huelle { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(40px, 7vw, 120px); align-items: end; }
.stimmen blockquote { margin: 0; }
.stimmen .haupt p { font-family: var(--serif); font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.2; text-wrap: balance; }
.stimmen footer { margin-top: 22px; color: var(--leise); font-size: 0.95rem; }
.stimmen .neben { display: grid; gap: 40px; }
.stimmen .neben p { font-size: 1.05rem; }
.stimmen h2 { font-size: 1rem; font-family: var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--leise); font-weight: 400; margin-bottom: clamp(32px, 5vw, 56px); grid-column: 1 / -1; }

/* Besuch */
.besuch { padding-bottom: 0; }
.besuch .huelle { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.besuch .text { display: grid; gap: 34px; padding-bottom: clamp(84px, 13vw, 168px); }
.zeiten { display: grid; grid-template-columns: auto 1fr; gap: 10px 32px; }
.zeiten dt { color: var(--leise); }
.angaben { display: grid; gap: 6px; font-style: normal; }
.angaben a { text-decoration: none; }
.angaben a:hover { text-decoration: underline; text-underline-offset: 5px; }
.besuch .bild { align-self: stretch; overflow: hidden; min-height: 420px; }
.besuch .bild img { width: 100%; height: 100%; object-fit: cover; }

/* Fuss */
.fuss { border-top: 1px solid var(--linie); padding-block: 56px 40px; color: var(--leise); font-size: 0.93rem; }
.fuss .huelle { display: flex; flex-wrap: wrap; gap: 28px 56px; justify-content: space-between; align-items: end; }
.fuss img { width: 150px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--text); }

/* Karte (eigene Seite) */
.kartenkopf { padding-block: clamp(56px, 8vw, 104px) clamp(32px, 4vw, 56px); display: grid; gap: 20px; }
.kartenseiten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding-bottom: clamp(72px, 10vw, 140px); }
.kartenseiten a { display: block; background: var(--flaeche); }
.kartenseiten img { width: 100%; }

/* Bewegung: ein ruhiger Einstieg, sanftes Auftauchen beim Scrollen. Beides fuehrt den Blick, nichts laeuft in Schleife. */
@media (prefers-reduced-motion: no-preference) {
  .start .inhalt > * { animation: auf .9s var(--weich) both; }
  .start .inhalt > :nth-child(2) { animation-delay: .08s; }
  .start .inhalt > :nth-child(3) { animation-delay: .16s; }
  .start .inhalt > :nth-child(4) { animation-delay: .24s; }
  .start .bild img { animation: ruhe 1.8s var(--weich) both; }
  @supports (animation-timeline: view()) {
    .zeig { animation: auf linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; }
  }
}
@keyframes auf { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes ruhe { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Schmal */
@media (max-width: 900px) {
  .kopf nav { display: none; }
  .kopf .wortmarke img { width: 178px; }
  .start { min-height: calc(100dvh - 72px); }
  .start::after { background: linear-gradient(0deg, rgb(11 11 12 / .95) 0%, rgb(11 11 12 / .7) 48%, rgb(11 11 12 / .12) 100%); }
  .start .bild img { object-position: 42% 50%; }
  .kacheln { grid-template-columns: 1fr 1fr; }
  .k1 { grid-column: 1 / -1; } .k2, .k3, .k4, .k5 { grid-column: span 1; }
  .k2 .rahmen, .k3 .rahmen, .k4 .rahmen, .k5 .rahmen { aspect-ratio: 4 / 5; }
  .k4 { margin-top: 0; }
  .kacheln figcaption { flex-direction: column; gap: 2px; } .kacheln figcaption span { text-align: left; }
  .mittag .huelle, .stimmen .huelle, .besuch .huelle { grid-template-columns: 1fr; }
  .mittag .bild img { aspect-ratio: 16 / 10; }
  .besuch .text { padding-bottom: 56px; }
  .besuch .bild { min-height: 0; margin-inline: calc(var(--rand) * -1); } .besuch .bild img { aspect-ratio: 4 / 3; }
  .kartenseiten { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .preise { grid-template-columns: 1fr; }
  .preise > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--linie); }
  .reihe .knopf { flex: 1 1 100%; }
}