/*
 * Anmeldung, Passwort vergessen und Passwort setzen.
 *
 * Gleiche Handschrift wie Küchenansicht und Regie: warmer Hintergrund,
 * abgerundete Karte, großzügige Eingabefelder. Die --mila-Variablen kommen aus
 * kitchen.css (dort auf :root definiert).
 */

body.auth-page {
  /* Die Schrift des Hauses für backstage — siehe @font-face in application.css.
     Nur hier, nicht auf :root: Die Gästeseiten behalten ihre Systemschrift. */
  --mila-font: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "SF Pro Text",
               system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  min-height: 100dvh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Karte und Signatur untereinander, mit spürbarem Abstand dazwischen. */
  flex-direction: column;
  gap: clamp(2rem, 6vh, 3.5rem);
  padding: clamp(1rem, 5vw, 3rem);
  background: var(--mila-bg);
  color: var(--mila-text);
  font-family: var(--mila-font);
  font-size: 17px;
  line-height: 1.55;
  /* Warmer Schimmer, damit die Seite nicht wie ein leeres Formular wirkt. */
  background-image:
    radial-gradient(circle at 15% 15%, rgba(15, 77, 64, 0.07), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(15, 77, 64, 0.05), transparent 45%);
}

/* ---------------------------------------------------------------------------
   Die zweigeteilte Anmeldung.
   ---------------------------------------------------------------------------

   Nur die Anmeldung trägt sie: Sie ist die Vordertür. Passwort vergessen,
   Sprache und Gerätewahl bleiben die schmale Karte in der Mitte — dort kommt
   niemand an, dort ist man schon drin.

   Auf schmalen Schirmen fällt die dunkle Hälfte nicht weg, sondern nach oben:
   Sie ist der Kopf, unter dem das Formular steht. */
body.auth-page--tafel {
  /* Unter der Tafel steht keine Signatur mehr — sie ist in die dunkle Hälfte
     gewandert. Der große Abstand von vorher galt ihr; für die Fußzeile genügt
     deutlich weniger, sonst schöbe sie die Tafel aus der Mitte. */
  gap: clamp(1.1rem, 3vh, 1.8rem);
}

.anmeldetafel {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 52rem;
  overflow: hidden;
  border: 0;
  padding: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 50px rgba(0, 0, 0, 0.11);
}

@media (min-width: 44rem) {
  .anmeldetafel { grid-template-columns: 1fr 1fr; }
}

.anmeldetafel__marke {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.5rem, 5vw, 3rem);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  background: var(--mila-dunkel);
  color: var(--mila-bg);
}

/* Auf dunklem Grund holt sich die Wortmarke ihre Farben sonst aus den hellen
   Merkmalen und verschwindet. Beide Hälften erben deshalb die Schriftfarbe der
   Fläche — "back" bleibt durch sein Gewicht zurückgenommen, nicht durch Farbe. */
.anmeldetafel__marke .produkt-signatur {
  align-items: flex-start;
  text-align: left;
  gap: 0.9rem;
}

.anmeldetafel__marke .produkt-signatur__marke { font-size: 2rem; letter-spacing: -0.02em; }
.anmeldetafel__marke .produkt-signatur__back { color: inherit; opacity: 0.6; }
.anmeldetafel__marke .produkt-signatur__stage { color: inherit; }

.anmeldetafel__marke .produkt-signatur__claim {
  color: inherit;
  opacity: 0.78;
  max-width: 22rem;
}

.anmeldetafel__betrieb {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.6;
}

.anmeldetafel__formular {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  background: var(--mila-surface);
}

/* In der Tafel steht die Überschrift über einem Formular, das ohnehin gleich
   folgt — sie braucht den Abstand der freistehenden Karte nicht. */
.anmeldetafel__formular .auth-card__title { margin-bottom: 1.35rem; }

.auth-card {
  width: 100%;
  max-width: 26rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 50px rgba(0, 0, 0, 0.09);
}

.auth-card__brand {
  margin-bottom: 1.75rem;
}

.auth-card__brand .produkt-signatur--kopf {
  margin-bottom: 0.2rem;
}

/* Das Logo des Betriebs über der Wortmarke — kleiner als sie: Es sagt, zu wem
   man kommt, die Wortmarke sagt, womit man arbeitet. */
.auth-card__logo {
  display: block;
  width: auto;
  height: 2.4rem;
  margin: 0 0 1.1rem;
}

/* Der Satz zur Wortmarke innerhalb der Karte: Er steht mittig, weil er das unter
   der Karte tut — hier liest ihn aber jemand in einer Spalte, die links beginnt.
   Und er rückt näher an die Wortmarke: Zwischen beiden stand der Abstand, den die
   Wortmarke zur ganzen Karte hält. */
.auth-card .produkt-signatur--claim {
  align-items: flex-start;
  margin: -1.5rem 0 1.5rem;
  text-align: left;
}

/* Der Betrieb steht unter dem Produkt — leiser, aber klar lesbar. */
.auth-card__betrieb {
  margin: 0;
  color: var(--mila-text-soft);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Ohne Unterzeile darunter braucht die Überschrift den Abstand selbst. */
.auth-card__title {
  margin: 0 0 1.75rem;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
}

.auth-card__lead {
  margin: -1.4rem 0 1.75rem;
  color: var(--mila-text-soft);
}

.auth-form {
  display: grid;
  gap: 1.1rem;
}

.auth-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--mila-text-soft);
}

.auth-input {
  width: 100%;
  min-height: var(--mila-touch);
  padding: 0.7rem 1rem;
  border: 1px solid var(--mila-line);
  border-radius: 10px;
  background: var(--mila-bg);
  color: var(--mila-text);
  font: inherit;
  transition: border-color 160ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 160ms cubic-bezier(0.32, 0.72, 0, 1);
}

.auth-input:focus-visible {
  outline: 0;
  background: var(--mila-surface);
  border-color: rgba(181, 100, 60, 0.55);
  box-shadow: 0 0 0 3.5px rgba(181, 100, 60, 0.13);
}

.auth-submit {
  min-height: var(--mila-touch);
  margin-top: 0.35rem;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--mila-accent);
  border-radius: 10px;
  background: var(--mila-accent);
  color: var(--mila-auf-akzent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.auth-submit:hover {
  background: color-mix(in srgb, var(--mila-accent) 82%, #000);
}

.auth-card__aside {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-size: 0.92rem;
  color: var(--mila-text-soft);
}

.auth-card__aside a {
  color: var(--mila-akzent-schrift);
}

/*
 * Produktsignatur ----------------------------------------------------------
 *
 * Die Wortmarke lebt vom Kontrast innerhalb des Wortes: "back" tritt zurück,
 * "stage" steht vorn. Auf der Anmeldeseite sitzt sie unter der Karte — als
 * Absender, nicht als Überschrift.
 */

.produkt-signatur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  text-align: center;
}

.produkt-signatur__marke {
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  /* Optischer Ausgleich: Kleinbuchstaben wirken hier ruhiger als Versalien. */
  text-transform: lowercase;
}

.produkt-signatur__back {
  color: var(--mila-text-soft);
  font-weight: 400;
  opacity: 0.75;
}

.produkt-signatur__stage {
  color: var(--mila-text);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Ein ganzer Satz, keine Beschriftung: enger gesperrt und in der Breite begrenzt,
   damit er auf breiten Bildschirmen nicht auseinanderläuft. */
.produkt-signatur__claim {
  max-width: 26rem;
  color: var(--mila-text-soft);
  font-size: 0.92rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  opacity: 0.85;
}

/* Als Kopf der Karte: Dort steht die Wortmarke selbst für die Seite und darf
   entsprechend groß ausfallen. */
.produkt-signatur--kopf {
  position: static;
  transform: none;
  align-items: flex-start;
  margin-bottom: 1.75rem;
  text-align: left;
}

.produkt-signatur--kopf .produkt-signatur__marke {
  font-size: 2.6rem;
  letter-spacing: -0.02em;
}

/* Die Wortmarke steht auf diesen Seiten schon zweimal — in der Fußzeile bleiben
   nur die Pflichtangaben. */
body.auth-page .fusszeile__marke {
  display: none;
}

body.auth-page .fusszeile {
  padding-top: 0;
}

/* Flash-Meldungen über der Karte ------------------------------------------- */

body.auth-page .flashes {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(26rem, calc(100% - 2rem));
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

body.auth-page .flash {
  padding: 0.85rem 1.1rem;
  border-radius: var(--mila-radius-sm);
  font-weight: 600;
}

body.auth-page .flash--notice {
  background: var(--mila-ok-bg);
  border: 1px solid var(--mila-ok-line);
  color: var(--mila-ok-text);
}

body.auth-page .flash--alert {
  background: var(--mila-warn-bg);
  border: 1px solid var(--mila-warn-line);
  color: var(--mila-warn-text);
}

/* Schnuppertag ------------------------------------------------------------- */

/* Die Seite, die jemand vor seinem Probetag bekommt. Sie steht öffentlich und
   wird verschickt — für viele ist sie der erste Eindruck von MILA. überhaupt.
   Deshalb ruhig gesetzt: eine Spalte, viel Luft, nichts zu bedienen. */
body.schnuppertag-seite {
  background: var(--mila-bg-soft, #faf7f2);
}

/* Der Gruß über der Überschrift: Er ist das Erste, was jemand liest, der sich
   seinen Zugang einrichtet — und das Einzige auf dieser Seite, das ihn meint. */
/* Der Gruß ist die Überschrift dieser Seite: Er nennt die Person, und das ist das
   Erste, was gelesen wird. Groß und in der Hausfarbe — sie ist warm, und ein Gruß
   ist das Einzige auf dieser Seite, das jemanden persönlich meint. */
.auth-card__gruss {
  margin: 0 0 0.9rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mila-akzent-schrift);
}

/* Steht ein Gruß darüber, tritt die Überschrift zurück: Sie sagt nur noch, was
   das Formular darunter ist. Auf der Anmeldeseite bleibt sie groß — dort ist sie
   das Erste auf der Seite. */
.auth-card__title--klein {
  font-size: 1.25rem;
}

.schnuppertag {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 2.5rem) 4rem;
}

/* Deutsch oder Englisch, oben rechts und klein: Wer die Seite liest, sucht keine
   Einstellung — er sieht sie oder braucht sie nicht. Über dem Logo, damit sie
   nicht zwischen Überschrift und Text steht. */
.schnuppertag__sprache {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.schnuppertag__kopf {
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

/* Das Logo des Betriebs, nicht die Produktmarke: Wer eingeladen wird, soll sehen,
   zu wem er kommt — und dasselbe Zeichen steht auf der Tür. */
.schnuppertag__marke {
  display: block;
  width: auto;
  height: 3.25rem;
  margin: 0 0 1.75rem;
}

.schnuppertag h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.schnuppertag__lead {
  margin: 0;
  max-width: 34rem;
  color: var(--mila-text-soft);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Das Markenband: ein grünes Band über die ganze Breite, oben auf der Seite.
   ---------------------------------------------------------------------------

   Es tragen die beiden Seiten, die nach außen zeigen: die Bewerbung und der
   Schnuppertag. Für viele sind sie der erste Eindruck von MILA. überhaupt, und
   wer erst die eine und später die andere bekommt, soll dasselbe Haus
   wiedererkennen und nicht zwei.

   Die Anmeldung teilt ihre Fläche senkrecht — dunkel links, Formular rechts.
   Hier geht das nicht auf: Neben zwei Anmeldefeldern trägt die dunkle Hälfte
   ihre vier Zeilen, neben achtzehn Bewerbungsfeldern bliebe sie zur Hälfte
   leer.

   Quer statt senkrecht löst das: Das Band ist so hoch, wie sein Text es
   braucht, und darunter bleibt die volle Breite. Und es ist das, was am Handy
   ohnehin passiert — dort kann keine linke Hälfte links bleiben. Beide Seiten
   erreicht man über einen Link oder einen QR-Code, also ist das Handy der
   Normalfall und nicht die Ausnahme: So sehen großer Schirm und Handy gleich
   aus.

   Grün und nicht schwarz wie bei der Anmeldung: Dort ist die dunkle Fläche die
   Vordertür zum Werkzeug. Hier steht das Haus dahinter. */
/* Die Markenbänder tragen das Hausschwarz und nicht den Akzent: Auf ihnen liegt
 * das weiß gefärbte Logo, und auf dem gelben Gästeakzent wäre es unsichtbar.
 * Gelb ist das Signal, nicht der Grund. */
.markenband {
  background: var(--mila-nacht);
  color: var(--mila-bg);
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1.25rem, 5vw, 2.5rem) clamp(2.1rem, 5vw, 3rem);
}

/* Derselbe Zuschnitt wie die Spalte darunter: Logo, Überschrift und die erste
   Zeile des Inhalts beginnen an einer Linie. */
.markenband__inhalt {
  max-width: 44rem;
  margin: 0 auto;
}

/* Das Logo ist für helle Flächen gezeichnet und verschwände auf Grün. Der
   Filter färbt es weiß, statt eine zweite Datei zu pflegen: mila-logo-dunkel.png
   hat einen grauen Kasten eingebacken und ist dafür unbrauchbar — dieselbe
   Beobachtung steht schon an der Speisekarte und an der Allergenseite. */
.markenband__marke {
  filter: brightness(0) invert(1);
}

/* Die Überschrift stand als ".schnuppertag h1" in der Spalte. Hier steht sie
   außerhalb und braucht ihr Maß wieder. */
.markenband h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Auf Grün holt sich der Fließtext sonst sein Grau aus der hellen Fassung und
   wird unlesbar. Die Frage bleibt voll deckend — sie ist die Ansprache. */
.markenband .schnuppertag__lead {
  color: inherit;
  opacity: 0.82;
}

.markenband .schnuppertag__lead--frage {
  opacity: 1;
}

/* Ein gesetzter Umbruch in der Überschrift der Bewerbung.
 *
 * Ohne ihn bricht die Zeile dort, wo sie zufällig voll ist — nach "bewirb" —,
 * und "dich bei uns" hängt als Rest darunter. Der Satz zerfällt damit mitten im
 * Verb.
 *
 * Nur wo die Überschrift zweizeilig steht: Darunter ist sie ohnehin dreizeilig,
 * und ein zusätzlicher Umbruch risse sie auf vier. */
.markenband__umbruch {
  display: none;
}

@media (min-width: 40rem) {
  .markenband__umbruch {
    display: inline;
  }
}

/* Der Abstand nach oben steckt jetzt im Band. Bliebe er auch darunter stehen,
   klaffte zwischen Grün und erster Zeile ein Loch. Als Nachbarregel und nicht
   über eine Klasse am body: So hängt sie am Band selbst und gilt überall dort,
   wo eines steht. */
.markenband + .schnuppertag {
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
}

.schnuppertag__bloecke {
  display: grid;
  gap: clamp(1.25rem, 3vw, 1.75rem);
}

.schnuppertag__block {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius, 18px);
  background: var(--mila-bg, #fff);
}

.schnuppertag__block h2 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.schnuppertag__text p {
  margin: 0 0 0.6rem;
  line-height: 1.6;
}

.schnuppertag__text p:last-child {
  margin-bottom: 0;
}

.schnuppertag__fuss {
  margin-top: clamp(2rem, 5vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--mila-line);
  color: var(--mila-text-soft);
  line-height: 1.6;
}

.schnuppertag__gruss {
  margin-bottom: 0;
  color: var(--mila-text);
  font-weight: 600;
}

/* Die Unterschrift: Namen statt Firma. Wer zum Probetag kommt, trifft am ersten
   Tag Menschen — dann sollen sie auch die sein, die ihn eingeladen haben. */
.schnuppertag__unterschrift {
  margin: 1.5rem 0 0;
  color: var(--mila-text);
  font-size: 1.05rem;
  font-weight: 600;
}

/* Welches Tablet bist du? ---------------------------------------------------
 *
 * Die Frage steht einmal beim Einrichten und danach nur noch, wenn jemand die
 * Geräte tauscht. Deshalb groß und in den Farben der Stages: Wer das iPad
 * hinstellt, trifft mit dem Daumen, ohne zu lesen.
 */
.geraetewahl {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2rem, 8vh, 5rem) clamp(1rem, 4vw, 2rem);
  text-align: center;
}

.geraetewahl__frage {
  margin: 0;
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  letter-spacing: -0.02em;
}

.geraetewahl__lead {
  margin: 0.7rem auto 2.5rem;
  max-width: 30rem;
  color: var(--mila-text-soft);
  line-height: 1.6;
}

/* Am Handy untereinander, ab Tablet nebeneinander — dort steht es ohnehin quer. */
.geraetewahl__auswahl {
  display: grid;
  gap: 1rem;
}

/* button_to legt um jeden Knopf ein Formular. Ohne dies wäre das Formular die
   Rasterzelle und der Knopf darin nur so breit wie sein Wort. */
.geraetewahl__auswahl form {
  display: contents;
}

@media (min-width: 34rem) {
  .geraetewahl__auswahl {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

.geraetewahl__karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 9rem;
  padding: 1.5rem;
  border: 0;
  border-radius: 20px;
  background: var(--buehnen-farbe);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.geraetewahl__name {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Was schon eingestellt ist, sagt es — sonst tippt man beim Nachsehen um. */
.geraetewahl__jetzt {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}

.geraetewahl__karte--hier {
  outline: 3px solid var(--mila-text);
  outline-offset: 3px;
}

.geraetewahl__hinweis {
  margin-top: 2.5rem;
  color: var(--mila-text-soft);
  font-size: 0.9rem;
}

/* Die Sprachfrage kommt vor der Gerätefrage und sieht aus wie sie — nur steht
   sie zweisprachig da: Wer sie liest, hat noch nichts eingestellt. Die zweite
   Zeile tritt zurück, damit die Frage eine Frage bleibt und keine zwei. */
.sprachfrage__en {
  display: block;
  margin-top: 0.35em;
  color: var(--mila-text-soft);
  font-size: 0.62em;
  font-weight: 500;
}

.geraetewahl__hinweis .sprachfrage__en {
  margin-top: 0.15em;
  font-size: 1em;
}

/* Der Blick ins Café, bevor man zum ersten Mal kommt. Als eigener Block am Ende
   der Seite: erst lesen, was einen erwartet, dann schauen.
   Bewusst nicht als .schnuppertag__block — es ist keiner der Inhalte, die in der
   Regie gepflegt werden, sondern eine Einladung der Seite selbst. */
.schnuppertag__instagram {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius, 18px);
  background: var(--mila-bg, #fff);
}

.schnuppertag__instagram h2 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.schnuppertag__instagram-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1rem;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  background: var(--mila-text);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

/* Beim Überfahren wird der Knopf zum Akzent — dann muss auch die Schrift
 * wechseln: Auf Gelb liest niemand Weiß. */
.schnuppertag__instagram-knopf:hover {
  background: var(--mila-accent);
  color: var(--mila-auf-akzent);
}

/* Die Anmeldung am Fuß der Seite.
 *
 * Sie ist das Einzige hier, das etwas von jemandem will, und sieht deshalb aus
 * wie ein Formular und nicht wie ein weiterer Absatz: eigene Fläche, klare
 * Felder, ein Knopf. Die Farbe der Marke trägt nur der Knopf — der Rest bleibt
 * so ruhig wie die Seite darüber. */
.schnuppertag__anmeldung {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius, 18px);
  background: var(--mila-bg, #fff);
}

.schnuppertag__anmeldung h2 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

/* Zwei Spalten, wo Platz ist: Vor- und Nachname gehören nebeneinander, so wie
   man sie auch sagt. Auf dem Telefon wird eine Spalte daraus. */
.schnuppertag__felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.9rem;
  margin: 1.25rem 0;
}

.schnuppertag__feld {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.schnuppertag__feld input {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--mila-line);
  border-radius: 12px;
  background: var(--mila-surface, #fff);
  color: var(--mila-text);
  font: inherit;
  font-weight: 400;
}

.schnuppertag__feld input:focus-visible {
  outline: 2px solid var(--mila-accent);
  outline-offset: 1px;
}

/* Die Karte am Tisch — dieselbe Tafel wie die Anmeldung.
 *
 * Links die Marke auf dunklem Grund, rechts, was man tun kann. Vorher war es
 * eine helle Seite mit Kacheln; die trug zwar dieselben Farben, aber nicht die
 * Handschrift. Für einen Gast ist diese Seite oft der erste Blick auf uns
 * außerhalb des Ladens, und dann soll sie aussehen wie wir. */
/* Die dunkle Hälfte trägt hier das Grün des Hauses, nicht das Fast-Schwarz der
   Anmeldung: Ein Gast sieht die Farbe, die auf der Tasse und an der Wand ist,
   und nicht die der Werkzeugleiste. */
/* Hausschwarz, siehe .markenband — das Logo darauf ist weiß gefärbt. */
.gasttafel__marke {
  background: var(--mila-nacht);
}

/* Das Logo, im Stilblatt weiß gefärbt — dasselbe Bild wie überall sonst. Eine
   zweite Datei für dunklen Grund wird beim nächsten Logowechsel vergessen. */
.gasttafel__logo {
  display: block;
  width: auto;
  height: clamp(2.2rem, 7vw, 2.8rem);
  filter: brightness(0) invert(1);
}

.gasttafel__ort {
  margin: 0.9rem 0 0;
  opacity: 0.78;
  line-height: 1.6;
}

.gasttafel__wege {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.5;
  opacity: 0.85;
}

/* Zeichen und Satz nebeneinander, das Zeichen oben ausgerichtet: Bricht die
   Mailadresse am Telefon auf zwei Zeilen um, bleibt es bei der ersten stehen
   statt in die Mitte zu rutschen. */
.gasttafel__wege li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.gasttafel__zeichen {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  /* Auf die Höhe der ersten Zeile gesetzt, nicht auf die des Kästchens. */
  margin-top: 0.18em;
  opacity: 0.75;
}

.gasttafel__wege a {
  color: inherit;
  font-weight: 600;
  text-decoration-color: rgb(255 255 255 / 0.35);
  text-underline-offset: 3px;
}

.gasttafel__wege a:hover {
  text-decoration-color: currentColor;
}

/* Die Sprachwahl gehört in die helle Hälfte: Sie ist eine Bedienung, keine
   Marke — und dort sucht sie das Auge, weil dort alles andere zum Antippen ist. */
.gasttafel__sprache {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

/* Der Knopf ist ein Link und kein Formular: Er braucht deshalb die Maße von
   Hand, die .auth-submit sonst vom Absendeknopf bekommt. */
.gasttafel__knopf {
  display: block;
  text-align: center;
  text-decoration: none;
}

/* Der Weg zu den Allergenen: ein zweiter Knopf, der nicht mit dem ersten
   konkurriert. Umrandet statt gefüllt — wer die Karte will, soll das Grün
   finden, ohne zwei gleich laute Flächen zu vergleichen. */
.gasttafel__weiter {
  align-self: flex-start;
  margin-top: 1.4rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  color: var(--mila-akzent-schrift);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
}

.gasttafel__weiter:hover {
  border-color: var(--mila-akzent-schrift);
}

.gasttafel__liste {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gasttafel__karte {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--mila-line);
  border-radius: 14px;
  color: var(--mila-text);
  text-decoration: none;
}

.gasttafel__karte:hover {
  border-color: var(--mila-akzent-schrift);
}

.gasttafel__name {
  flex: 1;
  font-weight: 700;
}

.gasttafel__hinweis {
  color: var(--mila-text-soft);
  font-size: 0.9rem;
}

/* Die Frage über dem Formular steht größer als der Satz darunter: Sie ist die
   Ansprache, alles andere ist Erklärung. */
.schnuppertag__lead--frage {
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Ein Feld, das über die ganze Breite geht: Für "Erzähl uns von dir" ist eine
   halbe Spalte zu wenig — dort schreibt jemand drei Sätze. */
.schnuppertag__feld--lang {
  margin-bottom: 0.9rem;
}

.schnuppertag__feld textarea,
.schnuppertag__feld select {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--mila-line);
  border-radius: 12px;
  background: var(--mila-surface, #fff);
  color: var(--mila-text);
  font: inherit;
  font-weight: 400;
}

.schnuppertag__feld textarea {
  resize: vertical;
}

/* Der Haken steht auf einer Zeile mit seinem Satz und nicht darüber: Was man
   bestätigt, soll man beim Antippen lesen. */
.schnuppertag__haken {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1rem 0 1.25rem;
  font-size: 0.95rem;
}

.schnuppertag__haken input {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  flex: none;
  accent-color: var(--mila-akzent-schrift);
}

.schnuppertag__erklaerung {
  color: var(--mila-akzent-schrift);
  font-weight: 600;
}

.schnuppertag__knopf {
  padding: 0.8rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--mila-text);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Siehe .schnuppertag__instagram-knopf:hover. */
.schnuppertag__knopf:hover {
  background: var(--mila-accent);
  color: var(--mila-auf-akzent);
}

.schnuppertag__fehler {
  margin: 0 0 1rem;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background: var(--mila-warn-bg, #fff8ec);
  color: var(--mila-warn-text, #7a5312);
  font-weight: 600;
}

/* Das Zeichen von Instagram, aus einem Pfad — ohne fremdes Bild und ohne Zählen
   von außen: Die Seite lädt nichts nach, was den Gast verfolgt. */
.schnuppertag__instagram-zeichen {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  background: currentColor;
  mask: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.2c3.2 0 3.6 0 4.9.07 1.2.05 1.8.25 2.2.42.6.22 1 .48 1.4.9.5.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c0 1.2-.2 1.8-.4 2.2-.2.6-.4 1-.9 1.4-.4.5-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2 0-1.8-.2-2.2-.4-.6-.2-1-.4-1.4-.9-.5-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c0-1.2.2-1.8.4-2.2.2-.6.4-1 .9-1.4.4-.5.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2m0 2.2c-3.1 0-3.5 0-4.7.07-1.1.05-1.7.24-2.1.4-.5.2-.9.44-1.3.84-.4.4-.64.8-.84 1.3-.16.4-.35 1-.4 2.1C2.6 10.3 2.6 10.7 2.6 12s0 1.7.06 2.9c.05 1.1.24 1.7.4 2.1.2.5.44.9.84 1.3.4.4.8.64 1.3.84.4.16 1 .35 2.1.4 1.2.06 1.6.06 4.7.06s3.5 0 4.7-.06c1.1-.05 1.7-.24 2.1-.4.5-.2.9-.44 1.3-.84.4-.4.64-.8.84-1.3.16-.4.35-1 .4-2.1.06-1.2.06-1.6.06-2.9s0-1.7-.06-2.9c-.05-1.1-.24-1.7-.4-2.1a3.5 3.5 0 0 0-.84-1.3 3.5 3.5 0 0 0-1.3-.84c-.4-.16-1-.35-2.1-.4-1.2-.06-1.6-.06-4.7-.06z'/%3E%3Cpath fill='%23000' d='M12 6.9a5.1 5.1 0 1 0 0 10.2 5.1 5.1 0 0 0 0-10.2zm0 8.4a3.3 3.3 0 1 1 0-6.6 3.3 3.3 0 0 1 0 6.6z'/%3E%3Ccircle fill='%23000' cx='17.3' cy='6.7' r='1.2'/%3E%3C/svg%3E");
}

/* Wann und wo: die beiden Angaben, nach denen sonst jemand nachfragen müsste.
   Als Paar direkt unter der Begrüßung, ruhig gesetzt — es ist kein Kasten mit
   Ausrufezeichen, sondern die Auskunft, die man vor der Anfahrt sucht. */
.schnuppertag__eckdaten {
  display: grid;
  gap: 0.5rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
  padding: clamp(1rem, 2.5vw, 1.35rem) clamp(1.1rem, 3vw, 1.6rem);
  border-left: 3px solid var(--mila-accent);
  border-radius: 0 var(--mila-radius-sm, 12px) var(--mila-radius-sm, 12px) 0;
  background: var(--mila-accent-soft, rgba(181, 100, 60, 0.08));
}

.schnuppertag__eckdatum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.75rem;
  margin: 0;
  line-height: 1.5;
}

.schnuppertag__eckdatum-wort {
  flex: 0 0 3.5rem;
  color: var(--mila-text-soft);
  font-size: 0.82rem;
  font-weight: 700;
}

.schnuppertag__eckdatum-inhalt {
  font-weight: 600;
}

.schnuppertag__eckdatum-zusatz {
  color: var(--mila-text-soft);
  font-weight: 400;
}

/* Ein Farbton je Block — als Hauch, nicht als Anstrich.
 *
 * Die Karten standen alle in demselben Weiß und verschwammen beim Überfliegen zu
 * einer Wand. Jetzt trägt jede einen eigenen Ton aus dem Haus: sechs Prozent im
 * Grund, etwas mehr in der Kante, und die Überschrift in derselben Farbe. Ruhig
 * genug, dass die Seite nicht bunt wird. */
.schnuppertag__block {
  border-color: color-mix(in srgb, var(--block-ton, var(--mila-accent)) 22%, transparent);
  background: color-mix(in srgb, var(--block-ton, var(--mila-accent)) 6%, #fff);
}

.schnuppertag__block h2 {
  color: color-mix(in srgb, var(--block-ton, var(--mila-accent)) 78%, #1c1917);
}

/* Tisch reservieren -------------------------------------------------------- */

/* Die öffentliche Buchungsseite. Für viele ist sie der erste Kontakt mit MILA.
   überhaupt — noch vor dem Café.

   Der Entwurf, auf den sich das Haus festgelegt hat: Typografie trägt alles.
   Oben das nachtschwarze Band mit einer sehr großen Überschrift, darunter die
   Creme-Fläche mit dem Formular. Gelb kommt genau zweimal vor — im lauten Wort
   der Überschrift und auf dem Knopf, der weiterführt. Eine dritte gelbe Stelle
   nähme beiden die Wirkung.

   Die Felder haben keine Kästen, sondern eine Linie darunter: Auf einem Telefon
   sind fünf Kästen untereinander eine Leiter, fünf Linien eine Liste. */
body.reservieren-seite {
  background: var(--mila-bg);
}

.reservieren {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--mila-bg);
}

.reservieren__band {
  padding: clamp(1.3rem, 5vw, 1.9rem) clamp(1.2rem, 5vw, 2rem) clamp(1.7rem, 6vw, 2.4rem);
  border-radius: 0 0 1.6rem 1.6rem;
  background: var(--mila-nacht);
  color: var(--mila-bg);
}

/* Die beiden Marken oben: das Logo des Hauses und, klein daneben, in welchem
   Werkzeug man ist. Das Logo bleibt unangetastet — es ist die Marke des
   Betriebs und nicht die der Software. */
.reservieren__marken {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: clamp(1.6rem, 7vw, 2.6rem);
}

.reservieren__logo {
  display: block;
  width: auto;
  height: 1.9rem;
  filter: brightness(0) invert(1);
}

.reservieren__strich {
  width: 1px;
  height: 1.3rem;
  background: currentColor;
  opacity: 0.35;
}

.reservieren__werkzeug {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* Die Buchungsseite auf größeren Bildschirmen ----------------------------- */

/* Gebaut wurde sie fürs Telefon — die meisten Gäste buchen unterwegs. Auf einem
   Bildschirm stand sie deshalb als schmaler Streifen in der Mitte: 34 rem,
   umgeben von leerer Fläche. Das sah nicht ruhig aus, sondern gestaucht.
 *
 * Zwei Stufen, keine drei. Am Tablet wird die Spalte breiter und die Kacheln
 * stellen sich nebeneinander; am Rechner teilt sich die Seite in Band und
 * Blatt — dieselbe Zweiteilung wie die Anmeldung. Das Band bleibt dabei stehen,
 * während rechts gescrollt wird: Der Gast soll durchgehend sehen, bei wem er
 * gerade bucht. */
@media (min-width: 46rem) {
  .reservieren {
    max-width: 46rem;
  }

  /* Die beiden Kacheln unten beantworten zwei verschiedene Fragen und dürfen
     nebeneinanderstehen, sobald Platz ist. */
  .reservieren__karten {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  /* Mehr Zeiten je Reihe, sobald sie hineinpassen: Vier Spalten auf 40 rem
     lassen jede Uhrzeit in einem viel zu breiten Knopf sitzen. */
  .reservieren__raster {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 64rem) {
  .reservieren {
    display: grid;
    grid-template-columns: minmax(19rem, 24rem) 1fr;
    align-items: start;
    gap: clamp(2rem, 4vw, 3.5rem);
    max-width: 72rem;
    padding: clamp(1.5rem, 3vw, 2.75rem);
  }

  /* Das Band wird zur Säule: eigene Ecken ringsum statt nur unten, und es
     bleibt stehen, während rechts gescrollt wird. */
  .reservieren__band {
    position: sticky;
    top: clamp(1.5rem, 3vw, 2.75rem);
    border-radius: 1.6rem;
    padding: clamp(1.8rem, 2.5vw, 2.4rem);
  }

  .reservieren__blatt {
    padding: 0 0 3rem;
  }

  /* Die Überschrift muss in die Säule passen und nicht in die ganze Seite —
     13vw wären dort zwei Zeilen zu viel. */
  .reservieren__titel {
    font-size: clamp(2.4rem, 3.4vw, 3.2rem);
  }

  .reservieren__karten {
    margin-top: 2rem;
  }

  /* Vier Spalten reichen wieder: Das Blatt ist jetzt schmaler als die ganze
     Seite, und sechs Knöpfe nebeneinander würden schmal wie Streichhölzer. */
  .reservieren__raster {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Auf sehr breiten Bildschirmen wächst die Seite nicht weiter mit: Ein Formular,
   das über 72 rem hinausläuft, liest sich schlechter und nicht besser. */
@media (min-width: 100rem) {
  .reservieren {
    margin-top: clamp(0px, 4vh, 3rem);
  }
}

/* Die Einwilligung zum Newsletter --------------------------------------- */

/* Getrennt vom Reservieren und leiser als das Formular darüber: Der Gast bucht
   einen Tisch, er abonniert nicht nebenbei etwas. Das Kästchen ist bewusst
   nicht vorangekreuzt — eine Einwilligung, die schon gesetzt ist, ist keine. */
.reservieren__einwilligung {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 1.4rem 0 0.25rem;
  padding: 0.9rem 1rem;
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface-soft);
  color: var(--mila-text-lead);
  font-size: 0.88rem;
  line-height: 1.5;
  cursor: pointer;
}

.reservieren__haken {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0.05rem 0 0;
  accent-color: var(--mila-gast-tief);
}

/* Heute: die Seite tritt zurück ------------------------------------------- */

/* Am gleichen Tag wird nicht mehr reserviert — das ist kein Fehler, sondern der
   normale Zustand: Nachmittags bleiben die Plätze für alle frei, die ohne Plan
   kommen. Deshalb keine Absage in Rot, sondern eine ruhige Fläche mit den
   beiden Wegen, die jetzt zählen.
 *
 * Was darunter noch steht — die beiden Karten, der Gruß —, verblasst mit. Der
 * Kalender oben bleibt in voller Farbe: Wer heute nichts bekommt, sucht sich
 * einen anderen Tag, und dafür muss er den Kalender finden. */
.reservieren__heute {
  margin: 0.5rem 0 0.25rem;
  padding: clamp(1.25rem, 4vw, 1.9rem);
  border-radius: var(--mila-radius);
  background: var(--mila-surface-soft);
  border: 1px solid var(--mila-line);
}

.reservieren__heute-titel {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.reservieren__heute-satz {
  max-width: 48ch;
  margin: 0 0 1.1rem;
  color: var(--mila-text-lead);
  line-height: 1.6;
}

/* Alles unterhalb der Wahl nimmt sich zurück — aber bedienbar bleibt es: Wer
   ausgegraut nicht mehr anfassen kann, kann auch nicht mehr anrufen. */
.reservieren__blatt--heute .reservieren__karten,
.reservieren__blatt--heute .reservieren__gruss {
  opacity: 0.45;
}

/* Die Seite hinter "powered by backstage" ---------------------------------- */

/* Kein Verkaufsprospekt: Wer hier landet, hat gerade einen Tisch reserviert und
   ist neugierig geworden. Sie borgt sich Band und Blatt von der Buchungsseite —
   es ist dasselbe Haus, nur eine Tür weiter. */
.backstage-text {
  max-width: 62ch;
  margin: 0 0 1.1rem;
  color: var(--mila-text-lead);
  font-size: 1.02rem;
  line-height: 1.65;
}

.backstage-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.6rem;
  margin: 1.6rem 0;
  padding: 0;
  list-style: none;
}

.backstage-liste__punkt {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.8rem 0.95rem;
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
  border: 1px solid var(--mila-line);
}

.backstage-liste__punkt b {
  font-size: 0.95rem;
}

.backstage-liste__punkt span {
  color: var(--mila-text-soft);
  font-size: 0.88rem;
  line-height: 1.45;
}

/* Wer dahintersteht. Nicht im Kleingedruckten: Eine Software fürs eigene Haus
   zu bauen ist eine Auskunft über den, der sie baut. */
.backstage-haus {
  margin: 2rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--mila-line);
  color: var(--mila-text-soft);
  font-size: 0.92rem;
}

/* Auf der backstage-Seite trägt die Wortmarke selbst den Kopf — dort steht
   kein Hauslogo daneben, das ihr die Größe vorgibt. */
.reservieren__werkzeug--gross {
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  text-transform: none;
  opacity: 1;
}

/* Der Schriftzug ist ein Weg geworden. Unterstrichen wird er erst beim
   Darüberfahren: Ein Gast bucht einen Tisch, er sucht keine Software. */
.reservieren__betrieben-weg {
  color: inherit;
  text-decoration: none;
}

.reservieren__betrieben-weg:hover,
.reservieren__betrieben-weg:focus-visible {
  text-decoration: underline;
}

.gaestezeichen {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

/* Die Überschrift ist das Plakat. Zwei Zeilen, die zweite in Gelb — und der
   Text wechselt bei jedem Aufruf (siehe ReservationsHelper). */
.reservieren__titel {
  margin: 0 0 0.75rem;
  /* 11vw statt 13: "Reservier dir einen" ist die längste Zeile, die hier
     vorkommt, und bei 13vw lief sie auf dem Telefon über die Kante. */
  font-size: clamp(2.2rem, 11vw, 3.4rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.04em;
}

.reservieren__titel em {
  font-style: normal;
  color: var(--mila-gast);
}

.reservieren__lead {
  margin: 0;
  max-width: 24rem;
  font-size: 0.95rem;
  opacity: 0.75;
}

/* Womit die Seite läuft — ganz unten im Band, leise. Ein Gast bucht einen
   Tisch, er sucht keine Software. */
.reservieren__betrieben {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 1.5rem 0 0;
  font-size: 0.76rem;
}

/* Die Deckkraft sitzt an den Teilen und nicht am ganzen Band: Seit hier auch
   der Weg ins Backoffice steht, hätte ein halbdurchsichtiges Band auch den
   Knopf verblassen lassen — und ein Knopf, den man drücken soll, muss lesbar
   sein. Eine Deckkraft am Elternteil lässt sich am Kind nicht zurücknehmen. */
.reservieren__betrieben-wort,
.reservieren__betrieben-weg {
  opacity: 0.5;
}

/* Der Weg hinein fürs Haus: klein, rechts außen, unaufdringlich — aber ein
   Knopf und kein Wort. Ein Gast liest hier "Log in" und geht weiter; wer im
   Haus arbeitet, sucht genau das. */
.reservieren__anmelden {
  margin-left: auto;
  padding: 0.25rem 0.7rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.reservieren__anmelden:hover,
.reservieren__anmelden:focus-visible {
  opacity: 1;
  background: rgb(255 255 255 / 0.1);
}

.reservieren__betrieben .produkt-signatur__marke { font-size: 0.84rem; }
.reservieren__betrieben .produkt-signatur__back { color: inherit; opacity: 0.6; }
.reservieren__betrieben .produkt-signatur__stage { color: inherit; }

.reservieren__blatt {
  padding: clamp(1.5rem, 6vw, 2.2rem) clamp(1.2rem, 5vw, 2rem) 4rem;
}

/* Wann und zu wievielt: Diese beiden Angaben entscheiden, was danach überhaupt
   zur Wahl steht. */
.reservieren__wahl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  margin-bottom: 1.6rem;
}

@media (min-width: 30rem) {
  .reservieren__wahl { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
}

.reservieren__wahlfeld { margin-bottom: 1.1rem; }

/* Der kleine Hinweis unter einem Wahlfeld — etwa, dass die Auswahl bei sieben
   aufhört. Leise: Der Weg für größere Gruppen steht als eigene Kachel unten. */
.reservieren__dazu {
  margin: 0.3rem 0 0;
  color: var(--mila-text-soft);
  font-size: 0.8rem;
}
.reservieren__wahlfeld--breit { grid-column: 1 / -1; }

.reservieren__label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mila-text-soft);
}

/* Linie statt Kasten: Auf einem Telefon sind fünf Kästen untereinander eine
   Leiter, fünf Linien eine Liste. */
.reservieren__eingabe {
  width: 100%;
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 2px solid var(--mila-nacht);
  border-radius: 0;
  background: transparent;
  color: var(--mila-text);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  -webkit-appearance: none;
  appearance: none;
}

.reservieren__eingabe:focus-visible {
  outline: none;
  border-bottom-color: var(--mila-gast);
}

.reservieren__hinweis {
  margin: 0 0 1.6rem;
  padding: 1rem 1.15rem;
  border-radius: 1rem;
  background: var(--mila-gast-soft);
  color: var(--mila-text-lead);
}

.reservieren__form { display: grid; gap: 1.6rem; }
.reservieren__zeiten { margin: 0; padding: 0; border: 0; }

/* Vier je Reihe: So steht jede Uhrzeit an derselben Kante, und die Reihe bricht
   nicht bei jeder Personenzahl anders um. */
.reservieren__raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
  margin-top: 0.45rem;
}

.zeitwahl { position: relative; display: block; }

.zeitwahl__knopf {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.zeitwahl__zeit {
  display: block;
  padding: 0.62rem 0.2rem;
  border: 1.5px solid var(--mila-nacht);
  border-radius: 0.65rem;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.zeitwahl__knopf:checked + .zeitwahl__zeit {
  background: var(--mila-nacht);
  color: var(--mila-gast);
}

.zeitwahl__knopf:focus-visible + .zeitwahl__zeit {
  outline: 2px solid var(--mila-gast);
  outline-offset: 2px;
}

.reservieren__felder { display: grid; grid-template-columns: 1fr; }

@media (min-width: 30rem) {
  .reservieren__felder { grid-template-columns: 1fr 1fr; column-gap: 1.4rem; }
}

/* Der eine Knopf, der weiterführt: schwarz mit gelber Schrift, wie die
   Uhrzeit, die man gerade gewählt hat. */
.reservieren__absenden {
  width: 100%;
  padding: 1rem 1.2rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--mila-nacht);
  color: var(--mila-gast);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.reservieren__absenden:hover { filter: brightness(1.15); }

/* Zwei Kacheln, die immer stehen — auch wenn oben alles frei ist. Sie
   beantworten die beiden Fragen, die sonst am Telefon ankommen. */
.reservieren__karten {
  display: grid;
  gap: 0.8rem;
  margin-top: 2.5rem;
}

.reservieren__karte {
  padding: 1.1rem 1.2rem 1.25rem;
  border-radius: 1.1rem;
  background: var(--mila-gast-soft);
  color: var(--mila-text);
}

.reservieren__karte p { margin: 0; color: var(--mila-text-lead); }

.reservieren__karte-titel {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.reservieren__karte--ruf {
  border: 1px solid var(--mila-line);
  background: var(--mila-surface);
}

.reservieren__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.95rem;
}

.reservieren__weg {
  padding: 0.55rem 1.1rem;
  border: 1.5px solid var(--mila-nacht);
  border-radius: 999px;
  background: transparent;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--mila-text);
  text-decoration: none;
}

.reservieren__weg:hover { background: var(--mila-nacht); color: var(--mila-bg); }

.reservieren__weg--whatsapp { border-color: #1f9d55; color: #14663a; }
.reservieren__weg--whatsapp:hover { background: #1f9d55; color: #fff; }

/* Der Gruß am Fuß: leise, mittig. Es ist ein Gruß und kein zweiter Knopf. */
.reservieren__gruss {
  margin: 2.5rem 0 0.35rem;
  text-align: center;
  color: var(--mila-text-lead);
}

.reservieren__unterschrift {
  margin: 0 0 0.5rem;
  text-align: center;
  font-family: var(--mila-font-logo, inherit);
  font-size: 1.02rem;
  color: var(--mila-text);
}

.bestaetigung {
  padding: 1.25rem 1.35rem 1.4rem;
  border-radius: 1.2rem;
  background: var(--mila-gast-soft);
  border: 1px solid var(--mila-gast);
}

.bestaetigung--storniert {
  background: var(--mila-surface);
  border-color: var(--mila-line);
  opacity: 0.75;
}

.bestaetigung__zeit {
  margin: 0 0 0.85rem;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.bestaetigung__angaben {
  display: grid;
  gap: 0.6rem;
  margin: 0;
}

.bestaetigung__angaben dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mila-text-soft);
}

.bestaetigung__angaben dd { margin: 0; font-weight: 600; }

.bestaetigung__weg { margin-top: 1.5rem; }

/* Der Kalendereintrag: der Weg, den ein Gast nach dem Buchen wirklich nimmt.
   Deshalb wie der Absenden-Knopf — schwarz mit Gelb. */
.bestaetigung__kalender {
  display: block;
  padding: 0.95rem 1.2rem;
  border-radius: 0.75rem;
  background: var(--mila-nacht);
  color: var(--mila-gast);
  font-weight: 800;
  font-size: 1.02rem;
  text-align: center;
  text-decoration: none;
}

.bestaetigung__kalender:hover { filter: brightness(1.15); }

.bestaetigung__hinweis {
  margin: 0.7rem 0 0;
  color: var(--mila-text-soft);
  font-size: 0.9rem;
}

/* Ändern steht unter dem Tisch und über dem Stornieren: Wer etwas verschieben
   will, soll nicht am Löschknopf vorbeimüssen. */
.bestaetigung__aendern {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--mila-line);
}

.bestaetigung__aendern-titel {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Stornieren ist leise: Es ist nicht das, wofür jemand diese Seite öffnet. */
.bestaetigung__stornieren {
  width: 100%;
  padding: 0.75rem 1.2rem;
  border: 1.5px solid var(--mila-line);
  border-radius: 999px;
  background: transparent;
  color: var(--mila-text-soft);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  display: block;
}

.bestaetigung__stornieren:hover {
  border-color: var(--mila-text-soft);
  color: var(--mila-text);
}


/* Allergene für Gäste ------------------------------------------------------ */

/* Wörtlich fürs Handy: Die Seite wird über einen QR-Code auf der Speisekarte
   aufgerufen — praktisch jeder, der sie öffnet, steht mit dem Telefon am Tisch.
   Ein Bildschirm ist hier die Ausnahme, nicht der Normalfall. Deshalb ist die
   Handyfassung die Grundeinstellung und der breite Schirm der Sonderfall.

   Farblich zweigeteilt wie die Anmeldung, nur fürs Hochformat gedreht: oben die
   dunkle Hälfte mit Marke, Titel und Suche, darunter die helle mit der Liste. */
body.allergene-seite {
  margin: 0;
  background: var(--mila-bg);
  color: var(--mila-text);
  font-family: var(--mila-font);
  font-size: 17px;
  line-height: 1.55;
}

.allergene {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  background: var(--mila-bg);
  min-height: 100dvh;
}

/* Die dunkle Hälfte bleibt beim Scrollen stehen: Wer unten bei den Pinsa sucht,
   hat das Feld noch da. */
.allergene__band {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 1.4rem clamp(1.1rem, 5vw, 1.6rem) 1.2rem;
  /* Hausschwarz, siehe .markenband. */
  background: var(--mila-nacht);
  color: var(--mila-bg);
}

/* Das Logo ist dunkel auf durchsichtig — hier wird es weiß gefärbt, statt eine
   zweite Datei zu pflegen, die beim nächsten Logowechsel vergessen wird. */
.allergene__logo {
  display: block;
  width: auto;
  height: 2.6rem;
  margin-bottom: 1rem;
  filter: brightness(0) invert(1);
}

.allergene__titel {
  margin: 0 0 0.3rem;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.allergene__lead {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.45;
  opacity: 0.85;
}

/* Der eine Farbtupfer der Seite — und er sitzt auf dem einzigen Ding, das man
   hier bedient. Alles andere liest man nur.
 *
 * Dieselbe Überlegung wie beim ToDo-Knopf in backstage: Ringsum steht Tanne, die
 * Farbe des Hauses; der Flieder gehört nicht zum Haus, sondern zu dem, was du
 * gerade tun kannst. Käme er an einer zweiten Stelle dazu, wäre er kein Tupfer
 * mehr, sondern eine zweite Hausfarbe.
 *
 * Auf dem dunklen Grün leuchtet er von selbst — es braucht keinen Rahmen dazu. */
.allergene__suche {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: 999px;
  /* Nur ein Hauch, keine Fläche: Gefüllt sprang das Feld dem Titel die Schau,
     obwohl es untergeordnet ist — man liest hier, man sucht nur manchmal. Als
     Tönung bringt es den Flieder mit, ohne sich vorzudrängen. */
  background: color-mix(in srgb, var(--mila-tupfer) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mila-tupfer) 45%, transparent);
  color: var(--mila-bg);
}

.allergene__suche svg {
  width: 16px;
  height: 16px;
  flex: none;
  opacity: 0.7;
}

.allergene__sucheingabe {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.95rem;
}

/* 16px verhindert, dass iOS beim Antippen hineinzoomt — auf dem Handy ist das
   der Unterschied zwischen "tippen und suchen" und "erst wieder herauszoomen". */
@supports (-webkit-touch-callout: none) {
  .allergene__sucheingabe { font-size: 16px; }
}

.allergene__sucheingabe::placeholder { color: inherit; opacity: 0.6; }
.allergene__sucheingabe:focus { outline: none; }

/* Beim Tippen ein Ring statt eines Farbwechsels: Die Fläche soll ruhig bleiben,
   während jemand schreibt. */
/* Beim Tippen tritt der Flieder hervor — dann ist das Feld ja tatsächlich das,
   womit man gerade zu tun hat. */
.allergene__suche:focus-within {
  background: color-mix(in srgb, var(--mila-tupfer) 34%, transparent);
  box-shadow: inset 0 0 0 1px var(--mila-tupfer), 0 0 0 3px color-mix(in srgb, var(--mila-tupfer) 30%, transparent);
}

/* Die Kategorien als Knöpfe, in einer Zeile, die seitlich läuft.
 *
 * Untereinander nähmen sechs Knöpfe den halben Bildschirm, bevor die Liste
 * anfängt — und die Seite wird am Tisch aufgerufen, mit dem Telefon in einer
 * Hand. Wischen ist dort die geläufigste Geste überhaupt. */
.allergene__filter-leiste {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.7rem;
  padding-bottom: 0.2rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.allergene__filter-leiste::-webkit-scrollbar { display: none; }

.allergene__filter {
  flex: none;
  padding: 0.42rem 0.85rem;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

/* Die gewählte Kategorie kehrt die Farben um — auf dem dunklen Band ist das der
   deutlichste Unterschied, den es gibt, und er funktioniert auch bei Sonne. */
.allergene__filter--hier {
  background: var(--mila-bg);
  border-color: var(--mila-bg);
  color: var(--mila-akzent-schrift);
}

.allergene__liste { padding: 0 clamp(1.1rem, 5vw, 1.6rem); }

/* Der Satz über die offene Küche: das Erste unter dem Band.
 *
 * Er stand im Fuß, wo ihn nur liest, wer die ganze Liste durchgescrollt hat —
 * also niemand, der wegen einer Allergie hier ist. Ruhig gesetzt, aber nicht
 * kleingedruckt: Er soll gelesen werden, nicht überstanden. */
.allergene__kueche {
  /* Luft nach oben: Der Kasten klebte am grünen Band, als wäre er ein Teil
     davon — und das Band ist die Bedienung, der Satz die Auskunft. */
  margin: clamp(1.25rem, 4vw, 1.75rem) clamp(1.1rem, 5vw, 1.6rem) 1.5rem;
  padding: 0.9rem 1.1rem;
  border-left: 4px solid var(--mila-accent);
  border-radius: 0 12px 12px 0;
  background: var(--mila-surface-soft);
  color: var(--mila-text);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Die Kategorie bleibt stehen, solange ihre Produkte laufen — man weiß immer,
   wo man gerade ist. */
/* Die Überschrift der Kategorie soll man sehen.
 *
 * Sie war ein Kleinstlabel: 0,68rem, gesperrt, in Versalien — kleiner als die
 * Gerichte darunter. Wer die Liste am Handy durchscrollte, merkte nicht, dass
 * ein neuer Abschnitt anfing, und suchte die Pinsa zwischen den Sandwiches.
 *
 * Jetzt größer als die Gerichtsnamen und in normaler Schreibung: „Loaded
 * Brioche“ liest sich so schneller als „LOADED BRIOCHE“. Die Linie darunter
 * macht den Einschnitt sichtbar, auch wenn man schnell wischt.
 *
 * Sticky bleibt sie: Am Handy steht dann immer da, worin man gerade liest. */
.allergene__kategorie {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 1.6rem 0 0.5rem;
  border-bottom: 2px solid color-mix(in srgb, var(--mila-accent) 30%, transparent);
  background: var(--mila-bg);
  color: var(--mila-akzent-schrift);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Die erste braucht den Abstand nach oben nicht — darüber steht schon der Kopf. */
.allergene__gruppe:first-child .allergene__kategorie { padding-top: 0.4rem; }

.allergene__produkt {
  padding: 0.8rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--mila-accent) 14%, transparent);
}

.allergene__gruppe:last-child .allergene__produkt:last-child { border-bottom: 0; }

.allergene__name {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.005em;
}

/* Chips statt einer Zeile mit Punkten: Der Gast sucht ein Wort — "Milch" —, und
   ein Chip findet sich schneller als eine Stelle in einem Satz. */
.allergene__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.allergene__chip {
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mila-accent) 10%, transparent);
  color: var(--mila-akzent-schrift);
  font-size: 0.78rem;
  font-weight: 600;
}

/* Geprüft und nichts gefunden ist eine gute Nachricht und darf so aussehen. */
/* Spuren stehen als Satz unter den Chips, nicht als weiterer Chip: Nebeneinander
   läse man beides als "ist drin", und der Unterschied ist genau der Punkt. */
.allergene__spuren {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--mila-text-soft, #6b6f5e);
}

.allergene__chip--frei {
  background: var(--mila-ok-bg);
  color: var(--mila-ok-text);
}

.allergene__hinweis {
  margin: 0.4rem 0 0;
  font-size: 0.83rem;
  color: var(--mila-text-soft);
}

.allergene__nichts,
.allergene__leer {
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
  color: var(--mila-text-lead);
}

/* Der Hinweis auf die offene Küche gehört ans Ende: Er soll gelesen werden, aber
   nicht das Erste sein, was jemanden begrüßt. */
.allergene__fuss {
  margin-top: 1.5rem;
  padding: 1.25rem clamp(1.1rem, 5vw, 1.6rem) 2.5rem;
  border-top: 1px solid var(--mila-line);
}

.allergene__fuss p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--mila-text-soft);
}

.allergene__legende {
  margin: 0 0 0.9rem !important;
  font-size: 0.76rem !important;
}

.allergene__legende b { color: var(--mila-text-lead); font-weight: 650; }

/* Ab Tablet: Die Seite bleibt eine Spalte, bekommt aber Luft und einen Rahmen —
   sie soll nicht über einen breiten Schirm laufen, sie ist eine Handyseite. */
@media (min-width: 40rem) {
  .allergene {
    margin: 2.5rem auto;
    min-height: 0;
    border-radius: var(--mila-radius);
    overflow: hidden;
    box-shadow: var(--mila-shadow);
  }

  .allergene__band { border-radius: 0; }
}

/* Die Gästefarbe ------------------------------------------------------------
 *
 * Gelb ist die eine Farbe, die ein Gast überall sieht: auf der Speisekarte, bei
 * den Allergenen, beim Reservieren, auf der Seite im WLAN. Vier verschiedene
 * Stellen, dieselbe Farbe — daran erkennt man dasselbe Haus.
 *
 * Als Überschreibung der Tokens und nicht Regel für Regel: Jede Stelle, die
 * heute den Akzent benutzt, wird dadurch gelb, und keine wird vergessen.
 *
 * Die Anmeldung bleibt draußen (nur .auth-page ohne --tafel): Sie ist die Tür
 * fürs Team, nicht für Gäste, und trägt weiter Tanne.
 *
 * Drei Werte, weil eine Farbe drei Aufgaben hat: die Fläche, die Schrift darauf
 * und der Akzent als Schrift. Helles Gelb auf Creme liest niemand — dafür steht
 * das tiefe Bernstein. */
body.allergene-seite,
body.reservieren-seite,
body.schnuppertag-seite,
body.auth-page--tafel {
  --mila-accent: var(--mila-gast);
  --mila-auf-akzent: var(--mila-nacht);
  --mila-akzent-schrift: var(--mila-gast-tief);
  --mila-accent-soft: var(--mila-gast-soft);
}