/* tokens.css — einzige Quelle für Schriften und Design-Tokens von bar-restaurant.com.
   Wird zur Buildzeit in site.config.mjs eingelesen und dem Engine-CSS vorangestellt;
   zusätzlich liegt sie als /assets/css/tokens.css für die Seiten, die nicht über die
   Engine laufen (tools/berichtsheft, member-pages).
   Schriften sind self-hosted — kein Google-CDN (DSGVO). */

/* ── Schriften ───────────────────────────────────────────────────────────────
   Beide self-hosted, latin-Subset, SIL OFL. Kein Google-CDN (DSGVO).
   IBM Plex Sans: Fliesstext, Tabellen, Navigation. Vier Schnitte.
   Source Serif 4: ausschliesslich Display. Variabel mit optischer Groessenachse
   (opsz) - dadurch tragen 40-56px Titel ohne zu wirken wie eine Werbeschrift. */
@font-face{font-family:'Plex Sans';src:url('/assets/fonts/plex-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('/assets/fonts/plex-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('/assets/fonts/plex-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('/assets/fonts/plex-sans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('/assets/fonts/source-serif-4-var.woff2') format('woff2-variations');font-weight:400 700;font-style:normal;font-display:swap}

:root{
  /* ── Farbe: Anthrazit-Achse ─────────────────────────────────────────────── */
  --c-ink:#16181A;        /* Fließtext, Überschriften, dunkle Flächen   17.8:1 auf Weiß */
  --c-mid:#4A4F55;        /* Sekundärtext, Tabellenzellen                8.3:1 */
  --c-muted:#686F76;      /* Meta, Bildunterschrift, Breadcrumb          5.1:1 / 4.7:1 auf Panel */
  --c-line:#E3E1DE;       /* Haarlinie */
  --c-line-2:#C9C6C2;     /* betonte Linie, Tabellenkopf-Unterkante */
  --c-paper:#FFFFFF;
  --c-paper-2:#F7F6F4;    /* Panel-Fläche */
  --c-on-dark:#B9BCBF;    /* Text auf --c-ink                            9.3:1 */

  /* ── Farbe: Bordeaux, einziger Akzent ───────────────────────────────────── */
  --c-acc:#7A1F2B;        /* Links, Regeln, Buttons                     10.2:1 auf Weiß */
  --c-acc-2:#9E2A3A;      /* Hover, aktiver Zustand                      7.4:1 */
  --c-acc-tint:#FBF3F4;   /* Fläche der Warnbox */
  --c-ok:#1F6B3F;         /* nur Werkzeug-Rückmeldung, keine Markenfarbe 6.5:1 */

  /* ── Typografie ─────────────────────────────────────────────────────────── */
  --f-display:'Source Serif 4',Georgia,'Times New Roman',serif;
  --f-text:'Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --t-xs:.8125rem;    /* 13px — Kicker, Bildunterschrift, Quelle, Breadcrumb */
  --t-sm:.9375rem;    /* 15px — Meta, Tabelle, Footer, Button */
  --t-base:1.0625rem; /* 17px — Fließtext */
  --t-lg:1.3125rem;   /* 21px — Lead, h3 */
  --t-xl:1.75rem;     /* 28px — h2 */
  --t-2xl:2.75rem;    /* 44px — h1 */
  --t-3xl:4rem;       /* 64px — Hero */

  /* ── Abstände: eine Skala, 4px-Basis ────────────────────────────────────── */
  --s-1:.25rem; --s-2:.5rem; --s-3:1rem; --s-4:1.5rem;
  --s-5:2.5rem; --s-6:4rem; --s-7:6rem;

  /* ── Radien und Tiefe ───────────────────────────────────────────────────── */
  --r-1:2px;  /* Eingabefelder, Buttons */
  --r-2:4px;  /* Flächen. Bilder bleiben bewusst ohne Radius. */
  --e-1:0 1px 2px rgba(22,24,26,.06);
  --e-2:0 8px 28px rgba(22,24,26,.10);

  /* ── Maß ────────────────────────────────────────────────────────────────── */
  --measure:64ch;       /* Lesespalte, ca. 68 Zeichen */
  --measure-head:22ch;  /* Überschriften brechen mit der Spalte */
}

/* Typografie verkleinert sich geschlossen über die Tokens, nicht über Einzelregeln. */
@media(max-width:1024px){:root{--t-2xl:2.25rem;--t-3xl:3rem}}
@media(max-width:768px){:root{--t-2xl:1.9375rem;--t-3xl:2.25rem;--t-xl:1.5rem;--s-6:2.5rem;--s-7:4rem}}

/* ── Footer ─────────────────────────────────────────────────────────────────
   Steht hier und nicht im Engine-CSS, weil ihn auch die Seiten brauchen, die
   nicht über die Engine laufen (Berichtsheft, Mitgliederbereich). Sie erhalten
   dasselbe Markup über den Platzhalter <!--SITEFOOTER--> in build.mjs. */
.sitefoot{background:var(--c-ink);color:var(--c-on-dark);margin-top:var(--s-6);padding:var(--s-5) var(--s-4) var(--s-4)}
.footgrid{max-width:1280px;margin:0 auto;display:grid;gap:var(--s-5) var(--s-4);grid-template-columns:1.7fr 1fr 1fr 1fr 1fr}
.footgrid h4{color:#fff;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--s-2);font-weight:600}
.footgrid a{display:block;color:var(--c-on-dark);font-size:var(--t-sm);padding:.18rem 0;text-decoration:none}
.footgrid a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footabout strong{font-family:var(--f-display);font-variation-settings:"opsz" 32;color:#fff;font-size:var(--t-lg);font-weight:600;letter-spacing:-.01em}
.footabout p{font-size:var(--t-sm);margin-top:var(--s-2);max-width:44ch}
.footlegal{max-width:1280px;margin:var(--s-4) auto 0;padding-top:var(--s-3);border-top:1px solid rgba(255,255,255,.14);font-size:var(--t-xs);color:#8A9096}
.footlegal a{color:var(--c-on-dark)}
.footlegal p+p{margin-top:var(--s-2)}
@media(max-width:1080px){.footgrid{grid-template-columns:1.6fr 1fr 1fr}}
@media(max-width:760px){.footgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footgrid{grid-template-columns:1fr;gap:var(--s-4)}}
@media(max-width:1080px){.footabout{grid-column:1 / -1;max-width:52ch}}

/* ── Bestellung (Premium-Seite) ────────────────────────────────────────────
   Preis, Zustimmung zum vorzeitigen Leistungsbeginn und Rechtshinweis stehen
   direkt über dem Bestell-Button — § 312j Abs. 2 BGB verlangt die Angaben
   „unmittelbar bevor" der Kunde bestellt. */
.price{margin-top:var(--s-4);font-size:var(--t-lg);color:var(--c-ink)}
.price strong{font-family:var(--f-display);font-size:var(--t-xl);font-weight:600}
.consent{display:flex;gap:var(--s-2);align-items:flex-start;margin-top:var(--s-3);
  font-size:var(--t-sm);line-height:1.55;color:var(--c-mid);cursor:pointer}
.consent input{margin-top:.28rem;flex:0 0 auto;width:1rem;height:1rem;accent-color:var(--c-acc)}
.price-net{display:block;margin-top:var(--s-1);font-family:var(--f-text);font-size:var(--t-sm);font-weight:400;color:var(--c-muted);line-height:1.5}
.legalnote{margin-top:var(--s-3);font-size:var(--t-xs);color:var(--c-muted)}


/* ── Redaktionelle Elemente der Artikel ─────────────────────────────────── */
.byline{font-size:var(--t-sm);color:var(--c-muted);margin-top:var(--s-2)}
.byline a{color:var(--c-acc)}
.sources{font-size:var(--t-sm);color:var(--c-mid);padding-left:1.4rem}
.sources li{margin:.3rem 0}
.changelog{list-style:none;padding:0;font-size:var(--t-sm);color:var(--c-mid)}
.changelog .cl-date{display:inline-block;min-width:6.5rem;color:var(--c-muted)}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--s-4) 0;
  background:linear-gradient(90deg,var(--c-paper) 30%,rgba(255,255,255,0)),linear-gradient(90deg,rgba(255,255,255,0),var(--c-paper) 70%) 100% 0,
  radial-gradient(farthest-side at 0 50%,rgba(22,24,26,.14),rgba(0,0,0,0)),radial-gradient(farthest-side at 100% 50%,rgba(22,24,26,.14),rgba(0,0,0,0)) 100% 0;
  background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}
.tblwrap table{margin:0;min-width:36rem}
.kriterien th[scope=row]{font-weight:600;background:transparent;width:38%}
.kriterien .st{white-space:nowrap;font-weight:600}
.kriterien .st-erfuellt{color:var(--c-ok)}
.kriterien .st-teilweise{color:var(--c-ink)}
.kriterien .st-nicht-erfuellt{color:var(--c-acc)}
.kriterien .st-keine-angabe{color:var(--c-muted);font-weight:400}
.kriterien .st-nicht-anwendbar{color:var(--c-muted);font-weight:400;font-style:italic}
.krit-kopf{font-size:var(--t-sm);color:var(--c-mid)}

/* ── Vita-Portrait auf /redaktion/ ─────────────────────────────────────────
   Hochformat, links neben dem Text; unter 640 px läuft es in die Spalte. */
.vita-bild{float:right;width:min(320px,42%);margin:0 0 var(--s-3) var(--s-4)}
.vita-bild img{display:block;width:100%;height:auto;border-radius:var(--r-2)}
.vita-bild figcaption{margin-top:var(--s-2);font-size:var(--t-xs);color:var(--c-muted)}
@media(max-width:640px){.vita-bild{float:none;width:100%;margin:var(--s-3) 0}}

/* ── Preisboxen auf der Produktseite ────────────────────────────────────────
   Zwei Lizenzstufen nebeneinander; unter 720 px untereinander. Preis und
   Zustimmung stehen bewusst direkt über dem Knopf (§ 312j Abs. 2 BGB). */
.preisbox{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin:var(--s-4) 0}
.preiskarte{border:1px solid var(--c-line);border-radius:var(--r-2);padding:var(--s-4);background:var(--c-paper)}
.preiskarte h3{margin-top:0}
.preiskarte ul{margin:var(--s-3) 0;padding-left:1.2rem;font-size:var(--t-sm);color:var(--c-mid)}
.preiskarte li{margin:.25rem 0}
.preiskarte .btn{width:100%;justify-content:center;margin-top:var(--s-3)}
.preiskarte .btn[disabled]{opacity:.6;cursor:wait}
.msg{border-radius:var(--r-2);padding:.7rem .9rem;font-size:var(--t-sm);margin:var(--s-3) 0}
.msg.info{background:var(--c-paper-2);border:1px solid var(--c-line);color:var(--c-mid)}
.msg.err{background:var(--c-acc-tint);border:1px solid var(--c-line-2);color:var(--c-acc)}
@media(max-width:720px){.preisbox{grid-template-columns:1fr}}