/* Tokens instead of money (macro app/_tokens.html, services/tokens.py). Loaded by base.html for every page.
   The money amount next to a token price stays readable (section 1 (3) PAngV: easily recognisable and
   clearly legible): never smaller than 0.875rem, never only in a tooltip. */
:root { --tk-coin: var(--accent, #6C4BC9); }

.tk {
  display: inline-flex; align-items: center; gap: .3em;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tk-coin { flex: none; width: 1.1em; height: 1.1em; }
.tk-n { font-weight: 700; }
.tk-u { font-weight: 500; }

.tk-price {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .15em .6em;
}
.tk-price .tk { align-self: center; }
.tk-money {
  font-size: max(.875rem, .8em); font-weight: 500; color: var(--ink-2, #4B5068);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tk-list { color: var(--ink-3, #5F6380); font-weight: 400; white-space: nowrap; }
.tk-list-l { color: var(--ink-3, #5F6380); font-size: .875rem; font-weight: 400; white-space: nowrap; }
/* Special price of a customer (services/sonderpreise.py): the mark, the line above a button, the card above the tools. */
.tk-special { display: inline-flex; align-items: center; padding: .1rem .55rem; border-radius: 999px; font-size: .875rem; font-weight: 700; white-space: nowrap;
  color: var(--accent-text, #5B3FB5); background: color-mix(in srgb, var(--accent, #6C4BC9) 12%, transparent); }
.tk-special-line { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: 0 0 .6rem; }
.special-card { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.25rem; }
.special-card h2 { margin: 0 0 .25rem; font-size: 1.125rem; }
.special-card p { margin: 0; }
.special-card ul { display: grid; gap: .5rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.special-card li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; }
.special-card-name { font-weight: 650; }
.tool-card-price:has(.tk-list) .tk-price { row-gap: .1rem; }

/* On an accent background (primary buttons, highlighted cards) everything follows the text colour. */
.btn-primary .tk-coin, .is-accent .tk-coin { --tk-coin: currentColor; }
.btn-primary .tk-money { color: inherit; opacity: .9; }

/* Large variant: the balance on the token page, pack cards. */
.tk-lg { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.1; }
.tk-lg .tk-u { font-size: .5em; font-weight: 600; color: var(--ink-2, #4B5068); }

/* Portal: the rate next to a heading, "from" + price on narrow tool cards, the bonus pill inside a pack card. */
.tk-rate { display: inline-flex; align-items: center; gap: .35em; margin: 0; }
.tool-card-price { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0 .3em; min-width: 0; }
.tool-card-price .tk-price { min-width: 0; }
/* Tool cards: tokens on top, money below, the same on every card and width (some are too narrow for one line). */
.tool-card-price .tk-price { flex-direction: column; align-items: flex-start; gap: 0; }
.tk-pack .badge { white-space: normal; max-width: 100%; }
/* Narrow tool cards (row layout): the arrow alone says "open", so "from 441 Tokens" stays on one line. */
@media (max-width: 560px) {
  .tool-card-go-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Two pack tiles side by side on a phone: "2.500 Tokens" must fit the tile. */
@media (max-width: 420px) {
  .tk-pack .choice-body { padding: .8rem .75rem; }
  .tk-pack .tk-u { font-size: .875rem; font-weight: 500; }
  .tk-pack .tk { flex-wrap: wrap; row-gap: 0; }
}

/* Big website amounts (price cards, pack prices, calculator): the unit follows smaller, the number stays big,
   so "1.490 Tokens" fits a 360 px card; never below 0.875rem. */
.pk-amount .tk-u, .price-tag .tk-u { font-size: max(.875rem, .5em); font-weight: 600; letter-spacing: 0; }
.pk-amount .tk-money, .price-tag .tk-money { font-size: max(.9375rem, .36em); font-weight: 600; letter-spacing: 0; color: var(--ink-3, #5F6380); }
.pk-amount .tk-price { row-gap: .1em; }
@media (max-width: 420px) {
  .pk .pk-amount { font-size: 2.5rem; }
  .single.stacked .price-tag { font-size: 1.25rem; }
  .calc-total { flex-wrap: wrap; }
}

/* Info-Symbol mit Erklärung (Baustein app/_infotip.html, static/js/infotip.js): Blase über dem Symbol, geschlossen
   display: none, damit sie nie Überlauf erzeugt. Hover nur mit Maus, sonst Antippen. */
.infotip { position: relative; display: inline-flex; vertical-align: -0.2em; margin-inline-start: 0.3em; }
.infotip-btn { position: relative; display: grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; padding: 0; border: 1px solid var(--v-100, #e4dff8); border-radius: 50%; background: var(--v-50, #f6f4fd); color: var(--accent-ink, var(--accent, #6c4bc9)); cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.infotip-btn::after { content: ""; position: absolute; inset: -0.65rem; } /* Tippfläche 44 px, das Symbol bleibt klein */
.infotip .infotip-btn svg { display: block; flex: none; width: 0.875rem; height: 0.875rem; margin: 0; color: inherit; }
.infotip-btn:focus-visible { outline: 3px solid var(--focus, color-mix(in srgb, var(--accent, #6c4bc9) 45%, transparent)); outline-offset: 2px; }
.infotip.is-open .infotip-btn { background: var(--accent, #6c4bc9); border-color: var(--accent, #6c4bc9); color: #fff; }
.infotip-body { display: none; position: absolute; z-index: 40; bottom: calc(100% + 0.6rem); left: 50%; width: min(18.5rem, calc(100vw - 1.5rem)); padding: 0.85rem 1rem; translate: calc(-50% + var(--tip-shift, 0px)) 0; border: 1px solid var(--line, #e4e1f0); border-radius: 14px; background: #fff; box-shadow: 0 12px 32px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .08); color: var(--ink, #121730); font-size: 0.9375rem; font-weight: 500; line-height: 1.4; text-align: start; overflow-wrap: break-word; }
.infotip.is-below .infotip-body { bottom: auto; top: calc(100% + 0.6rem); }
.infotip.is-open .infotip-body,
.infotip:focus-within .infotip-body { display: block; animation: infotip-in 180ms ease; }
@media (hover: hover) {
  .infotip:hover .infotip-body { display: block; animation: infotip-in 180ms ease; }
  .infotip:hover .infotip-btn { background: var(--v-100, #e4dff8); }
  .infotip.is-open:hover .infotip-btn { background: var(--accent, #6c4bc9); }
}
@keyframes infotip-in { from { opacity: 0; scale: 0.97; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) { .infotip-body { animation: none !important; } }
.infotip-title { display: block; margin-block-end: 0.45rem; font-weight: 700; }
.infotip-row { display: flex; gap: 0.5rem; align-items: baseline; padding-block: 0.15rem; }
.infotip-n { flex: none; min-width: 2.2ch; font-family: var(--font-display, inherit); font-weight: 800; color: var(--accent-ink, var(--accent, #6c4bc9)); text-align: end; font-variant-numeric: tabular-nums; }
.infotip-note { display: block; margin-block-start: 0.5rem; color: var(--ink-3, #5f6380); font-size: 0.875rem; }