/* Tresen · Seitenrahmen (AP-15): Kopf, Inhalt, Fuß. Gleiche Regeln wie bauteile.css, geprüft in tests/test_designsystem.py. */

html, body { height: 100%; }
.rahmen { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
.kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4); background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.kopf__marke { font-family: var(--anzeige); font-weight: 800; font-size: 1.15rem; color: var(--tinte); text-decoration: none; }
.inhalt { width: 100%; max-width: 72rem; margin: 0 auto; padding: var(--s5) var(--s4); display: grid; gap: var(--s5); align-content: start; }
.fuss { padding: var(--s3) var(--s4); color: var(--leise); font-size: 0.8rem; }
.zum-inhalt { position: absolute; left: var(--s2); top: var(--s2); padding: var(--s2) var(--s3); background: var(--flaeche);
  border-radius: var(--r-s); transform: translateY(-200%); }
.zum-inhalt:focus { transform: none; }

/* Musterseite: jedes Bauteil in jedem Zustand nebeneinander */
.muster { display: grid; gap: var(--s3); }
.muster__reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }

/* Symbole: Phosphor Regular, lokal unter schriften/phosphor (MIT-Lizenz in LICENSE.txt). Nur die genutzten Zeichen. */
@font-face { font-family: "Phosphor"; font-style: normal; font-weight: 400; font-display: block;
  src: url("./schriften/phosphor/phosphor-regular.woff2") format("woff2"); }
.ph { font-family: "Phosphor"; font-style: normal; font-weight: 400; line-height: 1; speak: never; display: inline-block;
  font-size: 1.15em; inline-size: 1em; flex: none; -webkit-font-smoothing: antialiased; }
.ph-arrow-clockwise::before { content: "\e036"; }
.ph-arrow-counter-clockwise::before { content: "\e038"; }
.ph-arrow-down::before { content: "\e03e"; }
.ph-arrow-square-out::before { content: "\e5de"; }
.ph-arrow-up::before { content: "\e08e"; }
.ph-arrows-left-right::before { content: "\e0a0"; }
.ph-bank::before { content: "\e0b4"; }
.ph-bell::before { content: "\e0ce"; }
.ph-bicycle::before { content: "\e0d6"; }
.ph-calendar-blank::before { content: "\e10a"; }
.ph-calendar-check::before { content: "\e712"; }
.ph-calendar-dots::before { content: "\e7b4"; }
.ph-calendar-x::before { content: "\e10c"; }
.ph-camera::before { content: "\e10e"; }
.ph-caret-down::before { content: "\e136"; }
.ph-caret-left::before { content: "\e138"; }
.ph-caret-right::before { content: "\e13a"; }
.ph-caret-up-down::before { content: "\e140"; }
.ph-cash-register::before { content: "\ed80"; }
.ph-chart-line-up::before { content: "\e156"; }
.ph-chat-text::before { content: "\e17a"; }
.ph-check::before { content: "\e182"; }
.ph-check-circle::before { content: "\e184"; }
.ph-circle::before { content: "\e18a"; }
.ph-clock::before { content: "\e19a"; }
.ph-clock-counter-clockwise::before { content: "\e1a0"; }
.ph-copy::before { content: "\e1ca"; }
.ph-credit-card::before { content: "\e1d2"; }
.ph-desktop::before { content: "\e560"; }
.ph-dots-six-vertical::before { content: "\eae2"; }
.ph-dots-three::before { content: "\e1fe"; }
.ph-download-simple::before { content: "\e20c"; }
.ph-envelope-simple::before { content: "\e218"; }
.ph-eye::before { content: "\e220"; }
.ph-file-text::before { content: "\e23a"; }
.ph-gauge::before { content: "\e628"; }
.ph-gear-six::before { content: "\e272"; }
.ph-gift::before { content: "\e276"; }
.ph-globe::before { content: "\e288"; }
.ph-house::before { content: "\e2c2"; }
.ph-image::before { content: "\e2ca"; }
.ph-info::before { content: "\e2ce"; }
.ph-key::before { content: "\e2d6"; }
.ph-lifebuoy::before { content: "\e63a"; }
.ph-lightning::before { content: "\e2de"; }
.ph-link::before { content: "\e2e2"; }
.ph-list::before { content: "\e2f0"; }
.ph-list-bullets::before { content: "\e2f2"; }
.ph-list-checks::before { content: "\eadc"; }
.ph-list-dashes::before { content: "\e2f4"; }
.ph-lock-simple::before { content: "\e308"; }
.ph-magnifying-glass::before { content: "\e30c"; }
.ph-money::before { content: "\e588"; }
.ph-moon::before { content: "\e330"; }
.ph-newspaper::before { content: "\e344"; }
.ph-note-pencil::before { content: "\e34c"; }
.ph-package::before { content: "\e390"; }
.ph-pencil-simple::before { content: "\e3b4"; }
.ph-percent::before { content: "\e3b6"; }
.ph-phone::before { content: "\e3b8"; }
.ph-plug::before { content: "\e946"; }
.ph-plus::before { content: "\e3d4"; }
.ph-plus-circle::before { content: "\e3d6"; }
.ph-prohibit::before { content: "\e3de"; }
.ph-puzzle-piece::before { content: "\e596"; }
.ph-receipt::before { content: "\e3ec"; }
.ph-rocket-launch::before { content: "\e3fe"; }
.ph-shield-check::before { content: "\e40c"; }
.ph-sidebar-simple::before { content: "\ec24"; }
.ph-sign-out::before { content: "\e42a"; }
.ph-signature::before { content: "\ebac"; }
.ph-star::before { content: "\e46a"; }
.ph-storefront::before { content: "\e470"; }
.ph-sun::before { content: "\e472"; }
.ph-tag::before { content: "\e478"; }
.ph-tag-simple::before { content: "\e47a"; }
.ph-text-aa::before { content: "\e6ee"; }
.ph-trash::before { content: "\e4a6"; }
.ph-tray::before { content: "\e4aa"; }
.ph-upload-simple::before { content: "\e4c0"; }
.ph-user::before { content: "\e4c2"; }
.ph-user-circle::before { content: "\e4c4"; }
.ph-user-plus::before { content: "\e4d0"; }
.ph-users::before { content: "\e4d6"; }
.ph-wallet::before { content: "\e68a"; }
.ph-warning::before { content: "\e4e0"; }
.ph-wrench::before { content: "\e5d4"; }
.ph-x::before { content: "\e4f6"; }

/* Büro-Rahmen (AP-33, AP-99; Aussehen nach der Vorschau, Go Florian 06.10.2026): links die einklappbare Seitenleiste
   mit Symbolen, Gruppen, Zählern und der Person unten; oben eine schmale Leiste mit Pfad, Suche, Hell/Dunkel und
   Glocke. Schmal wird die Leiste zur Schublade, unten steht die Schnellleiste (E5). */
.inhalt:has(> .buero) { max-width: none; padding: 0; }
.rahmen:has(.buero) > .kopf, .rahmen:has(.buero) > .fuss { display: none; }
.rahmen:has(.buero) { display: block; }
.buero { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
.buero__haupt { display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.buero__inhalt { display: grid; gap: var(--s5); align-content: start; min-width: 0; padding: var(--s5) var(--s4) var(--s9); }

.buero-leiste { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: var(--s2); background: var(--flaeche);
  border-inline-end: 1px solid var(--linie); position: fixed; inset: 0 auto 0 0; inline-size: 17rem; z-index: 30;
  transform: translateX(-100%); transition: transform 0.2s; }
:root[data-schublade] .buero-leiste, .buero-leiste:target { transform: none; box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--tinte) 35%, transparent); }
@media (prefers-reduced-motion: reduce) { .buero-leiste { transition: none; } }
.marke { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s3) var(--s2); color: var(--tinte); text-decoration: none; min-width: 0; }
.marke__logo { inline-size: 32px; block-size: 32px; border-radius: var(--r-s); display: grid; place-items: center; flex: none;
  background: var(--aktion); color: var(--aktion-auf); font-family: var(--anzeige); font-weight: 800; }
.marke__text { display: grid; min-width: 0; line-height: 1.25; }
.marke__text b { font-family: var(--anzeige); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marke__text small { color: var(--leise); font-size: 0.75rem; }
.suchknopf { display: flex; align-items: center; gap: var(--s2); margin: 0 var(--s3); padding: var(--s2) var(--s3); min-height: 40px;
  border: 1px solid var(--linie); border-radius: var(--r-s); background: var(--grund); color: var(--leise); text-decoration: none; }
.suchknopf:hover { border-color: var(--control-border); color: var(--tinte); }
.suchknopf kbd { margin-inline-start: auto; font-family: var(--mono); font-size: 0.68rem; padding: 0 var(--s1); border: 1px solid var(--linie); border-radius: var(--r-s); }
.seitenleiste { display: grid; gap: var(--s1); align-content: start; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s2) var(--s3); }
.seitenleiste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.seitenleiste__gruppe { margin: 0; font-family: var(--schrift); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--leise); padding: var(--s3) var(--s2) var(--s1); }
.seitenleiste a { display: flex; align-items: center; gap: var(--s3); min-height: 36px; padding: 0 var(--s2); border-radius: var(--r-s);
  color: var(--tinte); text-decoration: none; font-weight: 500; white-space: nowrap; box-shadow: none; }
.seitenleiste a:hover { background: var(--flaeche-2); }
.seitenleiste a[aria-current="page"] { background: var(--flaeche-2); color: var(--tinte); font-weight: 650; box-shadow: none; }
.seitenleiste a[aria-current="page"] > .ph { color: var(--aktion); }
.seitenleiste__wort { overflow: hidden; text-overflow: ellipsis; }
.seitenleiste__zahl { margin-inline-start: auto; min-inline-size: 20px; padding: 0 var(--s2); border-radius: var(--r-pille); background: var(--aktion);
  color: var(--aktion-auf); font-family: var(--mono); font-size: 0.68rem; line-height: 20px; text-align: center; }
.seitenleiste__unter { margin: var(--s1) 0 var(--s1) var(--s5); padding-inline-start: var(--s2); border-inline-start: 1px solid var(--linie); }
.seitenleiste__unter a { min-height: 32px; font-weight: 500; font-size: 0.875rem; color: var(--leise); }
.seitenleiste__unter a[aria-current="page"] { color: var(--tinte); }

.person { position: relative; border-top: 1px solid var(--linie); padding: var(--s2); }
.person__knopf { list-style: none; display: flex; align-items: center; gap: var(--s3); padding: var(--s2); border-radius: var(--r-s); cursor: pointer; }
.person__knopf::-webkit-details-marker { display: none; }
.person__knopf:hover { background: var(--flaeche-2); }
.person__knopf > .ph { margin-inline-start: auto; color: var(--leise); }
.avatar { inline-size: 32px; block-size: 32px; border-radius: var(--r-pille); display: grid; place-items: center; flex: none;
  background: var(--aktion-zart); color: var(--aktion); font-weight: 700; font-size: 0.8rem; }
.person__text { display: grid; min-width: 0; line-height: 1.25; }
.person__text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person__text small { color: var(--leise); font-size: 0.75rem; }
.menuekarte { position: absolute; inset: auto var(--s2) calc(100% - var(--s1)) var(--s2); display: grid; gap: 0; padding: var(--s1);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); z-index: 35;
  box-shadow: 0 var(--s2) var(--s5) color-mix(in srgb, var(--tinte) 14%, transparent); }
.menuekarte a, .menuekarte button { display: flex; align-items: center; gap: var(--s3); min-height: 36px; padding: 0 var(--s2); border: 0;
  border-radius: var(--r-s); background: none; color: var(--tinte); font: inherit; text-align: start; text-decoration: none; cursor: pointer; inline-size: 100%; }
.menuekarte a:hover, .menuekarte button:hover, .menuekarte button[aria-pressed="true"] { background: var(--flaeche-2); }
.menuekarte form { margin: 0; display: grid; }
.menuekarte hr { border: 0; border-top: 1px solid var(--linie); margin: var(--s1) 0; }
.menuekarte__thema { display: grid; gap: 0; }

.buero-kopf { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s2); min-height: 56px;
  padding: var(--s2) var(--s4); background: var(--grund); border-bottom: 1px solid var(--linie); }
.symbolknopf { position: relative; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border: 1px solid transparent;
  border-radius: var(--r-s); background: none; color: var(--tinte); text-decoration: none; cursor: pointer; font: inherit; }
.symbolknopf:hover { background: var(--flaeche-2); }
.symbolknopf .ph { font-size: 1.25rem; }
.buero-kopf__trenner { inline-size: 1px; block-size: 20px; background: var(--linie); margin: 0 var(--s1); }
.pfad { display: flex; align-items: center; gap: var(--s2); margin: 0; min-width: 0; color: var(--leise); }
.pfad b { color: var(--tinte); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buero-kopf__rechts { position: relative; margin-inline-start: auto; display: flex; align-items: center; gap: var(--s1); }
.glocke__zahl { position: absolute; top: 2px; right: 2px; min-inline-size: 18px; block-size: 18px; padding: 0 var(--s1); border-radius: var(--r-pille);
  display: grid; place-items: center; background: var(--fehler); color: var(--fehler-auf); font-size: 0.65rem; font-weight: 700; }
.meldungsfenster { position: absolute; top: calc(100% + var(--s2)); right: 0; inline-size: min(24rem, calc(100vw - 2rem)); z-index: 25; display: grid;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r);
  box-shadow: 0 var(--s3) var(--s6) color-mix(in srgb, var(--tinte) 16%, transparent); }
.meldungsfenster[hidden] { display: none; }
.meldungsfenster__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--linie); }
.meldungsfenster__kopf button { border: 0; background: none; color: var(--aktion); font: inherit; font-size: 0.85rem; cursor: pointer; }
.meldungsfenster__reiter { display: flex; gap: var(--s1); padding: var(--s2) var(--s3) 0; }
.meldungsfenster__reiter button { border: 0; background: none; padding: var(--s1) var(--s3); border-radius: var(--r-s); color: var(--leise); font: inherit; font-weight: 500; cursor: pointer; }
.meldungsfenster__reiter button[aria-selected="true"] { background: var(--flaeche-2); color: var(--tinte); }
.meldungen { list-style: none; margin: 0; padding: var(--s1); display: grid; gap: 0; max-height: 22rem; overflow-y: auto; }
.meldung { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-s);
  color: var(--tinte); text-decoration: none; }
.meldung:hover { background: var(--flaeche-2); }
.meldung__symbol { inline-size: 32px; block-size: 32px; border-radius: var(--r-s); display: grid; place-items: center; background: var(--flaeche-2); }
.meldung b { display: block; font-weight: 600; }
.meldung small { display: block; color: var(--leise); }
.meldung--gelesen b { font-weight: 400; color: var(--leise); }
.meldung__neu { inline-size: 8px; block-size: 8px; border-radius: var(--r-pille); background: var(--aktion); margin-top: var(--s2); }
.meldungen__leer { padding: var(--s5); text-align: center; color: var(--leise); }
.meldungsfenster__fuss { margin: 0; padding: var(--s3) var(--s4); border-top: 1px solid var(--linie); text-align: center; }
.meldungsfenster__fuss a { color: var(--aktion); font-weight: 600; text-decoration: none; }

.schleier { position: fixed; inset: 0; z-index: 40; display: grid; place-items: start center; padding: var(--s9) var(--s4) 0;
  background: color-mix(in srgb, var(--tinte) 40%, transparent); }
.schleier[hidden] { display: none; }
.befehle { inline-size: min(36rem, 100%); overflow: hidden; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l);
  box-shadow: 0 var(--s5) var(--s8) color-mix(in srgb, var(--tinte) 30%, transparent); }
.befehle__suche { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--linie); }
.befehle__suche input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--tinte); font: inherit; font-size: 1rem; }
.befehle__liste { list-style: none; margin: 0; padding: var(--s1); max-height: 22rem; overflow-y: auto; }
.befehle__gruppe { padding: var(--s2) var(--s3) var(--s1); font-size: 0.72rem; color: var(--leise); }
.befehl { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-s); color: var(--tinte); text-decoration: none; }
.befehl small { margin-inline-start: auto; color: var(--leise); }
.befehl:hover, .befehl[aria-selected="true"] { background: var(--flaeche-2); }
.befehle__leer { padding: var(--s4); color: var(--leise); text-align: center; }
.befehle__fuss { display: flex; gap: var(--s4); margin: 0; padding: var(--s2) var(--s4); border-top: 1px solid var(--linie); color: var(--leise); font-size: 0.78rem; }

.unterleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: space-around; gap: var(--s1);
  padding: var(--s1) var(--s2); background: var(--flaeche); border-top: 1px solid var(--linie); }
.unterleiste a { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; min-height: 48px;
  color: var(--leise); text-decoration: none; font-weight: 600; font-size: 0.72rem; border-radius: var(--r-s); }
.unterleiste a .ph { font-size: 1.3rem; }
.unterleiste a[aria-current="page"] { color: var(--aktion); }
@media (max-width: 59.99rem) { .pfad__weg { display: none; } }
@media (min-width: 60rem) {
  .buero { grid-template-columns: 16rem minmax(0, 1fr); }
  .buero-leiste { position: sticky; top: 0; block-size: 100vh; inline-size: auto; transform: none; box-shadow: none; z-index: 21; }
  .buero__inhalt { padding: var(--s6) var(--s6) var(--s8); }
  .unterleiste { display: none; }
  /* Eingeklappt: nur noch Symbole; der Name steht im Titel jedes Eintrags. */
  :root[data-leiste="eng"] .buero { grid-template-columns: 4rem minmax(0, 1fr); }
  :root[data-leiste="eng"] :is(.marke__text, .suchknopf span, .suchknopf kbd, .seitenleiste__gruppe, .seitenleiste__wort, .seitenleiste__unter, .person__text, .person__knopf > .ph) { display: none; }
  :root[data-leiste="eng"] :is(.marke, .suchknopf, .seitenleiste a, .person__knopf) { justify-content: center; }
  :root[data-leiste="eng"] .suchknopf { margin: 0 var(--s2); padding: var(--s2); }
  :root[data-leiste="eng"] .seitenleiste__zahl { position: absolute; inset: 2px 2px auto auto; min-inline-size: 8px; block-size: 8px; padding: 0; font-size: 0; }
  :root[data-leiste="eng"] .seitenleiste a { position: relative; }
  :root[data-leiste="eng"] .menuekarte { inset-inline-end: auto; inline-size: 14rem; }
}

/* AP-40: Einstellungen bleiben ohne Skript als Sprungnavigation und aufklappbare Standortpläne bedienbar. */
.einstellungen-sprung { display:flex; flex-wrap:wrap; gap:var(--s2); margin-block:var(--s4) var(--s5) }
.einstellungen-sprung a { border:1px solid var(--linie); border-radius:var(--r-pille); padding:var(--s2) var(--s3) }
.einstellungsgruppe { scroll-margin-top:1rem; margin-block:var(--s4) }
.formular-raster { display:grid; grid-template-columns:minmax(9rem, 14rem) minmax(12rem, 32rem); gap:var(--s3); align-items:center }
.folgenhinweis { border-inline-start:.25rem solid var(--aktion); padding:var(--s3) var(--s4); background:var(--aktion-zart) }
.standort-zeiten { margin-block:var(--s4); border:1px solid var(--linie); border-radius:var(--r-s); padding:var(--s3) }
.standort-zeiten > summary { cursor:pointer; font-weight:700 }
.kacheln { list-style:none; margin:0 0 var(--s5); padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:var(--s3) }
.kachel { display:grid; align-content:start; gap:var(--s1); padding:var(--s4); border:1px solid var(--linie); border-radius:var(--r); background:var(--flaeche) }
.kachel h3 { margin:0; font-size:1rem }
.kachel h3 a { color:var(--tinte); text-decoration:none }
.kachel h3 a::after { content:" →"; color:var(--aktion) }
.kachel:hover, .kachel:focus-within { border-color:var(--aktion) }
.kachel p { margin:0; color:var(--leise); font-size:0.875rem }
.kachel .kachel__stand { color:var(--tinte); font-weight:600 }
.anlegen > summary { list-style:none; display:inline-flex; margin-block:var(--s3) }
.anlegen > summary::-webkit-details-marker { display:none }
.anlegen[open] > summary { margin-block-end:var(--s3) }
.zeitentabelle { inline-size:100%; border-collapse:collapse; margin-block:var(--s3) }
.zeitentabelle th, .zeitentabelle td { padding:var(--s2); border-block-end:1px solid var(--linie); text-align:start; vertical-align:middle }
.zeitentabelle tbody th { font:inherit; font-weight:600; text-transform:none; letter-spacing:normal; color:var(--tinte); inline-size:9rem }
.zeitentabelle td:nth-child(2) { inline-size:6rem }
.zeitentabelle__zeiten { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); align-items:center }
.zeitpaar { display:inline-flex; align-items:center; gap:var(--s2) }
.zeitpaar__und { color:var(--leise) }
.zeiten-raster { display:grid; grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr)); gap:var(--s3); margin-block:var(--s4) }
.zeiten-raster fieldset { display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); border:1px solid var(--linie); border-radius:var(--r-s); padding:var(--s3) }
.zeiten-raster legend { font-weight:700 }
@media (max-width: 36rem) { .formular-raster { grid-template-columns:1fr } }
.glocke__zahl[hidden], .seitenleiste__zahl[hidden], [data-nur-mit-skript][hidden] { display: none; }

/* Q-7 (AP-102): Mit dem Finger ist jedes Ziel mindestens 44 × 44 px groß. Am Rechner mit Maus bleiben kleine Knöpfe
   klein; ein Touch-Gerät erkennt der Browser am groben Zeiger. */
@media (pointer: coarse) {
  .knopf--klein, .chip, .chip__weg, .symbolknopf, .menuekarte button, .menuekarte a, .segment button, .segment a,
  .hinzufuegen__wahl, .bildwahl__knoepfe button, .zeile__weg, .kal-blaettern a {
    min-block-size: 44px; min-inline-size: 44px;
  }
  .symbolknopf { inline-size: 44px; block-size: 44px; }
  /* Der Editor setzt seine Geräteknöpfe im Büro bewusst flach; der Finger braucht trotzdem 44px. */
  .knopf.knopf--entfernen, .buero__inhalt .ed__geraet > button { min-block-size: 44px; min-inline-size: 44px; }
}