/* Dratti-Dog Konfigurator. Baut auf den Variablen aus style.css auf. */

.konfig{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:1rem;align-items:start;
  --buehne-a:#ffffff;--buehne-b:#ebe5de;--feld:rgba(255,255,255,.72);--feld-rand:rgba(60,60,67,.16)}
@media (prefers-color-scheme:dark){.konfig{--buehne-a:#34302d;--buehne-b:#1d1b19;--feld:rgba(58,58,60,.6);--feld-rand:rgba(235,235,245,.18)}}

/* ---------- 3D-Bühne ---------- */
.buehne{position:sticky;top:92px;height:min(100vh - 116px,660px);min-height:420px;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,var(--buehne-a),var(--buehne-b));border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);
  transition:background .4s}
.konfig.nacht .buehne{background:linear-gradient(180deg,#1d2130,#0b0d14)}
.buehne canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab;opacity:0;transition:opacity .6s}
.buehne canvas.greift{cursor:grabbing}
.konfig[data-status=bereit] canvas{opacity:1}
.buehne-status{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:4.5rem 2rem;text-align:center;color:var(--label-2);font-size:.9375rem;pointer-events:none}
.konfig[data-status=bereit] .buehne-status{display:none}
.konfig[data-status=fehler] .lader{display:none}
.lader{width:44px;height:44px;border-radius:50%;border:4px solid var(--accent-tint);border-top-color:var(--accent);animation:k-dreh 1s linear infinite}
@keyframes k-dreh{to{transform:rotate(360deg)}}

.werkzeuge{position:absolute;top:10px;right:10px;left:10px;display:flex;justify-content:flex-end;gap:6px;pointer-events:none}
.wz{pointer-events:auto;flex:none;width:44px;height:44px;border-radius:50%;padding:0;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--glass-edge);background:var(--glass-strong);color:var(--label);
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);box-shadow:0 2px 10px rgba(40,20,0,.1);
  transition:background .2s,color .2s,transform .2s var(--ease)}
.wz:hover{transform:scale(1.07)}
.wz:focus-visible{border-radius:50%}
.wz svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wz svg.voll{fill:currentColor;stroke:none}
.wz[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:transparent}
.konfig:not([data-status=bereit]) .wz:not([data-aktion=zufall]),.konfig:not([data-status=bereit]) .ansichten{visibility:hidden}

.ansichten{position:absolute;bottom:10px;left:50%;translate:-50% 0;display:flex;padding:3px;border-radius:999px;max-width:calc(100% - 16px);
  border:1px solid var(--glass-edge);background:var(--glass-strong);
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);box-shadow:0 2px 10px rgba(40,20,0,.1)}
.ansichten button{min-width:44px;min-height:44px;padding:0 .7rem;border:0;border-radius:999px;background:transparent;color:var(--label);font:inherit;font-size:.875rem;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.ansichten button[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
.ansichten button:focus-visible{border-radius:999px}

/* ---------- Auswahl ---------- */
.panel{position:relative;border-radius:var(--r-lg);padding:1rem;
  background:var(--glass);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.35)}
.panel-hinweis{margin:0;color:var(--label-2)}
.tabs{scroll-margin-top:108px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}
.tabs button{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:0 .4rem;border:0;border-radius:999px;
  background:var(--feld);color:var(--label);font:inherit;font-size:.875rem;font-weight:600;cursor:pointer;transition:background .2s,color .2s;min-width:0}
.tabs .nr{flex:none;display:grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--accent-tint);color:var(--accent-text);font-size:.75rem}
.tabs button[aria-selected=true]{background:var(--accent);color:var(--on-accent)}
.tabs button[aria-selected=true] .nr{background:rgba(255,255,255,.25);color:inherit}
.tabs button:focus-visible{border-radius:999px}

.feld{padding-top:1.1rem;border-radius:var(--r-sm)}
.feld:focus-visible{outline-offset:6px}
.feld fieldset{border:0;margin:0 0 1.25rem;padding:0;min-width:0}
.feld legend,.feld-titel{padding:0;margin:0 0 .6rem;font-size:1rem;font-weight:700;letter-spacing:-.01em}
.info{margin:.6rem 0 0;font-size:.875rem;color:var(--label-2);line-height:1.45}

.wahl{position:relative;display:block;cursor:pointer}
/* Das echte Eingabefeld liegt unsichtbar über der ganzen Fläche (auch über dem Rahmen): große Tippfläche, Tastatur und Screenreader funktionieren normal */
.wahl input{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);margin:0;opacity:0;cursor:pointer}
.wahl.aus{opacity:.38}
.wahl.aus,.wahl.aus input{cursor:not-allowed}

.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.6rem}
.karte{display:grid;gap:.15rem;padding:.85rem 1rem;border-radius:var(--r-md);background:var(--feld);border:2px solid var(--feld-rand);transition:border-color .2s,background .2s,transform .2s var(--ease)}
.karte:hover{transform:translateY(-1px)}
.karte .titel{font-weight:700}
.karte .text{font-size:.875rem;color:var(--label-2);line-height:1.4}
.karte .preis{font-size:.875rem;font-weight:700;color:var(--accent-text);margin-top:.2rem}
.wahl:has(input:checked).karte,.wahl:has(input:checked).pille{border-color:var(--accent);background:var(--accent-tint)}
.wahl:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--r-md)}
.haken{padding-right:3rem}
.haken::after{content:"";position:absolute;top:.85rem;right:.85rem;width:1.5rem;height:1.5rem;border-radius:50%;border:2px solid var(--label-3);background:center/70% no-repeat;transition:background-color .2s,border-color .2s}
.haken:has(input:checked)::after{background-color:var(--accent);border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")}

.pillen{display:flex;flex-wrap:wrap;gap:.4rem}
.pille{display:grid;place-items:center;min-width:54px;min-height:46px;padding:0 .9rem;border-radius:999px;background:var(--feld);border:2px solid var(--feld-rand);font-weight:700;transition:border-color .2s,background .2s}

.felder{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:.7rem .5rem}
.feldwahl{display:grid;gap:.3rem;justify-items:center;text-align:center}
.muster{display:block;width:100%;max-width:84px;aspect-ratio:1;border-radius:18px;overflow:hidden;background:var(--farbe,#888);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 2px 6px rgba(40,20,0,.12);transition:transform .25s var(--ease),box-shadow .2s}
.muster canvas,.muster img{display:block;width:100%;height:100%;object-fit:cover}
.muster.metall{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),transparent 42%),linear-gradient(135deg,rgba(255,255,255,.25),rgba(0,0,0,.28)),var(--farbe);border-radius:50%}
.feldwahl:hover .muster{transform:scale(1.06)}
.feldwahl:has(input:checked) .muster{box-shadow:0 0 0 3px var(--solid),0 0 0 6px var(--accent)}
.feldwahl .name{font-size:.8125rem;line-height:1.2;color:var(--label-2);hyphens:auto;overflow-wrap:anywhere}
.feldwahl:has(input:checked) .name{color:var(--label);font-weight:700}
.konfig.eigener-stoff #feld-stoff .muster{opacity:.45}

.eigen{display:flex;flex-wrap:wrap;gap:.5rem}
.eigen .info{flex-basis:100%;margin-top:.2rem}

.eingabe{display:grid;gap:.35rem;margin-top:1rem;font-weight:600;font-size:.9375rem}
.eingabe input,.eingabe textarea{font:inherit;font-weight:400;color:var(--label);width:100%;min-height:44px;padding:.6rem .9rem;border:1px solid var(--feld-rand);border-radius:var(--r-sm);background:var(--feld);-webkit-appearance:none;appearance:none}
.eingabe input:focus,.eingabe textarea:focus{outline:3px solid var(--accent);outline-offset:0;border-color:transparent}
.eingabe ::placeholder{color:var(--label-3);opacity:1}

.auswahl{margin:0;display:grid;gap:0;border-radius:var(--r-md);background:var(--feld);padding:.3rem 1rem}
.auswahl div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--sep)}
.auswahl div:last-child{border-bottom:0}
.auswahl dt{color:var(--label-2);font-size:.875rem;flex:none}
.auswahl dd{margin:0;font-weight:600;text-align:right;font-size:.9375rem}
.posten{list-style:none;margin:1rem 0 0;padding:0;font-size:.9375rem}
.posten li{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;font-variant-numeric:tabular-nums}
.posten li span:last-child{white-space:nowrap}
.posten .gesamt{margin-top:.4rem;padding-top:.7rem;border-top:1px solid var(--sep);font-weight:700;font-size:1.0625rem}
.posten .klein{font-size:.8125rem;color:var(--label-2)}
.senden{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.5rem;margin-top:1.1rem}
.senden .btn{padding:0 1rem}

.panel-fuss{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--sep)}
.summe{margin:0;display:grid;line-height:1.15}
.summe span{font-size:.8125rem;color:var(--label-2);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.summe strong{font-size:1.625rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.toast{position:fixed;left:50%;bottom:max(1.25rem,env(safe-area-inset-bottom));z-index:40;translate:-50% 1rem;margin:0;padding:.75rem 1.2rem;max-width:calc(100vw - 2rem);border-radius:999px;
  background:#1d1d1f;color:#fff;font-size:.9375rem;font-weight:600;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.3);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,translate .3s var(--ease),visibility .25s}
.toast.da{opacity:1;visibility:visible;translate:-50% 0}

/* ---------- Schmale Displays: 3D-Ansicht bleibt oben stehen, Auswahl scrollt darunter ---------- */
@media (max-width:860px){
  .konfig{grid-template-columns:minmax(0,1fr)}
  .buehne{top:max(72px,env(safe-area-inset-top) + 60px);z-index:5;height:clamp(250px,42vh,400px);min-height:0}
  .nur-breit{display:none}
  .tabs{scroll-margin-top:calc(max(72px,env(safe-area-inset-top) + 60px) + clamp(250px,42vh,400px) + 28px)}
}
@media (max-width:400px){
  .ansichten button{padding:0 .45rem;font-size:.8125rem}
  .tabs button{font-size:.8125rem;gap:.3rem}
  .panel{padding:.75rem}
}
@media (forced-colors:active){
  .buehne,.panel,.karte,.pille,.wz,.ansichten{border:1px solid CanvasText}
  .wahl:has(input:checked){outline:3px solid Highlight}
  .wz[aria-pressed=true],.ansichten button[aria-pressed=true],.tabs button[aria-selected=true]{background:Highlight;color:HighlightText}
}