/* Empfehlungsprogramm: Kundenbereich und öffentliche Seite. */

.aff .kb-karte + .kb-karte,
.aff .kb-kacheln + .kb-karte { margin-top: 1.2rem; }
.aff .kb-kacheln { margin-top: 1.2rem; }

.aff-link { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 1.6rem; align-items: start; }
.aff-link__text { min-width: 0; }
.aff-ziel { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: .4rem 0 .8rem; font-size: .9rem; color: var(--text-2); }
.aff-ziel select { background: var(--bg-3); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-s); padding: .45rem .6rem; font: inherit; max-width: 100%; }
.aff-kopie { display: flex; gap: .6rem; }
.aff-kopie input { flex: 1 1 auto; min-width: 0; background: var(--bg-3); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-s); padding: .6rem .75rem; font: inherit; font-size: .92rem; }
.aff-kopie .dspdb-btn { flex: 0 0 auto; white-space: nowrap; }
.aff-code { margin: .8rem 0 .6rem; color: var(--text-2); }
.aff-code strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; color: var(--akzent-hell); font-size: 1.1rem; }
.aff-teilen { display: flex; flex-wrap: wrap; gap: .5rem; }
.aff-teilen__knopf {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-3); color: var(--text); font: inherit; font-size: .88rem; cursor: pointer;
}
.aff-teilen__knopf:hover { border-color: var(--akzent-dunkel); color: var(--text); }
.aff-teilen--wa { border-color: #1f6f43; }
.aff-teilen--tg { border-color: #1f5f8a; }
.aff-qr { margin: 0; text-align: center; }
.aff-qr [data-aff-qr] { background: #fff; border-radius: var(--radius-s); padding: 8px; width: 190px; height: 190px; }
.aff-qr [data-aff-qr] svg { width: 100%; height: 100%; display: block; }
.aff-qr figcaption { font-size: .82rem; margin-top: .5rem; }

.aff-stand__werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.aff-stand__werte > div { display: flex; flex-direction: column; gap: .15rem; }
.aff-stand__werte small { font-size: .55em; color: var(--text-2); font-family: var(--schrift); }
.aff-grau { color: var(--text-2); }
.aff-balken { height: 8px; border-radius: 99px; background: var(--bg-3); margin: 1.1rem 0 .6rem; overflow: hidden; }
.aff-balken span { display: block; height: 100%; background: linear-gradient(90deg, var(--akzent-dunkel), var(--akzent-hell)); border-radius: 99px; }

.aff-methode { border: 0; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.aff-methode legend { font-weight: 600; margin-bottom: .4rem; padding: 0; }
.aff-methode label, .aff-steuer label { display: inline-flex; gap: .5rem; align-items: center; font-weight: 400; }
.aff-steuer label { align-items: flex-start; }
.aff-steuer input { margin-top: .3rem; }

.aff-geworbene, .aff-antraege { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.aff-geworbene > li, .aff-antraege > li { border: 1px solid var(--line); border-radius: var(--radius-s); padding: .8rem 1rem; background: var(--bg-2); }
.aff-geworbene__kopf { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; }
.aff-geworbene__kopf .kb-status { margin-left: auto; }
.aff-checks { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .85rem; color: var(--text-3); }
.aff-checks li::before { content: "○"; margin-right: .35rem; }
.aff-checks li.is-ok { color: var(--gruen); }
.aff-checks li.is-ok::before { content: "✓"; }
.aff-verlauf { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .84rem; color: var(--text-3); }
.aff-minus { color: var(--rose); }
.aff-tabelle small { display: block; }
.aff-erklaerung ol { padding-left: 1.2rem; margin: 0 0 1rem; display: grid; gap: .5rem; }

@media (max-width: 760px) {
  .aff-link { grid-template-columns: 1fr; }
  .aff-qr { justify-self: center; }
  .aff-kopie { flex-direction: column; }
  .aff-stand__werte { grid-template-columns: 1fr 1fr; }
  .aff-stand__werte > div:last-child { grid-column: 1 / -1; }
}

/* Öffentliche Seite */
.pcn-aff-seite h1 { hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 480px) {
  .pcn-aff-seite h1 { font-size: clamp(1.8rem, 9vw, 2.6rem); }
}
.aff-seite .raster-3 .karte .aff-zahl { font-family: var(--display); font-size: 2.2rem; color: var(--akzent-hell); line-height: 1.1; display: block; margin-bottom: .4rem; }
.aff-rechnung { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .98rem; }
.aff-rechnung th, .aff-rechnung td { padding: .65rem .7rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.aff-rechnung td.num, .aff-rechnung th.num { text-align: right; white-space: nowrap; }
.aff-rechnung tfoot td { font-weight: 700; color: var(--akzent-hell); border-bottom: 0; }
.aff-rechnung-rahmen { overflow-x: auto; }
.aff-faq details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.aff-faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.aff-faq summary::-webkit-details-marker { display: none; }
.aff-faq summary::after { content: "+"; color: var(--akzent); font-size: 1.3rem; line-height: 1; }
.aff-faq details[open] summary::after { content: "–"; }
.aff-faq details p { margin: .7rem 0 0; color: var(--text-2); }
.aff-bedingungen ol { padding-left: 1.3rem; display: grid; gap: .6rem; color: var(--text-2); font-size: .95rem; }
.aff-bedingungen strong { color: var(--text); }
.aff-hinweis { border-left: 3px solid var(--akzent); padding: .8rem 1rem; background: var(--bg-2); border-radius: 0 var(--radius-s) var(--radius-s) 0; color: var(--text-2); }