/* ═══════════════════════════════════════════════════════════════════════════
   hacienda.css — die Handschrift der Bistro-VERKAUFSSEITE (19.08.2026)

   NUR für /midnightbistro/ und /de/midnightbistro/. Die Gastseite, die
   Abholseite und das Pult rühren diese Datei nicht an — sie sind Werkzeug und
   müssen langweilig sein. Eine Verkaufsseite darf einen Raum bauen.

   ⚠️ KEINE NEUE FARBE. Jeder Wert hier kommt aus dem geltenden Thema
      (theme-standard.css und die drei Geschwister). Das ist die ganze
      Zurückhaltung, die diese Datei sich auferlegt — und der Grund, warum sie
      mit allen vier Handschriften funktioniert, ohne dass jemand nachfärbt.

   WOHER DAS „MEXIKANISCH" KOMMT, OHNE EINE EINZIGE NEUE FARBE
   ==========================================================
   Es steckt schon in der Palette, es hat nur nie jemand nebeneinandergelegt:

     --bx-accent  #FF375F   Chili
     --bx-orange  #FF9F0A   Cempasúchil, die Totenblume
     --bx-gruen   #30D158   Agave

   Chili → Cempasúchil als Verlauf ist der Farbklang eines gedeckten Tisches in
   Oaxaca. Dazu drei Formen, alle als HAARLINIE, alle aus reinem CSS/SVG:

     1. PAPEL PICADO — das geschnittene Papierbanner über dem Kopf der Seite.
     2. TALAVERA     — das achtzackige Kachelmuster, 2 % Deckkraft, als Grund.
     3. BOGEN        — der Hacienda-Torbogen als Rahmen für Bilder und Karten.

   ⚠️ ORNAMENT IST TAPETE, NIE INHALT. Jede Zierde hier trägt `aria-hidden`
      bzw. steht in `::before`/`::after` — ein Bildschirmleser liest kein
      einziges Zeichen davon vor, und bei `prefers-reduced-motion` steht alles
      still. Wer die Seite über die Tastatur bedient, merkt von ihr nichts.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Grundmasse ──────────────────────────────────────────────────────────── */
.hc {
  /* Zeilenlänge, nicht Seitenbreite: 68 Zeichen liest sich, 110 nicht. */
  --hc-lese: 34rem;
  /* ⚠️ War `clamp(72px, 11vw, 148px)`. Die Hauptseite setzt 92px
     (mi-su.css:133) und 68px unter 720px (mi-su.css:305) — 148 gegen 92 war
     der groesste einzelne Abstand zum Vorbild.
     ⚠️ DIE REGEL FUER UNTER 640px BLEIBT BEI 64px. Dort waren es nie 148 —
     11vw ergibt 148 erst ab etwa 1345px Fensterbreite. Sie anzuheben haette
     auf dem Telefon MEHR Luft gemacht statt weniger. */
  --hc-luft: clamp(68px, 7vw, 92px);
  /* ⚠️ HIER STAND `--hc-verlauf`. Am 24.08.2026 entfernt, weil ihn NIEMAND
     mehr liest — und genau das ist der Grund: eine Variable, die „der Verlauf"
     heisst und bereitliegt, ist eine Einladung, sie wieder auf eine
     Knopfflaeche zu legen. Dort ergab sie 2,06 : 1.
     Wer einen Verlauf braucht, soll ihn hinschreiben und dabei den Kontrast
     rechnen. Die Haarlinie in handschrift.css tut genau das (--hs-verlauf),
     und auf ihr steht kein Text. */
}

/* ── Typografie ──────────────────────────────────────────────────────────── */
/* „Edel" heisst hier: viel Weissraum, wenig Gewichte, grosse Sprünge. Es gibt
   nur EINE Schrift (Zen Kaku Gothic New, selbst gehostet) — eine zweite wäre
   eine neue Binärdatei und ein neuer Ladeweg für einen Effekt, den Laufweite
   und Grössensprung genauso hergeben. */

.hc-auge {                       /* die Zeile ÜBER der Überschrift */
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  /* ⚠️ WAR `--bx-orange`, UND DAS WAR EIN KONTRASTFEHLER, KEIN GESCHMACK.
     12 Pixel fett sind KEIN „grosser Text" (dafuer braeuchte es 18,66px), es
     gelten also die vollen 4,5 : 1. Gemessen auf dem Seitengrund:
       --bx-orange  4,06 : 1 (betrieb)  durchgefallen — deshalb gab es unten
                    eine Sonderregel NUR fuer das helle Thema
       --bx-text-2  6,05 / 6,93 / 7,10 / 6,99 : 1 in allen vieren
     Eine Augenzeile ist eine LEISE Beschriftung. Sie in der zweitlautesten
     Farbe der Palette zu setzen war der Fehler; die Sonderregel hat ihn nur
     in einem von vier Themen zugedeckt. */
  color: var(--bx-text-2);  /* war --bx-orange */
  margin: 0 0 18px;
}
.hc-auge::before {
  content: ""; width: 26px; height: 1px;
  background: currentColor; opacity: .55; flex: none;
}

/* ⚠️ HIER STAND EINE SONDERREGEL NUR FUER DAS HELLE THEMA — sie faerbte die
   Augenzeile von Orange auf den Akzent um, weil Orange dort 4,06 : 1 ergab.
   Mit `--bx-text-2` besteht die Zeile in ALLEN vier Handschriften, und eine
   Regel, die nur eine Handschrift kennt, ist eine Regel, die man beim
   naechsten Thema vergisst. */

.hc-h1 {
  font-size: clamp(38px, 6.2vw, 72px);
  font-weight: 900; line-height: 1.04; letter-spacing: -.028em;
  margin: 0 0 20px;
}
.hc-h2 {
  font-size: clamp(27px, 3.7vw, 42px);
  font-weight: 900; line-height: 1.12; letter-spacing: -.022em;
  margin: 0 0 16px;
}
.hc-h3 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 8px; }

.hc-lead {
  font-size: clamp(16px, 1.9vw, 19px); line-height: 1.65;
  color: var(--bx-text-2); max-width: var(--hc-lese); margin: 0 0 30px;
}
.hc-p { line-height: 1.7; color: var(--bx-text-2); max-width: var(--hc-lese); margin: 0 0 14px; }

/* Das eine Wort, das leuchten darf. Verlauf auf Schrift — mit ehrlichem
   Rückfall: kann ein Browser `background-clip:text` nicht, bleibt der Text
   in der Akzentfarbe stehen statt zu verschwinden. */
.hc-glanz { color: var(--bx-accent); }
/* ⚠️ HIER STAND DER VERLAUF AUF DER SCHRIFT — an acht Ueberschriften.
   Die Zeile darueber war schon immer der dokumentierte Rueckfall, der
   Zustand nach dieser Aenderung ist also erprobt. Gerechnet, Akzent auf dem
   jeweiligen Seitengrund: standard 5,60 / karte 5,51 / tresen 5,58 /
   betrieb 4,53 : 1 — alle vier bestehen sogar die strengeren 4,5 : 1,
   obwohl die Traeger (ab 27px, Gewicht 900) als grosser Text nur 3 : 1
   braeuchten.
   Die Hauptseite macht es ebenso: mi-su.css:116 faerbt das hervorgehobene
   Wort flach ein. */

/* ── Abschnitt und Grund ─────────────────────────────────────────────────── */
.hc-sec { position: relative; padding: var(--hc-luft) 0; }
.hc-innen { width: min(100% - 40px, var(--bx-breite, 1080px)); margin-inline: auto; }

/* TALAVERA. Ein achtzackiger Stern im Rapport, 2 % Deckkraft — man sieht ihn
   erst, wenn man ihn sucht, und vermisst ihn sofort, wenn er fehlt.
   Als `background-image` mit Daten-URI: kein zweiter Ladeweg, kein Bildpfad,
   der beim Verschieben der Seite bricht. */
.hc-kachel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23FF375F' stroke-width='1.1'%3E%3Cpath d='M36 6 L44 28 L66 36 L44 44 L36 66 L28 44 L6 36 L28 28 Z'/%3E%3Ccircle cx='36' cy='36' r='7.5'/%3E%3Cpath d='M0 0 L14 14 M72 0 L58 14 M0 72 L14 58 M72 72 L58 58'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
}

/* ⚠️ HIER STAND EIN LICHTSCHEIN — 46px Weichzeichner in der Akzentfarbe
   hinter dem Seitenkopf. Die Hauptseite hat an derselben Stelle auch einen
   radialen Verlauf (mi-su.css:95-98), aber der blendet nach `--ink` AUS: er
   verdunkelt, er blueht nicht farbig auf. In der hellen Handschrift
   `betrieb` legte der Schein ausserdem einen rosa Schleier ueber eine Seite,
   die hell sein will.
   `.hc-schein` bleibt als Klasse im Markup wirkungslos stehen — sie zu
   entfernen hiesse, sechs Seiten anzufassen, um nichts zu aendern. */

/* ⚠️ HIER HING DAS PAPIERBANNER (`.hc-picado`) UND ES WEHTE.
   Die Hauptseite hat NULL laufende Animationen — `grep animation` ueber
   mi-su.css und pages.css findet genau einen Treffer, und der ist
   `animation: none` im reduced-motion-Block. Ein Banner, das sich dauernd
   bewegt, ist das Gegenteil von zurueckhaltend.
   Die Klasse bleibt im Markup wirkungslos stehen (siehe oben, derselbe
   Grund). Der Balken ist damit unsichtbar, nicht kaputt. */

/* ── Der Bogen ───────────────────────────────────────────────────────────── */
/* Der Hacienda-Torbogen: oben halbrund, unten gerade. Genau die Form, durch die
   man in einen Innenhof sieht. Er rahmt, was die Seite ZEIGEN will. */
.hc-bogen {
  border-radius: 50% 50% var(--bx-radius-s) var(--bx-radius-s) / 42% 42% var(--bx-radius-s) var(--bx-radius-s);
  border: 1px solid; border-color: var(--bx-line-2);
  background: var(--bx-surface);
  overflow: hidden; position: relative;
}
/* Die dünne warme Linie im Bogen — Messing, nicht Gold. */
.hc-bogen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  border: 1px solid transparent;
  /* ⚠️ War `var(--hc-verlauf)`. Die FORM des Torbogens bleibt — sie rahmt,
     was die Seite zeigen will. Nur die leuchtende Kante geht; die Hauptseite
     rahmt mit Haarlinien (mi-su.css `--line-2`), nicht mit Farbe. */
  background: var(--bx-line-2) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .34;
}

/* ── Trennlinie mit Raute ────────────────────────────────────────────────── */
.hc-teiler {
  display: flex; align-items: center; gap: 16px;
  margin: 0 auto; max-width: 340px; color: var(--bx-line-2);
}
.hc-teiler::before, .hc-teiler::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
}
.hc-teiler i {
  width: 9px; height: 9px; rotate: 45deg; flex: none;
  /* War der Verlauf. Eine Trennlinie soll trennen, nicht leuchten. */
  background: var(--bx-line-2); opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ⚠️ RAND IMMER IN LANGSCHREIBWEISE, WENN DAS ELEMENT `border-color`
      ÜBERBLENDET. Am 19.08.2026 im Browser gemessen, nicht vermutet:

        .hc-bogen  (ohne transition)  → rgba(255,255,255,0.13)   richtig
        .hc-karte  (mit  transition)  → rgb(242,242,247)         FALSCH
        dieselbe Karte, transition weg → rgba(255,255,255,0.07)  richtig

      `border: 1px solid var(--bx-line)` zusammen mit
      `transition: border-color` lässt die Farbe auf `currentColor` fallen —
      also auf die TEXTfarbe. Aus einer Haarlinie mit 7 % Weiss wird ein voll
      deckender weisser Strich um jede Karte. Auf einem Bildschirmfoto sieht
      das nach Absicht aus; es ist keine.

      `border-width` und `border-style` dürfen in der Kurzform bleiben — nur
      die FARBE muss einzeln stehen.

   ⚠️ UND DESHALB WIRD `border-color` HIER GAR NICHT ÜBERBLENDET.
      Die Langschreibweise allein reichte nicht. Zweite Messung am selben Tag,
      nach dem Umschalten auf das Thema „karte":

        --bx-line              → rgba(244,239,231,.14)   (neues Thema)
        .hc-karte border-color → rgba(255,255,255,.07)   (ALTES Thema)

      Steht `border-color` in einer `transition`, merkt sich diese Engine den
      EINGESETZTEN Wert und ersetzt ihn nicht neu, wenn sich die Variable
      ändert. Die Karten behielten die Linie des Themas, das beim ersten
      Zeichnen galt — auf genau der Seite, deren Verkaufsargument lautet
      „tipp eines an, die ganze Seite ändert sich mit". Die Hälfte änderte
      sich nicht.

      Eine Haarlinie, die in 0,22 s einblendet, sieht niemand. Eine Haarlinie
      in der falschen Farbe sieht jeder. Also blendet hier nur noch `transform`
      und `filter` — die Randfarbe springt, und das ist richtig so.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Karten ──────────────────────────────────────────────────────────────── */
.hc-gitter { display: grid; gap: 18px; }
.hc-gitter--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.hc-gitter--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.hc-karte {
  background: var(--bx-surface);
  border: 1px solid; border-color: var(--bx-line);
  border-radius: var(--bx-radius);
  padding: 26px 24px;
  position: relative;
  transition: transform .22s ease;   /* NICHT border-color — siehe oben */
}
@media (prefers-reduced-motion: no-preference) {
  .hc-karte:hover { border-color: var(--bx-line-2); transform: translateY(-2px); }
}
/* Der schmale warme Streifen oben — die Kante einer Talavera-Kachel. */
.hc-karte--warm::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  border-radius: var(--bx-radius) var(--bx-radius) 0 0;
  /* War der Verlauf bei .85. Ein Streifen markiert — er muss nicht leuchten.
     Die Hauptseite setzt Karten mit Haarlinien ab, nicht mit Farbkanten. */
  background: var(--bx-accent); opacity: .5;
}
.hc-karte__zeichen {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 11px; margin-bottom: 16px; font-size: 19px;
  background: var(--bx-accent-dim); border: 1px solid; border-color: var(--bx-line-2);
}

/* ── Mitgliedschaft ──────────────────────────────────────────────────────── */
.hc-stufe { display: flex; flex-direction: column; }
.hc-stufe--gewaehlt { border-color: transparent; box-shadow: 0 0 0 1.5px var(--bx-accent); }
.hc-stufe__band {
  position: absolute; top: -11px; left: 24px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  /* ⚠️ HIER WAR DER KONTRAST AM SCHLIMMSTEN. Weisse Schrift auf dem Verlauf
     bei 10,5px/800 — noch kleiner als die Knoepfe, also erst recht 4,5 : 1
     noetig, geliefert 2,06 : 1 am Orange-Ende.
     Akzentschrift auf der Kartenflaeche ergibt 5,23 / 4,72 / 5,15 / 5,23 : 1
     in den vier Handschriften. Und das Band ist ohnehin der dritte Markierer
     desselben Tarifs (Rahmen, Schatten, Band) — leiser ist hier auch
     inhaltlich richtig. */
  background: var(--bx-surface); color: var(--bx-accent);
  border: 1px solid var(--bx-accent);
}
.hc-stufe__preis {
  font-size: 34px; font-weight: 900; letter-spacing: -.03em; line-height: 1.1;
  margin: 6px 0 2px;
}
.hc-stufe__takt { font-size: 13px; color: var(--bx-text-2); margin-bottom: 18px; }
.hc-stufe__muenzen {
  display: flex; align-items: baseline; gap: 8px;
  padding: 13px 15px; margin-bottom: 18px;
  border-radius: var(--bx-radius-s);
  background: var(--bx-surface-2); border: 1px solid; border-color: var(--bx-line);
}
.hc-stufe__muenzen b { font-size: 20px; font-weight: 900; color: var(--bx-orange); }
.hc-stufe__muenzen span { font-size: 12px; color: var(--bx-text-2); }

.hc-liste { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.hc-liste li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.55; }
.hc-liste li::before {
  content: ""; flex: none; margin-top: 7px;
  width: 6px; height: 6px; rotate: 45deg;
  background: var(--bx-gruen); opacity: .9;
}
.hc-liste li.hc-liste--aus { color: var(--bx-text-2); }
.hc-liste li.hc-liste--aus::before { background: var(--bx-text-2); opacity: .5; }

/* ── Knöpfe ──────────────────────────────────────────────────────────────── */
.hc-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-weight: 800; font-size: 15px;
  padding: 14px 26px; border-radius: 999px; cursor: pointer;
  border: 1px solid; border-color: var(--bx-line-2); background: var(--bx-surface);
  color: var(--bx-text); text-decoration: none; text-align: center;
  transition: filter .18s ease;      /* NICHT border-color — siehe oben */
}
/* ⚠️ RUHIGER SEIT DEM 24.08.2026 — UND LESBAR.
   Hier stand `background: var(--hc-verlauf)` mit weisser Schrift. Gerechnet
   (tools/kontrast.py): gegen das Chili am Verlaufsanfang 3,52 : 1, gegen das
   Cempasuchil am Ende **2,06 : 1**. Gelesen wird ueber die ganze Breite, es
   zaehlt also die schlechteste Stelle — und der Knopf traegt 15px/800, also
   kleinen Text mit 4,5 : 1 Anspruch. Der Verlauf war nicht nur laut, er war
   schwer lesbar.

   `--bx-text` auf `--bx-bg` ergibt 17,67 / 17,69 / 16,94 / 19,68 : 1 in den
   vier Handschriften — und das Paar KIPPT VON SELBST: in den drei dunklen
   Themen ist `--bx-text` hell, im hellen `betrieb` dunkel. Eine Regel, vier
   Handschriften, kein Sonderfall.

   Es ist ausserdem genau die Regel der Hauptseite: `.btn-fill`
   (mi-su.css:127) ist eine HELLE Flaeche mit dunkler Schrift. Der Akzent ist
   dort nie die Knopfflaeche — er lebt in Linien und Text. */
.hc-knopf--voll {
  background: var(--bx-text); color: var(--bx-bg);
  border-color: transparent;
}
.hc-knopf:hover { filter: brightness(1.09); border-color: var(--bx-line-2); }
.hc-knopf--breit { width: 100%; margin-top: auto; }
/* Sichtbarer Fokus.
   ⚠️ Der Ring lag auf `--bx-orange`, weil ein VERLAUF den Standardring
      verschluckte. Den Verlauf gibt es hier nicht mehr; der Akzent ist der
      staerkere und ruhigere Ring, und er ist derselbe wie ueberall sonst. */
.hc-knopf:focus-visible {
  outline: 2px solid var(--bx-accent); outline-offset: 3px;
}

/* ── Kleinkram ───────────────────────────────────────────────────────────── */
/* ⚠️ `--bx-text-2`, NICHT `--bx-text-3`. Am 19.08.2026 in der hellen
      Handschrift „betrieb" gemessen:

        --bx-text-3  auf dem Seitengrund → 3,16 : 1   durchgefallen
        --bx-text-2  auf dem Seitengrund → 6,47 : 1   in Ordnung

      13 Pixel sind kleiner Text; WCAG AA verlangt dafuer 4,5 : 1. Und in
      diesem Absatz steht ausgerechnet der Satz „Auf dieser Seite wird nichts
      bezahlt" — der Satz, der am ehesten gelesen werden muss. Leiser wirkt er
      hier ueber die GROESSE, nicht ueber blassere Farbe. */
.hc-fuss {
  font-size: 13px; line-height: 1.65; color: var(--bx-text-2);
  max-width: var(--hc-lese);
}
.hc-marke {
  font-weight: 900; letter-spacing: .04em;
}

@media (max-width: 640px) {
  .hc { --hc-luft: 64px; }
  .hc-sec { padding: var(--hc-luft) 0; }
}