/* =============================================================================
   Partnerprogramm metalldetektoren.de – Stylesheet
   Farben: Navy #163e7c, Crimson #dc143c (kein Gelb)
   Mobile-first. Keine max-width auf Containern (Shop steuert die Breite).
   Kein calc() (der Shop-Kompressor entfernt Leerzeichen darin).
   ========================================================================== */

.aff-wrap { width: 100%; box-sizing: border-box; color: #1d2433; line-height: 1.5; padding-top: 18px; }
@media (min-width: 960px) { .aff-wrap { padding-top: 24px; } }
.aff-wrap *, .aff-wrap *::before, .aff-wrap *::after { box-sizing: border-box; }
.aff-wrap h1 { font-size: 1.6em; line-height: 1.2; color: #163e7c; margin: 0 0 6px 0; font-weight: 700; }
.aff-wrap h2 { font-size: 1.2em; color: #163e7c; margin: 0 0 12px 0; font-weight: 700; }
.aff-wrap h3 { font-size: 1.05em; color: #163e7c; margin: 0 0 8px 0; font-weight: 700; }
.aff-wrap p { margin: 0 0 12px 0; }
.aff-wrap a { color: #163e7c; }
.aff-wrap a:hover { color: #dc143c; }
.aff-lead { color: #4a5568; font-size: 1.02em; margin-bottom: 18px !important; }
.aff-muted { color: #6b7280; font-size: 0.9em; }
.aff-center { text-align: center; }
.aff-mt { margin-top: 18px; }

/* ---------- Kopfbereich / Navigation ---------- */
.aff-head { margin: 10px 0 18px 0; }
.aff-eyebrow { display: inline-block; font-size: 0.78em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #dc143c; margin-bottom: 4px; }
.aff-nav { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 10px 0; margin: 0 0 18px 0; border-bottom: 2px solid #e6ebf3; scrollbar-width: thin; }
.aff-nav a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: #f1f4f9; color: #163e7c !important; text-decoration: none !important; font-size: 0.9em; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.aff-nav a:hover { background: #e3e9f3; }
.aff-nav a.aff-active { background: #163e7c; color: #fff !important; }
.aff-nav a.aff-nav-logout { color: #dc143c !important; background: #fff; border-color: #f3c1cb; }
.aff-nav svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* ---------- Karten / Raster ---------- */
.aff-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.aff-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px; box-shadow: 0 1px 2px rgba(22, 62, 124, 0.06); }
.aff-card-navy { background: #163e7c; color: #fff; border-color: #163e7c; }
.aff-card-navy h2, .aff-card-navy h3, .aff-card-navy a { color: #fff; }
.aff-card-soft { background: #f6f8fc; }
.aff-card-accent { border-top: 4px solid #dc143c; }

@media (min-width: 640px) {
	.aff-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aff-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aff-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
	.aff-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.aff-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.aff-wrap h1 { font-size: 1.9em; }
}

/* ---------- Hero (Startseite Partnerprogramm) ---------- */
.aff-hero { border-radius: 14px; overflow: hidden; margin-bottom: 18px; background: #163e7c; }
.aff-hero img { display: block; width: 100%; height: auto; }
.aff-hero-text { padding: 18px; color: #fff; }
.aff-hero-text h1 { color: #fff; }
.aff-hero-text p { color: #dbe4f3; margin: 0; }
.aff-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.aff-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.12); color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 0.88em; font-weight: 600; }
.aff-badge strong { color: #fff; }
.aff-badge-red { background: #dc143c; }

/* ---------- Listen ---------- */
.aff-steps { list-style: none; counter-reset: affstep; margin: 0; padding: 0; }
.aff-steps li { counter-increment: affstep; position: relative; padding: 0 0 12px 42px; min-height: 30px; }
.aff-steps li::before { content: counter(affstep); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: #163e7c; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 0.9em; }
.aff-checks { list-style: none; margin: 0; padding: 0; }
.aff-checks li { position: relative; padding: 0 0 9px 28px; }
.aff-checks li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 14px; height: 8px; border-left: 3px solid #dc143c; border-bottom: 3px solid #dc143c; transform: rotate(-45deg); }

/* ---------- Kennzahlen ---------- */
.aff-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 960px) { .aff-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.aff-kpi { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; position: relative; }
.aff-kpi-label { font-size: 0.74em; hyphens: auto; -webkit-hyphens: auto; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding-right: 22px; display: block; }
.aff-kpi-value { font-size: 1.35em; font-weight: 700; color: #163e7c; margin-top: 4px; display: block; word-break: break-word; }
.aff-kpi-highlight { background: #163e7c; border-color: #163e7c; }
.aff-kpi-highlight .aff-kpi-label { color: #c7d4ea; }
.aff-kpi-highlight .aff-kpi-value { color: #fff; }
.aff-kpi-red .aff-kpi-value { color: #dc143c; }
.aff-help { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: #eef2f8; color: #163e7c !important; text-decoration: none !important; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }
.aff-kpi-highlight .aff-help { background: rgba(255, 255, 255, 0.18); color: #fff !important; }

/* ---------- Partnerlink-Box ---------- */
.aff-linkbox { display: flex; flex-direction: column; gap: 8px; }
.aff-linkbox-row { display: flex; gap: 8px; align-items: stretch; }
.aff-linkbox input[type="text"] { flex: 1 1 auto; min-width: 0; }

/* ---------- Formulare ---------- */
.aff-form-grid { display: grid; grid-template-columns: 1fr; gap: 12px 16px; }
@media (min-width: 640px) { .aff-form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aff-field { display: flex; flex-direction: column; gap: 4px; }
.aff-field-full { grid-column: 1 / -1; }
.aff-label { font-size: 0.88em; font-weight: 600; color: #374151; }
.aff-req { color: #dc143c; margin-left: 2px; }
.aff-hint { font-size: 0.8em; color: #6b7280; }
.aff-wrap input[type="text"], .aff-wrap input[type="email"], .aff-wrap input[type="tel"], .aff-wrap input[type="password"], .aff-wrap input[type="url"], .aff-wrap input[type="number"], .aff-wrap select, .aff-wrap textarea {
	width: 100% !important; padding: 10px 12px !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; background: #fff !important; font: inherit; font-size: 16px !important; color: #1d2433 !important; height: auto !important; margin: 0 !important; box-shadow: none !important;
}
.aff-wrap textarea { min-height: 110px; resize: vertical; font-family: Consolas, Menlo, monospace; font-size: 13px !important; }
.aff-wrap textarea.aff-textarea-text { font-family: inherit; font-size: 16px !important; min-height: 160px; }
.aff-wrap input:focus, .aff-wrap select:focus, .aff-wrap textarea:focus { outline: none; border-color: #163e7c !important; box-shadow: 0 0 0 3px rgba(22, 62, 124, 0.15) !important; }
.aff-wrap input[readonly], .aff-wrap textarea[readonly] { background: #f6f8fc !important; }
.aff-check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; }
.aff-check input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 20px; margin: 2px 0 0 0 !important; accent-color: #163e7c; }
.aff-check label { font-size: 0.92em; }
.aff-fieldset-title { display: flex; align-items: center; gap: 8px; font-size: 1em; font-weight: 700; color: #163e7c; margin: 0 0 12px 0; padding-bottom: 8px; border-bottom: 1px solid #e6ebf3; }
.aff-fieldset-title svg { width: 18px; height: 18px; color: #dc143c; }
.aff-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-top: 18px; }
.aff-actions-end { justify-content: flex-end; }

/* ---------- Buttons ---------- */
.aff-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px !important; border-radius: 8px !important; font: inherit; font-weight: 700 !important; font-size: 0.95em !important; text-decoration: none !important; cursor: pointer; border: 2px solid #163e7c !important; background: #163e7c !important; color: #fff !important; line-height: 1.2 !important; min-height: 44px; }
.aff-btn:hover { background: #0f2d5c !important; border-color: #0f2d5c !important; color: #fff !important; }
.aff-btn-red { background: #dc143c !important; border-color: #dc143c !important; }
.aff-btn-red:hover { background: #b51031 !important; border-color: #b51031 !important; }
.aff-btn-ghost { background: #fff !important; color: #163e7c !important; }
.aff-btn-ghost:hover { background: #f1f4f9 !important; color: #163e7c !important; }
.aff-btn-sm { padding: 7px 12px !important; min-height: 36px; font-size: 0.85em !important; }
.aff-btn-block { width: 100%; }
.aff-btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.aff-btn.aff-copied { background: #15803d !important; border-color: #15803d !important; color: #fff !important; }

/* ---------- Meldungen ---------- */
.aff-msg { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; margin: 0 0 16px 0; font-size: 0.95em; }
.aff-msg svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; }
.aff-msg-ok { background: #ecfdf3; color: #14532d; border: 1px solid #bbf7d0; }
.aff-msg-error { background: #fff1f3; color: #8a0f27; border: 1px solid #f9c6d0; }
.aff-msg-info { background: #eef3fb; color: #163e7c; border: 1px solid #cfdcf0; }
.aff-msg ul { margin: 0; padding-left: 18px; }
.aff-msg .messageStackError, .aff-msg .messageStackWarning { background: none !important; border: 0 !important; padding: 0 !important; color: inherit !important; }

/* ---------- Tabellen (auf dem Handy als Karten) ---------- */
.aff-table { width: 100%; border-collapse: collapse; font-size: 0.93em; }
.aff-table th { text-align: left; background: #163e7c; color: #fff; font-weight: 600; padding: 10px 12px; white-space: nowrap; }
.aff-table td { padding: 10px 12px; border-bottom: 1px solid #e6ebf3; vertical-align: top; }
.aff-table tr:nth-child(even) td { background: #f8fafd; }
.aff-table .aff-num { text-align: right; white-space: nowrap; }
.aff-table tfoot td { font-weight: 700; background: #eef3fb !important; color: #163e7c; }
@media (max-width: 639px) {
	.aff-table thead { display: none; }
	.aff-table, .aff-table tbody, .aff-table tr, .aff-table td, .aff-table tfoot { display: block; width: 100%; }
	.aff-table tr { border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 10px; background: #fff; overflow: hidden; }
	.aff-table tr:nth-child(even) td { background: #fff; }
	.aff-table td { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #f0f3f8; text-align: right; }
	.aff-table td:last-child { border-bottom: 0; }
	.aff-table td::before { content: attr(data-label); font-weight: 600; color: #6b7280; text-align: left; flex: 0 0 auto; }
	.aff-table .aff-num { text-align: right; }
	.aff-table td.aff-td-break { word-break: break-all; }
}
.aff-status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.82em; font-weight: 600; background: #eef2f8; color: #163e7c; }
.aff-status-ok { background: #ecfdf3; color: #166534; }
.aff-status-open { background: #fff7ed; color: #9a3412; }
.aff-empty { text-align: center; padding: 30px 16px; color: #6b7280; background: #f8fafd; border: 1px dashed #cbd5e1; border-radius: 12px; }
.aff-empty svg { width: 40px; height: 40px; color: #9fb0cc; display: block; margin: 0 auto 8px auto; }

/* ---------- Filterleiste ---------- */
.aff-filters { display: grid; grid-template-columns: 1fr; gap: 10px; background: #f6f8fc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; margin-bottom: 16px; }
@media (min-width: 640px) { .aff-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Banner ---------- */
.aff-tabs { display: flex; gap: 0; border: 2px solid #163e7c; border-radius: 10px; overflow: hidden; margin-bottom: 18px; }
.aff-tabs a { flex: 1 1 0; text-align: center; padding: 10px 8px; font-weight: 700; text-decoration: none !important; color: #163e7c !important; background: #fff; }
.aff-tabs a.aff-active { background: #163e7c; color: #fff !important; }
.aff-banner-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.aff-banner-card h4 { margin: 0; color: #163e7c; font-size: 1em; }
.aff-banner-preview { background: repeating-conic-gradient(#f3f5f9 0% 25%, #ffffff 0% 50%) 50% / 20px 20px; border: 1px solid #e6ebf3; border-radius: 8px; padding: 12px; text-align: center; overflow: hidden; }
.aff-banner-preview img { max-width: 100%; height: auto; }
.aff-banner-preview-text { background: #f6f8fc; text-align: left; }
.aff-code-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.85em; font-weight: 600; color: #374151; }
.aff-builder { display: flex; gap: 8px; flex-wrap: wrap; }
.aff-builder input { flex: 1 1 160px; }
.aff-helpimg { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #e2e8f0; display: block; margin-top: 10px; }

/* ---------- Status-Seiten ---------- */
.aff-done { text-align: center; padding: 30px 18px; }
.aff-done-icon { width: 64px; height: 64px; border-radius: 50%; background: #ecfdf3; color: #15803d; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px auto; }
.aff-done-icon svg { width: 34px; height: 34px; }
.aff-done-icon-red { background: #fff1f3; color: #dc143c; }
.aff-done .aff-actions { justify-content: center; }

/* ---------- Pagination ---------- */
.aff-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 0.88em; color: #6b7280; margin: 12px 0; }

/* Icons in Ueberschriften */
.aff-wrap h1 svg, .aff-wrap h2 svg, .aff-wrap h3 svg { width: 20px; height: 20px; vertical-align: -3px; }
.aff-wrap code { background: rgba(22, 62, 124, 0.08); padding: 1px 6px; border-radius: 4px; font-size: 0.92em; }
.aff-card-navy code { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* ---------- Teilen-Widget / QR ---------- */
.aff-share { display: flex; flex-direction: column; gap: 10px; }
.aff-card-navy .aff-share .aff-label { color: #dbe4f3; }
.aff-share-hint { font-size: 0.82em; margin: 0 !important; opacity: 0.85; }
.aff-share-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.aff-sbtn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: #fff; color: #163e7c !important; border: 1px solid #cfdcf0; font: inherit; font-size: 0.88em; font-weight: 600; text-decoration: none !important; cursor: pointer; line-height: 1.2; min-height: 38px; }
.aff-sbtn:hover { background: #eef3fb; }
.aff-sbtn svg { width: 17px; height: 17px; flex: 0 0 17px; }
.aff-sbtn-native { background: #dc143c; color: #fff !important; border-color: #dc143c; }
.aff-sbtn-native:hover { background: #b51031; }
.aff-sbtn-qr { border-color: #163e7c; }
.aff-sbtn[hidden] { display: none; }
.aff-qr { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; background: #fff; color: #1d2433; border-radius: 12px; padding: 14px; }
.aff-qr[hidden] { display: none; }
.aff-qr-img svg { display: block; width: 180px; height: 180px; }
.aff-qr-side { flex: 1 1 200px; min-width: 0; }
.aff-qr-side strong { color: #163e7c; }
.aff-qr-url { display: block; margin-top: 8px; word-break: break-all; }
.aff-card-navy .aff-qr .aff-muted { color: #6b7280; }

/* ---------- Kanal-Auswertung ---------- */
.aff-channel-bar { height: 6px; background: #e6ebf3; border-radius: 3px; overflow: hidden; margin-top: 4px; min-width: 60px; }
.aff-channel-bar span { display: block; height: 100%; background: #163e7c; }
.aff-channel-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.82em; font-weight: 600; background: #eef3fb; color: #163e7c; white-space: nowrap; }
.aff-channel-tag-none { background: #f3f4f6; color: #6b7280; }
.aff-scope-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; background: #eef3fb; border: 1px solid #cfdcf0; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }