/* DaheimGutschein - Akzeptanzstellen (Kacheln, Detailseite) und Saldoabfrage.
   --dg-akzent kommt je Herausgeber aus der Plattform (Primaerfarbe).
   .dg-breit bricht aus der Inhaltsspalte des Themes aus - die Liste braucht Platz. */
.dg-liste, .dg-saldo, .dg-detail { --dg-akzent: #1B2A49; --dg-linie: #E6E9EF; --dg-grau: #6B7280; --dg-hell: #F5F7FB; --dg-ok: #1E5B38; --dg-radius: 20px; }
.dg-breit { position: relative; left: 50%; transform: translateX(-50%); width: min(1200px, calc(100vw - 40px)); max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.dg-liste *, .dg-detail *, .dg-saldo * { box-sizing: border-box; }

/* ---------- Filter ---------- */
.dg-filter { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 28px; }
.dg-filter-zeile { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.dg-suche-feld { position: relative; flex: 1 1 280px; }
.dg-suche-feld svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--dg-grau); pointer-events: none; }
.dg-suche { width: 100%; padding: 14px 18px 14px 46px; border: 1px solid var(--dg-linie); border-radius: 999px; font-size: 1rem; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.dg-suche:focus { outline: none; border-color: var(--dg-akzent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dg-akzent) 15%, transparent); }
.dg-arten { display: inline-flex; padding: 4px; background: var(--dg-hell); border-radius: 999px; gap: 2px; }
.dg-art { border: 0; background: transparent; padding: 9px 16px; border-radius: 999px; cursor: pointer; font-size: .92rem; font-weight: 500; color: inherit; transition: background .15s, color .15s; }
.dg-art span, .dg-kat span { opacity: .55; margin-left: 5px; font-size: .85em; font-variant-numeric: tabular-nums; }
.dg-art.aktiv { background: #fff; color: var(--dg-akzent); box-shadow: 0 1px 3px rgba(16,24,40,.12); font-weight: 600; }
.dg-kategorien { display: flex; flex-wrap: wrap; gap: 8px; }
.dg-kat { border: 1px solid var(--dg-linie); background: #fff; border-radius: 999px; padding: 7px 14px; cursor: pointer; font-size: .9rem; color: inherit; transition: all .15s; }
.dg-kat:hover { border-color: var(--dg-akzent); }
.dg-kat.aktiv { background: var(--dg-akzent); border-color: var(--dg-akzent); color: #fff; }
.dg-kat.aktiv span { opacity: .75; }

/* ---------- Kacheln ---------- */
.dg-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; }
.dg-kacheln-klein { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.dg-kachel { display: block; border-radius: var(--dg-radius); overflow: hidden; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 0 0 1px var(--dg-linie); transition: transform .2s ease, box-shadow .2s ease; }
.dg-kachel:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -12px rgba(16,24,40,.25), 0 0 0 1px var(--dg-linie); text-decoration: none; color: inherit; }
.dg-kachel[hidden] { display: none; }
.dg-kachel-bild { position: relative; aspect-ratio: 5 / 3; background: var(--dg-akzent) center / cover no-repeat; }
.dg-kachel-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.35) 100%); }
.dg-kachel-klein .dg-kachel-bild { aspect-ratio: 3 / 1; }
.dg-kachel-kat { position: absolute; z-index: 1; top: 14px; right: 14px; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(6px); }
.dg-kachel-slogan { position: absolute; z-index: 1; left: 18px; top: 14px; color: #fff; font-size: .9rem; font-weight: 500; opacity: .9; text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.dg-kachel-logo { position: absolute; z-index: 2; left: 20px; bottom: -28px; width: 96px; height: 72px; background: #fff; border-radius: 14px; box-shadow: 0 6px 18px rgba(16,24,40,.18); display: flex; align-items: center; justify-content: center; padding: 8px; }
.dg-kachel-klein .dg-kachel-logo { width: 64px; height: 48px; bottom: -20px; left: 14px; border-radius: 10px; }
.dg-kachel-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.dg-kachel-initial { font-size: 1.8rem; font-weight: 700; color: var(--dg-akzent); }
.dg-kachel-text { padding: 40px 20px 20px; }
.dg-kachel-klein .dg-kachel-text { padding: 28px 14px 14px; }
.dg-kachel-name { display: block; font-weight: 600; font-size: 1.2rem; line-height: 1.25; letter-spacing: -.01em; }
.dg-kachel-klein .dg-kachel-name { font-size: 1rem; }
.dg-kachel-ort { display: block; font-size: .92rem; color: var(--dg-grau); margin-top: 4px; }
.dg-kachel-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.dg-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--dg-hell); color: var(--dg-akzent); }
.dg-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.dg-tag-auf { background: #E8F5EE; color: var(--dg-ok); }
.dg-stand, .dg-leer, .dg-hinweis { font-size: .9rem; color: var(--dg-grau); margin-top: 24px; }
.dg-stand a { color: var(--dg-akzent); font-weight: 600; }

/* ---------- Detailseite ---------- */
.dg-zurueck { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: .95rem; font-weight: 500; color: var(--dg-akzent); text-decoration: none; }
.dg-zurueck:hover { text-decoration: underline; }
.dg-detail-kopf { border-radius: var(--dg-radius); background: var(--dg-akzent) center / cover no-repeat; min-height: 340px; position: relative; overflow: visible; }
.dg-detail-kopf::before { content: ""; position: absolute; inset: 0; border-radius: var(--dg-radius); background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%); }
.dg-detail-kopf .dg-kachel-slogan { top: 20px; left: 28px; font-size: 1rem; }
.dg-detail-titel { position: absolute; left: 32px; right: 32px; bottom: -36px; display: flex; align-items: flex-end; gap: 24px; }
.dg-detail-logo { position: static; width: 150px; height: 112px; flex-shrink: 0; border-radius: 18px; padding: 12px; box-shadow: 0 12px 30px rgba(16,24,40,.25); }
.dg-detail-titel > div { padding-bottom: 48px; color: #fff; }
.dg-detail-titel .dg-kachel-kat { position: static; display: inline-block; margin-bottom: 10px; }
.dg-detail-titel h2 { margin: 0; color: #fff; font-size: 2.4rem; line-height: 1.1; letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.dg-detail-firma { opacity: .85; font-size: 1rem; margin-top: 6px; }
.dg-detail-spalten { display: grid; grid-template-columns: 3fr 2fr; gap: 28px; margin-top: 60px; }
.dg-detail-info { border-radius: var(--dg-radius); padding: 28px 30px; background: #fff; box-shadow: 0 0 0 1px var(--dg-linie); }
.dg-detail-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.dg-detail-tags .dg-tag { font-size: .85rem; padding: 6px 12px; }
.dg-detail-daten { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; font-size: 1.05rem; }
.dg-detail-daten dt { color: var(--dg-grau); font-weight: 500; }
.dg-detail-daten dd { margin: 0; }
.dg-detail-daten a { color: var(--dg-akzent); font-weight: 500; }
.dg-detail-text { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--dg-linie); font-size: 1.05rem; line-height: 1.6; }
.dg-detail-text p:last-child { margin-bottom: 0; }
.dg-detail-hinweis { margin: 18px 0 0; font-size: .9rem; color: var(--dg-grau); }
.dg-detail-karte { display: flex; flex-direction: column; gap: 14px; }
.dg-detail-karte iframe { width: 100%; flex: 1; min-height: 320px; border: 0; border-radius: var(--dg-radius); display: block; box-shadow: 0 0 0 1px var(--dg-linie); }
.dg-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 999px; background: var(--dg-akzent); color: #fff !important; font-weight: 600; text-decoration: none !important; font-size: 1rem; transition: filter .15s; }
.dg-knopf:hover { filter: brightness(1.1); }
.dg-knopf-hell { background: #fff; color: var(--dg-akzent) !important; box-shadow: 0 0 0 1px var(--dg-linie), 0 1px 2px rgba(16,24,40,.04); }
.dg-knopf-hell:hover { filter: none; box-shadow: 0 0 0 1px var(--dg-akzent); }
.dg-pdf { padding: 11px 18px; font-size: .92rem; margin-left: auto; }
.dg-aehnlich-titel { margin: 44px 0 16px; font-size: 1.35rem; letter-spacing: -.01em; }

/* ---------- Saldo ---------- */
.dg-saldo { max-width: 480px; margin: 0; }
.dg-saldo label { display: block; font-size: .85rem; font-weight: 600; color: var(--dg-grau); margin: 12px 0 6px; }
.dg-saldo input { width: 100%; padding: 13px 16px; border: 1px solid var(--dg-linie); border-radius: 12px; font-size: 1.1rem; }
.dg-saldo input:focus { outline: none; border-color: var(--dg-akzent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dg-akzent) 15%, transparent); }
.dg-saldo button { margin-top: 16px; padding: 13px 22px; border: 0; border-radius: 999px; background: var(--dg-akzent); color: #fff; font-weight: 600; cursor: pointer; font-size: 1rem; }
.dg-saldo-hinweis { font-size: .85rem; color: var(--dg-grau); margin-top: 12px; }
.dg-fehler { color: #B42318; font-weight: 600; margin-top: 10px; }
.dg-saldo-ergebnis { border-radius: var(--dg-radius); padding: 24px; background: #fff; box-shadow: 0 0 0 1px var(--dg-linie); }
.dg-saldo-nummer { font-size: .88rem; color: var(--dg-grau); }
.dg-saldo-betrag { font-size: 2.6rem; font-weight: 700; letter-spacing: -.02em; margin: 2px 0; color: var(--dg-akzent); }
.dg-saldo-verfall { font-size: .9rem; color: var(--dg-grau); margin-bottom: 14px; }
.dg-saldo-liste { width: 100%; border-collapse: collapse; font-size: .92rem; }
.dg-saldo-liste td { padding: 8px 0; border-top: 1px solid var(--dg-linie); vertical-align: top; }
.dg-betrag { text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dg-plus { color: var(--dg-ok); }
.dg-storniert td { color: var(--dg-grau); text-decoration: line-through; }
.dg-leise { color: var(--dg-grau); font-size: .84rem; }
.dg-saldo-zurueck { background: #fff !important; color: var(--dg-akzent) !important; box-shadow: 0 0 0 1px var(--dg-linie); }

/* ---------- Shop: Produktseite ---------- */
.dg-produkt { --dg-akzent: #1B2A49; --dg-linie: #E6E9EF; --dg-grau: #6B7280; --dg-hell: #F5F7FB; margin: 0 0 18px; }
.dg-produkt .dg-feld { margin-bottom: 14px; }
.dg-produkt label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.dg-produkt input[type=text], .dg-produkt input[type=password], .dg-produkt textarea { width: 100%; max-width: 420px; padding: 11px 14px; border: 1px solid var(--dg-linie); border-radius: 12px; font-size: 1rem; }
.dg-produkt .dg-feld-klein input { max-width: 140px; }
.dg-betraege { display: flex; flex-wrap: wrap; gap: 8px; }
.dg-betrag-wahl { position: relative; margin: 0 !important; font-weight: 500 !important; }
.dg-betrag-wahl input { position: absolute; opacity: 0; width: 0; height: 0; }
.dg-betrag-wahl span { display: inline-block; padding: 10px 18px; border: 1px solid var(--dg-linie); border-radius: 999px; background: #fff; cursor: pointer; font-size: 1rem; transition: all .15s; }
.dg-betrag-wahl input:checked + span { background: var(--dg-akzent); border-color: var(--dg-akzent); color: #fff; font-weight: 600; }
.dg-betrag-wahl input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dg-akzent) 25%, transparent); }
.dg-frei { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.dg-frei[hidden], .dg-leer[hidden], .dg-fehler[hidden], .dg-saldo-ergebnis[hidden], .dg-saldo-form[hidden] { display: none !important; }
.dg-frei input { max-width: 140px !important; }
.dg-widmung { border: 1px solid var(--dg-linie); border-radius: 12px; padding: 12px 16px; margin: 6px 0 14px; }
.dg-widmung summary { cursor: pointer; font-weight: 600; }
.dg-widmung .dg-feld:first-of-type { margin-top: 12px; }
.dg-produkt .dg-leise { font-size: .85rem; color: var(--dg-grau); margin: 4px 0 12px; }
.dg-ab { font-weight: 600; }
.dg-bestellung { margin-top: 6px; }
.dg-bestellung .dg-leise { margin: 4px 0; font-size: .85rem; color: #6B7280; }
.dg-neuversand { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0 10px; }
.dg-neuversand input[type=email] { padding: 8px 12px; border: 1px solid #E6E9EF; border-radius: 10px; font-size: .9rem; min-width: 240px; }
.dg-knopf-klein { padding: 8px 14px; font-size: .9rem; }

@media (max-width: 900px) {
  .dg-detail-spalten { grid-template-columns: 1fr; }
  .dg-detail-karte iframe { min-height: 280px; }
}
@media (max-width: 640px) {
  .dg-breit { width: calc(100vw - 32px); }
  .dg-kacheln { grid-template-columns: 1fr; gap: 20px; }
  .dg-detail-kopf { min-height: 240px; }
  .dg-detail-titel { left: 16px; right: 16px; bottom: -24px; gap: 14px; }
  .dg-detail-logo { width: 96px; height: 72px; padding: 8px; border-radius: 14px; }
  .dg-detail-titel > div { padding-bottom: 32px; }
  .dg-detail-titel h2 { font-size: 1.5rem; }
  .dg-detail-spalten { margin-top: 44px; }
  .dg-detail-info { padding: 20px; }
  .dg-detail-daten { grid-template-columns: 1fr; gap: 4px; }
  .dg-detail-daten dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; margin-top: 8px; }
  .dg-arten { width: 100%; }
  .dg-art { flex: 1; text-align: center; padding: 9px 6px; }
  .dg-pdf { margin-left: 0; width: 100%; }
}