/* focustrend.de/gastro — Ergänzung zu werkstatt.css (wird danach geladen):
   Farben der drei Gastro-Designs, bewegte Zeichnungen und die KI-Vorführung mit zwei Wegen (Telefonat und Chat im Wechsel). */
:root{--restaurant:#d9b25a;--cafe:#f08a4b;--pizzeria:#ff5140}

/* Zeichnungen: Glocke hebt sich, Tasse dampft, Pizza dreht sich langsam */
.heb,.dampf{transform-box:fill-box;transform-origin:center bottom}
.heb{animation:heb 3.4s ease-in-out infinite}
@keyframes heb{0%,22%,100%{transform:none}45%,75%{transform:translateY(-9px) rotate(-7deg)}}
.dampf{animation:dampf 2.4s ease-in-out infinite}
@keyframes dampf{0%{opacity:0;transform:translateY(5px)}45%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
.fz-pizzeria .dreh{animation-duration:9s}
.reiter-kn .heb,.reiter-kn .dampf{animation-play-state:paused}
.reiter-kn:hover .heb,.reiter-kn:hover .dampf,.reiter-kn[aria-selected=true] .heb,.reiter-kn[aria-selected=true] .dampf{animation-play-state:running}

/* Wechselwort im Kopfbereich */
.w-restaurant{color:var(--restaurant)}.w-cafe{color:var(--cafe)}.w-pizzeria{color:var(--pizzeria)}

/* Drei kleine Webseiten als Fächer */
.karte-restaurant{left:0;top:0;rotate:-6deg;background:linear-gradient(140deg,#1b2318,#0c0f0b);color:#f3ead8;z-index:1}
.karte-restaurant .fz{color:var(--restaurant)}
.karte-restaurant .karte-kn{background:#d4a94e;color:#1a1408}
.karte-cafe{left:50%;top:27%;rotate:5deg;background:linear-gradient(140deg,#fbf3e7,#f5d9c2);color:#3b2418;z-index:2;animation-delay:-2.3s}
.karte-cafe .karte-leiste{background:rgba(59,36,24,.1)}
.karte-cafe .karte-leiste i{background:rgba(59,36,24,.35)}
.karte-cafe .fz{color:#d9612c}
.karte-cafe .karte-kn{background:#3b2418}
.karte-pizzeria{left:5%;top:62%;rotate:-3deg;background:linear-gradient(140deg,#e2362c,#a9160f);color:#fff6e3;z-index:3;animation-delay:-4.6s}
.karte-pizzeria .fz{color:#ffd166}
.karte-pizzeria .karte-kn{background:#1f7a3d}

/* Formulare: Art des Betriebs */
.wahl-restaurant input:checked+span{border-color:var(--restaurant);background:rgba(217,178,90,.2)}
.wahl-cafe input:checked+span{border-color:var(--cafe);background:rgba(240,138,75,.2)}
.wahl-pizzeria input:checked+span{border-color:var(--pizzeria);background:rgba(255,81,64,.2)}

/* Beispiel-Designs: Reiter, Bühne, Texte */
.reiter-restaurant[aria-selected=true]{border-color:var(--restaurant);background:linear-gradient(120deg,rgba(217,178,90,.24),rgba(217,178,90,.05))}
.reiter-restaurant[aria-selected=true] .reiter-ico,.reiter-restaurant:hover .reiter-ico{color:var(--restaurant)}
.reiter-cafe[aria-selected=true]{border-color:var(--cafe);background:linear-gradient(120deg,rgba(240,138,75,.24),rgba(240,138,75,.05))}
.reiter-cafe[aria-selected=true] .reiter-ico,.reiter-cafe:hover .reiter-ico{color:var(--cafe)}
.reiter-pizzeria[aria-selected=true]{border-color:var(--pizzeria);background:linear-gradient(120deg,rgba(255,81,64,.26),rgba(53,184,102,.07))}
.reiter-pizzeria[aria-selected=true] .reiter-ico,.reiter-pizzeria:hover .reiter-ico{color:var(--pizzeria)}
.gastro .buehne{--schein:var(--restaurant)}
.gastro .buehne[data-design=cafe]{--schein:var(--cafe)}
.gastro .buehne[data-design=pizzeria]{--schein:var(--pizzeria)}
.text-restaurant li .sym{color:var(--restaurant)}.text-cafe li .sym{color:var(--cafe)}.text-pizzeria li .sym{color:var(--pizzeria)}
.text-restaurant .knopf-design{background:linear-gradient(100deg,#b98a2e,#e6c56e);color:#1a1408;box-shadow:0 10px 30px -10px rgba(217,178,90,.8)}
.text-cafe .knopf-design{background:linear-gradient(100deg,#d9612c,#f39a5c);box-shadow:0 10px 30px -10px rgba(240,138,75,.8)}
.text-pizzeria .knopf-design{background:linear-gradient(100deg,#d7261e,#ff6a3d);box-shadow:0 10px 30px -10px rgba(255,81,64,.8)}

/* KI-Vorführung: Telefonat und Chat liegen übereinander, das Skript wechselt je Runde (Klasse kanal-2) */
.ki-kanaele{display:grid;flex:1;min-width:0}
.ki-kanal{grid-area:1/1;min-width:0;display:flex;flex-direction:column;transition:opacity .5s}
.kanal-b,.kanal-2 .kanal-a{opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.kanal-2 .kanal-b{opacity:1;visibility:visible;transition:opacity .5s}
.ki-rund-chat{background:linear-gradient(135deg,#6a57f2,#35b4f2)}
.ki-uhr-fest{margin-left:auto;font:700 .8rem/1 var(--titel);color:var(--gruen);padding:7px 9px;border-radius:9px;background:rgba(58,217,138,.12)}
.kanal-b .ki-hoert i{background:var(--gruen)}
.st-9 .b4{opacity:1;transform:none}
.ki-zwischen{max-width:24em;margin:58px auto 22px;text-align:center;font-size:clamp(1.35rem,2.6vw,1.9rem);font-weight:800}
.kacheln.ki-sechs{gap:16px}
@media (max-width:560px){
  .ki-zwischen{margin-top:44px}
}