/* shell.css (platform) — the site's shell: the header bar, its two menus, the language choice, the
   account and bag icons, the mobile menu, the width of the page between header and foot, and the
   foot (docs/DESIGN_PLATFORM_PLAN.md §7a.7, DP2b steps 2 to 4; measured from the Figma frames
   5264:644, 5264:715, 5264:851, 5407:4296 and 5334:669, the foot from 5274:661 and 5275:765).

   The markup is `templates/shell/*.html`, the behaviour `shell.js`. Everything here is hand-written
   under ONE prefix, `shell-`, and needs no Tailwind build: a class of this file exists the moment the
   layout loads it. Colours only as var(--mn-…) (D2) — a colour without a name gets one in
   tailwind.base.js (`show-week` came in with this file, the three `accent-…` of the foot with
   step 4); a translucent tone is mixed from a named one (`color-mix`).

   Load order: tailwind.css → components.css → THIS file → the app's own. After the atoms, so the shell
   can place a `.btn` or a `.lnk`; and — as in components.css — a `display` rule here beats Tailwind's
   `.hidden` and the `hidden` attribute, which is why every show/hide of the shell is a rule of this
   file and never a utility in the markup.

   How LARGE the shell is built stands in one place: the block "The scale" right below, and its twin
   at the head of the foot's section. The frames give proportions, not pixels — the user found the
   drawn sizes too large and chose "Stufe C" (§7a.7 Punkt 17, 2026-10-06). A rule further down says
   `var(--shell-…)` where it sets a size; a test keeps it that way (test_shell_templates.py).

   Two widths switch the layout: below 1024 the bar is burger · logo · icons with the mobile menu under
   it, from 1024 it is logo · menu · icons · language. What is open is said by the markup — a trigger's
   `aria-expanded`, a panel's `is-open` — and only styled here. Without JavaScript no control opens
   anything; the foot carries the links (accepted in §7a.7) and, as plain names, the languages —
   and the account's menu, which holds the sign-out, opens while the focus is inside it. Both are
   rules under a mark shell.js sets when it runs (`shell-footer--folds`, `shell-header--scripted`).

   ⚠️ Every `:hover` of this file stands inside `@media (hover: hover)`. On a touch screen the state
   sticks to whatever was tapped last: a menu's trigger tapped shut kept the colour of the open
   state, and the × of the mobile menu was green instead of the drawn gray. What is open is said by
   `aria-expanded` — outside that query. */

/* Alpine evaluates its directives only after it has booted. Nothing of the shell needs this today
   (its panels are closed by CSS, not by x-show), but a platform part that does must find the rule in
   a sheet every layout loads — the magazine's own copy is in its app.css. */
[x-cloak] { display: none !important; }

/* ---------- The scale ---------- */
/* The sizes of header, menus and mobile menu, named in ONE place: the next change of scale is this
   block (and `--shell-foot-*` for the foot). Built is "Stufe C" (§7a.7 Punkt 17); every line says
   what the frame draws. The values here are the phone's and the tablet's, what differs from 1024
   stands in the second block; a size that exists at one width only — the bar's menu and its two
   panels from 1024, the mobile menu below — stands here once.

   Not named, because a change of scale leaves it alone: the widths 1296 and 1120 with their side
   padding (next section), hairlines, radii, shadows, the 12 beside a row's words, and the small
   fixed gaps between neighbours (icon · icon, words · chevron, the two ends of a row).
   ⚠️ The atoms have a scale of their own (components.css, "The scale" — since 2026-10-07 also
   "Stufe C": a button is 44 high with a 15 px label): where the shell needs a smaller button or
   link it sizes ITS OWN from here ("The atoms at the shell's scale", below).
   ⚠️ An icon's size is set by this sheet (`--shell-glyph…`). The number the markup hands to
   `icon(…)` is the same one, for the moment before the sheet is there; the test holds the two
   together. */
:root {
  /* The bar. */
  --shell-bar: 56px;                                         /* its height, hairline included — drawn 80 */
  --shell-logo: 96px;                                        /* the wordmark's width — drawn 115 */
  --shell-hit: 36px;                                         /* an icon's target, the floor for anything tappable in the bar — drawn 48 */
  --shell-glyph: 18px;                                       /* an icon of the bar, a chevron — drawn 24 */
  --shell-glyph-small: 14px;                                 /* calendar, arrow, the pill's icon, the foot's — drawn 16 */
  --shell-burger-pull: 3px;                                  /* the burger's target reaches this far out of the container — drawn 4 */
  --shell-bar-gap: 20px;                                     /* burger · wordmark — drawn 28 */
  --shell-badge: 15px;                                       /* the number on the bag — drawn 18 … */
  --shell-badge-size: 10px; --shell-badge-line: 12px;        /* … with 11/14 */

  /* The bar's menu (from 1024). */
  --shell-nav: 36px;                                         /* an item's height — drawn 48 */
  --shell-nav-pad: 7px 10px;                                 /* — drawn 12 */
  --shell-nav-size: 14px;   --shell-nav-line: 22px;          /* — drawn 16/24 */
  --shell-nav-rule: 18px;                                    /* the hairline before the way into the other area — drawn 24 */
  --shell-lang-size: 13px;                                   /* the language's code at the end of the bar — drawn 16 */
  --shell-lang-gap: 14px;                                    /* icons · language — drawn 20 */

  /* The two panels (from 1024). */
  --shell-panel-pad: 28px;                                   /* above and below a panel's content — drawn 48 */
  --shell-col: 160px;                                        /* a column of links — drawn 195 */
  --shell-col-promo: 230px;                                  /* the subscription's column — drawn 250 */
  --shell-col-feature: 170px;                                /* the newest issue's column — drawn 218 */
  --shell-col-gap: 40px;                                     /* column · rule · column in "Show Guide" — drawn 48 */
  --shell-title: 19px;      --shell-title-line: 26px;        /* a column's title — drawn 24/32 */
  --shell-links-top: 14px;                                   /* title · first link — drawn 32 */
  --shell-count: 12px;      --shell-count-line: 16px;        /* "12 shows" under "Upcoming shows" — drawn 13/18 */
  --shell-count-label-line: 18px;                            /* the label above that number — drawn 19 */
  --shell-promo: 13.5px;    --shell-promo-line: 20px;        /* the subscription's sentence — drawn 15/22.5 */
  --shell-promo-top: 12px;                                   /* title · sentence, button · "Manage subscription" — drawn 20 */
  --shell-promo-button-top: 14px;                            /* sentence · button — drawn 20 */
  --shell-pill: 24px;                                        /* "Current issue": its height — drawn 26 */
  --shell-pill-pad: 12px;                                    /* — drawn 16 */
  --shell-pill-size: 12px;  --shell-pill-line: 16px;         /* — drawn 12/18; 12 is the floor for any text of the shell but the bag's number */
  --shell-pill-track: 1.2px;                                 /* its letter-spacing — as drawn */
  --shell-issue: 18px;      --shell-issue-line: 24px;        /* the newest issue's title — drawn 22/28 */
  --shell-issue-top: 8px;                                    /* pill · title — drawn 10 */
  --shell-cover: 150px;                                      /* the square the cover stands in — drawn 218 */
  --shell-cover-top: 10px;                                   /* title · cover — drawn 16 */

  /* A text link of a menu: a link of a panel, an entry of the mobile menu, a row of the language
     list and of the account's menu. */
  --shell-row: 40px;                                         /* its height — drawn 51 */
  --shell-row-pad: 9px;                                      /* above and below its words — drawn 14 */
  --shell-link: 14px;       --shell-link-line: 22px;         /* — drawn 15/23 */
  --shell-lang-list: 176px;                                  /* the language list's width — not drawn */
  --shell-account-list: 240px;                               /* the account menu's width — not drawn */

  /* The mobile menu (below 1024). */
  --shell-head: 44px;                                        /* a top-level row — drawn 52 */
  --shell-head-pad: 10px;                                    /* above and below its words — drawn 14 */
  --shell-head-size: 15px;  --shell-head-line: 24px;         /* — drawn 16/24 */
  --shell-indent: 12px;                                      /* an entry stands this far right of its head — drawn 16 */
  --shell-group: 12px;      --shell-group-line: 18px;        /* "USA" · "Europe" — as drawn */
  --shell-cta-top: 10px;    --shell-cta-bottom: 16px;        /* around the subscription's button — drawn 12 and 20 */
  --shell-drawer-foot: 8px;                                  /* above the last row (account · language) — drawn 16 */
  --shell-drawer-end: 16px;                                  /* below it — drawn 24 */

  /* The shell's button and the quiet link under it — menu, mobile menu and foot alike. */
  --shell-button: 40px;                                      /* its height — the atom's 44, drawn 48 */
  --shell-button-size: 14px;                                 /* its label — the atom's 15, drawn 16 */
  --shell-more: 13px;       --shell-more-line: 20px;         /* "Manage subscription" — the link atom's 14/21 */
}
@media (min-width: 1024px) {
  :root {
    --shell-bar: 72px;                                       /* drawn 112 */
    --shell-logo: 112px;                                     /* drawn 138 */
    --shell-row: 36px;                                       /* drawn 48 */
    --shell-row-pad: 7px;                                    /* drawn 12 */
    --shell-link-line: 21px;                                 /* drawn 16/24, semibold — built 14/21 medium */
  }
}

/* ---------- Containers ---------- */
/* The shell's own width (1296, D5) and the page's content grid (1120) share one side padding: 16 on a
   phone, 24 from 768, 48 from 1024, 72 from 1440 — at 1440 the shell then is exactly its 1296.
   `content-box`, so the two numbers are the width of what is INSIDE the padding. Not Tailwind's
   `container`: it holds 720 between 768 and 1023. */
:root { --shell-pad: 16px; }
@media (min-width: 768px)  { :root { --shell-pad: 24px; } }
@media (min-width: 1024px) { :root { --shell-pad: 48px; } }
@media (min-width: 1440px) { :root { --shell-pad: 72px; } }
.shell-container, .shell-content {
  box-sizing: content-box; margin-left: auto; margin-right: auto;
  padding-left: var(--shell-pad); padding-right: var(--shell-pad);
}
.shell-container { max-width: 1296px; }
.shell-content { max-width: 1120px; }
/* The page between header and foot stands on the same grid as the menus: 1120 of content inside the
   shell's side padding — so a page's text begins where the menu's first column begins, at every
   width (it was 1120 INCLUDING 24 of padding: 24 right of the menu at 1440, 24 left of the logo at
   1024, 24 against the bar's 16 on a phone). Written border-box with the padding added to the cap,
   because it needs `width: 100%`: the layout's body is a flex column, and an item with auto margins
   is not stretched — a short page would shrink to its text. */
.shell-page {
  box-sizing: border-box; width: 100%; max-width: calc(1120px + 2 * var(--shell-pad));
  margin-left: auto; margin-right: auto; padding-left: var(--shell-pad); padding-right: var(--shell-pad);
}
/* A page with BANDS: a head that runs from edge to edge of the window (the home page's, the issue
   overview's) and still belongs into <main> — its headline is the page's, and every page test cuts
   its content at that element. A layout switches this version on for one page (the magazine's
   base.html, block `page_grid`); without it nothing here applies.
   The same grid, written as three columns instead of a padded box: the shell's side padding (or
   more, once the window is wider than the grid), the 1120 of content, the padding again. Every
   direct child stands in the middle column — exactly where it stood in the box — and a child
   marked `.shell-band` takes all three. Inside a band the content is put back on the grid by an
   inner `.shell-content`. No `vw` anywhere: that unit counts the scrollbar's width in, and a band
   sized with it scrolls sideways wherever the scrollbar takes room.
   The page's upper padding (the layout's) is taken off, so a first band begins right under the
   header; the lower one stays, as on every other page — except where a band is the page's LAST
   child: then the band reaches the foot (the last rule below; a tinted band with a strip of the
   page's ground under it reads as a mistake). ⚠️ "Last child" is meant literally: a <script> or a
   comment's element behind the band, and the strip is back. `align-content: start`, because <main> is stretched
   to the window's height on a short page and a grid would hand that height on to its rows.
   ⚠️ The children are grid items now, and two things differ from the box for them: the margins
   between two of them add up instead of collapsing, and a child with `auto` side margins is as wide
   as its content needs, not as wide as its cap — the wrapper most pages begin with
   (`max-w-… mx-auto`) shrinks to its text on a page with little on it (measured: 136 of 1120).
   A page written for this version sets the distance of its sections on one side only and centres
   nothing with auto margins at this level; a test reads every page that switches the version on
   for exactly that (mineralica/tests/test_shell_templates.py).
   Only structure, no size: the two numbers are the page's, as above. */
.shell-page.shell-page--bands {
  display: grid; align-content: start;
  grid-template-columns: minmax(var(--shell-pad), 1fr) minmax(0, 1120px) minmax(var(--shell-pad), 1fr);
  max-width: none; padding-left: 0; padding-right: 0; padding-top: 0;
}
.shell-page--bands > * { grid-column: 2; min-width: 0; }
.shell-page--bands > .shell-band { grid-column: 1 / -1; }
.shell-page--bands:has(> .shell-band:last-child) { padding-bottom: 0; }

/* ---------- The atoms at the shell's scale ---------- */
/* The shell places the button and the link atom (components.css) — in the menu's middle column, in
   the mobile menu, in the foot's card — and sizes them here for itself: 40 high with a 14 px label
   instead of the atom's 44 and 15, the quiet link under it 13/20 instead of 14/21 (§7a.7 Punkt 17).
   ⚠️ The button's side padding is NOT set here: it is the atom's (`--atom-btn-pad`, 12). Whoever
   changes that name widens the button in the foot's card — a test holds the 12 until this rule
   names a padding of its own (mineralica/tests/test_scale.py). */
.shell-promo .btn, .shell-drawer__cta .btn, .shell-footer__cta .btn {
  height: var(--shell-button); min-height: var(--shell-button); font-size: var(--shell-button-size);
}
/* The quiet link is a text link of a menu as well: its target is a row's height (36, on a phone 40)
   around the one line of words, taken back by the same margins — so it stands where the bare line
   would, and what is tapped is not 20 high. */
.shell-promo__more .lnk, .shell-drawer__cta .lnk {
  min-height: var(--shell-row); margin: calc((var(--shell-more-line) - var(--shell-row)) / 2) 0;
  font-size: var(--shell-more); line-height: var(--shell-more-line);
}

/* ---------- Header bar ---------- */
/* Tinted ground and a hairline; it does NOT stick and has no blur (§7a.7 #16). `relative`, because
   the menus below are placed against it — nothing between the header and a menu may be positioned. */
.shell-header {
  position: relative; background: var(--mn-gray-50); border-bottom: 1px solid var(--mn-gray-300);
  color: var(--mn-gray-900);
}
/* The bar with its hairline is drawn 80 high on a phone and 112 from 1024; built 56 and 72 (Stufe C,
   §7a.7 Punkt 17). Burger and wordmark stand a fixed 20 apart (drawn 28): at the drawn sizes that
   gap had to shrink below 402 to keep three icons and the wordmark on a phone of 360 — at these
   there are 59 to spare at 360 and 19 at 320, and under 301 the wordmark itself gives way. */
.shell-bar { display: flex; align-items: center; justify-content: space-between; height: calc(var(--shell-bar) - 1px); }
.shell-bar__start { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; gap: var(--shell-bar-gap); }
.shell-bar__end { display: flex; align-items: center; flex: none; gap: 6px; }

/* The wordmark is a link too: its target is as high as an icon's, the picture in its middle. */
.shell-logo { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; min-height: var(--shell-hit); border-radius: 4px; }
.shell-logo img { display: block; flex: 0 1 auto; width: var(--shell-logo); min-width: 0; max-width: 100%; height: auto; }

/* An icon of the bar: a 36 × 36 target around the 18 px glyph (drawn 48 around 24). 36 is the floor
   for anything of the bar a finger must hit: above the 24 WCAG asks for, below the 44 Apple
   recommends (§7a.7 Punkt 17). The glyph's size is set HERE, for every icon in such a target and
   for every chevron of the header; the foot sizes its own. */
.shell-icon {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--shell-hit); height: var(--shell-hit); border-radius: 8px; color: var(--mn-gray-900); cursor: pointer;
}
.shell-icon .icon, .shell-chevron { width: var(--shell-glyph); height: var(--shell-glyph); }
@media (hover: hover) { .shell-icon:hover { color: var(--mn-green-500); } }
/* A number on an icon (the bag): the frame is always there, the number only with something in it.
   Geometry of 5334:886 in proportion — it begins just right of the target's middle, and the ring in
   the header's ground lifts it off the glyph. */
.shell-icon__count { position: absolute; left: calc(50% + 1px); top: 3px; display: flex; pointer-events: none; }
.shell-icon__count > .badge {
  height: var(--shell-badge); min-width: var(--shell-badge); padding: 0 3px; border: 1.5px solid var(--mn-gray-50);
  border-radius: 9999px; background: var(--mn-green-600); color: var(--mn-white);
  font-weight: 600; font-size: var(--shell-badge-size); line-height: var(--shell-badge-line);
}

/* The burger's target is pulled a little to the left (drawn: a 40 box, built then as a 48 target
   pulled 4), so its glyph stands 6 right of the page's edge. It shows the × while the mobile menu
   is open. */
.shell-icon.shell-burger { margin-left: calc(-1 * var(--shell-burger-pull)); }
.shell-burger__open, .shell-burger__close { display: inline-flex; }
.shell-burger__close, .shell-burger[aria-expanded="true"] .shell-burger__open { display: none; }
.shell-burger[aria-expanded="true"] .shell-burger__close { display: inline-flex; }

/* ---------- The menu of the bar (from 1024) ---------- */
.shell-nav { display: none; }
/* ⚠️ Not positioned: a menu's panel is a child of its group (so that Tab walks from the trigger into
   the panel) and must still span the whole header. */
.shell-nav__group { display: flex; }
/* An item is 36 high (drawn 48) with 14/22 semibold (drawn 16/24). */
.shell-nav__item {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: var(--shell-nav);
  padding: var(--shell-nav-pad); border-radius: 8px; font-weight: 600; font-size: var(--shell-nav-size);
  line-height: var(--shell-nav-line); color: var(--mn-gray-900); white-space: nowrap; cursor: pointer;
}
.shell-nav__item[aria-expanded="true"] { color: var(--mn-green-500); }
@media (hover: hover) { .shell-nav__item:hover { color: var(--mn-green-500); } }
/* Open: the line under the whole item is the state's mark (no ground behind it). */
.shell-nav__item[aria-expanded="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--mn-green-500);
}
[aria-expanded="true"] > .shell-chevron { transform: rotate(180deg); }
/* The way into the other area, set apart: 14 · hairline · 8 (the items' own gap of 6 included; drawn
   16 and 10). Its arrow is one of the small icons. */
.shell-nav__rule { flex: none; width: 1px; height: var(--shell-nav-rule); margin: 0 2px 0 8px; background: var(--mn-gray-300); }
.shell-nav__item--switch { color: var(--mn-gray-700); }
.shell-nav__item--switch .icon, .shell-drawer__head--switch .icon { width: var(--shell-glyph-small); height: var(--shell-glyph-small); }
@media (hover: hover) { .shell-nav__item--switch:hover { color: var(--mn-gray-900); } }

/* ---------- The two menus ---------- */
/* Full width directly under the header's hairline, above the page. The lower edge is not drawn in
   Figma: a hairline and a soft shadow, to be judged in the browser (§7a.7, "nicht gezeichnet").
   A panel is as high as its content plus 28 above and below (drawn 48): nothing here sets a height
   — the frame's 298 is not a measure of the build. */
.shell-mega {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 1px); z-index: 40;
  padding: var(--shell-panel-pad) 0; background: var(--mn-surface); border-bottom: 1px solid var(--mn-gray-300);
  box-shadow: 0 16px 24px -16px color-mix(in srgb, var(--mn-gray-900) 16%, transparent);
}
/* "Magazine": fixed tracks, so a missing third column (no issue held — the 500 page) leaves the
   other two in their places. Drawn 195 · 250 · 218; built 160 · 230 · 170, each as wide as what
   stands in it at this scale (the sentence still runs in two lines, the cover's square ends 20
   short of the grid's edge) — on the drawn tracks the three blocks hung to the left of theirs. */
.shell-mega--magazine .shell-mega__inner {
  display: grid; grid-template-columns: var(--shell-col) 2px var(--shell-col-promo) 2px var(--shell-col-feature);
  justify-content: space-between;
}
/* "Show Guide": two columns from the left, the second 242 right of the first (drawn at 293, in the
   same proportion as everything else); what is free to their right is the place of the printed
   guides (§7a.7 #1), which follow with the same gap. */
.shell-mega--show_guide .shell-mega__inner { display: flex; justify-content: flex-start; gap: var(--shell-col-gap); }
.shell-mega--show_guide .shell-mega__col { flex: none; width: var(--shell-col); }
.shell-mega__col { min-width: 0; }
.shell-mega__rule { flex: none; width: 2px; background: var(--mn-gray-100); }
.shell-mega__title {
  font-family: Baskervville, Georgia, Cambria, "Times New Roman", serif; font-weight: 400;
  font-size: var(--shell-title); line-height: var(--shell-title-line); color: var(--mn-green-600);
}
/* The links follow each other without a gap (drawn 8 apart): 36 high each (drawn 48), 14/21 medium
   (drawn 16/24 semibold). */
.shell-mega__links { display: flex; flex-direction: column; margin-top: var(--shell-links-top); }
.shell-mega__link {
  display: flex; align-items: center; gap: 6px; min-height: var(--shell-row); padding: var(--shell-row-pad) 12px;
  border-radius: 8px; font-weight: 500; font-size: var(--shell-link); line-height: var(--shell-link-line);
  color: var(--mn-gray-900);
}
@media (hover: hover) { .shell-mega__link:hover { background: var(--mn-green-50); } }
/* "Upcoming shows" with its number below: one target, 50 high (7 · 18 · 2 · 16 · 7; drawn 61). */
.shell-mega__link--count { flex-direction: column; align-items: flex-start; gap: 2px; line-height: var(--shell-count-label-line); }
.shell-count { font-weight: 400; font-size: var(--shell-count); line-height: var(--shell-count-line); color: var(--mn-gray-700); white-space: nowrap; }
/* The calendar behind a show week (Tucson, Denver). */
.shell-week { display: inline-flex; flex: none; color: var(--mn-show-week); }
.shell-week .icon, .shell-pill .icon { width: var(--shell-glyph-small); height: var(--shell-glyph-small); }

/* The middle column: what the site says about the subscription (§7a.7 #13). The button and the
   quiet link are sized with the shell's atoms, further up. */
.shell-promo__text { margin-top: var(--shell-promo-top); font-size: var(--shell-promo); line-height: var(--shell-promo-line); color: var(--mn-gray-700); }
.shell-promo .btn { width: 100%; margin-top: var(--shell-promo-button-top); }
.shell-promo__more { margin-top: var(--shell-promo-top); }

/* The newest issue: pill, title, and its cover in a square (§7a.7 #8) — one link. The pill is drawn
   26 high with 12/18; beside a title of 18 instead of 22 it stood as heavy as the title, so it is
   built 22 high with 11/16. */
.shell-feature { display: flex; flex-direction: column; align-items: flex-start; border-radius: 10px; color: var(--mn-gray-900); }
.shell-pill {
  display: inline-flex; align-items: center; gap: 4px; height: var(--shell-pill); padding: 0 var(--shell-pill-pad);
  border-radius: 9999px; background: var(--mn-green-100); color: var(--mn-green-700);
  font-weight: 600; font-size: var(--shell-pill-size); line-height: var(--shell-pill-line);
  letter-spacing: var(--shell-pill-track); text-transform: uppercase; white-space: nowrap;
}
.shell-feature__title {
  margin-top: var(--shell-issue-top); font-family: Baskervville, Georgia, Cambria, "Times New Roman", serif;
  font-size: var(--shell-issue); line-height: var(--shell-issue-line);
}
@media (hover: hover) { .shell-feature:hover .shell-feature__title { color: var(--mn-green-500); } }
.shell-feature__cover {
  display: flex; align-items: center; justify-content: center; width: var(--shell-cover); height: var(--shell-cover);
  margin-top: var(--shell-cover-top);
}
/* The cover stands whole in the square: the cut-out (upright, about 106 wide of the 150), or —
   while an issue has none — its photo on white, which fills the square.
   ⚠️ No shadow, no ground and no corners on this <img>: its box is the whole SQUARE, not the cover,
   and the shell cannot tell the two pictures apart (it is handed an address). Around the photo any
   of them would draw the white tile the cut-out is there to end.
   The cut-out stands at the LEFT of the square, flush under the mark and the title above it; in
   the middle it read as a cover indented by 22 px. The photo fills the square, so it does not move. */
.shell-feature__cover img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }

/* ---------- Language choice ---------- */
/* In the bar the code with a chevron ("EN"), in the mobile menu the name ("English") — the same list
   behind both (§7a.7 #10). Not drawn; the look borrows the account menu's panel and, for the page's
   own language, the active state of the designer's frame 679:2415. */
.shell-lang { position: relative; }
.shell-lang--bar { display: none; }
/* The code in the bar is one step smaller than the menu's items (13 against 14). */
.shell-lang--bar .shell-nav__item { font-size: var(--shell-lang-size); }
/* The name in the mobile menu: 14/22 (drawn 15/23), and as high as an entry of that menu — it is a
   text link of a menu like them. */
.shell-lang__name {
  display: inline-flex; align-items: center; gap: 4px; min-height: var(--shell-row); border-radius: 4px;
  font-weight: 600; font-size: var(--shell-link); line-height: var(--shell-link-line); color: var(--mn-gray-900); cursor: pointer;
}
.shell-lang__panel {
  display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; width: var(--shell-lang-list); padding: 4px;
  background: var(--mn-surface); border: 1px solid var(--mn-gray-300); border-radius: 10px;
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--mn-gray-900) 18%, transparent);
}
.shell-lang__panel.is-open { display: block; }
/* At the foot of the mobile menu the list opens upward — while a section above it is open, which is
   how that menu opens each time. With every section shut the foot stands right under the heads, and
   the room the list needs above it is not there: two languages just fit, a third would be cut off
   at the bar, where no scrolling reaches it. There it opens downward — the menu scrolls that way. */
.shell-lang--up .shell-lang__panel { top: auto; bottom: calc(100% + 8px); }
.shell-drawer:not(:has(.shell-drawer__body.is-open)) .shell-lang--up .shell-lang__panel {
  top: calc(100% + 8px); bottom: auto;
}
/* A row is a text link of a menu: 36 high from 1024, 40 below, at each of the three places. */
.shell-lang__row {
  display: flex; align-items: center; min-height: var(--shell-row); padding: var(--shell-row-pad) 12px; border-radius: 8px;
  font-weight: 400; font-size: var(--shell-link); line-height: var(--shell-link-line); color: var(--mn-gray-900);
}
@media (hover: hover) { a.shell-lang__row:hover { background: var(--mn-gray-50); } }
.shell-lang__row.is-current { background: var(--mn-green-50); font-weight: 600; color: var(--mn-green-500); }
/* The page does not exist in this language: shown, never to be followed. */
.shell-lang__row.is-disabled { color: var(--mn-gray-500); cursor: default; }

/* ---------- Account menu ---------- */
/* Signed in, the account icon opens the account's menu (§7a.7 #14) — one more thing of the bar that
   is open or not (`open === 'account'` in shell.js), under the rules of the others (§7a.7 #16). The
   list is the platform's account/_menu.html inside DaisyUI's `menu`; this sheet loads after
   Tailwind's, so the `display` here is what closes it. Not drawn: the look of the language list.
   Above the open mobile menu (z 40): on a phone the icon stays in reach over it. */
.shell-account { position: relative; display: flex; }
.shell-account__panel {
  display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; width: var(--shell-account-list); padding: 4px;
  background: var(--mn-surface); border: 1px solid var(--mn-gray-300); border-radius: 10px;
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--mn-gray-900) 18%, transparent);
  font-size: var(--shell-link); line-height: var(--shell-link-line);
}
.shell-account__panel.is-open { display: flex; }
/* Its rows are the language list's rows: a text link of a menu, 36 high from 1024 and 40 below,
   with the same 12 beside the words — DaisyUI's own are 36 with 16. A row is the link, or the
   sign-out's button: DaisyUI makes the FORM around it the row and leaves the button as large as
   its word (67 × 21 — a tap beside the word signed nobody out), so here the form steps back and
   the button is the row. A heading (the name, a section) keeps DaisyUI's weight and tone. */
.shell-account__panel li > a, .shell-account__panel li > form > button {
  min-height: var(--shell-row); padding: var(--shell-row-pad) 12px;
}
.shell-account__panel li > form { display: flex; padding: 0; }
.shell-account__panel li > form > button { flex: 1 1 auto; border-radius: inherit; }
.shell-account__panel .menu-title { padding: var(--shell-row-pad) 12px; font-size: inherit; line-height: inherit; }
/* ⚠️ Until shell.js has marked the header (`shell-header--scripted`) a click on the icon does
   nothing — and this menu holds what stands nowhere else on the page: the way out, and the pages
   of the account. So without the mark it opens the way it did before it became a thing of the
   bar: while the keyboard's focus, or the icon just clicked, is inside it. (Safari does not focus
   a button on a click; there this is the keyboard's way alone.) With the script it never opens on
   mere focus — the mark is what takes this rule away. */
.shell-header:not(.shell-header--scripted) .shell-account:focus-within .shell-account__panel { display: flex; }

/* ---------- Mobile menu (below 1024) ---------- */
/* Covers the page below the bar and scrolls in itself ("Show Guide" open is about 800 high). The
   header does not stick, so shell.js scrolls to the top, measures where the bar ends and locks the
   page behind; until it has, the menu begins at the bar's own height — where nothing stands above
   the header that is the same place. */
.shell-drawer {
  display: none; position: fixed; top: var(--shell-drawer-top, var(--shell-bar)); right: 0; bottom: 0; left: 0; z-index: 40;
  overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--shell-drawer-end); background: var(--mn-surface);
}
html.shell-locked, html.shell-locked body { overflow: hidden; }
/* Every top-level row is a head 44 high (drawn 52) and ends in a hairline. */
.shell-drawer__section { border-bottom: 1px solid var(--mn-gray-200); }
.shell-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: var(--shell-head);
  padding: var(--shell-head-pad) var(--shell-pad); font-weight: 600; font-size: var(--shell-head-size);
  line-height: var(--shell-head-line); color: var(--mn-gray-900); text-align: left; cursor: pointer;
}
.shell-drawer__head--switch { justify-content: flex-start; gap: 6px; color: var(--mn-gray-700); }
.shell-drawer__body { display: none; }
.shell-drawer__body.is-open { display: block; }
.shell-drawer__body--groups { padding-bottom: 6px; }
/* An entry: 40 high with 14/22 (drawn 51 with 15/23), a little to the right of its head. */
.shell-drawer__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--shell-row);
  padding: var(--shell-row-pad) var(--shell-pad) var(--shell-row-pad) calc(var(--shell-pad) + var(--shell-indent));
  font-weight: 500; font-size: var(--shell-link); line-height: var(--shell-link-line); color: var(--mn-gray-800);
}
.shell-drawer__label { display: inline-flex; align-items: center; gap: 6px; }
/* "USA" · "Europe" inside "Show Guide": a label, not a row. */
.shell-drawer__group {
  padding: 12px var(--shell-pad) 4px calc(var(--shell-pad) + var(--shell-indent));
  font-weight: 600; font-size: var(--shell-group); line-height: var(--shell-group-line); letter-spacing: .6px;
  text-transform: uppercase; color: var(--mn-gray-700);
}
/* The subscription's button over the full width; a subscriber gets a quiet line under it. */
.shell-drawer__cta {
  display: flex; flex-direction: column; align-items: center; gap: var(--shell-cta-top);
  padding: var(--shell-cta-top) var(--shell-pad) var(--shell-cta-bottom);
}
.shell-drawer__cta .btn { width: 100%; }
/* The last row: who you are on the left, the language on the right. Its links and the language's
   control are text links of a menu and as high as an entry (40) — drawn, they were as high as
   their words. */
.shell-drawer__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: var(--shell-drawer-foot) var(--shell-pad) 0;
}
.shell-drawer__account { display: flex; flex-wrap: wrap; gap: 0 20px; font-weight: 600; font-size: var(--shell-link); line-height: var(--shell-link-line); }
.shell-drawer__account a { display: inline-flex; align-items: center; min-height: var(--shell-row); border-radius: 4px; color: var(--mn-gray-900); }
.shell-drawer__account a.is-primary { color: var(--mn-green-600); }
@media (hover: hover) {
  .shell-drawer__account a:hover { color: var(--mn-green-700); text-decoration: underline; }
  .shell-drawer__head:hover, .shell-drawer__link:hover { background: var(--mn-gray-50); }
}

/* ---------- Focus ---------- */
/* The atoms' colour (components.css); inside the mobile menu the rows span the screen, so the ring
   sits inside them. */
:is(.shell-logo, .shell-icon, .shell-nav__item, .shell-mega__link, .shell-feature, .shell-lang__name,
    .shell-lang__row, .shell-drawer__account a):focus-visible {
  outline: 2px solid var(--mn-green-600); outline-offset: 2px;
}
:is(.shell-drawer__head, .shell-drawer__link):focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: -2px; }

/* ---------- Which half shows ---------- */
@media (min-width: 1024px) {
  /* Three zones; the side zones share what is left equally, which is what centres the menu. At the
     drawn sizes that was not to be had at 1024 with the way into the auctions, in German; at Stufe
     C it is, with some 50 to spare on each side. Should a longer language or one more entry use
     them up, the gap gives way first, then the menu drifts — it never overflows. */
  .shell-bar { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: clamp(8px, calc(4vw - 29px), 24px); }
  .shell-bar__start { gap: 0; }
  .shell-bar__end { justify-content: flex-end; gap: 0; }
  .shell-icon.shell-burger { display: none; }
  .shell-nav { display: flex; align-items: center; gap: 6px; }
  .shell-lang--bar { display: block; margin-left: var(--shell-lang-gap); }
  .shell-mega.is-open { display: block; }
}
@media (max-width: 1023.98px) {
  .shell-drawer.is-open { display: block; }
}

/* ---------- Shown inside a page (kitchen sink) ---------- */
/* `shell_contained` in the partial: the mobile menu flows under its bar instead of covering the
   window, and shell.js neither scrolls nor locks. The two menus need nothing — they hang on their own
   header anyway. */
.shell-header--contained .shell-drawer { position: static; overflow: visible; border-top: 1px solid var(--mn-gray-300); }

/* ---------- The foot ---------- */
/* shell/_footer.html. Dark and flat (gray 900), on the shell's container like the header — the frame
   draws it 16 narrower, built on 1296 so that the two logos stand under each other (§7a.7, "Breite
   des Footers"). ONE piece of markup: written here for the phone first (frame 5275:765 — one column),
   then for 640 (the card becomes a row) and for 1024 (frame 5274:661 — two bands).

   Its lines and the card's ground are translucent tones of named colours. A browser without
   `color-mix` drops such a declaration, so a solid tone stands before it where a line would
   otherwise be missing. */
.shell-footer { background: var(--mn-gray-900); color: var(--mn-white); }

/* The foot's measures, named in ONE place — the twin of "The scale" at the head of this file, and
   like it the place a change of scale touches (the frames give the shell its proportions, not its
   pixels: §7a.7 Punkt 17). Built is "Stufe C", for the foot about three quarters of what the frames
   draw; every line says what they draw. The phone's values here, what differs from 640 and from
   1024 in the two blocks below; the rules further down only refer to them. Not among them: the
   button's height and label and the size of a small icon (the header's block: `--shell-button…`,
   `--shell-glyph-small`), hairlines, radii, and the fixed gaps of 4 to 6 between neighbours
   (words · chevron, glyph · word, glyph · glyph). */
.shell-footer {
  --shell-foot-band: 32px;                                    /* above and below the foot's content — drawn 48 */
  --shell-foot-stack: 16px;                                   /* between the parts of the phone's column — drawn 24 */
  --shell-foot-base: 16px;                                    /* above the lower band — as drawn: a profile's target and the language's meet in it */
  --shell-foot-gap: 12px;                                     /* between the parts of the lower band — drawn 16 */
  --shell-foot-logo: 170px;                                   /* the wordmark's width — drawn 222 */
  --shell-foot-logo-drop: 18px;                               /* the empty band above the wordmark — drawn 24 */
  --shell-foot-card-pad: 14px;                                /* inside the card — drawn 16 */
  --shell-foot-card-gap: 18px;                                /* words · button in the card — drawn 24 */
  --shell-foot-head: 20px;  --shell-foot-head-line: 28px;     /* the card's heading — drawn 26/39 */
  --shell-foot-sentence-top: 12px;                            /* heading · sentence — drawn 16 */
  --shell-foot-more-top: 6px;                                 /* button · "Manage subscription" — drawn 8 */
  --shell-foot-text: 13px;  --shell-foot-text-line: 20px;     /* links, titles, the card's sentence — drawn 14/21 */
  --shell-foot-small: 12px; --shell-foot-small-line: 18px;    /* claim, legal row, language, signature — as drawn */
  --shell-foot-rows: 6px;                                     /* title · links, and between a group's links — drawn 8 */
  --shell-foot-contact: 12px;                                 /* title · address · profiles — drawn 16 */
  --shell-foot-glyph: 18px; --shell-foot-glyph-box: 22px;     /* a profile's glyph and the box it stands in — drawn 20 in 24 */
  --shell-foot-tap: 40px;                                     /* a profile's target on a phone — drawn 44 */
  --shell-foot-pill: 24px;  --shell-foot-pill-pad: 10px;      /* a contract button: height, room beside its words — drawn 27, 12 */
  --shell-foot-pill-line: 15px;                               /* … and its line (the words are the foot's small 12) — as drawn */
  --shell-foot-pills: 8px;                                    /* between the two — as drawn: they are neighbours for a finger */
  --shell-foot-lang-tap: 6px;                                 /* the language control reaches this far above and below its 18 — as drawn */
}
@media (min-width: 640px) {
  .shell-footer {
    --shell-foot-card-pad: 18px;                              /* drawn 24 */
    --shell-foot-card-gap: 24px;                              /* drawn 32 */
    --shell-foot-button: 164px;                               /* the least width of the card's button — drawn 219 */
  }
}
@media (min-width: 1024px) {
  .shell-footer {
    --shell-foot-base: 12px;                                  /* drawn 16 */
    --shell-foot-gap: 18px;                                   /* hairline · row · signature — drawn 24 */
    --shell-foot-end: 24px;                                   /* below the signature — drawn 32 */
    --shell-foot-logo: 220px;                                 /* drawn 293 */
    --shell-foot-logo-drop: 26px;                             /* drawn 35 */
    --shell-foot-columns: 36px;                               /* wordmark · card — drawn 48 */
    --shell-foot-head: 22px;  --shell-foot-head-line: 30px;   /* drawn 30/45 */
    --shell-foot-card: 118px;                                 /* the card's height, and its picture's place — drawn 157 */
    --shell-foot-card-start: 24px;                            /* before the card's words — drawn 32 */
    --shell-foot-picture-place: 190px;                        /* the place at the card's start the picture lies in (from 1280) — drawn 200 */
    --shell-foot-picture: 132px;                              /* the picture's width; its height follows the file's shape — not drawn: chosen from three samples ("B") */
    --shell-foot-picture-top: 24px;                           /* from the card's upper edge to the picture's, before it is turned — likewise */
    --shell-foot-picture-left: 30px;                          /* from the place's left edge to the picture's, before it is turned — likewise */
    --shell-foot-picture-tilt: -8deg;                         /* how far it leans, to the left — likewise */
    --shell-foot-row: 134px;                                  /* the height the hairlines keep the link row at — drawn 152 */
    --shell-foot-claim: 150px;                                /* the claim's place at the row's start — drawn 157 */
    --shell-foot-profiles: 8px;                               /* between address and profiles — drawn 10 */
    --shell-foot-m-width: 390px; --shell-foot-m-height: 322px;  /* the large M — drawn 509 × 421 */
    --shell-foot-m-top: 29px;                                 /* below the content's top: 3 below the wordmark's — drawn 38 */
    --shell-foot-m-edge: 250px;                               /* its right edge, right of where the content begins — drawn 333 */
    --shell-foot-line: 600px;                                 /* the hairline above the lower row — drawn 800 */
    --shell-foot-spread: 32px;                                /* between language and legal links — drawn 48 */
    --shell-foot-wrap: 10px;                                  /* between the lines of that row where it wraps — drawn 12 */
  }
}

/* The upper band. It is its own stacking context, so that the large M can lie behind everything in
   it without slipping under the foot's ground. ⚠️ It clips only where the M is (from 1024, further
   down): on a phone the band ends right under its last row, and a clip there cut the lower side
   off the focus ring of the address and the lower part off a profile's target — and let the band
   scroll in itself when the keyboard reached one. */
.shell-footer__top { position: relative; isolation: isolate; padding: var(--shell-foot-band) 0 0; }
.shell-footer__grid { position: relative; display: flex; flex-direction: column; gap: var(--shell-foot-stack); }
.shell-footer__m { display: none; }
/* The white wordmark with its addition per language (§7a.7 #7): 170 wide on a phone, 220 from 1024
   (drawn 222 and 293). The frame keeps an empty band above it — built 18 here, 26 there. */
.shell-footer__logo { display: block; align-self: flex-start; margin-top: var(--shell-foot-logo-drop); border-radius: 4px; }
.shell-footer__logo img { display: block; width: var(--shell-foot-logo); max-width: 100%; height: auto; }
.shell-footer__claim { font-size: var(--shell-foot-small); line-height: var(--shell-foot-small-line); }

/* The card about the subscription (§7a.7 #13). One gradient for both widths — the frame of the
   phone draws another one, the desktop's is the decided one. Its heading is a paragraph.
   ⚠️ `overflow: hidden` is part of the picture (from 1280, further down): the card is what cuts
   the lower half of it off. */
.shell-footer__card {
  display: flex; flex-direction: column; gap: var(--shell-foot-card-gap); padding: var(--shell-foot-card-pad);
  overflow: hidden; border-radius: 10px;
  border: 1px solid var(--mn-gray-800); border-color: color-mix(in srgb, var(--mn-gray-700) 60%, transparent);
  background: linear-gradient(92.67deg, color-mix(in srgb, var(--mn-accent-violet) 20%, transparent) 3.03%,
                                        color-mix(in srgb, var(--mn-green-500) 20%, transparent) 68.38%);
}
.shell-footer__picture { display: none; }
.shell-footer__pitch { min-width: 0; }
.shell-footer__heading {
  font-family: Baskervville, Georgia, Cambria, "Times New Roman", serif; font-weight: 400;
  font-size: var(--shell-foot-head); line-height: var(--shell-foot-head-line);
}
.shell-footer__sentence { margin-top: var(--shell-foot-sentence-top); font-size: var(--shell-foot-text); line-height: var(--shell-foot-text-line); }
/* The button — 40 high like the shell's others (the atoms at the shell's scale, further up) — and
   for a subscriber the quiet line 6 below it. */
.shell-footer__cta { display: flex; flex-direction: column; align-items: center; gap: var(--shell-foot-more-top); }
.shell-footer__cta .btn { width: 100%; }
.shell-footer__more {
  border-radius: 4px; font-size: var(--shell-foot-small); line-height: var(--shell-foot-small-line); color: var(--mn-white);
  text-decoration: underline; text-underline-offset: 2px;
}

/* The link groups. A hairline before each — between the groups, and one more before the address. */
.shell-footer__rule {
  flex: none; height: 1px;
  background: var(--mn-gray-800); background: color-mix(in srgb, var(--mn-gray-300) 20%, transparent);
}
.shell-footer__col { display: flex; flex-direction: column; gap: var(--shell-foot-rows); min-width: 0; }
.shell-footer__title { font-weight: 600; font-size: var(--shell-foot-text); line-height: var(--shell-foot-text-line); }
/* The size is set on the LIST: a row is as high as its own line, whatever the link in it says —
   set on the link alone, every row kept the page's 24. */
.shell-footer__links, .shell-footer__contact { font-size: var(--shell-foot-text); line-height: var(--shell-foot-text-line); }
.shell-footer__links { display: flex; flex-direction: column; gap: var(--shell-foot-rows); }
.shell-footer__link { border-radius: 4px; color: var(--mn-white); }
/* A group's title as the control that opens it (below 1024, and only once shell.js is there —
   see the fold rules below). 20 high between two gaps of 16 (drawn 21 between two of 24): the
   padding reaches up to the hairline and down to the list, pulled back by the same margins, so the
   target is 42 high and the groups follow each other every 53 (drawn 70). The chevron stands
   beside the words. */
.shell-footer__fold {
  display: none; align-items: center; gap: 6px;
  padding: var(--shell-foot-stack) 0 var(--shell-foot-rows); margin: calc(-1 * var(--shell-foot-stack)) 0 calc(-1 * var(--shell-foot-rows));
  font-weight: 600; font-size: var(--shell-foot-text); line-height: var(--shell-foot-text-line);
  color: var(--mn-white); text-align: left; cursor: pointer;
}
/* The foot's small icons — the chevron of a group, globe and chevron of the language. */
.shell-footer .shell-chevron, .shell-lang--foot .icon { width: var(--shell-glyph-small); height: var(--shell-glyph-small); }

/* "Get in touch". The address on its own line; a profile is its glyph (18 in a 22 box, drawn 20 in
   24) and, from 1024, its name beside it. On a phone the name is left to the label and the glyph
   gets a 40 target (drawn 44), pulled back by 9 on each side so that it stands where the bare box
   would. */
.shell-footer__col--contact { gap: var(--shell-foot-contact); }
.shell-footer__contact { display: flex; flex-wrap: wrap; gap: var(--shell-foot-contact) 4px; }
.shell-footer__address { flex: 0 0 100%; }
.shell-footer__profile {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-width: var(--shell-foot-tap); min-height: var(--shell-foot-tap);
  margin: calc((var(--shell-foot-glyph-box) - var(--shell-foot-tap)) / 2) 0; border-radius: 4px; color: var(--mn-white);
}
.shell-footer__address + li .shell-footer__profile { margin-left: calc((var(--shell-foot-glyph-box) - var(--shell-foot-tap)) / 2); }
.shell-footer__glyph {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--shell-foot-glyph-box); height: var(--shell-foot-glyph-box);
}
.shell-footer__glyph .icon { width: var(--shell-foot-glyph); height: var(--shell-foot-glyph); }
.shell-footer__word { display: none; }

/* The lower band: on a phone it simply goes on in the column — the language, the legal row as one
   wrapping line with dots between, the two contract buttons, the signature. ⚠️ In the order of the
   markup, which is the desktop row's. The phone's frame draws the language UNDER the buttons; moved
   there by `order`, the keyboard (and a screen reader's swipe) reached it six stops before the
   place it was shown at and then jumped back up — so on a phone it stands one row higher than
   drawn, and what is reached next is what is seen next. */
.shell-footer__bottom { padding: var(--shell-foot-base) 0 var(--shell-foot-band); }
.shell-footer__base { display: flex; flex-direction: column; gap: var(--shell-foot-gap); }
.shell-footer__line { display: none; }
.shell-footer__row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--shell-foot-gap); }
/* The line runs on and wraps, so it is set a little looser than the foot's other small text (1.7). */
.shell-footer__legal { font-size: var(--shell-foot-small); line-height: 1.7; }
.shell-footer__legal-link {
  border-radius: 4px; font-size: var(--shell-foot-small); line-height: inherit; color: var(--mn-white);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
/* "Stop loading maps": a form (it posts), worded and set as one of the row's links. ⚠️ It is
   rendered `hidden` until there is a consent to take back, and a `display` rule beats the attribute
   — the second rule is what keeps it away. */
.shell-footer__revoke { display: inline; }
.shell-footer__revoke[hidden] { display: none; }
/* The contract buttons (§312k, §356a BGB): pills 24 high (drawn 27) in two colours of the frame —
   sage for "cancel" (green 300), sand for "withdraw". They wrap: side by side the English pair
   needs 344, a phone of 360 has 328. */
.shell-footer__contracts { display: flex; flex-wrap: wrap; gap: var(--shell-foot-pills); }
.shell-footer__pill {
  display: inline-flex; align-items: center; height: var(--shell-foot-pill); padding: 0 var(--shell-foot-pill-pad);
  border: 1px solid currentColor; border-radius: 9999px;
  font-weight: 500; font-size: var(--shell-foot-small); line-height: var(--shell-foot-pill-line); white-space: nowrap;
}
.shell-footer__pill--cancel { color: var(--mn-green-300); }
.shell-footer__pill--withdraw { color: var(--mn-accent-sand); }
.shell-footer__signature {
  font-size: var(--shell-foot-small); line-height: var(--shell-foot-small-line); color: var(--mn-gray-500);
}

/* The language choice in the foot (shell/_lang.html, "foot"): globe · name · chevron in the frame's
   lime, the name underlined; the list is the header's and opens upward, from the left edge. The
   control is 18 high as drawn and 30 to the finger. */
.shell-lang--foot .shell-lang__name {
  display: flex; gap: 6px; min-height: 0; padding: var(--shell-foot-lang-tap) 0; margin: calc(-1 * var(--shell-foot-lang-tap)) 0;
  font-weight: 500; font-size: var(--shell-foot-small); line-height: var(--shell-foot-small-line); color: var(--mn-accent-lime);
}
.shell-lang--foot .shell-lang__name span { text-decoration: underline; text-underline-offset: 2px; }
.shell-lang--foot .shell-lang__panel { right: auto; left: 0; }
/* ⚠️ Until shell.js has marked the foot (`shell-footer--folds`, the mark that folds the link groups)
   the control above opens nothing, and the page had no visible way into its other language — the
   header's list and the mobile menu need the script as well. So without the mark the list stands
   in the row itself: plain names in the foot's small type, the page's own in lime, one the page
   exists in underlined like the legal links, one it lacks grayed — and the control is away. */
.shell-footer:not(.shell-footer--folds) .shell-lang__name { display: none; }
.shell-footer:not(.shell-footer--folds) .shell-lang__panel {
  display: flex; flex-wrap: wrap; gap: 4px var(--shell-foot-gap); position: static; width: auto; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.shell-footer:not(.shell-footer--folds) .shell-lang__row {
  min-height: 0; padding: 0; border-radius: 4px; background: none; font-weight: 500;
  font-size: var(--shell-foot-small); line-height: var(--shell-foot-small-line); color: var(--mn-white);
}
.shell-footer:not(.shell-footer--folds) a.shell-lang__row { text-decoration: underline; text-underline-offset: 2px; }
.shell-footer:not(.shell-footer--folds) .shell-lang__row.is-current { color: var(--mn-accent-lime); }
.shell-footer:not(.shell-footer--folds) .shell-lang__row.is-disabled { color: var(--mn-gray-500); }

@media (hover: hover) {
  .shell-footer__link:hover, .shell-footer__profile:hover .shell-footer__word { text-decoration: underline; text-underline-offset: 3px; }
  .shell-footer__profile:hover, .shell-footer__legal-link:hover, .shell-footer__more:hover { color: var(--mn-green-300); }
  .shell-lang--foot .shell-lang__name:hover { color: var(--mn-white); }
  /* A pill fills with its own colour at 15 %; border and words stay. */
  .shell-footer__pill:hover { background: color-mix(in srgb, currentColor 15%, transparent); }
}

/* Focus on the dark ground: the header's green 600 would be 2.6:1 here. Sage for links and controls,
   a pill in its own colour, white around the green button; the rows of the language list lie on
   their white panel and keep the header's ring. */
.shell-footer :is(a, button):focus-visible { outline: 2px solid var(--mn-green-300); outline-offset: 2px; }
.shell-footer .shell-footer__pill:focus-visible { outline-color: currentColor; }
.shell-footer .btn:focus-visible { outline: 2px solid var(--mn-white); outline-offset: 2px; }
.shell-footer .shell-lang__row:focus-visible { outline-color: var(--mn-green-600); }
/* … unless the list stands in the row (no script, above): then a name lies on the dark ground too. */
.shell-footer:not(.shell-footer--folds) .shell-lang__row:focus-visible { outline-color: var(--mn-green-300); }

@media (max-width: 1023.98px) {
  /* One column: the wrapper of claim and link groups dissolves, and the claim moves up under the
     logo (12 below it, drawn 16 — closer than the column's parts) — in the markup it stands with
     the groups, where it is at 1024. */
  .shell-footer__cols { display: contents; }
  .shell-footer__logo { order: 0; }
  .shell-footer__claim { order: 1; margin-top: calc(var(--shell-foot-gap) - var(--shell-foot-stack)); }
  .shell-footer__card { order: 2; }
  .shell-footer__rule, .shell-footer__col { order: 3; }
  .shell-footer__col--contact .shell-footer__title { display: none; }
  /* The accordion — only once the script has said it is there (`shell-footer--folds`): without it
     the groups stay open under their titles, and every link of the foot is in reach. With it, each
     group is shut until its control opens it, independent of the others. */
  .shell-footer--folds .shell-footer__col:not(.shell-footer__col--contact) .shell-footer__title { display: none; }
  .shell-footer--folds .shell-footer__fold { display: flex; }
  .shell-footer--folds .shell-footer__links { display: none; }
  .shell-footer--folds .shell-footer__links.is-open { display: flex; }
}

@media (min-width: 640px) {
  /* Room for words and button side by side. The button is at least 164 wide (drawn 219, for
     "Subscribe") and grows with its words: a subscriber's "Read the current issue" needs 182 at
     this size, more than three quarters of the drawn width hold in one line. */
  .shell-footer__card { flex-direction: row; align-items: center; justify-content: space-between; }
  .shell-footer__pitch { flex: 1 1 0; }
  .shell-footer__cta { flex: none; min-width: var(--shell-foot-button); }
}

@media (min-width: 1024px) {
  /* Here the band has room below its last row, and the M to cut off. */
  .shell-footer__top { overflow: hidden; padding-bottom: var(--shell-foot-band); }
  /* Logo and card, and under them claim and link groups across the whole width. */
  .shell-footer__grid {
    display: grid; grid-template-columns: var(--shell-foot-logo) minmax(0, 1fr); align-items: start;
    column-gap: var(--shell-foot-columns); row-gap: var(--shell-foot-band);
  }
  /* The M of the wordmark (§7a.7 #7): 390 × 322 (drawn 509 × 421), its top 3 below the wordmark's,
     white at 7 %, behind everything. Anchored the way the frame anchors it, to the container and
     not the window: its right edge stands 250 right of where the content begins (drawn 333) and so
     always 6 short of the card (drawn 8). The band cuts off what reaches out of it: the left part
     of the M, and its feet. */
  .shell-footer__m {
    display: block; position: absolute; z-index: -1; top: var(--shell-foot-m-top);
    left: calc(var(--shell-pad) + var(--shell-foot-m-edge) - var(--shell-foot-m-width));
    width: var(--shell-foot-m-width); max-width: none; height: var(--shell-foot-m-height);
    opacity: .07; pointer-events: none; user-select: none;
  }
  /* The card: 118 high (drawn 157), the words in the middle, the button at its end. */
  .shell-footer__card { min-height: var(--shell-foot-card); padding: 0 var(--shell-foot-card-pad) 0 var(--shell-foot-card-start); }
  .shell-footer__sentence { margin-top: 0; }
  /* Content-wide columns spread over the row, the claim at its start (`space-between`, as drawn):
     with fewer groups the gaps grow and "Get in touch" stays at the right edge. The hairlines keep
     the row 134 high whatever the groups hold — drawn 152, around a group of four links that is
     137 high there and 124 here: three quarters of 152 would be lower than that group, and the
     row's height would hang on what the groups hold after all. The claim's place is drawn 157
     wide and built 150: its words keep their 12 px and need 137 in German — three quarters of
     the place would break the one line. */
  .shell-footer__cols {
    grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-start;
    min-height: var(--shell-foot-row);
  }
  .shell-footer__claim { flex: none; width: var(--shell-foot-claim); }
  .shell-footer__rule { align-self: stretch; width: 1px; height: auto; }
  .shell-footer__col { flex: none; }
  .shell-footer__title, .shell-footer__link { white-space: nowrap; }
  .shell-footer__contact { flex-direction: column; flex-wrap: nowrap; gap: var(--shell-foot-profiles); }
  .shell-footer__profile { justify-content: flex-start; min-width: 0; min-height: var(--shell-foot-glyph-box); margin: 0; }
  .shell-footer__address + li .shell-footer__profile { margin-left: 0; }
  .shell-footer__word { display: inline; }

  /* The lower band: the 600 hairline (drawn 800), then language · legal links on the left and the
     two pills on the right, then the signature, centred. The row wraps before anything is cut. */
  .shell-footer__bottom { padding-bottom: var(--shell-foot-end); }
  .shell-footer__base { align-items: center; }
  .shell-footer__line {
    display: block; width: min(var(--shell-foot-line), 100%); height: 1px;
    background: var(--mn-gray-800); background: color-mix(in srgb, var(--mn-gray-300) 20%, transparent);
  }
  .shell-footer__row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--shell-foot-wrap) var(--shell-foot-spread); width: 100%; }
  .shell-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--shell-foot-rows) var(--shell-foot-spread); line-height: var(--shell-foot-small-line); }
  .shell-footer__dot { display: none; }
  .shell-footer__contracts { gap: var(--shell-foot-pills) var(--shell-foot-gap); margin-left: auto; }
  .shell-footer__signature { text-align: center; }
}

@media (min-width: 1280px) {
  /* The card's picture (`shell.footer.card_picture` — for the magazine the flat cover artwork of
     one issue, always the same file): it lies at an angle in a place of 190 × 118 at the card's
     start, 132 wide, leaning 8° to the left, and only its upper half is seen — the card cuts off
     what reaches below its edge (`overflow: hidden` on the card, further up). Chosen by the user
     from three samples on 2026-10-07 ("B"); before that the newest issue's cut-out stood here
     upright, 94 high. From the width at which words and button keep their one line beside it:
     at 1024 the place leaves the card's sentence 250 of the 392 its German wording needs, and it
     broke into two lines up to about 1170, for a guest and a subscriber, in both languages
     (measured 2026-10-07).
     The picture is turned about a point in its upper third, so its upper edge stays well inside
     the card: the right corner about 16 below the card's upper edge, the left one about 35.
     ⚠️ Edge and shadow are a `box-shadow` — right here, because this picture is a RECTANGLE (the
     flat artwork, no cut-out; the menu's cover further up may be either and gets neither). Two
     layers: a fine light edge, because the artwork is nearly black at its edges and would melt
     into the card, and a soft dark shadow. Without `color-mix` the edge stays, as a solid tone. */
  .shell-footer__card { padding-left: 0; }
  .shell-footer__card--plain { padding-left: var(--shell-foot-card-start); }
  .shell-footer__picture {
    display: block; position: relative; align-self: stretch; flex: none;
    width: var(--shell-foot-picture-place);
  }
  .shell-footer__picture img {
    position: absolute; top: var(--shell-foot-picture-top); left: var(--shell-foot-picture-left);
    width: var(--shell-foot-picture); max-width: none; height: auto;
    transform: rotate(var(--shell-foot-picture-tilt)); transform-origin: 50% 30%;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--mn-gray-700);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mn-white) 14%, transparent),
                0 10px 22px color-mix(in srgb, var(--mn-gray-900) 90%, transparent);
  }
}