/* Wild Spirit order portal — styled to match wild-spirit.store (Dawn-based):
Poppins, white surfaces, near-black ink, uppercase letter-spaced buttons,
black primary CTA, red reserved for the destructive cancel path,
dark nature-green (#004643, from the theme's color schemes) for positive states. */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/poppins-400.woff2') format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/fonts/poppins-600.woff2') format('woff2');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/poppins-700.woff2') format('woff2');
}
:root {
--bg: #ffffff;
--surface: #f3f3f3;
--ink: #121212;
--muted: #5f625f;
--line: #e4e4e1;
--green: #004643;
--green-soft: #e9f1ec;
--red: #ea3138;
--red-deep: #b3271d;
--red-soft: #fdeeed;
--r-btn: 8px;
--r-card: 12px;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.wrap { max-width: 800px; margin: 0 auto; padding: 0 1rem 3rem; }
.wrap.wide { max-width: 1200px; } /* admin only */
/* announcement bar, exactly like the store */
.topbar {
background: #000;
color: #fff;
text-align: center;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
padding: 0.55rem 1rem;
}
/* three columns, the outer two equal: the logo sits in the true centre whatever the
widths of the shop button and the language switch */
.site-header {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem;
max-width: 800px; margin: 0 auto; padding: 0.9rem 1rem;
}
.site-header .shop-link { justify-self: start; }
.site-header .lang { justify-self: end; }
.logo { height: 32px; width: auto; display: block; }
.shop-link {
display: inline-block; white-space: nowrap; text-decoration: none; color: var(--ink);
font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
padding: 0.45rem 0.7rem; border: 1px solid var(--ink); border-radius: var(--r-btn);
transition: background 0.15s ease;
}
.shop-link:hover { background: var(--surface); }
.shop-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* phones: the full label would push the logo off centre */
.shop-link-short { display: none; }
@media (max-width: 26rem) {
.shop-link-long { display: none; }
.shop-link-short { display: inline; }
}
.lang { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; color: var(--muted); display: flex; gap: 0.45rem; align-items: center; }
.lang a { color: var(--muted); text-decoration: none; padding: 0.15rem 0.2rem; }
.lang a.on { color: var(--ink); border-bottom: 2px solid var(--ink); }
.banner {
background: #121212; color: #fff;
max-width: none; margin: 0; padding: 0.6rem 1rem;
text-align: center; font-size: 0.85rem;
}
/* Frameless (Jakob 2026-09-05): page and card share --bg, so a border was the only
thing making a card a box. The elements inside — tiles, FAQ rows, form fields —
carry their own edges, so the frame was double-boxing them. Spacing separates
sections — the padding alone since 2026-10-13 (Jakob: 1rem, no extra top margin). */
.card {
background: transparent;
border: none;
border-radius: var(--r-card);
padding: 1rem 0;
}
.card.center { text-align: center; }
h1 { font-size: 1.55rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.6rem; }
h2 { font-size: 1rem; font-weight: 700; margin: 1.3rem 0 0.5rem; }
.intro { color: var(--muted); margin: 0 0 1rem; font-size: 0.95rem; }
.note {
background: var(--surface);
border-radius: var(--r-btn);
padding: 0.75rem 0.95rem; font-size: 0.9rem; margin: 0.8rem 0;
}
.note.ok { background: var(--green-soft); color: var(--green); }
.alert {
background: var(--red-soft); color: var(--red-deep);
border-radius: var(--r-btn); padding: 0.75rem 0.95rem; margin: 0.8rem 0; font-size: 0.92rem;
}
.alert.warn {
background: var(--surface); color: var(--ink);
border-left: 3px solid var(--ink);
}
.hint { font-size: 0.82rem; color: var(--muted); margin: 0.3rem 0 0; }
.muted { color: var(--muted); font-size: 0.875rem; }
.small { font-size: 0.8rem; }
.stack { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.8rem; }
label { font-weight: 600; font-size: 0.85rem; }
input[type="text"], input[type="email"], select, textarea {
width: 100%; padding: 0.78rem 0.9rem; font-size: 1rem; font-family: inherit;
border: 1px solid rgba(18, 18, 18, 0.35); border-radius: var(--r-btn);
background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
textarea { resize: vertical; }
/* Photo dropzone. The native input sits transparent on top of the whole box so the
browser gives us click, keyboard and drag-and-drop for free; .dropzone-face is the
visible part and is aria-hidden, because the input already carries the label. */
.dropzone {
position: relative; display: block;
border: 1.5px dashed rgba(18, 18, 18, 0.28); border-radius: 14px;
background: var(--surface); transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone-input {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0; cursor: pointer;
}
.dropzone-face {
display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
padding: 1.6rem 1rem; text-align: center; pointer-events: none;
}
.dropzone-icon { display: inline-flex; color: var(--ink); margin-bottom: 0.15rem; }
.dropzone-icon svg { display: block; width: 1.6rem; height: 1.6rem; }
.dropzone-cta { font-size: 0.95rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.dropzone-drop { font-size: 0.82rem; color: var(--muted); }
.dropzone-formats { margin-top: 0.4rem; font-size: 0.75rem; color: var(--muted); }
.dropzone:hover { border-color: var(--ink); background: #fff; }
/* the input is what receives focus, so the ring has to be drawn on the box around it */
.dropzone:focus-within { border-color: var(--ink); border-style: solid; outline: 2px solid var(--ink); outline-offset: 1px; }
.dropzone-input:focus { outline: none; }
/* JS adds this while a file is dragged over the box */
.dropzone.is-dragging { border-color: var(--ink); border-style: solid; background: #fff; }
/* what was picked, listed back — a file input that only says "3 files" is a dead end */
.dropzone-files { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.dropzone-files li {
display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
border: 1px solid var(--line); border-radius: 10px; padding: 0.45rem 0.7rem; font-size: 0.85rem;
}
.dropzone-files .file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone-files .file-size { flex: none; color: var(--muted); font-size: 0.78rem; }
/* one photo out of the selection, without picking all of them again (Jakob 2026-10-13);
the negative margin keeps a thumb-sized target from making the row taller */
.dropzone-files .file-remove {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 2rem; height: 2rem; margin: -0.4rem -0.45rem -0.4rem -0.2rem; padding: 0;
border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
}
.dropzone-files .file-remove:hover { background: var(--surface); color: var(--ink); }
.dropzone-files .file-remove:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.dropzone-files .file-remove svg { width: 1rem; height: 1rem; }
.dropzone-files .file-over { color: var(--red-deep); font-weight: 700; }
.photo-rules { margin: 0.4rem 0 0.4rem 1.1rem; padding: 0; font-size: 0.88rem; }
.photo-rules li { margin: 0.15rem 0; }
/* Fact cards, ported from the store (wild-spirit.store/pages/retoure, .cret__fact, and
the same block on the Reklamation page): filled tile, icon, uppercase label, bold
value. Row-with-icon-left on a phone, centred column from 47rem up — the store's own
breakpoint behaviour (Jakob 2026-09-08). */
.fact-row { display: grid; grid-template-columns: 1fr; gap: 0.6rem; margin: 0.9rem 0 1.1rem; }
.fact {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.85rem 1rem; border-radius: 12px; background: rgba(18, 18, 18, 0.04);
}
.fact-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 1.5rem; height: 1.5rem; color: var(--ink); }
.fact-icon svg { display: block; width: 100%; height: 100%; stroke-width: 1.7; }
.fact-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.fact-label {
font-size: 0.72rem; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase;
color: rgba(18, 18, 18, 0.5);
}
.fact-value { font-size: 0.88rem; line-height: 1.3; font-weight: 700; color: var(--ink); }
@media (min-width: 47rem) {
.fact-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.fact { flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; padding: 1.4rem 1.1rem; border-radius: 14px; }
.fact-icon { width: 2rem; height: 2rem; }
.fact-text { align-items: center; gap: 0.2rem; }
.fact-label { font-size: 0.74rem; }
.fact-value { font-size: 0.95rem; }
}
/* The return picker closes its card with the facts, right after the back link (Jakob
2026-10-13): enough air above that the link still reads as the end of the form, and no
bottom margin since nothing follows. Scoped to the link-then-row pair, so the
Reklamation page (facts near the top) keeps the base margins above. */
.backlink + .fact-row { margin: 1.6rem 0 0; }
/* --- return offer page (Jakob 2026-09-05, policy v4) ------------------------
One offer, not two competing cards. The green keep-it deal owns the page; the
classic return sits below a rule as a calm alternative. It is never hidden —
the right of withdrawal is not ours to gate — it just does not shout. */
.offer h1 { margin-bottom: 0.15rem; }
/* the locked selection: read-only, no controls, so it reads as a receipt */
.locked-items { margin: 0.9rem 0 1.1rem; }
.locked-items .item {
border: 1px solid var(--line); border-radius: 12px;
padding: 0.8rem 0.9rem; background: #fff;
}
.locked-items .item + .item { margin-top: 0.5rem; }
.item-icon {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 2.6rem; height: 2.6rem; border-radius: 10px;
background: var(--surface); color: var(--ink);
}
.item-icon svg { width: 1.3rem; height: 1.3rem; }
.offer-box {
border-radius: 14px; background: var(--green-soft);
padding: 1.15rem 1.2rem;
}
/* line-height:1 shrinks the label's line box to the glyphs themselves, so
align-items:center lines the leaf up with the CAPS rather than with the empty
descender space underneath them (Jakob 2026-09-08) */
.offer-eyebrow {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 0.7rem; line-height: 1; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--green);
}
.offer-eyebrow-icon { display: inline-flex; align-items: center; flex: none; }
.offer-eyebrow-icon svg { display: block; width: 1.15rem; height: 1.15rem; }
/* plain wrapping on purpose: the headline uses the full width of the box. No
measure cap and no text-wrap:balance — balancing broke the first sentence
mid-phrase, which reads worse than a long line (Jakob 2026-09-08). */
.offer-headline {
margin: 0.6rem 0 0.4rem;
font-size: 1.3rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em;
}
.offer-lead { margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.55; color: var(--ink); opacity: 0.75; }
/* the number is the point of the page — give it room and a white card to sit on,
with the CTA alongside it taking the rest of the row (Jakob 2026-09-05) */
.offer-action { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.75rem; }
.offer-action .btn { flex: 1 1 14rem; display: flex; align-items: center; justify-content: center; }
.offer-amount {
flex: 0 0 auto;
display: inline-flex; flex-direction: column; justify-content: center; gap: 0.2rem;
min-width: 11rem; padding: 0.75rem 1rem;
border: 1.5px solid var(--green); border-radius: 12px; background: #fff;
}
.offer-amount-label {
font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--muted);
}
.offer-amount-value { font-size: 1.6rem; line-height: 1.15; font-weight: 700; color: var(--green); }
/* once the CTA wraps below it, the tile has the row to itself — let it fill it */
@media (max-width: 30rem) { .offer-amount { flex-basis: 100%; } }
.offer-sep { border: 0; border-top: 1px solid var(--line); margin: 1.4rem 0 1.1rem; }
.offer-alt h3 { margin: 0 0 0.35rem; font-size: 0.98rem; font-weight: 700; }
/* the question reads as a lead-in, the option name stays bold (Jakob 2026-10-13) */
.offer-alt-question { font-weight: 400; }
.offer-alt p { margin: 0 0 0.85rem; font-size: 0.875rem; line-height: 1.55; color: var(--muted); }
/* the alternative lane is deliberately quieter than the offer above it */
.offer-alt .btn { width: auto; border-width: 1px; }
/* ...a thin black outline, no fill (Jakob 2026-10-13): the grey fill read as disabled.
Only the subtle one — with no offer it is the primary. Hover keeps .btn.subtle's tint. */
.offer-alt .btn.subtle { background: transparent; }
/* the way back to the picker: a quiet text link under the locked selection, not a
button — it is an escape hatch, not a step in the flow */
.offer-change { margin: -0.6rem 0 1.1rem; font-size: 0.85rem; }
.offer-change a { color: var(--muted); }
.offer-change a:hover { color: var(--ink); }
/* care item picker */
/* .item.pick-item, not .pick-item: `.item { align-items: center }` is declared
LATER in this file, so a single-class selector lost the cascade and the product
row ended up horizontally centred inside its own list item (Jakob 2026-09-05). */
.item.pick-item { flex-direction: column; align-items: stretch; gap: 0.4rem; }
.pick-label { display: flex; gap: 0.75rem; align-items: center; cursor: pointer; font-weight: 400; }
.pick-check { width: 1.15rem; height: 1.15rem; flex: none; accent-color: #121212; }
.pick-qty { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; margin-left: 1.9rem; }
.pick-qty select { width: auto; padding: 0.35rem 0.6rem; }
/* Tiles: one row per card — icon, uppercase title over a quiet description, arrow — like
the store's own help cards (Jakob 2026-10-13: "so they take up less vertical space").
They used to be centred columns with the icon on top, ~180px tall each, which pushed the
fourth card off a phone screen. Border, radius, type and hover lift are still the
store's (Jakob 2026-09-08). 2×2 on wide screens, where grid-auto-rows: 1fr keeps every
card one size whatever its text (Jakob 2026-10-09); one column on phones. */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 0.75rem; margin-top: 1rem; }
@media (max-width: 46.8rem) { .tiles { grid-template-columns: 1fr; } }
.tile {
position: relative; overflow: hidden;
display: flex; align-items: center; gap: 1.1rem; text-align: left;
text-decoration: none; color: var(--ink);
border: 1.5px solid rgba(18, 18, 18, 0.1); border-radius: 16px;
padding: 1.1rem 1.25rem; background: #fff;
transition: border-color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.tile-icon { display: inline-flex; flex: none; color: var(--ink); }
/* a 1.6 hairline scaled up reads grey, not black — the CSS property wins over the SVG's
own stroke-width attribute (Jakob 2026-09-08) */
.tile-icon svg { display: block; width: 2rem; height: 2rem; stroke-width: 1.9; }
.tile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.tile strong {
font-size: 0.92rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
line-height: 1.3;
}
.tile-desc { font-size: 0.84rem; line-height: 1.45; letter-spacing: 0.01em; color: rgba(18, 18, 18, 0.55); }
/* always visible now: on touch there is no hover to reveal it, and it is what tells a live
card from a greyed-out one at a glance */
.tile-arrow {
display: inline-flex; flex: none; color: var(--ink);
transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.tile-arrow svg { width: 1.15rem; height: 1.15rem; }
a.tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) {
a.tile:hover {
border-color: rgba(18, 18, 18, 0.35); transform: translateY(-2px);
box-shadow: 0 1rem 2rem rgba(18, 18, 18, 0.06);
}
a.tile:hover .tile-arrow { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .tile, .tile-arrow { transition: none; } }
.tile.soon { opacity: 0.55; cursor: default; }
/* buttons: the store's uppercase, letter-spaced language */
.btn {
display: inline-block; text-align: center; text-decoration: none; cursor: pointer;
padding: 0.95rem 1.2rem; font-family: inherit; font-size: 0.86rem; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
border-radius: var(--r-btn); border: 1.5px solid transparent; width: 100%;
transition: background 0.15s ease, color 0.15s ease;
}
.btn.primary { background: #121212; color: #fff; border-color: #121212; }
.btn.primary:hover { background: #000; }
.btn.subtle { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn.subtle:hover { background: var(--surface); }
.btn.danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn.danger:hover { background: #d02a20; }
.btn.danger-outline { background: #fff; color: var(--red); border-color: var(--red); }
.btn.danger-outline:hover { background: var(--red-soft); }
/* recovery after a failed payout/ticket: quiet, but tinted so it reads as
"fix the thing above", not as a routine action (Jakob 2026-09-05) */
.btn.retry { background: #fff; color: var(--red-deep); border-color: var(--red-soft); }
.btn.retry:hover { background: var(--red-soft); border-color: var(--red-deep); }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.inline .btn { width: auto; padding: 0.5rem 0.85rem; font-size: 0.76rem; }
.order-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
/* The title breaks in two on a phone (Jakob 2026-10-13): "Deine Bestellung:" on one line,
the number alone on the next. The label is a span rather than a
, so it turns into a
block only below the tablet breakpoint — wider up it stays one line, with the plain space
from the markup between label and number. The number never splits at its hyphen. */
.order-title-number { white-space: nowrap; }
@media (max-width: 46.8rem) { .order-title-label { display: block; } }
/* review page: "Lieber den vollen Betrag?" on its own line, and its button spans the column
like the offer's own button — first on phones (Jakob 2026-10-13), since 2026-10-14 on
desktop too: the phone layout is the one layout */
.offer-alt-question { display: block; margin-top: 1rem; }
.offer-alt > .btn { display: block; width: 100%; }
/* /status answer paragraphs: one size for both — level 5 of the type scale. The first was
unstyled 16px, the second a .hint at 0.82rem (Jakob 2026-10-14: "looks weird") */
.status-text { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--muted); }
/* /status: "Du willst etwas ändern?" + a filled black button — content width on desktop,
full width on a phone (Jakob 2026-10-14) */
.status-cta .btn { width: auto; }
@media (max-width: 46.8rem) { .status-cta .btn { display: block; width: 100%; } }
/* the review page's way back sits centred under that button on a phone (Jakob 2026-10-13) */
@media (max-width: 46.8rem) { .backlink.center-mobile { text-align: center; } }
.chip {
font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
padding: 0.3rem 0.7rem; border-radius: 999px; white-space: nowrap;
}
.chip.open { background: var(--green-soft); color: var(--green); }
.chip.closed { background: var(--surface); color: #4c4f4c; }
.chip.bad-chip { background: var(--red-soft); color: var(--red-deep); }
.items { list-style: none; margin: 0.4rem 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.items-heading { margin-top: 1.1rem; }
.item {
display: flex; gap: 0.85rem; align-items: center;
border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem;
}
.item strong { font-size: 0.95rem; font-weight: 600; }
/* review pages: the line's price sits on the variant line, right-aligned (Jakob 2026-10-13) */
.item-body { flex: 1; min-width: 0; }
.item-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.item-price { flex: none; white-space: nowrap; }
.thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--surface); }
.thumb.small { width: 44px; height: 44px; }
.picker { align-items: flex-start; }
.picker-body { flex: 1; }
.selects { display: flex; gap: 0.6rem; margin-top: 0.55rem; flex-wrap: wrap; }
.selects label { flex: 1; min-width: 8rem; display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.02em; }
.delta s { color: var(--muted); }
.deadline { font-size: 0.9rem; color: var(--green); font-weight: 600; }
.pending {
background: var(--green-soft); border-left: 3px solid var(--green);
border-radius: var(--r-btn); padding: 0.95rem 1rem; margin: 0.8rem 0;
}
.pending h2 { margin: 0 0 0.3rem; }
.closed-box { background: var(--surface); border-radius: var(--r-btn); padding: 0.95rem 1rem; margin-top: 0.8rem; }
.backlink { margin: 1.3rem 0 0; font-size: 0.88rem; }
.backlink a { color: var(--ink); font-weight: 400; }
.bigcheck {
width: 58px; height: 58px; margin: 0.4rem auto 0.9rem; border-radius: 50%;
background: var(--green-soft); color: var(--green); font-size: 1.8rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.bigcheck svg { width: 1.9rem; height: 1.9rem; }
/* tracking rows */
.track-row { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.track-row a, .track-row .track-plain {
display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 0.95rem;
text-decoration: none; color: var(--ink); font-weight: 600;
}
.track-row a:hover { background: var(--surface); }
.track-row .carrier {
text-transform: uppercase; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em;
color: var(--green);
}
.track-row .track-no { flex: 1; word-break: break-all; font-variant-numeric: tabular-nums; font-size: 0.92rem; }
.track-row .arrow { font-size: 1rem; color: var(--ink); }
/* honeypot: visually gone, still in the DOM for bots */
.hp { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }
.site-footer {
max-width: 800px; margin: 2.2rem auto 0; padding: 1.4rem 1rem 2.2rem;
border-top: 1px solid var(--line);
text-align: center; color: var(--muted); font-size: 0.86rem;
}
.site-footer a { color: var(--ink); }
.legal { font-size: 0.78rem; letter-spacing: 0.02em; }
.good { color: var(--green); }
.bad { color: var(--red-deep); }
.status-failed { border-color: #f2c4be; }
.inline { display: inline-flex; gap: 0.5rem; align-items: center; }
/* Type scale (Jakob 2026-09-05) — five levels, nothing in between:
1 page title h1 / .page-title 1.55rem 700
2 section h2 / .pick-heading 1rem 700
3 item title .item strong / .tile 0.95rem 600
4 form label label 0.85rem 600
5 body + meta .muted / .intro 0.875rem 400
The item title had no rule of its own, so it inherited 16px/700 and outranked
every heading on the page. */
/* --- portal landing (Jakob 2026-09-05): the root page reads as a titled page,
not as a form label — centred header + intro, then a collapsed FAQ card. */
.page-title {
text-align: center;
font-weight: 700;
font-size: clamp(1.45rem, 4.2vw, 2rem);
text-transform: uppercase;
letter-spacing: .04em;
margin: 0 0 0.5rem;
line-height: 1.15;
}
h1.centered, .intro.centered, .backlink.centered { text-align: center; }
/* --- start-page login (Jakob 2026-10-09): the lookup as one calm panel. The intro is
centred under the centred title (it used to hang left of it); the panel is a single
bordered card in the tiles' language (1.5px hairline, 16px radius), as wide as the FAQ
cards below it so both edges line up (Jakob 2026-10-09). Each field groups label,
input and helper tightly and the groups breathe — the old form spaced all three the
same, so the helpers floated between fields. Scoped to .login-panel: the complaint,
contact and cancel forms keep their own look. */
.start-intro { max-width: 34rem; margin: 0 auto 1.6rem; line-height: 1.6; }
/* the way back for a customer who is still signed in (Jakob 2026-10-13) */
/* "still signed in" on the start page: one quiet line in the delivered-badge green,
the whole row is the link (Jakob 2026-10-13 — the outline button wrapped to two lines) */
.resume-chip {
display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
margin: -0.4rem 0 1.2rem; padding: 0.7rem 0.95rem;
background: var(--green-soft); color: var(--green); border-radius: var(--r-btn);
font-size: 0.86rem; line-height: 1.3; text-decoration: none;
}
.resume-chip strong { font-weight: 700; white-space: nowrap; }
.resume-chip-go { font-weight: 700; white-space: nowrap; }
.resume-chip:hover .resume-chip-go, .resume-chip:focus-visible .resume-chip-go { text-decoration: underline; text-underline-offset: 3px; }
.login-panel {
display: flex; flex-direction: column; gap: 1.2rem;
padding: 1.6rem 1.5rem 1.5rem;
background: #fff;
/* border only — the shadow made it the one raised card on the page (Jakob 2026-10-14) */
border: 1.5px solid rgba(18, 18, 18, 0.1); border-radius: 16px;
}
/* on a phone the frame goes: there it was a card in a card eating the narrow width, so the
fields run full width like the contact and complaint forms (Jakob 2026-10-14) */
@media (max-width: 46.8rem) { .login-panel { padding: 0; border: 0; border-radius: 0; } }
.login-panel .alert, .login-panel .note { margin: 0; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field .hint { margin: 0; line-height: 1.45; }
.field-optional {
margin-left: 0.45rem; padding: 0.12rem 0.5rem; border-radius: 999px;
background: var(--surface); color: var(--muted);
font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
vertical-align: 0.12em;
}
.input-icon { position: relative; }
.input-icon svg {
position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%);
width: 1.15rem; height: 1.15rem; color: var(--muted); pointer-events: none;
transition: color 0.15s ease;
}
.input-icon:focus-within svg { color: var(--ink); }
.input-icon input { padding-left: 2.7rem; }
.login-panel .btn { margin-top: 0.2rem; }
.login-sent strong { display: block; margin-bottom: 0.2rem; }
.login-sent p { margin: 0.15rem 0 0; }
/* FAQ accordion, ported from the store's own (wild-spirit.store/pages/faq-bestellung,
.cfaq__item): a bordered card per question with a leading icon and a chevron that
rotates when it opens — not a divider list (Jakob 2026-09-08). */
.faq { margin-top: 1rem; }
.faq-heading { font-size: 1.05rem; margin: 0 0 0.8rem; }
.faq-item {
border: 1px solid rgba(18, 18, 18, 0.1); border-radius: 12px;
margin-bottom: 0.75rem; overflow: hidden;
}
.faq-item:last-of-type { margin-bottom: 0; }
.faq-q {
display: flex; align-items: center; gap: 0.9rem;
padding: 1rem 1.2rem; cursor: pointer; list-style: none; user-select: none;
transition: opacity 0.2s ease;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { opacity: 0.7; }
.faq-q:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.faq-q-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 1.4rem; height: 1.4rem; color: var(--ink); }
.faq-q-icon svg { width: 100%; height: 100%; }
.faq-q-text { flex: 1; font-weight: 600; font-size: 0.94rem; line-height: 1.4; }
.faq-chevron {
display: flex; align-items: center; justify-content: center; flex: none;
width: 1.15rem; height: 1.15rem; color: rgba(18, 18, 18, 0.4);
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.faq-chevron svg { width: 100%; height: 100%; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
/* the answer lines up with the question TEXT, clear of the icon column */
.faq-item > p {
margin: 0; padding: 0 1.2rem 1.2rem 3.5rem;
font-size: 0.88rem; line-height: 1.7; color: rgba(18, 18, 18, 0.7);
}
@media (max-width: 46.8rem) {
.faq-q { gap: 0.6rem; padding: 0.85rem 0.9rem; }
.faq-q-text { font-size: 0.88rem; }
.faq-item > p { padding: 0 0.9rem 1rem; }
}
/* --- return/exchange picker (Jakob 2026-09-05): the instruction belongs INSIDE the
product box, so the heading and the things it refers to read as one unit. Items
drop their individual frames and are separated by hairlines instead. */
.pick-box { border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; margin: 0.2rem 0 1.2rem; }
/* The order number is the box heading; the instruction sits right under it, one step
down the type scale (level 5, body + meta: 0.875rem 400) and still in ink — it is the
thing to act on. The 0.9rem gap to the item list moved from the heading to the
sub-line (Jakob 2026-10-13). */
.pick-heading { margin: 0 0 0.25rem; font-weight: 700; color: var(--ink); font-size: 1rem; line-height: 1.35; }
.pick-sub { margin: 0 0 0.9rem; font-weight: 400; color: var(--ink); font-size: 0.875rem; line-height: 1.45; }
.pick-box .items { margin: 0; gap: 0; }
.pick-box .item { border: none; border-radius: 0; padding: 0.75rem 0; }
.pick-box .item + .item { border-top: 1px solid var(--line); }
.reason-select { margin-bottom: 1.6rem; }
/* contextual nudge under the reason dropdown (Jakob 2026-09-05) */
.suggest { border: 1px solid var(--green); border-radius: 10px;
padding: 1rem 1.1rem; margin: -0.4rem 0 1.2rem; background: var(--green-soft); }
.suggest strong { display: block; font-size: 0.95rem; line-height: 1.3; margin-bottom: 0.35rem; color: var(--green); }
.suggest p { margin: 0 0 0.9rem; font-size: 0.875rem; line-height: 1.5; color: #33413c; }
.suggest .btn { width: 100%; background: var(--green); border-color: var(--green); color: #fff; }
.suggest .btn:hover { background: #00332f; border-color: #00332f; }
/* the return stays available and unchanged in wording — only its visual weight
drops while an alternative is shown (Jakob 2026-09-05) */
.btn.primary.demoted { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn.primary.demoted:hover { background: var(--surface); }
/* completed return/exchange banner: outlined, not filled, with the method's own
icon so it matches the card the customer chose (Jakob 2026-09-05) */
/* One per case (2026-09-08): an order can hold several, so each collapses
to its headline and opens to show the date and the items it covered. */
.care-done {
border: 1.5px solid var(--green); border-radius: 10px; background: transparent;
padding: 0.85rem 1rem; margin: 0.8rem 0; color: var(--green); font-size: 0.9rem; line-height: 1.45;
}
.care-done-summary {
display: flex; align-items: flex-start; gap: 0.7rem;
cursor: pointer; list-style: none; /* the chevron below replaces the native marker */
}
.care-done-summary::-webkit-details-marker { display: none; }
.care-done-summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.care-done-icon { display: inline-flex; flex: none; margin-top: 0.1rem; }
.care-done-icon svg { width: 1.3rem; height: 1.3rem; }
.care-done-text { flex: 1; }
.care-done-chevron { display: inline-flex; flex: none; margin-top: 0.1rem; transition: transform 0.15s ease; }
.care-done-chevron svg { width: 1.1rem; height: 1.1rem; }
.care-done[open] .care-done-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .care-done-chevron { transition: none; } }
.care-done-body {
display: flex; flex-direction: column; gap: 0.5rem;
margin: 0.7rem 0 0; padding: 0.7rem 0 0 2rem;
border-top: 1px solid rgba(24, 61, 52, 0.15);
}
.care-done-body p { margin: 0; }
.care-done-meta { color: #33413c; }
.care-done-items { margin: 0; padding-left: 1.1rem; color: #33413c; }
.care-done-items li { margin: 0.15rem 0; }
.care-done-next { color: #33413c; }
.care-done .btn { align-self: flex-start; margin-top: 0.2rem; }
/* Bestellübersicht (Jakob 2026-10-13): the order's products behind an accordion right under
the title. Same build as .care-done above — summary row, rotating chevron, focus ring,
reduced motion — under its own names, because that class is a care-case banner and green
on this page means a state. So the frame and the label are ink and hairline here; the body
keeps the products exactly as the list at the bottom of the page used to show them. */
.order-overview {
border: 1.5px solid rgba(18, 18, 18, 0.1); border-radius: 10px; background: transparent;
padding: 0.85rem 1rem; margin: 0.8rem 0;
}
.order-overview-summary {
display: flex; align-items: center; gap: 0.7rem;
cursor: pointer; list-style: none; /* the chevron below replaces the native marker */
font-size: 0.95rem; font-weight: 600; line-height: 1.45;
}
.order-overview-summary::-webkit-details-marker { display: none; }
.order-overview-summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.order-overview-text { flex: 1; }
.order-overview-chevron { display: inline-flex; flex: none; transition: transform 0.15s ease; }
.order-overview-chevron svg { width: 1.1rem; height: 1.1rem; }
.order-overview[open] .order-overview-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .order-overview-chevron { transition: none; } }
.order-overview-body { margin: 0.7rem 0 0; border-top: 1px solid var(--line); }
/* the list's spacing was written for the open page; inside the frame the rule above and the
frame's own padding do that job */
.order-overview-body .items-heading { margin-top: 0.9rem; }
.order-overview-body .items { margin-bottom: 0; }
/* inside the accordion's own frame a box per product was a box in a box (Jakob 2026-10-13) */
.order-overview-body .item { border: 0; border-radius: 0; padding: 0.2rem 0; }
/* Live-update indicator on the admin page (server/public/admin.js). Grey = settled,
amber pulse = a sweep still has work in flight, red = polling stopped (session
lapsed), so "nothing is happening" and "I stopped looking" never look alike. */
.live-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
background: #c8ccd2; margin-left: .5rem; vertical-align: middle; }
.live-dot.busy { background: #d98324; animation: live-pulse 1.4s ease-in-out infinite; }
.live-dot.stale { background: #c0392b; animation: none; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .live-dot.busy { animation: none; } }
/* ===================================================================================
ADMIN (redesign 2026-10-09, Jakob: "clean, clear and modern" instead of "old Windows").
Everything below is scoped to body.admin, so the customer pages are untouched.
A light grey canvas, white cards with a hairline and a soft shadow, a sticky top bar
with a segmented switcher, colour-coded status badges (green ok, amber waiting, blue
in progress, red failed, grey closed), switches instead of checkboxes, and buttons in
sentence case at a working size. No inline styles anywhere — the CSP forbids them.
=================================================================================== */
body.admin {
--a-bg: #f5f6f8;
--a-card: #ffffff;
--a-line: #e6e8eb;
--a-line-strong: #d4d8dd;
--a-muted: #687079;
--a-soft: #f1f3f5;
--a-radius: 14px;
--a-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
background: var(--a-bg);
font-size: 0.9rem;
}
body.admin a { color: inherit; }
/* --- top bar ----------------------------------------------------------------------- */
.admin-bar {
position: sticky; top: 0; z-index: 20;
background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(1.4) blur(8px);
border-bottom: 1px solid var(--a-line);
}
.admin-bar-inner {
max-width: 1180px; margin: 0 auto; padding: 0.7rem 1.25rem;
display: flex; align-items: center; gap: 1.25rem;
}
.admin-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.admin-brand img { border-radius: 7px; }
.admin-brand-tag {
margin-left: 0.15rem; padding: 0.12rem 0.45rem; border-radius: 6px;
background: #121212; color: #fff; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 0.1em;
}
.admin-tabs { display: flex; gap: 0.2rem; padding: 0.22rem; border-radius: 10px; background: var(--a-soft); }
.admin-tabs a {
padding: 0.42rem 0.9rem; border-radius: 8px; text-decoration: none;
font-weight: 600; font-size: 0.84rem; color: var(--a-muted); transition: background 0.15s, color 0.15s;
}
.admin-tabs a:hover { color: var(--ink); }
.admin-tabs a.current { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); }
.admin-user { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; color: var(--a-muted); }
.admin-avatar {
display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem;
border-radius: 50%; background: #121212; color: #fff; font-weight: 700; font-size: 0.78rem;
}
.admin-user-name strong { color: var(--ink); font-weight: 600; }
.admin-user .logout { margin: 0; }
.admin-user .logout button {
font: inherit; font-weight: 600; font-size: 0.82rem; cursor: pointer;
padding: 0.4rem 0.75rem; border-radius: 8px; border: 1px solid var(--a-line-strong); background: #fff; color: var(--ink);
}
.admin-user .logout button:hover { background: var(--a-soft); }
/* --- page frame -------------------------------------------------------------------- */
.admin-main { max-width: 1180px; margin: 0 auto; padding: 1.75rem 1.25rem 5rem; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
body.admin h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.page-sub { margin: 0.3rem 0 0; color: var(--a-muted); font-size: 0.88rem; }
.page-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.admin-back { display: inline-block; margin-bottom: 0.8rem; font-size: 0.84rem; font-weight: 600; color: var(--a-muted); text-decoration: none; }
.admin-back:hover { color: var(--ink); }
.admin-footnote { margin: 1.25rem 0 0; color: var(--a-muted); font-size: 0.82rem; }
.admin-notice { border-radius: 10px; padding: 0.75rem 1rem; margin: 0 0 1rem; font-size: 0.88rem; font-weight: 500; }
.admin-notice.ok { background: #e8f5ee; color: #0f6b4a; border: 1px solid #c8e8d7; }
.admin-notice.error { background: #fdeceb; color: #b42318; border: 1px solid #f6cfcb; }
.admin-notice.warn { background: #fdf3e1; color: #8a5208; border: 1px solid #f0d9b0; }
.admin-card {
background: var(--a-card); border: 1px solid var(--a-line); border-radius: var(--a-radius);
box-shadow: var(--a-shadow); padding: 1.25rem 1.4rem; margin: 0 0 1rem;
}
.admin-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.admin-card-head h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.admin-card-head p { margin: 0; color: var(--a-muted); font-size: 0.82rem; }
/* --- badges ---------------------------------------------------------------------- */
.badge {
display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
padding: 0.18rem 0.6rem; border-radius: 999px; font-size: 0.74rem; font-weight: 600; line-height: 1.4;
background: var(--a-soft, #f1f3f5); color: #4b5258;
}
.badge.green { background: #e8f5ee; color: #0f6b4a; }
.badge.amber { background: #fdf3e1; color: #8a5208; }
.badge.blue { background: #e9f0fd; color: #1d4ed8; }
.badge.red { background: #fdeceb; color: #b42318; }
.badge.violet { background: #f1ecfd; color: #5b34c7; }
.badge.gray { background: #eef0f2; color: #4b5258; }
.badge.dot::before { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
/* --- buttons (admin size: sentence case, compact) ----------------------------------- */
body.admin .btn {
width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
padding: 0.55rem 0.95rem; border-radius: 9px; font-size: 0.84rem; font-weight: 600;
text-transform: none; letter-spacing: 0; line-height: 1.3; border-width: 1px;
}
body.admin .btn.primary { background: #121212; border-color: #121212; color: #fff; }
body.admin .btn.primary:hover { background: #2a2a2a; }
body.admin .btn.subtle { background: #fff; border-color: var(--a-line-strong); color: var(--ink); }
body.admin .btn.subtle:hover { background: var(--a-soft); }
body.admin .btn.retry { background: #fff; border-color: #f0c99a; color: #8a5208; }
body.admin .btn.retry:hover { background: #fdf3e1; }
body.admin .btn.danger-outline { background: #fff; border-color: #f2b8b3; color: #b42318; }
body.admin .btn.danger-outline:hover { background: #fdeceb; }
body.admin .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
body.admin .actions form, body.admin .inline { margin: 0; }
/* --- cases page -------------------------------------------------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; margin: 0 0 1rem; }
.stat {
display: flex; flex-direction: column; gap: 0.15rem; text-decoration: none;
background: var(--a-card); border: 1px solid var(--a-line); border-radius: 12px; box-shadow: var(--a-shadow);
padding: 0.9rem 1rem; transition: border-color 0.15s;
}
.stat:hover { border-color: var(--a-line-strong); }
.stat-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.stat-label { font-size: 0.78rem; color: var(--a-muted); font-weight: 500; }
.stat.alert .stat-value { color: #b42318; }
.stat.alert { border-color: #f6cfcb; }
.section-nav { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 1.5rem; }
.section-nav a {
padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid var(--a-line); background: #fff;
font-size: 0.8rem; font-weight: 600; color: var(--a-muted); text-decoration: none;
}
.section-nav a:hover { color: var(--ink); border-color: var(--a-line-strong); }
.admin-section { margin: 0 0 2rem; scroll-margin-top: 5rem; }
.admin-section > h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; font-weight: 700; margin: 0 0 0.75rem; }
.count {
display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.35rem;
padding: 0 0.45rem; border-radius: 999px; background: #e7eaee; color: #4b5258; font-size: 0.74rem; font-weight: 700;
}
.empty {
margin: 0; padding: 1.4rem; text-align: center; color: var(--a-muted); font-size: 0.86rem;
background: var(--a-card); border: 1px dashed var(--a-line-strong); border-radius: var(--a-radius);
}
.req {
background: var(--a-card); border: 1px solid var(--a-line); border-radius: var(--a-radius);
box-shadow: var(--a-shadow); padding: 1.1rem 1.25rem; margin: 0 0 0.75rem;
}
.req.status-failed, .req.status-rejected { border-left: 3px solid #e5675c; }
.req-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; }
.req-title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; min-width: 0; }
.req-title > a, .req-title > span:first-child { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; }
.req-title > a:hover { text-decoration: underline; }
.req-kind { font-size: 0.8rem; font-weight: 600; color: var(--a-muted); }
.req-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: flex-end; }
.req-sub { margin: 0.35rem 0 0; color: var(--a-muted); font-size: 0.82rem; }
.req-text { margin: 0.6rem 0 0; font-size: 0.88rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.req-files { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; }
.linkchip {
font-size: 0.76rem; font-weight: 600; padding: 0.16rem 0.55rem; border: 1px solid var(--line);
border-radius: 999px; text-decoration: none; white-space: nowrap; background: #fff;
}
.linkchip:hover { border-color: currentColor; }
.req-meta {
display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0.6rem 1.1rem;
margin: 0.9rem 0 0; padding: 0.85rem 1rem; background: #fafbfc; border: 1px solid #eef0f2; border-radius: 10px;
}
.req-meta dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--a-muted); font-weight: 600; }
.req-meta dd { margin: 0.15rem 0 0; font-size: 0.86rem; word-break: break-word; }
.warn-inline { font-size: 0.68rem; font-weight: 700; color: #b42318; }
.req-items { list-style: none; margin: 0.85rem 0 0; padding: 0; }
.req-items li { display: flex; gap: 0.55rem; align-items: baseline; padding: 0.3rem 0; font-size: 0.88rem; border-bottom: 1px solid #f1f3f5; }
.req-items li:last-child { border-bottom: 0; }
.req-items .qty { font-weight: 700; min-width: 3.2rem; }
.req-items .price { margin-left: auto; white-space: nowrap; }
.payouts { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid #f1f3f5; display: grid; gap: 0.35rem; }
.payout { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; font-size: 0.88rem; }
.payout-label { min-width: 12rem; color: var(--a-muted); }
.payout-value { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; font-weight: 600; }
.state { font-weight: 700; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.04em;
padding: 0.12rem 0.5rem; border-radius: 999px; background: #eef0f2; color: #4b5258; }
.state.created { background: #e8f5ee; color: #0f6b4a; }
.state.pending { background: #fdf3e1; color: #8a5208; }
.state.failed { background: #fdeceb; color: #b42318; }
.req-note { margin: 0.85rem 0 0; padding: 0.6rem 0.9rem; border-left: 3px solid var(--a-line-strong);
background: #fafbfc; border-radius: 0 8px 8px 0; color: #3f454b; font-size: 0.88rem; }
.errbox { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.75rem; padding: 0.6rem 0.85rem;
border: 1px solid #f6cfcb; border-left: 3px solid #e5675c; border-radius: 8px; background: #fef6f5; }
.errbox strong { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #b42318; }
.errbox span { font-size: 0.82rem; line-height: 1.45; color: #5b3030; word-break: break-word; }
.req-events { margin-top: 0.7rem; font-size: 0.78rem; color: var(--a-muted); }
.req-events summary { cursor: pointer; font-weight: 600; }
.req-events div { padding: 0.15rem 0; word-break: break-word; }
.sys-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.9rem 1.5rem; margin: 0; }
.sys-grid dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--a-muted); font-weight: 600; }
.sys-grid dd { margin: 0.3rem 0 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* --- settings ---------------------------------------------------------------------- */
.settings-form { margin: 0; }
.settings-group { padding: 1.25rem 1.4rem 0.5rem; }
.setting-list { display: flex; flex-direction: column; }
.setting-row {
display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
padding: 0.85rem 0; border-top: 1px solid #f0f2f4; cursor: pointer;
}
.setting-row.stacked { flex-direction: column; align-items: stretch; gap: 0.55rem; cursor: default; }
.setting-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.setting-title { font-weight: 600; font-size: 0.88rem; color: var(--ink); display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.setting-hint { font-size: 0.8rem; font-weight: 400; color: var(--a-muted); line-height: 1.45; }
.number-unit, .setting-row { font-weight: 400; }
.number-field { display: inline-flex; align-items: center; gap: 0.55rem; flex: none; }
/* a fixed unit column keeps every number box in one vertical line */
.number-unit { font-size: 0.8rem; color: var(--a-muted); width: 9.5rem; }
body.admin .admin-input {
/* weight reset: the fields sit inside bold labels, and the editor text is long prose */
font: inherit; font-size: 0.88rem; font-weight: 400; color: var(--ink); background: #fff;
border: 1px solid var(--a-line-strong); border-radius: 9px; padding: 0.55rem 0.7rem; width: 100%;
transition: border-color 0.15s, box-shadow 0.15s;
}
body.admin .admin-input:focus { outline: none; border-color: #121212; box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.08); }
body.admin input[type="number"].admin-input { width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
body.admin textarea.admin-input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; line-height: 1.55; resize: vertical; }
/* the switch: a real checkbox, drawn as a toggle (keyboard and screen readers unchanged) */
.switch {
appearance: none; -webkit-appearance: none; flex: none; margin: 0; cursor: pointer;
position: relative; width: 2.6rem; height: 1.5rem; border-radius: 999px;
background: #d3d7dc; transition: background 0.18s ease;
}
.switch::after {
content: ''; position: absolute; top: 0.18rem; left: 0.18rem; width: 1.14rem; height: 1.14rem; border-radius: 50%;
background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.3); transition: transform 0.18s ease;
}
.switch:checked { background: #121212; }
.switch:checked::after { transform: translateX(1.1rem); }
.switch:focus-visible { outline: 2px solid #121212; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .switch, .switch::after { transition: none; } }
.save-bar {
position: sticky; bottom: 0.9rem; z-index: 10; margin-top: 1.25rem;
display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
padding: 0.75rem 0.9rem 0.75rem 1.2rem; border-radius: 12px;
background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px);
border: 1px solid var(--a-line); box-shadow: 0 8px 24px -8px rgba(16, 24, 40, 0.18);
}
.save-bar-hint { font-size: 0.82rem; color: var(--a-muted); }
/* --- email texts ------------------------------------------------------------------- */
.email-card { padding: 1rem 1.1rem; }
.email-group { margin: 0.2rem 0.3rem 0.6rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--a-muted); font-weight: 700; }
.email-list { display: flex; flex-direction: column; }
.email-row {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: 0.8rem 0.75rem; border-radius: 10px; text-decoration: none; color: inherit;
}
.email-row + .email-row { border-top: 1px solid #f0f2f4; }
.email-row:hover { background: var(--a-soft); }
.email-row-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.email-row-main strong { font-size: 0.9rem; }
.email-row-when { font-size: 0.8rem; color: var(--a-muted); }
.email-row-state { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.chevron { color: #a3a9b0; font-size: 1.2rem; line-height: 1; }
.token-help summary { cursor: pointer; font-weight: 700; font-size: 0.95rem; }
.token-help ul { margin: 0.6rem 0 0; padding-left: 1.1rem; columns: 2 18rem; column-gap: 2rem; }
.token-help li { margin: 0.25rem 0; break-inside: avoid; font-size: 0.84rem; }
.token-help code, .mail-subject code, .blocks-card code {
background: var(--a-soft); border: 1px solid var(--a-line); border-radius: 5px; padding: 0.05rem 0.35rem; font-size: 0.82em;
}
.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.editor-form { display: flex; flex-direction: column; gap: 0.9rem; }
.editor-form .actions { margin-top: 0.1rem; }
.field-label { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; font-weight: 600; font-size: 0.84rem; }
.reset-form { margin-top: 0.6rem; }
.token-note { display: block; margin: 0.1rem 0 0.15rem; font-size: 0.76rem; color: var(--a-muted); }
.token-link { margin-left: 0.35rem; font-size: 0.78rem; font-weight: 600; color: var(--ink); }
.field-title { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.blocks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem 1.25rem; }
.mail-preview { border: 1px solid var(--a-line); border-radius: 12px; padding: 1rem 1.1rem; background: #fafbfc; margin-top: 0.35rem; }
.mail-subject { margin: 0 0 0.7rem; font-size: 0.86rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--a-line); }
.mail-body { margin: 0; white-space: pre-wrap; font-family: inherit; font-size: 0.84rem; line-height: 1.55; }
/* --- login / "Angemeldet" ------------------------------------------------------------ */
.admin-auth { min-height: 100vh; }
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.auth-card {
width: 100%; max-width: 24rem; text-align: center; background: #fff;
border: 1px solid var(--a-line); border-radius: 18px; box-shadow: 0 12px 32px -12px rgba(16, 24, 40, 0.18);
padding: 2.2rem 2rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
}
.auth-logo { border-radius: 12px; }
.auth-card h1 { font-size: 1.3rem; }
.auth-sub { margin: 0 0 0.5rem; color: var(--a-muted); font-size: 0.86rem; }
.auth-foot { margin: 0.4rem 0 0; color: var(--a-muted); font-size: 0.76rem; }
.auth-card .admin-notice { width: 100%; margin: 0; }
body.admin .btn.google-btn { width: 100%; background: #fff; color: var(--ink); border-color: var(--a-line-strong); padding: 0.7rem 1rem; }
body.admin .btn.google-btn:hover { background: var(--a-soft); }
body.admin .auth-card .btn.primary { width: 100%; }
/* --- small screens ------------------------------------------------------------------ */
@media (max-width: 52rem) {
/* on a phone the bar scrolls away: three sticky rows would eat a third of the screen */
.admin-bar { position: static; }
.admin-bar-inner { flex-wrap: wrap; gap: 0.6rem 1rem; padding: 0.6rem 1rem; }
.admin-tabs { order: 3; width: 100%; justify-content: space-between; }
.admin-tabs a { flex: 1; text-align: center; padding: 0.42rem 0.3rem; font-size: 0.8rem; white-space: nowrap; }
.admin-user-name, .admin-avatar { display: none; }
.admin-main { padding: 1.25rem 1rem 4rem; }
.save-bar-hint { display: none; }
.save-bar .btn { width: 100%; }
.editor-grid { grid-template-columns: 1fr; }
.setting-row { gap: 1rem; }
.payout-label { min-width: 0; }
.number-unit { width: auto; }
}
/* --- Diagnose tab (Jakob 2026-10-15): the alpha-test journal ------------------------ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.diag-search { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.diag-search .admin-input { flex: 1 1 18rem; }
.diag-search .btn { width: auto; }
.diag-hint, .diag-empty { margin: 0.6rem 0 0; color: var(--a-muted); font-size: 0.82rem; }
.diag-days { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin: 0 0 1rem; }
.diag-days a { padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid var(--a-line); color: inherit; text-decoration: none; font-size: 0.85rem; background: #fff; }
.diag-days a.current { background: #121212; border-color: #121212; color: #fff; }
.diag-days .diag-export { margin-left: auto; border: 0; background: none; text-decoration: underline; }
.diag-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; margin: 0 0 1rem; }
.diag-stats > div { background: #fff; border: 1px solid var(--a-line); border-radius: 12px; padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; }
.diag-stats strong { font-size: 1.4rem; }
.diag-stats span { color: var(--a-muted); font-size: 0.8rem; }
.diag-stats .bad strong { color: #b42318; }
.diag-funnel + .diag-funnel { margin-top: 1rem; }
.diag-funnel h4 { margin: 0 0 0.4rem; font-size: 0.9rem; }
.diag-bar-row { display: grid; grid-template-columns: 9rem 1fr 4.5rem; gap: 0.6rem; align-items: center; font-size: 0.85rem; padding: 0.15rem 0; }
.diag-bar { width: 100%; height: 0.7rem; appearance: none; border: 0; border-radius: 999px; background: #eef0f2; overflow: hidden; }
.diag-bar::-webkit-progress-bar { background: #eef0f2; border-radius: 999px; }
.diag-bar::-webkit-progress-value { background: #121212; border-radius: 999px; }
.diag-bar::-moz-progress-bar { background: #121212; border-radius: 999px; }
.diag-bar-num { text-align: right; font-variant-numeric: tabular-nums; }
.diag-bar-num em { color: var(--a-muted); font-style: normal; }
.diag-scroll { overflow-x: auto; }
.diag-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.diag-table th { text-align: left; font-weight: 600; color: var(--a-muted); padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--a-line); white-space: nowrap; }
.diag-table td { padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--a-line); vertical-align: top; }
.diag-table tr.diag-team td { background: #f5f8ff; }
.diag-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.diag-table .nowrap, .diag-error .nowrap { white-space: nowrap; }
.diag-table .muted-cell, .muted-cell { color: var(--a-muted); }
.diag-stack summary { cursor: pointer; color: var(--a-muted); font-size: 0.78rem; margin-top: 0.2rem; }
.diag-stack pre { white-space: pre-wrap; word-break: break-word; font-size: 0.74rem; background: #f6f7f8; padding: 0.6rem; border-radius: 8px; margin: 0.3rem 0 0; }
.diag-error + .diag-error { border-top: 1px solid var(--a-line); padding-top: 0.7rem; margin-top: 0.7rem; }
.diag-error p { margin: 0.3rem 0 0; }
@media (max-width: 46.8rem) { .diag-bar-row { grid-template-columns: 6.5rem 1fr 3.5rem; } }