/* ==========================================================================
   LPauto Code-Shop — Design "Selbstbestimmt & Stark"
   Angeglichen an die Masterseite (selbstbestimmt-und-stark.de): warmes Creme,
   Oliv-Akzente, Cormorant Garamond + Mulish, self-hosted (kein Google-CDN).
   Admin-Bereich (.admin-bar, .stat*, .pill) bleibt bewusst schlicht/eigenfarbig.
   ========================================================================== */

/* --- Fonts (self-hosted, 1:1 aus dem Masterseite-Handoff) ---------------- */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400;
  font-display: swap; src: url(fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500;
  font-display: swap; src: url(fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600;
  font-display: swap; src: url(fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500;
  font-display: swap; src: url(fonts/co3smX5slCNuHLi8bLeY9MK7whWMhyjYrGFEsdtdc62E6zd5wDD-iNM8.woff2) format('woff2');
}
@font-face {
  font-family: 'Mulish'; font-style: normal; font-weight: 400;
  font-display: swap; src: url(fonts/1Ptvg83HX_SGhgqk3wot.woff2) format('woff2');
}
@font-face {
  font-family: 'Mulish'; font-style: normal; font-weight: 500;
  font-display: swap; src: url(fonts/1Ptvg83HX_SGhgqk3wot.woff2) format('woff2');
}
@font-face {
  font-family: 'Mulish'; font-style: normal; font-weight: 600;
  font-display: swap; src: url(fonts/1Ptvg83HX_SGhgqk3wot.woff2) format('woff2');
}
@font-face {
  font-family: 'Mulish'; font-style: normal; font-weight: 700;
  font-display: swap; src: url(fonts/1Ptvg83HX_SGhgqk3wot.woff2) format('woff2');
}

:root {
  --brand-olive: #6E7355;
  --brand-olive-dk: #565b40;
  --brand-gold: #BE9459;
  --ink: #3B342B;
  --ink-soft: #4a4235;
  --muted: #6b6152;
  --muted-soft: #8a7f6d;
  --bg: #F1EADD;
  --bg-page: radial-gradient(120% 90% at 82% 0%, #F6EFE1 0%, #EFE7D8 42%, #EAE1D1 100%);
  --surface: #FBF7EF;
  --panel: #F0E8D9;
  --strip: #EFE6D6;
  --line: rgba(59,52,43,.14);
  --line-soft: rgba(59,52,43,.09);
  --ok: #3E8E5A;
  --ok-bg: #EDF6F0;
  --ok-line: #CDE6D6;
  --warn: #6B4A1E;
  --warn-bg: #F3E7D3;
  --warn-line: #E7DECB;
  --danger: #8a4438;
  --danger-bg: #F5E4E0;
  --danger-line: #E0BFB6;
  --radius: 18px;
  --shadow: 0 14px 30px -20px rgba(70,58,40,.35);
  --font: 'Mulish', system-ui, sans-serif;
  --font-serif: 'Cormorant Garamond', serif;
  --mono: "SFMono-Regular", ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  /* Eigenfarben fuer den Admin-Bereich (bewusst unveraendert ggue. dem
     bisherigen "Anker LPAKTIV2026"-Look, siehe Kopfkommentar). */
  --admin-navy: #0F2942;
  --admin-navy-soft: #1B3A57;
  --admin-petrol: #1F7A8C;
  --admin-petrol-dk: #176173;
  --admin-surface: #FFFFFF;
  --admin-line: #E4EAEE;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-olive); text-decoration: none; }
a:hover { color: var(--brand-olive-dk); text-decoration: none; }
::selection { background: #dfc9a6; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* --- Seitenrahmen (Warenkorb-Hintergrund der Masterseite) ---------------- */
body { background: var(--bg-page); }

/* --- Header ------------------------------------------------------------- */
.site-header { background: transparent; }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 22px;
  padding-bottom: 22px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 14px; font-weight: 700; color: var(--ink); }
.brand svg { display: block; flex: none; }
.brand:hover { text-decoration: none; }
.brand-text { line-height: 1.05; }
.brand-title { display: block; font-family: var(--font-serif); font-size: 22px; font-weight: 600; letter-spacing: .2px; color: var(--ink); }
.brand-sub { display: block; font-size: 11.5px; letter-spacing: .4px; color: var(--muted-soft); margin-top: 2px; font-weight: 500; }

.header-nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.header-nav a { color: var(--ink-soft); font-weight: 600; font-size: 14.5px; }
.header-nav a:hover { color: var(--brand-olive); }
.header-nav .nav-sep { width: 1px; height: 20px; background: var(--line); }
.cart-link { display: inline-flex; align-items: center; gap: 7px; }
.cart-badge {
  background: #C29A63;
  color: #fff;
  border-radius: 999px;
  font-size: .74rem;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* --- Layout --------------------------------------------------------------- */
main { padding: 10px 0 60px; }
h1 { font-family: var(--font-serif); color: var(--ink); font-size: 2rem; font-weight: 600; margin: 0 0 8px; letter-spacing: -.2px; }
h2 { font-family: var(--font-serif); color: var(--ink); font-size: 1.5rem; font-weight: 600; margin: 28px 0 10px; }
h3 { font-family: var(--font-serif); color: var(--ink); font-weight: 600; margin: 0 0 6px; }
.lead { color: var(--muted); margin: 0 0 24px; font-size: 1.02rem; }

/* --- Cards / grid --------------------------------------------------------- */
.grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 620px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.grid .card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -20px rgba(70,58,40,.35); }
.card h3 { font-size: 1.3rem; }
.card .contacts { color: var(--muted-soft); font-size: .85rem; letter-spacing: .3px; margin-bottom: 8px; text-transform: uppercase; font-weight: 600; }
.card .desc { color: var(--muted); font-size: .95rem; flex: 1; margin-bottom: 14px; }
.price { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 600; color: var(--ink); }
.price small { font-family: var(--font); font-size: .78rem; color: var(--muted-soft); font-weight: 600; display: block; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }

/* --- Produktbilder (Karte / Detail / Warenkorb) ----------------------------- */
.card-img { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--strip); margin: 2px 0 14px; flex: none; }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-img.is-empty { display: flex; align-items: center; justify-content: center; color: var(--muted-soft); }
.card-img.is-empty svg { opacity: .55; }

.product-hero { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; margin-bottom: 6px; }
.product-hero-img { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--strip); box-shadow: var(--shadow); }
.product-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-hero-img.is-empty { display: flex; align-items: center; justify-content: center; color: var(--muted-soft); }
.product-hero-img.is-empty svg { opacity: .55; }
@media (max-width: 720px) { .product-hero { grid-template-columns: 1fr; } .product-hero-img { max-width: 320px; } }

.cart-thumb-img { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; flex: none; background: var(--strip); }
.cart-thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-thumb-img.is-empty { display: flex; align-items: center; justify-content: center; color: var(--muted-soft); }
.cart-thumb-img.is-empty svg { opacity: .5; width: 22px; height: 22px; }
.cart-item-main { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }

/* --- Admin: Produktbilder (Drag & Drop) ------------------------------------- */
.img-admin-grid { gap: 20px; }
.img-drop-form { margin-top: 10px; }
.img-drop {
  display: flex; align-items: center; justify-content: center; position: relative;
  aspect-ratio: 4 / 3; border-radius: 14px; border: 2px dashed rgba(59,52,43,.25);
  background: var(--strip); overflow: hidden; cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.img-drop:hover, .img-drop:focus-visible { border-color: var(--brand-olive); }
.img-drop.dragover { border-color: var(--brand-olive); background: #EFE6D6; }
/* Vorschau skaliert das GANZE Bild in den Rahmen (contain), statt Hochformat-
   Cover im 4:3-Rahmen zu beschneiden. Dezenter Rahmen-Hintergrund fuellt die
   Letterbox-Raender. */
.img-drop img { width: 100%; height: 100%; object-fit: contain; display: block; }
.img-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted-soft); font-size: .85rem; text-align: center; padding: 16px; }
.img-drop-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.img-drop.pdf-drop { aspect-ratio: auto; min-height: 130px; }
.btn.secondary:disabled { opacity: .45; cursor: not-allowed; border-color: rgba(59,52,43,.14); color: var(--muted-soft); }

/* LPauto-Cross-Link im Admin-Header */
.header-nav .lp-link { font-weight: 700; color: #cfe0ea; }
.header-nav .lp-link:hover { color: #fff; }

/* Floating Scroll-Bubble (hoch/runter) */
#scrollBubble {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  background: var(--brand-olive, #6E7355); color: #F6F1E7;
  box-shadow: 0 10px 26px -10px rgba(70,58,40,.6);
  transition: transform .18s ease, background .18s ease;
}
#scrollBubble:hover { transform: translateY(-2px); background: #565b40; }
#scrollBubble:active { transform: translateY(0); }
@media (max-width: 640px) { #scrollBubble { right: 14px; bottom: 14px; } }

/* --- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--brand-olive);
  color: #F6F1E7;
  border: 1.5px solid var(--brand-olive);
  border-radius: 999px;
  padding: 13px 26px;
  font-size: .95rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { background: var(--brand-olive-dk); border-color: var(--brand-olive-dk); color: #F6F1E7; text-decoration: none; }
.btn.secondary { background: transparent; color: var(--ink-soft); border-color: rgba(59,52,43,.28); }
.btn.secondary:hover { border-color: var(--brand-olive); color: var(--brand-olive); background: transparent; }
.btn.block { width: 100%; }
.btn.small { padding: 8px 16px; font-size: .85rem; }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; }

/* --- Infobox (Voraussetzung / warn) ----------------------------------------- */
.infobox {
  border-radius: 14px;
  padding: 13px 16px;
  font-size: .93rem;
  margin: 14px 0;
  border: 1px solid var(--line-soft);
  background: var(--strip);
  color: var(--muted);
}
.infobox.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.infobox.ok { background: var(--ok-bg); border-color: var(--ok-line); color: #245C3A; }
.infobox.danger { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.infobox strong { color: inherit; }

/* --- Flash ------------------------------------------------------------------ */
.flash { border-radius: 14px; padding: 13px 16px; margin-bottom: 18px; font-size: .95rem; }
.flash.success { background: var(--ok-bg); border: 1px solid var(--ok-line); color: #245C3A; }
.flash.error { background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger); }

/* --- Forms -------------------------------------------------------------------- */
label { display: block; font-weight: 600; color: var(--muted); margin: 14px 0 6px; font-size: .93rem; }
input[type=text], input[type=email], input[type=password], input[type=number], textarea, select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(59,52,43,.18);
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand-olive); }
textarea { min-height: 90px; resize: vertical; }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; }
.checkbox-row input { width: auto; margin-top: 3px; }
.checkbox-row label { margin: 0; font-weight: 500; color: var(--ink); }

/* --- Tables --------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; background: transparent; }
table.data th, table.data td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line-soft); font-size: .93rem; }
table.data th { color: var(--muted-soft); font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .4px; }
table.data tr:last-child td { border-bottom: none; }

/* --- Cart items ------------------------------------------------------------------ */
.cart-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.cart-item:last-child { border-bottom: none; }
.cart-item strong { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.qty-form { display: inline-flex; gap: 6px; align-items: center; }
.qty-form input { width: 64px; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0; font-size: 1.1rem; color: var(--muted); }
.cart-total strong { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 600; color: var(--ink); }

/* --- Delivery / code cards --------------------------------------------------------- */
.code-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--brand-olive);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 16px 0;
  box-shadow: var(--shadow);
}
.code-card h3 { display: flex; align-items: center; gap: 4px; }
.code-card .step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--brand-olive); color: #F6F1E7; font-family: var(--font-serif);
  font-size: .95rem; font-weight: 600; margin-right: 10px; flex: none;
}
.code-value {
  font-family: var(--mono);
  font-size: 1.4rem;
  letter-spacing: 1px;
  color: var(--ink);
  background: var(--strip);
  border: 1px dashed rgba(59,52,43,.25);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 10px 0;
  word-break: break-all;
  user-select: all;
}
.copy-btn { font-size: .88rem; padding: 10px 18px; }
.copy-btn.copied { background: var(--ok); border-color: var(--ok); }
.redeem-order { color: var(--muted-soft); font-size: .9rem; margin: 6px 0 18px; }

/* --- Footer ----------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: transparent;
  padding: 26px 0 34px;
  color: var(--muted-soft);
  font-size: .87rem;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; align-items: center; }
.site-footer a { color: var(--muted-soft); }
.site-footer a:hover { color: var(--brand-olive); }
.site-footer .foot-sep { color: rgba(59,52,43,.3); }

/* § 356a BGB verlangt fuer den Widerrufs-Einstieg "gut sichtbar und hervorgehoben".
   Ein weiterer grauer Footer-Link waere genau das nicht — deshalb abgesetzt als Chip. */
.site-footer a.foot-widerruf {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--brand-olive);
  border-radius: 999px;
  color: var(--brand-olive);
  font-weight: 600;
  text-decoration: none;
}
.site-footer a.foot-widerruf:hover { background: var(--brand-olive); color: #fff; }
.site-footer a.foot-widerruf:focus-visible { outline: 3px solid var(--brand-olive); outline-offset: 2px; }

/* --- Admin (bewusst eigenstaendig, kein Redesign) ---------------------------------- */
.admin-bar { background: var(--admin-navy); color: #fff; }
.admin-bar .wrap { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; flex-wrap: wrap; }
.admin-bar a { color: #cfe0ea; }
.admin-bar .brand { color: #fff; font-family: var(--font); }
.admin-bar .header-nav a { color: #cfe0ea; font-weight: 500; }
main .admin-bar ~ * { font-family: var(--font); }
.stat-row { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 18px 0; }
@media (min-width: 620px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
.stat { background: var(--admin-surface); border: 1px solid var(--admin-line); border-radius: 12px; padding: 16px; box-shadow: 0 2px 10px rgba(15,41,66,.06); }
.stat .n { font-family: var(--font); font-size: 1.8rem; font-weight: 700; color: var(--admin-navy); }
.stat .l { color: #64778A; font-size: .9rem; }
/* Große Verkaufs-Kennzahlen */
.stat.big .n { font-size: 2.9rem; line-height: 1; }
.stat.big.warnish { background: #FBF3E9; border-color: #EBD5B8; }
.stat.big.warnish .n { color: #C6803A; }
.headline-sold { margin-top: 8px; }
/* Ranking-Balken (Einlösequote) */
.rank-bar { margin-top: 5px; height: 6px; border-radius: 4px; background: #E7EDF2; overflow: hidden; max-width: 160px; }
.rank-bar > span { display: block; height: 100%; background: var(--ok, #3E9C6B); border-radius: 4px; }
.rank-table td { vertical-align: middle; }
/* CSV-Format-Tabelle */
.csv-format td { vertical-align: top; }
.csv-sample { white-space: pre; color: var(--admin-navy, #234); }
/* Anleitung: Schritt-Karten */
.steps { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.step-card {
  position: relative; background: var(--admin-surface); border: 1px solid var(--admin-line);
  border-radius: 12px; padding: 18px 18px 14px 54px; box-shadow: 0 2px 10px rgba(15,41,66,.06);
}
.step-card h3 { margin: 0 0 8px; color: var(--admin-navy); }
.step-card ol { margin: 0; padding-left: 18px; color: #445; }
.step-card ol li { margin-bottom: 6px; line-height: 1.5; }
.step-badge {
  position: absolute; left: 16px; top: 18px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--admin-navy, #1f3b57); color: #fff; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: .95rem;
}
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.pill.ok { background: #EDF6F0; color: var(--ok); }
.pill.low { background: #FBF3E9; color: #C6803A; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }

/* Admin-Seiten laufen ueber dieselbe Layout-Datei/CSS wie der Shop, sollen
   aber optisch unveraendert bleiben: Ueberschriften/Formulare/Tabellen unter
   .admin-bar wirken generisch statt Cormorant-Garamond-verziert. */
body:has(.admin-bar) h1,
body:has(.admin-bar) h2,
body:has(.admin-bar) h3 { font-family: var(--font); color: var(--admin-navy); }
body:has(.admin-bar) .btn { border-radius: 10px; background: var(--admin-petrol); border-color: var(--admin-petrol); color: #fff; }
body:has(.admin-bar) .btn:hover { background: var(--admin-petrol-dk); border-color: var(--admin-petrol-dk); }
body:has(.admin-bar) .btn.secondary { background: transparent; color: var(--admin-petrol-dk); border-color: var(--admin-line); }
body:has(.admin-bar) .card { box-shadow: 0 2px 10px rgba(15,41,66,.06); border-radius: 12px; }
body:has(.admin-bar) .code-value { font-family: var(--mono); }

/* ==========================================================================
   Responsiv
   ========================================================================== */
@media (max-width: 640px) {
  .site-header .wrap { padding-bottom: 14px; }
  .header-nav { gap: 14px; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .header-nav::-webkit-scrollbar { display: none; }
  .header-nav .nav-sep { display: none; }
  .cart-item { flex-wrap: wrap; }
  input[type=text], input[type=email], input[type=password], input[type=number], textarea, select { font-size: 16px; }
}

/* --- A11y / Motion -------------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--brand-olive); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ==== Footer: Unabhaengigkeits-Hinweis ==== */
.site-footer .foot-note { flex-basis: 100%; text-align: center; color: var(--muted-soft); font-size: .8rem; margin-bottom: 2px; }

/* ==== Rechtstexte-Popup (CSS-only ueber :target, kein JS) ==== */
.legal-pop { display: none; position: fixed; inset: 0; z-index: 300; }
.legal-pop:target { display: block; }
.legal-pop-bg { position: absolute; inset: 0; background: rgba(59, 52, 43, .55); }
.legal-pop-box { position: relative; z-index: 1; max-width: 840px; max-height: 86vh; overflow: auto; margin: 6vh auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px 30px 30px; box-shadow: 0 30px 80px -24px rgba(59, 52, 43, .55); line-height: 1.65; }
.legal-pop-box h1 { margin-top: 0; }
.legal-pop-close { float: right; font-size: 26px; line-height: 1; text-decoration: none; color: var(--muted-soft); padding: 0 4px; margin: -4px -6px 0 12px; }
.legal-pop-close:hover { color: var(--ink); }
@media (max-width: 720px) { .legal-pop-box { margin: 0; max-height: 100vh; height: 100%; border-radius: 0; padding: 20px 16px; } }

/* ==== Admin: Statistik-Reset-Leiste + kleine Buttons ==== */
.stats-reset-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2px 0 14px; }
.btn.small-btn { padding: 6px 12px; font-size: .82rem; }