/* Erweiterungen-Shop – zurückhaltend, übernimmt Schrift und Farben des Templates */
.shop {
  --shop-rand: var(--ui-color-border, rgba(127, 127, 127, .3));
  --shop-flaeche: var(--ui-color-surface, rgba(127, 127, 127, .06));
  --shop-gruen: #2f7d32;
  --shop-radius: var(--ui-radius, 12px);
}

.shop h1 { margin-bottom: .5rem; }

/* Übersicht */
.shop-karten {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.shop-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--shop-rand);
  border-radius: var(--shop-radius);
  overflow: hidden;
  background: var(--shop-flaeche);
}
.shop-karte__bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.shop-karte__text { padding: 1rem 1.25rem 0; flex: 1; }
.shop-karte__titel { font-size: 1.25rem; margin: 0 0 .5rem; }
.shop-gruppe + .shop-gruppe { margin-top: 2.5rem; }
.shop-gruppe__titel { font-size: 1.5rem; margin: 1.5rem 0 0; }
.shop-karte__titel a { color: inherit; text-decoration: none; }
.shop-karte__titel a::after { content: ""; position: absolute; inset: 0; } /* ganze Karte klickbar */
.shop-karte__titel a:focus-visible { outline: none; }
.shop-karte:has(a:focus-visible) { outline: 3px solid currentColor; outline-offset: 2px; }
.shop-karte__preis { padding: 0 1.25rem 1rem; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.shop-karte__preis strong { font-size: 1.25rem; }
.shop-karte__version { opacity: .7; font-size: .875rem; }

/* Produktseite */
.shop-produkt__lead { font-size: 1.15rem; max-width: 46rem; }
.shop-produkt__raster { display: grid; gap: 2rem; margin-top: 1.5rem; }
@media (min-width: 900px) {
  .shop-produkt__raster { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
  /* nicht „sticky“: mit den Pflichtangaben ist der Kaufkasten höher als viele Bildschirme */
}
.shop-produkt__bild { max-width: 100%; height: auto; border-radius: var(--shop-radius); margin-bottom: 1.5rem; }
.shop-kauf, .shop-box {
  border: 1px solid var(--shop-rand);
  border-radius: var(--shop-radius);
  padding: 1.25rem;
  background: var(--shop-flaeche);
}
.shop-kauf__preis { font-size: 2rem; font-weight: 700; margin: 0 0 .25rem; }
.shop-knopf { display: block; width: 100%; text-align: center; margin-top: .75rem; }
.shop-kauf__zustimmung { display: flex; gap: .6rem; align-items: flex-start; font-size: .875rem; margin-top: 1rem; }
.shop-kauf__zustimmung input { margin-top: .2rem; width: 1.15rem; height: 1.15rem; flex: none; }
.shop-kauf__test { font-size: .875rem; margin: .5rem 0 0; padding: .4rem .6rem; border-radius: 6px; background: rgba(240, 170, 0, .18); }
.shop-kauf__besitz { color: var(--shop-gruen); font-weight: 600; }
/* gedämpfte Textfarbe statt Deckkraft: „opacity“ hellte auch die Links auf (Kontrast unter 4,5:1) */
.shop-kauf__info { font-size: .875rem; margin: 1rem 0 0; color: var(--ui-color-text-muted, inherit); }
.shop-kauf__meldung:empty { display: none; }

.shop-versionen { margin-top: 2.5rem; }
.shop-versionen dt { font-weight: 700; margin-top: 1rem; }
.shop-versionen dt span { font-weight: 400; opacity: .7; margin-left: .5rem; font-size: .875rem; }
.shop-versionen dd { margin: .25rem 0 0; }

/* Konto */
.shop-konto .shop-box { margin-top: 1.5rem; }
.shop-box h2 { font-size: 1.25rem; margin-top: 0; }
.shop-schluessel__zeile { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.shop-schluessel code { font-size: 1.05rem; padding: .4rem .6rem; border-radius: 6px; background: rgba(127, 127, 127, .15); word-break: break-all; user-select: all; }
.shop-tabelle { overflow-x: auto; }
.shop-tabelle table { width: 100%; border-collapse: collapse; }
.shop-tabelle th, .shop-tabelle td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--shop-rand); vertical-align: top; }
.shop-status { display: inline-block; font-size: .8rem; padding: .1rem .5rem; border-radius: 999px; background: rgba(127, 127, 127, .18); margin-left: .25rem; }
.shop-status--an { background: rgba(47, 125, 50, .18); }
.shop-status--aus { background: rgba(200, 40, 40, .15); }
.shop-hinweis { font-size: .875rem; opacity: .8; }

/* Support */
.shop-ticket__info { opacity: .85; }
.shop-verlauf { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 1rem; }
.shop-nachricht { border: 1px solid var(--shop-rand); border-radius: var(--shop-radius); padding: 1rem 1.25rem; max-width: 48rem; }
.shop-nachricht--team { background: var(--shop-flaeche); margin-left: auto; border-left: 4px solid var(--shop-gruen); }
.shop-nachricht__kopf { display: flex; flex-wrap: wrap; gap: .25rem 1rem; justify-content: space-between; margin: 0 0 .5rem; }
.shop-nachricht__kopf span { opacity: .7; font-size: .875rem; }
.shop-nachricht__text { overflow-wrap: anywhere; }
.shop-nachricht__anhang { margin: .75rem 0 0; font-size: .9rem; }
.shop-formular { display: grid; gap: .4rem; max-width: 48rem; }
.shop-formular label { font-weight: 600; margin-top: .6rem; }
.shop-formular input[type=text], .shop-formular select, .shop-formular textarea { width: 100%; padding: .55rem .7rem; border: 1px solid var(--shop-rand); border-radius: 8px; font: inherit; background: transparent; color: inherit; }
.shop-formular .shop-hinweis { margin: 0; }
.shop-formular button { justify-self: start; margin-top: .75rem; }
.shop-ticket__schliessen { margin-top: 1rem; }

/* Anleitung auf der Produktseite */
/* Lesebreite (etwa 70–75 Zeichen) für Beschreibung und Anleitung */
.shop-produkt__inhalt :is(p, ul, ol, dl, h2, h3, h4) { max-width: 42rem; }
.shop-anleitung { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--shop-rand); scroll-margin-top: 6rem; }
.shop-anleitung h3 { margin-top: 1.75rem; }
.shop-anleitung li + li { margin-top: .35rem; }
.shop-anleitung code { padding: .1rem .35rem; border-radius: 4px; background: rgba(127, 127, 127, .15); font-size: .9em; overflow-wrap: anywhere; }

/* Pflichtangaben vor dem Kaufknopf */
.shop-pflicht { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--shop-rand); font-size: .875rem; }
.shop-pflicht__titel { font-size: 1rem; margin: 0 0 .5rem; }
.shop-pflicht dl { margin: 0; }
.shop-pflicht dt { font-weight: 700; margin-top: .5rem; }
.shop-pflicht dd { margin: .1rem 0 0; }
.shop-pflicht__links { margin: .75rem 0 0; }
.shop-preishinweis { margin-top: 2rem; font-size: .875rem; opacity: .8; }

/* Kündigen und Widerrufen ohne Anmeldung */
.shop-erklaerung { max-width: 48rem; }
.shop-formular input[type=email], .shop-formular input[type=date] { width: 100%; padding: .55rem .7rem; border: 1px solid var(--shop-rand); border-radius: 8px; font: inherit; background: transparent; color: inherit; }
.shop-formular fieldset { border: 0; padding: 0; margin: .6rem 0 0; display: grid; gap: .35rem; }
.shop-formular legend { font-weight: 600; padding: 0; margin-bottom: .25rem; }
.shop-formular fieldset label { font-weight: 400; margin-top: 0; display: flex; gap: .5rem; align-items: flex-start; }
.shop-formular fieldset input { margin-top: .3rem; }
.shop-falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.shop-eingang dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 1rem 0 0; }
.shop-eingang dt { font-weight: 700; }
.shop-eingang dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .shop-eingang dl { grid-template-columns: 1fr; } .shop-eingang dd { margin-bottom: .5rem; } }

/* Live-Demo (0.6.4) */
.shop-kauf__demo { margin: 1rem 0 0; }
.shop-kauf__demo .shop-knopf { margin-top: 0; }
.shop-kauf__demo-hinweis { display: block; margin-top: .4rem; font-size: .875rem; text-align: center; color: var(--ui-color-text-muted, inherit); }