/* Silbermine-App – Grundlook nach dem Design „Die Silbermine-App“ (dunkel, Gold) */
@font-face { font-family: 'Archivo'; src: url('../fonts/archivo.woff') format('woff'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('../fonts/geist.woff') format('woff'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('../fonts/geist-mono.woff') format('woff'); font-weight: 100 900; font-display: swap; }

/*
 * Farben nur über Tokens. Drei App-Designs: Dunkel (Standard, :root), Grube und Hell
 * (html[data-ap-design="grube"|"hell"], gesetzt in silbermine-core/includes/app-b.php).
 * --ap-gold = Gold als Fläche, --ap-gold-t = Gold als Schrift (auf Hell dunkler für Kontrast),
 * --ap-on-gold = Schrift auf Gold/Grün/Rot-Flächen.
 */
:root {
	--ap-bg: #070D17;
	--ap-card: #0E1624;
	--ap-card2: #141F33;
	--ap-line: #1C2840;
	--ap-line2: #26344F;
	--ap-text: #F2F4F8;
	--ap-soft: #C9D3E1;
	--ap-muted: #93A0B5;
	--ap-ph: #64748B;
	--ap-gold: #E3B341;
	--ap-gold2: #D9A441;
	--ap-gold-t: #E3B341;
	--ap-gold2-t: #D9A441;
	--ap-on-gold: #070D17;
	--ap-red: #DC2626;
	--ap-red2: #FF5A45;
	--ap-red-t: #FCA5A5;
	--ap-red2-t: #FF8A7A;
	--ap-green: #22C55E;
	--ap-green-t: #22C55E;
	--ap-ok-t: #86EFAC;
	--ap-ok-t2: #4ADE80;
	--ap-blue: #38BDF8;
	--ap-blue-t: #7DD3FC;
	--ap-slate: #475569;
	--ap-dash: #475569;
	--ap-dash2: #64748B;
	--ap-hi: #1A2540;
	--ap-card-grad: linear-gradient(135deg, var(--ap-hi), var(--ap-card));
	--ap-fsdl: linear-gradient(135deg, #8A5A12, #D9A441);
	--ap-fsdl-line: #B8860B;
	--ap-fsdl-tint: rgba(138,90,18,.40);
	--ap-stripes: repeating-linear-gradient(135deg, var(--ap-card) 0 10px, #111A2B 10px 20px);
	--ap-sunk: rgba(7,13,23,.5);
	--ap-glass: rgba(28,40,64,.92);
	--ap-nav-bg: rgba(14,22,36,.94);
	--ap-nav-on-bg: var(--ap-gold);
	--ap-nav-on-fg: #070D17;
	--ap-shadow: none;
	--ap-shadow-lg: 0 10px 30px rgba(0,0,0,.45);
	--ap-nav-shadow: none;
	--ap-plaque: transparent;
	--ap-head: 'Archivo', 'Arial Narrow', sans-serif;
	--ap-mono: 'Geist Mono', ui-monospace, monospace;
	color-scheme: dark;
}
html.ap-html[data-ap-design="grube"] {
	--ap-bg: #0D0B08; --ap-card: #17140F; --ap-card2: #211C15; --ap-line: #2E271D; --ap-line2: #3A3125;
	--ap-text: #F5EFE3; --ap-soft: #D8CFBE; --ap-muted: #A89F8C; --ap-ph: #7A705F;
	--ap-hi: #2A2216; --ap-dash: #5C5244; --ap-dash2: #6E6252; --ap-slate: #5C5244;
	--ap-stripes: repeating-linear-gradient(135deg, var(--ap-card) 0 10px, #1C1812 10px 20px);
	--ap-sunk: rgba(13,11,8,.5); --ap-glass: rgba(33,28,21,.94); --ap-nav-bg: rgba(23,20,15,.94);
	--ap-nav-on-fg: #0D0B08; --ap-on-gold: #0D0B08;
}
html.ap-html[data-ap-design="hell"] {
	--ap-bg: #F7F6F2; --ap-card: #FFFFFF; --ap-card2: #F1EFE8; --ap-line: #E5E1D6; --ap-line2: #D9D5CA;
	--ap-text: #0B1626; --ap-soft: #334155; --ap-muted: #5A6577; --ap-ph: #8A93A3;
	--ap-gold-t: #8A6410; --ap-gold2-t: #8A6410; --ap-on-gold: #0B1626;
	--ap-red-t: #B91C1C; --ap-red2-t: #B8321F; --ap-green-t: #166534; --ap-ok-t: #166534; --ap-ok-t2: #166534; --ap-blue-t: #0369A1;
	--ap-dash: #C9C3B4; --ap-dash2: #C9C3B4; --ap-slate: #64748B;
	--ap-hi: #FFF4D9; --ap-card-grad: linear-gradient(135deg, #FFF4D9, #FFFFFF 70%);
	--ap-fsdl-tint: rgba(217,164,65,.22);
	--ap-stripes: repeating-linear-gradient(135deg, #FFFFFF 0 10px, #F4F2EC 10px 20px);
	--ap-sunk: #F7F6F2; --ap-glass: rgba(255,255,255,.97);
	--ap-nav-bg: rgba(255,255,255,.95); --ap-nav-on-bg: #0B1626; --ap-nav-on-fg: #FFFFFF;
	--ap-shadow: 0 1px 2px rgba(11,22,38,.04), 0 6px 18px -12px rgba(11,22,38,.18);
	--ap-shadow-lg: 0 10px 30px -14px rgba(11,22,38,.35);
	--ap-nav-shadow: 0 10px 30px -14px rgba(11,22,38,.3);
	--ap-plaque: #0B1626;
	color-scheme: light;
}
html.ap-html, .ap-body { margin: 0; background: var(--ap-bg); }
.ap-body { color: var(--ap-text); font-family: 'Geist', system-ui, sans-serif; font-size: 15px; line-height: 1.4; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
.ap-body *, .ap-body *::before, .ap-body *::after { box-sizing: border-box; }
.ap { min-height: 100vh; min-height: 100dvh; max-width: 520px; margin: 0 auto; position: relative; background: var(--ap-bg); }
.ap a { color: var(--ap-gold-t); }
.ap a:hover { color: var(--ap-text); }
:where(.ap) button { font: inherit; }
.ap :focus-visible { outline: 2px solid var(--ap-gold-t); outline-offset: 2px; }
#wpadminbar { display: none !important; }
html.ap-html { margin-top: 0 !important; }

/* Kopf */
.ap-top { display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top, 0px) + 22px) 20px 14px; }
.ap-top__txt { flex: 1; min-width: 0; }
.ap-kick { font-family: var(--ap-mono); font-size: 11px; letter-spacing: .04em; color: var(--ap-gold-t); text-transform: uppercase; }
.ap-h1 { font-family: var(--ap-head); font-stretch: 125%; font-weight: 900; font-size: 26px; line-height: 1.05; margin: 4px 0 0; color: var(--ap-text); }
.ap-h2 { font-family: var(--ap-head); font-stretch: 125%; font-weight: 900; font-size: 20px; line-height: 1.1; margin: 0; }
.ap-iconbtn { position: relative; width: 44px; height: 44px; flex: none; border-radius: 14px; border: 1px solid var(--ap-line); background: var(--ap-card); color: var(--ap-text) !important; display: flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; }
.ap-iconbtn .ap-dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--ap-red2); border: 2px solid var(--ap-card); }

/* Inhalt */
.ap-main { padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 120px); display: flex; flex-direction: column; gap: 12px; }
.ap-card { background: var(--ap-card); border: 1px solid var(--ap-line); border-radius: 22px; padding: 14px; box-shadow: var(--ap-shadow); }
.ap-card--list { padding: 6px 14px; }
.ap-sec { font-family: var(--ap-mono); font-size: 11px; letter-spacing: .04em; color: var(--ap-muted); text-transform: uppercase; margin: 6px 2px -2px; }
.ap-muted { color: var(--ap-muted); }
.ap-soft { color: var(--ap-soft); }
.ap-small { font-size: 12px; color: var(--ap-muted); }
.ap-mono { font-family: var(--ap-mono); }
.ap-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ap-link { text-decoration: none; color: var(--ap-text) !important; }

/* Listenzeilen */
.ap-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; text-decoration: none; color: var(--ap-text) !important; }
.ap-row + .ap-row { border-top: 1px solid var(--ap-line); }
.ap-row__main { flex: 1; min-width: 0; }
.ap-row__t { font-weight: 600; font-size: 14px; }
.ap-row__s { font-size: 12px; color: var(--ap-muted); margin-top: 2px; }
.ap-row__end { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.ap-date { width: 46px; flex: none; text-align: center; border-radius: 12px; background: var(--ap-card2); padding: 6px 0; }
.ap-date div { font-family: var(--ap-mono); font-size: 10px; color: var(--ap-muted); }
.ap-date b { display: block; font-weight: 600; font-size: 14px; }
.ap-date.is-hot { background: var(--ap-gold); color: var(--ap-on-gold); }
.ap-date.is-hot div { color: var(--ap-on-gold); }

/* Plaketten */
.ap-pill { display: inline-block; font-family: var(--ap-mono); font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; letter-spacing: .02em; }
.ap-pill.is-gold { background: var(--ap-gold); color: var(--ap-on-gold); }
.ap-pill.is-gold-soft { background: rgba(227,179,65,.16); color: var(--ap-gold-t); }
.ap-pill.is-green-soft { background: rgba(34,197,94,.16); color: var(--ap-green-t); }
.ap-pill.is-green { background: var(--ap-green); color: var(--ap-on-gold); }
.ap-pill.is-red { background: var(--ap-red); color: #FFFFFF; }
.ap-pill.is-red-soft { background: rgba(220,38,38,.16); color: var(--ap-red-t); }
.ap-pill.is-fsdl { background: var(--ap-fsdl); color: #FFFFFF; }
.ap-pill.is-muted { background: var(--ap-card2); color: var(--ap-muted); }
.ap-pill.is-blue-soft { background: rgba(56,189,248,.16); color: var(--ap-blue-t); }

/* Knöpfe & Felder */
.ap-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 18px; border-radius: 16px; font-weight: 700; font-size: 15px; border: 0; background: var(--ap-gold); color: var(--ap-on-gold) !important; text-decoration: none; cursor: pointer; }
.ap-btn:hover { filter: brightness(1.05); }
.ap-btn--ghost { background: transparent; border: 1px solid var(--ap-line); color: var(--ap-text) !important; font-weight: 600; }
.ap-btn--sm { min-height: 40px; border-radius: 12px; font-size: 14px; width: auto; }
.ap-btn--green { background: var(--ap-green); }
.ap-btn[disabled] { opacity: .45; cursor: not-allowed; }
.ap-btnrow { display: flex; gap: 8px; }
.ap-btnrow > * { flex: 1; }
.ap-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--ap-muted); }
.ap-field input, .ap-field select, .ap-field textarea { font: inherit; font-size: 15px; color: var(--ap-text); background: var(--ap-card); border: 1px solid var(--ap-line); border-radius: 14px; padding: 12px 14px; min-width: 0; width: 100%; }
.ap-field input:focus, .ap-field select:focus, .ap-field textarea:focus { outline: none; border-color: var(--ap-gold); }
.ap-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--ap-soft); }
.ap-check input { accent-color: var(--ap-gold2); width: 18px; height: 18px; margin: 1px 0 0; flex: none; }
.ap-seg { display: flex; gap: 4px; background: var(--ap-card); border: 1px solid var(--ap-line); border-radius: 16px; padding: 4px; }
.ap-seg a, .ap-seg button { flex: 1; min-height: 38px; border-radius: 12px; border: 0; background: transparent; color: var(--ap-muted) !important; font-size: 13px; font-weight: 600; text-decoration: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ap-seg [aria-current="page"], .ap-seg [aria-pressed="true"] { background: var(--ap-gold); color: var(--ap-on-gold) !important; }
.ap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-chip { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ap-line); background: var(--ap-card); color: var(--ap-text); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ap-chip[aria-pressed="true"] { background: var(--ap-gold); border-color: var(--ap-gold); color: var(--ap-on-gold); }

/* Rückmeldung */
.ap-flash { border-radius: 16px; padding: 12px 14px; background: rgba(34,197,94,.14); color: var(--ap-ok-t); font-size: 14px; border: 1px solid rgba(34,197,94,.35); }
.ap-flash.is-err { background: rgba(220,38,38,.14); color: var(--ap-red-t); border-color: rgba(220,38,38,.4); }

/* Avatar */
.ap-av { flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #070D17; font-family: var(--ap-head); font-stretch: 125%; font-weight: 900; overflow: hidden; }
.ap-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-avs { display: flex; padding-left: 8px; }
.ap-avs > .ap-av { margin-left: -8px; border: 2px solid var(--ap-card); box-sizing: content-box; }

/* Level-Ring */
.ap-ring { position: relative; flex: none; }
.ap-ring svg { display: block; }
.ap-ring svg circle:first-child { stroke: var(--ap-line); }
.ap-ring span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ap-ring b { font-family: var(--ap-head); font-stretch: 125%; font-weight: 900; font-size: 22px; }
.ap-ring i { font-style: normal; font-family: var(--ap-mono); font-weight: 500; font-size: 9px; color: var(--ap-muted); letter-spacing: .05em; margin-top: 2px; }

/* Fortschrittsbalken */
.ap-bar { height: 6px; border-radius: 999px; background: var(--ap-line); overflow: hidden; }
.ap-bar > span { display: block; height: 100%; background: var(--ap-gold); border-radius: 999px; }

/* Leiste unten */
.ap-nav { position: fixed; left: 50%; transform: translateX(-50%); width: calc(min(100%, 520px) - 32px); bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--ap-nav-bg); box-shadow: var(--ap-nav-shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--ap-line); border-radius: 26px; padding: 6px; font-size: 11px; z-index: 50; }
.ap-nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0; min-height: 44px; text-decoration: none; border-radius: 20px; color: var(--ap-muted) !important; }
.ap-nav a[aria-current="page"] { color: var(--ap-nav-on-fg) !important; background: var(--ap-nav-on-bg); font-weight: 600; }
.ap-nav a:active { transform: scale(.95); }

/* Leerer Zustand / Hinweis */
.ap-empty { text-align: center; color: var(--ap-muted); font-size: 14px; padding: 18px 8px; }
.ap-note { border-radius: 18px; padding: 12px 14px; border: 1.5px dashed var(--ap-dash); color: var(--ap-soft); font-size: 13px; line-height: 1.45; background: var(--ap-stripes); }

/* Hell: Grafiken (Orden, Trophäen, farbige Zahlen) */
html.ap-html[data-ap-design="hell"] .ap svg[aria-label$="(noch gesperrt)"] { filter: invert(.9) hue-rotate(180deg) saturate(.6); }
html.ap-html[data-ap-design="hell"] .ap svg[aria-label^="Trophäe"] { filter: drop-shadow(0 0 .6px rgba(11,22,38,.55)); }
html.ap-html[data-ap-design="hell"] .ap .ap-ink { filter: brightness(.6) saturate(1.5); }

@media (prefers-reduced-motion: reduce) { .ap *, .ap *::before { animation: none !important; transition: none !important; } }