/* =========================================================================
   Dine Sushi — Stylesheet

   Aufbau:  Tokens · Grundlagen · Bausteine · Bereiche (in Seitenreihenfolge)
            · Tablet (810–1199px) · Phone (bis 809px) · Motion

   Für einen Kundenauftrag reicht in aller Regel der Tokenblock unten:
   Farben, Schrift und Rhythmus hängen alle daran.
   ====================================================================== */

:root {
  /* --- Farben (Messwerte aus der Referenz) ---------------------------- */
  --creme:        #FDFCFA;   /* Grundfläche, warmes Cremeweiß            */
  --wald:         #152B16;   /* tiefes Waldgrün, dunkler Kontrast        */
  --wald-tief:    #101E11;   /* Ankündigungsleiste                       */
  --vermilion:    #FE4806;   /* leuchtender Akzent                       */
  --vermilion-tief:#D63A03;  /* Hover                                    */
  --salbei:       #3E4F3D;   /* entsättigte Sekundärfläche               */
  --karte-creme:  #F8ECDE;   /* helle Kurskarte                          */
  --papier:       #E8EAE7;   /* helle Streifen der Kursdekoration        */
  --text:         #152B16;
  --text-leise:   #4A5A4A;
  --text-hell:    #FDFCFA;
  --text-hell-leise: rgba(253, 252, 250, .82);
  --linie:        rgba(21, 43, 22, .16);

  /* --- Schrift -------------------------------------------------------- */
  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-text:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --f-ja:      'Noto Sans JP', 'Hiragino Sans', sans-serif;

  /* --- Rhythmus ------------------------------------------------------- */
  --wrap:      1312px;   /* Rahmenbreite der Vorlage                     */
  --gutter:    32px;
  --block:     120px;   /* vertikaler Abstand zwischen Bereichen         */
  --radius:    6px;
}

/* ============================================================ Grundlagen */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--text);
  font-family: var(--f-text);
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

h2 { font-size: 42px; }
h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0; }

a { color: inherit; }

ul { margin: 0; padding: 0; list-style: none; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.lead { color: var(--text-leise); max-width: 52ch; }

/* Nur für Screenreader */
.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--wald); color: var(--text-hell);
  padding: 10px 16px; font-size: 14px;
}
.skip:focus { left: 0; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Dekoration: nie anklickbar, nie im Lesefluss */
.deko { position: absolute; pointer-events: none; user-select: none; object-fit: contain; }

.kreis { display: block; border-radius: 50%; background: var(--vermilion); }

/* ============================================================= Bausteine */

/* --- Button ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  padding: 13px 22px;
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .22s ease, transform .22s ease;
}
.btn--akzent { background: var(--vermilion); color: #fff; }
.btn--akzent:hover { background: var(--vermilion-tief); transform: translateY(-2px); }
.btn--dunkel { background: var(--wald); color: var(--text-hell); }
.btn--dunkel:hover { background: #0C1A0D; transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }

/* --- Logo -------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--wald);
}
.logo__mark { display: flex; }
.logo--zentriert { justify-content: center; }

/* --- Menüzeile (ein Gericht) ------------------------------------------- */
.menuezeile { padding: 26px 0; border-bottom: 1px solid var(--linie); }
.menuezeile__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.menuezeile__preis {
  font-family: var(--f-display);
  font-size: 21px;
  font-weight: 500;
  color: var(--vermilion);
  white-space: nowrap;
}
.menuezeile p { color: var(--text-leise); max-width: 46ch; }

/* --- Aufzählung mit Titel + Text (Catering) ---------------------------- */
.punkte li + li { margin-top: 26px; }
.punkte h3 { margin-bottom: 8px; }
.punkte p { color: var(--text-leise); max-width: 44ch; }

/* --- Kurskarte --------------------------------------------------------- */
.kurskarte {
  padding: 26px 24px 28px;
  border-radius: var(--radius);
  min-height: 196px;
  display: flex;
  flex-direction: column;
  transition: filter .22s ease;
}
.kurskarte:hover { filter: brightness(1.05); }
.kurskarte h3 { margin-bottom: 10px; }
.kurskarte__text { font-size: 14px; }
.kurskarte__info { margin-top: auto; padding-top: 26px; font-size: 14px; }
/* 1 und 4 creme, 2 und 3 salbei — wie in der Referenz */
.kurskarte--creme { background: var(--karte-creme); color: var(--text); }
.kurskarte--creme .kurskarte__text,
.kurskarte--creme .kurskarte__info { color: var(--text-leise); }
.kurskarte--salbei { background: var(--salbei); color: var(--text-hell); }
.kurskarte--salbei .kurskarte__text,
.kurskarte--salbei .kurskarte__info { color: var(--text-hell-leise); }

/* --- Testimonial ------------------------------------------------------- */
.stimme { text-align: center; }
.stimme__sterne { display: flex; justify-content: center; gap: 7px; margin-bottom: 16px; }
.stimme__sterne img { width: 17px; height: 17px; }
.stimme__zitat {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.stimme__text { color: var(--text-leise); font-size: 14px; margin-bottom: 12px; }
.stimme__name { font-family: var(--f-display); font-size: 14px; font-weight: 600; }

/* --- FAQ-Eintrag ------------------------------------------------------- */
.faq__eintrag { border-bottom: 1px solid var(--linie); }
.faq__frage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: none;
  border: 0;
  padding: 24px 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}
.faq__zeichen {
  flex: none;
  position: relative;
  width: 15px; height: 15px;
  color: var(--vermilion);
}
.faq__zeichen::before, .faq__zeichen::after {
  content: ''; position: absolute; inset: 50% 0 auto 0;
  height: 2px; background: currentColor; transform: translateY(-50%);
}
.faq__zeichen::after { transform: translateY(-50%) rotate(90deg); transition: transform .3s ease; }
.faq__eintrag[data-offen] .faq__zeichen::after { transform: translateY(-50%) rotate(0deg); }
.faq__antwort { overflow: hidden; height: 0; transition: height .34s cubic-bezier(.4,0,.2,1); }
.faq__antwort p { color: var(--text-leise); padding-bottom: 24px; max-width: 52ch; }

/* --- Fotokapitel (gemeinsame Basis) ------------------------------------ */
.kapitel { position: relative; display: flex; align-items: center; isolation: isolate; }
.kapitel__bild {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.kapitel__verlauf {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top,    rgba(6,12,6,.86) 0%, rgba(6,12,6,.28) 42%, rgba(6,12,6,0) 68%),
    linear-gradient(to right,  rgba(6,12,6,.72) 0%, rgba(6,12,6,.12) 46%, rgba(6,12,6,0) 72%);
}
.kapitel__inhalt { position: relative; color: var(--text-hell); }
.kapitel__inhalt h2 { font-size: 50px; margin-bottom: 20px; }
.kapitel__inhalt > p { color: var(--text-hell-leise); max-width: 42ch; }

/* ============================================== 1 · Ankündigungsleiste  */

.ankuendigung {
  background: var(--wald-tief);
  color: var(--text-hell);
  font-size: 13px;
}
.ankuendigung__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px var(--gutter);
}
.ankuendigung__icon { width: 15px; height: 15px; }
.ankuendigung a { color: inherit; text-underline-offset: 3px; }
.ankuendigung a:hover { color: var(--vermilion); }

/* ========================================================= 2 · Header  */

.header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 20px;
}
.nav { margin-inline: auto; }
.nav ul { display: flex; gap: 38px; }
.nav a {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.nav a:hover { color: var(--vermilion); border-bottom-color: var(--vermilion); }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 38px;
  padding: 0 8px;
  background: none; border: 0; cursor: pointer;
}
.burger span {
  display: block; height: 2px; width: 100%;
  background: var(--wald); border-radius: 2px;
  transition: transform .28s ease, opacity .２s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobilnav { overflow: hidden; border-top: 1px solid var(--linie); }
.mobilnav .wrap { padding-block: 22px 28px; }
.mobilnav ul { margin-bottom: 22px; }
.mobilnav li + li { margin-top: 4px; }
.mobilnav a:not(.btn) {
  display: block;
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  padding: 9px 0;
}
.mobilnav .btn { width: 100%; }

/* ================================================ 3 · Kaiten-Opening  */

/* Die 104px unten sind **26 mehr, als die Gestaltung braucht** — und das
   ist der Zweck. Der Bereich zwischen `.header` und `.kapitel--chef` war
   774px hoch, die 3:2-Kachel der Projektreihe braucht bei 1200px Breite
   genau 800. Am 09.09.2026 hat `passend: true` der Kachel deshalb die
   Bereichshoehe gegeben; sie war danach 1200 × 774, also 1,55 statt 1,5 —
   und wurde in der 3:2-Flaeche der Startseite wieder seitlich beschnitten.

   Der Betreiber hat den Fall am 10.09.2026 an Haarfein gemeldet („bitte
   immer darauf achten dass das gesamte bild drauf ist"). Er gilt hier
   genauso, und `bildpipeline.md` sagt, was dann zu tun ist: **dem Bereich
   mehr Luft geben, statt das Bild still falsch werden zu lassen.**

   26px unter dem Eroeffnungsbild sieht niemand. Ein um 3 % beschnittenes
   Bildschirmfoto schon. */
.opening { padding-block: 44px 104px; overflow: hidden; }
/* Container-Query-Wurzel: die Wortmarke skaliert an der Containerbreite,
   nicht am Viewport — sonst wächst sie über den Seitenrand hinaus. */
.opening__inner { position: relative; container-type: inline-size; }

.opening__kanji {
  font-family: var(--f-ja);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  color: var(--vermilion);
  margin-bottom: 22px;
  position: relative;
  z-index: 2;
}

/* Schmal und schwer wie in der Referenz: Versalhöhe ≈ 25 % der Containerbreite,
   Satzbreite ≈ volle Containerbreite. */
.opening__wortmarke {
  font-size: 34.5cqw;
  font-stretch: 70%;
  font-weight: 700;
  line-height: .8;
  letter-spacing: -0.005em;
  color: var(--wald);
  margin-bottom: 46px;
  position: relative;
  z-index: 2;
}

/* Der Baum liegt über der Wortmarke, seine Blüten aber oberhalb der
   Versalhöhe — nur die Äste kreuzen die Buchstaben, wie in der Referenz. */
.opening__baum {
  top: -18px; right: 1%;
  width: 31%;
  z-index: 3;
}
.opening__vogel { z-index: 3; }
.opening__vogel--1 { top: 16%;  left: 30%; width: 30px; }
.opening__vogel--2 { top: 12%;  left: 19%; width: 22px; transform: rotate(-8deg); }
.opening__vogel--3 { top: 40%;  left: 29%; width: 26px; }

.opening__fuss {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  position: relative;
  z-index: 2;
}
.opening__icons { display: flex; gap: 9px; margin-bottom: 16px; }
.opening__icons img { width: 21px; height: 21px; }
.opening__vertrauen p { font-family: var(--f-display); font-size: 17px; font-weight: 500; }
.opening__vertrauen strong { color: var(--vermilion); font-weight: 600; }

.opening__einfuehrung { justify-self: end; max-width: 380px; }
.opening__einfuehrung p { color: var(--text-leise); margin-bottom: 22px; }

/* ============================================= 4 · Chef-Fotokapitel  */

.kapitel--chef { min-height: 860px; align-items: center; }
.kapitel--chef .kapitel__inhalt { padding-top: 60px; }
.kapitel__deko--glocke { top: 42px; left: var(--gutter); width: 132px; z-index: 1; }

/* ================================================= 5 · Speisekarte  */

.speisekarte { padding-block: var(--block); overflow: hidden; }
.speisekarte__kopf { position: relative; text-align: center; padding-block: 8px 96px; }
.speisekarte__text { max-width: 520px; margin-inline: auto; }
.speisekarte__text h2 { font-size: 46px; margin-bottom: 16px; }
.speisekarte__text .lead { margin-inline: auto; max-width: 44ch; font-size: 14px; }

.faecher { top: -8px; width: 200px; }
.faecher--links  { left: -12px; }
.faecher--rechts { right: -12px; }

.menueliste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
}

/* ==================================================== 6 · Catering  */

.catering__reihe {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
}
.catering__bild { height: 100%; }
.catering__bild img { width: 100%; height: 100%; min-height: 790px; object-fit: cover; }
.catering__text { padding: 72px clamp(32px, 5vw, 72px); }
.catering__text h2 { margin-bottom: 18px; }
.catering__text .lead { margin-bottom: 34px; font-size: 14px; }

.wolke { z-index: 3; width: 300px; }
.wolke--1 { bottom: -46px; left: 26%; }
.wolke--2 { top: -40px;    left: 44%; width: 278px; }
.kreis--catering {
  position: absolute; z-index: 2;
  bottom: -34px; left: 22%;
  width: 82px; height: 82px;
}

/* ====================================== 7 · Illustriertes Statement  */

.statement { padding-block: var(--block); }
.statement__gitter {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.statement__text h2 { font-size: 52px; margin-bottom: 20px; }
.statement__text p { color: var(--text-leise); margin-bottom: 26px; max-width: 34ch; }

.statement__stapel img { width: 100%; }

.statement__seite { position: relative; padding-top: 24px; }
.kranich { z-index: 1; }
.kranich--oben  { position: static; width: 74%; margin-inline: auto; }
.kranich--unten { left: 3%; bottom: 0; width: 21%; }

.statement__claim { position: relative; margin-top: 210px; }
.statement__claim p[lang="ja"] {
  position: relative; z-index: 2;
  font-family: var(--f-ja);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.42;
  letter-spacing: .02em;
}
/* Der Kreis liegt hinter der rechten Hälfte des Claims. */
.kreis--claim {
  position: absolute; z-index: 1;
  top: -18px; left: 46%;
  width: 178px; height: 178px;
}

/* ======================================= 8 · Traditions-Fotokapitel  */

.kapitel--tradition { min-height: 900px; }
.kapitel__inhalt--gross h2 { font-size: 46px; }
.kapitel__deko--koi { top: 54px; left: var(--gutter); width: 172px; z-index: 1; }
.kapitel__fuss {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 34px;
  align-items: start;
  margin-top: 300px;
  max-width: 780px;
  margin-left: 34%;
}
.kapitel__fuss p { color: var(--text-hell-leise); font-size: 14px; }

/* ================================================= 9 · Kursbereich  */

.kurse {
  position: relative;
  background: var(--wald);
  color: var(--text-hell);
  display: grid;
  grid-template-columns: 30% 1fr;
  align-items: center;
  overflow: hidden;
}
/* Streifen und Blütenast bleiben in ihrer Spalte, damit sie die Karten
   nicht überdecken. */
.kurse__deko { position: relative; align-self: stretch; overflow: hidden; }
.kurse__streifen {
  position: absolute; inset: 0 auto 0 8%;
  width: 250px;
  background: repeating-linear-gradient(
    to right,
    var(--papier)   0px,  var(--papier)   26px,
    var(--vermilion) 26px, var(--vermilion) 52px
  );
}
.kurse__deko img {
  position: absolute;
  top: 4%; left: -14%;
  width: 118%;
  max-width: none;
  object-fit: contain;
}
.kurse__inhalt { padding: 130px clamp(32px, 5vw, 78px) 130px 8px; max-width: 900px; }
.kurse__kopf { margin-bottom: 38px; }
.kurse__kopf h2 { font-size: 40px; margin-bottom: 16px; }
.kurse__kopf .lead { color: var(--text-hell-leise); font-size: 14px; }
.kurse__gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ======================================= 10 · Flavor-Fotokapitel  */

.kapitel--flavor { min-height: 880px; align-items: flex-end; }
.kapitel--flavor .kapitel__inhalt { padding-bottom: 78px; }
.kapitel__inhalt--geteilt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
}
.kapitel__inhalt--geteilt h2 { font-size: 44px; margin-bottom: 0; }
.kapitel__inhalt--geteilt p { font-size: 14px; }
.kapitel__deko--kranich { bottom: 196px; left: var(--gutter); width: 148px; z-index: 1; }

/* ============================================== 11 · Stimmen  */

.stimmen { padding-block: var(--block); }
.stimmen__gitter { position: relative; }

.stimmen__liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 34vw, 460px);
  row-gap: 74px;
}
/* Die mittlere Spalte liegt als eigene Ebene zwischen den Bewertungen.
   Zentriert über auto-Ränder statt translateX — sonst würde die
   Einblend-Transformation die waagerechte Lage überschreiben. */
.stimmen__mitte {
  position: absolute;
  top: 128px; left: 0; right: 0;
  margin-inline: auto;
  width: 340px;
  text-align: center;
  z-index: 1;
}
.stimmen__mitte h2 { font-size: 40px; margin-block: 8px 20px; }
.stimmen__mitte .lead { font-size: 14px; margin-inline: auto; }
.koi { position: static; margin-inline: auto; }
.koi--oben  { width: 200px; }
.koi--unten { width: 200px; margin-top: 24px; }
.stimmen__liste li:nth-child(3), .stimmen__liste li:nth-child(4) { margin-top: 46px; }

/* ============================================== 12 · Kontakt  */

.kontakt { padding-block: 0 var(--block); }
.kontakt__gitter {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 60px;
}
.kontakt__kopf { position: relative; }
.kontakt__kopf h2 { font-size: 44px; margin-bottom: 16px; }
.kontakt__kopf .lead { font-size: 14px; max-width: 34ch; }
.kontakt__omamori { position: static; width: 172px; margin-top: 38px; }

.kontakt__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 48px; }
.kontakt__liste h3 { margin-bottom: 8px; }
.kontakt__liste p { color: var(--text-leise); font-size: 14px; margin-bottom: 8px; }
.kontakt__liste a { color: var(--vermilion); font-size: 14px; text-decoration: none; }
.kontakt__liste a:hover { text-decoration: underline; text-underline-offset: 3px; }

.kontakt__bild { margin: 46px 0 0; }
.kontakt__bild img { width: 100%; border-radius: 16px; }

/* ================================================== 13 · FAQ  */

.faq { padding-block: 0 var(--block); }
.faq__kopf { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.faq__kopf h2 { font-size: 46px; margin-bottom: 16px; }
.faq__kopf .lead { margin-inline: auto; font-size: 14px; max-width: 44ch; }
.faq__gitter { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; }

/* ========================================= 14 · Abschluss-CTA  */

.abschluss {
  position: relative;
  background: var(--wald);
  color: var(--text-hell);
  padding-block: 118px 110px;
  overflow: hidden;
}
.abschluss__kopf { max-width: 560px; margin: 0 auto 82px; text-align: center; }
.abschluss__kopf h2 { font-size: 44px; margin-bottom: 20px; }
.abschluss__kopf p { color: var(--text-hell-leise); font-size: 14px; margin-bottom: 28px; }
.abschluss__koi { top: 168px; width: 250px; }
.abschluss__koi--links  { left: 1%; }
.abschluss__koi--rechts { right: 1%; width: 268px; }

.kennzahlen {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.kennzahl__kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.kennzahl__kopf img { width: 25px; height: 25px; }
.kennzahl__wert {
  font-family: var(--f-display);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kennzahl__label { color: var(--text-hell-leise); font-size: 14px; max-width: 26ch; }

/* ============================================== 15 · Footer  */

.footer { padding-block: 44px 30px; }
.footer__oben {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 46px;
}
.footer__oben ul { display: flex; gap: 40px; }
.footer__oben a { font-family: var(--f-display); font-size: 14px; text-decoration: none; }
.footer__oben a:hover { color: var(--vermilion); }
.footer__zeiten { font-size: 14px; }

.footer__mitte {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 400px) 1fr;
  align-items: center;
  gap: 24px;
  padding-bottom: 54px;
}
.footer__kern { text-align: center; }
.footer__claim {
  font-family: var(--f-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.14;
  margin-block: 18px 16px;
}
.footer__text { color: var(--text-leise); font-size: 14px; max-width: 40ch; margin-inline: auto; }

.footer__deko { position: relative; height: 210px; }
.footer__deko img { position: absolute; object-fit: contain; }
.footer__deko > img:not(.footer__glocke) { top: 10px; width: 168px; }
.footer__glocke { width: 120px; bottom: 6px; }
.kreis--footer { position: absolute; width: 148px; height: 148px; top: 22px; background: #C43A08; }
.footer__deko--links  > img:not(.footer__glocke) { left: 14%; }
.footer__deko--links  .kreis--footer { left: 6%; }
.footer__deko--links  .footer__glocke { left: 2%; }
.footer__deko--rechts > img:not(.footer__glocke) { right: 14%; }
.footer__deko--rechts .kreis--footer { right: 6%; }
.footer__deko--rechts .footer__glocke { right: 2%; transform: scaleX(-1); }

.footer__unten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 13px;
}
.footer__social { display: flex; gap: 18px; }
.footer__social a { display: flex; color: var(--wald); }
.footer__social a:hover { color: var(--vermilion); }
.footer__recht { display: flex; gap: 34px; align-items: center; }
.footer__recht a { text-decoration: none; }
.footer__recht a:hover { color: var(--vermilion); }

/* =======================================================================
   Tablet · 810px – 1199.98px
   Zweispaltige Kernbereiche bleiben, Schrift und Bildhöhen skalieren.
   ==================================================================== */

@media (max-width: 1199.98px) {
  :root { --gutter: 30px; --block: 92px; }

  h2 { font-size: 34px; }

  .opening { padding-block: 34px 60px; }
  .opening__kanji { font-size: 44px; margin-bottom: 18px; }
  .opening__wortmarke { margin-bottom: 36px; }
  .opening__baum { width: 40%; top: 2%; }
  .opening__einfuehrung { max-width: 320px; }
  .opening__vertrauen p { font-size: 15px; }

  .kapitel--chef { min-height: 620px; }
  .kapitel--tradition { min-height: 660px; }
  .kapitel--flavor { min-height: 620px; }
  .kapitel__inhalt h2 { font-size: 36px; }
  .kapitel__inhalt--gross h2 { font-size: 34px; }
  .kapitel__inhalt--geteilt h2 { font-size: 32px; }
  .kapitel__fuss { margin-top: 150px; margin-left: 0; gap: 24px; }
  .kapitel__deko--glocke { width: 100px; }
  .kapitel__deko--koi { width: 132px; }
  .kapitel__deko--kranich { width: 112px; bottom: 168px; }

  .speisekarte__text h2 { font-size: 36px; }
  .faecher { width: 142px; }
  .menueliste { column-gap: 46px; }
  .menuezeile { padding: 20px 0; }
  .menuezeile__preis { font-size: 18px; }

  .catering__bild img { min-height: 460px; }
  .catering__text { padding: 52px 34px; }
  .wolke { width: 210px; }
  .wolke--2 { width: 196px; }
  .kreis--catering { width: 62px; height: 62px; }

  .statement__gitter { gap: 24px; }
  .statement__text h2 { font-size: 36px; }
  .statement__claim { margin-top: 130px; }
  .statement__claim p[lang="ja"] { font-size: 27px; }
  .kreis--claim { width: 122px; height: 122px; }

  .kurse { grid-template-columns: 26% 1fr; }
  .kurse__streifen { width: 172px; }
  .kurse__inhalt { padding: 68px 34px 68px 8px; }
  .kurse__kopf h2 { font-size: 32px; }
  .kurskarte { min-height: 156px; padding: 20px 18px 22px; }
  .kurskarte h3 { font-size: 17px; }

  .stimmen__liste { column-gap: 300px; row-gap: 56px; }
  .stimmen__mitte { width: 270px; top: 108px; }
  .stimmen__mitte h2 { font-size: 30px; }
  .koi--oben, .koi--unten { width: 150px; }

  .kontakt__gitter { gap: 38px; }
  .kontakt__kopf h2 { font-size: 34px; }
  .kontakt__liste { gap: 32px 30px; }
  .kontakt__omamori { width: 130px; }

  .faq__kopf h2 { font-size: 36px; }
  .faq__gitter { column-gap: 46px; }
  .faq__frage { font-size: 17px; padding: 19px 0; }

  .abschluss { padding-block: 88px 82px; }
  .abschluss__kopf { margin-bottom: 62px; }
  .abschluss__kopf h2 { font-size: 34px; }
  .abschluss__koi { width: 160px; top: 128px; }
  .abschluss__koi--rechts { width: 172px; }
  .kennzahlen { gap: 20px; }
  .kennzahl__wert { font-size: 22px; }
  .kennzahl__label { font-size: 13px; }

  .footer__mitte { grid-template-columns: 1fr minmax(260px, 340px) 1fr; }
  .footer__deko { height: 160px; }
  .footer__deko > img:not(.footer__glocke) { width: 118px; }
  .footer__glocke { width: 84px; }
  .kreis--footer { width: 104px; height: 104px; }
  .footer__claim { font-size: 27px; }
  .footer__oben ul { gap: 26px; }
}

/* =======================================================================
   Phone · bis 809.98px
   Einspaltig, Hamburger, Dekor verlässt den Lesefluss.
   ==================================================================== */

@media (max-width: 809.98px) {
  :root { --gutter: 24px; --block: 68px; }

  body { font-size: 15px; }
  h2 { font-size: 30px; }

  /* --- Header --------------------------------------------------------- */
  .ankuendigung { display: none; }
  .nav, .header__cta { display: none; }
  .burger { display: flex; margin-left: auto; }
  .header__inner { padding-block: 14px; }

  /* --- Opening -------------------------------------------------------- */
  .opening { padding-block: 26px 48px; }
  .opening__kanji { font-size: 36px; margin-bottom: 10px; }
  .opening__wortmarke { font-size: 36cqw; letter-spacing: -0.01em; margin-bottom: 30px; }
  /* Der Baum bleibt im oberen Wortbereich, deckt aber keine Copy ab. */
  .opening__baum { width: 42%; top: 4px; right: 2%; }
  .opening__vogel--1 { top: 118px; left: 44%; width: 20px; }
  .opening__vogel--2 { top: 92px;  left: 26%; width: 15px; }
  .opening__vogel--3 { display: none; }
  .opening__fuss { grid-template-columns: 1fr; gap: 30px; }
  .opening__einfuehrung { justify-self: start; max-width: none; }
  .opening__icons img { width: 19px; height: 19px; }

  /* --- Fotokapitel ---------------------------------------------------- */
  .kapitel { min-height: 0 !important; padding-block: 300px 44px; align-items: flex-end; }
  .kapitel__verlauf {
    background: linear-gradient(to top, rgba(6,12,6,.92) 0%, rgba(6,12,6,.5) 46%, rgba(6,12,6,.1) 78%);
  }
  .kapitel__inhalt h2,
  .kapitel__inhalt--gross h2,
  .kapitel__inhalt--geteilt h2 { font-size: 30px; margin-bottom: 16px; }
  .kapitel__inhalt > p { max-width: none; font-size: 14px; }
  .kapitel__fuss { grid-template-columns: 1fr; margin: 20px 0 0; gap: 18px; }
  .kapitel__fuss .btn { justify-self: start; }
  .kapitel__inhalt--geteilt { grid-template-columns: 1fr; gap: 16px; }
  .kapitel--flavor .kapitel__inhalt { padding-bottom: 0; }
  .kapitel--chef .kapitel__inhalt { padding-top: 0; }
  .kapitel__deko--glocke { top: 26px; width: 84px; }
  .kapitel__deko--koi { top: 26px; width: 108px; }
  .kapitel__deko--kranich { top: 26px; bottom: auto; width: 96px; }

  /* --- Speisekarte: eine Liste, keine Kartenoptik --------------------- */
  .speisekarte__kopf { padding-bottom: 22px; }
  .speisekarte__text h2 { font-size: 30px; }
  /* Fächer rücken hinter die Headline und stören den Text nicht mehr. */
  .faecher { width: 92px; top: 4px; opacity: .55; z-index: -1; }
  .faecher--links  { left: -30px; }
  .faecher--rechts { right: -30px; }
  .menueliste { grid-template-columns: 1fr; }
  .menuezeile p { max-width: none; }

  /* --- Catering: Bild, Text, Bild, Text ------------------------------- */
  .catering__reihe { grid-template-columns: 1fr; }
  .catering__reihe--gedreht .catering__bild { order: -1; }
  .catering__bild img { min-height: 0; aspect-ratio: 4 / 3; }
  .catering__text { padding: 40px var(--gutter) 44px; }
  .catering__text .lead { margin-bottom: 26px; }
  .punkte p, .catering__text .lead { max-width: none; }
  .wolke, .kreis--catering { display: none; }

  /* --- Statement: Text, dann Illustrationen --------------------------- */
  .statement__gitter { grid-template-columns: 1fr; gap: 34px; }
  .statement__text h2 { font-size: 30px; }
  .statement__text p { max-width: none; }
  .statement__stapel { max-width: 200px; margin-inline: auto; }
  .statement__seite { padding-top: 0; }
  .kranich--oben { width: 148px; }
  .kranich--unten { display: none; }
  .statement__claim { margin-top: 34px; text-align: center; }
  .statement__claim p[lang="ja"] { font-size: 27px; }
  .kreis--claim { width: 108px; height: 108px; top: -12px; right: 12%; }

  /* --- Kurse: vier Karten untereinander ------------------------------- */
  .kurse { grid-template-columns: 1fr; }
  .kurse__deko { height: 190px; overflow: hidden; }
  .kurse__streifen { left: 6%; width: 148px; }
  .kurse__deko img { top: -10%; left: -12%; width: 78%; }
  .kurse__inhalt { padding: 44px var(--gutter) 64px; max-width: none; }
  .kurse__kopf h2 { font-size: 28px; }
  .kurse__gitter { grid-template-columns: 1fr; gap: 16px; }
  .kurskarte { min-height: 0; }
  .kurskarte__info { padding-top: 20px; }

  /* --- Stimmen: Statement zuerst, Bewertungen darunter ---------------- */
  .stimmen__gitter { display: flex; flex-direction: column; gap: 44px; }
  .stimmen__mitte { position: static; transform: none; width: auto; order: -1; }
  .stimmen__mitte h2 { font-size: 28px; }
  .koi--oben, .koi--unten { width: 148px; }
  .stimmen__liste { grid-template-columns: 1fr; column-gap: 0; row-gap: 40px; }
  .stimmen__liste li:nth-child(3), .stimmen__liste li:nth-child(4) { margin-top: 0; }

  /* --- Kontakt -------------------------------------------------------- */
  .kontakt__gitter { grid-template-columns: 1fr; gap: 34px; }
  .kontakt__kopf h2 { font-size: 30px; }
  .kontakt__kopf .lead { max-width: none; }
  .kontakt__omamori { width: 118px; margin-top: 26px; }
  .kontakt__liste { grid-template-columns: 1fr; gap: 28px; }
  .kontakt__bild { margin-top: 30px; }

  /* --- FAQ ------------------------------------------------------------ */
  .faq__kopf { margin-bottom: 22px; }
  .faq__kopf h2 { font-size: 30px; }
  .faq__gitter { grid-template-columns: 1fr; }
  .faq__frage { font-size: 17px; padding: 18px 0; gap: 14px; }

  /* --- Abschluss: Kennzahlen einzeln untereinander -------------------- */
  .abschluss { padding-block: 62px 58px; }
  .abschluss__kopf { margin-bottom: 44px; }
  .abschluss__kopf h2 { font-size: 30px; }
  .abschluss__koi { position: static; width: 168px; margin: 0 auto 20px; }
  .abschluss__koi--rechts { display: none; }
  .kennzahlen { grid-template-columns: 1fr; gap: 26px; }
  .kennzahl__label { max-width: none; }

  /* --- Footer: vollständig zentriert ---------------------------------- */
  .footer { padding-top: 30px; }
  .footer__oben { flex-direction: column; text-align: center; padding-bottom: 32px; }
  .footer__oben ul { flex-wrap: wrap; justify-content: center; gap: 20px; }
  .footer__mitte { grid-template-columns: 1fr; padding-bottom: 34px; }
  .footer__deko { display: none; }
  .footer__claim { font-size: 27px; }
  .footer__unten { flex-direction: column; text-align: center; gap: 18px; }
  .footer__recht { flex-direction: column; gap: 8px; }
}

/* =========================================================== Motion  */

.anim {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1);
}
.anim.ist-sichtbar { opacity: 1; transform: none; }

/* Sehr langsames Schweben für Fische, Vögel und Blüten. */
@keyframes schweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.opening__vogel, .koi, .abschluss__koi, .kapitel__deko--koi, .kapitel__deko--kranich {
  animation: schweben 9s ease-in-out infinite;
}
.opening__vogel--2 { animation-delay: -3s; }
.opening__vogel--3 { animation-delay: -6s; }
.koi--unten, .abschluss__koi--rechts { animation-delay: -4.5s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim { opacity: 1; transform: none; transition: none; }
  .faq__antwort { transition: none; }
  .btn { transition: none; }
  .btn:hover, .btn:active { transform: none; }
  .opening__vogel, .koi, .abschluss__koi,
  .kapitel__deko--koi, .kapitel__deko--kranich { animation: none; }
}

/* Für die Screenshot-Abnahme: alle Einblendungen sofort sichtbar. */
html[data-abnahme] .anim { opacity: 1; transform: none; transition: none; }
html[data-abnahme] .opening__vogel,
html[data-abnahme] .koi,
html[data-abnahme] .abschluss__koi,
html[data-abnahme] .kapitel__deko--koi,
html[data-abnahme] .kapitel__deko--kranich { animation: none; }