/* Haut „Kachel": hell, gerundet, Produktfarbe als Wegweiser.
   Wer auf Personas klickt, betritt eine violette Seite; Restaurant Manager ist
   blau, Cart orange. Die Farbe zeigt den Ort, nicht die Laune. */

.cy--kachel{
  --cy-grund:#F4F4F5; --cy-flaeche:#FFFFFF; --cy-tinte:#101114; --cy-leise:#5B5F66;
  --cy-linie:#E3E4E7; --cy-linie-stark:#D5D7DB;
  --cy-nav-grund:rgba(244,244,245,.88);
  --cy-farbe:#1B72B8; --cy-hell:#E9F2FA; --cy-auf-farbe:#FFFFFF;
  --cy-schrift:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --cy-anzeige:Manrope,Inter,sans-serif;
  --cy-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --cy-radius:20px; --cy-radius-knopf:12px;
  --cy-schatten:0 22px 46px rgba(16,17,20,.10);
  --cy-schatten-farbe:0 20px 44px color-mix(in srgb,var(--cy-farbe) 22%, transparent);
}

/* Auf hellem Grund braucht die Produktfarbe etwas Tiefe, sonst trägt weiße
   Schrift darauf keinen ausreichenden Kontrast — Orange ist der Grenzfall. */
.cy--kachel .cy-knopf--voll{background:color-mix(in srgb,var(--cy-farbe) 84%, #000)}
.cy--kachel .cy-knopf--voll:hover{background:color-mix(in srgb,var(--cy-farbe) 72%, #000)}
.cy--kachel .cy-nav__marke{color:var(--cy-tinte)}

/* Kopfbereich als getönte Kachel */
.cy--kachel .cy-held--kachel{padding:22px 0 0}
.cy--kachel .cy-held__karte{
  background:linear-gradient(158deg,color-mix(in srgb,var(--cy-farbe) 13%,#fff) 0%,#fff 62%);
  border:1px solid var(--cy-linie); border-radius:26px; padding:44px 40px 40px}
.cy--kachel .cy-held__text{max-width:60ch}
.cy--kachel .cy-held--start{padding:64px 0 30px}
.cy--kachel .cy-held--start h1{max-width:19ch}

.cy--kachel .cy-schieber__buehne{border-radius:16px}
.cy--kachel .cy-punkt.cy-an{background:color-mix(in srgb,var(--cy-farbe) 84%, #000)}

.cy--kachel .cy-produkt{transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s}
.cy--kachel .cy-produkt:hover{transform:translateY(-4px); box-shadow:var(--cy-schatten)}
.cy--kachel .cy-produkt__kopf{
  background:linear-gradient(160deg,color-mix(in srgb,var(--cy-farbe) 14%,#fff),#fff)}

.cy--kachel .cy-paket.cy-hervor{transform:translateY(-6px)}
.cy--kachel .cy-gruende{background:var(--cy-flaeche); border-radius:26px; margin:0 28px;
  padding:40px 28px; border:1px solid var(--cy-linie)}
.cy--kachel .cy-abschluss{background:transparent}
@media (max-width:860px){
  .cy--kachel .cy-held__karte{padding:30px 22px 26px; border-radius:20px}
  .cy--kachel .cy-gruende{margin:0 16px}
  .cy--kachel .cy-paket.cy-hervor{transform:none}
}
.cy--kachel .cy-menue__knopf{background:#fff}