/* Café Kranichwiese – ein Motiv: das V eines Kranichzugs. Mobil zuerst. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-standard-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  /* Farben aus der Heide: Moor bei Nacht, Wiese, Hafer, Himmel, der rote Scheitel des Kranichs */
  --bg: #12140f;
  --surface: #1d2019;
  --ink: #f4f4f0;
  --muted: #c4bfb2;
  --accent: #a8cf8e;
  --accent-ink: #12140f;
  --meadow: #a8cf8e;
  --heather: #d8a2c4;
  --oat: #e9dcb8;
  --sky: #a9c4d6;
  --field-ink: #12140f;

  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --text: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);
  --step-hero: clamp(2.625rem, 0.9rem + 7vw, 6.25rem);
  --step-sub: clamp(2rem, 1.4rem + 2.4vw, 3.125rem);

  --margin: clamp(16px, 4vw, 48px);
  --gap: clamp(96px, 14vw, 200px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--step-body)/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; font-stretch: 88%; letter-spacing: -0.03em; line-height: 0.95; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--meadow); color: var(--field-ink); }
.defs { position: absolute; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: -100px; z-index: 10; background: var(--ink); color: var(--bg); padding: 12px 16px; font-weight: 700; }
.skip:focus { top: 12px; }

/* Button: ein Block mit V-Kerbe vorn und V-Spitze hinten – das Motiv als Pfeil */
.btn {
  --notch: 14px;
  display: inline-flex; align-items: center; min-height: 56px;
  padding: 0 calc(28px + var(--notch)) 0 calc(24px + var(--notch));
  background: var(--accent); color: var(--accent-ink);
  font: 700 var(--step-body)/1 var(--text); text-decoration: none;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%);
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.btn:hover { background: #bcdda6; }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: none; background: var(--ink); }

/* Kopfleiste */
.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--margin);
  background: var(--bg);
}
.wordmark { font: 800 var(--step-lead)/1 var(--display); font-stretch: 88%; letter-spacing: -0.03em; text-decoration: none; }
.bar ul { display: flex; gap: clamp(14px, 3vw, 32px); margin: 0; padding: 0; list-style: none; }
.bar nav a { font-size: var(--step-small); font-weight: 600; text-decoration: none; padding: 10px 0; display: inline-block; }
.bar nav a:hover { color: var(--accent); }
@media (max-width: 480px) { .bar li:nth-child(n+3) { display: none; } }

/* Hero: das V riesig, rechts angeschnitten */
.hero {
  position: relative; overflow: hidden;
  min-height: calc(100svh - 64px);
  padding: 6svh var(--margin) 52vw;
}
.hero-v {
  position: absolute; z-index: 0;
  width: 150vw; left: -12vw; bottom: -38vw;
  fill: var(--accent);
}
.hero-flock { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fly { position: absolute; fill: var(--oat); width: 64px; height: 26px; }
.f1 { left: 60%; top: 58%; }
.f2 { left: 46%; top: 63%; width: 52px; }
.f3 { left: 74%; top: 63%; width: 52px; }
.f4 { left: 34%; top: 68%; width: 44px; }
.f5 { left: 86%; top: 68%; width: 44px; }
.hero-text { position: relative; z-index: 2; max-width: 40rem; }
.hero h1 { font-size: var(--step-hero); max-width: 15ch; }
.lead { margin-top: 32px; font-size: var(--step-lead); line-height: 1.35; max-width: 30ch; }
.status { margin-top: 20px; font-weight: 600; color: var(--accent); }
.status::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.5em; border-radius: 50%; background: currentColor; }
.status.is-closed { color: var(--muted); }
.hero .btn { margin-top: 28px; }

@media (min-width: 900px) {
  .hero { min-height: calc(100svh - 72px); display: flex; align-items: center; padding: 8svh var(--margin); }
  .hero-v { width: 100vh; min-width: 560px; left: auto; right: -30vh; bottom: auto; top: 50%; transform: translateY(-46%); }
  .f1 { left: 83%; top: 18%; } .f2 { left: 77%; top: 25%; } .f3 { left: 89%; top: 25%; }
  .f4 { left: 71%; top: 32%; } .f5 { left: 94%; top: 32%; }
  .fly { width: 84px; height: 34px; } .f2, .f3 { width: 70px; } .f4, .f5 { width: 58px; }
  .hero-text { max-width: 56%; }
}

/* Vorstellung: eingesetzte Fläche, Bild in V-Kerben-Maske */
.about { padding: var(--gap) 10px 0; }
.panel {
  background: var(--surface);
  padding: 40px clamp(20px, 4vw, 56px) 0;
  overflow: hidden;
  display: grid; gap: 48px;
}
.about h2 { font-size: var(--step-head); max-width: 12ch; }
.about-pic { margin: 40px 0 0; }
.about-pic svg {
  width: 100%; height: auto;
  /* oben eine V-Kerbe – die Wiese vom Kranichzug aus gesehen */
  clip-path: polygon(0 0, 38% 0, 50% 12%, 62% 0, 100% 0, 100% 100%, 0 100%);
}
.about-text { display: grid; gap: 40px; padding-bottom: 48px; }
.about-text h3 { font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 10px; }
.about-text p { max-width: 42ch; }

@media (min-width: 900px) {
  .about { padding-inline: 20px; }
  .panel { grid-template-columns: 1.15fr 1fr; gap: 6vw; padding: 64px 56px 0; }
  .about-pic { margin-top: 56px; }
  .about-text { align-content: start; padding: 0 0 64px; }
}

/* Speisekarte */
.menu { padding: var(--gap) var(--margin) 0; }
.menu-head { display: grid; gap: 20px; }
.menu-head h2 { font-size: var(--step-head); }
.menu-head p { max-width: 46ch; }
.menu-jump {
  position: sticky; top: 56px; z-index: 4;
  display: flex; gap: 24px; overflow-x: auto;
  margin: 32px calc(-1 * var(--margin)) 0; padding: 12px var(--margin);
  background: var(--bg);
}
.menu-jump a { font-weight: 700; text-decoration: none; white-space: nowrap; padding: 6px 0; }
.menu-jump a:hover { color: var(--accent); }
.cat { padding-top: 56px; }
.cat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 32px; }
.cat-head h3 { font-size: var(--step-sub); }
.cat-head span { color: var(--muted); }
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
.items li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
.bullet { width: 40px; height: 28px; margin-top: 2px; }
.b1 { fill: var(--accent); } .b2 { fill: var(--sky); } .b3 { fill: var(--oat); } .b4 { fill: var(--heather); }
.item { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-bottom: 4px; }
.item strong { font-size: var(--step-body); }
.item span { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.items p:not(.item) { color: var(--muted); max-width: 40ch; }
.items .note { color: var(--accent); font-size: var(--step-small); font-weight: 600; margin-top: 4px; }

@media (min-width: 900px) {
  .menu-head { grid-template-columns: 1fr 1fr; align-items: end; }
  .menu-jump { top: 64px; }
  .cat { padding-top: 96px; }
  .items { grid-template-columns: 1fr 1fr; column-gap: 64px; row-gap: 40px; }
  .items li { grid-template-columns: 52px 1fr; gap: 20px; }
  .bullet { width: 52px; height: 36px; }
}

/* Öffnungszeiten: ein ganzes Feld in Himmelblau */
.hours {
  margin-top: var(--gap);
  background: var(--sky); color: var(--field-ink);
  padding: 72px var(--margin);
  display: grid; gap: 48px;
}
.hours h2 { font-size: var(--step-head); }
.hours-intro { display: grid; gap: 20px; align-content: start; }
.hours-intro p { max-width: 44ch; }
.now { font: 800 var(--step-lead)/1.15 var(--display); font-stretch: 88%; letter-spacing: -0.02em; }
.times { width: 100%; border-collapse: collapse; }
.times th, .times td { text-align: left; padding: 14px 0; border-bottom: 2px solid rgba(18, 20, 15, 0.18); vertical-align: top; }
.times td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.times th { font-weight: 400; }
.season { display: block; font-size: var(--step-small); font-weight: 400; }
.times tr.is-today th, .times tr.is-today td { font-weight: 800; }
.times tr.is-today th::after { content: " · heute"; font-weight: 600; }

@media (min-width: 900px) {
  .hours { grid-template-columns: 1fr 1fr; gap: 6vw; padding: 120px var(--margin); }
}

/* Anfahrt */
.route { padding: var(--gap) var(--margin) 0; display: grid; gap: 40px; }
.map { margin: 0; }
.map img { width: 100%; height: auto; background: var(--oat); }
.map figcaption { margin-top: 10px; font-size: var(--step-small); color: var(--muted); }
.route h2 { font-size: var(--step-head); margin-bottom: 28px; }
.route address { font-style: normal; font-size: var(--step-lead); line-height: 1.3; font-weight: 600; }
.route dl { margin: 32px 0 36px; display: grid; gap: 20px; }
.route dt { font-weight: 700; }
.route dd { margin: 2px 0 0; max-width: 44ch; }

@media (min-width: 900px) {
  .route { grid-template-columns: 1.2fr 1fr; gap: 6vw; align-items: center; }
  .map { order: -1; }
}

/* Kontakt: Abschnitt als Coupon mit V-Kerben */
.contact { padding: var(--gap) var(--margin); }
.coupon {
  --n: 16px;
  background: var(--oat); color: var(--field-ink);
  display: grid;
  clip-path: polygon(0 0, calc(100% - var(--n) * 2) 0, 100% 0, 100% 100%, 0 100%, 0 calc(46% + var(--n)), var(--n) 46%, 0 calc(46% - var(--n)));
}
.coupon-left, .coupon-right { padding: 40px clamp(24px, 4vw, 56px); }
.coupon-left { display: grid; gap: 20px; align-content: space-between; }
.coupon h2 { font-size: var(--step-sub); }
.coupon-left p { max-width: 40ch; }
.coupon-right { display: grid; gap: 12px; align-content: center; background: #ddcea5; }
.contact-line {
  display: grid; gap: 2px; padding: 16px 20px; min-height: 56px;
  background: var(--bg); color: var(--ink); text-decoration: none;
  font-weight: 700; overflow-wrap: anywhere;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.contact-line span { font-weight: 400; font-size: var(--step-small); color: var(--muted); }
.contact-line:hover { background: #2a2e24; }
.contact-line:active { transform: scale(0.98); }
.contact-hint { font-size: var(--step-small); }

@media (min-width: 900px) {
  .coupon { grid-template-columns: 1.1fr 1fr; min-height: 380px; }
  .coupon { clip-path: polygon(0 0, 46% 0, calc(46% + var(--n)) var(--n), calc(46% + var(--n) * 2) 0, 100% 0, 100% 100%, calc(46% + var(--n) * 2) 100%, calc(46% + var(--n)) calc(100% - var(--n)), 46% 100%, 0 100%); }
  .coupon-left, .coupon-right { padding: 56px; }
}

/* Footer: der Name, aus Blöcken gebaut */
.foot { background: var(--surface); padding: 48px var(--margin) 32px; }
.mark { display: flex; align-items: flex-end; gap: 4px; height: clamp(120px, 26vw, 300px); }
.mark span {
  flex: 1; display: flex; align-items: flex-end; justify-content: center;
  font: 800 var(--step-head)/1 var(--display); font-stretch: 80%;
  color: var(--field-ink); padding-bottom: 0.15em;
}
.mark span:nth-child(4n+1) { background: var(--accent); height: 100%; }
.mark span:nth-child(4n+2) { background: var(--sky); height: 76%; }
.mark span:nth-child(4n+3) { background: var(--oat); height: 88%; }
.mark span:nth-child(4n)   { background: var(--heather); height: 64%; }
.foot-cols { display: grid; gap: 24px; margin-top: 48px; font-size: var(--step-small); }
.foot-cols a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.foot-cols a:hover { color: var(--accent); }
.legal { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }
.legal a { display: inline-block; padding: 8px 0; }
.copy { margin-top: 32px; font-size: var(--step-small); color: var(--muted); }
@media (min-width: 900px) {
  .foot-cols { grid-template-columns: 2fr 1.4fr 1fr; }
  .legal { justify-content: flex-end; align-items: start; }
}

/* Bewegung: Abschnitte steigen einmal ein. Ohne JS ist alles sichtbar. */
.js .rise { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js .rise.in { opacity: 1; transform: none; }
.js .hero-v { animation: v-in 1100ms var(--ease-out) both; }
.js .fly { animation: flock 1400ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 300ms); }
.f2 { --i: 1; } .f3 { --i: 1; } .f4 { --i: 2; } .f5 { --i: 2; }
@keyframes v-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes flock { from { opacity: 0; translate: -40px 16px; } to { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rise { transform: none; transition: opacity 300ms ease; }
  .js .hero-v, .js .fly { animation: none; }
}

/* Platzhalterseiten Impressum und Datenschutz */
.legal-page { padding: 80px var(--margin) 120px; max-width: 48rem; display: grid; gap: 24px; }
.legal-page h1 { font-size: var(--step-head); }