/* ==========================================================================
   Rechner-Werk shared stylesheet
   Order: 1 variables, 2 reset, 3 layout, 4 components, 5 utilities, 6 responsive, 7 print
   Spacing rule: padding, margin and gap use only var(--space-1..9), 0 or auto.
   ========================================================================== */

/* Self-hosted variable fonts (latin subset covers German umlauts, sharp s and euro sign) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/manrope-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* 1. VARIABLES ----------------------------------------------------------- */
:root {
  --color-primary: #1d4ed8;
  --color-primary-dark: #1e3a8a;
  --color-secondary: #0f766e;
  --color-accent: #f59e0b;
  --color-ink: #0f172a;
  --color-text: #1e293b;
  --color-muted: #475569;
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-alt: #eff6ff;
  --color-border: #cbd5e1;
  --color-border-soft: #e2e8f0;
  --color-danger: #b91c1c;
  --color-danger-bg: #fef2f2;
  --color-success: #15803d;
  --color-focus: #f59e0b;

  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.375rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --lh-tight: 1.2;
  --lh-base: 1.6;
  --ls-heading: -0.01em;
  --ls-body: 0;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.1);

  --container: 1120px;
  --header-h: 64px;
  --transition: 150ms ease-out;
}

/* 2. RESET --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-4)); }
body { margin: 0; font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-base); letter-spacing: var(--ls-body); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--color-primary); text-underline-offset: 3px; }
a:hover { color: var(--color-primary-dark); }
table { border-collapse: collapse; width: 100%; }
fieldset { border: 0; min-width: 0; }
summary { cursor: pointer; }
[hidden] { display: none !important; }

/* Accessibility: focus, skip link, motion */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.skip-link { position: absolute; left: var(--space-4); top: var(--space-2); z-index: 100; padding: var(--space-3) var(--space-4); background: var(--color-ink); color: #fff; border-radius: var(--radius-sm); transform: translateY(-200%); text-decoration: none; }
.skip-link:focus { transform: translateY(0); color: #fff; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* 3. LAYOUT -------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-4); }
main { display: block; padding-bottom: var(--space-8); }
.section { padding-block: var(--space-6); }
.section--alt { background: var(--color-surface); border-top: 1px solid var(--color-border-soft); border-bottom: 1px solid var(--color-border-soft); }
.grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.stack > * + * { margin-top: var(--space-4); }
.stack--lg > * + * { margin-top: var(--space-5); }
.page-layout { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }

/* Typography */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-ink); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); }
h1 { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); }
h2 { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin-top: var(--space-7); margin-bottom: var(--space-4); }
h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-top: var(--space-5); margin-bottom: var(--space-3); }
h4 { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.prose > * + * { margin-top: var(--space-4); }
.prose ul { list-style: disc; padding-left: var(--space-5); }
.prose ol { list-style: decimal; padding-left: var(--space-5); }
.prose li + li { margin-top: var(--space-2); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.lead { font-size: var(--fs-md); color: var(--color-muted); max-width: 70ch; }
.small { font-size: var(--fs-sm); color: var(--color-muted); }

/* 4. COMPONENTS ---------------------------------------------------------- */

/* Header + navigation */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-surface); border-bottom: 1px solid var(--color-border-soft); box-shadow: var(--shadow-sm); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-extrabold); color: var(--color-ink); text-decoration: none; }
.logo:hover { color: var(--color-primary); }
.logo__mark { width: 32px; height: 32px; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); }
.nav-toggle svg { width: 24px; height: 24px; }
.nav { position: absolute; left: 0; right: 0; top: 100%; display: none; max-height: calc(100vh - var(--header-h)); overflow-y: auto; padding: var(--space-4); background: var(--color-surface); border-bottom: 1px solid var(--color-border-soft); box-shadow: var(--shadow-md); }
.nav.is-open { display: block; }
.nav__list { display: flex; flex-direction: column; gap: var(--space-1); }
.nav__link, .nav__button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-ink); font-weight: var(--fw-medium); text-decoration: none; text-align: left; }
.nav__link:hover, .nav__button:hover { background: var(--color-surface-alt); color: var(--color-primary-dark); }
.nav__link[aria-current='page'] { color: var(--color-primary); box-shadow: inset 3px 0 0 var(--color-primary); font-weight: var(--fw-semibold); }
.nav__item { position: relative; }
.nav__submenu { display: none; padding: var(--space-1) 0 var(--space-2) var(--space-4); }
.nav__button[aria-expanded='true'] + .nav__submenu { display: block; }
.nav__button svg { width: 16px; height: 16px; transition: transform var(--transition); }
.nav__button[aria-expanded='true'] svg { transform: rotate(180deg); }
.nav__search { margin-top: var(--space-3); }

/* Search */
.search { position: relative; }
.search__input { width: 100%; min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); }
.search__input:focus-visible { border-color: var(--color-primary); }
.search__results { position: absolute; left: 0; right: 0; top: calc(100% + var(--space-1)); z-index: 60; max-height: 360px; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.search__result { display: block; min-height: 44px; padding: var(--space-3) var(--space-4); color: var(--color-ink); text-decoration: none; }
.search__result small { display: block; color: var(--color-muted); }
.search__result:hover, .search__result[aria-selected='true'] { background: var(--color-surface-alt); }
.search__empty { padding: var(--space-3) var(--space-4); color: var(--color-muted); }

/* Footer */
.site-footer { margin-top: var(--space-8); padding: var(--space-7) 0 var(--space-5); background: var(--color-ink); color: #cbd5e1; }
.site-footer a { color: #e2e8f0; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.footer__title { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--fs-md); color: #fff; }
.footer__list li + li { margin-top: var(--space-1); }
.footer__list a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__note { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid #334155; font-size: var(--fs-sm); color: #94a3b8; }

/* Breadcrumb */
.breadcrumb { padding-block: var(--space-4); font-size: var(--fs-sm); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); }
.breadcrumb li + li::before { content: '/'; color: var(--color-border); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb [aria-current='page'] { color: var(--color-muted); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: var(--space-3) var(--space-5); border: 1px solid transparent; border-radius: var(--radius-sm); font-weight: var(--fw-semibold); text-decoration: none; transition: background var(--transition), border-color var(--transition), color var(--transition); }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); color: #fff; }
.btn--secondary { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-primary); }
.btn--secondary:hover { background: var(--color-surface-alt); color: var(--color-primary-dark); }
.btn--small { padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Hero (home and category pages) */
.hero { padding: var(--space-7) 0 var(--space-6); background: linear-gradient(180deg, var(--color-surface-alt), var(--color-bg)); }
.hero__inner { display: grid; gap: var(--space-5); }
.hero h1 { font-size: var(--fs-2xl); }
.hero .search { max-width: 560px; }

/* CTA */
.cta { padding: var(--space-6) var(--space-5); background: var(--color-primary-dark); color: #fff; border-radius: var(--radius-md); }
.cta h2 { margin: 0 0 var(--space-3); color: #fff; font-size: var(--fs-xl); }
.cta p { margin-bottom: var(--space-5); color: #dbeafe; }
.cta .btn--primary { background: var(--color-accent); color: var(--color-ink); }
.cta .btn--primary:hover { background: #fbbf24; color: var(--color-ink); }
.cta .btn--secondary { background: transparent; color: #fff; border-color: #fff; }
.cta .btn--secondary:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Cards */
.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); color: var(--color-text); text-decoration: none; transition: box-shadow var(--transition), border-color var(--transition); }
a.card:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); color: var(--color-text); }
.card__title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--color-ink); line-height: var(--lh-tight); }
.card__text { font-size: var(--fs-sm); color: var(--color-muted); }
.card__more { margin-top: auto; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-primary); }
.card__icon { width: 32px; height: 32px; color: var(--color-primary); }

/* Tool block (calculator above the fold) */
.tool { padding-block: var(--space-5) var(--space-4); }
.tool__panel { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.tool__lead { margin-top: var(--space-3); color: var(--color-muted); max-width: 70ch; }
.tool__tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0 var(--space-4); }
.tab { min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-ink); font-weight: var(--fw-medium); }
.tab[aria-selected='true'] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* Forms */
.form-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field__label { font-weight: var(--fw-semibold); color: var(--color-ink); }
.field__hint { font-size: var(--fs-sm); color: var(--color-muted); }
.field__control { display: flex; align-items: stretch; }
.input, .select, .textarea { width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.textarea { min-height: 96px; resize: vertical; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--color-primary); }
.field__unit { display: inline-flex; align-items: center; padding: 0 var(--space-3); background: var(--color-bg); border: 1px solid var(--color-border); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--color-muted); white-space: nowrap; }
.field__control .input:not(:only-child) { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--color-danger); background: var(--color-danger-bg); }
.field__error { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-danger); }
.field__error:empty { display: none; }
.choice { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; }
.choice input { width: 20px; height: 20px; accent-color: var(--color-primary); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* Result card */
.result { margin-top: var(--space-5); padding: var(--space-5); background: var(--color-surface-alt); border: 1px solid #bfdbfe; border-radius: var(--radius-md); min-height: 96px; }
.result__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-primary-dark); }
.result__value { margin-top: var(--space-1); font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); color: var(--color-ink); overflow-wrap: anywhere; }
.result__steps { margin-top: var(--space-4); }
.result__steps summary { font-weight: var(--fw-semibold); color: var(--color-primary); min-height: 44px; display: flex; align-items: center; }
.result__steps ol { list-style: decimal; padding-left: var(--space-5); margin-top: var(--space-2); }
.result__steps li + li { margin-top: var(--space-2); }
.result__empty { color: var(--color-muted); }
.result__error { color: var(--color-danger); font-weight: var(--fw-semibold); }
.result__chart { margin-top: var(--space-5); }
.chart { width: 100%; height: auto; }
.chart__bar { fill: var(--color-primary); }
.chart__bar--alt { fill: var(--color-secondary); }
.chart__line { fill: none; stroke: var(--color-primary); stroke-width: 2; }
.chart__axis { stroke: var(--color-border); stroke-width: 1; }
.chart__text { fill: var(--color-muted); font-size: 12px; }

/* Result details: labelled values, tables and graphs; matrix input */
.result__lines { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin-top: var(--space-3); }
.result__lines dt { color: var(--color-muted); }
.result__lines dd { font-weight: var(--fw-semibold); color: var(--color-ink); overflow-wrap: anywhere; }
.result__table { margin-top: var(--space-4); }
.result__chart-title { margin-top: 0; font-size: var(--fs-md); }
.matrix { border: 0; padding: 0; margin: 0; min-width: 0; }
.matrix__size { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: var(--space-2) 0 var(--space-3); }
.matrix__size label { display: inline-flex; align-items: center; gap: var(--space-2); }
.matrix__size .select { width: auto; }
.matrix__grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(64px, 1fr)); gap: var(--space-2); max-width: 560px; }
.matrix__cell { text-align: right; padding-inline: var(--space-2); }
.matrix__cell--rhs { background: var(--color-surface-alt); }

/* How-to steps */
.howto__steps { counter-reset: step; display: grid; gap: var(--space-3); }
.howto__steps li { counter-increment: step; position: relative; padding-left: var(--space-7); min-height: 32px; }
.howto__steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; font-weight: var(--fw-bold); }

/* Method / formula */
.formula { padding: var(--space-4) var(--space-5); background: var(--color-surface); border-left: 4px solid var(--color-primary); border-radius: var(--radius-sm); overflow-x: auto; font-size: var(--fs-md); }
math { font-size: 1.1em; }

/* Tables */
.table-wrap { overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); }
.table { min-width: 480px; font-size: var(--fs-sm); }
.table caption { padding: var(--space-3) var(--space-4); text-align: left; font-weight: var(--fw-semibold); color: var(--color-ink); }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border-soft); vertical-align: top; }
.table th { background: var(--color-bg); color: var(--color-ink); font-weight: var(--fw-semibold); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Glossary and limitations */
.glossary { display: grid; gap: var(--space-4); }
.glossary dt { font-weight: var(--fw-semibold); color: var(--color-ink); }
.glossary dd { margin-top: var(--space-1); color: var(--color-text); }
.notice { padding: var(--space-4) var(--space-5); background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-sm); color: #78350f; }

/* FAQ */
.faq { display: grid; gap: var(--space-2); }
.faq details { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-sm); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; padding: var(--space-3) var(--space-4); font-weight: var(--fw-semibold); color: var(--color-ink); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font-size: var(--fs-xl); line-height: 1; color: var(--color-primary); }
.faq details[open] summary::after { content: '\2212'; }
.faq__answer { padding: 0 var(--space-4) var(--space-4); color: var(--color-text); }

/* Related, export, trust, ad slots, revision log */
.related__grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.export { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.trust { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border-soft); border-left: 4px solid var(--color-secondary); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--color-muted); }
.trust strong { color: var(--color-ink); }
.sources { list-style: disc; padding-left: var(--space-5); font-size: var(--fs-sm); }
.sources li + li { margin-top: var(--space-2); }
.ad-slot { display: flex; align-items: center; justify-content: center; min-height: 250px; margin: var(--space-5) 0; background: var(--color-bg); border: 1px dashed var(--color-border); border-radius: var(--radius-sm); color: var(--color-muted); font-size: var(--fs-xs); }
.ad-slot:empty { display: none; }
.revisions { font-size: var(--fs-sm); }
.revisions li { display: flex; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-soft); }
.revisions time { flex: none; font-weight: var(--fw-semibold); color: var(--color-ink); }

/* Author card */
.author { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border-soft); border-left: 4px solid var(--color-secondary); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.author__img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius-md); background: var(--color-border-soft); }
.author__body > * + * { margin-top: var(--space-2); }
.author__label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-secondary); }
.author__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-ink); line-height: var(--lh-tight); }
.author__text, .author__meta, .author__note { font-size: var(--fs-sm); color: var(--color-muted); }
.author__links { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.author--full { grid-template-columns: 1fr; padding: var(--space-5); }
.author--full .author__img { width: min(70vw, 280px); }
.author--full .author__name { font-size: var(--fs-xl); }
.author--full .author__text { font-size: var(--fs-base); }
@media (min-width: 768px) {
  .author { grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5); }
  .author--full { grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6); }
  .author--full .author__img { width: 100%; }
}
@media print { .author__img { display: none; } .author { grid-template-columns: 1fr; box-shadow: none; } }

/* A-Z index and category listing */
.az-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.az-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--color-border-soft); border-radius: var(--radius-sm); background: var(--color-surface); font-weight: var(--fw-semibold); text-decoration: none; }
.link-list { display: grid; gap: var(--space-1) var(--space-5); grid-template-columns: 1fr; }
.link-list a { display: inline-flex; align-items: center; min-height: 44px; }
.badge { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-alt); color: var(--color-primary-dark); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }

/* 404 */
.error-page { padding: var(--space-8) 0; text-align: center; }
.error-page__code { font-family: var(--font-display); font-size: 6rem; font-weight: var(--fw-extrabold); line-height: 1; color: var(--color-primary); }

/* Calculator keypad (homepage scientific calculator) */
.calc__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.calc__head h2 { margin: 0; font-size: var(--fs-md); }
.calc__angle { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-pill); overflow: hidden; }
.calc__angle button { min-height: 44px; min-width: 44px; padding: 0 var(--space-3); background: var(--color-surface); color: var(--color-ink); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.calc__angle button[aria-pressed='true'] { background: var(--color-primary); color: #fff; }
.calc__input { min-height: 56px; font-family: var(--font-display); font-size: var(--fs-lg); text-align: right; }
.calc__out { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface-alt); border-radius: var(--radius-sm); min-height: 64px; }
.calc__out-value { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-extrabold); color: var(--color-ink); text-align: right; overflow-wrap: anywhere; }
.calc__out-read { font-size: var(--fs-sm); color: var(--color-muted); text-align: right; overflow-wrap: anywhere; }
.calc__out-error { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-danger); }
.calc__keys { display: grid; gap: var(--space-2); grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: var(--space-3); }
.key { min-height: 44px; padding: 0 var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); font-size: var(--fs-md); font-weight: var(--fw-semibold); transition: background var(--transition); }
.key:hover { background: var(--color-surface-alt); }
.key:active { background: var(--color-border-soft); }
.key--fn { background: var(--color-bg); font-size: var(--fs-sm); }
.key--op { background: var(--color-surface-alt); color: var(--color-primary-dark); }
.key--clear { color: var(--color-danger); }
.key--eq { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.key--eq:hover { background: var(--color-primary-dark); }
.calc__keys--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.key--wide { grid-column: span 2; }
.calc--large .key { min-height: 56px; font-size: var(--fs-lg); }
.calc--large .calc__input { min-height: 64px; font-size: var(--fs-xl); }
.calc__more { margin-top: var(--space-3); }
.calc__more summary { display: flex; align-items: center; min-height: 44px; font-weight: var(--fw-semibold); color: var(--color-primary); cursor: pointer; }
.calc__more .calc__keys { margin-top: var(--space-1); }
.calc__history { margin-top: var(--space-3); }
.calc__history summary { display: flex; align-items: center; min-height: 44px; font-weight: var(--fw-semibold); color: var(--color-primary); cursor: pointer; }
.calc__history ol { display: grid; gap: var(--space-1); }
.calc__history button { display: flex; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-bg); text-align: left; font-size: var(--fs-sm); }
.calc__history button:hover { background: var(--color-surface-alt); }
.calc__history-clear { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-muted); text-decoration: underline; min-height: 44px; }
.hero__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* 5. UTILITIES ----------------------------------------------------------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.text-center { text-align: center; }
.text-muted { color: var(--color-muted); }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.no-js-hide { display: none; }
.js .no-js-hide { display: block; }

/* 6. RESPONSIVE (mobile first; tablet from 768px) ------------------------ */
@media (min-width: 768px) {
  .container { padding: 0 var(--space-5); }
  h1 { font-size: var(--fs-3xl); }
  .hero h1 { font-size: var(--fs-3xl); }
  .hero { padding: var(--space-8) 0 var(--space-7); }
  .grid--2, .related__grid, .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .link-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool__panel { padding: var(--space-6); }
  .cta { padding: var(--space-7) var(--space-6); }
  .nav-toggle { display: none; }
  .nav { position: static; display: flex; align-items: center; gap: var(--space-3); max-height: none; padding: 0; overflow: visible; background: transparent; border: 0; box-shadow: none; }
  .nav__list { flex-direction: row; align-items: center; gap: var(--space-1); }
  .nav__link, .nav__button { width: auto; justify-content: center; gap: var(--space-1); }
  .nav__link[aria-current='page'] { box-shadow: inset 0 -3px 0 var(--color-primary); border-radius: 0; }
  .nav__submenu { position: absolute; left: 0; top: 100%; z-index: 60; min-width: 280px; padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
  .nav__submenu .nav__link { justify-content: flex-start; }
  .nav__search { width: 220px; margin-top: 0; }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .link-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-layout--aside { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .hero__inner--calc { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: var(--space-7); }
  .nav__search { width: 280px; }
}

/* 7. PRINT --------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .breadcrumb, .nav, .search, .ad-slot, .cta, .export, .related, .skip-link, .form-actions, .tool__tabs { display: none !important; }
  body { background: #fff; color: #000; }
  .tool__panel, .result, .table-wrap { box-shadow: none; border: 1px solid #999; }
  a { color: #000; text-decoration: underline; }
  .faq details { break-inside: avoid; }
  .faq details > .faq__answer { display: block; }
}
/* Tool page: category hero, watermark, coloured sections */
.tool-hero { --cat: var(--color-primary); --cat-tint: var(--color-surface-alt); position: relative; overflow: hidden; background: linear-gradient(180deg, var(--cat-tint) 0%, var(--color-bg) 100%); border-bottom: 1px solid var(--color-border-soft); }
.tool-hero__mark { position: absolute; right: -48px; top: -24px; width: 340px; height: 340px; color: var(--cat); opacity: 0.08; pointer-events: none; }
.tool-hero .tool { position: relative; z-index: 1; padding-bottom: var(--space-6); }
.cat-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4) 0 var(--space-3); margin-bottom: var(--space-3); background: var(--color-surface); border: 1px solid var(--cat); border-radius: var(--radius-pill); color: var(--cat); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.cat-chip:hover { background: var(--cat); color: #fff; }
.tool-hero h1 { color: var(--color-ink); }
.badge--check { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--color-surface); border: 1px solid var(--color-border-soft); color: var(--color-text); }
.badge--check svg { color: var(--cat); flex: none; }
.tool-hero .hero__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tool-hero .tool__panel { position: relative; border-top: 4px solid var(--cat); box-shadow: var(--shadow-md); }
.tool-hero .tool__panel::after { content: ''; position: absolute; right: var(--space-4); bottom: var(--space-3); width: 48px; height: 48px; background: url('/favicon/favicon.svg') center / contain no-repeat; opacity: 0.07; pointer-events: none; }
.tool-hero .result { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-left: 4px solid var(--cat); position: relative; }
.tool-hero .result__label { color: var(--cat); }
.tool-hero .tool__tabs .tab[aria-selected='true'] { background: var(--cat); border-color: var(--cat); }
.tool-hero .btn--primary { background: var(--cat); }
.tool-hero .btn--primary:hover { filter: brightness(0.9); background: var(--cat); }
.tool-hero .key--eq { background: var(--cat); border-color: var(--cat); }

/* Quick links to the sections, coloured like the sections */
.sec-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.sec-nav__link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); background: var(--sec-tint); border: 1px solid var(--sec-accent); border-radius: var(--radius-pill); color: var(--sec-accent); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.sec-nav__link:hover { background: var(--sec-accent); color: #fff; }

/* Section colours: one accent per kind of content */
.sec { --sec-accent: #1d4ed8; --sec-tint: #eff6ff; --sec-line: #bfdbfe; padding: var(--space-7) 0; background: var(--sec-tint); border-top: 1px solid var(--sec-line); scroll-margin-top: var(--space-6); }
.sec--howto { --sec-accent: #1d4ed8; --sec-tint: #eff6ff; --sec-line: #bfdbfe; }
.sec--method { --sec-accent: #0f766e; --sec-tint: #f0fdfa; --sec-line: #99f6e4; }
.sec--examples { --sec-accent: #b45309; --sec-tint: #fffbeb; --sec-line: #fde68a; }
.sec--rates { --sec-accent: #0e7490; --sec-tint: #ecfeff; --sec-line: #a5f3fc; }
.sec--limits { --sec-accent: #be123c; --sec-tint: #fff1f2; --sec-line: #fecdd3; }
.sec--faq { --sec-accent: #6d28d9; --sec-tint: #f5f3ff; --sec-line: #ddd6fe; }
.sec--related { --sec-accent: #15803d; --sec-tint: #f0fdf4; --sec-line: #bbf7d0; }
.sec--sources { --sec-accent: #475569; --sec-tint: #f8fafc; --sec-line: #cbd5e1; }
.sec__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.sec__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--sec-accent); color: #fff; box-shadow: var(--shadow-sm); }
.sec__eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--sec-accent); }
.sec__title { margin: 0; font-size: var(--fs-xl); }
.sec__sub { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-md); color: var(--sec-accent); }
.sec__card { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--sec-line); border-left: 4px solid var(--sec-accent); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.sec__card > * + * { margin-top: var(--space-4); }
.sec .howto__steps li::before { background: var(--sec-accent); }
.sec a { color: var(--sec-accent); }

/* Method: formula in its own box */
.sec--method math[display='block'] { display: block; margin: var(--space-4) 0; padding: var(--space-4) var(--space-5); background: var(--sec-tint); border: 1px dashed var(--sec-accent); border-radius: var(--radius-sm); font-size: 1.4em; text-align: center; overflow-x: auto; }
.sec--method .prose strong { color: var(--sec-accent); }

/* Examples: coloured table head, striped rows */
.sec--examples .table-wrap, .sec--rates .table-wrap { border-color: var(--sec-line); }
.sec--examples .table thead th, .sec--rates .table thead th { background: var(--sec-accent); color: #fff; border-bottom: 0; }
.sec--examples .table tbody tr:nth-child(even), .sec--rates .table tbody tr:nth-child(even) { background: var(--sec-tint); }
.sec--examples .prose h3 { color: var(--sec-accent); font-size: var(--fs-md); }

/* Limits: warning markers, glossary as cards */
.sec--limits .prose ul { list-style: none; padding-left: 0; }
.sec--limits .prose li { position: relative; padding-left: var(--space-6); }
.sec--limits .prose li::before { content: '!'; position: absolute; left: 0; top: 2px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sec-accent); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.sec--limits .glossary { grid-template-columns: 1fr; }
.sec--limits .glossary > div { padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--sec-line); border-top: 3px solid var(--sec-accent); border-radius: var(--radius-sm); }
.sec--limits .glossary dt { color: var(--sec-accent); }

/* FAQ */
.sec--faq .faq details { border-left: 4px solid var(--sec-accent); border-color: var(--sec-line); border-left-color: var(--sec-accent); }
.sec--faq .faq summary::after { color: var(--sec-accent); }
.sec--faq .faq details[open] { background: var(--color-surface); box-shadow: var(--shadow-sm); }

/* Related */
.sec--related .card:hover { border-color: var(--sec-accent); }
.sec--related .card__more { color: var(--sec-accent); }

@media (min-width: 768px) {
  .sec--limits .glossary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-hero__mark { right: 2%; width: 420px; height: 420px; }
}
@media (max-width: 767px) {
  .sec { padding: var(--space-6) 0; }
  .sec__card { padding: var(--space-4); }
  .tool-hero__mark { width: 240px; height: 240px; right: -60px; }
}
@media print {
  .tool-hero__mark, .sec-nav, .cat-chip { display: none; }
  .sec { background: none; padding: var(--space-4) 0; }
  .sec__icon { display: none; }
  .result::after { content: 'rechner-werk.de'; display: block; margin-top: var(--space-3); text-align: right; font-size: var(--fs-xs); color: #94a3b8; }
}

.sec-nav__link, .cat-chip, .sec-nav__link:hover, .cat-chip:hover { text-decoration: none; }
/* More section tones, ribbon labels, cards and callouts */
.sec--people { --sec-accent: #be185d; --sec-tint: #fdf2f8; --sec-line: #fbcfe8; }
.sec--legal { --sec-accent: #4338ca; --sec-tint: #eef2ff; --sec-line: #c7d2fe; }
.sec--goal { --sec-accent: #c2410c; --sec-tint: #fff7ed; --sec-line: #fed7aa; }
.sec--info { --sec-accent: #0369a1; --sec-tint: #f0f9ff; --sec-line: #bae6fd; }
.sec--cats { --sec-accent: #1d4ed8; --sec-tint: #ffffff; --sec-line: #dbeafe; }
.sec--plain { --sec-tint: var(--color-bg); }
.sec--cat { --sec-accent: var(--cat); --sec-tint: var(--cat-tint); --sec-line: color-mix(in srgb, var(--cat) 28%, #ffffff); }

.sec__eyebrow { display: inline-block; margin-bottom: var(--space-1); padding: 3px 18px 3px 12px; background: var(--sec-accent); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }

/* Inline icon from markdown (:name:) and callouts */
.ico { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-inline: 0.1em; color: var(--sec-accent, var(--color-primary)); }
.callout { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--co-line); border-left: 4px solid var(--co); background: var(--co-tint); }
.callout__icon { flex: none; width: 24px; height: 24px; color: var(--co); margin-top: 2px; }
.callout__body > * + * { margin-top: var(--space-2); }
.callout__title { font-weight: var(--fw-bold); color: var(--co); }
.callout--tip { --co: #15803d; --co-tint: #f0fdf4; --co-line: #bbf7d0; }
.callout--note { --co: #0369a1; --co-tint: #f0f9ff; --co-line: #bae6fd; }
.callout--warning { --co: #b45309; --co-tint: #fffbeb; --co-line: #fde68a; }
.callout--example { --co: #6d28d9; --co-tint: #f5f3ff; --co-line: #ddd6fe; }

.faq__q { display: inline-flex; align-items: center; gap: var(--space-3); }
.faq__q svg { flex: none; color: var(--sec-accent, var(--color-primary)); }
.glossary dt { display: flex; align-items: center; gap: var(--space-2); }
.glossary dt svg { flex: none; }
.sources a::after { content: ' \2197'; }

/* Category and calculator cards */
.cat-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.cat-card { --cat: var(--color-primary); --cat-tint: var(--color-surface-alt); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); background: linear-gradient(160deg, var(--cat-tint) 0%, #ffffff 80%); border: 1px solid color-mix(in srgb, var(--cat) 25%, #ffffff); border-top: 4px solid var(--cat); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); color: var(--color-text); text-decoration: none; transition: transform var(--transition), box-shadow var(--transition); }
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--color-text); }
.cat-card__mark { position: absolute; right: -24px; bottom: -28px; color: var(--cat); opacity: 0.09; pointer-events: none; }
.cat-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--cat); color: #fff; box-shadow: var(--shadow-sm); }
.cat-card__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-ink); line-height: var(--lh-tight); }
.cat-card__text { font-size: var(--fs-sm); color: var(--color-muted); position: relative; }
.cat-card__more { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: auto; padding-top: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--cat); position: relative; }
.tool-card { --cat: var(--color-primary); --cat-tint: var(--color-surface-alt); display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border-soft); border-left: 4px solid var(--cat); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); color: var(--color-text); text-decoration: none; transition: transform var(--transition), box-shadow var(--transition); }
.tool-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--color-text); }
.tool-card__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--cat-tint); color: var(--cat); }
.tool-card__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.tool-card__title { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--color-ink); line-height: var(--lh-tight); }
.tool-card__text { font-size: var(--fs-sm); color: var(--color-muted); }
.tool-card__more { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--cat); }

/* Homepage hero with soft colour */
.hero--home { background: radial-gradient(520px 260px at 8% 0%, #dbeafe 0%, transparent 70%), radial-gradient(520px 260px at 95% 8%, #fce7f3 0%, transparent 70%), radial-gradient(480px 240px at 55% 100%, #dcfce7 0%, transparent 70%), var(--color-bg); }
.hero__cats { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hero__cat { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3); background: var(--cat-tint); border: 1px solid color-mix(in srgb, var(--cat) 35%, #ffffff); border-radius: var(--radius-pill); color: var(--cat); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-decoration: none; }
.hero__cat:hover { background: var(--cat); color: #fff; }

/* All calculators page: category blocks and A to Z */
.cat-block { --cat: var(--color-primary); --cat-tint: var(--color-surface-alt); scroll-margin-top: var(--space-6); padding: var(--space-5); background: var(--cat-tint); border: 1px solid color-mix(in srgb, var(--cat) 25%, #ffffff); border-left: 6px solid var(--cat); border-radius: var(--radius-md); }
.cat-block + .cat-block { margin-top: var(--space-5); }
.cat-block__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.cat-block__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--cat); color: #fff; }
.cat-block__title { margin: 0; font-size: var(--fs-lg); }
.cat-block__count { padding: 2px var(--space-3); border-radius: var(--radius-pill); background: #fff; border: 1px solid color-mix(in srgb, var(--cat) 35%, #ffffff); color: var(--cat); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.cat-block__open { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--cat); text-decoration: none; }
.tool-chips { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
.tool-chip { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-3); background: #fff; border: 1px solid color-mix(in srgb, var(--cat) 22%, #ffffff); border-radius: var(--radius-sm); color: var(--color-ink); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; }
.tool-chip svg { flex: none; color: var(--cat); }
.tool-chip:hover { border-color: var(--cat); background: var(--cat-tint); color: var(--color-ink); }
.az-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-top: var(--space-5); }
.az-card { padding: var(--space-4); background: #fff; border: 1px solid var(--sec-line, var(--color-border-soft)); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); scroll-margin-top: var(--space-6); }
.az-card__letter { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 var(--space-2); margin-bottom: var(--space-3); border-radius: var(--radius-pill); background: var(--sec-accent, var(--color-primary)); color: #fff; font-family: var(--font-display); font-weight: var(--fw-extrabold); }
.az-card ul { display: grid; gap: var(--space-1); }
.az-card a { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; color: var(--color-ink); font-size: var(--fs-sm); text-decoration: none; }
.az-card a:hover { text-decoration: underline; }
.az-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cat, var(--color-primary)); }
.sec--cats .az-nav a, .sec .az-nav a { background: #fff; border-color: var(--sec-line); color: var(--sec-accent); text-decoration: none; }
.sec .az-nav a:hover { background: var(--sec-accent); color: #fff; }

@media (min-width: 768px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .az-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tool-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .az-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media print { .cat-card__mark { display: none; } }

.sec .container > .prose, .sec .container > .howto__steps { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--sec-line); border-left: 4px solid var(--sec-accent); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.sec .container > .howto__steps { margin-top: 0; }
.sec .container > .table-wrap { border-color: var(--sec-line); }

/* Calculator panel: header bar, dark display, soft 3D keys (homepage, /taschenrechner, /rechner-oeffnen) */
.calc-panel { --calc: var(--cat, #1d4ed8); overflow: hidden; background: #ffffff; border: 1px solid color-mix(in srgb, var(--calc) 35%, #ffffff); border-radius: 20px; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16), 0 0 0 5px color-mix(in srgb, var(--calc) 10%, transparent); }
.calc-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: linear-gradient(135deg, color-mix(in srgb, var(--calc) 62%, #000000) 0%, var(--calc) 100%); color: #ffffff; }
.calc-panel__head h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-md); color: #ffffff; }
.calc-panel__head h2 svg { flex: none; }
.calc-panel .calc__angle { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.12); }
.calc-panel .calc__angle button { background: transparent; color: #ffffff; }
.calc-panel .calc__angle button[aria-pressed='true'] { background: #ffffff; color: var(--calc); }
.calc-panel__body { padding: var(--space-4); background: linear-gradient(180deg, #f1f5f9 0%, #ffffff 60%); }

.calc-screen { padding: var(--space-3) var(--space-4); background: #0f172a; border-radius: 14px; box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5); }
.calc-screen .field { gap: 0; }
.calc-screen .calc__input, .calc-screen .field.has-error .calc__input { min-height: 44px; padding: var(--space-1) 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; color: #e2e8f0; caret-color: #fbbf24; font-size: var(--fs-lg); }
.calc-screen .calc__input::placeholder { color: #64748b; }
.calc-screen .calc__input:focus-visible { outline-offset: 6px; }
.calc-screen .field__error { color: #fca5a5; }
.calc-screen .calc__out { min-height: 64px; margin-top: var(--space-1); padding: var(--space-2) 0 0; background: transparent; border-top: 1px solid rgba(148, 163, 184, 0.28); border-radius: 0; }
.calc-screen .calc__out-value { color: #fbbf24; font-size: 2rem; line-height: 1.2; }
.calc-screen .calc__out-read { color: #94a3b8; }
.calc-screen .calc__out-error { color: #fca5a5; }

.calc-panel .key { border: 0; border-bottom: 3px solid rgba(15, 23, 42, 0.14); border-radius: 12px; background: #ffffff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); color: var(--color-ink); font-weight: var(--fw-semibold); transition: transform 80ms ease-out, background var(--transition), box-shadow var(--transition); }
.calc-panel .key:hover { background: #f8fafc; box-shadow: 0 3px 8px rgba(15, 23, 42, 0.14); }
.calc-panel .key:active { transform: translateY(2px); border-bottom-width: 1px; box-shadow: none; }
.calc-panel .key--fn { background: #eef2ff; color: #3730a3; }
.calc-panel .key--fn:hover { background: #e0e7ff; }
.calc-panel .key--op { background: color-mix(in srgb, var(--calc) 12%, #ffffff); color: var(--calc); }
.calc-panel .key--op:hover { background: color-mix(in srgb, var(--calc) 20%, #ffffff); }
.calc-panel .key--clear { background: #fee2e2; color: #b91c1c; }
.calc-panel .key--clear:hover { background: #fecaca; }
.calc-panel .key--eq { background: #f59e0b; border-bottom-color: #b45309; color: #1c1917; box-shadow: 0 3px 10px rgba(245, 158, 11, 0.45); }
.calc-panel .key--eq:hover { background: #fbbf24; }
.calc-panel .calc__keys { gap: var(--space-2); margin-top: var(--space-3); }
.calc-panel .calc__more summary, .calc-panel .calc__history summary { color: var(--calc); }
.calc-panel .calc__history button { background: #ffffff; border: 1px solid var(--color-border-soft); border-radius: var(--radius-sm); }
.calc-panel .calc__history button:hover { background: color-mix(in srgb, var(--calc) 8%, #ffffff); }
@media (max-width: 480px) {
  .calc-screen .calc__out-value { font-size: 1.6rem; }
  .calc-panel__body { padding: var(--space-3); }
}
@media print { .calc-panel { box-shadow: none; } }