/* ==========================================================================
   Surfacer App: design language, laid out like the iOS app (surfacer-news-ios)
   One system, two appearances. Chrome (backgrounds, text, separators, fills)
   switches with the theme; content colors (job cards, mosaics, profile card)
   stay recognisable in both and are only re-tuned for contrast.
   Navigation like iOS 26: Liquid Glass tab bar with a round search button,
   glass toolbar buttons, large titles with a grey subtitle, inset lists.
   Glass only on the navigation layer; content stays flat (no drop shadows).
   Type (Runde 3, analysis/brand_round3/APP_SPEC.md §3): Schibsted Grotesk for display and UI, Newsreader for
   reading text (always upright), Fragment Mono for labels; OFL, subset to woff2 in static/fonts.
   ========================================================================== */

/* ── 0. Fonts ──────────────────────────────────────────────────────────── */
@font-face{font-family:'Schibsted Grotesk';src:url(/assets/fonts/SchibstedGrotesk-var.woff2) format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url(/assets/fonts/Newsreader-var.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Fragment Mono';src:url(/assets/fonts/FragmentMono-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;
  /* chrome (light): the Runde 3 neutrals (APP_SPEC.md §2) under the old names, as the app's Theme.swift maps them */
  --bg:#F6F5F1; --bg-rgb:246,245,241; --bg-2:#EEEDE8; --surface:#FFFFFF; --surface-2:#FBFAF8;
  --label:#141414; --label-2:#55544F; --label-3:#6E6D67; --label-4:#C4C2BB;
  --secondary:#6E6D67; --tertiary:#B4B2AB; /* subtitles; chevrons */
  --separator:#E6E4DE; --separator-2:rgba(20,20,20,.16);
  --fill:rgba(20,20,20,.055); --fill-2:rgba(20,20,20,.1);
  --tint:#141414; --on-tint:#FFFFFF;
  --campus:#3A5BFF; --startups:#1F8A55; --alert:#E5484D; --heart:#E0245E; --reads:#6F5BE0;
  --glass:rgba(246,245,241,.74); --glass-line:rgba(20,20,20,.07); /* frosted panels on mosaics */
  /* Runde 3: ink for what is tapped, colour only for brand and meaning; the band's type, the Von uns card, the squares */
  --ground:#F6F5F1; --ink:#141414; --ink-2:#55544F; --ink-3:#6E6D67; --quiet:#8E8C86; --rule:#E6E4DE; --soft:#EEEDE8;
  --band-ink:#141414; --band-soft:rgba(20,20,20,.08); --band-meta:rgba(20,20,20,.66); --data-lo:#FFFFFF;
  --sel:#141414; --sel-ink:#FFFFFF;
  --own-ink:#F4F3EF; --own-meta:rgba(244,243,239,.7); --own-soft:rgba(255,255,255,.16);
  --mos1:rgba(255,255,255,.55); --mos2:rgba(255,255,255,.3); --mos3:rgba(20,20,20,.06);
  --own-mos1:rgba(255,255,255,.09); --own-mos2:rgba(255,255,255,.045);
  /* the colourway (Profil › Darstellung › Farbe): Blau, the app's default since 30 Oct; Lila below */
  --band:#D6E2FF; --accent:#3A5BFF; --accent-text:#2F4FE6; --tinted:#EEF3FF; --tag-bg:#D6E2FF; --own:#172033;
  --lg:rgba(252,251,248,.72); --lg-rim:rgba(255,255,255,.95); --lg-edge:rgba(18,18,18,.06); --lg-pill:rgba(18,18,18,.075);
  --lg-shadow:0 12px 32px -14px rgba(18,18,18,.3),0 2px 8px -3px rgba(18,18,18,.1); /* Liquid Glass: bars and their buttons */
  --switch-off:rgba(120,120,128,.16); --seg-track:rgba(118,118,128,.12); --seg-thumb:#FFFFFF;
  --shadow:0 22px 44px -28px rgba(18,18,18,.42);
  --shadow-sheet:0 -12px 50px -20px rgba(18,18,18,.3);
  --scrim:rgba(18,18,18,.22);
  --num-glow:none;
  --bar:#dde4a3; --bar-hero:#b8d63a;
  --pfad-cell:#FBF8F3; --pfad-grid:rgba(22,22,22,.08);
  /* content colors, tuned for light */
  --tile-fg:#121212;
  --card-orange:#EF8A62; --card-yellow:#F6D652; --card-cream:#F1E6BF; --card-green:#BCDD92; --card-blue:#ADCBF0; --card-lilac:#D7CBF3;
  --card-fg:#161616;
  /* type + motion */
  --sans:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Newsreader',ui-serif,Georgia,serif;
  --mono:'Fragment Mono',ui-monospace,Menlo,Consolas,monospace;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --out:cubic-bezier(.16,1,.3,1);
  --r-card:28px; --r-group:22px; --r-list:26px; --r-control:999px;
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
  --nav-h:56px;
}
/* dark: follows the system unless the user picked light; or forced via data-theme */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0E0E10; --bg-rgb:14,14,16; --bg-2:#26262C; --surface:#1A1A1E; --surface-2:#141417;
    --label:#F4F3EF; --label-2:#B5B4AF; --label-3:#8F8E89; --label-4:#3A3A3E;
    --secondary:#8F8E89; --tertiary:#55545A;
    --separator:#2A2A30; --separator-2:rgba(255,255,255,.2);
    --fill:rgba(255,255,255,.08); --fill-2:rgba(255,255,255,.14);
    --tint:#F4F3EF; --on-tint:#141414;
    --campus:#9AABFF; --startups:#6FD9A2; --alert:#FF7A7A; --reads:#A99BFF;
    --glass:rgba(26,26,30,.72); --glass-line:rgba(255,255,255,.08);
    --ground:#0E0E10; --ink:#F4F3EF; --ink-2:#B5B4AF; --ink-3:#8F8E89; --quiet:#77766F; --rule:#2A2A30; --soft:#26262C;
    --band-ink:#F4F3EF; --band-soft:rgba(255,255,255,.12); --band-meta:rgba(244,243,239,.7); --data-lo:rgba(255,255,255,.24);
    --sel:#F4F3EF; --sel-ink:#141414;
    --mos1:rgba(255,255,255,.1); --mos2:rgba(255,255,255,.055); --mos3:rgba(0,0,0,.22);
    --own-mos1:rgba(255,255,255,.08); --own-mos2:rgba(255,255,255,.04);
    --band:#1E2A44; --accent:#7D95FF; --accent-text:#7D95FF; --tinted:#171D2B; --tag-bg:#2C3A5C; --own:#1E2A44;
    --lg:rgba(38,38,40,.66); --lg-rim:rgba(255,255,255,.16); --lg-edge:rgba(255,255,255,.08); --lg-pill:rgba(255,255,255,.13);
    --lg-shadow:0 12px 32px -12px rgba(0,0,0,.9),0 2px 8px -3px rgba(0,0,0,.5);
    --switch-off:rgba(120,120,128,.32); --seg-track:rgba(118,118,128,.24); --seg-thumb:#636366;
    --shadow:0 24px 50px -26px rgba(0,0,0,.95); --shadow-sheet:0 -12px 50px -20px rgba(0,0,0,.9); --scrim:rgba(0,0,0,.5);
    --num-glow:drop-shadow(0 0 6px rgba(255,255,255,.35));
    --bar:rgba(227,233,168,.22); --bar-hero:#b8d63a;
    --pfad-cell:#2A2A2C; --pfad-grid:rgba(255,255,255,.1);
    --tile-fg:#FFFFFF;
    --card-orange:#EF8A62; --card-yellow:#F6D652; --card-cream:#F1E6BF; --card-green:#BCDD92; --card-blue:#ADCBF0; --card-lilac:#D7CBF3;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E0E10; --bg-rgb:14,14,16; --bg-2:#26262C; --surface:#1A1A1E; --surface-2:#141417;
  --label:#F4F3EF; --label-2:#B5B4AF; --label-3:#8F8E89; --label-4:#3A3A3E;
  --secondary:#8F8E89; --tertiary:#55545A;
  --separator:#2A2A30; --separator-2:rgba(255,255,255,.2);
  --fill:rgba(255,255,255,.08); --fill-2:rgba(255,255,255,.14);
  --tint:#F4F3EF; --on-tint:#141414;
  --campus:#9AABFF; --startups:#6FD9A2; --alert:#FF7A7A; --reads:#A99BFF;
  --glass:rgba(26,26,30,.72); --glass-line:rgba(255,255,255,.08);
  --ground:#0E0E10; --ink:#F4F3EF; --ink-2:#B5B4AF; --ink-3:#8F8E89; --quiet:#77766F; --rule:#2A2A30; --soft:#26262C;
  --band-ink:#F4F3EF; --band-soft:rgba(255,255,255,.12); --band-meta:rgba(244,243,239,.7); --data-lo:rgba(255,255,255,.24);
  --sel:#F4F3EF; --sel-ink:#141414;
  --mos1:rgba(255,255,255,.1); --mos2:rgba(255,255,255,.055); --mos3:rgba(0,0,0,.22);
  --own-mos1:rgba(255,255,255,.08); --own-mos2:rgba(255,255,255,.04);
  --band:#1E2A44; --accent:#7D95FF; --accent-text:#7D95FF; --tinted:#171D2B; --tag-bg:#2C3A5C; --own:#1E2A44;
  --lg:rgba(38,38,40,.66); --lg-rim:rgba(255,255,255,.16); --lg-edge:rgba(255,255,255,.08); --lg-pill:rgba(255,255,255,.13);
  --lg-shadow:0 12px 32px -12px rgba(0,0,0,.9),0 2px 8px -3px rgba(0,0,0,.5);
  --switch-off:rgba(120,120,128,.32); --seg-track:rgba(118,118,128,.24); --seg-thumb:#636366;
  --shadow:0 24px 50px -26px rgba(0,0,0,.95); --shadow-sheet:0 -12px 50px -20px rgba(0,0,0,.9); --scrim:rgba(0,0,0,.5);
  --num-glow:drop-shadow(0 0 6px rgba(255,255,255,.35));
  --bar:rgba(227,233,168,.22); --bar-hero:#b8d63a;
  --pfad-cell:#2A2A2C; --pfad-grid:rgba(255,255,255,.1);
  --tile-fg:#FFFFFF;
  --card-orange:#EF8A62; --card-yellow:#F6D652; --card-cream:#F1E6BF; --card-green:#BCDD92; --card-blue:#ADCBF0; --card-lilac:#D7CBF3;
}
/* Lila (Mosaik on the Runde 3 canvas, the app icon's lilac and orange); Nacht in dark mode */
:root[data-colorway="lila"]{--band:#DCCFF5; --accent:#EA5F22; --accent-text:#B4461A; --tinted:#F3EEFC; --tag-bg:#DCCFF5; --own:#2B2236}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"])[data-colorway="lila"]{--band:#2B2539; --accent:#FF8F5C; --accent-text:#FF8F5C; --tinted:#1F1C27; --tag-bg:#3A3350; --own:#2B2539}
}
:root[data-theme="dark"][data-colorway="lila"]{--band:#2B2539; --accent:#FF8F5C; --accent-text:#FF8F5C; --tinted:#1F1C27; --tag-bg:#3A3350; --own:#2B2539}
/* the website's phone mockups draw their own status bar (50px) and have no home indicator */
.framed{--safe-top:50px;--safe-bottom:0px}

/* a theme switch (app.js switchTheme): the theme's colour tokens are registered as colours, so they can fade, and
   they fade once, on the root; every element follows in step. Fading the colour on every element instead made nested
   text chase its parent's fade: it arrived 300 ms after the backgrounds. Colour transitions of single elements take
   their duration from --tc, which is 0s meanwhile, so they don't chase either. The shadows and the three --bg-rgb
   gradients switch at once; browsers without @property switch everything at once. */
@property --bg{syntax:'<color>';inherits:true;initial-value:transparent}@property --bg-2{syntax:'<color>';inherits:true;initial-value:transparent}@property --surface{syntax:'<color>';inherits:true;initial-value:transparent}
@property --surface-2{syntax:'<color>';inherits:true;initial-value:transparent}@property --label{syntax:'<color>';inherits:true;initial-value:transparent}@property --label-2{syntax:'<color>';inherits:true;initial-value:transparent}
@property --label-3{syntax:'<color>';inherits:true;initial-value:transparent}@property --label-4{syntax:'<color>';inherits:true;initial-value:transparent}@property --secondary{syntax:'<color>';inherits:true;initial-value:transparent}
@property --tertiary{syntax:'<color>';inherits:true;initial-value:transparent}@property --separator{syntax:'<color>';inherits:true;initial-value:transparent}@property --separator-2{syntax:'<color>';inherits:true;initial-value:transparent}
@property --fill{syntax:'<color>';inherits:true;initial-value:transparent}@property --fill-2{syntax:'<color>';inherits:true;initial-value:transparent}@property --tint{syntax:'<color>';inherits:true;initial-value:transparent}
@property --on-tint{syntax:'<color>';inherits:true;initial-value:transparent}@property --campus{syntax:'<color>';inherits:true;initial-value:transparent}@property --startups{syntax:'<color>';inherits:true;initial-value:transparent}
@property --alert{syntax:'<color>';inherits:true;initial-value:transparent}@property --reads{syntax:'<color>';inherits:true;initial-value:transparent}@property --kcol{syntax:'<color>';inherits:true;initial-value:transparent}@property --glass{syntax:'<color>';inherits:true;initial-value:transparent}@property --glass-line{syntax:'<color>';inherits:true;initial-value:transparent}
@property --lg{syntax:'<color>';inherits:true;initial-value:transparent}@property --lg-rim{syntax:'<color>';inherits:true;initial-value:transparent}@property --lg-edge{syntax:'<color>';inherits:true;initial-value:transparent}
@property --lg-pill{syntax:'<color>';inherits:true;initial-value:transparent}@property --switch-off{syntax:'<color>';inherits:true;initial-value:transparent}@property --seg-track{syntax:'<color>';inherits:true;initial-value:transparent}
@property --seg-thumb{syntax:'<color>';inherits:true;initial-value:transparent}@property --scrim{syntax:'<color>';inherits:true;initial-value:transparent}@property --bar{syntax:'<color>';inherits:true;initial-value:transparent}@property --pfad-cell{syntax:'<color>';inherits:true;initial-value:transparent}@property --pfad-grid{syntax:'<color>';inherits:true;initial-value:transparent}
@property --tile-fg{syntax:'<color>';inherits:true;initial-value:transparent}@property --card-orange{syntax:'<color>';inherits:true;initial-value:transparent}@property --card-yellow{syntax:'<color>';inherits:true;initial-value:transparent}
@property --card-cream{syntax:'<color>';inherits:true;initial-value:transparent}@property --card-green{syntax:'<color>';inherits:true;initial-value:transparent}@property --card-blue{syntax:'<color>';inherits:true;initial-value:transparent}
@property --card-lilac{syntax:'<color>';inherits:true;initial-value:transparent}
@property --ground{syntax:'<color>';inherits:true;initial-value:transparent}@property --ink{syntax:'<color>';inherits:true;initial-value:transparent}@property --ink-2{syntax:'<color>';inherits:true;initial-value:transparent}@property --ink-3{syntax:'<color>';inherits:true;initial-value:transparent}@property --quiet{syntax:'<color>';inherits:true;initial-value:transparent}@property --rule{syntax:'<color>';inherits:true;initial-value:transparent}@property --soft{syntax:'<color>';inherits:true;initial-value:transparent}@property --band-ink{syntax:'<color>';inherits:true;initial-value:transparent}@property --band-meta{syntax:'<color>';inherits:true;initial-value:transparent}@property --sel{syntax:'<color>';inherits:true;initial-value:transparent}@property --sel-ink{syntax:'<color>';inherits:true;initial-value:transparent}@property --band{syntax:'<color>';inherits:true;initial-value:transparent}@property --accent{syntax:'<color>';inherits:true;initial-value:transparent}@property --accent-text{syntax:'<color>';inherits:true;initial-value:transparent}@property --tinted{syntax:'<color>';inherits:true;initial-value:transparent}@property --tag-bg{syntax:'<color>';inherits:true;initial-value:transparent}@property --own{syntax:'<color>';inherits:true;initial-value:transparent}
html.recolor{--tc:0s;transition:--bg .2s ease,--bg-2 .2s ease,--surface .2s ease,--surface-2 .2s ease,--label .2s ease,--label-2 .2s ease,--label-3 .2s ease,--label-4 .2s ease,--secondary .2s ease,--tertiary .2s ease,--separator .2s ease,--separator-2 .2s ease,--fill .2s ease,--fill-2 .2s ease,--tint .2s ease,--on-tint .2s ease,--campus .2s ease,--startups .2s ease,--alert .2s ease,--reads .2s ease,--glass .2s ease,--glass-line .2s ease,--lg .2s ease,--lg-rim .2s ease,--lg-edge .2s ease,--lg-pill .2s ease,--switch-off .2s ease,--seg-track .2s ease,--seg-thumb .2s ease,--scrim .2s ease,--bar .2s ease,--pfad-cell .2s ease,--pfad-grid .2s ease,--tile-fg .2s ease,--card-orange .2s ease,--card-yellow .2s ease,--card-cream .2s ease,--card-green .2s ease,--card-blue .2s ease,--card-lilac .2s ease,--ground .2s ease,--ink .2s ease,--ink-2 .2s ease,--ink-3 .2s ease,--quiet .2s ease,--rule .2s ease,--soft .2s ease,--band-ink .2s ease,--band-meta .2s ease,--sel .2s ease,--sel-ink .2s ease,--band .2s ease,--accent .2s ease,--accent-text .2s ease,--tinted .2s ease,--tag-bg .2s ease,--own .2s ease}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-padding-top:120px}
body{margin:0;background:var(--bg);color:var(--label);font:400 16px/1.4 var(--sans);letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
button:disabled{cursor:default}
svg{display:block}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.mono{font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase}
.beispiel{display:inline-block;margin-left:6px;padding:3px 6px 2px;border:1px dashed var(--separator-2);border-radius:4px;
  font:600 9px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--label-3);vertical-align:1px}
.hairline{display:block;width:100%;height:1px;margin:0;border:0;background:var(--separator)}

/* Type scale (phone) */
.t-title{font:600 22px/1.18 var(--sans);letter-spacing:-.02em}
.t-headline{font:600 17px/1.25 var(--sans);letter-spacing:-.012em}
.t-body{font:400 16px/1.42 var(--sans)}
.t-sub{font:400 14px/1.35 var(--sans);color:var(--label-2)}
.t-foot{font:400 13px/1.35 var(--sans);color:var(--label-3)}

/* ── 3. Shell: navigation bar, large title, tab bar ────────────────────── */
.app{position:relative;width:100%;max-width:440px;min-height:100dvh;margin:0 auto;
  padding:calc(var(--safe-top) + var(--nav-h)) 16px max(118px,calc(var(--safe-bottom) + 84px));overflow-x:clip}

/* Liquid Glass: translucent, a bright rim on top, a soft shadow; only on bars and their buttons */
.glass{background:var(--lg);-webkit-backdrop-filter:blur(16px) saturate(1.8);backdrop-filter:blur(16px) saturate(1.8);
  box-shadow:var(--lg-shadow),inset 0 0 0 .5px var(--lg-edge),inset 0 1px 0 var(--lg-rim)}
/* frosted panel over a mosaic (frostedPanel in the app): material + tint + hairline, no shadow */
.frost{background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 0 0 1px var(--glass-line)}

.nav{position:fixed;z-index:40;top:0;left:50%;display:flex;align-items:center;gap:10px;width:100%;max-width:440px;
  height:calc(var(--safe-top) + var(--nav-h));padding:var(--safe-top) 16px 0;transform:translateX(-50%);pointer-events:none}
.nav>*{pointer-events:auto}
.nav-back{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;color:var(--label)}
.nav-back svg{width:20px;height:20px;margin-left:-2px}
.nav-title{display:flex;flex:1;flex-direction:column;justify-content:center;min-width:0;pointer-events:none;transition:opacity .25s ease}
.nav-title strong{overflow:hidden;font:600 17px/1.2 var(--sans);letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis}
.nav-title span{overflow:hidden;margin-top:1px;font:400 12px/1.25 var(--sans);color:var(--secondary);white-space:nowrap;text-overflow:ellipsis}
.nav.has-large .nav-title{opacity:0}
.nav.has-large.is-compact .nav-title{opacity:1}
/* over a cover the title waits until the cover has scrolled away */
.has-cover .nav-title{opacity:0}
.has-cover .nav.is-compact .nav-title{opacity:1}
/* over a photo the title stays, in white, like iOS over a News photo */
.has-photo .nav-title{opacity:1}
.has-photo .nav:not(.is-compact) .nav-title strong{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35)}
/* pushed screens: the inline title sits centred between the back button and the tools */
.pushed .nav-title{align-items:center;padding:0 2px;text-align:center}
.nav-spacer{width:44px;flex:none}
.nav-tools{display:flex;flex:none;align-items:center;height:44px;margin-left:auto;padding:0 3px;border-radius:22px}
.tool{display:grid;place-items:center;width:46px;height:44px;flex:none;border-radius:22px;color:var(--label)}
.tool svg{width:24px;height:24px}
.nav-tools .tool:only-child{width:38px}
.tool.is-on{color:var(--heart)}
.text-btn{height:44px;padding:0 14px;border-radius:22px;font:600 16px/1 var(--sans);letter-spacing:-.01em;color:var(--label)}

/* large title, the grey subtitle under it; both turn into the inline title on scroll */
.large-title{padding:8px 0 12px}
.large-title h1{font:700 34px/1 var(--sans);letter-spacing:-.035em}
.large-title p{margin-top:0;font:400 12px/1.3 var(--sans);color:var(--secondary)}
.large-title+.list-head{margin-top:10px}

/* scroll edge effect: content fades under the bars instead of a hard bar */
.edge{position:fixed;left:0;right:0;z-index:35;pointer-events:none;transition:opacity .3s ease}
.edge-top{top:0;height:calc(var(--safe-top) + var(--nav-h) + 24px);opacity:0;
  background:linear-gradient(180deg,rgba(var(--bg-rgb),1) 0%,rgba(var(--bg-rgb),.95) 68%,rgba(var(--bg-rgb),.55) 84%,rgba(var(--bg-rgb),0) 100%);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent);mask-image:linear-gradient(180deg,#000 76%,transparent)}
.is-scrolled .edge-top{opacity:1}
.edge-bottom{bottom:0;height:max(100px,calc(var(--safe-bottom) + 66px));
  background:linear-gradient(0deg,rgba(var(--bg-rgb),.8) 0%,rgba(var(--bg-rgb),0) 100%)}

/* tab bar: Heute, Ausgaben, Jobs, Gemerkt in one glass capsule, search as its own circle.
   Scrolling down shrinks both to circles (tabBarMinimizeBehavior .onScrollDown), scrolling up brings them back. */
.tabbar{position:fixed;z-index:40;left:50%;bottom:max(21px,calc(var(--safe-bottom) - 13px));display:flex;align-items:center;justify-content:space-between;
  width:100%;max-width:440px;padding:0 21px;transform:translateX(-50%);pointer-events:none;
  transition:bottom .55s var(--spring),padding .55s var(--spring)}
.tabbar>*{pointer-events:auto}
.tabs{position:relative;display:flex;width:290px;height:62px;padding:4px 5px;border-radius:31px;overflow:hidden;
  transition:width .55s var(--spring),height .55s var(--spring),padding .55s var(--spring)}
.tab{position:relative;display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;min-width:0;
  border-radius:27px;color:var(--label);font:600 10px/1.2 var(--sans);letter-spacing:.01em;
  transition:flex-grow .55s var(--spring),opacity .25s ease,background-color var(--tc,.3s) ease}
.tab svg{width:27px;height:27px;flex:none;transition:width .4s var(--out),height .4s var(--out)}
.tab span{max-height:14px;margin-top:1px;overflow:hidden;white-space:nowrap;transition:max-height .35s var(--out),opacity .2s ease}
.tab.is-on{background:var(--lg-pill)}
.tab:active svg{transform:scale(.9)}
.search-btn{display:grid;place-items:center;width:62px;height:62px;flex:none;border-radius:50%;color:var(--label);
  transition:width .55s var(--spring),height .55s var(--spring)}
.search-btn svg{width:25px;height:25px}
.tabbar.is-min{bottom:max(28px,calc(var(--safe-bottom) - 6px));padding:0 28px}
.tabbar.is-min .tabs{width:48px;height:48px;padding:0}
.tabbar.is-min .tab:not(.is-on){flex-grow:0;opacity:0;pointer-events:none}
.tabbar.is-min .tab.is-on{background-color:transparent}
.tabbar.is-min .tab span{max-height:0;opacity:0}
.tabbar.is-min .tab svg{width:24px;height:24px}
.tabbar.is-min .search-btn{width:48px;height:48px}
.tabbar.is-min .search-btn svg{width:22px;height:22px}

/* ── 4. Controls ───────────────────────────────────────────────────────── */
.tap{transition:transform .55s var(--spring),background-color var(--tc,.3s),color var(--tc,.3s),opacity .3s}
.tap:active{transform:scale(.955);transition-duration:.1s;transition-timing-function:ease-out}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:var(--fill);color:var(--label)}
.icon-btn svg{width:19px;height:19px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 22px;border-radius:var(--r-control);
  font:600 16px/1 var(--sans);letter-spacing:-.01em}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--tint);color:var(--on-tint)}
.btn-secondary{background:var(--fill-2);color:var(--label)}
.btn-block{width:100%}
.pill-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;width:max-content;margin:28px auto 0;padding:6px 6px 6px 22px;
  border-radius:var(--r-control);background:var(--fill-2);font:600 15px/1 var(--sans)}
.pill-cta .plus{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--tint);color:var(--on-tint)}
.pill-cta .plus svg{width:15px;height:15px}
.btn-capsule{height:30px;padding:0 12px;font:500 15px/1 var(--sans)}

/* chips (ChipStyle): light with a hairline, ink when on */
.chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;height:38px;padding:0 16px;border-radius:999px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--separator-2);color:var(--label);
  font:500 15px/1 var(--sans);letter-spacing:-.006em;white-space:nowrap;transition:background-color var(--tc,.25s),color var(--tc,.25s),box-shadow var(--tc,.25s),transform .45s var(--spring)}
.chip svg{width:17px;height:17px}
.chip b{font-weight:500;opacity:.6;font-variant-numeric:tabular-nums}
.chip.is-on{background:var(--tint);color:var(--on-tint);box-shadow:none}
.chip-row{display:flex;gap:8px;margin:0 -16px;padding:6px 16px;overflow-x:auto;scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
/* filter chips in a bar under the navigation bar (Einstiegsjobs) */
.chips{position:sticky;top:calc(var(--safe-top) + var(--nav-h));z-index:36;display:flex;gap:8px;margin:2px -16px 6px;padding:8px 16px;
  overflow-x:auto;scrollbar-width:none;background:linear-gradient(rgba(var(--bg-rgb),1) 75%,rgba(var(--bg-rgb),0))}
.chips::-webkit-scrollbar{display:none}

/* segmented control: capsule track, white capsule thumb; --n segments, --i the selected one */
.segmented{position:relative;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));padding:2px;border-radius:999px;background:var(--seg-track)}
.segmented button{position:relative;z-index:1;height:32px;border-radius:999px;font:500 14px/1 var(--sans);letter-spacing:-.01em;color:var(--label);text-align:center}
.segmented button[aria-pressed="true"]{font-weight:600}
.seg-thumb{position:absolute;z-index:0;top:2px;bottom:2px;left:2px;width:calc((100% - 4px) / var(--n,3));border-radius:999px;background:var(--seg-thumb);
  box-shadow:0 3px 8px -2px rgba(0,0,0,.16),0 0 0 .5px rgba(0,0,0,.04);transform:translateX(calc(var(--i,0) * 100%));transition:transform .5s var(--spring)}

/* switch, iOS 26 proportions: wide track, pill knob */
.switch{position:relative;width:63px;height:28px;flex:none;border-radius:999px;background:var(--switch-off);transition:background-color var(--tc,.25s) ease}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:37px;height:24px;border-radius:999px;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.04);transition:transform .45s var(--spring)}
.switch[aria-checked="true"]{background:#34C759}
.switch[aria-checked="true"]::after{transform:translateX(22px)}

/* ── 5. Lists (inset grouped, like Apple's Form and List) ─────────────── */
.list{border-radius:var(--r-list);background:var(--surface);overflow:hidden}
.list+.list{margin-top:20px}
.list-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:24px 16px 8px;
  font:600 17px/1.25 var(--sans);letter-spacing:-.015em;color:var(--secondary)}
.list-head b{font-weight:500;font-variant-numeric:tabular-nums}
.list-foot{margin:8px 16px 0;font:400 13px/1.35 var(--sans);color:var(--secondary)}
.li{--sep:16px;position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:10px 16px;
  font:400 17px/1.25 var(--sans);letter-spacing:-.012em;color:var(--label);text-align:left}
.li:has(.row-icon){--sep:60px}
.li:has(small){padding-top:13px;padding-bottom:13px}
.li+.li::before{content:"";position:absolute;top:0;left:var(--sep);right:16px;height:1px;background:var(--separator)}
.li-text{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
.li-text small{font:400 15px/1.3 var(--sans);letter-spacing:-.01em;color:var(--secondary)}
.li-value{display:flex;align-items:center;gap:6px;flex:none;font-size:17px;color:var(--secondary)}
.li-value svg{width:12px;height:12px;color:var(--tertiary)}
.li-end{flex:none;color:var(--tertiary)}
.li-end svg{width:13px;height:13px}
.li-button{justify-content:flex-start;color:var(--tint)}
.li-button:disabled{color:var(--tertiary)}
.list-pad{padding:12px 16px}
/* a labelled control under another in a padded list: "Farbe" and Lila | Blau (LabeledContent in the app) */
.li-split{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--separator);font:400 16px/1.3 var(--sans)}
.seg-fit{width:168px;flex:none}
.list>.srow+.srow,.list>.rl-row+.rl-row,.list>.srow-link+.srow-link{border-top:1px solid var(--separator)}
.rl-row{display:flex;align-items:center}
.rl-row>.srow,.rl-row>.li{flex:1;min-width:0}
.row-icon{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:8px;color:#fff}
.row-icon svg{width:20px;height:20px}
.row-icon-tint{background:var(--tint);color:var(--on-tint)}
.row-icon-dot::after{content:"";width:9px;height:9px;border-radius:50%;background:#fff}
.li-interview{--sep:72px;gap:12px;padding:11px 16px}
.li-issue{--sep:84px;gap:12px;padding:11px 16px}
.li-issue .mono{font-size:10px}
.issue-thumb{position:relative;display:block;width:56px;height:56px;flex:none;border-radius:12px;overflow:hidden;background:var(--fill)}
.issue-thumb img,.issue-thumb .mosaic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar-mosaic{position:relative;display:block;width:44px;height:44px;flex:none;border-radius:50%;overflow:hidden}
.avatar-mosaic .mosaic{position:absolute;inset:0;width:100%;height:100%}
.li-interview .mono{font-size:10px}
.li-who{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ── 6. Section heads, groups, rows (RowGroup, StoryRow) ───────────────── */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:32px 2px 12px}
.sec-head h2{font:600 22px/1.2 var(--sans);letter-spacing:-.02em;color:var(--head-tint,inherit)}
.sec-head .mono{color:var(--label-3)}
.head-link{font:500 15px/1 var(--sans);color:var(--label-3)}
.group{border-radius:var(--r-group);background:var(--surface);overflow:hidden}
.group>*+*{border-top:1px solid var(--separator)}
.srow{display:flex;align-items:center;gap:4px;width:100%;padding-right:6px}
.srow.is-leaving{overflow:hidden;opacity:0;transition:height .35s var(--out),opacity .2s ease}
.srow-link{display:flex;flex:1;align-items:center;gap:12px;min-width:0;padding:12px 4px 12px 12px;text-align:left}
.xrow,.prow{padding:12px}
.srow-text{display:block;flex:1;min-width:0}
.srow-topic{display:block;font-size:10px;color:var(--c)}
.srow-text strong{display:-webkit-box;margin-top:4px;overflow:hidden;font:600 15.5px/1.25 var(--sans);letter-spacing:-.01em;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.srow-text .prow-title{margin-top:0;font-size:16px}
.srow-meta{display:block;margin-top:5px;font-size:10px;color:var(--label-3)}
.prow .srow-meta{margin-top:4px}
.prow .li-end{color:var(--label-3)}
.thumb{position:relative;display:block;width:54px;height:54px;flex:none;border-radius:14px;overflow:hidden}
.thumb .mosaic{position:absolute;left:calc(var(--qx,0) * -100%);top:calc(var(--qy,0) * -100%);width:200%;height:200%}
.thumb-44{width:44px;height:44px}
.thumb-badge{position:absolute;right:4px;bottom:4px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#fff;color:#161616}
.thumb-badge svg{width:10px;height:10px}
.thumb-glyph{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.thumb-glyph svg{width:22px;height:22px}
.thumb-board .board{display:block;width:100%;height:100%}
.thumb-board::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18)}
.brief{padding:16px 2px;border-top:1px solid var(--separator);font:500 17px/1.32 var(--sans);letter-spacing:-.02em;color:var(--label-3)}
.brief b{font-weight:500;color:var(--label)}
.link-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r-group);background:var(--surface)}
.link-card-text{flex:1;min-width:0}
.link-card-text strong{display:block;font:600 16px/1.25 var(--sans);letter-spacing:-.01em}
.link-card-text .mono{display:block;margin-top:3px;font-size:10px;color:var(--label-3)}
.link-card>svg{width:13px;height:13px;flex:none;color:var(--label-3)}
.nl-icon{width:44px;height:44px;flex:none;border-radius:12px}

/* hearts */
svg .fill{opacity:0;transition:opacity .2s}
.is-on svg .fill{opacity:1}
.heart-mini{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;color:var(--label-2)}
.heart-mini svg{width:19px;height:19px}
.heart-mini.is-on,.heart-btn.is-on{color:var(--heart)}
.heart{position:relative;display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;background:rgba(255,255,255,.55);color:#161616;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.heart svg{width:18px;height:18px}
.heart.is-on{color:var(--heart)}
.pop svg{animation:heart-pop .6s var(--spring)}
@keyframes heart-pop{0%{transform:scale(1)}30%{transform:scale(.7)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
.burst{position:absolute;inset:0;pointer-events:none}
.burst i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--heart);animation:burst .6s var(--out) forwards;transform:rotate(var(--a))}
@keyframes burst{to{transform:rotate(var(--a)) translateY(-30px) scale(.2);opacity:0}}

/* ── 7. Heute ──────────────────────────────────────────────────────────── */
/* Heute's blocks and cards are Runde 3's: static/r3-news.css */
.article-cover .mosaic{position:absolute;inset:0;width:100%;height:100%}
.page-end{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:32px}
.page-end p{margin-top:6px;font:500 15px/1.2 var(--sans);letter-spacing:-.01em;color:var(--label-3)}
.empty-state{display:grid;justify-items:center;gap:6px;padding:48px 24px 8px;text-align:center}
.empty-glyph{color:var(--secondary)}
.empty-glyph svg{width:50px;height:50px}
.empty-state strong{margin-top:10px;font:700 20px/1.2 var(--sans);letter-spacing:-.02em}
.empty-state p{max-width:30ch;font:400 15px/1.4 var(--sans);color:var(--secondary)}
.empty-state .btn{margin-top:12px}
/* Heute anpassen */
.li-edit{gap:12px;padding-right:6px;background:var(--surface);transition:transform .35s var(--out)}
.li-edit.is-off .row-icon,.li-edit.is-off .li-text{opacity:.45}
.li-edit .li-text span,.li-edit .li-text small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.li-edit .li-text small{font-size:14px}
.li-edit .row-icon,.li-edit .li-text{transition:opacity .25s ease}
.grip{display:grid;place-items:center;width:40px;height:44px;flex:none;color:var(--tertiary);cursor:grab;touch-action:none}
.grip svg{width:20px;height:20px}
.li-edit.is-dragging{z-index:2;box-shadow:0 12px 30px -10px rgba(0,0,0,.28);transition:none;cursor:grabbing}
.li-edit.is-dragging::before{display:none}

/* ── 8. Sheets ─────────────────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;z-index:60;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .35s ease}
.scrim.is-open{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:50%;bottom:0;z-index:61;display:flex;flex-direction:column;width:100%;max-width:440px;
  max-height:calc(100dvh - max(var(--safe-top),10px));border-radius:34px 34px 0 0;background:var(--surface);box-shadow:var(--shadow-sheet);
  transform:translate(-50%,105%);visibility:hidden;overscroll-behavior:contain;
  transition:transform .55s var(--out),visibility 0s linear .55s}
.sheet.is-open{transform:translate(-50%,0);visibility:visible;transition:transform .55s var(--out),visibility 0s}
.sheet.dragging{transition:none}
.sheet-grouped{background:var(--bg)}
.sheet-large{height:calc(100dvh - max(var(--safe-top),10px));background:var(--bg)}
.sheet-tall{height:min(660px,calc(100dvh - var(--safe-top) - 10px));background:var(--bg)}
.sheet-bar{position:relative;display:flex;flex:none;align-items:center;justify-content:center;height:76px;padding:0 70px;touch-action:none}
.sheet-bar h2{font:600 17px/1.2 var(--sans);letter-spacing:-.01em;outline:0}
.sheet-close{position:absolute;top:16px;right:16px}
.sheet-bar .tool{width:44px;height:44px;border-radius:50%}
.sheet-bar .tool svg{width:21px;height:21px}
.sheet-scroll{flex:1;min-height:0;padding:2px 16px calc(28px + var(--safe-bottom));overflow:auto;overscroll-behavior:contain}
.sheet-pad{padding:0 22px calc(22px + var(--safe-bottom));overflow:auto}
.grabber{display:block;flex:none;width:36px;height:5px;margin:8px auto 18px;border-radius:3px;background:var(--label-4);cursor:grab;touch-action:none}
.sheet-h{font:700 26px/1.12 var(--sans);letter-spacing:-.035em;outline:0}
.sheet-rows{margin:18px 0 0;border-radius:var(--r-group);background:var(--surface-2);overflow:hidden}
.sheet-rows div{display:flex;justify-content:space-between;gap:16px;padding:14px 16px;border-top:1px solid var(--separator);font-size:15px}
.sheet-rows div:first-child{border-top:0}
.sheet-rows dt{color:var(--label-2)} .sheet-rows dd{margin:0;font-weight:500;text-align:right}
.sheet-note{margin-top:16px;padding:16px;border-radius:var(--r-group);background:var(--fill);font:400 15px/1.45 var(--sans);color:var(--label-2)}
.sheet-note .mono{display:block;margin-bottom:6px;color:var(--label-3)}
.sheet-actions{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:20px}
/* small dialog (new collection, rename) */
.dialog{position:fixed;left:50%;top:42%;z-index:71;width:min(300px,calc(100% - 48px));padding:20px 16px 12px;border-radius:26px;background:var(--surface);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.45);transform:translate(-50%,-50%) scale(1.08);opacity:0;visibility:hidden;text-align:center;
  transition:transform .35s var(--spring),opacity .2s ease,visibility 0s linear .35s}
.dialog.is-open{transform:translate(-50%,-50%);opacity:1;visibility:visible;transition:transform .35s var(--spring),opacity .2s ease,visibility 0s}
.dialog h2{font:600 17px/1.25 var(--sans);letter-spacing:-.01em}
.dialog p{margin-top:4px;font:400 13px/1.35 var(--sans);color:var(--secondary)}
.dialog input{width:100%;height:40px;margin-top:14px;padding:0 12px;border:0;border-radius:12px;background:var(--fill);color:var(--label);
  font:400 16px/1 var(--sans);outline:0}
.dialog input:focus{box-shadow:0 0 0 2px var(--separator-2)}
.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.dialog-actions button{height:44px;border-radius:999px;background:var(--fill);font:500 16px/1 var(--sans)}
.dialog-actions button[data-dialog-ok]{background:var(--tint);color:var(--on-tint);font-weight:600}
.dialog-actions button:disabled{opacity:.4}
.dialog-scrim{z-index:70}
/* menu (Sammlung: rename, delete) */
.menu{position:fixed;z-index:72;min-width:220px;padding:6px;border-radius:22px;transform:scale(.9);transform-origin:top right;opacity:0;visibility:hidden;
  transition:transform .3s var(--spring),opacity .15s ease,visibility 0s linear .3s}
.menu.is-open{transform:none;opacity:1;visibility:visible;transition:transform .3s var(--spring),opacity .15s ease,visibility 0s}
/* under an open menu: a tap anywhere else lands here and closes it (a solved board's cells are disabled and stay silent) */
.menu-scrim{position:fixed;inset:0;z-index:71}
.menu button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;height:44px;padding:0 14px;border-radius:16px;font:400 16px/1 var(--sans);color:var(--label)}
.menu button:hover{background:var(--fill)}
.menu button svg{width:18px;height:18px}
.menu .is-danger{color:#FF3B30}

/* ── 9. Toast ──────────────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:max(96px,calc(var(--safe-bottom) + 62px));z-index:70;display:flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;
  color:var(--label);font:600 14px/1 var(--sans);white-space:nowrap;transform:translate(-50%,20px) scale(.9);opacity:0;pointer-events:none;
  background:var(--lg);-webkit-backdrop-filter:blur(16px) saturate(1.8);backdrop-filter:blur(16px) saturate(1.8);
  box-shadow:var(--lg-shadow),inset 0 0 0 .5px var(--lg-edge),inset 0 1px 0 var(--lg-rim);
  transition:transform .5s var(--spring),opacity .25s}
.toast.show{transform:translate(-50%,0) scale(1);opacity:1}
.toast i{display:grid;place-items:center;color:var(--heart)}
.toast i svg{width:17px;height:17px}
.toast .toast-list{display:none;color:var(--label)}
.toast.is-list .toast-heart,.toast.is-plain .toast-heart{display:none}
.toast.is-list .toast-list{display:grid}

/* ── 10. Ausgaben ──────────────────────────────────────────────────────── */
/* Ausgaben is Runde 3's: static/r3-news.css */
img.row-icon{border-radius:8px}

/* ── 11. Dot numbers (the issue charts, _charts.html) ──────────────────────────────────────────── */
.metric-num .dotnum{position:absolute;left:50%;top:0;width:auto;height:76px;transform:translateX(-50%);color:var(--label);filter:var(--num-glow)}
.metric-num .dotnum[hidden]{display:none}
.metric-unit{font:600 15px/1.3 var(--sans)}
.dotnum circle{fill:currentColor}
.dotnum.scatter circle,.dotnum.replay circle{animation:gather 1s var(--out) both;animation-delay:var(--d,0ms)}
.settled .dotnum.scatter circle{animation:none}
@keyframes gather{from{transform:translate(var(--x),var(--y)) scale(.3);opacity:0}to{transform:none;opacity:1}}

/* ── 12. Gemerkt: Sammlungen ───────────────────────────────────────────── */
.shelf{display:flex;align-items:flex-start;gap:12px;margin:0 -16px;padding:4px 16px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 16px;scrollbar-width:none}
.shelf::-webkit-scrollbar{display:none}
.shelf-tile{display:flex;flex:0 0 128px;flex-direction:column;min-width:0;scroll-snap-align:start;text-align:left}
.shelf-tile strong{display:block;margin-top:9px;overflow:hidden;font:600 15px/1.25 var(--sans);letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis}
.shelf-tile small{display:block;margin-top:2px;font:400 13px/1.25 var(--sans);color:var(--label-3)}
.rl-cover{position:relative;display:block;aspect-ratio:1;border-radius:18px;overflow:hidden;background:var(--surface)}
.rl-cover .mosaic{position:absolute;inset:0;width:100%;height:100%}
.rl-grid{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.rl-grid span{position:relative;overflow:hidden}
.rl-glyph{position:absolute;inset:0;width:46px;height:46px;margin:auto;display:grid;place-items:center;border-radius:50%;color:#161616;
  background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.rl-glyph svg{width:20px;height:20px}
.shelf-new .rl-cover{display:grid;place-items:center;color:var(--label-2);box-shadow:inset 0 0 0 1.5px transparent;
  background:var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><rect x='.75' y='.75' width='calc(100% - 1.5px)' height='calc(100% - 1.5px)' rx='17.25' fill='none' stroke='%23121212' stroke-opacity='.16' stroke-width='1.5' stroke-dasharray='5 4'/></svg>")}
.shelf-new .rl-cover svg{width:28px;height:28px}
.rl-head{display:grid;justify-items:center;padding:12px 0 8px;text-align:center}
.rl-head .rl-cover{width:184px;border-radius:26px}
.rl-head h1{margin-top:18px;font:700 26px/1.15 var(--sans);letter-spacing:-.03em}
.rl-head p{margin-top:4px;font:400 15px/1.3 var(--sans);color:var(--label-3)}
.li-remove{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:#FF3B30;color:#fff}
.li-remove svg{width:14px;height:14px}
.editing .li-remove-wrap{display:flex}
.li-remove-wrap{display:none;align-items:center;padding-left:14px}
.rl-items .srow,.saved-list .srow{background:var(--surface)}

/* ── 13. Suche: the search field (the results are static/r3-suche.css) ─── */
/* the search field takes the tab bar's place; the circle on the left goes back to the last tab */
.searchbar{position:fixed;z-index:40;left:50%;bottom:max(28px,calc(var(--safe-bottom) - 6px));display:flex;align-items:center;gap:10px;width:100%;max-width:440px;
  padding:0 28px;transform:translateX(-50%);transition:transform .3s var(--out)}
.search-back{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:50%;color:var(--label)}
.search-back svg{width:24px;height:24px}
.search-field{display:flex;flex:1;align-items:center;gap:8px;height:48px;padding:0 16px;border-radius:24px}
.search-field svg{width:19px;height:19px;flex:none;color:var(--secondary)}
.search-field input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--label);font:400 17px/1 var(--sans);letter-spacing:-.01em;outline:0}
.search-field input::placeholder{color:var(--secondary)}
.search-field input::-webkit-search-cancel-button{-webkit-appearance:none}
.search-clear{display:grid;place-items:center;width:20px;height:20px;flex:none;border-radius:50%;background:var(--tertiary);color:var(--surface)}
.search-clear svg{width:11px;height:11px;color:inherit}
.no-results{display:grid;justify-items:center;gap:6px;padding:60px 24px 0;text-align:center}
.no-results svg{width:44px;height:44px;color:var(--secondary)}
.no-results strong{margin-top:8px;font:700 20px/1.2 var(--sans);letter-spacing:-.02em}
.no-results p{font:400 15px/1.4 var(--sans);color:var(--secondary)}

/* ── 14. Rätsel ────────────────────────────────────────────────────────── */
.puzzle-card{display:block;padding:16px;border-radius:var(--r-card);background:var(--surface)}
.puzzle-card+.puzzle-card{margin-top:18px}
.puzzle-board{position:relative;display:block;aspect-ratio:1;border-radius:18px;overflow:hidden}
.puzzle-board .board{display:block;width:100%;height:100%}
.puzzle-board::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18)}
.puzzle-question{position:relative;display:block;padding:70px 8px 8px;border-radius:18px;overflow:hidden}
.puzzle-question>.mosaic{position:absolute;inset:0;width:100%;height:100%}
.puzzle-question .frost{position:relative;display:block;padding:14px 16px 15px;border-radius:20px}
.puzzle-question strong{display:block;margin-top:6px;font:600 19px/1.22 var(--sans);letter-spacing:-.02em}
.puzzle-question .mono{color:var(--label-3)}
.puzzle-foot{display:flex;align-items:center;gap:12px;padding-top:16px}
.puzzle-foot>span:first-child{flex:1;min-width:0}
.puzzle-foot strong{display:block;font:700 24px/1.15 var(--sans);letter-spacing:-.03em}
.puzzle-foot .mono{display:block;margin-top:4px;color:var(--label-3)}
.puzzle-action{display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:999px;background:var(--tint);color:var(--on-tint);font:600 15px/1 var(--sans);letter-spacing:-.01em}
.puzzle-card .hairline{margin:16px 0}
.puzzle-main{display:block}
.free-row{display:flex;align-items:center;gap:12px}
/* Bestenliste: a ranked list, the reader's own row marked (the app's LeaderboardView) */
.boards .segmented+.segmented{margin-top:10px}
.boards .board{margin-top:18px}
.board-head{color:var(--label-3)}
.board-list{margin:10px 0 0;padding:0;list-style:none}
.board-row{display:grid;grid-template-columns:2em minmax(0,1fr) auto;align-items:baseline;gap:10px;padding:11px 0;border-top:1px solid var(--separator)}
.board-row:first-child{border-top:0}
.board-row strong{overflow:hidden;font:600 16px/1.25 var(--sans);letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis}
.board-rank,.board-time{color:var(--label-3);font-variant-numeric:tabular-nums}
.board-row.is-me strong,.board-row.is-me .board-rank{color:var(--campus)}
.board-empty{margin-top:12px;color:var(--label-2);font:400 15px/1.4 var(--sans)}
.board-note{margin:16px 4px 0;color:var(--label-3);font:400 13px/1.45 var(--sans)}
.pz-board{display:inline-flex;align-items:center;gap:2px;margin-top:10px;color:var(--label-2);font:500 14px/1 var(--sans)}
.pz-board svg{width:12px;height:12px}
.free-row>span:first-child{flex:1;min-width:0}
/* Freies Spiel: its title, then a row per pool, Normal and Schwer (the app's FreePlaySection) */
.free-play{display:grid;gap:14px}
.free-title{font:650 17px/1.2 var(--sans);letter-spacing:-.02em}
.free-row strong{display:block;font:600 16px/1.2 var(--sans);letter-spacing:-.01em}
.free-row .mono{display:block;margin-top:4px;color:var(--label-3)}
.puzzle-action.is-quiet{background:var(--fill);color:var(--label)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stats b{display:block;font:600 20px/1.1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stats .mono{display:block;margin-top:3px;font-size:10px;color:var(--label-3)}
.puzzle-next{margin-top:24px;font:400 13px/1.3 var(--sans);color:var(--label-3);text-align:center}

/* ── 14b. Rätsel games (MosaikGameView, EstimateGameView) ───────────────── */
.game .app{padding-bottom:max(150px,calc(var(--safe-bottom) + 120px))}
.pz-game{padding-top:8px}
.mboard{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));aspect-ratio:1;border-radius:18px;overflow:hidden;
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18);touch-action:none;-webkit-user-select:none;user-select:none;transition:box-shadow .4s ease}
.mcell{position:relative;display:grid;place-items:center;aspect-ratio:1;background:var(--c);-webkit-tap-highlight-color:transparent;
  transition:background-color .5s ease var(--d)}
.mcell:focus-visible{outline:2px solid var(--label);outline-offset:-2px;z-index:2}
.mcell::after{content:"";width:42%;height:42%;border-radius:50%;background:#161616;transform:scale(.4);opacity:0;
  transition:transform .32s var(--spring),opacity .18s ease,background-color .3s ease}
.mcell.has-stone::after{transform:none;opacity:1}
.mcell.is-conflict::after{background:#E5484D}
.mcell.has-mark::before{content:"";position:absolute;width:26%;height:26%;opacity:.38;
  background:linear-gradient(45deg,transparent 43%,#161616 43%,#161616 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,#161616 43%,#161616 57%,transparent 57%)}
.mboard-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .4s ease}
/* solved: the colours turn into the Surfacer mosaic from the top left, the stones turn white */
.mboard.is-revealed{box-shadow:none}
.mboard.is-revealed .mcell{background:var(--m)}
.mboard.is-revealed .mboard-lines{opacity:0}
.mboard.is-revealed .mcell::after{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12);transition-delay:var(--d)}
/* and back, on the palette button: the regions and their lines under the solution's stones, cell by cell as they went */
.mboard.is-revealed.is-colors{box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18)}
.mboard.is-revealed.is-colors .mcell{background:var(--c)}
.mboard.is-revealed.is-colors .mboard-lines{opacity:1}
.mboard.is-revealed.is-colors .mcell::after{background:#161616;box-shadow:none}
.pz-hint{margin-top:18px;font:400 14px/1.4 var(--sans);color:var(--label-3);text-align:center}
/* a shared Mosaik: the time its link asks to beat, and the board's own link to pass on */
.pz-rival{margin-top:18px;font:500 15px/1.35 var(--sans);text-align:center}
.pz-rival+.pz-hint{margin-top:8px}
.pz-result .pz-rival{margin-top:8px;color:var(--label-2)}
.pz-invite{display:flex;width:max-content;margin:20px auto 0}
.pz-clock{padding:0 4px 0 12px;font:600 15px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--label)}
.pz-bar{position:fixed;z-index:40;left:50%;bottom:max(21px,calc(var(--safe-bottom) - 13px));display:flex;justify-content:space-between;
  width:100%;max-width:440px;padding:0 21px;transform:translateX(-50%);pointer-events:none}
.pz-tool{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:var(--label);pointer-events:auto}
.pz-tool svg{width:22px;height:22px}
.pz-tool:disabled{color:var(--tertiary)}
.pz-rules{padding-bottom:calc(24px + var(--safe-bottom))}
.pz-rule{display:flex;gap:14px;margin-top:18px}
.pz-rule svg{width:22px;height:22px;flex:none;margin-top:1px}
.pz-rule strong{display:block;font:600 16px/1.3 var(--sans)}
.pz-rule small{display:block;margin-top:3px;font:400 14px/1.4 var(--sans);color:var(--label-2)}
.pz-rules .btn{margin-top:26px}
@keyframes pz-shake{20%{transform:translateX(-8px)}45%{transform:translateX(8px)}70%{transform:translateX(-5px)}}
/* Pfad (PfadBoardView): light cells, walls as bars, the numbers as dots, the line in orange fading to lavender. Solved,
   the cells take the Surfacer mosaic one after another along the line (--k) and the line turns white. */
.pfad-wrap{position:relative;display:block;aspect-ratio:1;border-radius:18px;overflow:hidden}
.pfad-wrap::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px rgba(22,22,22,.18);pointer-events:none}
.pfad-board{display:block;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none}
.pfad-game .pfad-board{cursor:crosshair}
.pf-cells rect{fill:var(--pfad-cell)}
.pf-grid{fill:none;stroke:var(--pfad-grid);stroke-width:1px;vector-effect:non-scaling-stroke}
.pf-mosaic rect{opacity:0}
.is-revealed .pf-mosaic rect{opacity:1;transition:opacity .45s ease-in-out calc(var(--k,0) * 22ms)}
.pf-line line{stroke-width:.34;stroke-linecap:round}
.pf-line-white{opacity:0}
.is-revealed .pf-line:not(.pf-line-white){opacity:0;transition:opacity .6s ease-in-out}
.is-revealed .pf-line-white{opacity:.9;transition:opacity .6s ease-in-out .5s}
.pf-walls{fill:none;stroke:var(--label);stroke-width:.09;stroke-linecap:round}
.pf-nums circle{fill:var(--label)}
.pf-nums text{fill:var(--on-tint);font-family:var(--sans);font-size:.3px;font-weight:650;text-anchor:middle;dominant-baseline:central}
.puzzle-card .pfad-wrap,.pfad-game{display:block}
.pz-game .pfad-wrap{margin-top:0}

/* A category's colour (Theme.category; --kc, --kc-dark in the markup) follows the theme as --kcol: the crosswords'
   topics and News (.kc). It fades with the theme like the tokens on the root. */
.kw-tile,.kw-game,.kc{--kcol:var(--kc)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kw-tile,:root:not([data-theme="light"]) .kw-game,:root:not([data-theme="light"]) .kc{--kcol:var(--kc-dark)}}
:root[data-theme="dark"] .kw-tile,:root[data-theme="dark"] .kw-game,:root[data-theme="dark"] .kc{--kcol:var(--kc-dark)}
html.recolor .kc{transition:--kcol .2s ease}
/* CrosswordThumb: the grid's shape in white on the topic's mosaic; solved, the mosaic in the squares, on ink */
.kw-thumb{position:relative;display:block;overflow:hidden}
.kw-thumb>.mosaic,.kw-thumb>svg{position:absolute;inset:0;width:100%;height:100%}
.kw-thumb.is-solved{background:#161616}
.kw-thumb-card{height:190px;border-radius:18px}
.kw-thumb-fill{width:100%;height:100%}
.thumb-kw{position:relative;overflow:hidden}
.thumb-kw .kw-thumb{width:100%;height:100%}
.stats-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* the overview (CrosswordsView): Leicht · Mittel · Schwer, a tile per topic */
.kw-overview{padding-top:8px}
.kw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.kw-grid[hidden]{display:none}
.kw-tile{display:flex;flex-direction:column;min-width:0;padding:10px 10px 14px;border-radius:var(--r-group);background:var(--surface)}
.kw-tile .kw-thumb{aspect-ratio:1;border-radius:14px}
.kw-cat{margin-top:12px;font-size:10px;color:var(--kcol)}
.kw-tile strong{margin-top:3px;overflow:hidden;font:650 17px/1.2 var(--sans);letter-spacing:-.02em;white-space:nowrap;text-overflow:ellipsis}
.kw-status{margin-top:4px;font-size:10px;color:var(--label-3)}
/* the game (CrosswordGameView): white squares, the selected one in the topic's colour and its word tinted; a word
   that is right flashes letter by letter; solved, the squares turn into the topic's mosaic from the top left */
.kw-game{padding-top:8px}
/* while playing, the grid sits in the middle of the space between the bar at the top and the clue bar with the keys
   (253 px plus the safe area, the clue bar always two lines high), and the page doesn't scroll */
.kw-page .app:has(.kw-game:not([data-done])){padding-bottom:0}
.kw-game:not([data-done]){display:flex;flex-direction:column;justify-content:center;min-height:calc(100dvh - var(--safe-top) - var(--nav-h));
  padding-bottom:calc(253px + max(6px,var(--safe-bottom)))}
.kw-board{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));
  aspect-ratio:var(--cols) / var(--rows)}
.kw-board.shake{animation:pz-shake .32s linear}
.kw-cell{position:relative;container-type:size;margin:5%;padding:0;border-radius:16%;background:var(--surface);color:var(--label);
  -webkit-tap-highlight-color:transparent;transition:background-color .2s var(--out),color .2s var(--out)}
.kw-cell::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ks);opacity:0;pointer-events:none}
.kw-cell.in-word{background:color-mix(in srgb,var(--kcol) 18%,var(--surface))}
.kw-cell.is-selected{background:var(--ks);color:#fff}
.kw-cell.is-given:not(.is-selected){color:var(--kcol)}
.kw-num{position:absolute;top:4%;left:9%;z-index:1;font:600 max(7px,23cqw)/1 var(--mono);color:var(--label-3)}
.kw-cell.is-selected .kw-num{color:rgba(255,255,255,.85)}
.kw-letter{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding-top:10%;font:650 50cqw/1 var(--sans)}
.kw-letter.pop{animation:kw-letter .32s var(--spring)}
@keyframes kw-letter{from{transform:scale(.3);opacity:0}}
.kw-cell.flash{animation:kw-pop .6s linear var(--fd,0ms)}
.kw-cell.flash::before{animation:kw-flash .6s linear var(--fd,0ms)}
@keyframes kw-flash{0%{opacity:0}17%{opacity:.85}100%{opacity:0}}
@keyframes kw-pop{0%{transform:scale(1)}23%{transform:scale(1.14)}60%{transform:scale(.98)}100%{transform:scale(1)}}
.kw-board.is-revealed .kw-cell{background:var(--m);color:var(--mi);transition:background-color .5s ease-in-out var(--rd),color .4s ease var(--rd)}
.kw-board.is-revealed .kw-num{color:var(--mi);opacity:.7}
/* the clue bar and the letter keys stay at the bottom, where the tab bar was */
.kw-bottom{position:fixed;z-index:40;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:10px;padding:14px 6px max(6px,var(--safe-bottom));
  background:linear-gradient(rgba(var(--bg-rgb),0),rgba(var(--bg-rgb),.96) 22px,rgba(var(--bg-rgb),1))}
.kw-banner{align-self:center;max-width:calc(100% - 32px);height:34px;margin:0;padding:0 14px;border-radius:999px;background:var(--tint);color:var(--on-tint);
  font:600 14px/34px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:scale(.9);pointer-events:none;
  transition:opacity .3s ease,transform .45s var(--spring)}
.kw-banner:empty{display:none}
.kw-banner.is-on{opacity:1;transform:none}
.kw-clue{display:flex;align-items:stretch;border-radius:18px;background:var(--surface)}
.kw-arrow{display:grid;place-items:center;flex:none;width:44px;color:var(--label)}
.kw-arrow svg{width:18px;height:18px}
.kw-clue-text{display:flex;flex:1;flex-direction:column;justify-content:center;gap:3px;min-width:0;min-height:73px;padding:8px 0;text-align:left;color:var(--label)}
.kw-clue-text .mono{font-size:10px;color:var(--kcol)}
.kw-clue-text strong{display:-webkit-box;overflow:hidden;font:600 16px/1.25 var(--sans);letter-spacing:-.01em;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kw-keys{display:grid;gap:9px}
.kw-row{display:flex;justify-content:center;gap:6px}
.kw-key{flex:0 0 calc((100% - 54px) / 10);height:46px;padding:0;border-radius:9px;background:var(--surface);color:var(--label);font:500 21px/1 var(--sans);
  -webkit-tap-highlight-color:transparent;transition:transform .4s var(--spring),background-color .2s}
.kw-key:active{background:var(--fill-2);transform:scale(.9);transition:transform .06s ease-out}
.kw-del,.kw-spacer{flex-basis:calc((100% - 54px) / 10 * 1.5)}
.kw-del{display:grid;place-items:center}
.kw-del svg{width:22px;height:22px}
.pz-sub{margin-top:4px;font:400 14px/1.4 var(--sans);color:var(--label-2)}
.pz-result .btn-primary{display:flex;align-items:center;justify-content:center;gap:6px}
.pz-result .btn-primary svg{width:14px;height:14px}
.pz-result .btn+.btn{margin-top:12px}
.pz-card{margin-top:28px;padding:20px;border-radius:var(--r-card);background:var(--surface);text-align:center}
.pz-card>.mono{color:var(--label-3)}
.pz-dots{display:flex;justify-content:center;margin-top:16px}
.pz-dots .dotnum{width:auto;height:66px;color:var(--label);filter:var(--num-glow)}
.pz-ranking{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px;font:500 15px/1.3 var(--sans)}
.pz-card .hairline{margin:22px 0}
.pz-streak{display:flex;align-items:center;gap:16px;text-align:left}
.pz-streak-num .dotnum{display:block;width:auto;height:40px;color:var(--label);filter:var(--num-glow)}
.pz-streak-text strong{display:block;font:600 17px/1.2 var(--sans)}
.pz-streak-text small{display:block;margin-top:2px;font:400 14px/1.3 var(--sans);color:var(--label-2)}
.pz-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:18px}
.pz-day{display:flex;flex-direction:column;align-items:center;gap:6px}
.pz-day i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--separator-2)}
.pz-day.is-today i{box-shadow:inset 0 0 0 1.5px var(--label)}
.pz-day.is-solved i{background:var(--label);color:var(--on-tint)}
.pz-day i svg{width:10px;height:10px}
.pz-day .mono{font-size:10px;color:var(--label-3)}
.pz-day.is-today .mono{color:var(--label)}
.pz-share{height:46px;margin-top:24px}
.pz-more{height:46px;margin-top:14px}
.pz-next{margin-top:14px;font:400 13px/1.3 var(--sans);color:var(--label-3)}
.pz-result-in{animation:pz-rise .6s var(--out)}
@keyframes pz-rise{from{opacity:0;transform:translateY(24px)}}

/* ── 15. Profil ────────────────────────────────────────────────────────── */
.profile-card{position:relative;margin:27px 0 36px;padding:64px 8px 8px;border-radius:var(--r-card);overflow:hidden}
.profile-card>.mosaic{position:absolute;inset:0;width:100%;height:100%}
.profile-panel{position:relative;display:flex;align-items:center;gap:14px;padding:14px;border-radius:20px}
.avatar{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:50%;background:var(--tint);color:var(--on-tint);font:600 20px/1 var(--sans)}
.profile-text{display:block;min-width:0}
.profile-text strong{display:block;font:600 18px/1.2 var(--sans);letter-spacing:-.02em}
.profile-text small{display:block;margin-top:3px;font:400 13.5px/1.35 var(--sans);color:var(--label-2)}
.icon-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:6px 0}
.icon-choice{display:flex;flex-direction:column;align-items:center;gap:8px;font:400 13px/1.2 var(--sans);color:var(--label-2)}
.icon-choice img{display:block;width:64px;height:64px;border-radius:15px;outline:2.5px solid transparent;outline-offset:4px;transition:outline-color var(--tc,.2s) ease}
.icon-choice[aria-pressed="true"]{font-weight:600;color:var(--label)}
.icon-choice[aria-pressed="true"] img{outline-color:var(--label)}

/* ── 16. Interview, Thema ──────────────────────────────────────────────── */
.interview-page{padding:8px 4px 0}
.interview-avatar-xl{position:relative;display:block;width:96px;height:96px;border-radius:50%;overflow:hidden}
.interview-avatar-xl .mosaic{position:absolute;inset:0;width:100%;height:100%}
.interview-page .kicker{display:block;margin-top:22px;color:var(--c)}
.interview-page h1{margin-top:8px;font:700 28px/1.12 var(--sans);letter-spacing:-.03em}
.interview-page .where{display:block;margin-top:10px;color:var(--label-3)}
.interview-page .hairline{margin-top:14px}
.qa-list{display:grid;gap:26px;padding:15px 0 28px}
.qa-list h3{font:600 19px/1.3 var(--sans);letter-spacing:-.015em}
.qa-list p{margin-top:8px;font:400 17px/1.55 var(--sans);color:var(--label-2)}
.interview-note{display:block;margin-top:18px;color:var(--label-4)}
.topic-first{padding-top:8px}

.metric-num{position:relative;height:76px;margin:16px auto 12px}

/* ── 16b. News (NewsCards.swift, NewsStoryView.swift): one event, several sources, a Symbolbild ───── */
/* story headlines vary their type as in the app: Apple's serif (New York through ui-serif, Georgia elsewhere) and
   SF Compressed (the system font's width axis; Bahnschrift, Roboto Condensed or Arial Narrow elsewhere). Inter stays
   everything else. */
.serif{font-family:ui-serif,'New York',Georgia,'Times New Roman',serif}
.compressed{font-family:-apple-system,BlinkMacSystemFont,Bahnschrift,'Roboto Condensed','Arial Narrow',sans-serif-condensed,system-ui,sans-serif;
  font-stretch:condensed;font-variation-settings:'wdth' 30;text-transform:uppercase}
.nthumb{position:relative;display:block;width:64px;height:64px;flex:none;border-radius:14px;overflow:hidden;background:var(--fill)}
.nthumb img,.ntile-photo img{display:block;width:100%;height:100%;object-fit:cover}
.nphoto{position:relative;display:block;overflow:hidden;background:var(--fill)}
.nphoto>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
img.is-portrait{object-position:50% 30%}  /* a portrait's face sits high (web.css); photo-focus.js places it exactly */
.nphoto-43{aspect-ratio:4/3}
.nphoto-169{aspect-ratio:16/9}
.nphoto-32{aspect-ratio:3/2}
.symbol-tag{position:absolute;z-index:1;left:10px;bottom:10px;padding:3px 6px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;
  font:600 9px/1.2 var(--mono);font-style:normal;letter-spacing:.09em;text-transform:uppercase}
/* "Campus · Studium & Geld" in the category's colour; "3 Quellen · tagesschau, Spiegel und Zeit" */
.nkicker{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--kcol)}
.nsources{display:block;font-size:10px;color:var(--label-3)}
.nline{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nkicker.on-photo{font-size:10.5px;color:rgba(255,255,255,.85)}
.nsources.on-photo{color:rgba(255,255,255,.75)}
/* a story this browser hasn't shown before: "Neu ·" in front of its line, quietly (the user, 6 Oct), as the app's
   SourcesLine: the campus blue (lighter in dark mode), white on photos and coloured grounds (overlay, zahl, poster) */
.nsources.is-new::before{content:"Neu · ";color:var(--campus);font-weight:600}
.nsources.on-photo.is-new::before{color:#fff}

/* rows: the photo on the left (Heute, Suche), or on the right in News */
.nrow{padding:12px}
.nrow .srow-topic{color:var(--kcol)}
.nrow-end{align-items:flex-start;gap:14px;padding:14px}
.nrow-end .nthumb{width:84px;height:84px;border-radius:12px}
.nrow-end .srow-text strong{font-size:16px;font-weight:650;line-height:1.24;letter-spacing:-.012em;-webkit-line-clamp:3}
.nrow-end .srow-meta{margin-top:7px}
/* tiles to swipe through */
.ncarousel{display:flex;align-items:stretch;gap:12px;margin:0 -16px;padding:0 16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none}
.ncarousel::-webkit-scrollbar{display:none}
.ncarousel .ntile{flex:0 0 62%;scroll-snap-align:start}
.ntile{display:flex;flex-direction:column;border-radius:var(--r-group);background:var(--surface);overflow:hidden}
.ntile-photo{position:relative;display:block;aspect-ratio:4/3;background:var(--fill)}
.ntile-body{display:flex;flex:1;flex-direction:column;padding:12px}
.ntile-topic{display:block;overflow:hidden;font-size:10px;white-space:nowrap;text-overflow:ellipsis;color:var(--kcol)}
.ntile strong{display:-webkit-box;margin-top:5px;overflow:hidden;font:600 15.5px/1.25 var(--sans);letter-spacing:-.01em;-webkit-line-clamp:5;-webkit-box-orient:vertical}
.ntile-meta{margin-top:auto;padding-top:10px}

/* the News tab: the bar, the big heads, sections */
.dhead{padding:40px 2px 14px}
.dhead h2{overflow:hidden;font:800 min(38px,10.4vw)/1.05 var(--sans);letter-spacing:-.035em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;color:var(--head-tint,var(--label))}
.dhead .mono{display:block;margin-top:6px;color:var(--label-3)}
.news-fresh{position:fixed;z-index:38;top:calc(var(--safe-top) + var(--nav-h) + 8px);left:50%;display:inline-flex;align-items:center;gap:6px;
  height:36px;padding:0 14px;border-radius:999px;background:var(--tint);color:var(--on-tint);font:600 14px/1 var(--sans);transform:translateX(-50%)}
.news-fresh[hidden]{display:none}
.news-fresh svg{width:15px;height:15px}

.ncard-note{padding:16px;border-radius:var(--r-group);background:var(--surface);font:400 15px/1.4 var(--sans);color:var(--label-2)}
.chip-tick svg{width:0;height:12px;margin-right:-6px;opacity:0;transform:scale(.4);transition:width .25s var(--out),margin .25s var(--out),opacity .2s ease,transform .3s var(--spring)}
.chip-tick.is-on svg{width:12px;margin-right:0;opacity:1;transform:none}

/* cards: each previews how its story's page opens */
.ncard{position:relative;display:block;overflow:hidden;border-radius:var(--r-group);background:var(--surface);color:var(--label);text-align:left}
.nfeature{border-radius:var(--r-card)}
.nfeature-body{display:block;padding:20px 22px 22px;text-align:center}
.nfeature-title{display:block;margin-top:10px;font:700 27px/1.12 var(--sans);letter-spacing:-.03em}
.nfeature .nsources{margin-top:14px}
/* a story's page is Runde 3's: static/r3-news.css */
/* under a pipeline card's summary: written with AI, the originals count (the user, 8 Oct) */
.nst-ai{margin-top:18px;font-size:13px;line-height:1.45;color:var(--label-3)}
.nst-ai a{color:var(--label-2);text-decoration:underline;text-underline-offset:2px}
/* summary sentences from the pipeline carry their sources' numbers; a tap jumps to the source */
.nst-why-label{margin-top:20px}
.nst-why{margin-top:8px;font:500 17px/1.45 var(--sans);letter-spacing:-.01em}
/* a card without a photo: its category's mosaic */
.nmosaic{position:absolute;inset:0;display:block;width:100%;height:100%}
.nthumb,.ntile-photo{position:relative}
.page-note{margin-top:20px;padding:0 2px;font:400 13px/1.4 var(--sans);color:var(--label-3)}
.src-row{display:flex;align-items:flex-start;gap:12px;padding:14px;-webkit-touch-callout:none}
.src-text{display:block;flex:1;min-width:0}
.src-outlet{display:flex;align-items:center;gap:8px;font:650 15px/1.25 var(--sans);letter-spacing:-.01em}
.src-outlet .beispiel{margin-left:0}
.beispiel.is-abo{border-style:solid;color:var(--label-2)}
.beispiel.is-paid{display:inline-flex;align-items:center;gap:3px;color:var(--label-2)}
.beispiel.is-paid svg{width:9px;height:9px;flex:none}
.src-title{display:-webkit-box;margin-top:4px;overflow:hidden;font:400 15px/1.32 var(--sans);color:var(--label-2);-webkit-line-clamp:3;-webkit-box-orient:vertical}
.src-meta{display:block;margin-top:6px;overflow:hidden;font-size:10px;white-space:nowrap;text-overflow:ellipsis;color:var(--label-3)}
.src-row>svg{width:14px;height:14px;flex:none;margin-top:3px;color:var(--label-3)}
.src-note{margin-top:10px;font-size:12.5px}
.news-manage{margin-top:16px}
.menu[data-source-menu]{transform-origin:top center}

/* News anpassen: a search field for the outlets, a picker row for the city */
.nset-search{height:40px;margin-top:8px;padding:0 12px;border-radius:20px;background:var(--fill)}
.li-picker{position:relative;cursor:pointer}
.li-picker select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.li-picker .li-value svg{width:14px;height:14px}
.li-empty{color:var(--secondary)}
/* while searching, hidden rows keep their place in the markup: only a row with a shown row before it draws a line */
.nset-outlets>.li+.li::before{content:none}
.nset-outlets>.li:not([hidden])~.li:not([hidden])::before{content:"";position:absolute;top:0;left:var(--sep);right:16px;height:1px;background:var(--separator)}


/* ── 18. Reader ────────────────────────────────────────────────────────── */
.reader-cover{position:relative;height:calc(var(--safe-top) + 280px);margin:calc(-1 * (var(--safe-top) + var(--nav-h))) -16px 0;overflow:hidden}
.reader-cover .mosaic{position:absolute;inset:0;width:100%;height:100%}
.reader{padding:24px 6px 10px}
.two-tone{font:600 27px/1.13 var(--sans);letter-spacing:-.04em;color:var(--label-3)}
.two-tone .w{transition:color var(--tc,.25s) ease}
.two-tone .w.lit,.two-tone .w.on{color:var(--label)}
.reader .mono{color:var(--label-3)}
.week{margin-top:34px;border-top:1.5px solid var(--label)}
.week-head{display:flex;justify-content:space-between;padding-top:8px}
.week-head b{font:400 22px/1.2 var(--sans);letter-spacing:-.01em;text-transform:none}
.week-title{margin:20px 0 10px;font:600 17px/1.2 var(--sans)}
.steps{display:grid;margin:0 -22px}
.step-row{position:relative;display:flex;align-items:center;height:44px;padding:0 22px}
.step-row .bar{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--bar);transform-origin:left;transform:scaleX(0);
  transition:transform 1.1s var(--out);transition-delay:var(--delay,0ms)}
.step-row.hero{height:78px}
.step-row.hero .bar{background:var(--bar-hero)}
.steps.is-in .bar{transform:scaleX(1)}
.step-row span{position:relative;font:400 14px/1 var(--mono)}
.step-row em{position:relative;margin-left:auto;font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--label-2)}
.step-row.hero span{font:600 52px/1 var(--sans);letter-spacing:-.045em;color:#161616}
.step-row.hero em{color:#3b3b2a}
.olist{margin:30px 0 0;padding:0;list-style:none;border-radius:var(--r-group);background:var(--surface);overflow:hidden}
.olist li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 12px;padding:14px 16px;border-top:1px solid var(--separator)}
.olist li:first-child{border-top:0}
.olist .ix{grid-row:1/3;font:400 11px/1.7 var(--mono);color:var(--label-3)}
.olist b{font:600 15.5px/1.3 var(--sans);letter-spacing:-.01em}
.olist small{font:400 10.5px/1.35 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--label-3)}
.reader-foot{margin-top:26px;font:400 14px/1.45 var(--sans);color:var(--label-2)}

/* ── 19. Artikel ───────────────────────────────────────────────────────── */
.article-cover{position:relative;height:calc(var(--safe-top) + 250px);margin:calc(-1 * (var(--safe-top) + var(--nav-h))) -16px 0;overflow:hidden}
.article-topic{margin-top:20px;color:var(--c)}
.article-topic b{font-weight:600;color:var(--alert)}
.article-title{margin-top:10px;font:700 30px/1.08 var(--sans);letter-spacing:-.035em}
.article-dek{margin-top:12px;font:500 18px/1.4 var(--sans);letter-spacing:-.012em;color:var(--label-2)}
.article-meta{margin-top:14px;padding-bottom:18px;border-bottom:1px solid var(--separator);color:var(--label-3)}
.article-body{margin-top:18px}
.article-body p{font:400 17px/1.6 var(--sans);letter-spacing:-.005em}
.article-body p+p{margin-top:14px}
.why{margin-top:30px;padding-top:16px;border-top:1.5px solid var(--label)}
.why p{font:600 21px/1.3 var(--sans);letter-spacing:-.025em;color:var(--label-3)}
.why p span{color:var(--label)}
.article-note{margin-top:18px;color:var(--label-4)}

/* ── 20. Ausgabe (Morning Brew shape: numbers, topic, interview, charts, summaries) ── */
.issue-meta-line{margin-top:16px;color:var(--label-3)}
.issue-kicker{display:block;color:var(--c)}
.numbers{margin-top:10px;border-radius:var(--r-group);background:var(--surface);overflow:hidden}
.numbers div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--separator)}
.numbers div:first-child{border-top:0}
.numbers span{font-size:15.5px;font-weight:500}
.numbers small{display:block;margin-top:1px;font-size:12px;font-weight:400;color:var(--label-3)}
.numbers b{font:600 21px/1 var(--sans);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.numbers-note{margin:8px 16px 0;color:var(--label-4)}
.issue-block{margin-top:36px}
.issue-h2{margin-top:8px;font:700 26px/1.12 var(--sans);letter-spacing:-.032em}
.issue-block .week{margin-top:16px}
:is(.issue,.article) .step-row .bar{background:color-mix(in srgb,var(--c) 26%,transparent)}
:is(.issue,.article) .step-row.hero .bar{background:color-mix(in srgb,var(--c) 70%,#fff)}
:is(.issue,.article) .step-row.hero em{color:rgba(22,22,22,.7)}
.chart-card{margin:22px 0;padding:18px 16px;border-radius:var(--r-group);background:var(--surface)}
.chart-card figcaption{margin-bottom:14px;color:var(--label-3)}
.hbars{display:grid;gap:13px}
.hbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;font-size:14.5px}
.hbar b{font-weight:600;font-variant-numeric:tabular-nums}
.hbar small{display:block;margin-top:2px;font-size:12.5px;color:var(--label-3)}
.hbar-track{grid-column:1/-1;height:8px;border-radius:4px;background:var(--fill);overflow:hidden}
.hbar-fill{display:block;width:var(--w);height:100%;border-radius:4px;background:var(--c);transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--out) var(--delay,0ms)}
.hbars.is-in .hbar-fill{transform:none}
.interview{margin-top:36px;padding:20px 18px 18px;border-radius:var(--r-card);background:var(--surface)}
.interview-head{display:flex;align-items:center;gap:12px}
.interview-avatar{position:relative;flex:none;width:48px;height:48px;border-radius:50%;overflow:hidden}
.interview-avatar .mosaic{position:absolute;inset:0;width:100%;height:100%}
.interview-head strong{display:block;margin-top:3px;font:600 17px/1.25 var(--sans);letter-spacing:-.015em}
.qa{margin:18px 0 0}
.qa dt{font:600 16px/1.35 var(--sans);letter-spacing:-.01em}
.qa dd{margin:6px 0 16px;font:400 16px/1.5 var(--sans);color:var(--label-2)}
.qa dd:last-child{margin-bottom:0}
.interview-note{margin-top:14px;color:var(--label-4)}
.summary{padding:20px 0;border-top:1px solid var(--separator)}
.summary:first-of-type{margin-top:12px}
.summary-topic{color:var(--label-3)}
.summary h3{margin-top:6px;font:600 20px/1.2 var(--sans);letter-spacing:-.022em}
.summary p:not(.mono){margin-top:8px;font-size:16px;line-height:1.5;color:var(--label-2)}
.summary .summary-why{color:var(--label)}
.summary-why b{font-weight:600}
.more-link{display:inline-flex;align-items:center;gap:4px;margin-top:12px;font:600 15px/1 var(--sans);color:var(--c)}
.more-link svg{width:14px;height:14px}
.closing{margin-top:34px;padding:20px 18px;border-radius:var(--r-card);background:var(--fill)}
.closing p:not(.mono){margin-top:8px;font:500 17px/1.45 var(--sans);letter-spacing:-.01em}
.closing .closing-sign{margin-top:12px;font-weight:400;color:var(--label-2)}

/* ── 21. Charts inside articles ────────────────────────────────────────── */
.article-body .chart-card,.article-body figure{margin:24px 0}
.chart-note,.article-body .chart-note{margin-top:12px;font:400 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--label-3)}
.article-body .metric-unit{font:600 15px/1.3 var(--sans)}
.chart-bleed figcaption{margin-bottom:10px;color:var(--label-3)}
.article .steps{margin:0 -16px}
.article .step-row{padding:0 16px}
.chart-number{padding:24px 16px 18px;border-radius:var(--r-group);background:var(--surface);text-align:center}
.chart-number .metric-num{margin:0 auto 12px}
.split-bar{position:relative;height:14px;border-radius:7px;background:var(--fill-2);overflow:hidden}
.split-bar span{position:absolute;top:0;bottom:0;left:0;width:var(--a);border-radius:7px;background:var(--c);transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--out)}
.split.is-in .split-bar span{transform:none}
.split-legend{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.split-legend b{display:block;font:600 30px/1 var(--sans);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.split-legend span{display:block;margin-top:5px;font-size:14px;color:var(--label-2)}
.split-legend .is-a b{color:var(--c)}
.cells-chart{display:grid;gap:12px}
.cells-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;font-size:14px;line-height:1.3}
.cells{display:flex;gap:4px}
.cells i{width:16px;height:16px;border-radius:4px;background:var(--fill-2);transform:scale(.4);opacity:0;
  transition:transform .5s var(--spring) calc(var(--i) * 45ms),opacity .3s ease calc(var(--i) * 45ms)}
.cells i.on,.cells-legend i.on{background:var(--c)}
.cells-chart.is-in .cells i{transform:none;opacity:1}
.cells em{width:16px;font:400 10px/1 var(--mono);font-style:normal;text-align:center;color:var(--label-3)}
.calendar .cells i,.calendar .cells em{width:14px}
.calendar .cells i{height:14px}
.cells-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:4px;font-size:13px;color:var(--label-2)}
.cells-legend span{display:flex;align-items:center;gap:6px}
.cells-legend i{width:12px;height:12px;border-radius:3px;background:var(--fill-2)}
.vesting{display:block;width:100%;height:auto;overflow:visible}
.vesting .v-grid{fill:none;stroke:var(--separator);stroke-width:1}
.vesting .v-area{fill:var(--c);opacity:.14}
.vesting .v-line{fill:none;stroke:var(--c);stroke-width:2.5;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--out)}
.vesting.is-in .v-line{stroke-dashoffset:0}
.vesting .v-dot{fill:var(--c)}
.vesting text{font:500 11px var(--sans);fill:var(--label-2)}
.vesting .v-axis text{font:400 10px var(--mono);fill:var(--label-3)}

/* ── 22. Motion preferences ──────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* An issue's essay on the article screen (the home page's third phone, the user 19 Oct), in the mail's look as the
   app draws it since iOS 94b0683 (the user, 26 Oct: the phone should show "the new campus article"): the issue's
   square card on top, 800 heads, section heads with the colour square and a rule, bold kickers, boxes in their
   block's background (tone-*), every chart as bars */
.article-card{margin:calc(-1 * (var(--safe-top) + var(--nav-h))) -16px 0}
.article-card img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.article-essay h2{margin-top:26px;font:800 21px/1.2 var(--sans);letter-spacing:-.025em}
.article-essay h2+p{margin-top:8px}
.article-essay .ap-section{display:flex;align-items:center;gap:10px;margin-top:30px;padding-bottom:10px;border-bottom:3px solid var(--label);
  font:800 14px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--label)}
.article-essay .ap-section::before{content:"";flex:none;width:11px;height:11px;border-radius:3px;background:var(--c)}
.article-essay .ap-section+h2{margin-top:14px}
.article-essay .ap-kicker{margin-top:26px;font:800 12px/1.3 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--c)}
.article-essay .ap-kicker+h2{margin-top:6px}
.article-essay .ap-lead{font-size:19px;line-height:1.5}
.article-essay .ap-small{font-size:15px;color:var(--label-2)}
.article-essay blockquote{margin:22px 0;padding-left:14px;border-left:3px solid var(--c)}
.article-essay blockquote p{font:600 20px/1.3 var(--sans);letter-spacing:-.02em}
.article-essay blockquote.ap-quote-big p{font-size:24px}
.article-essay blockquote footer{margin-top:6px;font:400 13px/1.4 var(--sans);color:var(--label-3)}
.article-essay blockquote footer b{font-weight:600;color:var(--label)}
.article-essay blockquote.ap-quote-card,.article-essay blockquote[class*=tone-]{padding:16px 18px;border-left:0;border-radius:18px;background:var(--tb,var(--surface))}
.article-essay figure img{display:block;width:100%;height:auto;border-radius:14px}
.article-essay .ap-box{margin:22px 0 0;padding:18px;border-radius:18px;background:var(--tb,var(--surface))}
.article-essay .ap-box-t{margin:0 0 12px;font:800 17px/1.3 var(--sans);letter-spacing:-.015em}
.article-essay .ap-note{margin-top:12px;font:400 11px/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--label-3)}
.article-essay .ap-row+.ap-row{margin-top:12px}
.article-essay .ap-row p{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:400 14.5px/1.35 var(--sans)}
.article-essay .ap-row b{font-weight:700;white-space:nowrap}
.article-essay .ap-row i{display:block;height:9px;margin-top:6px;border-radius:5px;background:var(--tmark,var(--c))}
.article-essay .ap-row.is-dim i{opacity:.35}
.article-essay .ap-nums{display:flex;gap:8px}
.article-essay .ap-nums div{display:flex;flex:1 1 0;flex-direction:column;gap:4px;min-width:0;padding:12px;border-radius:14px;background:var(--tcell,var(--bg))}
.article-essay .ap-nums b{font:800 23px/1.05 var(--sans);letter-spacing:-.035em;color:var(--tnum,var(--c))}
.article-essay .ap-nums span{font:600 13px/1.3 var(--sans)}
.article-essay .ap-nums small{font-size:12px;line-height:1.3;color:var(--tsub,var(--label-3))}
.article-essay .ap-list ul,.article-essay .ap-list ol{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.article-essay .ap-list li{position:relative;padding-left:36px;font:400 15.5px/1.45 var(--sans)}
.article-essay .ap-list li b{display:block;font-weight:700}
.article-essay .ap-list li span{display:block;margin-top:2px;font-size:14.5px;line-height:1.5;color:var(--tsub,var(--label-2))}
.article-essay .ap-list li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:6px;background:var(--tmark,var(--c))}
.article-essay .ap-list-check li::before{background:var(--tmark,var(--c)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.9' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.article-essay .ap-list-steps ol{counter-reset:step}
.article-essay .ap-list-steps li{counter-increment:step}
.article-essay .ap-list-steps li::before{content:counter(step);width:26px;height:26px;top:-1px;border-radius:8px;color:#fff;font:800 13px/26px var(--sans);text-align:center}
.article-essay .ap-list-bullets li::before{left:8px;top:.6em;width:7px;height:7px;border-radius:2px}
.article-essay .ap-callout-in{padding-left:14px;border-left:3px solid var(--c)}
.article-essay .ap-callout .ap-kicker{margin:0 0 8px;font-size:12px;line-height:1.3}
.article-essay .ap-callout p{font-size:16px;line-height:1.5}
.article-essay .ap-callout p+p{margin-top:10px}
.article-essay .ap-box-t+.ap-row,.article-essay .ap-box-t+.ap-nums{margin-top:0}
.article-essay .ap-callout-accent{--tb:color-mix(in srgb,var(--c) 12%,var(--surface))}
.article-essay .ap-callout-dark{--tb:#161616;color:#E8E8E8;box-shadow:inset 0 0 0 1px var(--separator)}
.article-essay .ap-callout-dark .ap-kicker{color:color-mix(in srgb,var(--c) 55%,#fff)}
.article-essay .ap-callout-dark .ap-callout-in{border-left-color:color-mix(in srgb,var(--c) 55%,#fff)}
.article-essay .ap-callout-warning{--tb:color-mix(in srgb,#F2B705 16%,var(--surface))}
.article-essay .ap-callout-warning .ap-kicker{color:#A67C00}
.article-essay .ap-callout-warning .ap-callout-in{border-left-color:#C99A00}
.article-essay .tone-white{--tb:var(--surface);box-shadow:inset 0 0 0 1px var(--separator-2)}
.article-essay .tone-sand{--tb:var(--surface)}
.article-essay .tone-tint{--tb:color-mix(in srgb,var(--c) 10%,var(--surface));--tcell:var(--surface)}
.article-essay .tone-accent{--tb:var(--c);--tcell:color-mix(in srgb,var(--c) 84%,#000);--tmark:var(--surface);--tnum:var(--surface);--tsub:color-mix(in srgb,var(--surface) 72%,transparent);color:var(--surface)}
.article-essay .tone-dark{--tb:#161616;--tcell:#242424;--tmark:color-mix(in srgb,var(--c) 55%,#fff);--tnum:#FFFFFF;--tsub:rgba(255,255,255,.62);color:#E8E8E8;box-shadow:inset 0 0 0 1px var(--separator)}
.article-essay .tone-accent .ap-note,.article-essay .tone-dark .ap-note,.article-essay blockquote.tone-dark footer{color:var(--tsub)}
.article-essay .tone-dark .ap-list-steps li::before,.article-essay .tone-dark.ap-list-steps li::before{color:#161616}
.article-essay .ap-img{margin:22px 0 0}
.article-essay .ap-img figcaption{margin-top:6px;font:400 13px/1.4 var(--sans);color:var(--label-3)}
.article-essay .ap-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.article-essay .ap-divider{height:1px;margin:28px 0 0;border:0;background:var(--separator)}
.article-essay .ap-divider-dots{width:60px;height:6px;margin-inline:auto;background:radial-gradient(circle,var(--label-3) 2px,transparent 2.6px) 0 0/20px 6px repeat-x}
.article-essay .ap-divider-mosaic{width:88px;height:7px;margin-inline:auto;border-radius:2px;
  background:linear-gradient(90deg,var(--c) 0 25%,color-mix(in srgb,var(--c) 62%,var(--bg)) 0 50%,color-mix(in srgb,var(--c) 38%,var(--bg)) 0 75%,color-mix(in srgb,var(--c) 20%,var(--bg)) 0)}
.article-essay .ap-button a{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:999px;background:var(--label);color:var(--bg);font:600 15px/1 var(--sans);text-decoration:none}
.article-essay .ap-links a{display:block;padding:12px 0;border-top:1px solid var(--separator);color:inherit;text-decoration:none}
.article-essay .ap-links a:first-of-type{padding-top:0;border-top:0}
.article-essay .ap-links b{display:block;font:600 15px/1.35 var(--sans)}
.article-essay .ap-links span{display:block;margin-top:2px;font-size:13px;color:var(--tsub,var(--label-3))}
.article-essay .ap-rows p{display:flex;align-items:baseline;gap:10px;margin:0;padding:10px 0;border-top:1px solid var(--separator);font:400 15px/1.4 var(--sans)}
.article-essay .ap-rows .ap-box-t+p{padding-top:0;border-top:0}
.article-essay .ap-rank{flex:none;min-width:1.4em;font-weight:800;color:var(--tmark,var(--c))}
.article-essay .ap-rows small{display:block;font-size:13px;color:var(--tsub,var(--label-3))}
.article-essay .ap-rows em{margin-left:auto;font-style:normal;font-weight:700;white-space:nowrap}


/* News's tiles are Runde 3's: static/r3-news.css */

/* ── 17. Runde 3: the band and its building blocks (templates/app/_r3.html; the app's Design/Blocks.swift) ───────
   Sizes are the app's points. Content sits 18 pt from the screen's edge (the app's padding), cards 16. */
/* the colour band at the top of a tab, from above the screen's top (it shows when the page is pulled down) to a little
   under its mono line, or into the first card (--band-into, the app's bandEdge). The tab's title stands where the
   bar's title would, left, without glass (34/800), and fades once the page scrolls (bandTitle); no inline title. */
.has-band .nav-title{display:none}
.band{position:relative;margin:calc(-1 * (var(--safe-top) + var(--nav-h))) -16px 0;
  padding:var(--safe-top) 0 calc(var(--band-gap,22px) + var(--band-into,0px));background:var(--band);color:var(--band-ink)}
.band::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:1600px;background:var(--band)}
.band+*{position:relative;margin-top:calc(-1 * var(--band-into,0px))}
.band-title{display:flex;align-items:center;height:var(--nav-h);padding:0 18px;font:800 34px/1 var(--sans);
  letter-spacing:-.045em;color:var(--band-ink);transition:opacity .18s ease-out}
.band-gone .band-title{opacity:0}
.band-line{position:relative;min-height:14px;padding:0 0 0 18px;font:400 10.5px/1.3 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--band-meta)}
.band-line span{position:relative;z-index:1;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.band-line .sq{position:absolute;z-index:0;top:1px;right:0}
.band-more{padding:14px 16px 0}
/* the mosaic squares, tone on tone; on the Von uns card in its own two tones */
.sq{display:block;flex:none}
.sq .m1{fill:var(--mos1)}.sq .m2{fill:var(--mos2)}.sq .m3{fill:var(--mos3)}
.sq-own .m1{fill:var(--own-mos1)}.sq-own .m2,.sq-own .m3{fill:var(--own-mos2)}
/* "09:31 · NAHOST" */
.kicker{overflow:hidden;font:400 10px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;text-overflow:ellipsis}
.kicker b{font-weight:400;color:var(--ink)}
/* "AUCH WICHTIG" over a 2 pt ink rule; the light form runs a hairline to the margin */
.srule{display:flex;align-items:center;gap:10px;padding:0 2px;font:400 10px/1.3 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.srule::after{content:"";flex:1;height:1px;background:var(--rule)}
.srule-heavy{display:block;margin:0 2px;padding:0 0 10px;border-bottom:2px solid var(--ink)}
.srule-heavy::after{display:none}
/* a module's title (20/750) and a mono note or a link at the right */
.mhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 2px}
.mhead h2{font:750 20px/1.2 var(--sans);letter-spacing:-.022em;color:var(--ink)}
.mhead-mono{flex:none;font:400 10px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.mhead-link{flex:none;font:600 14.5px/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink)}
/* a day break: 2 pt ink rule, the day, its date in mono */
.daybreak{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 2px;padding-top:12px;
  border-top:2px solid var(--ink)}
.daybreak h2{font:750 20px/1.2 var(--sans);letter-spacing:-.022em}
.daybreak p{margin-top:3px;font:400 10px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
/* what is tapped is ink */
.inkcap{display:inline-flex;flex:none;align-items:center;gap:2px;height:32px;padding:0 14px;border-radius:999px;
  background:var(--sel);color:var(--sel-ink);font:650 13.5px/1 var(--sans);letter-spacing:-.005em;white-space:nowrap}