/* easytools4me.de - single hand-written stylesheet. Tokens live in :root; components use var(--et-*) only. Mobile-first, min-width queries only (48rem, 64rem). Register: modern product surface - white working cards on a cool tinted ground, system sans, petrol-green accent, two shadow tokens. Navigation wraps; nothing scrolls horizontally except .et-table-wrap. */ :root { color-scheme: light; --et-space-1: 0.25rem; --et-space-2: 0.5rem; --et-space-3: 0.75rem; --et-space-4: 1rem; --et-space-5: 1.5rem; --et-space-6: 2rem; --et-space-7: 3rem; --et-space-8: 4rem; --et-text-xs: 0.8125rem; --et-text-sm: 0.875rem; --et-text-base: 1rem; --et-text-lg: 1.125rem; --et-text-xl: 1.375rem; --et-text-2xl: 1.75rem; --et-text-3xl: 2.5rem; --et-text-4xl: 3.25rem; --et-leading-body: 1.6; /* Wide-measure compensation: running prose fills the content column (see the prose block near the end of this file), and a long line needs more leading to be tracked back reliably. */ --et-leading-prose: 1.75; --et-leading-tight: 1.15; --et-tracking-caps: 0.08em; --et-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --et-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --et-radius-sm: 8px; --et-radius-md: 12px; --et-radius-pill: 999px; --et-container: 64rem; /* N1: et-measure-text bounds running text (p/ul/ol/dl/blockquote) and is the ONLY measure applied:.... Full note: docs/stylesheet-notes.md */ --et-measure-text: 60ch; /* Palette verified against BOTH bg and surface (see design-system spec for the ratios). Warm paper ground; only working surfaces (form, result) are lifted out of it in white. */ --et-color-bg: #f4f2ed; --et-color-surface: #ffffff; --et-color-text: #16232c; --et-color-text-muted: #4d5a66; --et-color-border: #ddd8cf; --et-color-border-strong: #6f7a84; --et-color-rule: #c8c1b4; --et-color-accent: #0a5c4e; --et-color-accent-soft: #e2f0ea; --et-color-on-accent: #ffffff; --et-color-focus: #0a5c4e; --et-color-success: #15713c; --et-color-warning: #925a00; --et-color-danger: #b4231f; --et-color-footer-bg: #17222c; --et-color-footer-text: #e7ecf1; --et-color-footer-link: #8fd6c6; /* Dark-ink counterpart to --et-color-rule: the footer needs a hairline that reads on the ink band, where the light-mode muted colour sits at about 1.6 to 1 and is nearly invisible. */ --et-color-footer-rule: rgba(255, 255, 255, 0.14); /* One hue per category, so discovery is colour-coded rather than eight identical green rows. Every value clears WCAG AA against BOTH the paper ground and white (measured 5.82 to 7.61 on paper), because a category colour carries text and marks on both surfaces. */ --et-cat-steuern-gehalt: #0a5c4e; --et-cat-familie-soziales: #a03418; --et-cat-arbeit: #2f4a8a; --et-cat-finanzen: #1f6b3a; --et-cat-gesundheit: #9b1c46; --et-cat-bildung: #6b3a86; --et-cat-auto-verkehr: #7a4b12; --et-cat-alltag: #0f5f72; --et-shadow-sm: 0 1px 2px rgba(23, 34, 44, 0.06), 0 1px 3px rgba(23, 34, 44, 0.08); --et-shadow-md: 0 4px 16px rgba(23, 34, 44, 0.12); } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } /* Submitting a calculator moves the visitor to the answer rather than dropping them at the top; smooth makes that read as movement instead of a jump. The prefers-reduced-motion block near the end of this file already resets scroll-behavior, so the preference is honoured by construction and this needs no query of its own. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--et-color-bg); color: var(--et-color-text); font-family: var(--et-font-sans); font-size: var(--et-text-base); line-height: var(--et-leading-body); overflow-wrap: break-word; } img, svg, video { max-width: 100%; height: auto; } /* N2: German is a compounding language and this site names things like "Datenschutzerklärung" and ".... Full note: docs/stylesheet-notes.md */ h1, h2, h3, h4 { font-weight: 700; line-height: var(--et-leading-tight); letter-spacing: -0.015em; margin: 0 0 var(--et-space-3); hyphens: auto; } h1 { font-size: clamp(var(--et-text-2xl), 7vw, var(--et-text-3xl)); font-weight: 800; } h2 { font-size: var(--et-text-2xl); margin-top: var(--et-space-7); } h3 { font-size: var(--et-text-xl); margin-top: var(--et-space-5); } h4 { font-size: var(--et-text-lg); } p, ul, ol, dl, table, figure { margin: 0 0 var(--et-space-4); } .et-lead { font-size: var(--et-text-lg); color: var(--et-color-text-muted); } :is(.et-card, .et-footer, .et-disclaimer, .et-banner, .et-result) :is(h2, h3, h4) { margin-top: 0; } ul, ol { padding-left: var(--et-space-5); } li + li { margin-top: var(--et-space-1); } /* `anywhere`, not `break-word`: only the former reduces min-content width, so only the former can shrink the track an unbreakable identifier sits in. Same distinction the .et-dl-manifest rule documents. On 
 it is not enough on its own: the UA default `white-space: pre` forbids
   wrapping outright and overrides it, which is why /datumsrechner/ stayed 522px wide at a 360px
   viewport until `pre-wrap` was added. `pre-wrap` keeps the authored line breaks and adds wrapping
   for the lines that do not fit, which is what a formula wants; a sideways-scrolling box is not. */
code, kbd, samp { font-family: var(--et-font-mono); font-size: var(--et-text-sm); overflow-wrap: anywhere; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
[hidden] { display: none !important; }

a { color: var(--et-color-accent); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 0.12em; }

:focus-visible {
  outline: 2px solid var(--et-color-focus);
  outline-offset: 2px;
  border-radius: var(--et-radius-sm);
}

.et-container {
  width: 100%;
  max-width: var(--et-container);
  margin: 0 auto;
  padding: 0 var(--et-space-4);
}

.et-muted { color: var(--et-color-text-muted); }
.et-small { font-size: var(--et-text-sm); }

/* Secondary text that names a limit: what a calculation does not cover, what a figure is qualified
   by, when the formulas were last checked. Each of these classes was in the markup already and
   matched nothing here, so the text rendered at body weight and size and read as part of the answer
   rather than as an aside about it. They share .et-field__help's treatment because they are the same
   kind of remark in a different place, and one treatment is the point of having a design system. */
.et-form__hint,
.et-form__note,
.et-prose__meta,
.et-result__note { color: var(--et-color-text-muted); font-size: var(--et-text-sm); }
.et-num { font-variant-numeric: tabular-nums; }

.et-link-button{display:inline;min-width:44px;min-height:44px;padding:0;border:0;background:transparent;color:var(--et-color-accent);font:inherit;text-decoration:underline;cursor:pointer}

.et-visually-hidden { position: absolute; width: 0.0625rem; height: 0.0625rem; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link { position: absolute; left: var(--et-space-2); top: var(--et-space-2); z-index: 20; transform: translateY(-200%); background: var(--et-color-accent); color: var(--et-color-on-accent); padding: var(--et-space-2) var(--et-space-4); border-radius: var(--et-radius-sm); text-decoration: none; }
.skip-link:focus { transform: translateY(0); }

/* ---------- header ---------- */

/* Reflow floor. At 320px with 200% text zoom the masthead was the widest thing on EVERY page: the
   wordmark is one unbreakable word at --et-text-xl, and a nav label like "Familie & Soziales" could
   not break either, so the band set the document width and every page scrolled sideways. `min-width:
   0` lets these flex items shrink below their content, and `overflow-wrap: anywhere` gives the text
   somewhere to break. Nothing changes at normal sizes, where neither ever needs to break. */

/* The one solid ink band on the site: a fixed anchor that leaves the paper ground below it alone. */
.et-header {
  background: var(--et-color-footer-bg);
  color: var(--et-color-footer-text);
  border-bottom: 3px solid var(--et-color-accent);
}
.et-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--et-space-3);
  padding-top: var(--et-space-4);
  padding-bottom: var(--et-space-2);
}
.et-wordmark { display: inline-flex; align-items: center; gap: var(--et-space-2); font-size: var(--et-text-xl); font-weight: 800; letter-spacing: -0.02em; text-decoration: none; color: var(--et-color-footer-text); margin-right: auto; min-width: 0; overflow-wrap: anywhere; }

/* First-party inline marks. Sized in em so a mark always matches the type it sits beside, and
   coloured by `currentColor` so it needs no per-context variant. */
.et-icon { flex: none; width: 1.5em; height: 1.5em; }
.et-icon--brand { width: 1.6em; height: 1.6em; color: var(--et-color-footer-link); }
.et-icon--cat { width: 1.75rem; height: 1.75rem; color: var(--et-color-accent); }

/* A category carries its own hue wherever it is named. `--et-cat` is set once per element by the
   `data-cat` hook below, and the mark, the count and the rule all inherit it, so one attribute
   colours the whole row without a class per category. */
[data-cat="steuern-gehalt"] { --et-cat: var(--et-cat-steuern-gehalt); }
[data-cat="familie-soziales"] { --et-cat: var(--et-cat-familie-soziales); }
[data-cat="arbeit"] { --et-cat: var(--et-cat-arbeit); }
[data-cat="finanzen"] { --et-cat: var(--et-cat-finanzen); }
[data-cat="gesundheit"] { --et-cat: var(--et-cat-gesundheit); }
[data-cat="bildung"] { --et-cat: var(--et-cat-bildung); }
[data-cat="auto-verkehr"] { --et-cat: var(--et-cat-auto-verkehr); }
[data-cat="alltag"] { --et-cat: var(--et-cat-alltag); }
[data-cat] .et-icon { color: var(--et-cat, var(--et-color-accent)); }
[data-cat] .et-figure { color: var(--et-cat, var(--et-color-accent)); }
[data-cat] .et-card__meta { color: var(--et-cat, var(--et-color-text-muted)); }
.et-title-icon[data-cat] .et-icon { color: var(--et-cat, var(--et-color-accent)); }
.et-icon--title { width: 1em; height: 1em; color: var(--et-color-accent); }
.et-icon--meta { width: 1.15em; height: 1.15em; }
.et-title-icon { display: flex; align-items: center; gap: var(--et-space-3); }
.et-card__meta { display: flex; align-items: center; gap: var(--et-space-2); }
/* The nav wraps - never a scrollbar, never a truncated category. */
.et-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--et-space-2);
  list-style: none;
  margin: 0;
  padding: 0 0 var(--et-space-3);
}
.et-nav li { margin: 0; min-width: 0; }
/* Tighter padding at narrow widths, so eight wrapped categories cost three rows of the first
   viewport rather than four. The minimum target size is never traded away for it. */
.et-nav a { display: flex; align-items: center; min-width: 0; overflow-wrap: anywhere; min-height: 44px; padding: 0 var(--et-space-2); border-radius: var(--et-radius-sm); text-decoration: none; color: var(--et-color-footer-text); font-size: var(--et-text-xs); font-weight: 500; transition: background-color 0.15s, color 0.15s; }
.et-nav a:hover { background: rgba(255, 255, 255, 0.12); color: var(--et-color-on-accent); }
.et-nav a[aria-current="page"], .et-nav a.is-active { background: var(--et-color-accent); color: var(--et-color-on-accent); font-weight: 600; }
.et-header :focus-visible { outline-color: var(--et-color-footer-link); }

/* ---------- breadcrumbs ---------- */

.et-breadcrumb { padding: var(--et-space-3) 0 0; font-size: var(--et-text-sm); }
.et-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--et-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.et-breadcrumb li { margin: 0; display: flex; gap: var(--et-space-2); }
.et-breadcrumb li + li::before { content: "\203A"; color: var(--et-color-text-muted); }
.et-breadcrumb [aria-current="page"] { color: var(--et-color-text-muted); }

/* ---------- main / footer ---------- */

/* Margins, not padding: .et-container on 
 would override a padding shorthand. */
main { display: block; margin: var(--et-space-5) 0 var(--et-space-8); }

.et-footer {
  background: var(--et-color-footer-bg);
  color: var(--et-color-footer-text);
  padding: var(--et-space-7) 0 var(--et-space-6);
  font-size: var(--et-text-sm);
}
.et-footer a { color: var(--et-color-footer-link); }
.et-footer .et-link-button { color: var(--et-color-footer-link); }
.et-footer :focus-visible { outline-color: var(--et-color-footer-link); }
.et-footer h2 {
  font-size: var(--et-text-xs);
  font-weight: 700;
  letter-spacing: var(--et-tracking-caps);
  text-transform: uppercase;
  margin: 0 0 var(--et-space-3);
}
.et-footer ul { list-style: none; margin: 0 0 var(--et-space-5); padding: 0; }
.et-footer li { margin: 0 0 var(--et-space-2); }
.et-footer__cols { display: grid; gap: var(--et-space-5); }
.et-footer__note { margin: var(--et-space-4) 0 0; border-top: 1px solid var(--et-color-text-muted); padding-top: var(--et-space-4); }

/* ---------- buttons ---------- */

.et-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--et-space-2); min-height: 44px; min-width: 44px; padding: var(--et-space-2) var(--et-space-5); border: 1px solid var(--et-color-accent); border-radius: var(--et-radius-sm); background: var(--et-color-accent); color: var(--et-color-on-accent); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: filter 0.15s, box-shadow 0.15s; }
.et-btn:hover { filter: brightness(1.15); box-shadow: var(--et-shadow-sm); }
.et-btn--secondary { background: transparent; color: var(--et-color-accent); border-color: var(--et-color-accent); }
.et-btn--secondary:hover { filter: none; background: var(--et-color-accent-soft); }
.et-btn--ghost { background: transparent; color: var(--et-color-text); border-color: transparent; }
.et-btn--small { padding: var(--et-space-1) var(--et-space-3); font-size: var(--et-text-sm); }

/* ---------- forms ---------- */

/* The form is one of the page's two working cards. Sections come from styled fieldsets. */
/* The question. Deliberately the quieter of the two working cards; the result carries the accent
   edge and the deeper shadow. */
.et-form { margin: 0 0 var(--et-space-5); background: var(--et-color-surface); border: 1px solid var(--et-color-border); border-radius: var(--et-radius-md); padding: var(--et-space-5); }
.et-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.et-form fieldset + fieldset { margin-top: var(--et-space-5); padding-top: var(--et-space-5); border-top: 1px solid var(--et-color-border); }
.et-form legend { font-size: var(--et-text-lg); font-weight: 700; padding: 0; margin: 0 0 var(--et-space-4); }

/* The grid is established by the FORM and by every section inside it, never by a wrapper class the
   markup has to remember. Putting it only on `fieldset` was not enough: 28 of the 60 forms have no
   fieldset at all, and 5 of those (elterngeld, minijob, pendlerpauschale, rentenpunkte, unterhalt)
   hang their fields straight off 
, so they stayed ungridded and, once the help paragraph's
   margin was dropped, their fields touched. Nor was enumerating wrapper classes enough: bundles
   group fields in 
, 
 and a bare
   
, and .et-form__group had no CSS at all. So the selector asks what an element CONTAINS
   rather than what it is called: any fieldset, details, div or section that holds a field directly
   is a field container, EXCEPT 
: see the note under this rule.
   firmenwagen's 
 radio group holds radios, not fields, so it is left
   alone. A .et-notenliste__row is excluded for the same reason as 
: it holds two fields
   directly, so it matched here, and this rule's two-column track list at 48rem outranks the row's
   own three-track Nr./Note/Gewichtung grid (0,2,1 against 0,1,0). From 768 px up every grade read
   as three stacked half-columns. It is a ROW, not a field container.
   See redesign-forms-and-sources/design.md D1. */
.et-form,
.et-form :is(fieldset, div, section):not(.et-notenliste__row):has(> .et-field),
.et-fields { display: grid; gap: var(--et-space-4) var(--et-space-5); }
/* A 
 is NEVER gridded: giving it any display other than block breaks the native closed
   state, and four bundles use it as a collapsible form group. Their fields are not grid items, so
   they get the same rhythm from a margin instead. */
.et-form details > .et-field + .et-field { margin-top: var(--et-space-4); }
/* A SECTION takes the whole row; only a field takes a column. Without this, gridding .et-form drops
   a fieldset, a group or the submit row into a half-width column. */
.et-form > :is(fieldset, details, section),
.et-form > p,
.et-form__actions,
.et-form :is(fieldset, div, section) > :is(legend, p, h2, h3) { grid-column: 1 / -1; }
/* min-width: 0 because a