/* LimitSlate / design direction C "Ziffernblatt" (dial), round 2 (C2), 2026-10-30. Full replacement for site.css.
   Ground: chalk (cool, light) with visible fine grain. Ink for text and the elapsed arc. One red signal: the hand that counts.
   One instrument above the fold: the dial, 660 px on desktop, on the bare ground inside a frame with plus marks at the
   corners. Frames only around the two instruments (dial, reset-log table); everything else is text, hairlines and rulers.
   Fonts (self-hosted, OFL): Barlow 600 headings; Barlow Semi Condensed 500 digits and scales (tabular figures measured in
   headless Chrome); Schibsted Grotesk UI text; Newsreader reading text. Three families. */
@font-face{font-family:"LS Display";src:url("fonts/Barlow-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:optional}
@font-face{font-family:"LS Numbers";src:url("fonts/BarlowSemiCondensed-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:optional}
@font-face{font-family:"LS Text";src:url("fonts/SchibstedGrotesk-Variable.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:optional}
@font-face{font-family:"LS Text";src:url("fonts/SchibstedGrotesk-Italic-Variable.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:optional}
@font-face{font-family:"LS Reading";src:url("fonts/Newsreader-Variable.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:optional}
@font-face{font-family:"LS Reading";src:url("fonts/Newsreader-Italic-Variable.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:optional}
:root{
  color-scheme:light;
  /* roles (contrast measured by contrast_check.py; see contrast-results.json) */
  --grund:#F4F6F3;          /* chalk ground */
  --feld:#FFFFFF;           /* fields */
  --feld-2:#EDF0EC;         /* tinted track */
  --tinte:#161A19;          /* text, elapsed arc, 16.2:1 */
  --tinte-2:#4C5653;        /* secondary text, 7.0:1 */
  --linie:#C3CAC6;          /* hairlines, ring rest, ticks (graphic only) */
  --linie-strong:#6B7572;   /* control borders, 4.4:1 */
  --zeiger:#D0321B;         /* the red hand, the reset mark, the "now" mark on rulers; error text uses --danger */
  --moos:#3F7A5A;           /* allowance arc, success text 4.7:1 */
  --ocker:#B07A1E;          /* warning graphic 3.4:1; warning text uses --ocker-text */
  --ocker-text:#8A5A10;     /* 5.4:1 */
  --danger:#A8290F;--danger-ring:#A8290F33;
  --tag-saved-fg:#2F6B4C;--tag-expired-fg:#A8290F;
  --focus:#161A19;--focus-ring:#161A1933;--scrim:#161A1999;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23161A19' stroke-width='1.6'/%3E%3C/svg%3E");
  /* fine grain on the chalk (visible, like paper): an SVG noise tile, no blur, no glow */
  --korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .1 0 0 0 0 .1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* the frame of an instrument: a hairline and four plus marks (Heron / Cal.com), drawn without markup */
  --plus:linear-gradient(var(--tinte),var(--tinte)) 0 0/13px 1px no-repeat,linear-gradient(var(--tinte),var(--tinte)) 0 0/1px 13px no-repeat,
    linear-gradient(var(--tinte),var(--tinte)) 100% 0/13px 1px no-repeat,linear-gradient(var(--tinte),var(--tinte)) 100% 0/1px 13px no-repeat,
    linear-gradient(var(--tinte),var(--tinte)) 0 100%/13px 1px no-repeat,linear-gradient(var(--tinte),var(--tinte)) 0 100%/1px 13px no-repeat,
    linear-gradient(var(--tinte),var(--tinte)) 100% 100%/13px 1px no-repeat,linear-gradient(var(--tinte),var(--tinte)) 100% 100%/1px 13px no-repeat;
  /* type */
  --display:"LS Display","Avenir Next Condensed","Helvetica Neue",Arial,sans-serif;
  --numbers:"LS Numbers","Avenir Next Condensed","Arial Narrow",sans-serif;
  --body:"LS Text","Avenir Next","Segoe UI","Helvetica Neue",sans-serif;
  --reading:"LS Reading","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --radius:2px;--radius-btn:6px;
  --dialog-shadow:0 18px 50px #161A1926;
  --dial-ease:250ms cubic-bezier(.2,.7,.2,1);
}

/* 0. Reset and page frame ---------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--grund);background-image:var(--korn);color:var(--tinte);font-family:var(--body);font-size:1.0625rem;line-height:1.5;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;font-feature-settings:"kern" 1,"liga" 1}
main{flex:1}
.footer{margin-top:auto}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input,summary{touch-action:manipulation}
button{cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:not-allowed;opacity:.6}
.btn[aria-disabled=true]{cursor:wait}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--linie-strong)}
a:hover{text-decoration-thickness:2px;text-decoration-color:currentColor}
svg{vertical-align:middle}
img{max-width:100%;height:auto}
a,button{max-width:100%}
[hidden]{display:none!important}
.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}
.shell{width:min(1160px,calc(100% - 2*clamp(16px,5vw,64px)));margin-inline:auto}
.shell>*{min-width:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
.skip{position:fixed;left:16px;top:-120px;z-index:100;padding:12px 18px;background:var(--tinte);color:var(--grund);border-radius:var(--radius-btn);text-decoration:none;font-weight:600}
.skip:focus{top:12px}
/* F09: the start-up note is an overlay at the bottom (fixed), never in the flow, so its disappearance moves nothing. */
.boot-note{display:none;position:fixed;inset:auto 0 0;z-index:55;margin:0;padding:12px clamp(16px,5vw,64px);background:var(--grund);border-top:1px solid var(--linie-strong);font-size:.875rem}
html:not([data-app=ready]) .boot-note{display:block}

/* 1. Type roles -------------------------------------------------- */
/* Digits and times are set in the condensed signage face with tabular figures; nothing else uses it. */
.num,.clock-value,.budget-value,.usage-value,.expiry-countdown,.session-value,.feed-date time,.article-meta time,.mini-label time,.clock-date time,.hero-example-value,.local-time,.dial-label,.ruler-label,.ruler-reset{font-family:var(--numbers);font-variant-numeric:tabular-nums;letter-spacing:0}
.aside-title,.footer-tagline{font:400 .875rem/1.4 var(--body);letter-spacing:0;color:var(--tinte-2);margin:0}
.quiet{color:var(--tinte-2);font-size:.875rem}
.mini-label,.origin-label,.session-origin,.feed-note,.breadcrumbs,.article-meta,.clock-date,.session-line,.feed-item-top{font-size:.875rem;color:var(--tinte-2);line-height:1.5}
.copy{font-size:1rem;line-height:1.6;color:var(--tinte-2)}
.copy a{color:var(--tinte)}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.08;margin:0;text-wrap:balance;color:inherit}
h3{font-size:1.2rem;letter-spacing:0}
/* Spacing scale (C9): 8 / 16 / 24 / 40 / 64 / 104 px; fluid values clamp between two steps. */

/* 2. Top bar: wordmark, three links, the real local time ------------- */
.topbar{border-bottom:1px solid var(--linie)}
.nav{min-height:72px;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--display);font-weight:600;font-size:1.35rem;letter-spacing:-.01em;white-space:nowrap}
.brand-mark{width:34px;height:34px;flex:none}
.nav-links{display:flex;align-items:center;gap:1.6rem;margin-left:auto}
.nav-links a{text-decoration:none;font-size:1rem;font-weight:500;min-height:24px;display:inline-flex;align-items:center;padding:.25rem 0;border-bottom:2px solid transparent}
.nav-links a:hover{border-bottom-color:var(--linie-strong)}
.nav-links a[aria-current=page]{border-bottom-color:var(--zeiger)}
/* F09: the time column reserves 26ch on wide screens so the links do not slide when the time appears after start-up. */
.nav-side{display:flex;align-items:center;justify-content:flex-end;min-width:26ch}
.local-time{font-size:1.0625rem;color:var(--tinte);white-space:nowrap}
.local-time:empty{display:none}
/* F09: below 900 px the time gets its own reserved row (min-height) so filling it after start-up cannot grow the bar. */
@media(max-width:900px){.nav{row-gap:0}.nav-side{flex:0 0 100%;order:4;justify-content:flex-end;min-height:1.5rem;margin-left:0}.local-time{font-size:.9375rem;line-height:1.5rem}}
.nav-menu{display:none;border:1px solid var(--linie-strong);border-radius:var(--radius-btn);padding:.5rem .8rem;font-size:.875rem;min-height:44px}
.nav-scrim{position:fixed;inset:64px 0 0;background:var(--scrim);z-index:19;border:0}
.nav-links{z-index:21}

/* 3. Hero: the instrument is the first and largest picture ---------------------- */
.hero{padding:clamp(16px,2.5vw,32px) 0 0}
/* One frame (hairline + plus marks) on the bare, grained ground. The dial takes the left 660 px over both rows;
   the small heading sits beside it, the controls below the heading. */
.instrument,.feed-table{border:1px solid var(--linie);background-color:transparent;background-image:var(--plus)}
.instrument{position:relative;display:grid;grid-template-columns:minmax(0,660px) minmax(300px,1fr);grid-template-areas:"dial head" "dial controls" "forecast forecast" "history history";gap:0 clamp(28px,4vw,56px);align-items:start;padding:clamp(20px,3vw,40px) clamp(20px,3vw,44px)}
.hero-head{grid-area:head;min-width:0;padding-top:4px}
.hero h1{font-size:clamp(1.6rem,2.4vw,2.125rem);line-height:1.1;max-width:18ch;margin:0 0 .7rem}
.hero-tagline{font:500 1.0625rem/1.4 var(--body);color:var(--tinte);margin:0 0 .45rem;max-width:36ch}
.hero .intro{font-size:.9375rem;line-height:1.5;max-width:44ch;margin:0 0 .35rem;color:var(--tinte-2)}
.independence{font-size:.8125rem;color:var(--tinte-2);margin:0;max-width:44ch}
.dial-column{grid-area:dial;min-width:0}
.dial-wrap{position:relative;width:min(100%,660px);aspect-ratio:1;margin-inline:auto;user-select:none;-webkit-user-select:none}
.dial{display:block;width:100%;height:100%;overflow:visible}
.dial-ring{fill:none;stroke:var(--linie);stroke-width:2}
.dial-elapsed{fill:none;stroke:var(--tinte);stroke-width:10;stroke-linecap:butt;transition:stroke-dasharray var(--dial-ease)}
.dial-tick{stroke:var(--linie-strong);stroke-width:1.5}
.dial-tick-major{stroke:var(--tinte);stroke-width:2.5}
.dial-label{font-size:17px;font-weight:500;fill:var(--tinte-2);text-anchor:middle;dominant-baseline:central}
.dial-reset-label{fill:var(--zeiger);font-size:18px}
.dial-reset-mark{fill:var(--zeiger)}
.dial-allowance-track{fill:none;stroke:var(--feld-2);stroke-width:7}
.dial-allowance{fill:none;stroke:var(--moos);stroke-width:7;stroke-linecap:butt;transition:stroke-dasharray var(--dial-ease)}
.dial-hand{transition:transform var(--dial-ease)}
.dial-hand line{stroke:var(--zeiger);stroke-width:6;stroke-linecap:round}
.dial-hand-tip{fill:var(--zeiger);transition:r .15s ease}
.dial-wrap.dragging .dial-hand,.dial-wrap.dragging .dial-elapsed{transition:none}
.dial-wrap:has(.dial-handle:hover) .dial-hand-tip,.dial-wrap:has(.dial-handle:focus-visible) .dial-hand-tip,.dial-wrap.dragging .dial-hand-tip{r:10}
/* The slider lives on the hand tip: a 44 px grip, focus ring around the grip. Hidden until the script runs. */
.dial-handle{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;cursor:grab;left:50%;top:50%;touch-action:none}
.dial-handle:focus-visible{outline:3px solid var(--tinte);outline-offset:2px}
.dial-wrap.dragging .dial-handle{cursor:grabbing}
html:not([data-app=ready]) .dial-handle{display:none}
/* The centre: one word, one number, the seconds small. The explanation is a sentence under the dial, outside the ring. */
.dial-centre{position:absolute;left:50%;top:50%;width:58%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.hero-example-label{display:block;font:500 .9375rem/1.3 var(--body);color:var(--tinte-2);margin:0 0 .35rem}
.hero-example-value{margin:0;line-height:1;color:var(--tinte)}
.dial-main{display:block;font-size:clamp(3.2rem,5.4vw,4.9rem);letter-spacing:-.015em;white-space:nowrap}
.dial-small{display:block;font-size:clamp(1.15rem,1.7vw,1.5rem);color:var(--tinte-2);margin-top:.35em;min-height:1em}
/* The sentences under the dial reserve their line count (min-height) so a change of value, estimate or provider never moves the page. */
.hero-example-caption{font-size:1rem;line-height:1.5;min-height:3em;color:var(--tinte);margin:.9rem auto 0;max-width:46ch;text-align:center;text-wrap:pretty}
.dial-source{margin:.35rem auto 0;font-size:.875rem;line-height:1.5;min-height:3em;color:var(--tinte-2);text-align:center;max-width:46ch}
/* Small seconds (chronograph) under the digits, and the "expected" mark of the community estimate outside the ring. */
.dial-seconds-ring{fill:none;stroke:var(--linie-strong);stroke-width:1.5}
.dial-seconds-tick{stroke:var(--linie-strong);stroke-width:1.5}
.dial-seconds-tick-major{stroke:var(--tinte);stroke-width:2}
.dial-seconds-hand line{stroke:var(--zeiger);stroke-width:3;stroke-linecap:round}
.dial-seconds-hand circle{fill:var(--zeiger)}
.dial-seconds-hand{transition:none}
.dial-expected-mark{fill:none;stroke:var(--tinte);stroke-width:2;stroke-linejoin:round}
.dial-expected-label{font-size:15px;fill:var(--tinte-2)}
/* The two estimate sentences: static text from the build-time snapshot; only the countdown span ticks. */
.dial-forecasts{grid-area:forecast;margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid var(--linie);max-width:76ch;display:grid;gap:.4rem}
.dial-forecast-title{margin:0;font:600 1.05rem/1.4 var(--body);letter-spacing:0;color:var(--tinte)}
.dial-actions{margin:.2rem 0 .4rem;display:flex;gap:.6rem 1.2rem;align-items:center;flex-wrap:wrap}
.switch-label{font-size:.8125rem;color:var(--tinte-2);align-self:center;margin-right:.3rem}
/* "How it works" sits in the hero head (first screen): three short steps under the tagline. */
.hero-head .how-it-works{margin:.9rem 0 .8rem;padding:.8rem 0 0;gap:.4rem 1.2rem}
.hero-head .how-it-works ol{flex-direction:column;gap:.3rem}
.hero-head .how-it-works li{font-size:.9375rem}
.dial-forecast{margin:0;font-size:.9375rem;line-height:1.5;color:var(--tinte);text-wrap:pretty}
.forecast-countdown{white-space:nowrap;font-weight:500}
/* 3b. The reset history: one ruler per provider in the dial's tick language, the last reports as a list. */
.history{grid-area:history;border-top:1px solid var(--linie);margin-top:1.4rem;padding-top:1.1rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem clamp(28px,4vw,56px)}
.history-provider{min-width:0}
.history-title{font:600 1.05rem/1.3 var(--body);letter-spacing:0;margin:0 0 .25rem}
.history-note{margin:0 0 .5rem;font-size:.875rem;line-height:1.5;color:var(--tinte-2)}
.history-ruler{display:block;width:100%;height:auto;overflow:visible}
.history-ruler-line{stroke:var(--linie-strong);stroke-width:1.5}
.history-month{stroke:var(--linie-strong);stroke-width:1.5}
.history-month-label{font-size:13px;fill:var(--tinte-2);font-family:var(--numbers)}
.history-mark-reset{fill:var(--tinte)}
.history-mark-announcement{fill:var(--grund);stroke:var(--tinte);stroke-width:2}
.history-mark-saved{fill:var(--moos)}
.history-mark-reminder{fill:var(--ocker)}
.history-mark-other{stroke:var(--linie-strong);stroke-width:2}
.history-now{stroke:var(--zeiger);stroke-width:3}
.history-list{list-style:none;margin:.5rem 0 0;padding:0;font-size:.875rem;line-height:1.5;color:var(--tinte-2);display:grid;gap:.15rem}
.history-list li{display:flex;flex-wrap:wrap;gap:.2rem .7rem;align-items:baseline}
.history-list time{color:var(--tinte);white-space:nowrap}
.history-list a,.history-table a{display:inline-flex;align-items:center;min-height:24px;min-width:24px}
.history-foot{grid-column:1/-1;margin:0;font-size:.875rem;line-height:1.5;color:var(--tinte-2)}
.history-table .quiet{white-space:nowrap}
.dial-controls{grid-area:controls;min-width:0;display:grid;gap:.75rem;align-content:start;padding-top:1.1rem;margin-top:1.1rem;border-top:1px solid var(--linie)}
.switch-row{display:flex;justify-content:space-between;gap:.5rem 1.2rem;flex-wrap:wrap}
.switch-group{display:flex;gap:.1rem 1.1rem;flex-wrap:wrap}
.switch{min-height:36px;padding:.2rem 0;font-size:1rem;font-weight:500;color:var(--tinte-2);border-bottom:2px solid transparent;border-radius:0}
.switch:hover{color:var(--tinte)}
.switch[aria-pressed=true]{color:var(--tinte);border-bottom-color:var(--tinte)}
.dial-reading{margin:0;font:600 1.15rem/1.35 var(--body);min-height:2.7em;color:var(--tinte);text-wrap:pretty}
.dial-other{margin:0;font-size:.9375rem;line-height:1.5;color:var(--tinte-2)}
.dial-other .text-btn{font-size:.9375rem;padding:0}
.dial-controls .field{margin:.2rem 0 0}
.dial-controls .btn{justify-self:start}
/* The register of the clock on the dial: plain lines, no card. Empty state shows only the guide link. */
.clock-register{border-top:1px solid var(--linie);padding-top:.8rem;margin-top:.3rem;display:grid;gap:.3rem}
.clock-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.clock-register[data-state=empty] :is(.clock-date,.origin-label,.usage-row,.meter){display:none}
.clock-register[data-state=empty]{border-top:0;padding-top:0;margin-top:0}
.clock-date{margin:0}
.origin-label{margin:0;font-size:.8125rem}
.usage-row{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;font-size:.875rem;color:var(--tinte-2);min-width:0;margin-top:.4rem}
.usage-value{font-size:1.25rem;color:var(--tinte);white-space:nowrap}
/* Allowance bar on a scale: ten divisions, the dial's tick language. */
.meter{height:8px;margin:.3rem 0 .4rem;background:var(--feld-2);overflow:hidden;-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),transparent calc(10% - 2px) 10%);mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),transparent calc(10% - 2px) 10%)}
.meter-fill{width:0;height:100%;background:var(--moos)}
.meter.expired .meter-fill{background:var(--linie-strong)}
.clock-bottom{display:flex;align-items:center;gap:.4rem 1.4rem;flex-wrap:wrap}
.session-line{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;color:var(--tinte-2);padding:.2rem 0 0}
.session-value{color:var(--tinte)}
.saved-expiry,.reminder-hint,.movement-note,.clock-history,.clock-history li,.expired-account-link,.clock-feedback{font-size:.875rem;line-height:1.55;color:var(--tinte-2)}
.saved-expiry strong,.expired-account-link,.clock-feedback{color:var(--tinte)}
.saved-expiry{margin:.3rem 0 0}
.clock-history summary{min-height:24px;cursor:pointer;color:var(--tinte)}
.clock-history ol{padding-left:1.2rem;margin:.4rem 0 0}
.repeat-next{margin-top:.4rem;justify-self:start}
.clock-feedback,.expired-account-link,.reminder-hint,.movement-note{margin:0}
.stale{display:block;color:var(--ocker-text)}
.field-error:empty,#time-warning:empty,.clock-feedback:empty{display:none}
.local-note{font-size:.8125rem;color:var(--tinte-2);margin:.4rem 0 0;display:flex;align-items:flex-start;gap:.5rem}
.local-note svg{margin-top:3px;flex:none}
.local-note strong{color:var(--tinte);font-weight:600}
/* The three real steps, as one line under the frame. */
.how-it-works{display:flex;gap:.6rem 2.4rem;align-items:baseline;flex-wrap:wrap;padding:.8rem 0 0;margin:.8rem 0 0;border-top:1px solid var(--linie)}
.how-it-works h2{font:500 .9375rem/1.4 var(--body);letter-spacing:0;color:var(--tinte-2);margin:0}
.how-it-works ol{display:flex;gap:.4rem 2rem;flex-wrap:wrap;margin:0;padding:0;list-style:none;counter-reset:step}
.how-it-works li{counter-increment:step;display:flex;gap:.55rem;align-items:baseline;font-size:.9375rem;line-height:1.45;color:var(--tinte)}
.how-it-works li::before{content:counter(step);font-family:var(--numbers);font-weight:500;color:var(--tinte-2)}
.return-hint{margin-top:1.2rem;padding:.2rem 0 .2rem 1rem;border-left:1px solid var(--tinte);font-size:.9375rem}
.return-hint p{margin:0 0 .4rem}
.return-hint #share-feedback:empty{display:none}

/* 4. Section headings ---------------------------------------------- */
.section-heading{font-size:clamp(1.7rem,2.8vw,2.3rem);line-height:1.1;margin:.2rem 0 .8rem;max-width:22ch}
.aside-title{margin-top:1.6rem}

/* 5. Buttons and text links ------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:44px;padding:.65rem 1.2rem;border-radius:var(--radius-btn);border:1px solid var(--tinte);background:var(--tinte);color:var(--grund);font-family:var(--body);font-size:1rem;font-weight:600;line-height:1.3;text-decoration:none;transition:background-color .12s ease,border-color .12s ease}
.btn:hover{background:#000;border-color:#000;color:#fff}
.btn.light{background:transparent;color:var(--tinte);border-color:var(--linie-strong)}
.btn.light:hover{background:var(--feld);border-color:var(--tinte);color:var(--tinte)}
.text-btn{display:inline-flex;align-items:center;min-height:24px;padding:.3rem 0;font-size:.9375rem;text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--linie-strong);color:inherit}
.text-btn:hover{text-decoration-thickness:2px;text-decoration-color:currentColor}
.icon-arrow{font-size:1.05em;line-height:1}
.destructive{color:var(--danger)}
/* Filters and quick times are text links; the active one is ink with a 2 px underline. */
.filter{min-height:36px;padding:.2rem 0;border:0;border-radius:0;background:none;font-size:.9375rem;color:var(--tinte-2);text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px;text-decoration-color:var(--linie-strong)}
.filter:hover{color:var(--tinte);text-decoration-color:currentColor}
.filter[aria-pressed=true]{color:var(--tinte);font-weight:600;text-decoration-thickness:2px;text-decoration-color:var(--tinte)}
.filter:disabled{opacity:1;color:var(--tinte-2);text-decoration-color:var(--linie)}
.filter-group{display:flex;gap:.2rem 1.2rem;flex-wrap:wrap}

/* 6. Daily budget as rulers, session planner as one sentence ----------------------------------- */
.planner{margin-top:clamp(40px,6vw,64px);border-top:1px solid var(--tinte);padding:clamp(22px,3vw,32px) 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,4vw,64px);align-items:start}
.planner h2{font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.1;margin:0 0 .6rem;max-width:20ch}
.planner p{font-size:1rem;line-height:1.55;color:var(--tinte-2);margin:0;max-width:40ch}
.budget-lines{display:grid;align-content:start;gap:1.4rem}
#planner-empty p{margin:0}
.budget-line{display:grid;grid-template-columns:minmax(56px,.35fr) minmax(90px,.6fr) minmax(0,1.4fr);grid-template-areas:"name value caption" "ruler ruler ruler";gap:.4rem .8rem;align-items:baseline;font-size:.9375rem}
.budget-name{grid-area:name}
.budget-value{grid-area:value;font-size:1.9rem;line-height:1;color:var(--tinte)}
.budget-caption{grid-area:caption;font-size:.875rem;color:var(--tinte-2)}
/* The ruler: the window up to the reset, ticks like the dial scale, elapsed in ink, "now" in red. */
.budget-ruler{grid-area:ruler;position:relative;height:36px;border-bottom:1px solid var(--linie-strong)}
.budget-ruler[data-state=empty]{background:repeating-linear-gradient(90deg,var(--linie) 0 1px,transparent 1px 10%) 0 100%/100% 7px no-repeat}
.ruler-tick{position:absolute;bottom:0;width:1px;height:7px;background:var(--linie-strong)}
.ruler-tick.major{height:12px;background:var(--tinte)}
.ruler-label{position:absolute;bottom:15px;transform:translateX(-50%);font-size:.8125rem;color:var(--tinte-2);white-space:nowrap}
.ruler-elapsed{position:absolute;left:0;bottom:-2px;height:3px;background:var(--tinte)}
.ruler-now{position:absolute;bottom:-6px;width:3px;height:18px;margin-left:-1.5px;background:var(--zeiger)}
.ruler-reset{position:absolute;bottom:15px;transform:translateX(-100%);font-size:.8125rem;color:var(--zeiger);white-space:nowrap}
.manual-planner{margin:clamp(40px,6vw,64px) 0 0;padding:1.4rem 0 0;border-top:1px solid var(--tinte)}
.manual-planner h2{font-size:1.6rem;margin:0 0 .5rem}
.manual-planner .copy{margin:0 0 1rem;max-width:70ch}
.manual-sentence{font-family:var(--reading);font-size:1.3rem;line-height:2.1;margin:0 0 .8rem;max-width:62ch;color:var(--tinte)}
.field.inline{display:inline-flex;margin:0 .15em;vertical-align:baseline;gap:0}
.field.inline input,.field.inline select{min-height:36px;padding:.1rem .4rem;border:0;border-bottom:1px solid var(--tinte);border-radius:0;background:transparent;font-family:var(--numbers);font-size:1.3rem;line-height:1.2;text-align:center}
.field.inline input{width:4.2em}
.field.inline select{width:auto;font-family:var(--body);font-size:1.1rem;text-align:left;padding-right:1.8rem;background-position:right .3rem center}
.manual-planner #manual-result{font-size:1rem;margin:.9rem 0 0;max-width:70ch}

/* 7. Fields (also used in dialogs) ---------------------------------- */
.field{display:flex;flex-direction:column;gap:.4rem;margin:1rem 0}
.field label{font-size:.9375rem;font-weight:600}
.field small{font-size:.875rem;color:var(--tinte-2);line-height:1.45}
.field input,.field select,.field textarea{width:100%;max-width:100%;min-width:0;min-height:44px;padding:.6rem .8rem;border:1px solid var(--linie-strong);border-radius:var(--radius);background:var(--feld);color:var(--tinte);font-size:1rem;line-height:1.4;transition:border-color .12s ease,box-shadow .12s ease}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--tinte)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:0;border-color:var(--tinte);box-shadow:0 0 0 3px var(--focus-ring)}
.field input[aria-invalid=true]{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-ring)}
.field select{-webkit-appearance:none;appearance:none;padding-right:2.4rem;background-image:var(--chevron);background-repeat:no-repeat;background-position:right .8rem center;background-size:12px 8px}
.field textarea{min-height:180px;resize:vertical;font-size:.9375rem;line-height:1.6}
/* The allowance range: no thumb and no filled track until a value exists (the number field is the value). */
.field input[type=range]{padding:0;border:0;min-height:44px;box-shadow:none;background:none;accent-color:var(--tinte)}
.field input[type=range][data-unset]{accent-color:var(--linie)}
.field input[type=range][data-unset]::-webkit-slider-thumb{opacity:0}
.field input[type=range][data-unset]::-moz-range-thumb{opacity:0}
.range-inputs{display:grid;grid-template-columns:minmax(0,1fr) minmax(75px,.35fr);gap:1rem;align-items:center}
.check-row{display:flex;align-items:center;gap:.6rem;font-size:.9375rem;margin:1.1rem 0;min-height:44px}
.check-row input{width:18px;height:18px;accent-color:var(--tinte);margin:0}
.session-fields{padding:.1rem 0 .6rem 1rem;border-left:1px solid var(--linie-strong)}
.field-error,.form-error{font-size:.875rem;color:var(--danger);font-weight:600}
.quick-times{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem}
.quick-times .filter{min-height:36px}
.quick-note,.where-to-find{font-size:.875rem;color:var(--tinte-2);margin:.5rem 0 0}
.where-to-find a{color:var(--tinte)}
/* Notices: a left line in the warning colour (a status, not decoration), no box. */
.notice{border-left:3px solid var(--ocker);padding:.2rem 0 .2rem .9rem;font-size:.9375rem;margin:1rem 0}
.noscript-note{border-left:3px solid var(--ocker);padding:.2rem 0 .2rem .9rem;font-size:.9375rem;margin:.6rem 0}

/* 8. Lower desk: reset log (a register in a frame), status, field notes ----------------- */
.desk-lower{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);margin:clamp(48px,7vw,96px) 0 clamp(36px,5vw,56px)}
.updates-header{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem}
.feed-table{width:100%;border-collapse:separate;border-spacing:0;margin:1.2rem 0 0;font-size:.9375rem}
.feed-table th{text-align:left;font:600 .8125rem/1.4 var(--body);color:var(--tinte-2);padding:.75rem .8rem .55rem;border-bottom:1px solid var(--tinte);white-space:nowrap}
.feed-table td{padding:.9rem .8rem;border-bottom:1px solid var(--linie);vertical-align:top;line-height:1.5}
.feed-table tr:last-child td{border-bottom:0}
.feed-date time{display:block;min-width:9em;color:var(--tinte-2);font-size:.9375rem}
.feed-provider{white-space:nowrap;font-weight:500}
.feed-item-top{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.feed-report p{font-family:var(--reading);font-size:1.0625rem;line-height:1.5;margin:.3rem 0 0}
.feed-links{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;font-size:.875rem;min-width:9em}
.feed-empty td{padding:1.1rem .8rem 1.2rem}
.feed-empty strong{display:block;font:600 1rem/1.4 var(--body);margin-bottom:.3rem}
.feed-empty p{font-size:.9375rem;line-height:1.55;color:var(--tinte-2);margin:0;max-width:60ch}
.feed-note{margin:.9rem 0 0}
.tag{display:inline-block;font:500 .8125rem/1.3 var(--body);letter-spacing:0;text-transform:lowercase;color:var(--tinte-2);white-space:normal;max-width:100%}
.tag.saved{color:var(--tag-saved-fg)}
.tag.expired{color:var(--tag-expired-fg)}
.status-panel{border-left:1px solid var(--tinte);padding:.2rem 0 .2rem 1.1rem;margin-bottom:1.8rem}
.status-panel h2{font:600 1rem/1.4 var(--body);letter-spacing:0;margin:0 0 .7rem}
.status-panel h2 .quiet{font-weight:400}
.status-row{display:flex;justify-content:space-between;gap:.5rem 1rem;margin:.5rem 0;align-items:center;flex-wrap:wrap}
.status-row span:first-child{font-size:.9375rem}
.status-value{font-size:.875rem;display:flex;align-items:center;gap:.45rem;text-align:left}
.status-value::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--linie-strong);flex:none}
.status-value[data-state=none]::before{background:var(--moos)}
.status-value[data-state=minor]::before{background:var(--ocker)}
.status-value[data-state=major]::before,.status-value[data-state=critical]::before{background:var(--zeiger)}
.status-panel .copy{font-size:.9375rem;margin:.8rem 0 0;line-height:1.55}
.notes-list{list-style:none;padding:0;margin:.8rem 0 0}
.notes-list li{border-top:1px solid var(--linie);padding:.9rem 0}
.notes-list li:last-child{border-bottom:1px solid var(--linie)}
.notes-list a{display:flex;justify-content:space-between;gap:1rem;text-decoration:none;align-items:center}
.notes-list .note-title{font-family:var(--reading);font-size:1.3rem;line-height:1.3}
.notes-list a:hover .note-title{text-decoration:underline;text-underline-offset:.2em}

/* 9. Statement and FAQ -------------------------------------------- */
.divider-note{margin:0;padding:clamp(24px,4vw,40px) 0;border-block:1px solid var(--tinte);display:flex;gap:1.5rem 3rem;justify-content:space-between;align-items:center;flex-wrap:wrap}
.divider-note p{font-family:var(--display);font-weight:600;letter-spacing:-.01em;font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.15;margin:0;max-width:26ch}
.divider-note a{font-size:1rem;white-space:normal}
.faq-section{margin:clamp(40px,6vw,80px) 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(24px,5vw,64px)}
.faq-section .section-heading{max-width:12ch}
.faq-list details{border-bottom:1px solid var(--linie);padding:1rem 0}
.faq-list details:first-child{border-top:1px solid var(--tinte)}
.faq-list summary{font:600 1.1rem/1.35 var(--body);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1.2rem;min-height:28px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+" / "";font-family:var(--numbers);font-size:1.4rem;font-weight:500;color:var(--tinte-2);flex:none}
.faq-list details[open] summary::after{content:"−" / ""}
.faq-list p{font-family:var(--reading);font-size:1.0625rem;line-height:1.6;max-width:60ch;color:var(--tinte);margin:.7rem 0 .2rem}
.faq-list p a{color:var(--tinte)}

/* 10. Sponsor strip and footer ------------------------------------------- */
.sponsor-strip{min-height:93px;margin-top:32px;border-top:1px solid var(--linie);padding:1.4rem 0;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;font-size:.9375rem}
.sponsor-strip:not([data-active]){display:none}
.sponsor-strip strong{font-weight:600}
.sponsor-strip p{margin:.2rem 0;color:var(--tinte-2);font-size:.875rem}
.sponsor-strip a{font-size:.875rem;min-height:24px;display:inline-flex;align-items:center}
.sponsor-link{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px;width:100%;text-decoration:none}
.sponsor-link strong{display:block}
.sponsor-link .mini-label{font-size:.75rem;color:var(--tinte)}
.sponsor-clock-space{margin:24px 0 0}
.sponsor-guide-space{margin:32px 0}
.sponsor-guide-space .sponsor-strip,.sponsor-clock-space .sponsor-strip{margin:0}
.footer{margin-top:clamp(40px,6vw,80px);border-top:1px solid var(--tinte);padding:clamp(28px,4vw,44px) 0 clamp(28px,4vw,40px)}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:1.5rem 2rem;flex-wrap:wrap}
.footer .brand{font-size:1.15rem}
.footer .brand-mark{width:28px;height:28px}
.footer-links{display:flex;gap:.25rem 1.3rem;font-size:.9375rem;flex-wrap:wrap;align-items:center}
.footer-links a,.footer-links [data-privacy-settings]{min-height:24px;display:inline-flex;align-items:center}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem 2rem;margin-top:1.4rem;font-size:.875rem;color:var(--tinte-2);flex-wrap:wrap;align-items:flex-end}
.footer-bottom p{margin:0;max-width:60ch}
.footer .text-btn{font-size:.875rem;color:var(--tinte-2)}
.footer-tagline{white-space:normal}

/* 11. Articles (guides, methodology, legal, 404) --------------------------- */
.article-head{padding:clamp(28px,4vw,56px) 0 clamp(18px,3vw,32px);max-width:880px}
.breadcrumbs{margin:0 0 1.4rem}
.breadcrumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}
.breadcrumbs li+li::before{content:"/";margin-right:.4rem;color:var(--linie-strong)}
.breadcrumbs a{text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.article-head h1{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.02;margin:.2rem 0 1rem;max-width:20ch}
.article-lead{font-family:var(--reading);font-size:1.3rem;line-height:1.5;color:var(--tinte);max-width:56ch;margin:0}
.article-meta{margin-top:1rem}
.article-head .independence{margin:.8rem 0 0}
.article-layout{display:grid;grid-template-columns:minmax(0,720px) 280px;gap:clamp(32px,5vw,72px);padding-bottom:40px}
.article-body{min-width:0;font-family:var(--reading);font-size:1.1875rem;line-height:1.6}
.article-body h2{font-family:var(--display);font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.12;margin:2.4rem 0 .8rem;max-width:28ch}
.article-body h2:first-child{margin-top:0}
.article-body h3{font-family:var(--body);font-size:1.1rem;margin:1.6rem 0 .5rem}
.article-body p{margin:0 0 1.1rem;max-width:64ch;text-wrap:pretty}
.article-body li{margin:.45rem 0;max-width:60ch;text-wrap:pretty}
.article-body code{font-family:var(--mono);font-size:.85em;background:var(--feld-2);padding:.05em .3em;border-radius:3px;overflow-wrap:anywhere}
.article-body .btn{margin:.2rem 0 .6rem;font-family:var(--body)}
.table-scroll{max-width:100%;overflow-x:auto;margin:1.4rem 0}
.table-scroll:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.table-scroll table{margin:0}
.article-body table{width:100%;border-collapse:collapse;font-family:var(--body);font-size:.9375rem;margin:1.4rem 0}
.article-body th,.article-body td{padding:.75rem .6rem;border-bottom:1px solid var(--linie);text-align:left;vertical-align:top;overflow-wrap:normal}
.article-body td:first-child,.article-body th:first-child{min-width:9em}
.article-body th{font-weight:600;font-size:.875rem;border-bottom:1px solid var(--tinte)}
/* Short answer and callouts: a left hairline in ink, no box. */
.answer,.callout{padding:.2rem 0 .2rem 1.2rem;border-left:2px solid var(--tinte);margin:1.3rem 0;font-family:var(--body);font-size:1rem;line-height:1.6}
.answer{font-size:1.0625rem}
.callout p:last-child{margin-bottom:0}
.answer-source{font-size:.875rem}
.legal-draft{padding:.2rem 0 .2rem 1.2rem;border-left:2px solid var(--linie-strong)}
.article-aside{padding-top:6px;min-width:0}
.sticky-note{position:sticky;top:24px;padding:.2rem 0 .2rem 1.2rem;border-left:1px solid var(--tinte);color:var(--tinte)}
.sticky-note h2{font:400 .875rem/1.4 var(--body);letter-spacing:0;color:var(--tinte-2);margin:0 0 .8rem}
.sticky-note p{font-family:var(--display);font-weight:600;letter-spacing:-.01em;font-size:1.35rem;line-height:1.2;margin:0 0 1rem}
.sticky-note .btn{width:100%;margin-bottom:.9rem}
.sticky-note .copy{font-family:var(--body);font-size:.9375rem;color:var(--tinte-2);letter-spacing:0;margin:0 0 .5rem}
.related{margin-top:1.6rem}
.related h2{font:400 .875rem/1.4 var(--body);color:var(--tinte-2);margin:0 0 .6rem}
.related ul{list-style:none;padding:0;margin:0}
.related li{margin:0;padding:.55rem 0;border-top:1px solid var(--linie);font-size:.9375rem}
.related li:last-child{border-bottom:1px solid var(--linie)}
.sources{border-top:1px solid var(--tinte);margin-top:2.4rem;padding-top:1.2rem;font-family:var(--body)}
.sources h2{font-size:1.35rem;margin:0 0 .6rem}
.sources ol{padding-left:1.2rem;font-size:.9375rem}
.guide-directory{list-style:none;padding:0;margin:0}
.guide-directory li{padding:1.1rem 0;border-top:1px solid var(--linie)}
.guide-directory li:last-child{border-bottom:1px solid var(--linie)}
.guide-directory h3{font-family:var(--reading);font-weight:500;font-size:1.5rem;margin:0 0 .3rem}
.guide-directory h3 a{text-decoration:none}
.guide-directory h3 a:hover{text-decoration:underline}
.guide-directory p{margin:.3rem 0}
.guide-directory .mini-label{font-size:.8125rem}
.guide-cta{margin:.8rem 0 .4rem}
.full-updates{margin:0 0 56px;max-width:860px}
.full-updates .feed-report p{font-size:1.0625rem}
.static-log{margin-bottom:2rem;font-family:var(--body)}
.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* Legal pages read in one narrow centred column. */
body.legal .article-head,body.legal .article-layout,.legal-layout{max-width:72ch;margin-inline:auto}
body.legal .article-layout,.legal-layout{display:block}
body.legal .article-aside,.legal-layout .article-aside{margin-top:2.4rem}
body.legal .sticky-note,.legal-layout .sticky-note{position:static}
/* 404: the large resting dial (no arcs, hand at twelve) and nothing else competing. */
body.error .article-head{padding:clamp(28px,5vw,56px) 0 clamp(32px,6vw,72px);max-width:720px}
.dial-rest{width:min(100%,520px);margin:0 0 1.8rem}
.dial-rest .dial-centre .dial-main{color:var(--linie-strong);font-size:clamp(2.6rem,5vw,4.2rem)}
body.error .article-head h1{font-size:clamp(2.4rem,6vw,4.2rem)}

/* 12. Dialogs, toast, consent -------------------------------------------- */
dialog{width:min(560px,calc(100vw - 16px));max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:hidden;border:1px solid var(--tinte);border-radius:var(--radius);padding:0;background:var(--grund);color:var(--tinte);box-shadow:var(--dialog-shadow)}
dialog[open]{display:flex;flex-direction:column}
dialog::backdrop{background:var(--scrim)}
.dialog-backdrop{position:fixed;inset:0;background:var(--scrim);z-index:98}
.fallback-dialog{display:flex;flex-direction:column;position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0;z-index:99}
.dialog-head{padding:18px 22px 4px;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;flex:none}
.dialog-head h2{font-size:1.7rem;line-height:1.1;margin:.1rem 0}
.dialog-close{flex:none;min-width:44px;min-height:44px;border-radius:var(--radius-btn);font-size:1.6rem;line-height:1;color:var(--tinte-2)}
.dialog-close:hover{background:var(--feld);color:var(--tinte)}
.dialog-body{overflow-y:auto;min-height:0;padding:10px 22px 0}
.dialog-body>p{font-size:.9375rem;line-height:1.6;color:var(--tinte-2);margin:0 0 .8rem}
.dialog-body>p strong{color:var(--tinte)}
.dialog-actions{position:sticky;bottom:0;display:flex;justify-content:space-between;gap:.8rem;align-items:center;flex-wrap:wrap;margin-top:1rem;padding:.75rem 0;background:var(--grund);box-shadow:0 -8px 10px var(--grund);z-index:2}
.dialog-actions .btn{min-width:0;flex:1}
.dialog-body .reminder-note{font-size:.875rem;color:var(--tinte-2);margin:1rem 0 0;padding-bottom:1rem}
.dialog-body:has(#reminder-download){padding-bottom:1rem}
.reminder-feedback{font-size:.875rem;line-height:1.6;min-height:1.6em;margin:.7rem 0}
.reminder-note{color:var(--tinte-2)}
/* The toast sits bottom left, never over the navigation. */
.toast{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 2rem);padding:.85rem 1.2rem;border-radius:var(--radius-btn);background:var(--tinte);color:var(--grund);font-size:.9375rem;box-shadow:var(--dialog-shadow);z-index:60;visibility:hidden;pointer-events:none}
.toast.visible{visibility:visible}
.consent-panel{position:fixed;inset:auto 0 0;z-index:90;background:var(--grund);border-top:1px solid var(--tinte);box-shadow:var(--dialog-shadow);max-height:90dvh;overflow:auto;padding:22px 28px}
.consent-inner{max-width:1080px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.consent-panel h2{font-size:1.5rem;margin:.2em 0 .5em}
.consent-panel p{font-size:.9375rem;line-height:1.55;max-width:75ch}
.consent-panel a{text-decoration:underline}
.consent-actions{display:flex;flex-direction:column;gap:10px}
.consent-choice{min-height:44px;width:100%}
.consent-choice[data-consent-reject]{background:transparent;color:var(--tinte);border-color:var(--linie-strong)}
.consent-choice[data-consent-reject]:hover{background:var(--feld);border-color:var(--tinte);color:var(--tinte)}
.consent-status{font-weight:600}
.expired-account-link{font-size:.9375rem;line-height:1.55}

/* 13. Media queries ------------------------------------------------------- */
@media(pointer:coarse){.text-btn,.filter,.nav-menu,.footer-links a,.nav-links a,.sponsor-strip a,.footer-links [data-privacy-settings],.switch{min-height:44px;display:inline-flex;align-items:center}.quick-times .filter{min-height:44px}}
@media(max-width:1180px){.instrument{grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr)}}
@media(max-width:1000px){.instrument{grid-template-columns:minmax(0,1.1fr) minmax(260px,1fr);gap:0 28px}.desk-lower{gap:32px}.planner{gap:24px}.article-layout{grid-template-columns:minmax(0,1fr) 230px;gap:32px}.faq-section{gap:32px}}
@media(max-width:720px){
html{scroll-padding-top:24px}
.nav{min-height:64px;gap:.5rem;position:relative}
.brand{font-size:1.2rem}.brand-mark{width:28px;height:28px}
.nav-menu{display:inline-flex;align-items:center;gap:.4rem;order:3}
.nav-side{margin-left:auto}.local-time{font-size:.9375rem}
.nav-links{display:none;position:absolute;top:100%;right:0;left:0;background:var(--grund);border:1px solid var(--linie);border-radius:0 0 var(--radius-btn) var(--radius-btn);padding:1rem 1.2rem;z-index:21;flex-direction:column;align-items:flex-start;gap:.8rem;box-shadow:var(--dialog-shadow)}
.nav-links.open{display:flex}
.hero{padding:14px 0 0}
.instrument{grid-template-columns:1fr;grid-template-areas:"head" "dial" "controls" "forecast" "history";gap:16px 0;padding:16px 14px}
.dial-forecasts{margin-top:.2rem}
.history{grid-template-columns:1fr;gap:1rem 0;margin-top:.4rem}
.hero-example-caption{min-height:4.5em}
.hero h1{font-size:1.5rem;max-width:none}
.hero-tagline{font-size:1rem}
.hero .intro{font-size:.9rem}
.dial-wrap{width:min(100%,330px)}
.dial-centre{width:56%}
.hero-example-label{font-size:.8125rem;margin-bottom:.15rem}
.dial-main{font-size:2.15rem}
.dial-small{font-size:.95rem;margin-top:.25em}
.hero-example-caption{font-size:.9375rem;margin-top:.7rem}
.dial-label{font-size:22px}.dial-reset-label{font-size:24px}
.dial-controls{margin-top:0;gap:.65rem}
.how-it-works{gap:.5rem 1.2rem}
.how-it-works ol{gap:.35rem 1.2rem;flex-direction:column}
.planner{grid-template-columns:1fr;padding-top:22px;margin-top:32px}
.budget-line{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"name value" "caption caption" "ruler ruler"}
.budget-ruler{height:34px}
.manual-sentence{font-size:1.15rem;line-height:2.2}
.field.inline input,.field.inline select{font-size:1.15rem}
.desk-lower{grid-template-columns:1fr;margin:40px 0;gap:32px}
.feed-table,.feed-table thead,.feed-table tbody,.feed-table tr,.feed-table th,.feed-table td{display:block}
.feed-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.feed-table td{padding:.5rem .8rem;border-bottom:0}
.feed-table td:first-child{padding-top:.9rem}
.feed-table td:last-child{padding-bottom:.9rem;border-bottom:1px solid var(--linie)}
.feed-table tr:last-child td:last-child{border-bottom:0}
.feed-links{flex-direction:row;flex-wrap:wrap;gap:.3rem 1rem}
.divider-note{flex-direction:column;align-items:flex-start;gap:1rem}
.faq-section{grid-template-columns:1fr;gap:20px;margin:40px 0}
.faq-section .section-heading{max-width:none}
.footer-top,.footer-bottom,.sponsor-strip{flex-direction:column;align-items:flex-start;gap:1rem}
.footer-links{gap:.25rem 1rem}
.article-head{padding:26px 0 18px}
.article-head h1{font-size:clamp(2rem,9vw,2.6rem);max-width:none}
.article-lead{font-size:1.15rem}
.article-layout{grid-template-columns:1fr;gap:28px;padding-bottom:20px}
.article-body{font-size:1.0625rem}
.article-body table{font-size:.875rem}
.article-body td,.article-body th{padding:.6rem .45rem}
.sticky-note{position:static}
.article-aside{padding-bottom:16px}
.status-grid{grid-template-columns:1fr}
.full-updates{margin-bottom:32px}
.dial-rest{width:min(100%,300px)}
.dialog-head{padding:14px 16px 0}
.dialog-head h2{font-size:1.4rem}
.dialog-body{padding:8px 16px 0}
.session-fields{padding:0 0 .6rem .7rem}
.consent-panel{padding:16px}
.consent-inner{grid-template-columns:minmax(0,1fr);gap:12px}
.consent-actions{flex-direction:row;flex-wrap:wrap}
.consent-choice{flex:1 1 130px}
.consent-panel h2{font-size:1.2rem}
}
@media(max-width:720px){.sponsor-strip{min-height:156px}.sponsor-link{min-height:120px}}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important;animation:none!important}
.dial-wrap:has(.dial-handle:hover) .dial-hand-tip,.dial-wrap:has(.dial-handle:focus-visible) .dial-hand-tip{r:7}
/* No running hand under reduced motion: the small seconds dial is hidden; the digits still tick. */
.dial-seconds{display:none}
}
@media(forced-colors:active){
.dial-ring,.dial-tick,.dial-tick-major{stroke:CanvasText}
.dial-elapsed,.dial-hand line,.dial-reset-mark,.dial-hand-tip,.dial-seconds-hand line,.dial-seconds-hand circle,.history-now{stroke:Highlight;fill:Highlight}
.dial-expected-mark,.history-mark-reset,.history-mark-announcement,.history-mark-saved,.history-mark-reminder{stroke:CanvasText;fill:CanvasText}
.dial-allowance{stroke:LinkText}
.meter-fill,.ruler-elapsed,.ruler-now{background:Highlight}
.switch[aria-pressed=true]{border-bottom-color:Highlight}
.instrument,.feed-table{border:1px solid CanvasText}
.status-panel,.sticky-note,.answer,.callout,.return-hint{border-left:1px solid CanvasText}
.meter{border:1px solid CanvasText;background:Canvas;-webkit-mask:none;mask:none}
.btn,.field input,.field select,.field textarea,.nav-menu{border-color:ButtonText}
.clock-value,.origin-label,.copy,.clock-date{color:CanvasText}
:focus-visible{outline-color:Highlight}
}
@media print{
.topbar,.footer,.btn,.text-btn,.nav-menu,.sponsor-strip,dialog,.toast,.updates-header,.consent-panel,.dial-handle{display:none!important}
body{background:white;color:black}
.shell{width:100%}
.hero{padding:12px 0}
.instrument{display:block}
.feed-table,.sticky-note,.divider-note{break-inside:avoid;background:white;color:black;border:1px solid #999;box-shadow:none}
.article-layout{display:block}
}