/* ================================================================
   konfigurator-styles.css  -  Burger / Baguette / Pizza
   ================================================================
   VERSION: 2
   ABLAGEORT: /site/templates/styles/konfigurator-styles.css

   Wird nur auf der Konfigurator-Seite geladen (siehe _main.php,
   $rivaNeedsKonfigurator).

   ZUTATEN-OPTIK: ganz unten. Jede Zutaten-Kennung aus dem Backend
   (konf_zutaten) bekommt hier ihr Aussehen. Neue Kennung anlegen =
   hier eine Regel ergaenzen, sonst wird die Zutat neutral grau
   dargestellt.

   Datei enthaelt nur ASCII-Zeichen.
   ================================================================ */

.konf-wrap{padding:50px 0 80px;}
.konf-intro{font-size:16.5px;line-height:1.7;color:var(--text-muted);font-weight:300;max-width:640px;margin:0 0 26px;}

/* ---------- Gruppen-Reiter ---------- */
.konf-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:26px;border-bottom:1px solid var(--line);}
.konf-tab{
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:13px;
  letter-spacing:.04em;color:var(--text-muted);padding:11px 20px;
  border-bottom:2px solid transparent;transition:all .25s var(--ease);
}
.konf-tab:hover{color:var(--text);}
.konf-tab.active{color:var(--text);border-bottom-color:var(--accent);}

/* ---------- Dreispalter ---------- */
.konf-layout{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:26px;align-items:start;}
.konf-col-titel{
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:13px;
  letter-spacing:.04em;color:var(--accent-deep);margin-bottom:12px;
}
.konf-liste{display:flex;flex-direction:column;gap:6px;max-height:560px;overflow-y:auto;padding-right:4px;}

.konf-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface-alt);border:1px solid transparent;border-radius:3px;
  padding:11px 14px;cursor:pointer;transition:all .2s var(--ease);
}
.konf-item:hover{border-color:var(--accent-deep);}
.konf-item.active{border-color:var(--accent);background:rgba(212,169,127,.14);}
.ki-name{font-size:14.5px;font-weight:500;min-width:0;}
.ki-nr{font-size:11px;color:var(--text-muted);margin-right:5px;}
.ki-veg{color:#4C7A4A;margin-left:5px;font-size:11px;}
.ki-preis{font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;white-space:nowrap;}

.konf-kategorie{
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:11px;
  letter-spacing:.05em;color:var(--text-muted);margin:14px 0 4px;padding-top:10px;
  border-top:1px dotted var(--line);
}
.konf-kategorie:first-child{margin-top:0;padding-top:0;border-top:none;}

/* ---------- Buehne ---------- */
.konf-buehne{
  background:var(--surface-alt);border-radius:4px;min-height:340px;
  display:flex;align-items:center;justify-content:center;padding:26px;position:relative;
}
.konf-leer{font-size:14px;color:var(--text-muted);text-align:center;margin:0;}

/* ---------- Stapel (Burger / Baguette) ---------- */
.konf-stapel{display:flex;flex-direction:column-reverse;align-items:center;gap:2px;width:100%;}
.kf-layer{
  width:190px;border-radius:5px;flex:0 0 auto;
  animation:kfDrop .32s var(--bounce) both;
  box-shadow:0 1px 2px rgba(0,0,0,.14);
}
@keyframes kfDrop{from{opacity:0;transform:translateY(-16px) scale(.92);}to{opacity:1;transform:none;}}

/* ---------- Pizza (rund, von oben) ---------- */
.konf-pizza{display:flex;align-items:center;justify-content:center;width:100%;}
/* Ohne diese Regel wuerde display:flex das hidden-Attribut
   ueberschreiben - dann waeren Stapel UND Pizza gleichzeitig zu
   sehen. Gilt auch fuer den Leer-Hinweis darunter. */
.konf-pizza[hidden]{display:none;}
.konf-leer[hidden]{display:none;}
.pz-teig{
  position:relative;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle at 50% 45%, #E8C88A 0%, #DFB86E 70%, #C99A4C 100%);
  box-shadow:0 10px 26px rgba(41,46,58,.22);
}
.pz-rand{
  position:absolute;inset:0;border-radius:50%;
  border:14px solid #D9A860;box-shadow:inset 0 0 14px rgba(140,90,30,.25);
}
.pz-belag{position:absolute;inset:22px;border-radius:50%;overflow:hidden;}
.pz-stueck{
  position:absolute;border-radius:50%;
  animation:kfPop .3s var(--bounce) both;
}
@keyframes kfPop{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:scale(1);}}
/* Flaechige Belaege (Sauce, Kaese) decken die ganze Flaeche ab */
.pz-flaeche{position:absolute;inset:0;border-radius:50%;animation:kfPop .3s var(--bounce) both;}

/* ---------- Zusammenfassung ---------- */
.konf-summe{
  background:var(--navy);color:#fff;border-radius:4px;padding:18px 20px;margin-top:14px;
}
.ks-name{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:16px;}
.ks-preis{font-family:'Oswald',sans-serif;font-weight:700;font-size:30px;color:var(--accent);margin-top:2px;}
.ks-zutaten{font-size:12.5px;color:#C6CAD4;line-height:1.6;margin-top:8px;}

@media(max-width:980px){
  .konf-layout{grid-template-columns:1fr;}
  .konf-liste{max-height:none;}
  .konf-col-mitte{order:-1;}
}

/* ================================================================
   ZUTATEN-OPTIK
   ================================================================
   Links die Kennung aus dem Backend, rechts das Aussehen.
   Erste Gruppe = Stapel-Darstellung (Hoehe + Farbe),
   zweite Gruppe = Pizza-Belag (Farbe der Stuecke).
   ================================================================ */

/* --- Broetchen / Teig --- */
.kf-bunBottom{height:26px;background:linear-gradient(#E2AE6A,#D89A4F);border-radius:5px 5px 3px 3px;}
.kf-bunTop{height:44px;background:linear-gradient(#E8B571,#DDA457);border-radius:26px 26px 5px 5px;}
.kf-bagBottom{height:22px;background:linear-gradient(#E6C48F,#D9B073);border-radius:4px;width:230px;}
.kf-bagTop{height:34px;background:linear-gradient(#EACF9C,#DDBB7E);border-radius:18px 18px 4px 4px;width:230px;}

/* --- Fleisch --- */
.kf-patty{height:24px;background:linear-gradient(#6B4630,#4E3122);}
.kf-chicken{height:22px;background:linear-gradient(#D2A05A,#B5813F);}
.kf-falafel{height:22px;background:linear-gradient(#8A9A4F,#6E7C3C);}
.kf-hack{height:20px;background:linear-gradient(#7A4A32,#5C3624);}
.kf-bacon{height:11px;background:repeating-linear-gradient(90deg,#B5503A 0 12px,#E8CDBF 12px 20px);}
.kf-schinken{height:10px;background:#E7A9A2;}
.kf-serrano{height:10px;background:#C9736B;}
.kf-salami{height:11px;background:#B54A44;}
.kf-sucuk{height:11px;background:#93332E;}
.kf-thunfisch{height:12px;background:#D9C6A8;}
.kf-scampi{height:11px;background:#E89B75;}
.kf-garnelen{height:11px;background:#EFA98A;}
.kf-lachs{height:11px;background:#E8896B;}

/* --- Kaese --- */
.kf-cheese{height:9px;background:#EDBB4A;border-radius:2px;}
.kf-mozzarella{height:11px;background:#F4EEE0;}
.kf-hirtenkaese{height:11px;background:#F2EDE2;}
.kf-parmesan{height:6px;background:#EDE2C4;}
.kf-gorgonzola{height:10px;background:#EAE6D4;}
.kf-edamer{height:9px;background:#F0C86A;}
.kf-veganerkaese{height:9px;background:#E4D5A8;}

/* --- Gemuese --- */
.kf-lettuce{height:12px;background:#6FA24A;border-radius:8px;}
.kf-rucola{height:10px;background:#4E7A3A;border-radius:8px;}
.kf-spinat{height:10px;background:#3F6B33;border-radius:8px;}
.kf-tomato{height:10px;background:#C8402F;}
.kf-gurke{height:8px;background:#7FA65A;}
.kf-zwiebeln{height:8px;background:#C79A5E;}
.kf-zwiebelnRaw{height:8px;background:#B58CB0;}
.kf-jalapeno{height:7px;background:#5C8A3A;}
.kf-paprika{height:8px;background:#D65A3B;}
.kf-mais{height:7px;background:#E8C24A;}
.kf-champignons{height:9px;background:#DDD0B0;}
.kf-ananas{height:8px;background:#F0C94A;}
.kf-oliven{height:7px;background:#3A342A;}
.kf-knoblauch{height:6px;background:#EDE6D6;}
.kf-broccoli{height:10px;background:#4F7A3E;}
.kf-basilikum{height:7px;background:#3F7A3A;border-radius:8px;}
.kf-oregano{height:5px;background:#5E7A42;}

/* --- Saucen --- */
.kf-sauceRot{height:7px;background:#C0392B;border-radius:8px;}
.kf-sauceGelb{height:7px;background:#E8C55A;border-radius:8px;}
.kf-sauceGruen{height:7px;background:#6E9A4E;border-radius:8px;}
.kf-sauceHell{height:7px;background:#F0E6C8;border-radius:8px;}

/* --- Sonstiges --- */
.kf-egg{height:14px;background:radial-gradient(circle at 50% 50%, #F0C33C 0 22%, #FBF6E4 22% 100%);border-radius:50%;}
.kf-teig{display:none;}

/* --- Nicht hinterlegte Zutat: neutral, damit nichts unsichtbar bleibt --- */
.kf-unbekannt{height:9px;background:#B9B4AA;}