/* =========================================================================
   Wunsch-Shirt — der Konfigurator

   Die Seite baut aus der Auswahl einen Zettel und einen mailto-Link.
   Es gibt hier KEINEN Warenkorb und KEINE Zahlung: der Preis unten wird
   nur angezeigt. Sobald das mal über die Kasse laufen soll, muss der
   Preis serverseitig gerechnet werden (siehe Kommentar in konfigurator.js).

   ===== WO SITZT DER DRUCK AUF DEM SHIRT? ================================
   Die vier Werte unten sind in Prozent der Bildkante. Wenn der Druck zu
   hoch, zu tief oder zu gross sitzt, hier schrauben - sonst nirgends.
   ========================================================================= */

.konf {
  /* Vorgabe, falls ein Motiv in konfigurator.js keine eigenen Zahlen hat.
     Die echten Werte stehen dort Motiv fuer Motiv und sind an den
     Shop-Mockups abgemessen: ein Druck ist dort rund 53 % so breit wie
     das Shirt. Mit einem Einheitswert sahen die Drucke zu klein aus. */
  --druck-breite: 52%;   /* Breite des Motivs, bezogen auf das Shirtbild */
  --druck-mitte-x: 50%;  /* Mitte des Motivs von links */
  --druck-mitte-y: 45%;  /* Mitte des Motivs von oben */
  --buehne-hell: #d9d7e2;

  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 58rem) {
  .konf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ------------------------------------------------------------- Vorschau */

/* Die Seite ist fast schwarz. Ein schwarzes Shirt waere darauf nicht zu
   sehen, deshalb steht es auf einer hellen Flaeche.
   ---> Soll die Buehne dunkler werden: --buehne-hell oben aendern. */
.konf__buehne {
  position: relative;
  border-radius: 1rem;
  border: var(--rand);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 18%, #fff 0%, var(--buehne-hell) 58%, #b9b6c6 100%);
  aspect-ratio: 1;
}

.konf__shirt,
.konf__druck {
  position: absolute;
  display: block;
  pointer-events: none;
}

.konf__shirt {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.konf__druck {
  width: var(--druck-breite);
  left: var(--druck-mitte-x);
  top: var(--druck-mitte-y);
  translate: -50% -50%;
  height: auto;
  filter: drop-shadow(0 .4rem .8rem rgb(0 0 0 / .16));
}

/* Nichts gewaehlt: Platzhaltertext statt leerer Flaeche */
.konf__leer {
  position: absolute;
  inset: auto 1rem 1rem;
  text-align: center;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #4b4857;
}

/* Umschalter vorne/hinten direkt unter der Buehne */
.konf__seiten {
  display: flex;
  gap: .5rem;
  margin-top: .75rem;
}
.konf__seiten button {
  flex: 1;
  padding: .6rem .5rem;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: var(--rand);
  border-radius: .55rem;
  cursor: pointer;
  transition: color 160ms, border-color 160ms, background 160ms;
}
.konf__seiten button[aria-pressed="true"] {
  color: #fff;
  border-color: var(--iris);
  background: rgb(229 20 63 / .14);
}
.konf__seiten button .konf__punkt {
  display: inline-block;
  width: .4rem; height: .4rem;
  margin-left: .4rem;
  border-radius: 50%;
  background: var(--iris);
  vertical-align: middle;
}

/* ------------------------------------------------------------ Steuerung */

.konf__feld { margin-bottom: 1.6rem; }

.konf__frage {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .7rem;
}

.konf__reihe {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.konf__reihe button {
  padding: .55rem .95rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--muted);
  background: transparent;
  border: var(--rand);
  border-radius: .55rem;
  cursor: pointer;
  transition: color 160ms, border-color 160ms, background 160ms;
}
.konf__reihe button:hover { color: #fff; border-color: rgb(255 255 255 / .34); }
.konf__reihe button[aria-pressed="true"] {
  color: #fff;
  border-color: var(--iris);
  background: rgb(229 20 63 / .16);
}

/* Motive als kleine Kacheln mit Bild */
.konf__motive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr));
  gap: .6rem;
}
.konf__motiv {
  padding: .45rem;
  background: transparent;
  border: var(--rand);
  border-radius: .7rem;
  cursor: pointer;
  text-align: center;
  transition: border-color 160ms, background 160ms;
}
.konf__motiv:hover { border-color: rgb(255 255 255 / .34); }
.konf__motiv[aria-pressed="true"] {
  border-color: var(--iris);
  background: rgb(229 20 63 / .14);
}
.konf__motiv img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  /* Die Motive sind fuer ihre Shirtfarbe gezeichnet. Auf der dunklen Seite
     waeren die schwarzen nicht zu sehen, deshalb liegt hinter jeder Kachel
     eine helle Flaeche, wenn das Motiv fuer ein weisses Shirt ist. */
  border-radius: .4rem;
}
.konf__motiv--hell img { background: var(--buehne-hell); }
/* Die Kachel "Ohne Druck" zeigt das nackte Shirt. Ein schwarzes Shirt auf
   der dunklen Seite waere darauf nicht zu erkennen, deshalb bekommt diese
   eine Kachel IMMER die helle Flaeche - auch bei schwarz. */
.konf__motiv--leer img { background: var(--buehne-hell); }
.konf__motiv span {
  display: block;
  margin-top: .35rem;
  min-height: 2.1em;          /* zwei Zeilen Platz, damit nichts springt */
  font-family: var(--mono);
  font-size: .56rem;
  line-height: 1.25;
  letter-spacing: .06em;
  color: var(--muted);
  /* Lange Namen wie "Winter in Berlin" brechen um, statt abgeschnitten
     zu werden. */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.konf__motiv[aria-pressed="true"] span { color: #fff; }

/* ---------------------------------------------------------- Zettel unten */

.konf__zettel {
  margin-top: 2rem;
  padding: 1.1rem 1.2rem;
  border: var(--rand);
  border-radius: .9rem;
  background: rgb(255 255 255 / .03);
}

.konf__zeile {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .32rem 0;
  font-size: .92rem;
}
.konf__zeile span:first-child { color: var(--muted); }

.konf__summe {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: var(--rand);
  font-family: var(--display);
  font-size: 1.35rem;
}

.konf__klein {
  margin: .9rem 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted);
}

.konf__knopf { margin-top: 1.1rem; width: 100%; }
.konf__knopf[aria-disabled="true"] { opacity: .45; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .konf__reihe button,
  .konf__motiv,
  .konf__seiten button { transition: none; }
}